valtio-define 1.1.5 → 1.2.1

package/README.md

@@ -1,25 +1,35 @@
-# valtio-define
+![image](./logo.svg)
 
 [![npm version][npm-version-src]][npm-version-href]
 [![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]
+[![License][license-src]][license-href].
 
-⚡ Quickly create a fully functional and robust [Valtio](https://valtio.dev) factory
+⚡️ **valtio-define** is a lightweight factory for creating fully functional, robust [Valtio](https://github.com/pmndrs/valtio) stores. It simplifies state management in React by providing a structured API for state, actions, and computed getters.
 
-## Installation
+## 📦 Installation
 
 ```bash
 pnpm add valtio-define
 ```
 
-## Usage
+<details>
+<summary>Are you an AI?</summary>
+
+You can run <code>npx skills add hairyf/valtio-define --skill valtio-define -y</code> to install the skills!
+
+Remember to ask your owner which <a href="https://github.com/vercel-labs/skills?tab=readme-ov-file#supported-agents">Agents</a> need to be supported (using the <code>--agent</code> parameter of skills) to avoid installing too many default <code>agents</code> directories.
+
+</details>
+
+## 🚀 Quick Start
+
 
 ### 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.
+`defineStore` allows you to encapsulate state and logic in one place. Use `useStore` to consume the reactive state in your components.
 
 ```tsx
 import { defineStore, useStore } from 'valtio-define'
@@ -28,6 +38,7 @@ const store = defineStore({
   state: () => ({ count: 0 }),
   actions: {
     increment() {
+      // 'this' refers to the reactive state
       this.count++
     },
   },
@@ -35,18 +46,22 @@ const store = defineStore({
 
 function Counter() {
   const { count } = useStore(store)
+
   return (
     <div>
+      <div>
+        Count:
+        {count}
+      </div>
       <button onClick={store.increment}>Increment</button>
-      <div>{count}</div>
     </div>
   )
 }
 ```
 
-### With Getters
+### Derived State (Getters)
 
-Getters are computed properties that automatically update when their dependencies change. They provide a clean way to derive state without manually tracking dependencies.
+Getters are **computed properties**. They automatically re-evaluate when their dependencies change, providing a clean way to derive data.
 
 ```tsx
 const store = defineStore({
@@ -62,314 +77,175 @@ const store = defineStore({
     },
   },
 })
-
-function Counter() {
-  const state = useStore(store)
-  return (
-    <div>
-      <div>
-        Count:
-        {state.count}
-      </div>
-      <div>
-        Doubled:
-        {state.doubled}
-      </div>
-      <button onClick={store.increment}>Increment</button>
-    </div>
-  )
-}
 ```
 
-### Persistence
-
-The persistence plugin allows you to persist store state to storage (e.g., localStorage).
-
-First, register the persist plugin:
+-----
 
-```tsx
-import valtio from 'valtio-define'
-import { persist } from 'valtio-define/plugins'
+## 🛠 Advanced Features
 
-// Register the persist plugin globally
-valtio.use(persist())
-```
+### The Power of `this`
 
-Then use it in your store:
+Inside `actions` and `getters`, `this` provides full access to the store's state, other actions, and other getters. This type safety across the entire store.
 
 ```tsx
-import { defineStore } from 'valtio-define'
-
 const store = defineStore({
-  state: () => ({ count: 0 }),
+  state: () => ({
+    count: 0,
+  }),
   actions: {
-    increment() {
-      this.count++
+    // Autocompletion and typings for the whole store ✨
+    currentDoubledOne() {
+      return this.doublePlusOne
     },
   },
-  persist: {
-    key: 'my-store',
-    storage: localStorage,
-    paths: ['count'], // Only persist 'count', or omit to persist all state
+  getters: {
+    doubled() {
+      return this.count * 2
+    },
+    // Note: The return type **must** be explicitly set for complex getters
+    doublePlusOne() {
+      // Access other getters via 'this'
+      return this.doubled + 1
+    },
   },
 })
 ```
 
-If `persist` is `true`, it will use `structure-id` to generate a unique key for the store automatically.
+### Persistence
 
-```tsx
-const store = defineStore({
-  state: () => ({ count: 0 }),
-  persist: true, // Auto-generates key using structure-id
-})
-```
+Save and restore your store state using the `persist` plugin.
 
-You can pass `hydrate` when registering the plugin (default `true`). When `true`, state is hydrated from storage as soon as the store is created. Set `hydrate: false` when you need to avoid running persistence during server-side rendering, and manually mount persist in your App entry instead:
+1.  **Global Registration:**
 
-```tsx
-// Register with hydrate: false
-store.use(persist({ hydrate: false }))
+    ```tsx
+    import valtio from 'valtio-define'
+    import { persist } from 'valtio-define/plugins'
 
-// In your App (client entry), after store is used:
-useEffect(() => store.$persist.mount(), [])
-```
+    valtio.use(persist())
+    ```
 
-### Subscribe to Changes
+2.  **Store Configuration:**
 
-```tsx
-const store = defineStore({
-  state: () => ({ count: 0 }),
-  actions: {
-    increment() {
-      this.count++
-    },
-  },
-})
+    ```tsx
+    const store = defineStore({
+      state: () => ({ count: 0 }),
+      persist: {
+        key: 'my-app-storage',
+        storage: localStorage,
+        paths: ['count'], // Optional: Persist specific keys only
+      },
+    })
+    ```
 
-// Subscribe to state changes
-const unsubscribe = store.$subscribe((state) => {
-  console.log('State changed:', state)
-})
+    > **Tip:** If you set `persist: true`, a unique key is automatically generated using `structure-id`.
 
-// Subscribe to specific key changes
-const unsubscribeKey = store.$subscribeKey('count', (value) => {
-  console.log('Count changed:', value)
-})
-```
+### Manual Hydration (SSR Friendly)
 
-### Patch State
+To avoid hydration mismatches during Server-Side Rendering, disable automatic hydration and mount it in a `useEffect`.
 
 ```tsx
-// Patch with object
-store.$patch({ count: 10 })
+// Register with hydrate disabled
+store.use(persist({ hydrate: false }))
 
-// Patch with function
-store.$patch((state) => {
-  state.count += 5
-})
+// In your Client Entry / App Root
+useEffect(() => {
+  store.$persist.mount()
+}, [])
 ```
 
-### Signal (JSX Component)
+### React-Idiomatic State Hooks
 
-```tsx
-function App() {
-  return (
-    <div>
-      Count:
-      {' '}
-      {store.$signal(state => state.count)}
-    </div>
-  )
-}
-```
-
-### 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`.
+If you prefer the `useState` syntax, use `storeToState` or `storeToStates`. These return `[state, setter]` tuples.
 
 ```tsx
-import { defineStore, storeToState } from 'valtio-define'
-
-const store = defineStore({
-  state: { count: 0, name: 'test' },
-})
-
-function Counter() {
-  const [count, setCount] = storeToState(store, 'count')
+function Profile() {
+  // Access a single key
   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>
-  )
+  // Access all keys as hooks
+  const {
+    count: [count, setCount]
+  } = storeToStates(store)
+
+  return <input value={name} onChange={e => setName(e.target.value)} />
 }
 ```
 
-**Parameters:**
-- `store`: Store instance created by `defineStore`
-- `key`: Key of the state property to access
+### Controlled inputs may lose caret position
 
-**Returns:** `[state, setter]` tuple where:
-- `state`: Current value of the state property
-- `setter`: Function to update the state (accepts value or updater function)
+Ref: https://github.com/pmndrs/valtio/issues/270
 
-#### `storeToStates(store)`
+This happens because Valtio batches state updates causing React to re-render after the input event. React resets the DOM value and loses the caret position.
 
-Returns an object with all store keys mapped to `[state, setter]` tuples.
+Use `{ sync: true }` to update synchronously and preserve the caret:
 
 ```tsx
-function Component() {
-  const {
-    count: [count, setCount],
-    name: [name, setName],
-    user: [user, setUser],
-  } = storeToStates(store)
+function Input() {
+  const { text } = useStore(store, { sync: true })
+  // const [text, setText] = storeToState(store, 'text', { sync: true })
 
   return (
-    <div>
-      <button onClick={() => setCount(count + 1)}>Increment</button>
-      <div>
-        Count:
-        {count}
-      </div>
-      <div>
-        Name:
-        {name}
-      </div>
-      <div>
-        User:
-        {user.name}
-      </div>
-    </div>
+    <input
+      onChange={e => store.text = e.target.value}
+      value={text}
+    />
   )
 }
 ```
 
-**Parameters:**
-- `store`: Store instance created by `defineStore`
-
-**Returns:** Object where each key maps to a `[state, setter]` tuple
-
-## API
-
-### `defineStore(store)`
-
-Creates a store with state, actions, and getters.
-
-**Parameters:**
-- `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)
-
-**Returns:** Store instance with reactive state and actions
-
-### `useStore(store)`
-
-React hook that returns a snapshot of the store state.
-
-**Parameters:**
-- `store`: Store instance created by `defineStore`
-
-**Returns:** Snapshot of the store state
+-----
 
-### `storeToState(store, key)`
+## 🛰 Store API
 
-React hook that returns a `[state, setter]` tuple for a single store key, similar to React's `useState`.
+Every store instance created with `defineStore` includes built-in utility methods:
 
-**Parameters:**
-- `store`: Store instance created by `defineStore`
-- `key`: Key of the state property to access
+  * **`$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.
 
-**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)`
+## 🔌 Plugins
 
-React hook that returns an object with all store keys mapped to `[state, setter]` tuples.
+### Global vs. Per-Store
 
-**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.
-
-#### Global Plugin Registration
+Plugins can be applied to all stores or restricted to a single instance.
 
 ```tsx
-import valtio from 'valtio-define'
-import { persist } from 'valtio-define/plugins'
+// Global
+valtio.use(myPlugin())
 
-// Register plugin globally - applies to all stores
-valtio.use(persist())
+// Local
+const store = defineStore({ /* ... */ })
+store.use(myPlugin())
 ```
 
-#### Per-Store Plugin Registration
+### Creating a Custom Plugin
 
-```tsx
-import { defineStore } from 'valtio-define'
-import { persist } from 'valtio-define/plugins'
-
-const store = defineStore({
-  state: () => ({ count: 0 }),
-})
-
-// Register plugin for this specific store
-store.use(persist())
-```
-
-#### Creating Custom Plugins
+Extend functionality by accessing the `store` instance and `options` through the plugin context.
 
 ```tsx
 import type { Plugin } from 'valtio-define'
 
-function myPlugin() {
-  ({ store, options }: PluginContext) => {
-    // Access store methods
+function loggerPlugin(): Plugin {
+  return ({ store, options }) => {
     store.$subscribe((state) => {
-      console.log('State changed:', state)
+      console.log('Update:', state)
     })
-
-    // Access store options
-    if (options.someOption) {
-    // Do something
-    }
   }
 }
 
 declare module 'valtio-define' {
-  export interface StoreDefine<S extends object, A extends ActionsTree, G extends Getters<any>> {
-    myPlugin?: {
+  export interface StoreDefineOptions<S extends object> {
+    $myPlugin?: {
       someOption?: boolean
     }
   }
 }
-
-// Use the plugin
-use(myPlugin())
 ```
 
-**Plugin Context:**
-- `context.store`: The store instance with all methods (`$state`, `$patch`, `$subscribe`, etc.)
-- `context.options`: The original store definition options
+-----
 
 ## License
 

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-BW_uQuTb.mjs";
+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 { Snapshot } from "valtio";
 import { Dispatch, SetStateAction } from "react";
 
@@ -38,18 +38,21 @@ 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>;
 //#endregion
 //#region src/hooks.d.ts
-interface UseStoreOptions {
+declare function useStore<S extends object, A extends Actions<S>, G extends Getters<S>>(store: Store<S, A, G>, options?: {
   sync?: boolean;
-}
-declare function useStore<S extends object, A extends Actions<S>, G extends Getters<S>>(store: Store<S, A, G>, options?: UseStoreOptions): Snapshot<S & GettersReturnType<G> & A>;
+}): Snapshot<S & GettersReturnType<G> & A>;
 //#endregion
 //#region src/utils.d.ts
-declare function storeToState<S extends object, K extends keyof S>(store: Store<S>, key: K): [S[K], Dispatch<SetStateAction<S[K]>>];
-declare function storeToStates<S extends object>(store: Store<S>): { [K in keyof S]: [S[K], Dispatch<SetStateAction<S[K]>>] };
+declare function storeToState<S extends object, K extends keyof S>(store: Store<S>, key: K, options?: {
+  sync?: boolean;
+}): [S[K], Dispatch<SetStateAction<S[K]>>];
+declare function storeToStates<S extends object>(store: Store<S>, options?: {
+  sync?: boolean;
+}): { [K in keyof S]: [S[K], Dispatch<SetStateAction<S[K]>>] };
 //#endregion
 //#region src/index.d.ts
 declare const _default: {
   use: typeof use;
 };
 //#endregion
-export { Actions, ActionsOmitThisParameter, ActionsTree, Getters, GettersReturnType, Patch, Plugin, PluginContext, Signal, Store, StoreDefine, StoreDefineOptions, StoreOptions, Subscribe, SubscribeKey, UseStoreOptions, _default as default, defineStore, plugins, storeToState, storeToStates, use, useStore };
+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 };

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){let n=u(e);function r(n){typeof n==`function`?e.$patch(e=>{e[t]=n(e[t])}):e.$patch(e=>{e[t]=n})}return[n[t],r]}function f(e){return Object.fromEntries(Object.keys(e.$state).map(t=>[t,d(e,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,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};

package/dist/plugins/index.d.mts

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

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

@@ -1,4 +1,4 @@
-import { s as Plugin } from "../../types-BW_uQuTb.mjs";
+import { s as Plugin } from "../../types-CqDu3QIJ.mjs";
 import { PersistentOptions, PersistentStore } from "./types.mjs";
 
 //#region src/plugins/persist/index.d.ts
@@ -8,9 +8,6 @@ interface PersistentMountOptions {
    */
   hydrate?: boolean;
 }
-interface StorePersistentOptions {
-  mount: () => void;
-}
 declare function persist({
   hydrate
 }?: PersistentMountOptions): Plugin;
@@ -21,4 +18,4 @@ declare module 'valtio-define' {
   interface StoreOptions extends PersistentStore {}
 }
 //#endregion
-export { PersistentMountOptions, StorePersistentOptions, persist };
+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(!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=!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=!0}function h(){let e=f.getItem(d);e instanceof Promise?e.then(m):m(e)}function g(){e(l,()=>{if(!p)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},a&&h(),g()}}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.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};

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

@@ -12,10 +12,17 @@ interface PersistentOptions<S extends object> {
   storage?: Storage;
   paths?: DeepKeys<S>[];
 }
+interface PersistentMeta {
+  mounted: boolean;
+  hydrated: boolean;
+  unsubscribe?: () => void;
+}
 interface PersistentStore {
   $persist: {
     mount: () => void;
+    unmount: () => void;
+    meta: PersistentMeta;
   };
 }
 //#endregion
-export { DeepKeys, PersistentOptions, PersistentStore, Storage };
+export { DeepKeys, PersistentMeta, PersistentOptions, PersistentStore, Storage };

package/dist/{types-BW_uQuTb.d.mts → types-CqDu3QIJ.d.mts}

@@ -7,10 +7,10 @@ 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 StoreDefineOptions<S> {}
-interface StoreDefine<S extends object, A, G extends Getters<any>> extends StoreDefineOptions<S> {
+interface StoreDefine<S extends object, A extends object, G extends Getters<any>> extends StoreDefineOptions<S> {
   state: (() => S) | S;
-  actions?: A & ThisType<A & S>;
-  getters?: G & ThisType<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;
@@ -27,7 +27,7 @@ interface Patch<S, G extends Getters<S>> {
   (patch: Partial<S> | ((state: S & GettersReturnType<G>) => void)): void;
 }
 interface StoreOptions {}
-type Store<S, A extends Actions<S>, G extends Getters<S>> = {
+type Store<S, A extends Actions<S> = {}, G extends Getters<S> = {}> = {
   $subscribe: Subscribe<S, G>;
   $subscribeKey: SubscribeKey<S, G>;
   $patch: Patch<S, G>;

package/package.json

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