valtio - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0

index.d.ts

@@ -5,3 +5,7 @@ import { proxy, subscribe, snapshot, ref, NonPromise } from './vanilla';
 };
-declare const useProxy: <T extends object>(proxyObject: T, options?: Options | undefined) => NonPromise<T>;
-export { proxy, subscribe, snapshot, ref, useProxy };
+declare const useSnapshot: <T extends object>(proxyObject: T, options?: Options | undefined) => NonPromise<T>;
+export { proxy, subscribe, snapshot, ref, useSnapshot };
+/**
+ * @deprecated Renamed to useSnapshot
+ */
+export declare const useProxy: <T extends object>(proxyObject: T, options?: Options | undefined) => NonPromise<T>;

index.js

@@ -348,3 +348,3 @@ 'use strict';
 
-var useProxy = function useProxy(proxyObject, options) {
+var useSnapshot = function useSnapshot(proxyObject, options) {
   var _useReducer = react.useReducer(function (c) {
@@ -401,3 +401,11 @@ return c + 1;
 };
+/**
+ * @deprecated Renamed to useSnapshot
+ */
 
+var useProxy = function useProxy(proxyObject, options) {
+  console.warn('DEPRECATED: Renamed to useSnapshot');
+  return useSnapshot(proxyObject, options);
+};
+
 exports.proxy = proxy;
@@ -408,1 +416,2 @@ exports.ref = ref;
 exports.useProxy = useProxy;
+exports.useSnapshot = useSnapshot;

index.module.d.ts

@@ -5,3 +5,7 @@ import { proxy, subscribe, snapshot, ref, NonPromise } from './vanilla';
 };
-declare const useProxy: <T extends object>(proxyObject: T, options?: Options | undefined) => NonPromise<T>;
-export { proxy, subscribe, snapshot, ref, useProxy };
+declare const useSnapshot: <T extends object>(proxyObject: T, options?: Options | undefined) => NonPromise<T>;
+export { proxy, subscribe, snapshot, ref, useSnapshot };
+/**
+ * @deprecated Renamed to useSnapshot
+ */
+export declare const useProxy: <T extends object>(proxyObject: T, options?: Options | undefined) => NonPromise<T>;

index.module.js

@@ -331,3 +331,3 @@ import { useRef, useState, useEffect, useReducer, useCallback, useMemo, useLayoutEffect, useDebugValue } from 'react';
 
-const useProxy = (proxyObject, options) => {
+const useSnapshot = (proxyObject, options) => {
   const [, forceUpdate] = useReducer(c => c + 1, 0);
@@ -376,3 +376,11 @@ const affected = new WeakMap();
 };
+/**
+ * @deprecated Renamed to useSnapshot
+ */
 
-export { proxy, ref, snapshot, subscribe, useProxy };
+const useProxy = (proxyObject, options) => {
+  console.warn('DEPRECATED: Renamed to useSnapshot');
+  return useSnapshot(proxyObject, options);
+};
+
+export { proxy, ref, snapshot, subscribe, useProxy, useSnapshot };

package.json

 {
   "name": "valtio",
   "private": false,
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "💊 Valtio makes proxy-state simple for React and Vanilla",
@@ -32,2 +32,7 @@ "main": "index.js",
       "types": "./utils.d.ts"
+    },
+    "./macro": {
+      "module": "./macro.module.js",
+      "require": "./macro.js",
+      "types": "./macro.d.ts"
     }
@@ -63,4 +68,18 @@ },
   "peerDependencies": {
+    "@babel/helper-module-imports": ">=7.12",
+    "@babel/types": ">=7.13",
+    "babel-plugin-macros": ">=3.0",
     "react": ">=16.8"
+  },
+  "peerDependenciesMeta": {
+    "@babel/helper-module-imports": {
+      "optional": true
+    },
+    "@babel/types": {
+      "optional": true
+    },
+    "babel-plugin-macros": {
+      "optional": true
+    }
   }
 }

readme.md

@@ -18,3 +18,3 @@ <img src="logo.svg" alt="valtio">
 ```jsx
-import { proxy, useProxy } from 'valtio'
+import { proxy, useSnapshot } from 'valtio'
 
@@ -34,3 +34,3 @@ const state = proxy({ count: 0, text: 'hello' })
 
-#### React via useProxy
+#### React via useSnapshot
 
@@ -41,6 +41,6 @@ Create a local snapshot that catches changes. Rule of thumb: read from snapshots, mutate the source. The component will only re-render when the parts of the state you access have changed, it is render-optimized.
 function Counter() {
-  const snapshot = useProxy(state)
+  const snap = useSnapshot(state)
   return (
     <div>
-      {snapshot.count}
+      {snap.count}
       <button onClick={() => ++state.count}>+1</button>
@@ -88,4 +88,4 @@ </div>
 function Post() {
-  const snapshot = useProxy(state)
-  return <div>{snapshot.post.title}</div>
+  const snap = useSnapshot(state)
+  return <div>{snap.post.title}</div>
 }
@@ -102,4 +102,6 @@
 
-#### Avoid state properties to be wrapped with proxies
+#### Holding objects in state without tracking them
 
+This may be useful if you have large, nested objects with accessors that you don't want to proxy. `ref` allows you to keep these objects inside the state model.
+
 See https://github.com/pmndrs/valtio/pull/62 for more information.
@@ -133,4 +135,4 @@
 function TextBox() {
-  const snapshot = useProxy(state, { sync: true })
-  return <input value={snapshot.text} onChange={(e) => (state.text = e.target.value)} />
+  const snap = useSnapshot(state, { sync: true })
+  return <input value={snap.text} onChange={(e) => (state.text = e.target.value)} />
 }
@@ -165,14 +167,2 @@ ```
 
-#### Use it locally in components
-
-You can use it locally in components.
-[Notes](./src/utils.ts#L7-L17)
-
-```jsx
-import { useLocalProxy } from 'valtio/utils'
-
-function Foo() {
-  const [snapshot, state] = useLocalProxy({ count: 0, text: 'hello' })
-```
-
 #### Proxy with computed
@@ -179,0 +169,0 @@

ts3.4/index.d.ts

@@ -5,3 +5,7 @@ import { proxy, subscribe, snapshot, ref, NonPromise } from './vanilla';
 };
-declare const useProxy: <T extends object>(proxyObject: T, options?: Options | undefined) => NonPromise<T>;
-export { proxy, subscribe, snapshot, ref, useProxy };
+declare const useSnapshot: <T extends object>(proxyObject: T, options?: Options | undefined) => NonPromise<T>;
+export { proxy, subscribe, snapshot, ref, useSnapshot };
+/**
+ * @deprecated Renamed to useSnapshot
+ */
+export declare const useProxy: <T extends object>(proxyObject: T, options?: Options | undefined) => NonPromise<T>;

ts3.4/index.module.d.ts

@@ -5,3 +5,7 @@ import { proxy, subscribe, snapshot, ref, NonPromise } from './vanilla';
 };
