@pihanga2/core 0.3.2 → 0.3.4

package/src/index.ts

@@ -1,5 +1,5 @@
-import ReactDOM from "react-dom/client"
-import { Dispatch } from "react"
+import ReactDOM from "react-dom/client";
+import {Dispatch} from "react";
 
 import {
   PiCardDef,
@@ -14,15 +14,21 @@ import {
   PiMapProps,
   WindowProps,
   GenericCardParameterT,
-} from "./types"
-import { createCardDeclaration, registerCard, registerCardComponent, registerMetacard, updateOrRegisterCard } from "./register_cards"
-import { createReducer } from "./reducer"
-import { ON_INIT_ACTION, currentRoute, init as routerInit } from "./router"
+} from "./types";
+import {
+  createCardDeclaration,
+  registerCard,
+  registerCardComponent,
+  registerMetacard,
+  updateOrRegisterCard,
+} from "./register_cards";
+import {createReducer} from "./reducer";
+import {ON_INIT_ACTION, currentRoute, init as routerInit} from "./router";
 
-import { configureStore } from "@reduxjs/toolkit"
+import {configureStore} from "@reduxjs/toolkit";
 
 //import monitorReducerEnhancer from "./monitor_enhancer"
-import { getLogger } from "./logger"
+import {getLogger} from "./logger";
 import {
   PiRegisterDeleteProps,
   PiRegisterGetProps,
@@ -32,9 +38,9 @@ import {
   registerPATCH,
   registerPOST,
   registerPUT,
-} from "./rest"
-import { RootComponent } from "./root"
-const logger = getLogger("root")
+} from "./rest";
+import {RootComponent} from "./root";
+const logger = getLogger("root");
 
 export type {
   PiMapProps,
@@ -50,27 +56,38 @@ export type {
   PiReducer,
   PiRegisterMetaCard,
   WindowProps,
-} from "./types"
-export { registerActions, actionTypesToEvents, createOnAction } from "./redux"
-export { Card, usePiReducer } from "./card"
-export { memo, createCardDeclaration, isCardRef } from "./register_cards"
-export { getLogger } from "./logger"
-export type { PiCardProps, PiCardRef } from "./types"
-export type { ErrorAction as RestErrorAction } from "./rest"
-export { RestContentType } from "./rest"
-
-export { showPage, onInit, onShowPage, createShowPageAction, onNavigateToPage } from "./router"
-export type { ShowPageEvent, NavigateToPageEvent } from "./router"
+} from "./types";
+export {registerActions, actionTypesToEvents, createOnAction} from "./redux";
+export {Card, usePiReducer, cls_f} from "./card";
+export {memo, createCardDeclaration, isCardRef} from "./register_cards";
+export {getLogger} from "./logger";
+export type {PiCardProps, PiCardRef} from "./types";
+export type {ErrorAction as RestErrorAction} from "./rest";
+export {RestContentType} from "./rest";
+
+export {
+  showPage,
+  onInit,
+  onShowPage,
+  createShowPageAction,
+  onNavigateToPage,
+} from "./router";
+export type {ShowPageEvent, NavigateToPageEvent} from "./router";
 
 export interface PiRegister {
   //window(parameters: PiCardDef): PiCardRef
 
-  window<S extends ReduxState>(parameters: PiMapProps<WindowProps, S, {}>): PiCardRef
+  window<S extends ReduxState>(
+    parameters: PiMapProps<WindowProps, S, {}>
+  ): PiCardRef;
 
-  card(name: string, parameters: PiCardDef): PiCardRef
-  updateCard(name: string, parameters: { [key: string]: GenericCardParameterT }): PiCardRef
+  card(name: string, parameters: PiCardDef): PiCardRef;
+  updateCard(
+    name: string,
+    parameters: {[key: string]: GenericCardParameterT}
+  ): PiCardRef;
 
-  cardComponent(declaration: PiRegisterComponent): void
+  cardComponent(declaration: PiRegisterComponent): void;
 
   /**
    * Register a meta card which expands a single card definition of type `name`
@@ -82,41 +99,41 @@ export interface PiRegister {
    * @param {string} type
    * @param {function} mapper
    */
-  metaCard<C>(declaration: PiRegisterMetaCard): void
+  metaCard<C>(declaration: PiRegisterMetaCard): void;
 
   GET<S extends ReduxState, A extends ReduxAction, R, C = any>(
-    props: PiRegisterGetProps<S, A, R, C>,
-  ): void
+    props: PiRegisterGetProps<S, A, R, C>
+  ): void;
   PUT<S extends ReduxState, A extends ReduxAction, R, C = any>(
-    props: PiRegisterPoPuPaProps<S, A, R, C>,
-  ): void
+    props: PiRegisterPoPuPaProps<S, A, R, C>
+  ): void;
   POST<S extends ReduxState, A extends ReduxAction, R, C = any>(
-    props: PiRegisterPoPuPaProps<S, A, R, C>,
-  ): void
+    props: PiRegisterPoPuPaProps<S, A, R, C>
+  ): void;
   PATCH<S extends ReduxState, A extends ReduxAction, R, C = any>(
-    props: PiRegisterPoPuPaProps<S, A, R, C>,
-  ): void
+    props: PiRegisterPoPuPaProps<S, A, R, C>
+  ): void;
   DELETE<S extends ReduxState, A extends ReduxAction, R, C = any>(
-    props: PiRegisterDeleteProps<S, A, R, C>,
-  ): void
+    props: PiRegisterDeleteProps<S, A, R, C>
+  ): void;
   //registerPeriodicGET<S extends ReduxState, A extends ReduxAction, R>(props: PiRegisterPeridicGetProps<S, A, R>): void;
 
