valtio-define 1.3.0 → 1.3.2

package/README.md

@@ -12,7 +12,7 @@
 ## 📦 Installation
 
 ```bash
-pnpm add valtio-define
+pnpm add valtio valtio-define
 ```
 
 <details>
@@ -42,43 +42,26 @@ const store = defineStore({
       this.count++
     },
   },
+  getters: {
+    doubled() {
+      return this.count * 2
+    },
+  },
 })
 
 function Counter() {
-  const { count } = useStore(store)
+  const { count, doubled } = useStore(store)
 
   return (
     <div>
-      <div>
-        Count:
-        {count}
-      </div>
       <button onClick={store.increment}>Increment</button>
+      <div>Count: {count}</div>
+      <div>Doubled: {doubled}</div>
     </div>
   )
 }
 ```
 
-### Derived State (Getters)
-
-Getters are **computed properties**. They automatically re-evaluate when their dependencies change, providing a clean way to derive data.
-
-```tsx
-const store = defineStore({
-  state: () => ({ count: 0 }),
-  getters: {
-    doubled() {
-      return this.count * 2
-    },
-  },
-  actions: {
-    increment() {
-      this.count++
-    },
-  },
-})
-```
-
 -----
 
 ## 🛠 Advanced Features
@@ -202,24 +185,24 @@ Every store instance created with `defineStore` includes built-in utility method
   * **`$patch(obj | fn)`**: Bulk update the state.
   * **`$subscribe(callback)`**: Watch the entire store for changes.
   * **`$subscribeKey(key, callback)`**: Watch a specific property.
-  * **`$signal(selector)`**: Use a selector function to create a signal.
+  * **`$signal(selector)`**: Render reactive values inline in JSX (works best with the Signal plugin + `@jsxImportSource`).
 
 -----
 
 ### 📡 Signal
 
-> if you want to use the signal plugin, you need to import it and use it in your store.
+Register the Signal plugin globally:
 ```tsx
-import { valtio } from 'valtio-define'
+import valtio from 'valtio-define'
 import { signal } from 'valtio-define/plugins/signal'
 
 valtio.use(signal())
 ```
 
-And add jsxImportSource at the beginning of your `.tsx` file
+Add `jsxImportSource` at the beginning of your `.tsx` file:
 
 ```tsx
