@pihanga2/core 0.2.0 → 0.3.0

package/src/card.tsx

@@ -5,266 +5,19 @@ import equal from "deep-equal"
 import { getLogger } from "./logger"
 import {
   CSSModuleClasses,
-  CardAction,
   CardProp,
-  DispatchF,
-  MetaCardMapperF,
   PiCardDef,
-  PiCardRef,
-  PiMapProps,
   PiRegisterComponent,
-  PiRegisterMetaCard,
   PiRegisterReducerF,
   ReduxState,
-  RegisterCardF,
   StateMapper,
   StateMapperContext,
 } from "./types"
 import { Action, AnyAction, Dispatch } from "@reduxjs/toolkit"
+import { _createCardMapping, _updateCardMapping, _registerCard, cardMappings, cardTypes, dispatch2registerReducer, framework, Mapping } from './register_cards'
 
-export function isCardRef(p: any): boolean {
-  return (typeof p === "object" && p.cardType !== undefined)
-}
-
-type Mapping = {
-  cardType: string
-  props: { [k: string]: unknown }
-  eventMappers: { [k: string]: (ev: Action) => Action | null }
-  cardEvents: { [key: string]: string }
-}
-
-type MetaCard = {
-  type: string
-  registerCard: RegisterCardF
-  mapper: MetaCardMapperF
-  events?: { [key: string]: string }
-}
-
-const cardTypes: { [k: string]: PiRegisterComponent } = {}
-const metacardTypes: { [k: string]: MetaCard } = {}
-
-let framework: string // name of active UI framework
-const cardMappings: { [k: string]: Mapping } = {}
-const dispatch2registerReducer: [React.Dispatch<any>, PiRegisterReducerF][] = []
 const logger = getLogger("card")
 
