@pihanga2/core 0.3.0 → 0.3.2

package/src/reducer.ts

@@ -2,6 +2,7 @@ import { Action, Reducer } from "@reduxjs/toolkit"
 import {
   DispatchF,
   PiReducer,
+  PiReducerCancelF,
   PiRegisterOneShotReducerF,
   PiRegisterReducerF,
   ReduceF,
@@ -69,8 +70,8 @@ export function createReducer(
     mapper: ReduceF<S, A>,
     priority: number = 0,
     key: string | undefined = undefined
-  ): void => {
-    addReducer(eventType, { mapperMany: mapper, priority, key })
+  ): PiReducerCancelF => {
+    return addReducer(eventType, { mapperMany: mapper, priority, key })
   }
 
   const registerOneShot: PiRegisterOneShotReducerF = <
@@ -81,20 +82,19 @@ export function createReducer(
     mapper: (state: S, action: A, dispatch: DispatchF) => boolean,
     priority: number = 0,
     key: string | undefined = undefined
-  ): void => {
-    addReducer(eventType, { mapperOnce: mapper, priority, key })
+  ): PiReducerCancelF => {
+    return addReducer(eventType, { mapperOnce: mapper, priority, key })
   }
 
+  const nonCancelF = () => {}
+
   function addReducer<S extends ReduxState, A extends ReduxAction>(
     eventType: string,
     reducerDef: ReducerDef<S, A>,
-    // mappings: { [k: string]: ReducerDef<ReduxState, Action>[] }
-  ) {
+  ): PiReducerCancelF {
     let m = mappings[eventType] || []
-    if (reducerDef.key) {
-      // remove reducer with same key - if there is one
-      m = m.filter((r) => r.key !== reducerDef.key)
-    }
+    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
@@ -109,6 +109,10 @@ export function createReducer(
       logger.warn(err.message)
     }
     StackTrace.get().then(callback).catch(errback)
+    return key ? () => {
+      let m = mappings[eventType] || []
+      mappings[eventType] = removeReducer(key, m)
+    } : nonCancelF
   }
 
   const piReducer: PiReducer = {
@@ -121,6 +125,17 @@ export function createReducer(
   return [reducer, piReducer]
 }
 
+function removeReducer(
+  key: string | undefined,
+  m: ReducerDef<ReduxState, Action>[]
+) {
+  if (key) {
+    return m.filter((r) => r.key !== key)
+  } else {
+    return m
+  }
+}
+
 function _reduce(
   ra: ReducerDef<ReduxState, Action>[],
   draft: ReduxState,

package/src/register_cards.ts

@@ -1,5 +1,5 @@
-import equal from "deep-equal"
-import { getLogger } from "./logger"
+import equal from "deep-equal";
+import { getLogger } from "./logger";
 import {
   CSSModuleClasses,
   CardAction,
@@ -17,200 +17,221 @@ import {
   RegisterCardF,
   StateMapper,
   StateMapperContext,
-} from "./types"
-import { Action, AnyAction, Dispatch } from "@reduxjs/toolkit"
+} from "./types";
+import { Action, AnyAction, Dispatch } from "@reduxjs/toolkit";
 
-const logger = getLogger("card-register")
+const logger = getLogger("card-register");
 
 export function isCardRef(p: any): boolean {
-  return (typeof p === "object" && p.cardType !== undefined)
+  return typeof p === "object" && p.cardType !== undefined;
 }
 
 export type Mapping = {
-  cardType: string
-  props: { [k: string]: unknown }
-  eventMappers: { [k: string]: (ev: Action) => Action | null }
-  cardEvents: { [key: string]: string }
-  parameters: PiCardDef // original
-}
+  cardType: string;
+  props: { [k: string]: unknown };
+  eventMappers: { [k: string]: (ev: Action) => Action | null };
+  cardEvents: { [key: string]: string };
+  parameters: PiCardDef; // original
+};
 
 export type MetaCard = {
-  type: string
-  registerCard: RegisterCardF
-  mapper: MetaCardMapperF
-  events?: { [key: string]: string }
-}
+  type: string;
+  registerCard: RegisterCardF;
+  mapper: MetaCardMapperF;
+  events?: { [key: string]: string };
+};
 
-export const cardTypes: { [k: string]: PiRegisterComponent } = {}
-export const metacardTypes: { [k: string]: MetaCard } = {}
-
-export let framework: string // name of active UI framework
-export const cardMappings: { [k: string]: Mapping } = {}
-export const dispatch2registerReducer: [React.Dispatch<any>, PiRegisterReducerF][] = []
+export const cardTypes: { [k: string]: PiRegisterComponent } = {};
+export const metacardTypes: { [k: string]: MetaCard } = {};
 
+export let framework: string; // name of active UI framework
+export const cardMappings: { [k: string]: Mapping } = {};
+export const dispatch2registerReducer: [
+  React.Dispatch<any>,
+  PiRegisterReducerF
+][] = [];
 
 export function registerCardComponent(card: PiRegisterComponent): void {
   if (cardTypes[card.name]) {
-    logger.warn(`Overwriting definition for card type "${card.name}"`)
+    logger.warn(`Overwriting definition for card type "${card.name}"`);
   }
-  logger.info(`Register card type "${card.name}"`)
+  logger.info(`Register card type "${card.name}"`);
   if (!framework) {
     // set default framework
-    const na = card.name.split("/")
+    const na = card.name.split("/");
     if (na.length >= 2) {
-      framework = na[0]
-      logger.info(`Setting UI framework to "${framework}"`)
+      framework = na[0];
+      logger.info(`Setting UI framework to "${framework}"`);
     }
   }
-  cardTypes[card.name] = card
+  cardTypes[card.name] = card;
 }
 
 export function registerMetacard(registerCard: RegisterCardF) {
   function f<C>(declaration: PiRegisterMetaCard) {
-    const { type, mapper, events } = declaration
+    const { type, mapper, events } = declaration;
     if (metacardTypes[type]) {
-      logger.warn(`Overwriting definition for meta card type "${type}"`)
+      logger.warn(`Overwriting definition for meta card type "${type}"`);
     }
-    logger.info(`Register meta card type "${type}"`)
-    metacardTypes[type] = { type, registerCard, mapper, events }
+    logger.info(`Register meta card type "${type}"`);
+    metacardTypes[type] = { type, registerCard, mapper, events };
   }
-  return f
+  return f;
 }
 
-
 export function registerCard(
   registerReducer: PiRegisterReducerF,
-  dispatchF: React.Dispatch<any>,
+  dispatchF: React.Dispatch<any>
 ) {
   // to be used by dynamically registered cards
-  dispatch2registerReducer.push([dispatchF, registerReducer])
+  dispatch2registerReducer.push([dispatchF, registerReducer]);
   return (name: string, parameters: PiCardDef): PiCardRef => {
-    return _registerCard(name, parameters, registerReducer)
-  }
+    return _registerCard(name, parameters, registerReducer);
+  };
 }
 
 export function updateOrRegisterCard(
   registerReducer: PiRegisterReducerF,
-  dispatchF: React.Dispatch<any>,
+  dispatchF: React.Dispatch<any>
 ) {
   // to be used by dynamically registered cards
-  dispatch2registerReducer.push([dispatchF, registerReducer])
-  return (name: string, parameters: { [key: string]: GenericCardParameterT }): PiCardRef => {
-    return _updateCard(name, parameters, registerReducer)
-  }
+  dispatch2registerReducer.push([dispatchF, registerReducer]);
+  return (
+    name: string,
+    parameters: { [key: string]: GenericCardParameterT }
+  ): PiCardRef => {
+    return _updateCard(name, parameters, registerReducer);
+  };
 }
 
 export function _registerCard(
   name: string,
   parameters: PiCardDef,
   registerReducer: PiRegisterReducerF,
-  overrideEvents?: { [key: string]: string },
+  overrideEvents?: { [key: string]: string }
 ): PiCardRef {
   if (cardMappings[name]) {
-    logger.warn(`Overwriting definition for card "${name}"`)
+    logger.warn(`Overwriting definition for card "${name}"`);
   }
-  let cardType = cardTypes[parameters.cardType]
+  let cardType = cardTypes[parameters.cardType];
   if (!cardType) {
     if (framework) {
-      cardType = cardTypes[`${framework}/${parameters.cardType}`]
+      cardType = cardTypes[`${framework}/${parameters.cardType}`];
     }
     if (!cardType) {
       // maybe it's a metadata card
       if (_registerMetadataCard(name, parameters, registerReducer)) {
-        return name
+        return name;
       }
-      logger.warn("unknown card type", parameters.cardType)
-      return name
+      logger.warn("unknown card type", parameters.cardType);
+      return name;
     }
   }
 
-  const events = overrideEvents || cardType.events || {}
-  _createCardMapping(name, parameters, registerReducer, events)
-  return name
+  const events = overrideEvents || cardType.events || {};
+  _createCardMapping(name, parameters, registerReducer, events);
+  return name;
 }
 
 export function _updateCard(
   name: string,
   parameters: { [key: string]: GenericCardParameterT },
   registerReducer: PiRegisterReducerF,
-  overrideEvents?: { [key: string]: string },
+  overrideEvents?: { [key: string]: string }
 ): PiCardRef {
-  const mappings = cardMappings[name]
+  const mappings = cardMappings[name];
   if (!mappings) {
     // first time
     if (!parameters.cardType) {
-      logger.warn("missing 'cardType'", name)
-      return name
+      logger.warn("missing 'cardType'", name);
+      return name;
     }
-    const p: any = parameters
-    return _registerCard(name, p, registerReducer, overrideEvents)
+    const p: any = parameters;
+    return _registerCard(name, p, registerReducer, overrideEvents);
   }
 
-  const p = { ...mappings.parameters, ...parameters }
-  _createCardMapping(name, p, registerReducer, mappings.cardEvents)
-  return name
-
+  const p = { ...mappings.parameters, ...parameters };
+  _createCardMapping(name, p, registerReducer, mappings.cardEvents);
+  return name;
 }
 
 export function _createCardMapping(
   name: string,
   parameters: PiCardDef,
   registerReducer: PiRegisterReducerF,
-  cardEvents: { [key: string]: string },
+  cardEvents: { [key: string]: string }
 ) {
-  const props = {} as { [k: string]: unknown }
-  const eventMappers = {} as { [k: string]: (ev: Action) => Action }
+  const props = {} as { [k: string]: unknown };
+  const eventMappers = {} as { [k: string]: (ev: Action) => Action };
 
   Object.entries(parameters).forEach(([k, v]) => {
-    if (k === "cardType") return
+    if (k === "cardType") return;
     if (typeof v === "object") {
-      const cd = v as PiCardDef // speculative
+      const cd = v as PiCardDef; // speculative
       if (cd.cardType) {
-        const cardName = `${name}/${k}`
-        v = _registerCard(cardName, cd, registerReducer)
+        const cardName = `${name}/${k}`;
+        v = _registerCard(cardName, cd, registerReducer);
       }
     }
     if (
       k.startsWith("on") &&
-      processEventParameter(k, v, cardEvents, eventMappers, registerReducer, name)
+      processEventParameter(
+        k,
+        v,
+        cardEvents,
+        eventMappers,
+        registerReducer,
+        name
+      )
     ) {
-      return
+      return;
     }
-    props[k] = v
-  })
-  cardMappings[name] = { cardType: parameters.cardType, props, eventMappers, cardEvents, parameters }
+    props[k] = v;
+  });
+  cardMappings[name] = {
+    cardType: parameters.cardType,
+    props,
+    eventMappers,
+    cardEvents,
+    parameters,
+  };
 }
 
 export function _updateCardMapping(
   name: string,
   parameters: PiCardDef,
   registerReducer: PiRegisterReducerF,
-  mappings: Mapping,
+  mappings: Mapping
 ) {
-  return _createCardMapping(name, parameters, registerReducer, mappings.cardEvents)
+  return _createCardMapping(
+    name,
+    parameters,
+    registerReducer,
+    mappings.cardEvents
+  );
 }
 
 function _registerMetadataCard(
   metaName: string,
   parameters: PiCardDef,
-  registerReducer: PiRegisterReducerF,
+  registerReducer: PiRegisterReducerF
 ): boolean {
-  let mc = metacardTypes[parameters.cardType]
+  let mc = metacardTypes[parameters.cardType];
   if (!mc) {
     if (framework) {
-      mc = metacardTypes[`${framework}/${parameters.cardType}`]
+      mc = metacardTypes[`${framework}/${parameters.cardType}`];
     }
     if (!mc) {
-      return false
+      return false;
     }
   }
   function registerCard(name: string, parameters: PiCardDef): PiCardRef {
-    const n = `${metaName}/${name}`
-    return mc.registerCard(n, parameters)
+    const n = `${metaName}/${name}`;
+    return mc.registerCard(n, parameters);
   }
-  const top = mc.mapper(metaName, parameters, registerCard)
-  _registerCard(metaName, top, registerReducer, mc.events)
-  return true
+  const top = mc.mapper(metaName, parameters, registerCard);
+  _registerCard(metaName, top, registerReducer, mc.events);
+  return true;
 }
 
 // NOT IMPLEMENTED YET
