valtio-define 1.3.3 → 1.4.0

package/README.md

@@ -124,7 +124,7 @@ Save and restore your store state using the `persist` plugin.
 
 ### Manual Hydration (SSR Friendly)
 
-To avoid hydration mismatches during Server-Side Rendering, disable automatic hydration and mount it in a `useEffect`.
+To avoid hydration mismatches during Server-Side Rendering, disable automatic hydration and rehydrate it in a `useEffect`.
 
 ```tsx
 // Register with hydrate disabled
@@ -132,7 +132,7 @@ store.use(persist({ hydrate: false }))
 
 // In your Client Entry / App Root
 useEffect(() => {
-  store.$persist.mount()
+  store.$persist.rehydrate()
 }, [])
 ```
 
@@ -224,6 +224,11 @@ valtio.use(myPlugin())
 // Local
 const store = defineStore({ /* ... */ })
 store.use(myPlugin())
+
+// Local options
+const store = defineStore({
+  use: [myPlugin()],
+})
 ```
 
 ### Creating a Custom Plugin

package/dist/index.mjs

@@ -1 +1,152 @@
-import{proxy as e,useSnapshot as t}from"valtio";import{batch as n}from"valtio-reactive";import{subscribeKey as r}from"valtio/utils";import{proxy as i,ref as a,subscribe as o}from"valtio/vanilla";const s=e([]);function c(e){s.push(e)}function l(e){let t=typeof e.state==`function`?e.state():e.state,c=e.getters||{},l=e.actions||{},d=i(t),f={},p=i({}),m=new WeakSet,h;for(let e of Object.keys(c))u(d,e,c[e].bind(d),{enumerable:!1}),u(p,e,()=>d[e]);for(let e of Object.keys(l))f[e]=a(l[e].bind(d)),u(d,e,()=>f[e],{enumerable:!1});function g(e){return o(d,t=>e(d,t))}function _(e,t){return r(d,e,e=>t(e),!0)}function v(e){typeof e==`function`?n(()=>e(d)):Object.assign(d,e)}function y(){h?.()}function b(e){C(e)}let x={$subscribe:g,$subscribeKey:_,$patch:v,$state:d,$actions:f,$getters:p,$dispose:y,use:b},S=new Proxy(x,{get(e,t){return t in f?f[t]:t in e?e[t]:d[t]},has(e,t){return t in e||t in f||t in d},set(e,t,n){return t in d?d[t]=n:e[t]=n,!0}});function C(t){m.has(t)||(m.add(t),t({store:S,options:e}))}for(let e of s)C(e);return h=o(s,()=>{for(let e of s)C(e)}),S}function u(e,t,n,r){Object.defineProperty(e,t,{get:n,enumerable:!0,...r})}function d(e,n){return t(e.$state,n)}function f(e,n){return t(e.$getters,n)}function p(e,t,n){let r=d(e,n);function i(n){typeof n==`function`?e.$patch(e=>{e[t]=n(e[t])}):e.$patch(e=>{e[t]=n})}return[r[t],i]}function m(e,t){return Object.fromEntries(Object.keys(e.$state).map(n=>[n,p(e,n,t)]))}const h={use:c};export{h as default,l as defineStore,s as plugins,p as storeToState,m as storeToStates,c as use,f as useGetters,d as useStore};
+import { proxy, useSnapshot } from "valtio";
+import { batch } from "valtio-reactive";
+import { subscribeKey } from "valtio/utils";
+import { proxy as proxy$1, ref, subscribe as subscribe$1 } from "valtio/vanilla";
+
+//#region src/plugin.ts
+const plugins = proxy([]);
+function use(plugin) {
+	plugins.push(plugin);
+}
+
+//#endregion
+//#region src/define.ts
+/**
+* @description Define a store
+* @example
+* ```tsx
+* const store = defineStore({
+*   state: () => ({ count: 0 }),
+*   actions: {
+*     increment() {
+*       this.count++
+*     },
+*   },
+* })
+*
+* store.increment()
+* console.log(store.$state.count) // 1
+*
+* function Component() {
+*   const store = useStore(store)
+*   return (
+*     <div>
+*       <button onClick={store.increment}>Increment</button>
+*       <div>{store.count}</div>
+*     </div>
+*   )
+* }
+*
+* ```
+*/
+function defineStore(options) {
+	const state = typeof options.state === "function" ? options.state() : options.state;
+	const getters = options.getters || {};
+	const actions = options.actions || {};
+	const $state = proxy$1(state);
+	const $actions = {};
+	const $getters = proxy$1({});
+	const $plugins = /* @__PURE__ */ new WeakSet();
+	let unsub;
+	for (const key of Object.keys(getters)) {
+		defineProperty($state, key, getters[key].bind($state), { enumerable: false });
+		defineProperty($getters, key, () => $state[key]);
+	}
+	for (const key of Object.keys(actions)) {
+		$actions[key] = ref(actions[key].bind($state));
+		defineProperty($state, key, () => $actions[key], { enumerable: false });
+	}
+	function $subscribe(listener) {
+		return subscribe$1($state, (ops) => listener($state, ops));
+	}
+	function $subscribeKey(key, listener) {
+		return subscribeKey($state, key, (value) => listener(value), true);
+	}
+	function $patch(patch) {
+		typeof patch === "function" ? batch(() => patch($state)) : Object.assign($state, patch);
+	}
+	function $dispose() {
+		unsub?.();
+	}
+	function use(plugin) {
+		apply(plugin);
+	}
+	const base = {
+		$subscribe,
+		$subscribeKey,
+		$patch,
+		$state,
+		$actions,
+		$getters,
+		$dispose,
+		use
+	};
+	const store = new Proxy(base, {
+		get(target, prop) {
+			if (prop in $actions) return $actions[prop];
+			if (prop in target) return target[prop];
+			return $state[prop];
+		},
+		has(target, prop) {
+			return prop in target || prop in $actions || prop in $state;
+		},
+		set(target, prop, value) {
+			prop in $state ? $state[prop] = value : target[prop] = value;
+			return true;
+		}
+	});
+	function apply(plugin) {
+		if ($plugins.has(plugin)) return;
+		$plugins.add(plugin);
+		plugin({
+			store,
+			options
+		});
+	}
+	for (const plugin of plugins) apply(plugin);
+	unsub = subscribe$1(plugins, () => {
+		for (const plugin of plugins) apply(plugin);
+	});
+	return store;
+}
+function defineProperty(target, prop, getter, descriptor) {
+	Object.defineProperty(target, prop, {
+		get: getter,
+		enumerable: true,
+		...descriptor
+	});
+}
+
+//#endregion
+//#region src/hooks.ts
+function useStore(store, options) {
+	return useSnapshot(store.$state, options);
+}
+function useGetters(store, options) {
+	return useSnapshot(store.$getters, options);
+}
+
+//#endregion
+//#region src/utils.ts
+function storeToState(store, key, options) {
+	const state = useStore(store, options);
+	function set(value) {
+		if (typeof value === "function") store.$patch((state) => {
+			state[key] = value(state[key]);
+		});
+		else store.$patch((state) => {
+			state[key] = value;
+		});
+	}
+	return [state[key], set];
+}
+function storeToStates(store, options) {
+	return Object.fromEntries(Object.keys(store.$state).map((key) => [key, storeToState(store, key, options)]));
+}
+
+//#endregion
+//#region src/index.ts
+const defaultExport = { use };
+
+//#endregion
+export { defaultExport as default, defineStore, plugins, storeToState, storeToStates, use, useGetters, useStore };

package/dist/plugins/index.mjs

@@ -1 +1,4 @@
-import{persist as e}from"./persist/index.mjs";import{signal as t}from"./signal/index.mjs";export{e as persist,t as signal};
+import { persist } from "./persist/index.mjs";
+import { signal } from "./signal/index.mjs";
+
+export { persist, signal };

package/dist/plugins/persist/index.mjs

@@ -1 +1,58 @@
-import{subscribe as e}from"valtio";import{get as t,set as n}from"@hairy/utils";import{destr as r}from"destr";import{generateStructureId as i}from"structure-id";function a({hydrate:a=!0}={}){return o=>{let{persist:s,getters:c}=o.options,{$state:l}=o.store;if(o.store.$persist?.unmount?.(),!s)return;let u=new Set(Object.keys(c||{})),d=s===!0?{}:s,f=d.key||i(l),p=d.storage??(typeof localStorage<`u`?localStorage:void 0);if(!p?.getItem||!p?.setItem)return;let m=o.store.$persist?.meta??{mounted:!1,hydrated:!1};function h(e){let t=r(e);if(t&&typeof t==`object`){for(let e of Object.keys(t))u.has(e)&&delete t[e];Object.assign(l,t)}m.hydrated=!0}function g(){m.mounted=!0;let e=p.getItem(f);e instanceof Promise?e.then(h):h(e)}function _(){m.unsubscribe?.(),m.unsubscribe=void 0}function v(){_(),m.unsubscribe=e(l,()=>{if(!m.hydrated)return;let e=(d.paths||Object.keys(l)).filter(e=>!u.has(e)).reduce((e,r)=>n(e,r,t(l,r)),{});p.setItem(f,JSON.stringify(e))})}o.store.$persist={mount:g,unmount:_,meta:m},a&&!m.mounted&&g(),v()}}export{a as persist};
+import { subscribe } from "valtio";
+import { get, set } from "@hairy/utils";
+import { destr } from "destr";
+import { generateStructureId } from "structure-id";
+
+//#region src/plugins/persist/index.ts
+function persist({ hydrate = true } = {}) {
+	return (context) => {
+		const { persist, getters } = context.options;
+		const { $state } = context.store;
+		context.store.$persist?.dehydrate?.();
+		if (!persist) return;
+		const getterKeys = new Set(Object.keys(getters || {}));
+		const options = persist === true ? {} : persist;
+		const key = options.key || generateStructureId($state);
+		const storage = options.storage ?? (typeof localStorage !== "undefined" ? localStorage : void 0);
+		if (!storage?.getItem || !storage?.setItem) return;
+		const meta = context.store.$persist?.meta ?? {
+			mounted: false,
+			hydrated: false
+		};
+		function initialize(value) {
+			const data = destr(value);
+			if (data && typeof data === "object") {
+				for (const key of Object.keys(data)) getterKeys.has(key) && delete data[key];
+				Object.assign($state, data);
+			}
+			meta.hydrated = true;
+		}
+		function rehydrate() {
+			meta.mounted = true;
+			const value = storage.getItem(key);
+			value instanceof Promise ? value.then(initialize) : initialize(value);
+		}
+		function dehydrate() {
+			meta.unsubscribe?.();
+			meta.unsubscribe = void 0;
+		}
+		function watch() {
+			dehydrate();
+			meta.unsubscribe = subscribe($state, () => {
+				if (!meta.hydrated) return;
+				const statePaths = (options.paths || Object.keys($state)).filter((p) => !getterKeys.has(p)).reduce((acc, p) => set(acc, p, get($state, p)), {});
+				storage.setItem(key, JSON.stringify(statePaths));
+			});
+		}
+		context.store.$persist = {
+			rehydrate,
+			dehydrate,
+			meta
+		};
+		hydrate && !meta.mounted && rehydrate();
+		watch();
+	};
+}
+
+//#endregion
+export { persist };

package/dist/plugins/persist/types.d.mts

@@ -19,8 +19,8 @@ interface PersistentMeta {
 }
 interface PersistentStore {
   $persist: {
-    mount: () => void;
-    unmount: () => void;
+    rehydrate: () => void;
+    dehydrate: () => void;
     meta: PersistentMeta;
   };
 }

package/dist/plugins/persist/types.mjs

@@ -1 +1 @@
-export{};
+export {  };

package/dist/plugins/signal/index.mjs

@@ -1 +1,15 @@
-import{$ as e}from"valtio-signal";function t(){return t=>{function n(n){let r=e(t.store.$state);return n?n(r):r}t.store.$signal=n}}export{t as signal};
+import { $ } from "valtio-signal";
+
+//#region src/plugins/signal/index.ts
+function signal() {
+	return (context) => {
+		function $signal(fn) {
+			const attached = $(context.store.$state);
+			return fn ? fn(attached) : attached;
+		}
+		context.store.$signal = $signal;
+	};
+}
+
+//#endregion
+export { signal };

package/dist/plugins/signal/jsx-dev-runtime.mjs

@@ -1 +1,3 @@
-import{Fragment as e,jsx as t,jsxDEV as n,jsxs as r}from"./jsx-runtime.mjs";export{e as Fragment,t as jsx,n as jsxDEV,r as jsxs};
+import { Fragment, jsx, jsxDEV, jsxs } from "./jsx-runtime.mjs";
+
+export { Fragment, jsx, jsxDEV, jsxs };

package/dist/plugins/signal/jsx-runtime.mjs

@@ -1 +1,3 @@
-import{Fragment as e,jsx as t,jsxDEV as n,jsxs as r}from"valtio-signal/jsx-runtime";export{e as Fragment,t as jsx,n as jsxDEV,r as jsxs};
+import { Fragment, jsx, jsxDEV, jsxs } from "valtio-signal/jsx-runtime";
+
+export { Fragment, jsx, jsxDEV, jsxs };

package/dist/plugins/signal/types.mjs

@@ -1 +1 @@
-export{};
+export {  };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valtio-define",
   "type": "module",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "⚡quickly create a fully functional and robust Valtio factory",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",