valtio-define 0.2.0 → 0.4.0

package/README.md

@@ -31,11 +31,11 @@ const store = defineStore({
 })
 
 function Counter() {
-  const state = useStore(store)
+  const { count, increment } = useStore(store)
   return (
     <div>
-      <button onClick={store.increment}>Increment</button>
-      <div>{state.count}</div>
+      <button onClick={increment}>Increment</button>
+      <div>{count}</div>
     </div>
   )
 }
@@ -119,19 +119,15 @@ function DataComponent() {
 ### Persistence
 
 ```tsx
-const store = defineStore(
-  {
-    state: () => ({ count: 0 }),
-    actions: {
-      increment() {
-        this.count++
-      },
+const store = defineStore({
+  state: () => ({ count: 0 }),
+  actions: {
+    increment() {
+      this.count++
     },
   },
-  {
-    persist: true // or { key: 'my-store', storage: localStorage, paths: ['count'] }
-  }
-)
+  persist: true // or { key: 'my-store', storage: localStorage, paths: ['count'] }
+})
 ```
 
 If the persist is a boolean value, it will use `structure-id` to generate a unique key for the store.
@@ -193,7 +189,7 @@ function App() {
 
 ## API
 
-### `defineStore(store, options?)`
+### `defineStore(store)`
 
 Creates a store with state, actions, and getters.
 
@@ -201,7 +197,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
-- `options.persist`: Persistence configuration (boolean or object)
+- `store.persist`: Persistence configuration (boolean or object)
 
 **Returns:** Store instance with reactive state and actions
 

package/dist/index.d.mts

@@ -16,8 +16,8 @@ interface StoreDefine<S extends object, A extends Actions<S>, G extends Getters<
   actions?: A;
   getters?: G;
 }
-interface StoreOptions {
-  persist?: boolean | PersistentOptions;
+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;
@@ -26,6 +26,7 @@ interface StoreSignal<S, A extends Actions<S>, G extends Getters<S>> {
 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;
@@ -39,10 +40,11 @@ type Store<S, A extends Actions<S>, G extends Getters<S>> = {
   $status: ActionsStatus<A>;
   $signal: StoreSignal<S, A, G>;
 } & ActionsOmitThisParameter<A>;
-interface PersistentOptions {
+interface PersistentOptions<S extends object = Record<string, unknown>> {
   key?: string;
-  storage?: Storage;
-  paths?: string[];
+  storage?: Partial<Storage> & Pick<Storage, 'getItem' | 'setItem'>;
+  paths?: (keyof S)[];
+  initial?: (initialState: S) => any | Promise<any>;
 }
 //#endregion
 //#region src/define-store.d.ts
@@ -74,7 +76,7 @@ interface PersistentOptions {
  *
  * ```
  */
-declare function defineStore<S extends object, A extends Actions<S>, G extends Getters<S>>(store: StoreDefine<S, A, G> & StoreOptions): Store<S, A, G>;
+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>;
 //#endregion
 //#region src/persistent.d.ts
 declare function proxyWithPersistent<T extends object>(initialObject: T, options?: PersistentOptions): T;

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import { createElement } from "react";
 import { proxy, ref, subscribe, useSnapshot } from "valtio";
-import { jsonTryParse } from "@hairy/utils";
+import { subscribeKey } from "valtio/utils";
+import { tryParseJson } from "@hairy/utils";
 import { generateStructureId } from "structure-id";
 
 //#region src/utils/index.ts
@@ -48,7 +49,7 @@ function set(obj, path, value) {
 function proxyWithPersistent(initialObject, options = {}) {
 	options.key = options.key || generateStructureId(initialObject);
 	const storage = options.storage || (typeof localStorage !== "undefined" ? localStorage : void 0);
-	const state = proxy(jsonTryParse(storage?.getItem(options.key)) || initialObject);
+	const state = proxy(tryParseJson(storage?.getItem(options.key)) || initialObject);
 	subscribe(state, () => {
 		const paths = options.paths || Object.keys(state);
 		const statePaths = {};
@@ -101,7 +102,7 @@ function defineStore(store) {
 	const $actions = {};
 	const $getters = {};
 	setupActions($state, actions, $actions, $status);
-	setupGetters(state, $state, getters, $getters);
+	setupGetters($state, getters, $getters);
 	setupStatus($actions, $status);
 	function $subscribe(listener) {
 		return subscribe($state, () => listener($state));
@@ -109,6 +110,9 @@ function defineStore(store) {
 	$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);
@@ -144,13 +148,13 @@ function setupActions($state, actions, $actions, $status) {
 		});
 	}
 }
-function setupGetters(state, $state, getters, $getters) {
+function setupGetters($state, getters, $getters) {
 	for (const key in getters) {
 		Object.defineProperty($getters, key, {
-			get: () => state[key],
+			get: () => $state[key],
 			enumerable: true
 		});
-		Object.defineProperty(state, key, {
+		Object.defineProperty($state, key, {
 			get: () => getters[key].call($state),
 			enumerable: true
 		});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valtio-define",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "⚡quickly create a fully functional and robust Valtio factory",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",
@@ -29,7 +29,7 @@
     "react": "^18.2.0"
   },
   "dependencies": {
-    "@hairy/utils": "^1.39.0",
+    "@hairy/utils": "^1.46.0",
     "structure-id": "^1.2.9",
     "valtio": "^2.2.0"
   },
@@ -40,9 +40,12 @@
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.6",
     "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.15",
+    "@vitest/coverage-v8": "^4.0.15",
     "bumpp": "^10.3.1",
     "eslint": "^9.39.1",
     "lint-staged": "^16.2.6",
+    "playwright": "^1.57.0",
     "react": "^19.2.0",
     "simple-git-hooks": "^2.13.1",
     "tinyexec": "^1.0.2",
@@ -50,7 +53,8 @@
     "tsx": "^4.20.6",
     "typescript": "^5.9.3",
     "vite": "^7.2.1",
-    "vitest": "^4.0.7",
+    "vitest": "^4.0.15",
+    "vitest-browser-react": "^2.0.2",
     "vitest-package-exports": "^0.1.1",
     "yaml": "^2.8.1"
   },