@chhsiao1981/use-thunk 13.0.0 → 14.0.0

package/README.md

@@ -14,7 +14,7 @@ For usage examples, please refer to [demo-use-thunk](https://github.com/chhsiao1
 
 ## Install
 
-    npm install --save @chhsiao1981/use-thunk
+    npm install @chhsiao1981/use-thunk
 
 ## Getting Started
 
@@ -104,10 +104,6 @@ createRoot(document.getElementById("root")!).render(
 )
 ```
 
-## Introduction
-
-
-
 ## Development Pattern
 ### Must Included in a Thunk Module
 
@@ -165,14 +161,23 @@ createRoot(document.getElementById("root")!).render(
 )
 ```
 
-## Normalized State
+## Introduction
+
+Global state management (GSM) is tricky when developing complex ReactJS applications. [Redux/RTK](https://redux-toolkit.js.org/) and [zustand](https://zustand-demo.pmnd.rs/) focus on "We create stores that manage the global states". However, the stores can quickly become gigantic functions in complex ReacJS applications. On the other hand, `useContext` is too primitive for complex ReactJS applications.
+
+`use-thunk` uses a different approach: All the data management is through module-based functions. With `use-thunk`:
+1. We treat the files as modules, and we write the module-based functions like what we typically do in other programming languages.
+2. React components can focus on data presentation, with obtaining the data from thunk modules.
+3. From React components' perspective, we directly call `do[Module].function(id)`.
+4. There is only 1 `ThunkContext`, which wraps around `<App />` in `main.tsx`. We no longer need to worry that the `Context` may appear in unexpected code-base and affect the underlying `useContext`.
+
+### Normalized State
 
-The general concept of normalized state can be found in [Normalizing State Shape](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape)
-with the following features:
+The general concept of normalized state can be found in [Normalizing State Shape](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape). We use the following hierarchy to represent the normalized states:
 
-1. ClassState: the state of the class, including the nodes and the defaultID of the class.
-2. NodeState: the state of a node, including the id of the node and the content (state) of the node.
-3. State: the content of the node, represented as a state.
+1. ModuleState: the state of a module, including the nodes and related information of the module.
+2. NodeState: the state of a node, including the id of the node and the data (state) of the node.
+3. State: the data of the node, represented as a state.
 
 For example, the example [in the redux link](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape) is represented as:
 
@@ -180,24 +185,24 @@ For example, the example [in the redux link](https://redux.js.org/recipes/struct
 moduleStatePost = {
   name: 'post',
   nodes: {
-    [uuid-post1] : {
-      id: uuid-post1,
+    [postID1] : {
+      id: postID1,
       state: {
-        author : uuid-user1,
+        author : userID1,
         body : "......",
-        comments: [uuid-comment1, uuid-comment2]
+        comments: [commentID1, commentID2]
       },
     },
-    [uuid-post2] : {
-      id : uuid-post2,
+    [postID2] : {
+      id : postID2,
       state: {
-        author : uuid-user2,
+        author : userID2,
         body : "......",
-        comments: [uuid-comment3, uuid-comment4, uuid-comment5]
+        comments: [commentID3, commentID4, commentID5]
       }
     }
   },
-  defaultID,s
+  defaultID,
   defaultState,
 }
 ```
@@ -206,40 +211,40 @@ and:
 
 ```ts
 moduleStateComment = {
-  myClass: 'module',
+  name: 'comment',
   nodes: {
-    [uuid-comment1] : {
-      id: uuid-comment1,
+    [commentID1] : {
+      id: commentID1,
       state: {
-        author : uuid-user2,
+        author : userID2,
         comment : ".....",
       }
     },
-    [uuid-comment2] : {
-      id : uuid-comment2,
+    [commentID2] : {
+      id : commentID2,
       state: {
-        author : uuid-user3,
+        author : userID3,
         comment : ".....",
       }
     },
-    [uuid-comment3] : {
-      id : uuid-comment3,
+    [commentID3] : {
+      id : commentID3,
       state: {
-        author : uuid-user3,
+        author : userID3,
         comment : ".....",
       }
     },
-    [uuid-comment4] : {
-      id : uuid-comment4,
+    [commentID4] : {
+      id : commentID4,
       state: {
-        author : uuid-user1,
+        author : userID1,
         comment : ".....",
       }
     },
-    [uuid-comment5] : {
-      id : uuid-comment5,
+    [commentID5] : {
+      id : commentID5,
       state: {
-        author : uuid-user3,
+        author : userID3,
         comment : ".....",
       }
     }
@@ -254,22 +259,22 @@ and:
 moduleStateUser = {
   name: 'user',
   nodes: {
-    [uuid-user1] : {
-      id: uuid-user1,
+    [userID1] : {
+      id: userID1,
       state: {
         username : "user1",
         name : "User 1",
       }
     },
-    [uuid-user2] : {
-      id: uuid-user2,
+    [userID2] : {
+      id: userID2,
       state: {
         username : "user2",
         name : "User 2",
       }
     },
-    [uuid-user3] : {
-      id: uuid-user3,
+    [userID3] : {
+      id: userID3,
       state: {
         username : "user3",
         name : "User 3",
@@ -285,12 +290,35 @@ moduleStateUser = {
 
 #### Types
 
-##### `type Thunk`
+##### `ThunkModule<S extends State>`
+
+```ts
+export type ThunkModule<S extends State> = {
+  name: string
+  defaultState: S
+
+  // The rest of the variables are doModule.
+  // Specifying index-signatures to include all the variables.
+  [action: string]: ThunkFunc<S> | string | S
+}
+```
+
+A ThunkModule represents a self-contained domain state slice implemented within a single file. It encapsulates the module's identity, its initial data structure, and the business logic workflows (thunk functions) that act upon it.
+
+##### `ThunkFunc<S extends State>`
+
+```ts
+export type ThunkFunc<S extends State> = (...params: any[]) => Thunk<S>
+```
+
+The thunk functions in a thunk module.
+
+##### `Thunk`
 
 `Thunk` is defined as:
 
 ```ts
-export type Thunk<S extends State> = (
+export type Thunk<S extends State> = async (
   set: set<S>,
   get: (id?: string) => S,
   getOrNull: (id?: string) => S | null | undefined,
@@ -299,20 +327,17 @@ export type Thunk<S extends State> = (
 ) => void
 ```
 
-We generally use only `set` and `get`.
-
-##### `ThunkModule<S extends State>`
+`Thunk`s can be async functions if needed (ex: `fetch` data).
 
-```ts
-export type ThunkModule<S extends State> = {
-  name: string
-  defaultState: S
+We generally use only `set` and `get`.
 
-  // The rest of the variables are doModule.
-  // Specifying index-signatures to include all the variables.
-  [action: string]: ThunkFunc<S> | string | S
-}
-```
+* `set`: can be used in the following setting:
+    * `set(ThunkFunc())`: calling a thunk function.
+    * `set(id, data: Partial<S>)`: upsert state of `id` (syntax sugar of `set(upsert(id, data))`).
+* `get`: (Guaranteed) get the state of `id` (or `defaultID` if `id` is not present).
+* `getOrNull`: get the state of `id`. Get the state of `defaultID` if `id` is not present. Return `null` if `id` or state is not available.
+* `dispatch`: `dispatch(ThunkFunc())` (calling a thunk function).
+* `getModuleState`: get the whole module state.
 
 ##### `doModule<S extends State>`
 
@@ -322,17 +347,19 @@ export interface doModule<S extends State> {
 }
 ```
 
-##### `ThunkFunc<S extends State>`
+##### `toDoModule`
 
 ```ts
-export type ThunkFunc<S extends State> = (...params: any[]) => Thunk<S>
+export type toDoModule<T extends ThunkModule<any>> = Omit<T, 'name' | 'defaultState'>
 ```
 
+Converting `ThunkModule` to `doModule` by omitting `name` and `defaultState`.
+
 #### RegisterThunk / ThunkContext / useThunk
 
 ##### `registerThunk(module: ThunkModule)`
 
-register a thunk module.
+Register a thunk module.
 
 ##### `<ThunkContext>{children}</ThunkContext>`
 
@@ -340,18 +367,24 @@ Rendering thunk context.
 
 ##### `useThunk(theDo: ThunkModule): UseThunk`
 
-Similar to `React.useReducer`, but we use `useThunk`, and we also bind the actions with `set` (similar concept as `mapDispatchToProps`).
+Similar to `React.useReducer`, but we use `useThunk`. In addition, we bind the thunk functions with `dispatch`, so we can directly use `do[Module].[function]()` (similar concept as `zustand`).
 
 return: `UseThunk`
 
 #### State
 
-##### `getState(theUseThunk: UseThunk, myID?: string): [state, doModule, theID]`
+##### `getState(theUseThunk: UseThunk, id?: string): [state, doModule, theID]`
 
-Get the state of `myID` by `UseThunk`. Get the state of `defaultID` if `myID` is not present. Return `defaultState` if not available.
+(Guaranteed) Get the state of `id` (or `defaultID` if `id` is not present) by `UseThunk`. If `defaultID` is not available, generate new ID as `defaultID`. If state is not available, clone `defaultState` as the state.
 
 return: `[state, doModule, theID]`
-o
+
+#### Misc
+
+##### `genID(): string`
+
+Generate `id` for the state.
+
 ### Advanced Usage
 
 #### types
@@ -370,37 +403,30 @@ export type setMap<S extends State, T extends doModule<S>> = {
 } & Omit<DefaultSetMap, keyof T>
 ```
 
-#### Default Thunk Functions.
+#### Primitive Thunk Functions.
 
-##### `init({myID, parentID, doParent, state})`
+##### `init({id, parentID, doParent, state})`
 
-initialize the state.
+Initialize the state.
 
-##### `update(myID, data)`
+##### `update(id, data)`
 
-update the data to myID.
+Update the data to `id`.
 
-##### `upsert(myID, data)`
+##### `upsert(id, data)`
 
-initialize the state if it does not exist, and update the data to myID.
+Initialize the state with `defaultState` if it does not exist, and update the data to `id`.
 
-##### `remove(myID)`
+##### `remove(id)`
 
-remove the state.
+Remove the state.
 
 #### State
 
-##### `getStateOrNullByModule(moduleState: ModuleState, myID?: string): state | null`
-
-Get the state of `myID`. Get the state of `defaultID` if `myID` is not present. Return `null` if not available.
-
-##### `getStateByModule(moduleState: ModuleState, myID?: string): state`
-
-Get the state of `myID`. Get the state of `defaultID` if `myID` is not present. Return `defaultState` if not available.
+##### `getStateOrNullByModule(moduleState: ModuleState, id?: string): state | null`
 
-#### Misc
-
-##### `genID(): string`
+Get the state of `id`. Get the state of `defaultID` if `id` is not present. Return `null` if not available.
 
-generate id for the state.
+##### `getStateByModule(moduleState: ModuleState, id?: string): state`
 
+(Guaranteed) Get the state of `id` (or `defaultID` if `id` is not present) by module state. If `defaultID` is not available, generate new ID as `defaultID`. If state is not available, clone `defaultState` as the state.

package/dist/dispatch.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch as rDispatch } from 'react';
+import type { Dispatch } from 'react';
 import type { ActionOrThunk } from './action';
-import type { State } from './stateTypes';
-export type Dispatch<S extends State> = rDispatch<ActionOrThunk<S>>;
+import type { State } from './states';
+export type dispatch<S extends State> = Dispatch<ActionOrThunk<S>>;

package/dist/index.d.ts

@@ -1,15 +1,12 @@
-import type { GetClassState, Thunk } from './action';
-import createThunk, { registerThunk } from './createThunk';
-import type { Dispatch } from './dispatch';
-import type { DispatchFuncMap } from './dispatchFuncMap';
-import { genUUID } from './genUUID';
-import { type InitParams, init } from './init';
-import { remove } from './remove';
-import { setDefaultID } from './setDefaultID';
-import { getDefaultID, getNode, getState, mustGetState, mustGetStateByThunk } from './states';
-import type { ClassState, NodeState, NodeStateMap, State } from './stateTypes';
-import ThunkContext from './ThunkContext';
-import type { ThunkModule, ThunkModuleToFunc } from './thunk';
-import { setData, update } from './update';
+import type { getModuleState, Thunk, ThunkFunc } from './action';
+import { type InitParams, init, remove, setDefaultID, update, upsert } from './defaultThunks';
+import type { dispatch } from './dispatch';
+import type { get, getOrNull } from './get';
+import registerThunk from './registerThunk';
+import type { set, setMap } from './set';
+import { getDefaultID, getNodeOrNull, getState, getStateByModule, getStateOrNullByModule, type ModuleState, type State } from './states';
+import { ThunkContext } from './thunkContext';
+import type { doModule, ThunkModule, toDoModule } from './thunkModule';
 import useThunk, { type UseThunk } from './useThunk';
-export { createThunk, registerThunk, useThunk, ThunkContext, type UseThunk, type State, type NodeState, type NodeStateMap, type ClassState, type GetClassState, type Thunk, type ThunkModule, type ThunkModuleToFunc, type Dispatch, type DispatchFuncMap, getDefaultID, getNode, getState, mustGetState, mustGetStateByThunk, init, type InitParams, setData, update, remove, setDefaultID, genUUID, };
+import { genID } from './utils';
+export { type Thunk, type set, type get, type getOrNull, type dispatch, type getModuleState, registerThunk, useThunk, type UseThunk, ThunkContext, type State, getState, type ModuleState, type ThunkModule, type toDoModule, type doModule, type ThunkFunc, init, type InitParams, update, upsert, remove, genID, type setMap, setDefaultID, getNodeOrNull, getDefaultID, getStateOrNullByModule, getStateByModule, };

package/dist/index.js

@@ -0,0 +1,173 @@
+import { createContext as e, useCallback as t, useContext as n, useMemo as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/utils/deepCopy.ts
+var o = (e) => {
+	if (typeof e != "object" || !e) return e;
+	if (e instanceof Date) return new Date(e.getTime());
+	if (Array.isArray(e)) return e.map((e) => o(e));
+	let t = {};
+	for (let n in e) e.hasOwnProperty(n) && (t[n] = o(e[n]));
+	return t;
+}, s = 1, c = () => (s += 1, `${s}`), l = "@chhsiao1981/use-thunk/SET_DEFAULT_ID", u = (e) => ({
+	myID: e,
+	type: l
+}), d = (e, t) => {
+	let { myID: n } = t;
+	return Object.assign({}, e, {
+		defaultID: n,
+		isInitDefaultID: !0
+	});
+}, f = "@chhsiao1981/use-thunk/INIT", p = (e, t) => ({
+	myID: e,
+	type: f,
+	state: t
+}), m = (e, t) => {
+	let { myID: n, state: r } = t, i = {
+		id: n,
+		state: r
+	}, a = Object.assign({}, e.nodes, { [n]: i });
+	return Object.assign({}, e, { nodes: a });
+}, h = (e) => (t, n, r, i, a) => {
+	let o = e.myID ?? c(), { state: s } = e;
+	t(p(o, s));
+	let { defaultID: l } = a();
+	l || t(u(o));
+}, g = "@chhsiao1981/use-thunk/UPDATE", _ = (e, t) => ({
+	myID: e,
+	type: g,
+	data: t
+}), v = (e, t) => {
+	let { myID: n, data: r } = t, i = e.nodes[n];
+	if (!i) return e;
+	let a = Object.assign({}, i.state, r), o = Object.assign({}, i, { state: a }), s = Object.assign({}, e.nodes, { [n]: o });
+	return Object.assign({}, e, { nodes: s });
+}, y = "@chhsiao1981/use-thunk/REMOVE", b = (e) => ({
+	myID: e,
+	type: y
+}), x = (e, t) => {
+	let { myID: n } = t;
+	if (!e.nodes[n]) return e;
+	let r = Object.keys(e.nodes).filter((e) => e !== n).reduce((t, n) => (t[n] = e.nodes[n], t), {}), i = Object.assign({}, e, { nodes: r });
+	return i.defaultID === n && (i.defaultID = null), i;
+}, S = "@chhsiao1981/use-thunk/UPSERT", C = (e, t) => ({
+	myID: e,
+	type: S,
+	data: t
+}), w = (e, t) => {
+	let { myID: n, data: r } = t, i = e.nodes[n] ?? {
+		id: n,
+		state: o(e.defaultState)
+	}, a = Object.assign({}, i.state, r), s = Object.assign({}, i, { state: a }), c = Object.assign({}, e.nodes, { [n]: s });
+	return Object.assign({}, e, { nodes: c });
+}, T = {
+	theMap: {},
+	theList: []
+}, E = (e) => {
+	let { modules: t, children: n } = e, o = t || T.theList;
+	if (o.length === 0) return n;
+	let s = o[0], { context: c, refModuleState: l } = T.theMap[s], [u, d] = i(l.current);
+	l.current = u;
+	let f = r(() => ({
+		refModuleState: l,
+		setModuleState: d
+	}), [u]), p = o.length === 1 ? n : E({
+		modules: o.slice(1),
+		children: n
+	});
+	return /* @__PURE__ */ a(c.Provider, {
+		value: f,
+		children: p
+	});
+}, D = (t) => {
+	let { name: n, defaultState: r } = t;
+	if (T.theMap[n]) {
+		console.warn("registerThunk: already init:", n);
+		return;
+	}
+	let i = {
+		name: n,
+		nodes: {},
+		defaultState: r
+	}, a = () => {}, o = { current: i }, s = e({
+		refModuleState: o,
+		setModuleState: a
+	});
+	T.theMap[n] = {
+		context: s,
+		refModuleState: o
+	}, T.theList = Object.keys(T.theMap).sort(), console.info("registerThunk: done:", n);
+}, O = (e) => e.defaultID ?? "", k = (e, t) => {
+	let n = t || O(e);
+	return n && e.nodes[n] || null;
+}, A = (e, t) => {
+	let n = t || O(e);
+	if (!n) return null;
+	let r = e.nodes[n];
+	return r ? r.state : null;
+}, j = (e, t) => {
+	let n = t || O(e) || c(), r = A(e, n);
+	if (r) return r;
+	let i = o(e.defaultState), a = {
+		id: n,
+		state: i
+	};
+	return e.nodes[n] = a, e.isInitDefaultID || e.defaultID || (e.defaultID = n, e.isInitDefaultID = !0), i;
+}, M = (e, t) => {
+	let [n, r] = e, i = t || O(n);
+	return [
+		j(n, i),
+		r,
+		i
+	];
+}, N = {
+	[f]: m,
+	[g]: v,
+	[y]: x,
+	[S]: w,
+	[l]: d
+}, P = () => (e, t) => t && N[t.type] ? N[t.type](e, t) : e, F = {
+	init: h,
+	update: _,
+	remove: b
+}, I = (e, t, n) => (Object.keys(e).filter((t) => typeof e[t] == "function").reduce((n, r) => {
+	if (n[r]) return n;
+	let i = e[r];
+	return n[r] = (...e) => t(i(...e)), n;
+}, n), Object.keys(F).reduce((e, n) => {
+	if (e[n]) return e;
+	let r = F[n];
+	return e[n] = (...e) => t(r(...e)), e;
+}, n), n), L = (e, r) => {
+	let { context: i } = T.theMap[r], { refModuleState: a, setModuleState: o } = n(i), s = t(() => a.current, [a]), c = t((e) => {
+		a.current = e, o(e);
+	}, [a, o]), l = t((e) => A(s(), e), [s]), u = t((e) => j(s(), e), [s]), d = t((t) => e(s(), t), [e, s]), f = t((e) => {
+		if (typeof e == "function") {
+			e(p, u, l, f, s);
+			return;
+		}
+		c(d(e));
+	}, [
+		s,
+		c,
+		d
+	]), p = t((e, t) => {
+		if (typeof e == "string") {
+			if (!t) return;
+			c(d(C(e, t)));
+			return;
+		}
+		f(e);
+	}, [
+		s,
+		c,
+		d
+	]);
+	return [a.current, p];
+}, R = {}, z = (e) => {
+	let { name: t } = e, n = !R[t];
+	n && (R[t] = {});
+	let i = R[t], [a, o] = L(r(() => P(), []), t), s = r(() => [a, i], [a, i]);
+	return n && I(e, o, i), s;
+};
+//#endregion
+export { E as ThunkContext, c as genID, O as getDefaultID, k as getNodeOrNull, M as getState, j as getStateByModule, A as getStateOrNullByModule, h as init, D as registerThunk, b as remove, u as setDefaultID, _ as update, C as upsert, z as useThunk };

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`@chhsiao1981/use-thunk`]={},e.React,e.ReactJSXRuntime))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=e=>{if(typeof e!=`object`||!e)return e;if(e instanceof Date)return new Date(e.getTime());if(Array.isArray(e))return e.map(e=>r(e));let t={};for(let n in e)e.hasOwnProperty(n)&&(t[n]=r(e[n]));return t},i=1,a=()=>(i+=1,`${i}`),o=`@chhsiao1981/use-thunk/SET_DEFAULT_ID`,s=e=>({myID:e,type:o}),c=(e,t)=>{let{myID:n}=t;return Object.assign({},e,{defaultID:n,isInitDefaultID:!0})},l=`@chhsiao1981/use-thunk/INIT`,u=(e,t)=>({myID:e,type:l,state:t}),d=(e,t)=>{let{myID:n,state:r}=t,i={id:n,state:r},a=Object.assign({},e.nodes,{[n]:i});return Object.assign({},e,{nodes:a})},f=e=>(t,n,r,i,o)=>{let c=e.myID??a(),{state:l}=e;t(u(c,l));let{defaultID:d}=o();d||t(s(c))},p=`@chhsiao1981/use-thunk/UPDATE`,m=(e,t)=>({myID:e,type:p,data:t}),h=(e,t)=>{let{myID:n,data:r}=t,i=e.nodes[n];if(!i)return e;let a=Object.assign({},i.state,r),o=Object.assign({},i,{state:a}),s=Object.assign({},e.nodes,{[n]:o});return Object.assign({},e,{nodes:s})},g=`@chhsiao1981/use-thunk/REMOVE`,_=e=>({myID:e,type:g}),v=(e,t)=>{let{myID:n}=t;if(!e.nodes[n])return e;let r=Object.keys(e.nodes).filter(e=>e!==n).reduce((t,n)=>(t[n]=e.nodes[n],t),{}),i=Object.assign({},e,{nodes:r});return i.defaultID===n&&(i.defaultID=null),i},y=`@chhsiao1981/use-thunk/UPSERT`,b=(e,t)=>({myID:e,type:y,data:t}),x=(e,t)=>{let{myID:n,data:i}=t,a=e.nodes[n]??{id:n,state:r(e.defaultState)},o=Object.assign({},a.state,i),s=Object.assign({},a,{state:o}),c=Object.assign({},e.nodes,{[n]:s});return Object.assign({},e,{nodes:c})},S={theMap:{},theList:[]},C=e=>{let{modules:r,children:i}=e,a=r||S.theList;if(a.length===0)return i;let o=a[0],{context:s,refModuleState:c}=S.theMap[o],[l,u]=(0,t.useState)(c.current);c.current=l;let d=(0,t.useMemo)(()=>({refModuleState:c,setModuleState:u}),[l]),f=a.length===1?i:C({modules:a.slice(1),children:i});return(0,n.jsx)(s.Provider,{value:d,children:f})},w=e=>{let{name:n,defaultState:r}=e;if(S.theMap[n]){console.warn(`registerThunk: already init:`,n);return}let i={name:n,nodes:{},defaultState:r},a=()=>{},o={current:i},s=(0,t.createContext)({refModuleState:o,setModuleState:a});S.theMap[n]={context:s,refModuleState:o},S.theList=Object.keys(S.theMap).sort(),console.info(`registerThunk: done:`,n)},T=e=>e.defaultID??``,E=(e,t)=>{let n=t||T(e);return n&&e.nodes[n]||null},D=(e,t)=>{let n=t||T(e);if(!n)return null;let r=e.nodes[n];return r?r.state:null},O=(e,t)=>{let n=t||T(e)||a(),i=D(e,n);if(i)return i;let o=r(e.defaultState),s={id:n,state:o};return e.nodes[n]=s,e.isInitDefaultID||e.defaultID||(e.defaultID=n,e.isInitDefaultID=!0),o},k=(e,t)=>{let[n,r]=e,i=t||T(n);return[O(n,i),r,i]},A={[l]:d,[p]:h,[g]:v,[y]:x,[o]:c},j=()=>(e,t)=>t&&A[t.type]?A[t.type](e,t):e,M={init:f,update:m,remove:_},N=(e,t,n)=>(Object.keys(e).filter(t=>typeof e[t]==`function`).reduce((n,r)=>{if(n[r])return n;let i=e[r];return n[r]=(...e)=>t(i(...e)),n},n),Object.keys(M).reduce((e,n)=>{if(e[n])return e;let r=M[n];return e[n]=(...e)=>t(r(...e)),e},n),n),P=(e,n)=>{let{context:r}=S.theMap[n],{refModuleState:i,setModuleState:a}=(0,t.useContext)(r),o=(0,t.useCallback)(()=>i.current,[i]),s=(0,t.useCallback)(e=>{i.current=e,a(e)},[i,a]),c=(0,t.useCallback)(e=>D(o(),e),[o]),l=(0,t.useCallback)(e=>O(o(),e),[o]),u=(0,t.useCallback)(t=>e(o(),t),[e,o]),d=(0,t.useCallback)(e=>{if(typeof e==`function`){e(f,l,c,d,o);return}s(u(e))},[o,s,u]),f=(0,t.useCallback)((e,t)=>{if(typeof e==`string`){if(!t)return;s(u(b(e,t)));return}d(e)},[o,s,u]);return[i.current,f]},F={};e.ThunkContext=C,e.genID=a,e.getDefaultID=T,e.getNodeOrNull=E,e.getState=k,e.getStateByModule=O,e.getStateOrNullByModule=D,e.init=f,e.registerThunk=w,e.remove=_,e.setDefaultID=s,e.update=m,e.upsert=b,e.useThunk=e=>{let{name:n}=e,r=!F[n];r&&(F[n]={});let i=F[n],[a,o]=P((0,t.useMemo)(()=>j(),[]),n),s=(0,t.useMemo)(()=>[a,i],[a,i]);return r&&N(e,o,i),s}});

package/dist/thunkContext/ThunkContext.d.ts

@@ -0,0 +1,7 @@
+import { type JSX, type ReactNode } from 'react';
+type Props = {
+    modules?: string[];
+    children?: ReactNode;
+};
+declare const ThunkContext: (props: Props) => JSX.Element;
+export default ThunkContext;

package/{types → dist}/thunkModule/index.d.ts

@@ -10,4 +10,4 @@ export type ThunkModule<S extends State> = {
     defaultState: S;
     [action: string]: ThunkFunc<S> | string | S;
 };
-export type toDoModule<T extends ThunkModule<any>> = Omit<T, 'name' | 'default' | 'defaultState'>;
+export type toDoModule<T extends ThunkModule<any>> = Omit<T, 'name' | 'defaultState'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chhsiao1981/use-thunk",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "type": "module",
   "description": "A framework easily using useThunk to manage the data-state.",
   "homepage": "https://github.com/chhsiao1981/use-thunk",
@@ -8,12 +8,19 @@
     "type": "git",
     "url": "https://github.com/chhsiao1981/use-thunk"
   },
-  "main": "src/index.ts",
-  "types": "types/index.d.ts",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs",
+      "default": "./dist/index.umd.cjs"
+    }
+  },
   "files": [
-    "src",
-    "dist",
-    "types"
+    "dist"
   ],
   "author": {
     "name": "Chuan-Heng Hsiao",
@@ -24,34 +31,38 @@
     "useThunk"
   ],
   "scripts": {
-    "clean:lib": "rimraf ./dist/* ./types/*",
     "compile:lib": "vite build",
-    "build:lib": "npm run clean:lib && npm run types && npm run compile:lib",
-    "build": "npm run build:lib",
+    "compile:types": "tsc -b",
+    "build": "npm run compile:lib && npm run compile:types",
+
     "lint": "biome lint --error-on-warnings",
     "test": "vitest run",
-    "types": "tsc -b",
-    "coverage": "vitest run --coverage --reporter=junit --outputFile=test-report.junit.xml",
-    "tsd": "npx -p typescript tsc src/*.ts --declaration --allowJs --emitDeclarationOnly --strict --jsx react-jsx --outDir types"
+    "coverage": "vitest run --coverage --reporter=junit --outputFile=test-report.junit.xml"
   },
   "license": "MIT",
   "devDependencies": {
-    "@codecov/vite-plugin": "^2.0.1",
+    "@babel/core": "^7.29.0",
+    "@biomejs/biome": "^2.5.1",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@types/babel__core": "^7.20.5",
     "@types/node": "^25.9.3",
-    "@types/react": ">=18.3.1",
     "@types/react-dom": ">=18.3.1",
-    "@vitejs/plugin-react-swc": "^4.3.1",
+    "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "^4.1.8",
+    "babel-plugin-react-compiler": "^1.0.0",
     "globals": "^17.6.0",
     "happy-dom": "^20.10.2",
     "jiti": "^2.7.0",
     "react-dom": ">=18.3.1",
-    "rimraf": "^6.1.3",
     "typescript": "~5.9.3",
-    "vite": "^6.4.1",
+    "vite": "^8.0.16",
     "vitest": "^4.1.8"
   },
+  "dependencies": {
+    "react-compiler-runtime": "^1.0.0"
+  },
   "peerDependencies": {
+    "@types/react": ">=18.3.1",
     "react": ">=18.3.1"
   }
 }

package/dist/ThunkContext.d.ts

@@ -1,7 +0,0 @@
-import { type ReactNode } from 'react';
-type Props = {
-    classes?: string[];
-    children?: ReactNode;
-};
-declare const ThunkContext: (props: Props) => ReactNode;
-export default ThunkContext;