@pihanga2/core 0.3.0 → 0.3.2

package/src/card.tsx

@@ -1,194 +1,234 @@
-import React from 'react'
-import { useDispatch, useSelector } from "react-redux"
-import equal from "deep-equal"
+import React, { useEffect, useId } from "react";
+import { useDispatch, useSelector, useStore } from "react-redux";
+import equal from "deep-equal";
 
-import { getLogger } from "./logger"
+import { getLogger } from "./logger";
 import {
   CSSModuleClasses,
   CardProp,
   PiCardDef,
+  PiReducer,
   PiRegisterComponent,
   PiRegisterReducerF,
+  ReduceF,
+  ReduxAction,
   ReduxState,
   StateMapper,
   StateMapperContext,
-} from "./types"
-import { Action, AnyAction, Dispatch } from "@reduxjs/toolkit"
-import { _createCardMapping, _updateCardMapping, _registerCard, cardMappings, cardTypes, dispatch2registerReducer, framework, Mapping } from './register_cards'
-
-const logger = getLogger("card")
+} from "./types";
+import { Action, AnyAction, Dispatch } from "@reduxjs/toolkit";
+import {
+  _createCardMapping,
+  _updateCardMapping,
+  _registerCard,
+  cardMappings,
+  cardTypes,
+  dispatch2registerReducer,
+  framework,
+  Mapping,
+} from "./register_cards";
+
+const logger = getLogger("card");
 
 // export type CardProp = {
 //   cardName: PiCardRef
 // } & { [k: string]: any }
 
-type CompProps = { [k: string]: any }
+type CompProps = { [k: string]: any };
 type CardInfo = {
-  mapping: Mapping
-  cardType: PiRegisterComponent
-}
+  mapping: Mapping;
+  cardType: PiRegisterComponent;
+};
 
 export function Card(props: CardProp): JSX.Element {
-  let cardName: string
+  let cardName: string;
 
-  const [id, _] = React.useState<number>(Math.floor(Math.random() * 10000))
-  const dispatch = useDispatch() // never change the order of hooks called
+  const [id, _] = React.useState<number>(Math.floor(Math.random() * 10000));
+  const dispatch = useDispatch(); // never change the order of hooks called
 
   if (typeof props.cardName === "string") {
-    cardName = props.cardName
+    cardName = props.cardName;
   } else {
     // lets fix it
-    cardName = checkForAnonymousCard(props, id, dispatch)
+    cardName = checkForAnonymousCard(props, id, dispatch);
   }
   if (cardName === "") {
-    logger.error("card name is not of type string", props.cardName)
-    return ErrorCard(<div>Unknown type of cardName '{`${props.cardName}`}'</div>)
+    logger.error("card name is not of type string", props.cardName);
+    return ErrorCard(
+      <div>Unknown type of cardName '{`${props.cardName}`}'</div>
+    );
   }
 
-  const [info, errCard] = getCardInfo(cardName)
+  const [info, errCard] = getCardInfo(cardName);
   if (errCard) {
-    return ErrorCard(errCard)
+    return ErrorCard(errCard);
   }
   if (!info) {
-    throw new Error("info is empty, should never happen")
+    throw new Error("info is empty, should never happen");
   }
-  return GenericCard(cardName, props, info, id)
+  return GenericCard(cardName, props, info, id);
+}
+
+export function usePiReducer<S extends ReduxState, A extends ReduxAction>(
+  eventType: string,
+  mapper: ReduceF<S, A> // (state: S, action: A, dispatch: DispatchF) => S,
+) {
+  const store = useStore();
+  const id = useId();
+  useEffect(() => {
+    const r = (store as any).piReducer as PiReducer;
+    return r.register(eventType, mapper, 0, id);
+  });
 }
 