-  reducer: PiReducer
+  reducer: PiReducer;
 }
 
 export const DEFAULT_REDUX_STATE = {
-  route: { path: [], query: {}, url: "", fromBrowser: false },
+  route: {path: [], query: {}, url: "", fromBrowser: false},
   pihanga: {},
-}
+};
 
 export type StartProps = {
   // redux settins
-  disableSerializableStateCheck?: boolean
-  disableSerializableActionCheck?: boolean
-  ignoredActions?: string[]
-  ignoredActionPaths?: string[]
-  ignoredStatePaths?: string[]
-}
+  disableSerializableStateCheck?: boolean;
+  disableSerializableActionCheck?: boolean;
+  ignoredActions?: string[];
+  ignoredActionPaths?: string[];
+  ignoredStatePaths?: string[];
+};
 
 export function start<S extends Partial<ReduxState>>(
   initialState: S,
@@ -126,20 +143,20 @@ export function start<S extends Partial<ReduxState>>(
   const state = {
     ...DEFAULT_REDUX_STATE,
     ...initialState,
-    ...{ route: currentRoute() }, // override route with current one
-  }
-  let dispatchF: Dispatch<any> | null = null
+    ...{route: currentRoute()}, // override route with current one
+  };
+  let dispatchF: Dispatch<any> | null = null;
   const dispatcherW: Dispatch<any> = (a: any): void => {
     if (dispatchF) {
-      dispatchF(a)
+      dispatchF(a);
     } else {
-      logger.error("dispatch function is not properly set")
+      logger.error("dispatch function is not properly set");
     }
-  }
-  const [reducer, piReducer] = createReducer(state, dispatcherW)
-  const route = routerInit(piReducer)
+  };
+  const [reducer, piReducer] = createReducer(state, dispatcherW);
+  const route = routerInit(piReducer);
 