@@ -238,12 +259,12 @@ function _registerMetadataCard(
 // }
 
 export function createCardDeclaration<Props = {}, Events = {}>(
-  cardType: string,
+  cardType: string
 ): <S extends ReduxState>(p: PiMapProps<Props, S, Events>) => PiCardDef {
   return (p) => ({
     ...p,
     cardType,
-  })
+  });
 }
 
 function processEventParameter(
@@ -252,57 +273,96 @@ function processEventParameter(
   events: { [key: string]: string },
   eventMappers: { [k: string]: (ev: Action) => Action },
   registerReducer: PiRegisterReducerF,
-  cardName: string,
+  cardName: string
 ): boolean {
   const eva = Object.entries(events).find(([n, _]) => {
-    return propName === n || propName === `${n}Mapper`
-  })
+    return propName === n || propName === `${n}Mapper`;
+  });
   if (!eva) {
     logger.warn(
-      `encountered property '${propName}' for card '${cardName}' which looks like an even but is not defined`,
-    )
-    return false
+      `encountered property '${propName}' for card '${cardName}' which looks like an even but is not defined`
+    );
+    return false;
   }
 
-  const [evName, actionType] = eva
+  const [evName, actionType] = eva;
   if (propName === evName) {
-    const r = value as (state: ReduxState, action: CardAction, dispatch: DispatchF) => ReduxState
-    registerReducer(actionType, (s, a, d) => {
-      const ca = a as CardAction
-      if (ca.cardID === cardName) {
-        s = r(s, ca, d)
-      }
-      return s
-    }, 0, `${cardName}|${propName}`)
+    const r = value as (
+      state: ReduxState,
+      action: CardAction,
+      dispatch: DispatchF
+    ) => ReduxState;
+    registerReducer(
+      actionType,
+      (s, a, d) => {
+        const ca = a as CardAction;
+        if (ca.cardID === cardName) {
+          s = r(s, ca, d);
+        }
+        return s;
+      },
+      0,
+      `${cardName}|${propName}`
+    );
   }
   if (propName === `${evName}Mapper`) {
-    logger.debug("processEventParameter", cardName)
+    logger.debug("processEventParameter", cardName);
 
-    const m = value as (ev: Action) => Action
-    eventMappers[evName] = m
+    const m = value as (ev: Action) => Action;
+    eventMappers[evName] = m;
   }