-function checkForAnonymousCard(props: any, id: number, dispatch: Dispatch<AnyAction>): string {
-  const cardType = props.cardName?.cardType
+function checkForAnonymousCard(
+  props: any,
+  id: number,
+  dispatch: Dispatch<AnyAction>
+): string {
+  const cardType = props.cardName?.cardType;
   if (!cardType) {
-    return "" // not sure what that is
+    return ""; // not sure what that is
   }
   // looks like a potentially unregistered card
-  let cardName: string
+  let cardName: string;
   if (props.parentCard) {
-    cardName = `${props.parentCard}/${cardType.split('/').pop()}`
+    cardName = `${props.parentCard}/${cardType.split("/").pop()}`;
   } else {
-    cardName = cardType
+    cardName = cardType;
   }
   if (props.cardKey) {
-    cardName = `${cardName}#${props.cardKey}-${id}`
+    cardName = `${cardName}#${props.cardKey}-${id}`;
   } else {
-    cardName = `${cardName}#${id}`
+    cardName = `${cardName}#${id}`;
   }
 
-  const mapping = cardMappings[cardName]
-  const parameters = props.cardName as PiCardDef
-  const el = dispatch2registerReducer.find(([d, _]) => d === dispatch)
+  const mapping = cardMappings[cardName];
+  const parameters = props.cardName as PiCardDef;
+  const el = dispatch2registerReducer.find(([d, _]) => d === dispatch);
   if (!el) {
-    logger.warn("unexpected missing mapping between dispatcher and reducerF")
-    return ""
+    logger.warn("unexpected missing mapping between dispatcher and reducerF");
+    return "";
   }
-  const regRed = el[1]
+  const regRed = el[1];
   if (mapping) {
     // looks like we already processed it
     // do update props as they may have changed
-    _updateCardMapping(cardName, parameters, regRed, mapping)
+    _updateCardMapping(cardName, parameters, regRed, mapping);
   } else {
-    _registerCard(cardName, parameters, regRed)
+    _registerCard(cardName, parameters, regRed);
   }
-  return cardName
+  return cardName;
 }
 
-function GenericCard(cardName: string, props: CardProp, info: CardInfo, id: number) {
+function GenericCard(
+  cardName: string,
+  props: CardProp,
+  info: CardInfo,
+  id: number
+) {
   const cardProps = useSelector<ReduxState, CompProps>(
     (s) => getCardProps(cardName, s, props),
-    propEq,
-  )
-  const dispatch = useDispatch()
-
-  const extCardProps = appendEventHandlers(info, cardProps, cardName, dispatch)
-  extCardProps._cls = cls_f(cardName, info.mapping.cardType)
-  return React.createElement(info.cardType.component, extCardProps, props.children)
+    propEq
+  );
+  const dispatch = useDispatch();
+
+  const extCardProps = appendEventHandlers(info, cardProps, cardName, dispatch);
+  extCardProps._cls = cls_f(cardName, info.mapping.cardType);
+  return React.createElement(
+    info.cardType.component,
+    extCardProps,
+    props.children
+  );
 }
 
-const EmptyCompProps = {} as CompProps
+const EmptyCompProps = {} as CompProps;
 
 function ErrorCard(el: JSX.Element) {
   // Note: call the EXACT same hooks as 'GenericCard'
-  useSelector<ReduxState, CompProps>((s) => EmptyCompProps, (a, b) => false)
-  useDispatch()
-  return el
+  useSelector<ReduxState, CompProps>(
+    (s) => EmptyCompProps,
+    (a, b) => false
+  );
+  useDispatch();
+  return el;
 }
 
-
 function getCardInfo(cardName: string): [CardInfo?, JSX.Element?] {
-  const mapping = cardMappings[cardName]
+  const mapping = cardMappings[cardName];
   if (!mapping) {
-    return [undefined, renderUnknownCard(cardName)]
+    return [undefined, renderUnknownCard(cardName)];
   }
-  let cardType = cardTypes[mapping.cardType]
+  let cardType = cardTypes[mapping.cardType];
   if (!cardType) {
     if (framework) {
-      cardType = cardTypes[`${framework}/${mapping.cardType}`]
+      cardType = cardTypes[`${framework}/${mapping.cardType}`];
     }
     if (!cardType) {
-      return [undefined, renderUnknownCardType(mapping.cardType)]
+      return [undefined, renderUnknownCardType(mapping.cardType)];
     }
   }
-  const info = { mapping, cardType }
-  return [info, undefined]
+  const info = { mapping, cardType };
+  return [info, undefined];
 }
 
-
 function getCardProps(
   cardName: string,
   state: ReduxState,
-  props: CardProp,
+  props: CardProp
 ): CompProps {
-  const mapping = cardMappings[cardName]
+  const mapping = cardMappings[cardName];
   const ctxt: StateMapperContext<unknown> = {
     cardName,
     cardKey: props.cardKey,
     ctxtProps: props,
-  }
+  };
   const init: CompProps = {
     cardName,
     cardKey: props.cardKey,
-  }
+  };
   const cprops = Object.entries(mapping.props).reduce((p, [key, vf]) => {
-    let v = vf
+    let v = vf;
     if (typeof vf === "function") {
-      const f = vf as StateMapper<unknown, ReduxState, any>
+      const f = vf as StateMapper<unknown, ReduxState, any>;
       try {
-        v = f(state, ctxt)
+        v = f(state, ctxt);
       } catch (ex) {
-        logger.error(`while resolving property '${key}'`, ex)
+        logger.error(`while resolving property '${key}'`, ex);
       }
     } else if (key in props) {
-      v = props[key]
+      v = props[key];
     }
-    p[key] = v
-    return p
-  }, init)
-  return cprops
+    p[key] = v;
+    return p;
+  }, init);
+  return cprops;
 }
 
 function cls_f(
   cardName: string,
   cardComp: string,
-  prefix: string = "pi",
-): (nodeName: string | string[], styles?: CSSModuleClasses) => string {
-  const cn = cardName.replaceAll(/[/:]/g, "_")
-  const cp = cardComp.replaceAll(/[/:]/g, "_")
-  return (nodeName: string | string[], styles?: CSSModuleClasses): string => {
-    const na: string[] = typeof nodeName === "string" ? [nodeName] : nodeName
-    const ca = [] as string[]
+  prefix: string = "pi"
+): (nodeName: string | string[], className?: string) => string {
+  const cn = cardName.replaceAll(/[/:]/g, "_");
+  const cp = cardComp.replaceAll(/[/:]/g, "_");
+  return (nodeName: string | string[], className?: string): string => {
+    const na: string[] = typeof nodeName === "string" ? [nodeName] : nodeName;
+    const ca = [] as string[];
+    if (className) {
+      ca.push(className);
+    }
     na.forEach((n) => {
-      const s = styles?.[n]
-      if (s) ca.push(s)
-
-      const nn = n.replaceAll(/[/:]/g, "_")
-      ca.push(`${prefix}-${cn}-${nn}`)
-      ca.push(`${prefix}-${cp}-${nn}`)
-    })
-    return ca.join(" ")
-  }
+      const nn = n.replaceAll(/[/:]/g, "_");
+      ca.push(`${prefix}-${cn}-${nn}`);
+      ca.push(`${prefix}-${cp}-${nn}`);
+    });
+    return ca.join(" ");
+  };
 }
 
 function propEq(oldP: CompProps, newP: CompProps): boolean {
-  let isUnchanged = equal(oldP, newP)
+  let isUnchanged = equal(oldP, newP);
   // for (const [k, v] of Object.entries(newP)) {
   //   const ov = oldP[k]
   //   if (ov !== v) {
@@ -199,179 +239,190 @@ function propEq(oldP: CompProps, newP: CompProps): boolean {
   //     }
   //   }
   // }
-  RegisterCardState.changed(newP.cardName, isUnchanged, newP)
-  return isUnchanged
+  RegisterCardState.changed(newP.cardName, isUnchanged, newP);
+  return isUnchanged;
 }
 
 function appendEventHandlers(
   info: CardInfo,
   cardProps: CompProps,
   cardName: string,
-  dispatch: Dispatch<Action>,
+  dispatch: Dispatch<Action>
 ): CompProps {
-  RegisterCardState.props(cardName, cardProps, dispatch)
+  RegisterCardState.props(cardName, cardProps, dispatch);
   const cp: CompProps = {
     ...cardProps,
-    _dispatch: (a: AnyAction) => dispatch(a)
-  }
+    _dispatch: (a: AnyAction) => dispatch(a),
+  };
 
-  const events = info.cardType?.events
+  const events = info.cardType?.events;
   if (!events) {
-    return cp
+    return cp;
   }
-  const eventMappers = info.mapping.eventMappers
+  const eventMappers = info.mapping.eventMappers;
   Object.entries(events).forEach(([name, actionType]) => {
-    const m = eventMappers[name]
+    const m = eventMappers[name];
     if (m) {
-      logger.debug("setup mapper", cardName)
+      logger.debug("setup mapper", cardName);
       cp[name] = (a: AnyAction) => {
-        a.cardID = cardName
-        const a2 = m(a)
-        if (a2) dispatch(a2)
-      }
+        a.cardID = cardName;
+        const a2 = m(a);
+        if (a2) dispatch(a2);
+      };
     } else {
       cp[name] = (a: AnyAction) => {
-        a.type = actionType
-        a.cardID = cardName
-        dispatch(a)
-      }
+        a.type = actionType;
+        a.cardID = cardName;
+        dispatch(a);
+      };
     }
-  })
-  return cp
+  });
+  return cp;
 }
 
 function renderUnknownCard(cardName: string): JSX.Element {
-  return <div>Unknown card '{cardName}'</div>
+  return <div>Unknown card '{cardName}'</div>;
 }
 
 function renderUnknownCardType(cardType: string): JSX.Element {
-  return <div>Unknown card type '{cardType}'</div>
+  return <div>Unknown card type '{cardType}'</div>;
 }
 
 // Adding card state to redux state for debugging
 
