valtio - npm Package Compare versions

Comparing version 1.12.0 to 2.0.0-alpha.0

package.json

 {
   "name": "valtio",
   "private": false,
-  "version": "1.12.0",
+  "version": "2.0.0-alpha.0",
+  "publishConfig": {
+    "tag": "next"
+  },
   "description": "💊 Valtio makes proxy-state simple for React and Vanilla",
@@ -9,9 +12,17 @@ "main": "./index.js",
   "typesVersions": {
-    "<4.5": {
+    ">=4.5": {
       "esm/*": [
-        "ts3.4/*"
+        "esm/*"
       ],
       "*": [
-        "ts3.4/*"
+        "*"
       ]
+    },
+    "*": {
+      "esm/*": [
+        "ts_version_4.5_and_above_is_required.d.ts"
+      ],
+      "*": [
+        "ts_version_4.5_and_above_is_required.d.ts"
+      ]
     }
@@ -26,6 +37,2 @@ },
       },
-      "module": {
-        "types": "./esm/index.d.ts",
-        "default": "./esm/index.js"
-      },
       "default": {
@@ -41,6 +48,2 @@ "types": "./index.d.ts",
       },
-      "module": {
-        "types": "./esm/*.d.ts",
-        "default": "./esm/*.js"
-      },
       "default": {
@@ -80,9 +83,7 @@ "types": "./*.d.ts",
   "dependencies": {
-    "proxy-compare": "2.5.1",
-    "derive-valtio": "0.1.0",
-    "use-sync-external-store": "1.2.0"
+    "proxy-compare": "2.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8",
-    "react": ">=16.8"
+    "@types/react": ">=18.0",
+    "react": ">=18.0"
   },
@@ -89,0 +90,0 @@ "peerDependenciesMeta": {

react.js

 'use strict';
 
-var ReactExports = require('react');
+var react = require('react');
 var proxyCompare = require('proxy-compare');
-var useSyncExternalStoreExports = require('use-sync-external-store/shim');
 var vanilla = require('valtio/vanilla');
 
-var use = ReactExports.use;
-var useSyncExternalStore = useSyncExternalStoreExports.useSyncExternalStore;
 var useAffectedDebugValue = function useAffectedDebugValue(state, affected) {
-  var pathList = ReactExports.useRef();
-  ReactExports.useEffect(function () {
+  var pathList = react.useRef();
+  react.useEffect(function () {
     pathList.current = proxyCompare.affectedToPathList(state, affected, true);
   });
-  ReactExports.useDebugValue(pathList.current);
+  react.useDebugValue(pathList.current);
 };
@@ -20,6 +17,6 @@ var targetCache = new WeakMap();
   var notifyInSync = options == null ? void 0 : options.sync;
-  var lastSnapshot = ReactExports.useRef();
-  var lastAffected = ReactExports.useRef();
+  var lastSnapshot = react.useRef();
+  var lastAffected = react.useRef();
   var inRender = true;
-  var currSnapshot = useSyncExternalStore(ReactExports.useCallback(function (callback) {
+  var currSnapshot = react.useSyncExternalStore(react.useCallback(function (callback) {
     var unsub = vanilla.subscribe(proxyObject, callback, notifyInSync);
@@ -29,3 +26,3 @@ callback();
   }, [proxyObject, notifyInSync]), function () {
-    var nextSnapshot = vanilla.snapshot(proxyObject, use);
+    var nextSnapshot = vanilla.snapshot(proxyObject);
     try {
@@ -38,7 +35,7 @@ if (!inRender && lastSnapshot.current && lastAffected.current && !proxyCompare.isChanged(lastSnapshot.current, nextSnapshot, lastAffected.current, new WeakMap())) {
   }, function () {
-    return vanilla.snapshot(proxyObject, use);
+    return vanilla.snapshot(proxyObject);
   });
   inRender = false;
   var currAffected = new WeakMap();
-  ReactExports.useEffect(function () {
+  react.useEffect(function () {
     lastSnapshot.current = currSnapshot;
@@ -50,3 +47,3 @@ lastAffected.current = currAffected;
   }
-  var proxyCache = ReactExports.useMemo(function () {
+  var proxyCache = react.useMemo(function () {
     return new WeakMap();
@@ -53,0 +50,0 @@ }, []);

readme.md

@@ -124,3 +124,3 @@ <img src="logo.svg" alt="valtio">
 const unsubscribe = subscribe(state, () =>
-  console.log('state has changed to', state)
+  console.log('state has changed to', state),
 )
@@ -150,3 +150,3 @@ // Unsubscribe by calling the result
 subscribeKey(state, 'count', (v) =>
-  console.log('state.count has changed to', v)
+  console.log('state.count has changed to', v),
 )
@@ -153,0 +153,0 @@ ```

vanilla.d.ts

@@ -10,3 +10,3 @@ type AnyFunction = (...args: any[]) => any;
 type SnapshotIgnore = Date | Map<any, any> | Set<any> | WeakMap<any, any> | WeakSet<any> | AsRef | Error | RegExp | AnyFunction | Primitive;
-type Snapshot<T> = T extends SnapshotIgnore ? T : T extends Promise<unknown> ? Awaited<T> : T extends object ? {
+type Snapshot<T> = T extends SnapshotIgnore ? T : T extends object ? {
     readonly [K in keyof T]: Snapshot<T[K]>;
@@ -19,4 +19,3 @@ } : T;
 export type INTERNAL_Snapshot<T> = Snapshot<T>;
-type HandlePromise = <P extends Promise<any>>(promise: P) => Awaited<P>;
-type CreateSnapshot = <T extends object>(target: T, version: number, handlePromise?: HandlePromise) => T;
+type CreateSnapshot = <T extends object>(target: T, version: number) => T;
 type RemoveListener = () => void;
@@ -30,16 +29,8 @@ type AddListener = (listener: Listener) => RemoveListener;
 ];
-export declare function proxy<T extends object>(initialObject?: T): T;
+export declare function proxy<T extends object>(baseObject?: T): T;
 export declare function getVersion(proxyObject: unknown): number | undefined;
 export declare function subscribe<T extends object>(proxyObject: T, callback: (ops: Op[]) => void, notifyInSync?: boolean): () => void;
-export declare function snapshot<T extends object>(proxyObject: T, handlePromise?: HandlePromise): Snapshot<T>;
+export declare function snapshot<T extends object>(proxyObject: T): Snapshot<T>;
 export declare function ref<T extends object>(obj: T): T & AsRef;
-export declare const unstable_buildProxyFunction: (objectIs?: (value1: any, value2: any) => boolean, newProxy?: <T extends object>(target: T, handler: ProxyHandler<T>) => T, canProxy?: (x: unknown) => boolean, defaultHandlePromise?: <P extends Promise<any>>(promise: P & {
-    status?: 'pending' | 'fulfilled' | 'rejected';
-    value?: Awaited<P>;
-    reason?: unknown;
-}) => Awaited<P>, snapCache?: WeakMap<object, [version: number, snap: unknown]>, createSnapshot?: CreateSnapshot, proxyCache?: WeakMap<object, object>, versionHolder?: [number, number], proxyFunction?: <T_1 extends object>(initialObject: T_1) => T_1) => readonly [<T_1 extends object>(initialObject: T_1) => T_1, WeakMap<object, ProxyState>, WeakSet<WeakKey>, (value1: any, value2: any) => boolean, <T extends object>(target: T, handler: ProxyHandler<T>) => T, (x: unknown) => boolean, <P extends Promise<any>>(promise: P & {
-    status?: 'pending' | 'fulfilled' | 'rejected';
-    value?: Awaited<P>;
-    reason?: unknown;
-}) => Awaited<P>, WeakMap<object, [version: number, snap: unknown]>, CreateSnapshot, WeakMap<object, object>, [number, number]];
+export declare const unstable_buildProxyFunction: (objectIs?: (value1: any, value2: any) => boolean, newProxy?: <T extends object>(target: T, handler: ProxyHandler<T>) => T, canProxy?: (x: unknown) => boolean, snapCache?: WeakMap<object, [version: number, snap: unknown]>, createSnapshot?: CreateSnapshot, proxyCache?: WeakMap<object, object>, versionHolder?: [number, number], proxyFunction?: <T_1 extends object>(baseObject: T_1) => T_1) => readonly [<T_1 extends object>(baseObject: T_1) => T_1, WeakMap<object, ProxyState>, WeakSet<WeakKey>, (value1: any, value2: any) => boolean, <T extends object>(target: T, handler: ProxyHandler<T>) => T, (x: unknown) => boolean, WeakMap<object, [version: number, snap: unknown]>, CreateSnapshot, WeakMap<object, object>, [number, number]];
 export {};

vanilla.js

@@ -10,3 +10,3 @@ 'use strict';
 var refSet = new WeakSet();
-var buildProxyFunction = function buildProxyFunction(objectIs, newProxy, canProxy, defaultHandlePromise, snapCache, createSnapshot, proxyCache, versionHolder, _proxyFunction) {
+var buildProxyFunction = function buildProxyFunction(objectIs, newProxy, canProxy, snapCache, createSnapshot, proxyCache, versionHolder, _proxyFunction) {
   if (objectIs === void 0) {
@@ -25,14 +25,2 @@ objectIs = Object.is;
   }
-  if (defaultHandlePromise === void 0) {
-    defaultHandlePromise = function defaultHandlePromise(promise) {
-      switch (promise.status) {
-        case 'fulfilled':
-          return promise.value;
-        case 'rejected':
-          throw promise.reason;
-        default:
-          throw promise;
-      }
-    };
-  }
   if (snapCache === void 0) {
@@ -43,3 +31,3 @@ snapCache = new WeakMap();
     createSnapshot = function (_createSnapshot) {
-      function createSnapshot(_x, _x2, _x3) {
+      function createSnapshot(_x, _x2) {
         return _createSnapshot.apply(this, arguments);
@@ -51,6 +39,3 @@ }
       return createSnapshot;
-    }(function (target, version, handlePromise) {
-      if (handlePromise === void 0) {
-        handlePromise = defaultHandlePromise;
-      }
+    }(function (target, version) {
       var cache = snapCache.get(target);
@@ -77,7 +62,2 @@ if ((cache == null ? void 0 : cache[0]) === version) {
           proxyCompare.markToTrack(value, false);
-        } else if (value instanceof Promise) {
-          delete desc.value;
-          desc.get = function () {
-            return handlePromise(value);
-          };
         } else if (proxyStateMap.has(value)) {
@@ -87,3 +67,3 @@ var _ref2 = proxyStateMap.get(value),
             _ensureVersion = _ref2[1];
-          desc.value = createSnapshot(_target, _ensureVersion(), handlePromise);
+          desc.value = createSnapshot(_target, _ensureVersion());
         }
@@ -102,7 +82,7 @@ Object.defineProperty(snap, key, desc);
   if (_proxyFunction === void 0) {
-    _proxyFunction = function proxyFunction(initialObject) {
-      if (!isObject(initialObject)) {
+    _proxyFunction = function proxyFunction(baseObject) {
+      if (!isObject(baseObject)) {
         throw new Error('object required');
       }
-      var found = proxyCache.get(initialObject);
+      var found = proxyCache.get(baseObject);
       if (found) {
@@ -149,12 +129,15 @@ return found;
       var propProxyStates = new Map();
-      var addPropListener = function addPropListener(prop, propProxyState) {
-        if (process.env.NODE_ENV !== 'production' && propProxyStates.has(prop)) {
-          throw new Error('prop listener already exists');
+      var addPropListener = function addPropListener(prop, propValue) {
+        var propProxyState = !refSet.has(propValue) && proxyStateMap.get(propValue);
+        if (propProxyState) {
+          if (process.env.NODE_ENV !== 'production' && propProxyStates.has(prop)) {
+            throw new Error('prop listener already exists');
+          }
+          if (listeners.size) {
+            var remove = propProxyState[3](createPropListener(prop));
+            propProxyStates.set(prop, [propProxyState, remove]);
+          } else {
+            propProxyStates.set(prop, [propProxyState]);
+          }
         }
-        if (listeners.size) {
-          var remove = propProxyState[3](createPropListener(prop));
-          propProxyStates.set(prop, [propProxyState, remove]);
-        } else {
-          propProxyStates.set(prop, [propProxyState]);
-        }
       };
@@ -197,3 +180,3 @@ var removePropListener = function removePropListener(prop) {
       };
-      var baseObject = Array.isArray(initialObject) ? [] : Object.create(Object.getPrototypeOf(initialObject));
+      var initializing = true;
       var handler = {
@@ -210,3 +193,3 @@ deleteProperty: function deleteProperty(target, prop) {
         set: function set(target, prop, value, receiver) {
-          var hasPrevValue = Reflect.has(target, prop);
+          var hasPrevValue = !initializing && Reflect.has(target, prop);
           var prevValue = Reflect.get(target, prop, receiver);
@@ -235,6 +218,3 @@ if (hasPrevValue && (objectIs(prevValue, value) || proxyCache.has(value) && objectIs(prevValue, proxyCache.get(value)))) {
             }
-            var childProxyState = !refSet.has(nextValue) && proxyStateMap.get(nextValue);
-            if (childProxyState) {
-              addPropListener(prop, childProxyState);
-            }
+            addPropListener(prop, nextValue);
           }
@@ -247,26 +227,24 @@ Reflect.set(target, prop, nextValue, receiver);
       var proxyObject = newProxy(baseObject, handler);
-      proxyCache.set(initialObject, proxyObject);
+      proxyCache.set(baseObject, proxyObject);
       var proxyState = [baseObject, ensureVersion, createSnapshot, addListener];
       proxyStateMap.set(proxyObject, proxyState);
-      Reflect.ownKeys(initialObject).forEach(function (key) {
-        var desc = Object.getOwnPropertyDescriptor(initialObject, key);
-        if ('value' in desc) {
-          proxyObject[key] = initialObject[key];
-          delete desc.value;
-          delete desc.writable;
+      Reflect.ownKeys(baseObject).forEach(function (key) {
+        var desc = Object.getOwnPropertyDescriptor(baseObject, key);
+        if ('value' in desc && desc.writable) {
+          proxyObject[key] = baseObject[key];
         }
-        Object.defineProperty(baseObject, key, desc);
       });
+      initializing = false;
       return proxyObject;
     };
   }
-  return [_proxyFunction, proxyStateMap, refSet, objectIs, newProxy, canProxy, defaultHandlePromise, snapCache, createSnapshot, proxyCache, versionHolder];
+  return [_proxyFunction, proxyStateMap, refSet, objectIs, newProxy, canProxy, snapCache, createSnapshot, proxyCache, versionHolder];
 };
 var _buildProxyFunction = buildProxyFunction(),
   defaultProxyFunction = _buildProxyFunction[0];
-function proxy(initialObject) {
-  if (initialObject === void 0) {
-    initialObject = {};
+function proxy(baseObject) {
+  if (baseObject === void 0) {
+    baseObject = {};
   }
-  return defaultProxyFunction(initialObject);
+  return defaultProxyFunction(baseObject);
 }
@@ -308,3 +286,3 @@ function getVersion(proxyObject) {
 }
-function snapshot(proxyObject, handlePromise) {
+function snapshot(proxyObject) {
   var proxyState = proxyStateMap.get(proxyObject);
@@ -318,3 +296,3 @@ if (process.env.NODE_ENV !== 'production' && !proxyState) {
     createSnapshot = _ref6[2];
-  return createSnapshot(target, ensureVersion(), handlePromise);
+  return createSnapshot(target, ensureVersion());
 }
@@ -321,0 +299,0 @@ function ref(obj) {

vanilla/utils.d.ts

 export { subscribeKey } from './utils/subscribeKey';
 export { watch } from './utils/watch';
 export { devtools } from './utils/devtools';
-export { derive, underive, unstable_deriveSubscriptions } from 'derive-valtio';
-export { addComputed_DEPRECATED as addComputed } from './utils/addComputed';
-export { proxyWithComputed_DEPRECATED as proxyWithComputed } from './utils/proxyWithComputed';
+export { deepClone } from './utils/deepClone';
 export { proxyWithHistory } from './utils/proxyWithHistory';
 export { proxySet } from './utils/proxySet';
 export { proxyMap } from './utils/proxyMap';

vanilla/utils.js

 'use strict';
 
 var vanilla = require('valtio/vanilla');
-var deriveValtio = require('derive-valtio');
 
@@ -113,8 +112,2 @@ function subscribeKey(proxyObject, key, callback, notifyInSync) {
 function devtools(proxyObject, options) {
-  if (typeof options === 'string') {
-    console.warn('string name option is deprecated, use { name }. https://github.com/pmndrs/valtio/pull/400');
-    options = {
-      name: options
-    };
-  }
   var _ref = options || {},
@@ -206,58 +199,17 @@ enabled = _ref.enabled,
 
-function addComputed_DEPRECATED(proxyObject, computedFns_FAKE, targetObject) {
-  if (targetObject === void 0) {
-    targetObject = proxyObject;
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn('addComputed is deprecated. Please consider using `derive`. Falling back to emulation with derive. https://github.com/pmndrs/valtio/pull/201');
-  }
-  var derivedFns = {};
-  Object.keys(computedFns_FAKE).forEach(function (key) {
-    derivedFns[key] = function (get) {
-      return computedFns_FAKE[key](get(proxyObject));
-    };
-  });
-  return deriveValtio.derive(derivedFns, {
-    proxy: targetObject
-  });
-}
-
-function proxyWithComputed_DEPRECATED(initialObject, computedFns) {
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn('proxyWithComputed is deprecated. Please follow "Computed Properties" guide in docs.');
-  }
-  Object.keys(computedFns).forEach(function (key) {
-    if (Object.getOwnPropertyDescriptor(initialObject, key)) {
-      throw new Error('object property already defined');
-    }
-    var computedFn = computedFns[key];
-    var _ref = typeof computedFn === 'function' ? {
-        get: computedFn
-      } : computedFn,
-      get = _ref.get,
-      set = _ref.set;
-    var desc = {};
-    desc.get = function () {
-      return get(vanilla.snapshot(proxyObject));
-    };
-    if (set) {
-      desc.set = function (newValue) {
-        return set(proxyObject, newValue);
-      };
-    }
-    Object.defineProperty(initialObject, key, desc);
-  });
-  var proxyObject = vanilla.proxy(initialObject);
-  return proxyObject;
-}
-
 var isObject = function isObject(x) {
   return typeof x === 'object' && x !== null;
 };
-var refSet;
-var deepClone = function deepClone(obj) {
-  if (!refSet) {
-    refSet = vanilla.unstable_buildProxyFunction()[2];
+var defaultRefSet;
+var getDefaultRefSet = function getDefaultRefSet() {
+  if (!defaultRefSet) {
+    defaultRefSet = vanilla.unstable_buildProxyFunction()[2];
   }
-  if (!isObject(obj) || refSet.has(obj)) {
+  return defaultRefSet;
+};
+var deepClone = function deepClone(obj, getRefSet) {
+  if (getRefSet === void 0) {
+    getRefSet = getDefaultRefSet;
+  }
+  if (!isObject(obj) || getRefSet().has(obj)) {
     return obj;
@@ -267,6 +219,7 @@ }
   Reflect.ownKeys(obj).forEach(function (key) {
-    baseObject[key] = deepClone(obj[key]);
+    baseObject[key] = deepClone(obj[key], getRefSet);
   });
   return baseObject;
 };
+
 function proxyWithHistory(initialValue, skipSubscribe) {
@@ -471,21 +424,8 @@ if (skipSubscribe === void 0) {
 
-Object.defineProperty(exports, 'derive', {
-  enumerable: true,
-  get: function () { return deriveValtio.derive; }
-});
-Object.defineProperty(exports, 'underive', {
-  enumerable: true,
-  get: function () { return deriveValtio.underive; }
-});
-Object.defineProperty(exports, 'unstable_deriveSubscriptions', {
-  enumerable: true,
-  get: function () { return deriveValtio.unstable_deriveSubscriptions; }
-});
-exports.addComputed = addComputed_DEPRECATED;
+exports.deepClone = deepClone;
 exports.devtools = devtools;
 exports.proxyMap = proxyMap;
 exports.proxySet = proxySet;
-exports.proxyWithComputed = proxyWithComputed_DEPRECATED;
 exports.proxyWithHistory = proxyWithHistory;
 exports.subscribeKey = subscribeKey;
 exports.watch = watch;

vanilla/utils/devtools.d.ts

@@ -10,7 +10,14 @@ type Config = Parameters<(Window extends {
 } & Config;
-export declare function devtools<T extends object>(proxyObject: T, options?: Options): (() => void) | undefined;
 /**
- * @deprecated Please use { name } option
+ * devtools
+ *
+ * This is to connect with [Redux DevTools Extension](https://github.com/reduxjs/redux-devtools).
+ * Limitation: Only plain objects/values are supported.
+ *
+ * @example
+ * import { devtools } from 'valtio/utils'
+ * const state = proxy({ count: 0, text: 'hello' })
+ * const unsub = devtools(state, { name: 'state name', enabled: true })
  */
-export declare function devtools<T extends object>(proxyObject: T, name?: string): (() => void) | undefined;
+export declare function devtools<T extends object>(proxyObject: T, options?: Options): (() => void) | undefined;
 export {};

vanilla/utils/proxyWithHistory.d.ts

@@ -36,3 +36,3 @@ import type { INTERNAL_Snapshot as Snapshot } from 'valtio/vanilla';
     };
-    clone: <T>(obj: T) => T;
+    clone: <T>(obj: T, getRefSet?: () => WeakSet<object>) => T;
     canUndo: () => boolean;
@@ -39,0 +39,0 @@ undo: () => void;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Dependency count

3

decreased by-40%

Number of low quality alerts

1

decreased by-87.5%

Number of low supply chain risk alerts

7

decreased by-68.18%

Worsened metrics

Total package byte prevSize

83820

decreased by-69.39%

Number of package files

44

decreased by-69.44%

Lines of code

1785

decreased by-71.52%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedderive-valtio@0.1.0

• - Removeduse-sync-external-store@1.2.0

• - Removedderive-valtio@0.1.0(transitive)

• - Removeduse-sync-external-store@1.2.0(transitive)