-export function registerCardComponent(card: PiRegisterComponent): void {
-  if (cardTypes[card.name]) {
-    logger.warn(`Overwriting definition for card type "${card.name}"`)
-  }
-  logger.info(`Register card type "${card.name}"`)
-  if (!framework) {
-    // set default framework
-    const na = card.name.split("/")
-    if (na.length >= 2) {
-      framework = na[0]
-      logger.info(`Setting UI framework to "${framework}"`)
-    }
-  }
-  cardTypes[card.name] = card
-}
-
-export function registerMetacard(registerCard: RegisterCardF) {
-  function f<C>(declaration: PiRegisterMetaCard) {
-    const { type, mapper, events } = declaration
-    if (metacardTypes[type]) {
-      logger.warn(`Overwriting definition for meta card type "${type}"`)
-    }
-    logger.info(`Register meta card type "${type}"`)
-    metacardTypes[type] = { type, registerCard, mapper, events }
-  }
-  return f
-}
-
-export function registerCard(
-  registerReducer: PiRegisterReducerF,
-  dispatchF: React.Dispatch<any>,
-) {
-  // to be used by dynamically registered cards
-  dispatch2registerReducer.push([dispatchF, registerReducer])
-  return (name: string, parameters: PiCardDef): PiCardRef => {
-    return _registerCard(name, parameters, registerReducer)
-  }
-}
-
-function _registerCard(
-  name: string,
-  parameters: PiCardDef,
-  registerReducer: PiRegisterReducerF,
-  overrideEvents?: { [key: string]: string },
-): PiCardRef {
-  if (cardMappings[name]) {
-    logger.warn(`Overwriting definition for card "${name}"`)
-  }
-  let cardType = cardTypes[parameters.cardType]
-  if (!cardType) {
-    if (framework) {
-      cardType = cardTypes[`${framework}/${parameters.cardType}`]
-    }
-    if (!cardType) {
-      // maybe it's a metadata card
-      if (_registerMetadataCard(name, parameters, registerReducer)) {
-        return name
-      }
-      logger.warn("unknown card type", parameters.cardType)
-      return name
-    }
-  }
-
-  const events = overrideEvents || cardType.events || {}
-  _createCardMapping(name, parameters, registerReducer, events)
-  return name
-  // const props = {} as { [k: string]: unknown }
-  // const eventMappers = {} as { [k: string]: (ev: Action) => Action }
-
-  // const events = overrideEvents || cardType.events || {}
-  // Object.entries(parameters).forEach(([k, v]) => {
-  //   if (k === "cardType") return
-  //   if (typeof v === "object") {
-  //     const cd = v as PiCardDef // speculative
-  //     if (cd.cardType) {
-  //       const cardName = `${name}/${k}`
-  //       v = _registerCard(cardName, cd, registerReducer)
-  //     }
-  //   }
-  //   if (
-  //     k.startsWith("on") &&
-  //     processEventParameter(k, v, events, eventMappers, registerReducer, name)
-  //   ) {
-  //     return
-  //   }
-  //   props[k] = v
-  // })
-  // cardMappings[name] = { cardType: parameters.cardType, props, eventMappers }
-  // return name
-}
-
-function _createCardMapping(
-  name: string,
-  parameters: PiCardDef,
-  registerReducer: PiRegisterReducerF,
-  cardEvents: { [key: string]: string },
-) {
-  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 (typeof v === "object") {
-      const cd = v as PiCardDef // speculative
-      if (cd.cardType) {
-        const cardName = `${name}/${k}`
-        v = _registerCard(cardName, cd, registerReducer)
-      }
-    }
-    if (
-      k.startsWith("on") &&
-      processEventParameter(k, v, cardEvents, eventMappers, registerReducer, name)
-    ) {
-      return
-    }
-    props[k] = v
-  })
-  cardMappings[name] = { cardType: parameters.cardType, props, eventMappers, cardEvents }
-}
-
-function _registerMetadataCard(
-  metaName: string,
-  parameters: PiCardDef,
-  registerReducer: PiRegisterReducerF,
-): boolean {
-  let mc = metacardTypes[parameters.cardType]
-  if (!mc) {
-    if (framework) {
-      mc = metacardTypes[`${framework}/${parameters.cardType}`]
-    }
-    if (!mc) {
-      return false
-    }
-  }
-  function registerCard(name: string, parameters: PiCardDef): PiCardRef {
-    const n = `${metaName}/${name}`
-    return mc.registerCard(n, parameters)
-  }
-  const top = mc.mapper(metaName, parameters, registerCard)
-  _registerCard(metaName, top, registerReducer, mc.events)
-  return true
-}
-
-export function createCardDeclaration<Props = {}, Events = {}>(
-  cardType: string,
-): <S extends ReduxState>(p: PiMapProps<Props, S, Events>) => PiCardDef {
-  return (p) => ({
-    ...p,
-    cardType,
-  })
-}
-
-function processEventParameter(
-  propName: string,
-  value: unknown,
-  events: { [key: string]: string },
-  eventMappers: { [k: string]: (ev: Action) => Action },
-  registerReducer: PiRegisterReducerF,
-  cardName: string,
-): boolean {
-  const eva = Object.entries(events).filter((e) => propName.startsWith(e[0]))
-  if (eva.length === 0) {
-    logger.warn(
-      `encountered property '${propName}' for card '${cardName}' which looks like an even but is not defined`,
-    )
-    return false
-  }
-  // eva could actually return more than one hit if we have similar named events
-  let handled = false
-  for (const [evName, actionType] of 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
-      })
-      handled = true
-      break
-    }
-    if (propName === `${evName}Mapper`) {
-      logger.debug("processEventParameter", cardName)
-
-      const m = value as (ev: Action) => Action
-      eventMappers[evName] = m
-      handled = true
-      break
-    }
-  }
-  return handled
-}
-
-export function memo<P, T, S extends ReduxState, C>(
-  filterF: (state: S, context: StateMapperContext<C>) => P,
-  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 } = {}
-
-  return (state: S, context: StateMapperContext<C>): T => {
-    const k = context.cardKey || "-"
-    const fv = filterF(state, context)
-    if (isNotFirst[k] && equal(fv, lastFilter[k])) {
-      // nothing changed
-      return lastValue[k]
-    }
-    lastFilter[k] = fv
-    const v = mapperF(fv, context, state)
-    lastValue[k] = v
-    isNotFirst[k] = true
-    return v
-  }
-}
-
 // export type CardProp = {
 //   cardName: PiCardRef
 // } & { [k: string]: any }