-export const UPDATE_STATE_ACTION = "pi/card/update_state"
+export const UPDATE_STATE_ACTION = "pi/card/update_state";
 
 type CardState = {
   props: (
     cardName: string,
     cardProps: CompProps,
-    dispatch: Dispatch<Action>,
-  ) => void
-  changed: (cardName: string, isUnchanged: boolean, props: CompProps) => void
-  reducer: (state: ReduxState, action: Action) => ReduxState
-}
+    dispatch: Dispatch<Action>
+  ) => void;
+  changed: (cardName: string, isUnchanged: boolean, props: CompProps) => void;
+  reducer: (state: ReduxState, action: Action) => ReduxState;
+};
 
-export const RegisterCardState = createCardState()
+export const RegisterCardState = createCardState();
 
 function createCardState(): CardState {
   type S = {
-    cardProps?: CompProps
-    changedAt: number
-    reportedAt: number
-  }
-  const s: { [name: string]: S } = {}
-  let dispatch: Dispatch<Action>
-  let timer: number
-  let lastReport = 0
+    cardProps?: CompProps;
+    changedAt: number;
+    reportedAt: number;
+  };
+  const s: { [name: string]: S } = {};
+  let dispatch: Dispatch<Action>;
+  let timer: number;
+  let lastReport = 0;
 
   // const timer
   const getS = (cardName: string, props: CompProps): S => {
-    const name = cardName
-    let e = s[name]
+    const name = cardName;
+    let e = s[name];
     if (!e) {
-      const ts = Date.now()
+      const ts = Date.now();
       e = {
         changedAt: ts,
         reportedAt: ts,
-      } as S
-      s[name] = e
-      resetTimer()
+      } as S;
+      s[name] = e;
+      resetTimer();
     }