-  const ignoredActions = ([] as string[]).concat(props.ignoredActions || [])
+  const ignoredActions = ([] as string[]).concat(props.ignoredActions || []);
   const ignoredActionPaths = [
     "apiURL", // from IVCAP
     "mapper",
@@ -148,8 +165,8 @@ export function start<S extends Partial<ReduxState>>(
     "headers",
     "cause",
     "data",
-  ].concat(props.ignoredActionPaths || [])
-  const ignoredPaths = ["cause.content"].concat(props.ignoredStatePaths || [])
+  ].concat(props.ignoredActionPaths || []);
+  const ignoredPaths = ["cause.content"].concat(props.ignoredStatePaths || []);
 
   const store = configureStore({
     reducer,
@@ -163,21 +180,22 @@ export function start<S extends Partial<ReduxState>>(
           ignoredPaths,
           ignoreState: props.disableSerializableStateCheck,
           ignoreAction: props.disableSerializableActionCheck,
-        }
-      })
-  })
+        },
+      }),
+  });
   // make pihanga's reducer interface available to cards
-  const anyStore: any = store
-  anyStore.piReducer = piReducer
-
-  dispatchF = store.dispatch
+  const anyStore: any = store;
+  anyStore.piReducer = piReducer;
 
-  const card = registerCard(piReducer.register, dispatchF)
-  const updateCard = updateOrRegisterCard(piReducer.register, dispatchF)
-  const window = <S extends ReduxState>(p: PiMapProps<WindowProps, S, {}>): PiCardRef => {
-    return card("_window", { cardType: "framework", ...p })
-  }
+  dispatchF = store.dispatch;
 
+  const card = registerCard(piReducer.register, dispatchF);
+  const updateCard = updateOrRegisterCard(piReducer.register, dispatchF);
+  const window = <S extends ReduxState>(
+    p: PiMapProps<WindowProps, S, {}>
+  ): PiCardRef => {
+    return card("_window", {cardType: "framework", ...p});
+  };
 
   const register: PiRegister = {
     window,
@@ -191,14 +209,14 @@ export function start<S extends Partial<ReduxState>>(
     POST: registerPOST(piReducer),
     PATCH: registerPATCH(piReducer),
     DELETE: registerDELETE(piReducer),
-  }
-  inits.forEach((f) => f(register))
+  };
+  inits.forEach((f) => f(register));
 
-  piReducer.dispatch({ type: ON_INIT_ACTION })
+  piReducer.dispatch({type: ON_INIT_ACTION});
 
-  const rootComp = RootComponent(store)
-  const root = ReactDOM.createRoot(document.getElementById("root")!)
-  root.render(rootComp)
+  const rootComp = RootComponent(store);
+  const root = ReactDOM.createRoot(document.getElementById("root")!);
+  root.render(rootComp);
 
-  return register
+  return register;
 }

package/src/reducer.ts

@@ -1,4 +1,4 @@
-import { Action, Reducer } from "@reduxjs/toolkit"
+import {Action, Reducer} from "@reduxjs/toolkit";
 import {
   DispatchF,
   PiReducer,
@@ -9,110 +9,137 @@ import {
   ReduceOnceF,
   ReduxAction,
   ReduxState,
-} from "./types"
-import { produce } from "immer"
-import { RegisterCardState, UPDATE_STATE_ACTION } from "./card"
-import StackTrace from "stacktrace-js"
-import { getLogger } from "./logger"
-import { Dispatch } from "react"
-import { currentRoute } from "./router"
+} from "./types";
+import {produce} from "immer";
+import {RegisterCardState, UPDATE_STATE_ACTION} from "./card";
+import StackTrace from "stacktrace-js";
+import {getLogger} from "./logger";
+import {Dispatch} from "react";
+import {currentRoute} from "./router";
 
