valtio - npm Package Compare versions

Comparing version 0.4.8 to 0.4.9

package.json

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

readme.md

@@ -110,2 +110,13 @@ ![VALTIO](valtio.svg)
 
+##### Dev tools
+
+You can use [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension) for plain objects and arrays.
+
+```jsx
+import { devtools } from 'valtio/utils'
+
+const state = proxy({ count: 0, text: 'hello' })
+const unsub = devtools(state, 'state name')
+```
+
 ##### Use it vanilla
@@ -112,0 +123,0 @@

utils.cjs.js

@@ -53,4 +53,67 @@ 'use strict';
 };
+/**
+ * devtools
+ *
+ * This is to connect with [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension).
+ * Limitation: Only plain objects/values are supported.
+ *
+ * @example
+ * import { devtools } from 'valtio/utils'
+ * const state = proxy({ count: 0, text: 'hello' })
+ * const unsub = devtools(state, 'state name')
+ */
 
+var devtools = function devtools(proxyObject, name) {
+  var extension;
+
+  try {
+    extension = window.__REDUX_DEVTOOLS_EXTENSION__;
+  } catch (_unused) {}
+
+  if (!extension) {
+    if (typeof process === 'object' && process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+      console.warn('[Warning] Please install/enable Redux devtools extension');
+    }
+
+    return;
+  }
+
+  var isTimeTraveling = false;
+  var devtools = extension.connect({
+    name: name
+  });
+  var unsub1 = valtio.subscribe(proxyObject, function () {
+    if (isTimeTraveling) {
+      isTimeTraveling = false;
+    } else {
+      devtools.send("Update - " + new Date().toLocaleString(), valtio.snapshot(proxyObject));
+    }
+  });
+  var unsub2 = devtools.subscribe(function (message) {
+    var _message$payload3;
+
+    if (message.type === 'DISPATCH' && message.state) {
+      var _message$payload, _message$payload2;
+
+      if (((_message$payload = message.payload) == null ? void 0 : _message$payload.type) === 'JUMP_TO_ACTION' || ((_message$payload2 = message.payload) == null ? void 0 : _message$payload2.type) === 'JUMP_TO_STATE') {
+        isTimeTraveling = true;
+      }
+
+      var nextValue = JSON.parse(message.state);
+      Object.keys(nextValue).forEach(function (key) {
+        proxyObject[key] = nextValue[key];
+      });
+    } else if (message.type === 'DISPATCH' && ((_message$payload3 = message.payload) == null ? void 0 : _message$payload3.type) === 'COMMIT') {
+      devtools.init(valtio.snapshot(proxyObject));
+    }
+  });
+  devtools.init(valtio.snapshot(proxyObject));
+  return function () {
+    unsub1();
+    unsub2();
+  };
+};
+
+exports.devtools = devtools;
 exports.subscribeKey = subscribeKey;
 exports.useLocalProxy = useLocalProxy;

utils.d.ts

@@ -26,1 +26,13 @@ /**
 export declare const subscribeKey: <T extends object>(proxyObject: T, key: keyof T, callback: (value: T[keyof T]) => void) => () => void;
+/**
+ * devtools
+ *
+ * This is to connect with [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension).
+ * Limitation: Only plain objects/values are supported.
+ *
+ * @example
+ * import { devtools } from 'valtio/utils'
+ * const state = proxy({ count: 0, text: 'hello' })
+ * const unsub = devtools(state, 'state name')
+ */
+export declare const devtools: <T extends object>(proxyObject: T, name?: string | undefined) => (() => void) | undefined;

utils.js

 import { useRef } from 'react';
-import { proxy, useProxy, subscribe } from 'valtio';
+import { proxy, useProxy, subscribe, snapshot } from 'valtio';
 
@@ -49,3 +49,65 @@ /**
 };
+/**
+ * devtools
+ *
+ * This is to connect with [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension).
+ * Limitation: Only plain objects/values are supported.
+ *
+ * @example
+ * import { devtools } from 'valtio/utils'
+ * const state = proxy({ count: 0, text: 'hello' })
+ * const unsub = devtools(state, 'state name')
+ */
 
-export { subscribeKey, useLocalProxy };
+const devtools = (proxyObject, name) => {
+  let extension;
+
+  try {
+    extension = window.__REDUX_DEVTOOLS_EXTENSION__;
+  } catch (_unused) {}
+
+  if (!extension) {
+    if (typeof process === 'object' && process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+      console.warn('[Warning] Please install/enable Redux devtools extension');
+    }
+
+    return;
+  }
+
+  let isTimeTraveling = false;
+  const devtools = extension.connect({
+    name
+  });
+  const unsub1 = subscribe(proxyObject, () => {
+    if (isTimeTraveling) {
+      isTimeTraveling = false;
+    } else {
+      devtools.send(`Update - ${new Date().toLocaleString()}`, snapshot(proxyObject));
+    }
+  });
+  const unsub2 = devtools.subscribe(message => {
+    var _message$payload3;
+
+    if (message.type === 'DISPATCH' && message.state) {
+      var _message$payload, _message$payload2;
+
+      if (((_message$payload = message.payload) == null ? void 0 : _message$payload.type) === 'JUMP_TO_ACTION' || ((_message$payload2 = message.payload) == null ? void 0 : _message$payload2.type) === 'JUMP_TO_STATE') {
+        isTimeTraveling = true;
+      }
+
+      const nextValue = JSON.parse(message.state);
+      Object.keys(nextValue).forEach(key => {
+        proxyObject[key] = nextValue[key];
+      });
+    } else if (message.type === 'DISPATCH' && ((_message$payload3 = message.payload) == null ? void 0 : _message$payload3.type) === 'COMMIT') {
+      devtools.init(snapshot(proxyObject));
+    }
+  });
+  devtools.init(snapshot(proxyObject));
+  return () => {
+    unsub1();
+    unsub2();
+  };
+};
+
+export { devtools, subscribeKey, useLocalProxy };

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

52174

increased by9.92%

Lines of code

1332

increased by9.99%

Number of lines in readme file

146

increased by8.15%

Worsened metrics

Number of low supply chain risk alerts

18

increased by12.5%

No dependency changes