@chhsiao1981/use-thunk 10.2.0 → 10.4.0

package/README.md

@@ -290,11 +290,11 @@ classStateUser = {
 
 ### Basic
 
-##### `useThunk(theDo: ThunkModuleFunc): [ClassState, DispatchedAction]`
+##### `useThunk(theDo: ThunkModuleFunc): [ClassState, DispatchedFuncMap]`
 
 Similar to `React.useReducer`, but we use `useThunk`, and we also bind the actions with dispatch (similar concept as `mapDispatchToProps`).s
 
-return: `[ClassState<S>, DispatchedAction<S>]`
+return: `[ClassState<S>, DispatchedFuncMap<S, R>]`
 
 ##### `init({myID, parentID, doParent, state}, myuuidv4?)`
 
@@ -318,14 +318,16 @@ generate uuid for react-object.
 
 Get the state of `myID`. Get the state of `defaultID` if `myID` is not present. Return `null` if not available.
 
-##### `getStateOrDefault(state: ClassState, myID?: string): State`
+##### `mustGetState(state: ClassState, myID?: string): State`
 
 Get the state of `myID`. Get the state of `defaultID` if `myID` is not present. Return `defaultState` if not available.
 
-##### `getStateByThunk(theUseThunk: UseThunk, myID?: string): [State, DispatchedActionMap, theID]`
+##### `mustGetStateByThunk(theUseThunk: UseThunk, myID?: string): [State, DispatchedActionMap, theID]`
 
 Get the state of `myID` by `UseThunk`. Get the state of `defaultID` if `myID` is not present. Return `defaultState` if not available.
 
+return: `[S, DispatchedFuncMap<S, R>, theID]`
+
 ##### `getDefaultID(state: ClassState): string`
 
 get the default id.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chhsiao1981/use-thunk",
-  "version": "10.2.0",
+  "version": "10.4.0",
   "type": "module",
   "description": "A framework easily using useThunk to manage the data-state.",
   "homepage": "https://github.com/chhsiao1981/use-thunk",
@@ -56,7 +56,7 @@
     "vite": "^6.4.1",
     "vitest": "^4.1.0"
   },
