valtio - npm Package Compare versions

Comparing version 0.4.5 to 0.4.6

package.json

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

readme.md

		@@ -1,2 +0,2 @@
		![VALTIO](/valtio.svg)
		![VALTIO](valtio.svg)

		@@ -49,9 +49,11 @@ <code>npm i valtio</code> makes proxy-state simple
		// Suscribe to all state changes
		const unsubscribe = subscribe(state, () => console.log(`state has changed to ${state}`))
		const unsubscribe = subscribe(state, () => console.log('state has changed to', state))
		// Unsubscribe by calling the result
		unsubscribe()
		// Subscribe to a portion of state
		subscribe(state.obj, () => console.log(`state.obj has changed to ${state.obj}`))
		subscribe(state.obj, () => console.log('state.obj has changed to', state.obj))
		```

		To subscribe to a primitive value of state, consider [subscribeKey](./src/utils.ts#L28-L35) in utils.

		##### Suspend your components
		@@ -58,0 +60,0 @@

utils.cjs.js

		@@ -32,3 +32,25 @@ 'use strict';
		};
		/**
		* subscribeKey
		*
		* The subscribeKey utility enables subscription to a primitive subproperty of a given state proxy.
		* Subscriptions created with subscribeKey will only fire when the specified property changes.
		*
		* @example
		* import { subscribeKey } from 'valtio/utils'
		* subscribeKey(state, 'count', (v) => console.log('state.count has changed to', v))
		*/

		var subscribeKey = function subscribeKey(proxyObject, key, callback) {
		var prevValue = proxyObject[key];
		return valtio.subscribe(proxyObject, function () {
		var nextValue = proxyObject[key];

		if (!Object.is(prevValue, nextValue)) {
		callback(prevValue = nextValue);
		}
		});
		};

		exports.subscribeKey = subscribeKey;
		exports.useLocalProxy = useLocalProxy;

utils.d.ts

		@@ -15,1 +15,12 @@ /**
		export declare const useLocalProxy: <T extends object>(init: T \| (() => T)) => readonly [T, T];
		/**
		* subscribeKey
		*
		* The subscribeKey utility enables subscription to a primitive subproperty of a given state proxy.
		* Subscriptions created with subscribeKey will only fire when the specified property changes.
		*
		* @example
		* import { subscribeKey } from 'valtio/utils'
		* subscribeKey(state, 'count', (v) => console.log('state.count has changed to', v))
		*/
		export declare const subscribeKey: <T extends object>(proxyObject: T, key: keyof T, callback: (value: T[keyof T]) => void) => () => void;

utils.js

		import { useRef } from 'react';
		import { proxy, useProxy } from 'valtio';
		import { proxy, useProxy, subscribe } from 'valtio';

		@@ -28,3 +28,24 @@ /**
		};
		/**
		* subscribeKey
		*
		* The subscribeKey utility enables subscription to a primitive subproperty of a given state proxy.
		* Subscriptions created with subscribeKey will only fire when the specified property changes.
		*
		* @example
		* import { subscribeKey } from 'valtio/utils'
		* subscribeKey(state, 'count', (v) => console.log('state.count has changed to', v))
		*/

		export { useLocalProxy };
		const subscribeKey = (proxyObject, key, callback) => {
		let prevValue = proxyObject[key];
		return subscribe(proxyObject, () => {
		const nextValue = proxyObject[key];

		if (!Object.is(prevValue, nextValue)) {
		callback(prevValue = nextValue);
		}
		});
		};

		export { subscribeKey, useLocalProxy };

New alerts