-/** @jsxImportSource valtio-signal */
+/** @jsxImportSource valtio-define/plugins/signal */
 
 function App() {
   return <div>{store.$signal(state => state.count)}</div>
@@ -233,6 +216,8 @@ function App() {
 Plugins can be applied to all stores or restricted to a single instance.
 
 ```tsx
+import valtio, { defineStore } from 'valtio-define'
+
 // Global
 valtio.use(myPlugin())
 
@@ -247,6 +232,7 @@ Extend functionality by accessing the `store` instance and `options` through the
 
 ```tsx
 import type { Plugin } from 'valtio-define'
+import valtio from 'valtio-define'
 
 function loggerPlugin(): Plugin {
   return ({ store, options }) => {
@@ -256,6 +242,8 @@ function loggerPlugin(): Plugin {
   }
 }
 
+valtio.use(loggerPlugin())
+
 declare module 'valtio-define' {
   export interface StoreDefineOptions<S extends object> {
     $myPlugin?: {

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { _ as SubscribeKey, a as GettersReturnType, c as Path, d as Signal, f as Store, g as Subscribe, h as StoreOptions, i as Getters, l as Plugin, m as StoreDefineOptions, n as ActionsOmitThisParameter, o as Op, p as StoreDefine, r as ActionsTree, s as Patch, t as Actions, u as PluginContext } from "./types-Cu8iJxyS.mjs";
+import { _ as SubscribeKey, a as GettersReturnType, c as Path, d as Signal, f as Store, g as Subscribe, h as StoreOptions, i as Getters, l as Plugin, m as StoreDefineOptions, n as ActionsOmitThisParameter, o as Op, p as StoreDefine, r as ActionsTree, s as Patch, t as Actions, u as PluginContext } from "./types-DD1IhWyl.mjs";
 import { Snapshot } from "valtio";
 import { Dispatch, SetStateAction } from "react";
 

package/dist/index.mjs

@@ -1 +1 @@
-import{proxy as e,useSnapshot as t}from"valtio";import{computed as n}from"valtio-reactive";import{$ as r}from"valtio-signal";import{subscribeKey as i}from"valtio/utils";import{proxy as a,ref as o,subscribe as s}from"valtio/vanilla";const c=e([]);function l(e){c.push(e)}function u(e){let t=typeof e.state==`function`?e.state():e.state,l=e.getters||{},u=e.actions||{},p=a(t),m,h={},g=new WeakSet,_=n(f(l,p));for(let e of Object.keys(_))d(p,e,()=>_[e],{enumerable:!1});for(let e in u)h[e]=o(u[e].bind(p)),d(p,e,()=>h[e],{enumerable:!1});function v(e){return s(p,t=>e(p,t))}function y(e,t){return i(p,e,e=>t(e),!0)}function b(e){typeof e==`function`?e(p):Object.assign(p,e)}function x(e){return e(r(p))}function S(){m?.()}function C(e){E(e)}let w={$subscribe:v,$subscribeKey:y,$patch:b,$state:p,$actions:h,$getters:_,$dispose:S,$signal:x,use:C},T=new Proxy(w,{get(e,t){return t in h?h[t]:t in e?e[t]:p[t]},has(e,t){return t in e||t in h||t in p},set(e,t,n){return t in p?p[t]=n:e[t]=n,!0}});function E(t){g.has(t)||(g.add(t),t({store:T,options:e}))}for(let e of c)E(e);return m=s(c,()=>{for(let e of c)E(e)}),T}function d(e,t,n,r){Object.defineProperty(e,t,{get:n,enumerable:!0,...r})}function f(e,t){let n={};for(let r in e)n[r]=e[r].bind(t);return n}function p(e,n){return t(e.$state,n)}function m(e,n){return t(e.$getters,n)}function h(e,t,n){let r=p(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 g(e,t){return Object.fromEntries(Object.keys(e.$state).map(n=>[n,h(e,n,t)]))}var _={use:l};export{_ as default,u as defineStore,c as plugins,h as storeToState,g as storeToStates,l as use,m as useGetters,p as useStore};
+import{proxy as e,useSnapshot as t}from"valtio";import{batch as n}from"valtio-reactive";import{$ as r}from"valtio-signal";import{subscribeKey as i}from"valtio/utils";import{proxy as a,ref as o,subscribe as s}from"valtio/vanilla";const c=e([]);function l(e){c.push(e)}function u(e){let t=typeof e.state==`function`?e.state():e.state,l=e.getters||{},u=e.actions||{},f=a(t),p={},m=a({}),h=new WeakSet,g;for(let e of Object.keys(l))d(f,e,l[e].bind(f),{enumerable:!1}),d(m,e,()=>f[e]);for(let e of Object.keys(u))p[e]=o(u[e].bind(f)),d(f,e,()=>p[e],{enumerable:!1});function _(e){return s(f,t=>e(f,t))}function v(e,t){return i(f,e,e=>t(e),!0)}function y(e){typeof e==`function`?n(()=>e(f)):Object.assign(f,e)}function b(e){return e(r(f))}function x(){g?.()}function S(e){T(e)}let C={$subscribe:_,$subscribeKey:v,$patch:y,$state:f,$actions:p,$getters:m,$dispose:x,$signal:b,use:S},w=new Proxy(C,{get(e,t){return t in p?p[t]:t in e?e[t]:f[t]},has(e,t){return t in e||t in p||t in f},set(e,t,n){return t in f?f[t]=n:e[t]=n,!0}});function T(t){h.has(t)||(h.add(t),t({store:w,options:e}))}for(let e of c)T(e);return g=s(c,()=>{for(let e of c)T(e)}),w}function d(e,t,n,r){Object.defineProperty(e,t,{get:n,enumerable:!0,...r})}function f(e,n){return t(e.$state,n)}function p(e,n){return t(e.$getters,n)}function m(e,t,n){let r=f(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 h(e,t){return Object.fromEntries(Object.keys(e.$state).map(n=>[n,m(e,n,t)]))}var g={use:l};export{g as default,u as defineStore,c as plugins,m as storeToState,h as storeToStates,l as use,p as useGetters,f as useStore};

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

@@ -1,4 +1,4 @@
-import { l as Plugin } from "../../types-Cu8iJxyS.mjs";
+import { l as Plugin } from "../../types-DD1IhWyl.mjs";
 import { PersistentOptions, PersistentStore } from "./types.mjs";
 
 //#region src/plugins/persist/index.d.ts

package/dist/plugins/persist/index.mjs

@@ -1 +1 @@
-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=s===!0?{}:s,d=u.key||i(l),f=u.storage??(typeof localStorage<`u`?localStorage:void 0);if(!f?.getItem||!f?.setItem)return;let p=o.store.$persist?.meta??{mounted:!1,hydrated:!1};function m(e){let t=r(e);t&&typeof t==`object`&&(Object.keys(c||{}).forEach(e=>Reflect.deleteProperty(t,e)),Object.assign(l,t)),p.hydrated=!0}function h(){p.mounted=!0;let e=f.getItem(d);e instanceof Promise?e.then(m):m(e)}function g(){p.unsubscribe?.(),p.unsubscribe=void 0}function _(){g(),p.unsubscribe=e(l,()=>{if(!p.hydrated)return;let e=(u.paths||Object.keys(l)).reduce((e,r)=>n(e,r,t(l,r)),{});f.setItem(d,JSON.stringify(e))})}o.store.$persist={mount:h,unmount:g,meta:p},a&&!p.mounted&&h(),_()}}export{a as persist};
+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=s===!0?{}:s,d=u.key||i(l),f=u.storage??(typeof localStorage<`u`?localStorage:void 0);if(!f?.getItem||!f?.setItem)return;let p=o.store.$persist?.meta??{mounted:!1,hydrated:!1};function m(e){let t=r(e);t&&typeof t==`object`&&Object.assign(l,t),p.hydrated=!0}function h(){p.mounted=!0;let e=f.getItem(d);e instanceof Promise?e.then(m):m(e)}function g(){p.unsubscribe?.(),p.unsubscribe=void 0}function _(){g(),p.unsubscribe=e(l,()=>{if(!p.hydrated)return;let e=(u.paths||Object.keys(l)).reduce((e,r)=>n(e,r,t(l,r)),{});f.setItem(d,JSON.stringify(e))})}o.store.$persist={mount:h,unmount:g,meta:p},a&&!p.mounted&&h(),_()}}export{a as persist};

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

@@ -1,4 +1,4 @@
-import { i as Getters, l as Plugin } from "../../types-Cu8iJxyS.mjs";
+import { i as Getters, l as Plugin } from "../../types-DD1IhWyl.mjs";
 import { SignalStore } from "./types.mjs";
 
 //#region src/plugins/signal/index.d.ts

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

@@ -1,4 +1,4 @@
-import { a as GettersReturnType, i as Getters } from "../../types-Cu8iJxyS.mjs";
+import { a as GettersReturnType, i as Getters } from "../../types-DD1IhWyl.mjs";
 
 //#region src/plugins/signal/types.d.ts
 interface Signal<S> {

package/dist/{types-Cu8iJxyS.d.mts → types-DD1IhWyl.d.mts}

@@ -5,9 +5,9 @@ type ActionsTree = Record<string, (...args: any[]) => any>;
 type Actions<S = any> = Record<string, (this: S, ...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]> };
+type GettersReturnType<G extends Getters> = { [K in keyof G]: ReturnType<G[K]> };
 interface StoreDefineOptions<S> {}
-interface StoreDefine<S extends object, A extends object, G extends Getters<any>> extends StoreDefineOptions<S> {
+interface StoreDefine<S extends object, A extends object, G extends Getters> extends StoreDefineOptions<S> {
   state: (() => S) | S;
   actions?: A & ThisType<A & S & GettersReturnType<G>>;
   getters?: G & ThisType<S & GettersReturnType<G>>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valtio-define",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "⚡quickly create a fully functional and robust Valtio factory",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^19.2.4"
   },
   "dependencies": {
     "@hairy/utils": "^1.47.0",