valtio-define 1.0.0 → 1.0.1

package/README.md

@@ -7,18 +7,20 @@
 [![coverage][coverage-src]][coverage-href]
 [![License][license-src]][license-href]
 
-⚡ Quickly create a fully functional and robust Valtio factory
+⚡ Quickly create a fully functional and robust [Valtio](https://valtio.dev) factory
 
 ## Installation
 
 ```bash
-npm install valtio-define
+pnpm add valtio-define
 ```
 
 ## Usage
 
 ### Basic Store
 
+Create a reactive store with state and actions. The store provides a simple and intuitive API for managing state in React applications, built on top of Valtio.
+
 ```tsx
 import { defineStore, useStore } from 'valtio-define'
 
@@ -32,10 +34,10 @@ const store = defineStore({
 })
 
 function Counter() {
-  const { count, increment } = useStore(store)
+  const { count } = useStore(store)
   return (
     <div>
-      <button onClick={increment}>Increment</button>
+      <button onClick={store.increment}>Increment</button>
       <div>{count}</div>
     </div>
   )
@@ -44,6 +46,8 @@ function Counter() {
 
 ### With Getters
 
+Getters are computed properties that automatically update when their dependencies change. They provide a clean way to derive state without manually tracking dependencies.
+
 ```tsx
 const store = defineStore({
   state: () => ({ count: 0 }),
@@ -169,6 +173,87 @@ function App() {
 }
 ```
 
+### Store to State Hooks
+
+Convert store state to React hooks similar to `useState`. This provides a more React-idiomatic way to access and update store state.
+
+#### `storeToState(store, key)`
+
+Returns a tuple `[state, setter]` for a single store key, similar to React's `useState`.
+
+```tsx
+import { defineStore, storeToState } from 'valtio-define'
+
+const store = defineStore({
+  state: { count: 0, name: 'test' },
+})
+
+function Counter() {
+  const [count, setCount] = storeToState(store, 'count')
+  const [name, setName] = storeToState(store, 'name')
+
+  return (
+    <div>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+      <button onClick={() => setCount(prev => prev + 1)}>Increment (functional)</button>
+      <div>
+        Count:
+        {count}
+      </div>
+      <div>
+        Name:
+        {name}
+      </div>
+    </div>
+  )
+}
+```
+
+**Parameters:**
+- `store`: Store instance created by `defineStore`
+- `key`: Key of the state property to access
+
+**Returns:** `[state, setter]` tuple where:
+- `state`: Current value of the state property
+- `setter`: Function to update the state (accepts value or updater function)
+
+#### `storeToStates(store)`
+
+Returns an object with all store keys mapped to `[state, setter]` tuples.
+
+```tsx
+function Component() {
+  const {
+    count: [count, setCount],
+    name: [name, setName],
+    user: [user, setUser],
+  } = storeToStates(store)
+
+  return (
+    <div>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+      <div>
+        Count:
+        {count}
+      </div>
+      <div>
+        Name:
+        {name}
+      </div>
+      <div>
+        User:
+        {user.name}
+      </div>
+    </div>
+  )
+}
+```
+
+**Parameters:**
+- `store`: Store instance created by `defineStore`
+
+**Returns:** Object where each key maps to a `[state, setter]` tuple
+
 ## API
 
 ### `defineStore(store)`
@@ -179,7 +264,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 plugin configuration (boolean or object) - see [Persistence Plugin](#persistence-plugin)
+- `store.persist`: Persistence plugin configuration (boolean or object) - see [Persistence Plugin](#persistence)
 
 **Returns:** Store instance with reactive state and actions
 
@@ -192,6 +277,27 @@ React hook that returns a snapshot of the store state.
 
 **Returns:** Snapshot of the store state
 
+### `storeToState(store, key)`
+
+React hook that returns a `[state, setter]` tuple for a single store key, similar to React's `useState`.
+
+**Parameters:**
+- `store`: Store instance created by `defineStore`
+- `key`: Key of the state property to access
+
+**Returns:** `[state, setter]` tuple where:
+- `state`: Current value of the state property
+- `setter`: Function to update the state (accepts value or updater function like `setState(value)` or `setState(prev => newValue)`)
+
+### `storeToStates(store)`
+
+React hook that returns an object with all store keys mapped to `[state, setter]` tuples.
+
+**Parameters:**
+- `store`: Store instance created by `defineStore`
+
+**Returns:** Object where each key maps to a `[state, setter]` tuple, preserving the correct type for each property
+
 ### Plugins
 
 Plugins allow you to extend store functionality. You can use plugins globally or per-store.
@@ -199,11 +305,11 @@ Plugins allow you to extend store functionality. You can use plugins globally or
 #### Global Plugin Registration
 
 ```tsx
-import { use } from 'valtio-define'
+import valtio from 'valtio-define'
 import { persistent } from 'valtio-define/plugins'
 
 // Register plugin globally - applies to all stores
-use(persistent())
+valtio.use(persistent())
 ```
 
 #### Per-Store Plugin Registration

package/dist/{index-3Qs1mdbd.d.mts → index-Bvdj9tgN.d.mts}

@@ -1,4 +1,4 @@
-import { s as Plugin } from "./index-BxQlAvn6.mjs";
+import { s as Plugin } from "./index-C_5_h4QO.mjs";
 import { Awaitable } from "@hairy/utils";
 
 //#region src/plugins/persistent/index.d.ts
@@ -16,7 +16,7 @@ interface PersistentOptions<S extends object = Record<string, unknown>> {
 }
 declare module 'valtio-define/types' {
   interface StoreDefine<S extends object, A extends ActionsTree, G extends Getters<any>> {
-    persist?: PersistentOptions<S>;
+    persist?: PersistentOptions<S> | boolean;
   }
 }
 //#endregion

package/dist/{index-BxQlAvn6.d.mts → index-C_5_h4QO.d.mts}

@@ -25,7 +25,7 @@ interface SubscribeKey<S, G extends Getters<S>> {
 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>> = {
+type Store<S, A extends Actions<S> = Actions<S>, G extends Getters<S> = Getters<S>> = {
   $subscribe: Subscribe<S, G>;
   $subscribeKey: SubscribeKey<S, G>;
   $patch: Patch<S, G>;

package/dist/index.d.mts

@@ -1,4 +1,5 @@
-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 { a as GettersReturnType, d as StoreDefine, i as Getters, r as ActionsTree, s as Plugin, t as Actions, u as Store } from "./index-C_5_h4QO.mjs";
+import { Dispatch, SetStateAction } from "react";
 import { Snapshot } from "valtio";
 
 //#region src/plugin.d.ts
@@ -39,9 +40,13 @@ declare function defineStore<S extends object, A extends ActionsTree, G extends
 //#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
+//#region src/utils.d.ts
+declare function storeToState<S extends object, K$1 extends keyof S>(store: Store<S>, key: K$1): [S[K$1], Dispatch<SetStateAction<S[K$1]>>];
+declare function storeToStates<S extends object>(store: Store<S>): { [K in keyof S]: [S[K], Dispatch<SetStateAction<S[K]>>] };
+//#endregion
 //#region src/index.d.ts
 declare const _default: {
   use: typeof use;
 };
 //#endregion
-export { _default as default, defineStore, plugins, use, useStore };
+export { _default as default, defineStore, plugins, storeToState, storeToStates, use, useStore };

package/dist/index.mjs

@@ -112,9 +112,27 @@ function useStore(store) {
 	return useSnapshot(store.$state);
 }
 
+//#endregion
+//#region src/utils.ts
+function storeToState(store, key) {
+	const state = useStore(store);
+	function set(value) {
+		if (typeof value === "function") store.$patch((state$1) => {
+			state$1[key] = value(state$1[key]);
+		});
+		else store.$patch((state$1) => {
+			state$1[key] = value;
+		});
+	}
+	return [state[key], set];
+}
+function storeToStates(store) {
+	return Object.fromEntries(Object.keys(store.$state).map((key) => [key, storeToState(store, key)]));
+}
+
 //#endregion
 //#region src/index.ts
 var src_default = { use };
 
 //#endregion
-export { src_default as default, defineStore, plugins, use, useStore };
+export { src_default as default, defineStore, plugins, storeToState, storeToStates, use, useStore };

package/dist/{persistent-CQxMybmm.mjs → persistent-kgcmMQPj.mjs}

@@ -6,7 +6,8 @@ import { generateStructureId } from "structure-id";
 //#region src/plugins/persistent/index.ts
 function persistent() {
 	return (context) => {
-		const options = context.options.persist || {};
+		if (!context.options.persist) return;
+		const options = typeof context.options.persist === "boolean" ? {} : 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);

package/dist/plugins/index.d.mts

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

package/dist/plugins/index.mjs

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

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

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

package/dist/plugins/persistent/index.mjs

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

package/dist/types/index.d.mts

@@ -1,2 +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";
+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-C_5_h4QO.mjs";
 export { Actions, ActionsOmitThisParameter, ActionsTree, Getters, GettersReturnType, Patch, Plugin, PluginContext, Signal, Store, StoreDefine, Subscribe, SubscribeKey };

package/package.json

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