valtio-define 0.4.0 → 1.0.0

package/README.md

@@ -4,6 +4,7 @@
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![bundle][bundle-src]][bundle-href]
 [![JSDocs][jsdocs-src]][jsdocs-href]
+[![coverage][coverage-src]][coverage-href]
 [![License][license-src]][license-href]
 
 ⚡ Quickly create a fully functional and robust Valtio factory
@@ -76,49 +77,25 @@ function Counter() {
 }
 ```
 
-### Async Actions with Status
+### Persistence
 
-```tsx
-import { defineStore, useStatus, useStore } from 'valtio-define'
+The persistence plugin allows you to persist store state to storage (e.g., localStorage).
 
-const store = defineStore({
-  state: () => ({ data: null }),
-  actions: {
-    async fetchData() {
-      const response = await fetch('/api/data')
-      this.data = await response.json()
-    },
-  },
-})
+First, register the persistent plugin:
 
-function DataComponent() {
-  const state = useStore(store)
-  const status = useStatus(store)
+```tsx
+import valtio from 'valtio-define'
+import { persistent } from 'valtio-define/plugins'
 
-  return (
-    <div>
-      {status.loading && <div> Store all actions are loading...</div>}
-      {status.finished && <div> Store all actions are finished...</div>}
-      {status.error && <div> Store all actions are error...</div>}
-
-      {status.fetchData.finished && <div> Data fetched successfully...</div>}
-      {status.fetchData.error && (
-        <div>
-          {' '}
-          Error fetching data:
-          {status.fetchData.error.message}
-        </div>
-      )}
-      {state.data && <div>{JSON.stringify(state.data)}</div>}
-      <button onClick={store.fetchData}>Fetch Data</button>
-    </div>
-  )
-}
+// Register the persistent plugin globally
+valtio.use(persistent())
 ```
 
-### Persistence
+Then use it in your store:
 
 ```tsx
+import { defineStore } from 'valtio-define'
+
 const store = defineStore({
   state: () => ({ count: 0 }),
   actions: {
@@ -126,11 +103,22 @@ const store = defineStore({
       this.count++
     },
   },
-  persist: true // or { key: 'my-store', storage: localStorage, paths: ['count'] }
+  persist: {
+    key: 'my-store',
+    storage: localStorage,
+    paths: ['count'], // Only persist 'count', or omit to persist all state
+  },
 })
 ```
 
-If the persist is a boolean value, it will use `structure-id` to generate a unique key for the store.
+If `persist` is `true`, it will use `structure-id` to generate a unique key for the store automatically.
+
+```tsx
+const store = defineStore({
+  state: () => ({ count: 0 }),
+  persist: true, // Auto-generates key using structure-id
+})
+```
 
 ### Subscribe to Changes
 
@@ -149,9 +137,9 @@ const unsubscribe = store.$subscribe((state) => {
   console.log('State changed:', state)
 })
 
-// Subscribe to status changes
-const unsubscribeStatus = store.$subscribe.status((status) => {
-  console.log('Status changed:', status)
+// Subscribe to specific key changes
+const unsubscribeKey = store.$subscribeKey('count', (value) => {
+  console.log('Count changed:', value)
 })
 ```
 
@@ -173,15 +161,9 @@ store.$patch((state) => {
 function App() {
   return (
     <div>
-      {store.$signal(state => (
-        <div>
-          Count:
-          {state.count}
-        </div>
-      ))}
-      {store.$signal.status(status => (
-        status.loading && <div>Loading...</div>
-      ))}
+      Count:
+      {' '}
+      {store.$signal(state => state.count)}
     </div>
   )
 }
@@ -197,7 +179,7 @@ Creates a store with state, actions, and getters.
 - `store.state`: Initial state object or factory function
 - `store.actions`: Object containing action methods
 - `store.getters`: Object containing getter methods
-- `store.persist`: Persistence configuration (boolean or object)
+- `store.persist`: Persistence plugin configuration (boolean or object) - see [Persistence Plugin](#persistence-plugin)
 
 **Returns:** Store instance with reactive state and actions
 
@@ -210,26 +192,68 @@ React hook that returns a snapshot of the store state.
 
 **Returns:** Snapshot of the store state
 
-### `useStatus(store)`
+### Plugins
 
-React hook that returns the status of all actions.
+Plugins allow you to extend store functionality. You can use plugins globally or per-store.
 
-**Parameters:**
-- `store`: Store instance created by `defineStore`
+#### Global Plugin Registration
 
-**Returns:** Status object with loading, finished, and error states
+```tsx
+import { use } from 'valtio-define'
+import { persistent } from 'valtio-define/plugins'
 
-### `proxyWithPersistent(initialObject, options?)`
+// Register plugin globally - applies to all stores
+use(persistent())
+```
 
-Creates a persistent proxy state.
+#### Per-Store Plugin Registration
 
-**Parameters:**
-- `initialObject`: Initial state object
-- `options.key`: Storage key (auto-generated if not provided)
-- `options.storage`: Storage instance (defaults to localStorage)
-- `options.paths`: Array of paths to persist (defaults to all)
+```tsx
+import { defineStore } from 'valtio-define'
+import { persistent } from 'valtio-define/plugins'
+
+const store = defineStore({
+  state: () => ({ count: 0 }),
+})
+
+// Register plugin for this specific store
+store.use(persistent())
+```
+
+#### Creating Custom Plugins
+
+```tsx
+import type { Plugin } from 'valtio-define'
+
+function myPlugin() {
+  ({ store, options }: PluginContext) => {
+    // Access store methods
+    store.$subscribe((state) => {
+      console.log('State changed:', state)
+    })
+
+    // Access store options
+    if (options.someOption) {
+    // Do something
+    }
+  }
+}
+
+declare module 'valtio-define/types' {
+  export interface StoreDefine<S extends object, A extends ActionsTree, G extends Getters<any>> {
+    myPlugin?: {
+      someOption?: boolean
+    }
+  }
+}
+
+// Use the plugin
+use(myPlugin)
+```
 
-**Returns:** Persistent proxy state
+**Plugin Context:**
+- `context.store`: The store instance with all methods (`$state`, `$patch`, `$subscribe`, etc.)
+- `context.options`: The original store definition options
 
 ## License
 
@@ -247,3 +271,5 @@ Creates a persistent proxy state.
 [license-href]: https://github.com/hairyf/valtio-define/blob/main/LICENSE
 [jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
 [jsdocs-href]: https://www.jsdocs.io/package/valtio-define
+[coverage-src]: https://codecov.io/gh/hairyf/valtio-define/graph/badge.svg?token=PG5YIEEEHJ
+[coverage-href]: https://codecov.io/gh/hairyf/valtio-define

package/dist/index-3Qs1mdbd.d.mts

@@ -0,0 +1,23 @@
+import { s as Plugin } from "./index-BxQlAvn6.mjs";
+import { Awaitable } from "@hairy/utils";
+
+//#region src/plugins/persistent/index.d.ts
+declare function persistent(): Plugin;
+type DeepKeys<T> = T extends object ? { [K in keyof T & string]: T[K] extends object ? K | `${K}.${DeepKeys<T[K]>}` : K }[keyof T & string] : never;
+interface Storage {
+  getItem: (key: string) => Awaitable<any>;
+  setItem: (key: string, value: any) => Awaitable<void>;
+  [key: string]: any;
+}
+interface PersistentOptions<S extends object = Record<string, unknown>> {
+  key?: string;
+  storage?: Storage;
+  paths?: DeepKeys<S>[];
+}
+declare module 'valtio-define/types' {
+  interface StoreDefine<S extends object, A extends ActionsTree, G extends Getters<any>> {
+    persist?: PersistentOptions<S>;
+  }
+}
+//#endregion
+export { persistent as i, PersistentOptions as n, Storage as r, DeepKeys as t };

package/dist/index-BxQlAvn6.d.mts

@@ -0,0 +1,46 @@
+import { ReactElement } from "react";
+
+//#region src/types/index.d.ts
+type Actions<S = any> = Record<string, (this: S, ...args: any) => any>;
+type ActionsTree = Record<string, (...args: any[]) => any>;
+type Getters<S = any> = Record<string, (this: S) => any>;
+type ActionsOmitThisParameter<A extends Actions<any>> = { [K in keyof A]: (...args: Parameters<A[K]>) => ReturnType<A[K]> };
+type GettersReturnType<G extends Getters<any>> = { [K in keyof G]: ReturnType<G[K]> };
+interface StoreDefine<S extends object, A extends ActionsTree, G extends Getters<any>> {
+  state: (() => S) | S;
+  actions?: A & ThisType<A & S & GettersReturnType<G>>;
+  getters?: G & ThisType<S & GettersReturnType<G>>;
+}
+interface Signal<S, G extends Getters<S>> {
+  <T>(fn: (state: S & GettersReturnType<G>) => T): ReactElement;
+}
+type Path = (string | symbol)[];
+type Op = [op: 'set', path: Path, value: unknown, prevValue: unknown] | [op: 'delete', path: Path, prevValue: unknown];
+interface Subscribe<S, G extends Getters<S>> {
+  (listener: (state: S & GettersReturnType<G>, opts: Op) => void): () => void;
+}
+interface SubscribeKey<S, G extends Getters<S>> {
+  <T extends keyof S | keyof G>(key: T, listener: (state: (S & GettersReturnType<G>)[T]) => void): () => void;
+}
+interface Patch<S, G extends Getters<S>> {
+  (patch: Partial<S> | ((state: S & GettersReturnType<G>) => void)): void;
+}
+type Store<S, A extends Actions<S>, G extends Getters<S>> = {
+  $subscribe: Subscribe<S, G>;
+  $subscribeKey: SubscribeKey<S, G>;
+  $patch: Patch<S, G>;
+  $state: S & GettersReturnType<G> & ActionsOmitThisParameter<A>;
+  $actions: ActionsOmitThisParameter<A>;
+  $getters: GettersReturnType<G>;
+  use: (plugin: Plugin) => void;
+  $signal: Signal<S, G>;
+} & S & GettersReturnType<G> & ActionsOmitThisParameter<A>;
+interface PluginContext<S extends object = Record<string, unknown>> {
+  store: Store<S, Actions<S>, Getters<S>>;
+  options: StoreDefine<S, ActionsTree, Getters<S>>;
+}
+interface Plugin {
+  <S extends object = Record<string, unknown>>(context: PluginContext<S>): void;
+}
+//#endregion
+export { GettersReturnType as a, PluginContext as c, StoreDefine as d, Subscribe as f, Getters as i, Signal as l, ActionsOmitThisParameter as n, Patch as o, SubscribeKey as p, ActionsTree as r, Plugin as s, Actions as t, Store as u };

package/dist/index.d.mts

@@ -1,53 +1,11 @@
+import { a as GettersReturnType, d as StoreDefine, i as Getters, r as ActionsTree, s as Plugin, t as Actions, u as Store } from "./index-BxQlAvn6.mjs";
 import { Snapshot } from "valtio";
 
-//#region src/types/index.d.ts
-type Actions<S> = Record<string, (this: S, ...args: any) => any>;
-type Getters<S> = Record<string, (this: S) => any>;
-type ActionsOmitThisParameter<A extends Actions<any>> = { [K in keyof A]: (...args: Parameters<A[K]>) => ReturnType<A[K]> };
-interface Status {
-  finished: boolean;
-  loading: boolean;
-  error?: Error;
-}
-type ActionsStatus<A extends Actions<any>> = Status & { [K in keyof A]: Status };
-type GettersReturnType<G extends Getters<any>> = { [K in keyof G]: ReturnType<G[K]> };
-interface StoreDefine<S extends object, A extends Actions<S>, G extends Getters<S>> {
-  state: (() => S) | S;
-  actions?: A;
-  getters?: G;
-}
-interface StoreOptions<S extends object = Record<string, unknown>> {
-  persist?: boolean | PersistentOptions<S>;
-}
-interface StoreSignal<S, A extends Actions<S>, G extends Getters<S>> {
-  <T>(fn: (state: S & GettersReturnType<G>) => T): T;
-  status: <T>(fn: (status: ActionsStatus<A>) => T) => T;
-}
-interface StoreSubscribe<S, A extends Actions<S>, G extends Getters<S>> {
-  (listener: (state: S & GettersReturnType<G>) => void): () => void;
-  status: (listener: (status: ActionsStatus<A>) => void) => () => void;
-  key: <K$1 extends keyof S | keyof G>(key: K$1, listener: (state: (S & GettersReturnType<G>)[K$1]) => void) => () => void;
-}
-interface StorePatch<S, G extends Getters<S>> {
-  (patch: Partial<S> | ((state: S & GettersReturnType<G>) => void)): void;
-}
-type Store<S, A extends Actions<S>, G extends Getters<S>> = {
-  $subscribe: StoreSubscribe<S, A, G>;
-  $patch: StorePatch<S, G>;
-  $state: S & GettersReturnType<G> & ActionsOmitThisParameter<A>;
-  $actions: ActionsOmitThisParameter<A>;
-  $getters: GettersReturnType<G>;
-  $status: ActionsStatus<A>;
-  $signal: StoreSignal<S, A, G>;
-} & ActionsOmitThisParameter<A>;
-interface PersistentOptions<S extends object = Record<string, unknown>> {
-  key?: string;
-  storage?: Partial<Storage> & Pick<Storage, 'getItem' | 'setItem'>;
-  paths?: (keyof S)[];
-  initial?: (initialState: S) => any | Promise<any>;
-}
+//#region src/plugin.d.ts
+declare const plugins: Plugin[];
+declare function use(plugin: Plugin): void;
 //#endregion
-//#region src/define-store.d.ts
+//#region src/define.d.ts
 /**
  * @description Define a store
  * @example
@@ -76,15 +34,14 @@ interface PersistentOptions<S extends object = Record<string, unknown>> {
  *
  * ```
  */
-declare function defineStore<S extends object, A extends Actions<S>, G extends Getters<S>>(store: StoreDefine<S, A, G> & StoreOptions<S>): Store<S, A, G>;
+declare function defineStore<S extends object, A extends ActionsTree, G extends Getters<S>>(define: StoreDefine<S, A, G>): Store<S, A & Actions<S>, G>;
 //#endregion
-//#region src/persistent.d.ts
-declare function proxyWithPersistent<T extends object>(initialObject: T, options?: PersistentOptions): T;
-//#endregion
-//#region src/use-status.d.ts
-declare function useStatus<S extends object, A extends Actions<S>, G extends Getters<S>>(store: Store<S, A, G>): Snapshot<ActionsStatus<A>>;
-//#endregion
-//#region src/use-store.d.ts
+//#region src/use.d.ts
 declare function useStore<S extends object, A extends Actions<S>, G extends Getters<S>>(store: Store<S, A, G>): Snapshot<S & GettersReturnType<G> & A>;
 //#endregion
-export { defineStore, proxyWithPersistent, useStatus, useStore };
+//#region src/index.d.ts
+declare const _default: {
+  use: typeof use;
+};
+//#endregion
+export { _default as default, defineStore, plugins, use, useStore };

package/dist/index.mjs

@@ -1,66 +1,15 @@
 import { createElement } from "react";
 import { proxy, ref, subscribe, useSnapshot } from "valtio";
 import { subscribeKey } from "valtio/utils";
-import { tryParseJson } from "@hairy/utils";
-import { generateStructureId } from "structure-id";
 
-//#region src/utils/index.ts
-function track(action, status) {
-	let loadings = 0;
-	const tracking = () => {
-		loadings++ === 0 && (status.loading = true);
-	};
-	const done = () => {
-		!--loadings && (status.loading = false);
-	};
-	const fulfilled = (value) => {
-		status.finished = true;
-		if (status.error) delete status.error;
-		done();
-		return value;
-	};
-	const rejected = (error) => {
-		status.error = error;
-		done();
-		throw error;
-	};
-	return function(...args) {
-		tracking();
-		try {
-			const value = action(...args);
-			return value instanceof Promise ? value.then(fulfilled, rejected) : fulfilled(value);
-		} catch (error) {
-			rejected(error);
-		}
-	};
-}
-function get(obj, path) {
-	return path.split(".").reduce((result, key) => result?.[key], obj);
-}
-function set(obj, path, value) {
-	const keys = path.split(".");
-	const lastKey = keys.pop();
-	const target = keys.reduce((result, key) => result[key] ??= {}, obj);
-	target[lastKey] = value;
+//#region src/plugin.ts
+const plugins = [];
+function use(plugin) {
+	plugins.push(plugin);
 }
 
 //#endregion
-//#region src/persistent.ts
-function proxyWithPersistent(initialObject, options = {}) {
-	options.key = options.key || generateStructureId(initialObject);
-	const storage = options.storage || (typeof localStorage !== "undefined" ? localStorage : void 0);
-	const state = proxy(tryParseJson(storage?.getItem(options.key)) || initialObject);
-	subscribe(state, () => {
-		const paths = options.paths || Object.keys(state);
-		const statePaths = {};
-		for (const key of paths) set(statePaths, key, get(state, key));
-		storage?.setItem(options.key, JSON.stringify(statePaths));
-	});
-	return state;
-}
-
-//#endregion
-//#region src/define-store.ts
+//#region src/define.ts
 /**
 * @description Define a store
 * @example
@@ -89,105 +38,83 @@ function proxyWithPersistent(initialObject, options = {}) {
 *
 * ```
 */
-function defineStore(store) {
-	const state = typeof store.state === "function" ? store.state() : store.state;
-	const getters = store.getters || {};
-	const actions = store.actions || {};
-	const status = {};
-	status.finished = false;
-	status.loading = false;
-	status.error = void 0;
-	const $status = proxy(status);
-	const $state = store.persist ? proxyWithPersistent(state, store.persist === true ? {} : store.persist) : proxy(state);
+function defineStore(define) {
+	const state = typeof define.state === "function" ? define.state() : define.state;
+	const getters = define.getters || {};
+	const actions = define.actions || {};
+	const $state = proxy(state);
 	const $actions = {};
 	const $getters = {};
-	setupActions($state, actions, $actions, $status);
-	setupGetters($state, getters, $getters);
-	setupStatus($actions, $status);
+	const $plugins = [];
+	for (const key in actions) {
+		$actions[key] = ref(actions[key].bind($state));
+		$state[key] = $actions[key];
+	}
+	for (const key in getters) {
+		Object.defineProperty($state, key, {
+			get: () => getters[key].call($state),
+			enumerable: true
+		});
+		Object.defineProperty($getters, key, {
+			get: () => $state[key],
+			enumerable: true
+		});
+	}
 	function $subscribe(listener) {
-		return subscribe($state, () => listener($state));
+		return subscribe($state, (opts) => listener($state, opts));
+	}
+	function $subscribeKey(key, listener) {
+		return subscribeKey($state, key, (value) => listener(value), true);
 	}
-	$subscribe.status = function(listener) {
-		return subscribe($status, () => listener($status));
-	};
-	$subscribe.key = function(key, listener) {
-		return subscribeKey($state, key, () => listener($state));
-	};
 	function $patch(patch) {
-		if (typeof patch === "function") patch($state);
-		else Object.assign($state, patch);
+		typeof patch === "function" ? patch($state) : Object.assign($state, patch);
 	}
 	function $signal(fn) {
 		return createElement(() => fn(useSnapshot($state)));
 	}
-	$signal.status = function(fn) {
-		return createElement(() => fn(useSnapshot($status)));
-	};
-	return {
+	function use$1(plugin) {
+		plugins.push(plugin);
+	}
+	const base = {
 		$subscribe,
+		$subscribeKey,
 		$patch,
 		$state,
-		$status,
 		$actions,
 		$getters,
 		$signal,
-		...$actions
+		use: use$1
 	};
-}
-function setupActions($state, actions, $actions, $status) {
-	for (const key in actions) {
-		$status[key] = {
-			finished: false,
-			loading: false,
-			error: void 0
-		};
-		$actions[key] = track(actions[key].bind($state), $status[key]);
-		Object.defineProperty($state, key, {
-			get: () => ref($actions[key]),
-			enumerable: false
-		});
-	}
-}
-function setupGetters($state, getters, $getters) {
-	for (const key in getters) {
-		Object.defineProperty($getters, key, {
-			get: () => $state[key],
-			enumerable: true
-		});
-		Object.defineProperty($state, key, {
-			get: () => getters[key].call($state),
-			enumerable: true
-		});
-	}
-}
-function setupStatus($actions, $status) {
-	Object.defineProperty($status, "loading", {
-		get: () => Object.keys($actions).some((key) => $status[key].loading),
-		enumerable: true
-	});
-	Object.defineProperty($status, "finished", {
-		get: () => Object.keys($actions).every((key) => $status[key].finished),
-		enumerable: true
-	});
-	Object.defineProperty($status, "error", {
-		get: () => {
-			return $status[Object.keys($actions).find((key) => $status[key].error) || ""]?.error;
+	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;
 		},
-		enumerable: true
+		set(target, prop, value) {
+			prop in $state ? $state[prop] = value : target[prop] = value;
+			return true;
+		}
 	});
+	for (const plugin of [...plugins, ...$plugins]) plugin({
+		store,
+		options: define
+	});
+	return store;
 }
 
 //#endregion
-//#region src/use-status.ts
-function useStatus(store) {
-	return useSnapshot(store.$status);
-}
-
-//#endregion
-//#region src/use-store.ts
+//#region src/use.ts
 function useStore(store) {
 	return useSnapshot(store.$state);
 }
 
 //#endregion
-export { defineStore, proxyWithPersistent, useStatus, useStore };
+//#region src/index.ts
+var src_default = { use };
+
+//#endregion
+export { src_default as default, defineStore, plugins, use, useStore };

package/dist/persistent-CQxMybmm.mjs

@@ -0,0 +1,32 @@
+import { subscribe } from "valtio";
+import { get, set } from "@hairy/utils";
+import { destr } from "destr";
+import { generateStructureId } from "structure-id";
+
+//#region src/plugins/persistent/index.ts
+function persistent() {
+	return (context) => {
+		const options = context.options.persist || {};
+		options.key = options.key || generateStructureId(context.store.$state);
+		const storage = options.storage || (typeof localStorage !== "undefined" ? localStorage : void 0);
+		const value = storage?.getItem(options.key);
+		let __watch = false;
+		if (value instanceof Promise) value.then(initialize);
+		else initialize(value);
+		function initialize(value$1) {
+			Object.assign(context.store.$state, destr(value$1));
+			__watch = true;
+		}
+		subscribe(context.store.$state, () => {
+			if (!__watch) return;
+			const paths = options.paths || Object.keys(context.store.$state);
+			const statePaths = {};
+			for (const key of paths) set(statePaths, key, get(context.store.$state, key));
+			const value$1 = JSON.stringify(statePaths);
+			storage?.setItem(options.key, value$1);
+		});
+	};
+}
+
+//#endregion
+export { persistent as t };

package/dist/plugins/index.d.mts

@@ -0,0 +1,3 @@
+import "../index-BxQlAvn6.mjs";
+import { i as persistent, n as PersistentOptions, r as Storage, t as DeepKeys } from "../index-3Qs1mdbd.mjs";
+export { DeepKeys, PersistentOptions, Storage, persistent };

package/dist/plugins/index.mjs

@@ -0,0 +1,3 @@
+import { t as persistent } from "../persistent-CQxMybmm.mjs";
+
+export { persistent };

package/dist/plugins/persistent/index.d.mts

@@ -0,0 +1,3 @@
+import "../../index-BxQlAvn6.mjs";
+import { i as persistent, n as PersistentOptions, r as Storage, t as DeepKeys } from "../../index-3Qs1mdbd.mjs";
+export { DeepKeys, PersistentOptions, Storage, persistent };

package/dist/plugins/persistent/index.mjs

@@ -0,0 +1,3 @@
+import { t as persistent } from "../../persistent-CQxMybmm.mjs";
+
+export { persistent };

package/dist/types/index.d.mts

@@ -0,0 +1,2 @@
+import { a as GettersReturnType, c as PluginContext, d as StoreDefine, f as Subscribe, i as Getters, l as Signal, n as ActionsOmitThisParameter, o as Patch, p as SubscribeKey, r as ActionsTree, s as Plugin, t as Actions, u as Store } from "../index-BxQlAvn6.mjs";
+export { Actions, ActionsOmitThisParameter, ActionsTree, Getters, GettersReturnType, Patch, Plugin, PluginContext, Signal, Store, StoreDefine, Subscribe, SubscribeKey };

package/dist/types/index.mjs

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valtio-define",
   "type": "module",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "⚡quickly create a fully functional and robust Valtio factory",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",
@@ -14,6 +14,9 @@
   "keywords": [],
   "sideEffects": false,
   "publishConfig": {
+    "./plugins": "./dist/plugins/index.mjs",
+    "./plugins/persistent": "./dist/plugins/persistent/index.mjs",
+    "./types": "./dist/types/index.mjs",
     "access": "public"
   },
   "exports": {
@@ -30,6 +33,7 @@
   },
   "dependencies": {
     "@hairy/utils": "^1.46.0",
+    "destr": "^2.0.5",
     "structure-id": "^1.2.9",
     "valtio": "^2.2.0"
   },
@@ -39,6 +43,7 @@
     "@antfu/utils": "^9.3.0",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/browser-playwright": "^4.0.15",
     "@vitest/coverage-v8": "^4.0.15",
@@ -47,6 +52,7 @@
     "lint-staged": "^16.2.6",
     "playwright": "^1.57.0",
     "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "simple-git-hooks": "^2.13.1",
     "tinyexec": "^1.0.2",
     "tsdown": "^0.16.0",
@@ -72,6 +78,7 @@
     "release": "bumpp",
     "start": "tsx src/index.ts",
     "test": "vitest",
+    "coverage": "vitest run --coverage",
     "typecheck": "tsc"
   }
 }