@chhsiao1981/use-thunk 10.3.0 → 10.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chhsiao1981/use-thunk",
-  "version": "10.3.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/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/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)
     },