valtio-define 1.1.4 → 1.2.0

package/README.OLD.md

@@ -0,0 +1,391 @@
+# valtio-define
+
+[![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]
+
+⚡ Quickly create a fully functional and robust [Valtio](https://valtio.dev) factory
+
+## Installation
+
+```bash
+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'
+
+const store = defineStore({
+  state: () => ({ count: 0 }),
+  actions: {
+    increment() {
+      this.count++
+    },
+  },
+})
+
+function Counter() {
+  const { count } = useStore(store)
+  return (
+    <div>
+      <button onClick={store.increment}>Increment</button>
+      <div>{count}</div>
+    </div>
+  )
+}
+```
+
+### 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 }),
+  getters: {
+    doubled() {
+      return this.count * 2
+    },
+  },
+  actions: {
+    increment() {
+      this.count++
+    },
+  },
+})
+
+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'
+
+// Register the persist plugin globally
+valtio.use(persist())
+```
+
+Then use it in your store:
+
+```tsx
+import { defineStore } from 'valtio-define'
+
+const store = defineStore({
+  state: () => ({ count: 0 }),
+  actions: {
+    increment() {
+      this.count++
+    },
+  },
+  persist: {
+    key: 'my-store',
+    storage: localStorage,
+    paths: ['count'], // Only persist 'count', or omit to persist all state
+  },
+})
+```
+
+If `persist` is `true`, it will use `structure-id` to generate a unique key for the store automatically.
+
+```tsx
+const store = defineStore({
+  state: () => ({ count: 0 }),
+  persist: true, // Auto-generates key using structure-id
+})
+```
+
+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:
+
+```tsx
+// Register with hydrate: false
+store.use(persist({ hydrate: false }))
+
+// In your App (client entry), after store is used:
+useEffect(() => store.$persist.mount(), [])
+```
+
+### Subscribe to Changes
+
+```tsx
+const store = defineStore({
+  state: () => ({ count: 0 }),
+  actions: {
+    increment() {
+      this.count++
+    },
+  },
+})
+
+// Subscribe to state changes
+const unsubscribe = store.$subscribe((state) => {
+  console.log('State changed:', state)
+})
+
+// Subscribe to specific key changes
+const unsubscribeKey = store.$subscribeKey('count', (value) => {
+  console.log('Count changed:', value)
+})
+```
+
+### Patch State
+
+```tsx
+// Patch with object
+store.$patch({ count: 10 })
+
+// Patch with function
+store.$patch((state) => {
+  state.count += 5
+})
+```
+
+### Signal (JSX Component)
+
+```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`.
+
+```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)`
+
+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)`
+
+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.
+
+#### Global Plugin Registration
+
+```tsx
+import valtio from 'valtio-define'
+import { persist } from 'valtio-define/plugins'
+
+// Register plugin globally - applies to all stores
+valtio.use(persist())
+```
+
+#### Per-Store Plugin Registration
+
+```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
+
+```tsx
+import type { Plugin } from 'valtio-define'
+
+function myPlugin() {
+  ({ store, options }: PluginContext) => {
+    // Access store methods
+    store.$subscribe((state) => {
+      console.log('State changed:', 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?: {
+      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
+
+[MIT](./LICENSE) License © [Hairyf](https://github.com/hairyf)
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/valtio-define?style=flat&colorA=080f12&colorB=1fa669
+[npm-version-href]: https://npmjs.com/package/valtio-define
+[npm-downloads-src]: https://img.shields.io/npm/dm/valtio-define?style=flat&colorA=080f12&colorB=1fa669
+[npm-downloads-href]: https://npmjs.com/package/valtio-define
+[bundle-src]: https://img.shields.io/bundlephobia/minzip/valtio-define?style=flat&colorA=080f12&colorB=1fa669&label=minzip
+[bundle-href]: https://bundlephobia.com/result?p=valtio-define
+[license-src]: https://img.shields.io/github/license/hairyf/valtio-define.svg?style=flat&colorA=080f12&colorB=1fa669
+[license-href]: https://github.com/hairyf/valtio-define/blob/main/LICENSE
+[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
+[jsdocs-href]: https://www.jsdocs.io/package/valtio-define
+[coverage-src]: https://codecov.io/gh/hairyf/valtio-define/graph/badge.svg?token=PG5YIEEEHJ
+[coverage-href]: https://codecov.io/gh/hairyf/valtio-define

package/README.md

@@ -1,25 +1,25 @@
-# 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://valtio.dev) 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
+## 🚀 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 +28,7 @@ const store = defineStore({
   state: () => ({ count: 0 }),
   actions: {
     increment() {
+      // 'this' refers to the reactive state
       this.count++
     },
   },
@@ -35,18 +36,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 +67,153 @@ 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:
+## 🛠 Advanced Features
 
-```tsx
-import valtio from 'valtio-define'
-import { persist } from 'valtio-define/plugins'
-
-// 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)
-
-```tsx
-function App() {
-  return (
-    <div>
-      Count:
-      {' '}
-      {store.$signal(state => state.count)}
-    </div>
-  )
-}
-```
+### React-Idiomatic State Hooks
 
-### 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>
-  )
-}
-```
-
-**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() {
+  // Access all keys as hooks
   const {
-    count: [count, setCount],
-    name: [name, setName],
-    user: [user, setUser],
+    count: [count, setCount]
   } = 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>
-  )
+  return <input value={name} onChange={e => setName(e.target.value)} />
 }
 ```
 
-**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-BA_0y5TQ.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";
 
@@ -35,7 +35,7 @@ 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> = {}>(define: StoreDefine<S, A, G>): Store<S, A, G>;
 //#endregion
 //#region src/hooks.d.ts
 interface UseStoreOptions {

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

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

package/dist/{types-BA_0y5TQ.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> = Actions<S>, G extends Getters<S> = 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.4",
+  "version": "1.2.0",
   "description": "⚡quickly create a fully functional and robust Valtio factory",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",