-const logger = getLogger("reducer")
+const logger = getLogger("reducer");
 
 type ReducerDef<S extends ReduxState, A extends ReduxAction> = {
-  mapperMany?: ReduceF<S, A>
-  mapperOnce?: ReduceOnceF<S, A>
-  priority?: number
-  key?: string
-  definedIn?: StackTrace.StackFrame
-}
+  mapperMulti?: ReduceF<S, A>;
+  mapperOnce?: ReduceOnceF<S, A>;
+  priority?: number;
+  key?: string;
+  definedIn?: StackTrace.StackFrame;
+  targetMapper?: ReduceF<S, A>;
+};
+
+type Source = {
+  file?: string;
+  line?: number;
+  column?: number;
+  functionName?: string;
+};
 
 export function createReducer(
   initialState: ReduxState,
-  dispatcher: Dispatch<any>,
+  dispatcher: Dispatch<any>
 ): [Reducer<ReduxState, Action>, PiReducer] {
-  const mappings: { [k: string]: ReducerDef<ReduxState, Action>[] } = {}
-  mappings[UPDATE_STATE_ACTION] = [{ mapperMany: RegisterCardState.reducer }]
+  const mappings: {[k: string]: ReducerDef<ReduxState, Action>[]} = {};
+  mappings[UPDATE_STATE_ACTION] = [
+    {
+      mapperMulti: RegisterCardState.reducer,
+      key: "@builtin:card:UPDATE_STATE_ACTION",
+    },
+  ];
 
   const delayedDispatcher = (a: any): void => {
-    setTimeout(() => dispatcher(a), 0)
-  }
+    setTimeout(() => dispatcher(a), 0);
+  };
   const reducer = (
     state: ReduxState | undefined,
-    action: Action,
+    action: Action
   ): ReduxState => {
-    const s = state || initialState
-    const ra = mappings[action.type]
-    const rany = mappings["*"]
+    const s = state || initialState;
+    const ra = mappings[action.type];
+    const rany = mappings["*"];
     if ((!ra || ra.length === 0) && (!rany || rany.length === 0)) {
-      return s
+      return s;
     }
 
     const nextState = produce<ReduxState, ReduxState>(s, (draft) => {
+      if (!draft.pihanga) {
+        draft.pihanga = {};
+      }
+      draft.pihanga.reducers = [];
       if (ra) {
-        const rout = _reduce(ra, draft, action, delayedDispatcher)
-        mappings[action.type] = rout
+        const rout = _reduce(ra, draft, action, delayedDispatcher);
+        mappings[action.type] = rout;
       }
       if (rany) {
-        const rout2 = _reduce(rany, draft, action, delayedDispatcher)
-        mappings["*"] = rout2
+        const rout2 = _reduce(rany, draft, action, delayedDispatcher);
+        mappings["*"] = rout2;
       }
-      return
-    })
-    return nextState
-  }
+      return;
+    });
+    return nextState;
+  };
 
   const registerReducer: PiRegisterReducerF = <
     S extends ReduxState,
-    A extends ReduxAction,
+    A extends ReduxAction
   >(
     eventType: string,
     mapper: ReduceF<S, A>,
     priority: number = 0,
-    key: string | undefined = undefined
+    key?: string,
+    targetMapper?: ReduceF<S, A>
   ): PiReducerCancelF => {
-    return addReducer(eventType, { mapperMany: mapper, priority, key })
-  }
+    return addReducer(eventType, {
+      mapperMulti: mapper,
+      priority,
+      key,
+      targetMapper,
+    });
+  };
 
   const registerOneShot: PiRegisterOneShotReducerF = <
     S extends ReduxState,
-    A extends ReduxAction,
+    A extends ReduxAction
   >(
     eventType: string,
     mapper: (state: S, action: A, dispatch: DispatchF) => boolean,
     priority: number = 0,
     key: string | undefined = undefined
   ): PiReducerCancelF => {
-    return addReducer(eventType, { mapperOnce: mapper, priority, key })
-  }
+    return addReducer(eventType, {mapperOnce: mapper, priority, key});
+  };
 