@@ -303,9 +56,6 @@ export function Card(props: CardProp): JSX.Element {
 }
 
 function checkForAnonymousCard(props: any, id: number, dispatch: Dispatch<AnyAction>): string {
-  // const [id, _] = React.useState<number>(Math.floor(Math.random() * 10000))
-  // const dispatch = useDispatch() // never change the order of hooks called
-
   const cardType = props.cardName?.cardType
   if (!cardType) {
     return "" // not sure what that is
@@ -322,7 +72,6 @@ function checkForAnonymousCard(props: any, id: number, dispatch: Dispatch<AnyAct
   } else {
     cardName = `${cardName}#${id}`
   }
-  // logger.debug("anonymous", cardName)
 
   const mapping = cardMappings[cardName]
   const parameters = props.cardName as PiCardDef
@@ -335,7 +84,7 @@ function checkForAnonymousCard(props: any, id: number, dispatch: Dispatch<AnyAct
   if (mapping) {
     // looks like we already processed it
     // do update props as they may have changed
-    _createCardMapping(cardName, parameters, regRed, mapping.cardEvents)
+    _updateCardMapping(cardName, parameters, regRed, mapping)
   } else {
     _registerCard(cardName, parameters, regRed)
   }
@@ -344,7 +93,7 @@ function checkForAnonymousCard(props: any, id: number, dispatch: Dispatch<AnyAct
 
 function GenericCard(cardName: string, props: CardProp, info: CardInfo, id: number) {
   const cardProps = useSelector<ReduxState, CompProps>(
-    (s) => getCardProps(cardName, s, props, info?.mapping),
+    (s) => getCardProps(cardName, s, props),
     propEq,
   )
   const dispatch = useDispatch()
@@ -387,8 +136,8 @@ function getCardProps(
   cardName: string,
   state: ReduxState,
   props: CardProp,
-  mapping: Mapping,
 ): CompProps {
+  const mapping = cardMappings[cardName]
   const ctxt: StateMapperContext<unknown> = {
     cardName,
     cardKey: props.cardKey,

package/src/{index.tsx → index.ts}

@@ -1,6 +1,4 @@
-import React from "react"
 import ReactDOM from "react-dom/client"
-import { Provider } from "react-redux"
 import { Dispatch } from "react"
 
 import {
@@ -13,8 +11,11 @@ import {
   RegisterCardF,
   MetaCardMapperF,
   PiRegisterMetaCard,
+  PiMapProps,
+  WindowProps,
+  GenericCardParameterT,
 } from "./types"
-import { Card, registerCard, registerCardComponent, registerMetacard } from "./card"
+import { createCardDeclaration, registerCard, registerCardComponent, registerMetacard, updateOrRegisterCard } from "./register_cards"
 import { createReducer } from "./reducer"
 import { ON_INIT_ACTION, currentRoute, init as routerInit } from "./router"
 
@@ -32,6 +33,7 @@ import {
   registerPOST,
   registerPUT,
 } from "./rest"
+import { RootComponent } from "./root"
 const logger = getLogger("root")
 
 export type {
@@ -47,9 +49,11 @@ export type {
   StateMapper,
   PiReducer,
   PiRegisterMetaCard,
+  WindowProps,
 } from "./types"
 export { registerActions, actionTypesToEvents, createOnAction } from "./redux"
-export { Card, memo, createCardDeclaration, isCardRef } from "./card"
+export { Card } 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"
@@ -59,7 +63,12 @@ export { showPage, onInit, onShowPage, createShowPageAction, onNavigateToPage }
 export type { ShowPageEvent, NavigateToPageEvent } from "./router"
 
 export interface PiRegister {
+  //window(parameters: PiCardDef): PiCardRef
+
+  window<S extends ReduxState>(parameters: PiMapProps<WindowProps, S, {}>): PiCardRef
+
   card(name: string, parameters: PiCardDef): PiCardRef
+  updateCard(name: string, parameters: { [key: string]: GenericCardParameterT }): PiCardRef
 
   cardComponent(declaration: PiRegisterComponent): void
 
@@ -160,8 +169,16 @@ export function start<S extends Partial<ReduxState>>(
   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,
     card,
+    updateCard,
     cardComponent: registerCardComponent,
     metaCard: registerMetacard(card),
     reducer: piReducer,
@@ -181,13 +198,3 @@ export function start<S extends Partial<ReduxState>>(
 
   return register
 }
-
-function RootComponent(store: any) {
-  return (
-    <React.StrictMode>
-      <Provider store={store}>
-        <Card cardName="page" parentCard="" />
-      </Provider>
-    </React.StrictMode>
-  )
-}

package/src/reducer.ts

@@ -14,6 +14,7 @@ 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")
 
@@ -21,6 +22,7 @@ type ReducerDef<S extends ReduxState, A extends ReduxAction> = {
   mapperMany?: ReduceF<S, A>
   mapperOnce?: ReduceOnceF<S, A>
   priority?: number
+  key?: string
   definedIn?: StackTrace.StackFrame
 }
 
@@ -40,34 +42,21 @@ export function createReducer(
   ): ReduxState => {
     const s = state || initialState
     const ra = mappings[action.type]
-    if (!ra || ra.length === 0) {
+    const rany = mappings["*"]
+    if ((!ra || ra.length === 0) && (!rany || rany.length === 0)) {
       return s
     }
 
     const nextState = produce<ReduxState, ReduxState>(s, (draft) => {
-      const rout: ReducerDef<ReduxState, Action<any>>[] = []
-      const outDraft = ra.reduce((d, m) => {
-        try {
-          if (m.mapperMany) {
-            const s = m.mapperMany(d, action, delayedDispatcher)
-            rout.push(m)
-            return s
-          } else if (m.mapperOnce) {
-            const [s, flag] = m.mapperOnce(d, action, delayedDispatcher)
-            if (!flag) {
-              rout.push(m)
-            }
-            return s
-          } else {
-            return d
-          }
-        } catch (err: any) {
-          logger.error(err.message, m.definedIn)
-          return d
-        }
-      }, draft)
-      mappings[action.type] = rout
-      return outDraft
+      if (ra) {
+        const rout = _reduce(ra, draft, action, delayedDispatcher)
+        mappings[action.type] = rout
+      }
+      if (rany) {
+        const rout2 = _reduce(rany, draft, action, delayedDispatcher)
+        mappings["*"] = rout2
+      }
+      return
     })
     return nextState
   }
@@ -79,8 +68,9 @@ export function createReducer(
     eventType: string,
     mapper: ReduceF<S, A>,
     priority: number = 0,
+    key: string | undefined = undefined
   ): void => {
-    addReducer(eventType, { mapperMany: mapper, priority })
+    addReducer(eventType, { mapperMany: mapper, priority, key })
   }
 
   const registerOneShot: PiRegisterOneShotReducerF = <
@@ -88,10 +78,11 @@ export function createReducer(
     A extends ReduxAction,
   >(
     eventType: string,
-    mapper: (state: S, action: A, dispatch: DispatchF) => [S, boolean],
+    mapper: (state: S, action: A, dispatch: DispatchF) => boolean,
     priority: number = 0,
+    key: string | undefined = undefined
   ): void => {
-    addReducer(eventType, { mapperOnce: mapper, priority })
+    addReducer(eventType, { mapperOnce: mapper, priority, key })
   }
 
   function addReducer<S extends ReduxState, A extends ReduxAction>(
@@ -99,7 +90,11 @@ export function createReducer(
     reducerDef: ReducerDef<S, A>,
     // mappings: { [k: string]: ReducerDef<ReduxState, Action>[] }
   ) {
-    const m = mappings[eventType] || []
+    let m = mappings[eventType] || []
+    if (reducerDef.key) {
+      // remove reducer with same key - if there is one
+      m = m.filter((r) => r.key !== reducerDef.key)
+    }
     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
@@ -125,3 +120,28 @@ export function createReducer(
 
   return [reducer, piReducer]
 }
+
+function _reduce(
+  ra: ReducerDef<ReduxState, Action>[],
+  draft: ReduxState,
+  action: Action,
+  delayedDispatcher: (a: any) => void,
+): 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)
+      } else if (m.mapperOnce) {
+        const flag = m.mapperOnce(draft, action, delayedDispatcher)
+        if (!flag) {
+          rout.push(m)
+        }
+      }
+    } catch (err: any) {
+      logger.error(err.message, m.definedIn)
+    }
+  })
+  return rout
+}