-  return true
+  return true;
 }
 
-export function memo<P, T, S extends ReduxState, C>(
+/**
+ * Memorises a calculation as long as a certain "part"
+ * of the ReduxState is not changing. The `filterF` function
+ * is always called with the current ReduxState.
+ *
+ * If `memo` has been called previously, the return value of
+ * `filterF` is compared with the last previous call. If it has
+ * changed, `mapF` is called. Both return values are internally
+ * stored and the most recent result of `mapF` is returned.
+ *
+ * If `filterF` is returning the same result as in the most recent
+ * call, `mapF` will NOT be called, but the result of the most recent
+ * `mapF` is returned.
+ *
+ * @example
+ * ```typescript
+ * options: memo<CatalogItemtT[], SelectOptionT[], AppState>(
+ *   (s) => s.catalog,
+ *   (items) => items.map(...),
+ * ),
+ * ```
+ *
+ * @param filterF Function to return the part [P] of the ReduxState of interests.
+ * @param mapF Function to map the result of `mapF` to the return value of type T
+ * @typeparam P The type of a section of the ReduxState S.
+ * @typeparam T The return type of this function call.
+ * @typeparam S The type of the ReduxState which is being passed to `filterF`.
+ * @typeparam C They type of specific context this card is being used StateMapperContext<C> (Primarily relevant for tables)
+ * @returns The result of `mapF` if the result of `filterF` has changed, otherwise returns a previous result of `mapF`
+ */
+export function memo<P, T, S extends ReduxState, C = any>(
   filterF: (state: S, context: StateMapperContext<C>) => P,
-  mapperF: (partial: P, context: StateMapperContext<C>, state: S) => T,
+  mapperF: (partial: P, context: StateMapperContext<C>, state: S) => T
 ): (state: S, context: StateMapperContext<C>) => T {
-  const lastFilter: { [k: string]: P } = {}
-  const lastValue: { [k: string]: T } = {}
-  const isNotFirst: { [k: string]: boolean } = {}
+  const lastFilter: { [k: string]: P } = {};
+  const lastValue: { [k: string]: T } = {};
+  const isNotFirst: { [k: string]: boolean } = {};
 
   return (state: S, context: StateMapperContext<C>): T => {
-    const k = context.cardKey || "-"
-    const fv = filterF(state, context)
+    const k = context.cardKey || "-";
+    const fv = filterF(state, context);
     if (isNotFirst[k] && equal(fv, lastFilter[k])) {
       // nothing changed
-      return lastValue[k]
+      return lastValue[k];
     }
-    lastFilter[k] = fv
-    const v = mapperF(fv, context, state)
-    lastValue[k] = v
-    isNotFirst[k] = true
-    return v
-  }
-}
+    lastFilter[k] = fv;
+    const v = mapperF(fv, context, state);
+    lastValue[k] = v;
+    isNotFirst[k] = true;
+    return v;
+  };
+}