valtio-define 1.2.1 → 1.3.1

package/README.md

@@ -12,7 +12,7 @@
 ## 📦 Installation
 
 ```bash
-pnpm add valtio-define
+pnpm add valtio valtio-define
 ```
 
 <details>
@@ -119,7 +119,7 @@ Save and restore your store state using the `persist` plugin.
 
     ```tsx
     import valtio from 'valtio-define'
-    import { persist } from 'valtio-define/plugins'
+    import { persist } from 'valtio-define/plugins/persist'
 
     valtio.use(persist())
     ```
@@ -202,10 +202,30 @@ 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 inside JSX for fine-grained reactivity.
+  * **`$signal(selector)`**: Render reactive values inline in JSX (works best with the Signal plugin + `@jsxImportSource`).
 
 -----
 
+### 📡 Signal
+
+Register the Signal plugin globally:
+```tsx
+import valtio from 'valtio-define'
+import { signal } from 'valtio-define/plugins/signal'
+
+valtio.use(signal())
+```
+
+Add `jsxImportSource` at the beginning of your `.tsx` file:
+
+```tsx
+/** @jsxImportSource valtio-define/plugins/signal */
+
+function App() {
+  return <div>{store.$signal(state => state.count)}</div>
+}
+```
+
 ## 🔌 Plugins
 
 ### Global vs. Per-Store
@@ -213,6 +233,8 @@ Every store instance created with `defineStore` includes built-in utility method
 Plugins can be applied to all stores or restricted to a single instance.
 
 ```tsx
+import valtio, { defineStore } from 'valtio-define'
+
 // Global
 valtio.use(myPlugin())
 
@@ -227,6 +249,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 }) => {
@@ -236,6 +259,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 { a as GettersReturnType, c as PluginContext, d as StoreDefine, f as StoreDefineOptions, h as SubscribeKey, i as Getters, l as Signal, m as Subscribe, n as ActionsOmitThisParameter, o as Patch, p as StoreOptions, r as ActionsTree, s as Plugin, t as Actions, u as Store } from "./types-CqDu3QIJ.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";
 
@@ -35,12 +35,15 @@ declare function use(plugin: Plugin): void;
  *
  * ```
  */
-declare function defineStore<S extends object = {}, A extends Actions<S> = {}, G extends Getters<S> = {}>(define: StoreDefine<S, A, G>): Store<S, A, G>;
+declare function defineStore<S extends object = {}, A extends Actions<S> = {}, G extends Getters<S> = {}>(options: StoreDefine<S, A, G>): Store<S, A, G>;
 //#endregion
 //#region src/hooks.d.ts
 declare function useStore<S extends object, A extends Actions<S>, G extends Getters<S>>(store: Store<S, A, G>, options?: {
   sync?: boolean;
 }): Snapshot<S & GettersReturnType<G> & A>;
+declare function useGetters<S extends object, G extends Getters<S>>(store: Store<S, any, G>, options?: {
+  sync?: boolean;
+}): GettersReturnType<G>;
 //#endregion
 //#region src/utils.d.ts
 declare function storeToState<S extends object, K extends keyof S>(store: Store<S>, key: K, options?: {
@@ -55,4 +58,4 @@ declare const _default: {
   use: typeof use;
 };
 //#endregion
-export { Actions, ActionsOmitThisParameter, ActionsTree, Getters, GettersReturnType, Patch, Plugin, PluginContext, Signal, Store, StoreDefine, StoreDefineOptions, StoreOptions, Subscribe, SubscribeKey, _default as default, defineStore, plugins, storeToState, storeToStates, use, useStore };
+export { Actions, ActionsOmitThisParameter, ActionsTree, Getters, GettersReturnType, Op, Patch, Path, Plugin, PluginContext, Signal, Store, StoreDefine, StoreDefineOptions, StoreOptions, Subscribe, SubscribeKey, _default as default, defineStore, plugins, storeToState, storeToStates, use, useGetters, useStore };

package/dist/index.mjs

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

package/dist/plugins/index.d.mts

@@ -1,2 +1,3 @@
 import { PersistentMountOptions, persist } from "./persist/index.mjs";
-export { PersistentMountOptions, persist };
+import { signal } from "./signal/index.mjs";
+export { PersistentMountOptions, persist, signal };

package/dist/plugins/index.mjs

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

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

@@ -1,4 +1,4 @@
-import { s as Plugin } from "../../types-CqDu3QIJ.mjs";
+import { l as Plugin } from "../../types-DD1IhWyl.mjs";
 import { PersistentOptions, PersistentStore } from "./types.mjs";
 
 //#region src/plugins/persist/index.d.ts
@@ -15,7 +15,7 @@ declare module 'valtio-define' {
   interface StoreDefineOptions<S extends object> {
     persist?: PersistentOptions<S> | boolean;
   }
-  interface StoreOptions extends PersistentStore {}
+  interface StoreOptions<S, A, G> extends PersistentStore {}
 }
 //#endregion
 export { PersistentMountOptions, persist };

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

@@ -0,0 +1,10 @@
+import { i as Getters, l as Plugin } from "../../types-DD1IhWyl.mjs";
+import { SignalStore } from "./types.mjs";
+
+//#region src/plugins/signal/index.d.ts
+declare function signal(): Plugin;
+declare module 'valtio-define' {
+  interface StoreOptions<S, A, G extends Getters<S>> extends SignalStore<S, G> {}
+}
+//#endregion
+export { signal };

package/dist/plugins/signal/index.mjs

@@ -0,0 +1 @@
+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};

package/dist/plugins/signal/jsx-dev-runtime.d.mts

@@ -0,0 +1,2 @@
+import { Fragment, jsx, jsxDEV, jsxs } from "./jsx-runtime.mjs";
+export { Fragment, jsx, jsxDEV, jsxs };

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

@@ -0,0 +1 @@
+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};