-    return e
-  }
+    return e;
+  };
   const resetTimer = () => {
     if (timer) {
-      clearTimeout(timer)
+      clearTimeout(timer);
     }
     timer = window.setTimeout(() => {
       //logger.debug("... timer went off") // , s, dispatch)
       if (dispatch) {
-        const changed = Object.values(s).filter((s) => s.changedAt > lastReport)
+        const changed = Object.values(s).filter(
+          (s) => s.changedAt > lastReport
+        );
         if (changed.length > 0) {
-          clearTimeout(timer) // just in case
-          dispatch({ type: UPDATE_STATE_ACTION })
+          clearTimeout(timer); // just in case
+          dispatch({ type: UPDATE_STATE_ACTION });
         }
       }
-    }, 1000)
-  }
+    }, 1000);
+  };
   const props = (
     cardName: string,
     cardProps: CompProps,
-    _dispatch: Dispatch<Action>,
+    _dispatch: Dispatch<Action>
   ) => {
-    const e = getS(cardName, cardProps)
-    e.cardProps = cardProps
-    dispatch = _dispatch
-  }
-  const changed = (cardName: string, isUnchanged: boolean, props: CompProps) => {
-    const e = getS(cardName, props)
-    e.reportedAt = Date.now()
+    const e = getS(cardName, cardProps);
+    e.cardProps = cardProps;
+    dispatch = _dispatch;
+  };
+  const changed = (
+    cardName: string,
+    isUnchanged: boolean,
+    props: CompProps
+  ) => {
+    const e = getS(cardName, props);
+    e.reportedAt = Date.now();
     if (!isUnchanged) {
-      logger.debug("card has changed:", cardName)
-      e.changedAt = Date.now()
-      resetTimer()
+      logger.debug("card has changed:", cardName);
+      e.changedAt = Date.now();
+      resetTimer();
     }
-  }
+  };
   const reducer = (state: ReduxState): ReduxState => {
     const pi = Object.values(s)
       .filter((s) => s.reportedAt > lastReport)
       .reduce((p, s) => {
-        const cname = s.cardProps?.cardName
+        const cname = s.cardProps?.cardName;
         if (!cname) {
-          logger.warn("Unexpected missing card name", s)
-          return p
+          logger.warn("Unexpected missing card name", s);
+          return p;
         }
-        const name = cname
-        const props = copySafeProps(s.cardProps || {})
-        delete props.cardName
-        delete props._cls
-        p[name] = props
-        return p
-      }, {} as { [k: string]: any })
-    state.pihanga = pi
-    lastReport = Date.now()
-    return state
-  }
-  return { props, changed, reducer }
+        const name = cname;
+        const props = copySafeProps(s.cardProps || {});
+        delete props.cardName;
+        delete props._cls;
+        p[name] = props;
+        return p;
+      }, {} as { [k: string]: any });
+    state.pihanga = pi;
+    lastReport = Date.now();
+    return state;
+  };
+  return { props, changed, reducer };
 }
 
 function copySafeProps(props: CompProps): CompProps {
   return Object.entries(props).reduce((p, [k, v]) => {
     // const ok = (typeof v === 'undefined' || typeof v === 'string' || typeof v === 'boolean' || typeof v === 'number' || Array.isArray(v));
-    const sv = makeSafe(v)
-    p[k] = sv
-    return p
-  }, {} as CompProps)
+    const sv = makeSafe(v);
+    p[k] = sv;
+    return p;
+  }, {} as CompProps);
 }
 
 function makeSafe(v: any): any {
-  const t = typeof v
-  if (t === 'undefined' || t === 'string' || t === 'boolean' || t === 'number') {
-    return v
+  const t = typeof v;
+  if (
+    t === "undefined" ||
+    t === "string" ||
+    t === "boolean" ||
+    t === "number"
+  ) {
+    return v;
   }
-  if (t === 'function') {
-    return "f(...)"
+  if (t === "function") {
+    return "f(...)";
   }
   if (Array.isArray(v)) {
-    return v.map(makeSafe)
+    return v.map(makeSafe);
   }
-  if (t === 'object') {
+  if (t === "object") {
     return Object.entries(v).reduce((p, [k, v]) => {
-      p[k] = makeSafe(v)
-      return p
-    }, {} as { [k: string]: any })
+      p[k] = makeSafe(v);
+      return p;
+    }, {} as { [k: string]: any });
   }
-  logger.warn(">>> reject", v, typeof v)
-  return "..."
+  logger.warn(">>> reject", v, typeof v);
+  return "...";
 }

package/src/index.ts

@@ -52,7 +52,7 @@ export type {
   WindowProps,
 } from "./types"
 export { registerActions, actionTypesToEvents, createOnAction } from "./redux"
-export { Card } from "./card"
+export { Card, usePiReducer } from "./card"
 export { memo, createCardDeclaration, isCardRef } from "./register_cards"
 export { getLogger } from "./logger"
 export type { PiCardProps, PiCardRef } from "./types"
@@ -166,6 +166,10 @@ export function start<S extends Partial<ReduxState>>(
         }
       })
   })
+  // make pihanga's reducer interface available to cards
+  const anyStore: any = store
+  anyStore.piReducer = piReducer
+
   dispatchF = store.dispatch
 
   const card = registerCard(piReducer.register, dispatchF)