-  const nonCancelF = () => {}
+  const nonCancelF = () => {};
 
   function addReducer<S extends ReduxState, A extends ReduxAction>(
     eventType: string,
-    reducerDef: ReducerDef<S, A>,
+    reducerDef: ReducerDef<S, A>
   ): PiReducerCancelF {
-    let m = mappings[eventType] || []
-    const key = reducerDef.key
-    m = removeReducer(key, m)
-    m.push(reducerDef as any as ReducerDef<ReduxState, Action<any>>) // keep typing happy
-    m.sort((a, b) => (b.priority || 0) - (a.priority || 0))
-    mappings[eventType] = m
-
-    const callback = (frames: StackTrace.StackFrame[]) => {
-      // const stack = frames.map((sf) => `${sf.fileName}:${sf.lineNumber}`)
-      // console.log(stack)
-      reducerDef.definedIn = frames[2]
-    }
+    let m = mappings[eventType] || [];
+    const key = reducerDef.key;
+    m = removeReducer(key, m);
+    m.push(reducerDef as any as ReducerDef<ReduxState, Action<any>>); // keep typing happy
+    m.sort((a, b) => (b.priority || 0) - (a.priority || 0));
+    mappings[eventType] = m;
 
-    const errback = (err: any) => {
-      logger.warn(err.message)
+    if (!reducerDef.key) {
+      const frames = StackTrace.getSync();
+      const sf = _get_source_frame(frames);
+      if (sf) {
+        // reducerDef.definedIn = sf;
+        reducerDef.key = sf.toString();
+      } else {
+        reducerDef.definedIn = sf;
+        console.log(">> cannot find source frame", eventType, frames);
+      }
     }
-    StackTrace.get().then(callback).catch(errback)
-    return key ? () => {
-      let m = mappings[eventType] || []
-      mappings[eventType] = removeReducer(key, m)
-    } : nonCancelF
+
+    return key
+      ? () => {
+          let m = mappings[eventType] || [];
+          mappings[eventType] = removeReducer(key, m);
+        }
+      : nonCancelF;
   }
 
   const piReducer: PiReducer = {
@@ -120,9 +147,9 @@ export function createReducer(
     registerOneShot,
     dispatch: dispatcher,
     dispatchFromReducer: delayedDispatcher,
-  }
+  };
 
-  return [reducer, piReducer]
+  return [reducer, piReducer];
 }
 
 function removeReducer(
@@ -130,9 +157,9 @@ function removeReducer(
   m: ReducerDef<ReduxState, Action>[]
 ) {
   if (key) {
-    return m.filter((r) => r.key !== key)
+    return m.filter((r) => r.key !== key);
   } else {
-    return m
+    return m;
   }
 }
 
@@ -140,23 +167,53 @@ function _reduce(
   ra: ReducerDef<ReduxState, Action>[],
   draft: ReduxState,
   action: Action,
-  delayedDispatcher: (a: any) => void,
+  delayedDispatcher: (a: any) => void
 ): ReducerDef<ReduxState, Action<any>>[] {
-  const rout: ReducerDef<ReduxState, Action<any>>[] = []
+  const rout: ReducerDef<ReduxState, Action<any>>[] = [];
   ra.forEach((m) => {
     try {
-      if (m.mapperMany) {
-        m.mapperMany(draft, action, delayedDispatcher)
-        rout.push(m)
+      // if (m.definedIn || m.key) {
+      //   console.log(">>> executing reducer", action.type, m.key, m.definedIn);
+      // }
+      if (m.mapperMulti) {
+        draft.pihanga?.reducers?.push(m.definedIn || m.key || "unknown");
+        m.mapperMulti(draft, action, delayedDispatcher);
+        rout.push(m);
       } else if (m.mapperOnce) {
-        const flag = m.mapperOnce(draft, action, delayedDispatcher)
+        draft.pihanga?.reducers?.push(m.definedIn || m.key || "unknown");
+        const flag = m.mapperOnce(draft, action, delayedDispatcher);
         if (!flag) {
-          rout.push(m)
+          rout.push(m);
         }
       }
     } catch (err: any) {
-      logger.error(err.message, m.definedIn)
+      logger.error(err.message, m.definedIn);
+    }
+  });
+  return rout;
+}
+
+function _get_source_frame(
+  frames: StackTrace.StackFrame[]
+): StackTrace.StackFrame | undefined {
+  // Heuristic: frame 0 = Error, 1 = getCallerSiteInBrowser, 2 = your function, 3 = its caller
+  for (let i = 3; i < frames.length; i++) {
+    const f = frames[i];
+    const fn = f.fileName;
+    if (_is_src_file(fn)) {
+      return f;
     }
-  })
-  return rout
-}
+  }
+  return undefined;
+}
+
+function _is_src_file(url: string | undefined): boolean {
+  if (!url) return false;
+  const m = url.match(/^(?:[a-z][a-z0-9+.-]*:)?\/\/[^\/]+\/([^\/?#]+)/);
+  if (m) {
+    const p1 = m[1];
+    const flag = !(p1.startsWith("@") || p1 === "node_modules");
+    return flag;
+  }
+  return true;
+}

package/src/redux.ts

@@ -1,8 +1,8 @@
-import { PiRegister } from "."
-import { pihanga as logger } from "./logger"
-import { CardAction, ReduceF, ReduxState } from "./types"
+import {PiRegister} from ".";
+import {pihanga as logger} from "./logger";
+import {CardAction, ReduceF, ReduxState} from "./types";
 
-const ns2Actions: { [k: string]: boolean } = {}
+const ns2Actions: {[k: string]: boolean} = {};
 
 /**
  * Register a set of actions for a particular namespace.
@@ -18,32 +18,32 @@ const ns2Actions: { [k: string]: boolean } = {}
  */
 export function registerActions<T extends string>(
   namespace: string,
-  actions: readonly T[],
-): { [S in Uppercase<T>]: string } {
+  actions: readonly T[]
+): {[S in Uppercase<T>]: string} {
   if (ns2Actions[namespace]) {
-    logger.warn(`Overwriting action namespace  "${namespace}"`)
+    logger.warn(`Overwriting action namespace  "${namespace}"`);
   }
-  const ah: any = {}
+  const ah: any = {};
   actions.forEach((a) => {
-    ah[a.toUpperCase()] = `${namespace}/${a}`
-  })
-  logger.info(`Register action ns "${namespace}"`)
-  ns2Actions[namespace] = true
-  return ah as { [S in Uppercase<T>]: string }
+    ah[a.toUpperCase()] = `${namespace}/${a}`;
+  });
+  logger.info(`Register action ns "${namespace}"`);
+  ns2Actions[namespace] = true;
+  return ah as {[S in Uppercase<T>]: string};
 }
 
-export function actionTypesToEvents(actionTypes: { [k: string]: string }): {
-  [k: string]: string
+export function actionTypesToEvents(actionTypes: {[k: string]: string}): {
+  [k: string]: string;
 } {
   return Object.entries(actionTypes).reduce((p, el) => {
-    const [k, v] = el
+    const [k, v] = el;
     const n = k
       .split("_")
       .map((s) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase())
-      .join("")
-    p[`on${n}`] = v
-    return p
-  }, {} as { [k: string]: string })
+      .join("");
+    p[`on${n}`] = v;
+    return p;
+  }, {} as {[k: string]: string});
 }
 
 /**
@@ -53,12 +53,13 @@ export function actionTypesToEvents(actionTypes: { [k: string]: string }): {
  * @param {string} actionType
  * @returns a function to register a reducer for 'actionType'
  */
-export function createOnAction<E>(actionType: string): <S extends ReduxState>(
+export function createOnAction<E>(
+  actionType: string
+): <S extends ReduxState>(
   register: PiRegister,
-  //f: (state: S, ev: CardAction & E) => S,
-  f: ReduceF<S, CardAction & E>,
+  f: ReduceF<S, CardAction & E>
 ) => void {
   return (register, f) => {
-    register.reducer.register(actionType, f)
-  }
+    register.reducer.register(actionType, f);
+  };
 }