-  "dependencies": {
+  "peerDependencies": {
     "react": ">=18.3.1",
     "uuid": "^14.0.0"
   }

package/src/ThunkContext.tsx

@@ -1,28 +1,31 @@
-import { type JSX, useMemo, useState } from 'react'
+import { type ReactNode, useMemo, useState } from 'react'
 import { THUNK_CONTEXT_MAP } from './thunkContextMap'
 
 type Props = {
   classes?: string[]
-  children?: JSX.Element | JSX.Element[]
+  children?: ReactNode
 }
-const ThunkContext = (props: Props): JSX.Element => {
-  let { classes, children } = props
-  if (!classes) {
-    classes = THUNK_CONTEXT_MAP.theList
-  }
+
+const ThunkContext = (props: Props): ReactNode => {
+  const { classes: propsClasses, children } = props
+  const classes = propsClasses || THUNK_CONTEXT_MAP.theList
+  // 0. if there is no Thunk classes (no registerThunk): return children.
   if (classes.length === 0) {
-    // @ts-expect-error with children
     return children
   }
 
+  // render the 0th class.
   const theClass = classes[0]
 
+  // 1. get the context and classState from context map.
   const { context: Context_m, refClassState } = THUNK_CONTEXT_MAP.theMap[theClass]
 
+  // 2. setup classState.
   // biome-ignore lint/correctness/useHookAtTopLevel: the order is fixed.
   const [classState, setClassState] = useState(refClassState.current)
-
   refClassState.current = classState
+
+  // 3. value reset only if classState is changed.
   // biome-ignore lint/correctness/useHookAtTopLevel: the order is fixed.
   const value = useMemo(
     () => ({
@@ -32,9 +35,11 @@ const ThunkContext = (props: Props): JSX.Element => {
     [classState],
   )
 
+  // 4. get theChildren
   const theChildren =
     classes.length === 1 ? children : ThunkContext({ classes: classes.slice(1), children })
 
+  // 5. return context.
   return <Context_m.Provider value={value}>{theChildren}</Context_m.Provider>
 }
 

package/src/dispatchFuncMap.ts

@@ -27,7 +27,7 @@ export const constructDispatchMap = <
   T extends ThunkModuleFunc<S>,
   A extends BaseAction,
 >(
-  theDo: ThunkModule<S, T>,
+  theDo: ThunkModule<S>,
   dispatch: (action: A | rThunk<S, A>) => void,
   dispatchMap: DispatchFuncMap<S, T>,
 ) => {
@@ -40,7 +40,8 @@ export const constructDispatchMap = <
         return val
       }
 
-      const action: ActionFunc<S> = theDo[eachAction]
+      // because action is a function.
+      const action = theDo[eachAction] as ActionFunc<S>
 
       // @ts-expect-error eachAction is in DispatchFuncMap<S, R>
       // biome-ignore lint/suspicious/noExplicitAny: action parameters can be any types.

package/src/index.ts

@@ -7,8 +7,8 @@ import registerThunk from './registerThunk'
 import { remove } from './remove'
 import { setData } from './setData'
 import { setDefaultID } from './setDefaultID'
-import { getDefaultID, getNode, getState, getStateByThunk, getStateOrDefault } from './states'
-import type { ClassState, NodeMeta, NodeState, NodeStateMap, State } from './stateTypes'
+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 useThunk, { type UseThunk } from './useThunk'
@@ -20,7 +20,6 @@ export {
   type UseThunk,
   type State,
   type NodeState,
-  type NodeMeta,
   type NodeStateMap,
   // type NodeStateMapByClass, // XXX for global state
   type ClassState,
@@ -39,8 +38,8 @@ export {
   getDefaultID,
   getNode,
   getState,
-  getStateOrDefault,
-  getStateByThunk,
+  mustGetState,
+  mustGetStateByThunk,
   init,
   type InitParams,
   setData,

package/src/registerThunk.ts

@@ -1,17 +1,18 @@
 import { createContext, type Dispatch, type SetStateAction } from 'react'
 import type { ClassState, State } from './stateTypes'
-import type { ThunkModule, ThunkModuleFunc } from './thunk'
+import type { ThunkModule } from './thunk'
 import { THUNK_CONTEXT_MAP } from './thunkContextMap'
 
-export default <S extends State, R extends ThunkModuleFunc<S>>(theDo: ThunkModule<S, R>) => {
+export default <S extends State>(theDo: ThunkModule<S>) => {
   const { myClass, defaultState } = theDo
 
   if (THUNK_CONTEXT_MAP.theMap[myClass]) {
-    // already init
-    console.info('regsterThunk: already init:', myClass)
+    // 1. already init
+    console.warn('regsterThunk: already init:', myClass)
     return
   }
 
+  // 2. to initialize classState, setClassState, and refClassState.
   const classState: ClassState<S> = {
     myClass,
     nodes: {},
@@ -19,15 +20,20 @@ export default <S extends State, R extends ThunkModuleFunc<S>>(theDo: ThunkModul
   }
   const setClassState: Dispatch<SetStateAction<ClassState<S>>> = () => {}
   const refClassState = { current: classState }
+
+  // 3. create context
   const context = createContext({
     refClassState,
     setClassState,
   })
 
+  // 4. setup THUNK_CONTEXT_MAP.theMap.
   THUNK_CONTEXT_MAP.theMap[myClass] = {
     context,
     refClassState,
   }
+
+  // 5. setup THUNK_CONTEXT_MAP.theList, to ensure the rendering order.
   const theList = Object.keys(THUNK_CONTEXT_MAP.theMap)
   theList.sort()
   THUNK_CONTEXT_MAP.theList = theList

package/src/stateTypes.ts

@@ -13,10 +13,6 @@ export type NodeStateMap<S extends State> = {
   [key: string]: NodeState<S>
 }
 
-export type NodeStateMapByClass<S extends State> = {
-  [className: string]: NodeStateMap<S>
-}
-
 // ClassState
 export type ClassState<S extends State> = {
   myClass: string
@@ -24,11 +20,3 @@ export type ClassState<S extends State> = {
   nodes: NodeStateMap<S>
   defaultState: S
 }
-
-// Node
-export type NodeMeta = {
-  id: string
-  theClass: string
-  // @ts-expect-error do can be any type.
-  do: DispatchFuncMap
-}

package/src/states.ts

@@ -32,16 +32,16 @@ export const getState = <S extends State>(classState: ClassState<S>, myID?: stri
   return me.state
 }
 
-export const getStateOrDefault = <S extends State>(classState: ClassState<S>, myID?: string): S => {
+export const mustGetState = <S extends State>(classState: ClassState<S>, myID?: string): S => {
   return getState(classState, myID) || classState.defaultState
 }
 
-export const getStateByThunk = <S extends State, R extends ThunkModuleFunc<S>>(
+export const mustGetStateByThunk = <S extends State, R extends ThunkModuleFunc<S>>(
   theUseThunk: UseThunk<S, R>,
   myID?: string,
 ): [S, DispatchFuncMap<S, R>, string] => {
   const [classState, theDo] = theUseThunk
   const theID = myID ? myID : getDefaultID(classState)
-  const state = getStateOrDefault(classState, theID)
+  const state = mustGetState(classState, theID)
   return [state, theDo, theID]
 }

package/src/thunk.ts

@@ -2,15 +2,19 @@ import type { ActionFunc } from './action'
 import type { Reducer } from './reducer'
 import type { State } from './stateTypes'
 
-export interface ThunkModuleFunc<S extends State> {
+export interface ThunkModuleBase<S extends State> {
+  [idx: string]: ActionFunc<S> | string | Reducer<S> | S | undefined
+}
+
+export interface ThunkModuleFunc<S extends State> extends ThunkModuleBase<S> {
   [action: string]: ActionFunc<S>
 }
 
 // This is used as the parameter for useThunk.
-export type ThunkModule<S extends State, T extends ThunkModuleFunc<S>> = {
+export type ThunkModule<S extends State> = {
   myClass: string
   default?: Reducer<S>
   defaultState: S
-} & T
+} & ThunkModuleBase<S>
 
 export type ThunkModuleToFunc<T> = Omit<T, 'myClass' | 'default' | 'defaultState'>

package/src/thunkContextMap.ts

@@ -8,7 +8,7 @@ export type ThunkContextMap = {
       // biome-ignore lint/suspicious/noExplicitAny: ThunkContextMap can be any type
       context: rContext<Context<any>>
 
-      // INFO We need to use refClassState to sync all the classState in all ops.
+      // we need to use refClassState to sync all the classState in all ops.
       // biome-ignore lint/suspicious/noExplicitAny: ThunkContextMap can be any type
       refClassState: { current: ClassState<any> }
     }

package/src/useThunk.ts

@@ -21,7 +21,7 @@ export type UseThunk<S extends State, R extends ThunkModuleFunc<S>> = [
  * useThunk
  **********/
 export default <S extends State, R extends ThunkModuleFunc<S>>(
-  theDo: ThunkModule<S, R>,
+  theDo: ThunkModule<S>,
 ): UseThunk<S, R> => {
   const { myClass } = theDo
 

package/src/useThunkReducer.ts

@@ -55,10 +55,12 @@ export default <S extends State, A extends BaseAction>(
   const dispatch = useCallback(
     (action: A | Thunk<S, A>) => {
       if (typeof action === 'function') {
+        // action is Thunk<S, A>
         action(dispatch, getClassState)
         return
       }
 
+      // action is not function. so action is A
       const newClassState = reduce(action)
       setClassState(newClassState)
     },

package/types/index.d.ts

@@ -7,9 +7,9 @@ import registerThunk from './registerThunk';
 import { remove } from './remove';
 import { setData } from './setData';
 import { setDefaultID } from './setDefaultID';
-import { getDefaultID, getNode, getState, getStateByThunk, getStateOrDefault } from './states';
-import type { ClassState, NodeMeta, NodeState, NodeStateMap, State } from './stateTypes';
+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 useThunk, { type UseThunk } from './useThunk';
-export { registerThunk, useThunk, ThunkContext, type UseThunk, type State, type NodeState, type NodeMeta, type NodeStateMap, type ClassState, type GetClassState, type Thunk, type ThunkModule, type ThunkModuleToFunc, type Dispatch, type DispatchFuncMap, getDefaultID, getNode, getState, getStateOrDefault, getStateByThunk, init, type InitParams, setData, remove, setDefaultID, genUUID, };
+export { 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, remove, setDefaultID, genUUID, };

package/types/stateTypes.d.ts

@@ -8,17 +8,9 @@ export type NodeState<S extends State> = {
 export type NodeStateMap<S extends State> = {
     [key: string]: NodeState<S>;
 };
-export type NodeStateMapByClass<S extends State> = {
-    [className: string]: NodeStateMap<S>;
-};
 export type ClassState<S extends State> = {
     myClass: string;
     defaultID?: string | null;
     nodes: NodeStateMap<S>;
     defaultState: S;
 };
-export type NodeMeta = {
-    id: string;
-    theClass: string;
-    do: DispatchFuncMap;
-};

package/types/states.d.ts

@@ -5,5 +5,5 @@ import type { UseThunk } from './useThunk';
 export declare const getDefaultID: <S extends State>(classState: ClassState<S>) => string;
 export declare const getNode: <S extends State>(classState: ClassState<S>, myID?: string) => NodeState<S> | null;
 export declare const getState: <S extends State>(classState: ClassState<S>, myID?: string) => S | null;
-export declare const getStateOrDefault: <S extends State>(classState: ClassState<S>, myID?: string) => S;
-export declare const getStateByThunk: <S extends State, R extends ThunkModuleFunc<S>>(theUseThunk: UseThunk<S, R>, myID?: string) => [S, DispatchFuncMap<S, R>, string];
+export declare const mustGetState: <S extends State>(classState: ClassState<S>, myID?: string) => S;
+export declare const mustGetStateByThunk: <S extends State, R extends ThunkModuleFunc<S>>(theUseThunk: UseThunk<S, R>, myID?: string) => [S, DispatchFuncMap<S, R>, string];