valtio - npm Package Compare versions

Comparing version 0.4.7 to 0.4.8

index.cjs.js

@@ -16,19 +16,28 @@ 'use strict';
 var TARGET = Symbol();
-var createMutableSource = function createMutableSource(target, _getVersion) {
+var GET_VERSION = Symbol();
+var createMutableSource = function createMutableSource(target, getVersion) {
   var _ref;
 
-  return _ref = {}, _ref[TARGET] = target, _ref;
+  return _ref = {}, _ref[TARGET] = target, _ref[GET_VERSION] = getVersion, _ref;
 };
-var useMutableSource = function useMutableSource(source, getSnapshot, _subscribe) {
-  var subscription = react.useMemo(function () {
-    return {
-      getCurrentValue: function getCurrentValue() {
-        return getSnapshot(source[TARGET]);
-      },
-      subscribe: function subscribe(callback) {
-        return _subscribe(source[TARGET], callback);
-      }
-    };
-  }, [source, getSnapshot, _subscribe]);
-  return useSubscription.useSubscription(subscription);
+var useMutableSource = function useMutableSource(source, getSnapshot, subscribe) {
+  var lastVersion = react.useRef(0);
+  var versionDiff = source[GET_VERSION](source[TARGET]) - lastVersion.current; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  var getCurrentValue = react.useCallback(function () {
+    return getSnapshot(source[TARGET]);
+  }, [source, getSnapshot, versionDiff]);
+  var sub = react.useCallback(function (callback) {
+    return subscribe(source[TARGET], function () {
+      lastVersion.current = source[GET_VERSION](source[TARGET]);
+      callback();
+    });
+  }, [source, subscribe]);
+  react.useEffect(function () {
+    lastVersion.current = source[GET_VERSION](source[TARGET]);
+  });
+  return useSubscription.useSubscription({
+    getCurrentValue: getCurrentValue,
+    subscribe: sub
+  });
 };
@@ -39,2 +48,4 @@
 var SNAPSHOT = Symbol();
+var PROMISE_RESULT = Symbol();
+var PROMISE_ERROR = Symbol();
 
@@ -108,7 +119,12 @@ var isSupportedObject = function isSupportedObject(x) {
           } else if (value instanceof Promise) {
-            Object.defineProperty(_snapshot, key, {
-              get: function get() {
-                throw value;
-              }
-            });
+            if (value[PROMISE_RESULT]) {
+              _snapshot[key] = value[PROMISE_RESULT];
+            } else {
+              var errorOrPromise = value[PROMISE_ERROR] || value;
+              Object.defineProperty(_snapshot, key, {
+                get: function get() {
+                  throw errorOrPromise;
+                }
+              });
+            }
           } else if (value[VERSION]) {
@@ -146,3 +162,3 @@ _snapshot[key] = value[SNAPSHOT];
     },
-    set: function set(target, prop, value, receiver) {
+    set: function set(target, prop, value) {
       var prevValue = target[prop];
@@ -164,3 +180,7 @@
         target[prop] = value.then(function (v) {
-          receiver[prop] = v;
+          target[prop][PROMISE_RESULT] = v;
+          notifyUpdate();
+        }).catch(function (e) {
+          target[prop][PROMISE_ERROR] = e;
+          notifyUpdate();
         });
@@ -195,3 +215,10 @@ } else {
 };
-var subscribe = function subscribe(p, callback) {
+var getVersion = function getVersion(p) {
+  if (typeof process === 'object' && process.env.NODE_ENV !== 'production' && (!p || !p[VERSION])) {
+    throw new Error('Please use proxy object');
+  }
+
+  return p[VERSION];
+};
+var subscribe = function subscribe(p, callback, notifyInSync) {
   if (typeof process === 'object' && process.env.NODE_ENV !== 'production' && (!p || !p[LISTENERS])) {
@@ -204,2 +231,7 @@ throw new Error('Please use proxy object');
   var listener = function listener(nextVersion) {
+    if (notifyInSync) {
+      callback();
+      return;
+    }
+
     pendingVersion = nextVersion;
@@ -230,3 +262,3 @@ Promise.resolve().then(function () {
   if (!mutableSourceCache.has(p)) {
-    mutableSourceCache.set(p, createMutableSource(p));
+    mutableSourceCache.set(p, createMutableSource(p, getVersion));
   }
@@ -237,3 +269,3 @@
 
-var useProxy = function useProxy(p) {
+var useProxy = function useProxy(p, options) {
   var affected = new WeakMap();
@@ -244,3 +276,3 @@ var lastAffected = react.useRef();
   });
-  var getChangedSnapshot = react.useMemo(function () {
+  var getSnapshot = react.useMemo(function () {
     var prevSnapshot = null;
@@ -262,3 +294,7 @@ var deepChangedCache = new WeakMap();
   }, []);
-  var currSnapshot = useMutableSource(getMutableSource(p), getChangedSnapshot, subscribe);
+  var notifyInSync = options == null ? void 0 : options.sync;
+  var sub = react.useCallback(function (p, cb) {
+    return subscribe(p, cb, notifyInSync);
+  }, [notifyInSync]);
+  var currSnapshot = useMutableSource(getMutableSource(p), getSnapshot, sub);
   var proxyCache = react.useMemo(function () {
@@ -265,0 +301,0 @@ return new WeakMap();

index.d.ts

@@ -1,3 +0,6 @@
-import { proxy, subscribe, snapshot } from './vanilla';
-declare const useProxy: <T extends object>(p: T) => T;
+import { proxy, subscribe, snapshot, NonPromise } from './vanilla';
+declare type Options = {
+    sync?: boolean;
+};
+declare const useProxy: <T extends object>(p: T, options?: Options | undefined) => NonPromise<T>;
 export { proxy, subscribe, snapshot, useProxy };

index.iife.js

@@ -11,19 +11,28 @@ var valtio = (function (exports, react, proxyCompare, useSubscription) {
   var TARGET = Symbol();
-  var createMutableSource = function createMutableSource(target, _getVersion) {
+  var GET_VERSION = Symbol();
+  var createMutableSource = function createMutableSource(target, getVersion) {
     var _ref;
 
-    return _ref = {}, _ref[TARGET] = target, _ref;
+    return _ref = {}, _ref[TARGET] = target, _ref[GET_VERSION] = getVersion, _ref;
   };
-  var useMutableSource = function useMutableSource(source, getSnapshot, _subscribe) {
-    var subscription = react.useMemo(function () {
-      return {
-        getCurrentValue: function getCurrentValue() {
-          return getSnapshot(source[TARGET]);
-        },
-        subscribe: function subscribe(callback) {
-          return _subscribe(source[TARGET], callback);
-        }
-      };
-    }, [source, getSnapshot, _subscribe]);
-    return useSubscription.useSubscription(subscription);
+  var useMutableSource = function useMutableSource(source, getSnapshot, subscribe) {
+    var lastVersion = react.useRef(0);
+    var versionDiff = source[GET_VERSION](source[TARGET]) - lastVersion.current; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    var getCurrentValue = react.useCallback(function () {
+      return getSnapshot(source[TARGET]);
+    }, [source, getSnapshot, versionDiff]);
+    var sub = react.useCallback(function (callback) {
+      return subscribe(source[TARGET], function () {
+        lastVersion.current = source[GET_VERSION](source[TARGET]);
+        callback();
+      });
+    }, [source, subscribe]);
+    react.useEffect(function () {
+      lastVersion.current = source[GET_VERSION](source[TARGET]);
+    });
+    return useSubscription.useSubscription({
+      getCurrentValue: getCurrentValue,
+      subscribe: sub
+    });
   };
@@ -34,2 +43,4 @@
   var SNAPSHOT = Symbol();
+  var PROMISE_RESULT = Symbol();
+  var PROMISE_ERROR = Symbol();
 
@@ -103,7 +114,12 @@ var isSupportedObject = function isSupportedObject(x) {
             } else if (value instanceof Promise) {
-              Object.defineProperty(_snapshot, key, {
-                get: function get() {
-                  throw value;
-                }
-              });
+              if (value[PROMISE_RESULT]) {
+                _snapshot[key] = value[PROMISE_RESULT];
+              } else {
+                var errorOrPromise = value[PROMISE_ERROR] || value;
+                Object.defineProperty(_snapshot, key, {
+                  get: function get() {
+                    throw errorOrPromise;
+                  }
+                });
+              }
             } else if (value[VERSION]) {
@@ -141,3 +157,3 @@ _snapshot[key] = value[SNAPSHOT];
       },
-      set: function set(target, prop, value, receiver) {
+      set: function set(target, prop, value) {
         var prevValue = target[prop];
@@ -159,3 +175,7 @@
           target[prop] = value.then(function (v) {
-            receiver[prop] = v;
+            target[prop][PROMISE_RESULT] = v;
+            notifyUpdate();
+          }).catch(function (e) {
+            target[prop][PROMISE_ERROR] = e;
+            notifyUpdate();
           });
@@ -190,3 +210,10 @@ } else {
   };
-  var subscribe = function subscribe(p, callback) {
+  var getVersion = function getVersion(p) {
+    if (typeof process === 'object' && process.env.NODE_ENV !== 'production' && (!p || !p[VERSION])) {
+      throw new Error('Please use proxy object');
+    }
+
+    return p[VERSION];
+  };
+  var subscribe = function subscribe(p, callback, notifyInSync) {
     if (typeof process === 'object' && process.env.NODE_ENV !== 'production' && (!p || !p[LISTENERS])) {
@@ -199,2 +226,7 @@ throw new Error('Please use proxy object');
     var listener = function listener(nextVersion) {
+      if (notifyInSync) {
+        callback();
+        return;
+      }
+
       pendingVersion = nextVersion;
@@ -225,3 +257,3 @@ Promise.resolve().then(function () {
     if (!mutableSourceCache.has(p)) {
-      mutableSourceCache.set(p, createMutableSource(p));
+      mutableSourceCache.set(p, createMutableSource(p, getVersion));
     }
@@ -232,3 +264,3 @@
 
-  var useProxy = function useProxy(p) {
+  var useProxy = function useProxy(p, options) {
     var affected = new WeakMap();
@@ -239,3 +271,3 @@ var lastAffected = react.useRef();
     });
-    var getChangedSnapshot = react.useMemo(function () {
+    var getSnapshot = react.useMemo(function () {
       var prevSnapshot = null;
@@ -257,3 +289,7 @@ var deepChangedCache = new WeakMap();
     }, []);
-    var currSnapshot = useMutableSource(getMutableSource(p), getChangedSnapshot, subscribe);
+    var notifyInSync = options == null ? void 0 : options.sync;
+    var sub = react.useCallback(function (p, cb) {
+      return subscribe(p, cb, notifyInSync);
+    }, [notifyInSync]);
+    var currSnapshot = useMutableSource(getMutableSource(p), getSnapshot, sub);
     var proxyCache = react.useMemo(function () {
@@ -260,0 +296,0 @@ return new WeakMap();

index.js

@@ -1,2 +0,2 @@
-import { useMemo, useRef, useEffect } from 'react';
+import { useRef, useCallback, useEffect, useMemo } from 'react';
 import { markToTrack, getUntrackedObject, isDeepChanged, createDeepProxy } from 'proxy-compare';
@@ -12,11 +12,23 @@ import { useSubscription } from 'use-subscription';
 const TARGET = Symbol();
-const createMutableSource = (target, _getVersion) => ({
-  [TARGET]: target
+const GET_VERSION = Symbol();
+const createMutableSource = (target, getVersion) => ({
+  [TARGET]: target,
+  [GET_VERSION]: getVersion
 });
 const useMutableSource = (source, getSnapshot, subscribe) => {
-  const subscription = useMemo(() => ({
-    getCurrentValue: () => getSnapshot(source[TARGET]),
-    subscribe: callback => subscribe(source[TARGET], callback)
-  }), [source, getSnapshot, subscribe]);
-  return useSubscription(subscription);
+  const lastVersion = useRef(0);
+  const versionDiff = source[GET_VERSION](source[TARGET]) - lastVersion.current; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  const getCurrentValue = useCallback(() => getSnapshot(source[TARGET]), [source, getSnapshot, versionDiff]);
+  const sub = useCallback(callback => subscribe(source[TARGET], () => {
+    lastVersion.current = source[GET_VERSION](source[TARGET]);
+    callback();
+  }), [source, subscribe]);
+  useEffect(() => {
+    lastVersion.current = source[GET_VERSION](source[TARGET]);
+  });
+  return useSubscription({
+    getCurrentValue,
+    subscribe: sub
+  });
 };
@@ -27,2 +39,4 @@
 const SNAPSHOT = Symbol();
+const PROMISE_RESULT = Symbol();
+const PROMISE_ERROR = Symbol();
 
@@ -87,8 +101,13 @@ const isSupportedObject = x => typeof x === 'object' && x !== null && (Array.isArray(x) || !x[Symbol.iterator]) && !(x instanceof WeakMap) && !(x instanceof WeakSet) && !(x instanceof Error) && !(x instanceof Number) && !(x instanceof Date) && !(x instanceof String) && !(x instanceof RegExp) && !(x instanceof ArrayBuffer);
           } else if (value instanceof Promise) {
-            Object.defineProperty(snapshot, key, {
-              get() {
-                throw value;
-              }
+            if (value[PROMISE_RESULT]) {
+              snapshot[key] = value[PROMISE_RESULT];
+            } else {
+              const errorOrPromise = value[PROMISE_ERROR] || value;
+              Object.defineProperty(snapshot, key, {
+                get() {
+                  throw errorOrPromise;
+                }
 
-            });
+              });
+            }
           } else if (value[VERSION]) {
@@ -128,3 +147,3 @@ snapshot[key] = value[SNAPSHOT];
 
-    set(target, prop, value, receiver) {
+    set(target, prop, value) {
       const prevValue = target[prop];
@@ -146,3 +165,7 @@
         target[prop] = value.then(v => {
-          receiver[prop] = v;
+          target[prop][PROMISE_RESULT] = v;
+          notifyUpdate();
+        }).catch(e => {
+          target[prop][PROMISE_ERROR] = e;
+          notifyUpdate();
         });
@@ -178,3 +201,10 @@ } else {
 };
-const subscribe = (p, callback) => {
+const getVersion = p => {
+  if (typeof process === 'object' && process.env.NODE_ENV !== 'production' && (!p || !p[VERSION])) {
+    throw new Error('Please use proxy object');
+  }
+
+  return p[VERSION];
+};
+const subscribe = (p, callback, notifyInSync) => {
   if (typeof process === 'object' && process.env.NODE_ENV !== 'production' && (!p || !p[LISTENERS])) {
@@ -187,2 +217,7 @@ throw new Error('Please use proxy object');
   const listener = nextVersion => {
+    if (notifyInSync) {
+      callback();
+      return;
+    }
+
     pendingVersion = nextVersion;
@@ -213,3 +248,3 @@ Promise.resolve().then(() => {
   if (!mutableSourceCache.has(p)) {
-    mutableSourceCache.set(p, createMutableSource(p));
+    mutableSourceCache.set(p, createMutableSource(p, getVersion));
   }
@@ -220,3 +255,3 @@
 
-const useProxy = p => {
+const useProxy = (p, options) => {
   const affected = new WeakMap();
@@ -227,3 +262,3 @@ const lastAffected = useRef();
   });
-  const getChangedSnapshot = useMemo(() => {
+  const getSnapshot = useMemo(() => {
     let prevSnapshot = null;
@@ -245,3 +280,5 @@ const deepChangedCache = new WeakMap();
   }, []);
-  const currSnapshot = useMutableSource(getMutableSource(p), getChangedSnapshot, subscribe);
+  const notifyInSync = options == null ? void 0 : options.sync;
+  const sub = useCallback((p, cb) => subscribe(p, cb, notifyInSync), [notifyInSync]);
+  const currSnapshot = useMutableSource(getMutableSource(p), getSnapshot, sub);
   const proxyCache = useMemo(() => new WeakMap(), []); // per-hook proxyCache
@@ -248,0 +285,0 @@

package.json

 {
   "name": "valtio",
   "private": false,
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "💊 Valtio makes proxy-state simple for React and Vanilla",
@@ -6,0 +6,0 @@ "main": "index.cjs.js",

readme.md

@@ -52,4 +52,14 @@ ![VALTIO](valtio.svg)
 unsubscribe()
-// Subscribe to a portion of state
+```
+
+You can also subscribe to a portion of state.
+
+```jsx
+const state = proxy({ obj: { foo: 'bar' }, arr: ['hello'] })
+
 subscribe(state.obj, () => console.log('state.obj has changed to', state.obj))
+state.obj.foo = 'baz'
+
+subscribe(state.arr, () => console.log('state.arr has changed to', state.arr))
+state.arr.push('world')
 ```
@@ -80,2 +90,13 @@
 
+##### Update synchronously
+
+By default, state mutations are batched before triggering re-render. Sometimes, we want to disable the batching.
+
+```jsx
+function TextBox() {
+  const snapshot = useProxy(state, { sync: true })
+  return <input value={snapshot.text} onChange={(e) => (state.text = e.target.value)} />
+}
+```
+
 ##### Update transiently
@@ -82,0 +103,0 @@

useMutableSource.d.ts

 declare const TARGET: unique symbol;
-export declare const createMutableSource: (target: any, _getVersion: any) => {
+declare const GET_VERSION: unique symbol;
+export declare const createMutableSource: (target: any, getVersion: any) => {
     [TARGET]: any;
+    [GET_VERSION]: any;
 };
 export declare const useMutableSource: (source: any, getSnapshot: any, subscribe: any) => any;
 export {};

utils.d.ts

@@ -14,3 +14,3 @@ /**
  */
-export declare const useLocalProxy: <T extends object>(init: T | (() => T)) => readonly [T, T];
+export declare const useLocalProxy: <T extends object>(init: T | (() => T)) => readonly [import("./vanilla").NonPromise<T>, T];
 /**
@@ -17,0 +17,0 @@ * subscribeKey

vanilla.cjs.js

@@ -10,2 +10,4 @@ 'use strict';
 var SNAPSHOT = Symbol();
+var PROMISE_RESULT = Symbol();
+var PROMISE_ERROR = Symbol();
 
@@ -79,7 +81,12 @@ var isSupportedObject = function isSupportedObject(x) {
           } else if (value instanceof Promise) {
-            Object.defineProperty(_snapshot, key, {
-              get: function get() {
-                throw value;
-              }
-            });
+            if (value[PROMISE_RESULT]) {
+              _snapshot[key] = value[PROMISE_RESULT];
+            } else {
+              var errorOrPromise = value[PROMISE_ERROR] || value;
+              Object.defineProperty(_snapshot, key, {
+                get: function get() {
+                  throw errorOrPromise;
+                }
+              });
+            }
           } else if (value[VERSION]) {
@@ -117,3 +124,3 @@ _snapshot[key] = value[SNAPSHOT];
     },
-    set: function set(target, prop, value, receiver) {
+    set: function set(target, prop, value) {
       var prevValue = target[prop];
@@ -135,3 +142,7 @@
         target[prop] = value.then(function (v) {
-          receiver[prop] = v;
+          target[prop][PROMISE_RESULT] = v;
+          notifyUpdate();
+        }).catch(function (e) {
+          target[prop][PROMISE_ERROR] = e;
+          notifyUpdate();
         });
@@ -173,3 +184,3 @@ } else {
 };
-var subscribe = function subscribe(p, callback) {
+var subscribe = function subscribe(p, callback, notifyInSync) {
   if (typeof process === 'object' && process.env.NODE_ENV !== 'production' && (!p || !p[LISTENERS])) {
@@ -182,2 +193,7 @@ throw new Error('Please use proxy object');
   var listener = function listener(nextVersion) {
+    if (notifyInSync) {
+      callback();
+      return;
+    }
+
     pendingVersion = nextVersion;
@@ -184,0 +200,0 @@ Promise.resolve().then(function () {

vanilla.d.ts

 export declare const proxy: <T extends object>(initialObject?: T) => T;
 export declare const getVersion: (p: any) => number;
-export declare const subscribe: (p: any, callback: () => void) => () => void;
-export declare const snapshot: <T extends object>(p: T) => T;
+export declare const subscribe: (p: any, callback: () => void, notifyInSync?: boolean | undefined) => () => void;
+export declare type NonPromise<T> = T extends Function ? T : T extends Promise<infer V> ? V : T extends object ? {
+    [K in keyof T]: NonPromise<T[K]>;
+} : T;
+export declare const snapshot: <T extends object>(p: T) => NonPromise<T>;

vanilla.js

@@ -6,2 +6,4 @@ import { markToTrack, getUntrackedObject } from 'proxy-compare';
 const SNAPSHOT = Symbol();
+const PROMISE_RESULT = Symbol();
+const PROMISE_ERROR = Symbol();
 
@@ -66,8 +68,13 @@ const isSupportedObject = x => typeof x === 'object' && x !== null && (Array.isArray(x) || !x[Symbol.iterator]) && !(x instanceof WeakMap) && !(x instanceof WeakSet) && !(x instanceof Error) && !(x instanceof Number) && !(x instanceof Date) && !(x instanceof String) && !(x instanceof RegExp) && !(x instanceof ArrayBuffer);
           } else if (value instanceof Promise) {
-            Object.defineProperty(snapshot, key, {
-              get() {
-                throw value;
-              }
+            if (value[PROMISE_RESULT]) {
+              snapshot[key] = value[PROMISE_RESULT];
+            } else {
+              const errorOrPromise = value[PROMISE_ERROR] || value;
+              Object.defineProperty(snapshot, key, {
+                get() {
+                  throw errorOrPromise;
+                }
 
-            });
+              });
+            }
           } else if (value[VERSION]) {
@@ -107,3 +114,3 @@ snapshot[key] = value[SNAPSHOT];
 
-    set(target, prop, value, receiver) {
+    set(target, prop, value) {
       const prevValue = target[prop];
@@ -125,3 +132,7 @@
         target[prop] = value.then(v => {
-          receiver[prop] = v;
+          target[prop][PROMISE_RESULT] = v;
+          notifyUpdate();
+        }).catch(e => {
+          target[prop][PROMISE_ERROR] = e;
+          notifyUpdate();
         });
@@ -164,3 +175,3 @@ } else {
 };
-const subscribe = (p, callback) => {
+const subscribe = (p, callback, notifyInSync) => {
   if (typeof process === 'object' && process.env.NODE_ENV !== 'production' && (!p || !p[LISTENERS])) {
@@ -173,2 +184,7 @@ throw new Error('Please use proxy object');
   const listener = nextVersion => {
+    if (notifyInSync) {
+      callback();
+      return;
+    }
+
     pendingVersion = nextVersion;
@@ -175,0 +191,0 @@ Promise.resolve().then(() => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47465

increased by14.07%

Lines of code

1211

increased by12.86%

Number of lines in readme file

135

increased by18.42%

Worsened metrics

Number of low supply chain risk alerts

16

increased by14.29%

No dependency changes