-declare const useProxy: <T extends object>(proxyObject: T, options?: Options | undefined) => NonPromise<T>;
-export { proxy, subscribe, snapshot, ref, useProxy };
+declare const useSnapshot: <T extends object>(proxyObject: T, options?: Options | undefined) => NonPromise<T>;
+export { proxy, subscribe, snapshot, ref, useSnapshot };
+/**
+ * @deprecated Renamed to useSnapshot
+ */
+export declare const useProxy: <T extends object>(proxyObject: T, options?: Options | undefined) => NonPromise<T>;

ts3.4/utils.d.ts

 import { NonPromise } from './vanilla';
 /**
- * useLocalProxy
+ * @deprecated useLocalProxy
  *
@@ -51,3 +51,3 @@ * This is to create a proxy in a component at mount.
  * This is for expert users and not recommended for ordinary users.
- * Contradictory to its name, this is costly and overlaps with useProxy.
+ * Contradictory to its name, this is costly and overlaps with useSnapshot.
  * Do not try to optimize too early. It can worsen the performance.
@@ -54,0 +54,0 @@ * Measurement and comparison will be very important.

ts3.4/utils.module.d.ts

 import { NonPromise } from './vanilla';
 /**
- * useLocalProxy
+ * @deprecated useLocalProxy
  *
@@ -51,3 +51,3 @@ * This is to create a proxy in a component at mount.
  * This is for expert users and not recommended for ordinary users.
- * Contradictory to its name, this is costly and overlaps with useProxy.
+ * Contradictory to its name, this is costly and overlaps with useSnapshot.
  * Do not try to optimize too early. It can worsen the performance.
@@ -54,0 +54,0 @@ * Measurement and comparison will be very important.

utils.d.ts

 import type { NonPromise } from './vanilla';
 /**
- * useLocalProxy
+ * @deprecated useLocalProxy
  *
@@ -48,3 +48,3 @@ * This is to create a proxy in a component at mount.
  * This is for expert users and not recommended for ordinary users.
- * Contradictory to its name, this is costly and overlaps with useProxy.
+ * Contradictory to its name, this is costly and overlaps with useSnapshot.
  * Do not try to optimize too early. It can worsen the performance.
@@ -51,0 +51,0 @@ * Measurement and comparison will be very important.

utils.js

@@ -10,3 +10,3 @@ 'use strict';
 /**
- * useLocalProxy
+ * @deprecated useLocalProxy
  *
@@ -126,3 +126,3 @@ * This is to create a proxy in a component at mount.
  * This is for expert users and not recommended for ordinary users.
- * Contradictory to its name, this is costly and overlaps with useProxy.
+ * Contradictory to its name, this is costly and overlaps with useSnapshot.
  * Do not try to optimize too early. It can worsen the performance.
@@ -129,0 +129,0 @@ * Measurement and comparison will be very important.

utils.module.d.ts

 import type { NonPromise } from './vanilla';
 /**
- * useLocalProxy
+ * @deprecated useLocalProxy
  *
@@ -48,3 +48,3 @@ * This is to create a proxy in a component at mount.
  * This is for expert users and not recommended for ordinary users.
- * Contradictory to its name, this is costly and overlaps with useProxy.
+ * Contradictory to its name, this is costly and overlaps with useSnapshot.
  * Do not try to optimize too early. It can worsen the performance.
@@ -51,0 +51,0 @@ * Measurement and comparison will be very important.

utils.module.js

@@ -6,3 +6,3 @@ import { useRef } from 'react';
 /**
- * useLocalProxy
+ * @deprecated useLocalProxy
  *
@@ -122,3 +122,3 @@ * This is to create a proxy in a component at mount.
  * This is for expert users and not recommended for ordinary users.
- * Contradictory to its name, this is costly and overlaps with useProxy.
+ * Contradictory to its name, this is costly and overlaps with useSnapshot.
  * Do not try to optimize too early. It can worsen the performance.
@@ -125,0 +125,0 @@ * Measurement and comparison will be very important.

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

73737

increased by7.21%

Number of package files

29

increased by26.09%

Lines of code

1815

increased by6.83%

Worsened metrics

Dependency count

5

increased by150%

Number of lines in readme file

194

decreased by-4.9%

No dependency changes