@pihanga2/core 0.2.1 → 0.3.1

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, 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"
@@ -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
 
@@ -157,11 +166,23 @@ 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)
+  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 +202,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

@@ -2,6 +2,7 @@ import { Action, Reducer } from "@reduxjs/toolkit"
 import {
   DispatchF,
   PiReducer,
+  PiReducerCancelF,
   PiRegisterOneShotReducerF,
   PiRegisterReducerF,
   ReduceF,
@@ -14,6 +15,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 +23,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 +43,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 +69,9 @@ export function createReducer(
     eventType: string,
     mapper: ReduceF<S, A>,
     priority: number = 0,
-  ): void => {
-    addReducer(eventType, { mapperMany: mapper, priority })
+    key: string | undefined = undefined
+  ): PiReducerCancelF => {
+    return addReducer(eventType, { mapperMany: mapper, priority, key })
   }
 
   const registerOneShot: PiRegisterOneShotReducerF = <
@@ -88,18 +79,22 @@ 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,
-  ): void => {
-    addReducer(eventType, { mapperOnce: mapper, priority })
+    key: string | undefined = undefined
+  ): 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>[] }
-  ) {
-    const m = mappings[eventType] || []
+  ): 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
@@ -114,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 = {
@@ -125,3 +124,39 @@ 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,
+  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
+}

package/src/register_cards.ts

@@ -0,0 +1,308 @@
+import equal from "deep-equal"
+import { getLogger } from "./logger"
+import {
+  CSSModuleClasses,
+  CardAction,
+  CardProp,
+  DispatchF,
+  GenericCardParameterT,
+  MetaCardMapperF,
+  PiCardDef,
+  PiCardRef,
+  PiMapProps,
+  PiRegisterComponent,
+  PiRegisterMetaCard,
+  PiRegisterReducerF,
+  ReduxState,
+  RegisterCardF,
+  StateMapper,
+  StateMapperContext,
+} from "./types"
+import { Action, AnyAction, Dispatch } from "@reduxjs/toolkit"
+
+const logger = getLogger("card-register")
+
+export function isCardRef(p: any): boolean {
+  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
+}
+
+export type MetaCard = {
+  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 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)
+  }
+}
+
+export function updateOrRegisterCard(
+  registerReducer: PiRegisterReducerF,
+  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)
+  }
+}
+
+export 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
+}
+
+export function _updateCard(
+  name: string,
+  parameters: { [key: string]: GenericCardParameterT },
+  registerReducer: PiRegisterReducerF,
+  overrideEvents?: { [key: string]: string },
+): PiCardRef {
+  const mappings = cardMappings[name]
+  if (!mappings) {
+    // first time
+    if (!parameters.cardType) {
+      logger.warn("missing 'cardType'", name)
+      return name
+    }
+    const p: any = parameters
+    return _registerCard(name, p, registerReducer, overrideEvents)
+  }
+
+  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 },
+) {
+  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, parameters }
+}
+
+export function _updateCardMapping(
+  name: string,
+  parameters: PiCardDef,
+  registerReducer: PiRegisterReducerF,
+  mappings: Mapping,
+) {
+  return _createCardMapping(name, parameters, registerReducer, mappings.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
+}
+
+// NOT IMPLEMENTED YET
+// function _updateMetadataCard(
+//   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 updateCard(name: string, parameters: PiCardDef): PiCardRef {
+//     const n = `${metaName}/${name}`
+//     return mc.updateCard(n, parameters)
+//   }
+//   const top = mc.mapper(metaName, parameters, updateCard)
+//   _updateCard(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).find(([n, _]) => {
+    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
+  }
+
+  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}`)
+  }
+  if (propName === `${evName}Mapper`) {
+    logger.debug("processEventParameter", cardName)
+
+    const m = value as (ev: Action) => Action
+    eventMappers[evName] = m
+  }
+  return true
+}
+
+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
+  }
+}

package/src/rest/types.ts

@@ -57,7 +57,7 @@ export type RegisterGenericProps<
     reply: R,
     dispatcher: DispatchF,
     result: ResultAction<A>,
-  ) => S
+  ) => void
   error?: (
     state: S,
     error: ErrorAction<A>,

package/src/root.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+import { Provider } from "react-redux"
+
+import { Card } from "./card"
+
+export function RootComponent(store: any) {
+  return (
+    <React.StrictMode>
+      <Provider store={store}>
+        <Card cardName="_window" parentCard="" />
+      </Provider>
+    </React.StrictMode>
+  )
+}

package/src/types.ts

@@ -31,13 +31,13 @@ export type ReduceF<S extends ReduxState, A extends ReduxAction> = (
   state: S,
   action: A,
   dispatch: DispatchF,
-) => S
+) => void // S
 
 export type ReduceOnceF<S extends ReduxState, A extends ReduxAction> = (
   state: S,
   action: A,
   dispatch: DispatchF,
-) => [S, boolean]
+) => boolean // [S, boolean]
 
 export type DispatchF = <T extends ReduxAction>(a: T) => void
 
@@ -52,7 +52,10 @@ export type PiRegisterReducerF = <S extends ReduxState, A extends ReduxAction>(
   eventType: string,
   mapper: ReduceF<S, A>, // (state: S, action: A, dispatch: DispatchF) => S,
   priority?: number,
-) => void
+  key?: string,
+) => PiReducerCancelF
+
+export type PiReducerCancelF = () => void
 
 export type PiRegisterOneShotReducerF = <
   S extends ReduxState,
@@ -76,6 +79,12 @@ export type CardProp = {
   parentCard: string
 } & PiDefCtxtProps
 
+// props for the 'root' of all cards
+export type WindowProps = {
+  page: PiCardRef
+  framework?: string // select framework to render window
+  theme?: any // depends on framework
+}
 
 // type which needs to be implemented by card components
 export type PiCardProps<P, E = {}> = P & {
@@ -84,8 +93,8 @@ export type PiCardProps<P, E = {}> = P & {
   _cls: (elName: string | string[], styles?: CSSModuleClasses) => string
   _dispatch: DispatchF
 } & {
-    [Key in keyof E]: (ev: E[Key]) => void
-  }
+  [Key in keyof E]: (ev: E[Key]) => void
+}
 
 export type CSSModuleClasses = { readonly [key: string]: string }