valtio - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

index.cjs.js

@@ -169,3 +169,4 @@ 'use strict';
 
-        proxyCompare.markToTrack(_snapshot);
+        proxyCompare.markToTrack(_snapshot, true); // mark to track
+
         snapshotCache.set(receiver, {
@@ -178,4 +179,8 @@ version: version,
 
-          if (refSet.has(value) || !isSupportedObject(value)) {
+          if (refSet.has(value)) {
+            proxyCompare.markToTrack(value, false); // mark not to track
+
             _snapshot[key] = value;
+          } else if (!isSupportedObject(value)) {
+            _snapshot[key] = value;
           } else if (value instanceof Promise) {
@@ -182,0 +187,0 @@ if (PROMISE_RESULT in value) {

index.iife.js

@@ -165,3 +165,4 @@ var valtio = (function (exports, react, proxyCompare) {
 
-          proxyCompare.markToTrack(_snapshot);
+          proxyCompare.markToTrack(_snapshot, true); // mark to track
+
           snapshotCache.set(receiver, {
@@ -174,4 +175,8 @@ version: version,
 
-            if (refSet.has(value) || !isSupportedObject(value)) {
+            if (refSet.has(value)) {
+              proxyCompare.markToTrack(value, false); // mark not to track
+
               _snapshot[key] = value;
+            } else if (!isSupportedObject(value)) {
+              _snapshot[key] = value;
             } else if (value instanceof Promise) {
@@ -178,0 +183,0 @@ if (PROMISE_RESULT in value) {

index.js

@@ -149,3 +149,4 @@ import { useRef, useState, useEffect, useReducer, useCallback, useMemo, useLayoutEffect, useDebugValue } from 'react';
         const snapshot = Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target));
-        markToTrack(snapshot);
+        markToTrack(snapshot, true); // mark to track
+
         snapshotCache.set(receiver, {
@@ -158,4 +159,8 @@ version,
 
-          if (refSet.has(value) || !isSupportedObject(value)) {
+          if (refSet.has(value)) {
+            markToTrack(value, false); // mark not to track
+
             snapshot[key] = value;
+          } else if (!isSupportedObject(value)) {
+            snapshot[key] = value;
           } else if (value instanceof Promise) {
@@ -162,0 +167,0 @@ if (PROMISE_RESULT in value) {

package.json

 {
   "name": "valtio",
   "private": false,
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "💊 Valtio makes proxy-state simple for React and Vanilla",
@@ -10,2 +10,3 @@ "main": "index.cjs.js",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
@@ -55,3 +56,3 @@ "import": "./index.js",
   "dependencies": {
-    "proxy-compare": "1.1.3"
+    "proxy-compare": "1.1.4"
   },
@@ -58,0 +59,0 @@ "peerDependencies": {

readme.md

@@ -7,3 +7,3 @@ <img src="logo.svg" alt="valtio">
 
-##### Wrap your state object
+#### Wrap your state object
 
@@ -18,3 +18,3 @@ Valtio turns the object you pass it into a self-aware proxy.
 
-##### Mutate from anywhere
+#### Mutate from anywhere
 
@@ -29,3 +29,3 @@ You can make changes to it in the same way you would to a normal js-object.
 
-##### React via useProxy
+#### React via useProxy
 
@@ -46,3 +46,3 @@ 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.
 
-##### Subscribe from anywhere
+#### Subscribe from anywhere
 
@@ -74,3 +74,3 @@ You can access state outside of your components and subscribe to changes.
 
-##### Suspend your components
+#### Suspend your components
 
@@ -96,14 +96,16 @@ Valtio supports React-suspense and will throw promises that you access within a components render function. This eliminates all the async back-and-forth, you can access your data directly while the parent is responsible for fallback state and error handling.
 
-##### Update synchronously
+#### Avoid state properties to be wrapped with proxies
 
-By default, state mutations are batched before triggering re-render. Sometimes, we want to disable the batching.
+See https://github.com/pmndrs/valtio/pull/62 for more information.
 
-```jsx
-function TextBox() {
-  const snapshot = useProxy(state, { sync: true })
-  return <input value={snapshot.text} onChange={(e) => (state.text = e.target.value)} />
-}
+```js
+import { proxy, ref } from 'valtio'
+
+const state = proxy({
+  count: 0,
+  dom: ref(document.body),
+})
 ```
 
-##### Update transiently
+#### Update transiently
 
@@ -119,16 +121,14 @@ You can subscribe a component to state without causing render, just stick the subscribe function into useEffect.
 
-##### Avoid state properties to be wrapped with proxies
+#### Update synchronously
 
-See https://github.com/pmndrs/valtio/pull/62 for more information.
+By default, state mutations are batched before triggering re-render. Sometimes, we want to disable the batching.
 
-```js
-import { proxy, ref } from 'valtio'
-
-const state = proxy({
-  count: 0,
-  dom: ref(document.body),
-})
+```jsx
+function TextBox() {
+  const snapshot = useProxy(state, { sync: true })
+  return <input value={snapshot.text} onChange={(e) => (state.text = e.target.value)} />
+}
 ```
 
-##### Dev tools
+#### Dev tools
 
@@ -144,3 +144,3 @@ You can use [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension) for plain objects and arrays.
 
-##### Use it vanilla
+#### Use it vanilla
 
@@ -160,3 +160,3 @@ Valtio is not tied to React, you can use it in vanilla-js.
 
-##### Use it locally in components
+#### Use it locally in components
 
@@ -163,0 +163,0 @@ You can use it locally in components. [Notes](./src/utils.ts#L5-L15)

vanilla.cjs.js

@@ -74,3 +74,4 @@ 'use strict';
 
-        proxyCompare.markToTrack(_snapshot);
+        proxyCompare.markToTrack(_snapshot, true); // mark to track
+
         snapshotCache.set(receiver, {
@@ -83,4 +84,8 @@ version: version,
 
-          if (refSet.has(value) || !isSupportedObject(value)) {
+          if (refSet.has(value)) {
+            proxyCompare.markToTrack(value, false); // mark not to track
+
             _snapshot[key] = value;
+          } else if (!isSupportedObject(value)) {
+            _snapshot[key] = value;
           } else if (value instanceof Promise) {
@@ -87,0 +92,0 @@ if (PROMISE_RESULT in value) {

vanilla.js

@@ -61,3 +61,4 @@ import { markToTrack, getUntrackedObject } from 'proxy-compare';
         const snapshot = Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target));
-        markToTrack(snapshot);
+        markToTrack(snapshot, true); // mark to track
+
         snapshotCache.set(receiver, {
@@ -70,4 +71,8 @@ version,
 
-          if (refSet.has(value) || !isSupportedObject(value)) {
+          if (refSet.has(value)) {
+            markToTrack(value, false); // mark not to track
+
             snapshot[key] = value;
+          } else if (!isSupportedObject(value)) {
+            snapshot[key] = value;
           } else if (value instanceof Promise) {
@@ -74,0 +79,0 @@ if (PROMISE_RESULT in value) {

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

62781

increased by1.26%

Lines of code

1638

increased by0.92%

Dependency changes

• + Addedproxy-compare@1.1.4(transitive)

• - Removedproxy-compare@1.1.3(transitive)

• Updatedproxy-compare@1.1.4