package/dist/plugins/signal/jsx-runtime.d.mts

@@ -0,0 +1,11 @@
+import { Fragment, jsx, jsxDEV, jsxs } from "valtio-signal/jsx-runtime";
+
+//#region src/plugins/signal/jsx-runtime.d.ts
+declare global {
+  namespace JSX {
+    interface IntrinsicElements extends React.JSX.IntrinsicElements {}
+    interface Element extends React.ReactElement<any, any> {}
+  }
+}
+//#endregion
+export { Fragment, jsx, jsxDEV, jsxs };

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

@@ -0,0 +1 @@
+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};

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

@@ -0,0 +1,12 @@
+import { a as GettersReturnType, i as Getters } from "../../types-DD1IhWyl.mjs";
+
+//#region src/plugins/signal/types.d.ts
+interface Signal<S> {
+  (): S;
+  <T>(fn: (state: S) => T): T;
+}
+interface SignalStore<S, G extends Getters<S>> {
+  $signal: Signal<S & GettersReturnType<G>>;
+}
+//#endregion
+export { Signal, SignalStore };

package/dist/plugins/signal/types.mjs

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

package/dist/{types-CqDu3QIJ.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>>;
@@ -18,7 +18,7 @@ interface Signal<S, G extends Getters<S>> {
 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;
+  (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;
@@ -26,17 +26,17 @@ interface SubscribeKey<S, G extends Getters<S>> {
 interface Patch<S, G extends Getters<S>> {
   (patch: Partial<S> | ((state: S & GettersReturnType<G>) => void)): void;
 }
-interface StoreOptions {}
+interface StoreOptions<S, A, G> {}
 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>;
+  $state: S;
   $actions: ActionsOmitThisParameter<A>;
   $getters: GettersReturnType<G>;
+  $dispose: () => void;
   use: (plugin: Plugin) => void;
-  $signal: Signal<S, G>;
-} & S & GettersReturnType<G> & ActionsOmitThisParameter<A> & StoreOptions;
+} & S & GettersReturnType<G> & ActionsOmitThisParameter<A> & StoreOptions<S, A, G>;
 interface PluginContext<S extends object = Record<string, unknown>> {
   store: Store<S, Actions<S>, Getters<S>>;
   options: StoreDefine<S, ActionsTree, Getters<S>>;
@@ -45,4 +45,4 @@ interface Plugin {
   <S extends object = Record<string, unknown>>(context: PluginContext<S>): void;
 }
 //#endregion
-export { GettersReturnType as a, PluginContext as c, StoreDefine as d, StoreDefineOptions as f, SubscribeKey as h, Getters as i, Signal as l, Subscribe as m, ActionsOmitThisParameter as n, Patch as o, StoreOptions as p, ActionsTree as r, Plugin as s, Actions as t, Store as u };
+export { SubscribeKey as _, GettersReturnType as a, Path as c, Signal as d, Store as f, Subscribe as g, StoreOptions as h, Getters as i, Plugin as l, StoreDefineOptions as m, ActionsOmitThisParameter as n, Op as o, StoreDefine as p, ActionsTree as r, Patch as s, Actions as t, PluginContext as u };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valtio-define",
   "type": "module",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "description": "⚡quickly create a fully functional and robust Valtio factory",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",
@@ -26,19 +26,25 @@
     "./plugins": "./dist/plugins/index.mjs",
     "./plugins/persist": "./dist/plugins/persist/index.mjs",
     "./plugins/persist/types": "./dist/plugins/persist/types.mjs",
+    "./plugins/signal": "./dist/plugins/signal/index.mjs",
+    "./plugins/signal/jsx-dev-runtime": "./dist/plugins/signal/jsx-dev-runtime.mjs",
+    "./plugins/signal/jsx-runtime": "./dist/plugins/signal/jsx-runtime.mjs",
+    "./plugins/signal/types": "./dist/plugins/signal/types.mjs",
     "./package.json": "./package.json"
   },
   "files": [
     "dist"
   ],
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^19.2.4"
   },
   "dependencies": {
     "@hairy/utils": "^1.47.0",
     "destr": "^2.0.5",
     "structure-id": "^1.2.9",
-    "valtio": "^2.3.0"
+    "valtio": "^2.3.0",
+    "valtio-reactive": "^0.2.0",
+    "valtio-signal": "^0.6.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^7.6.1",