@pihanga2/core 0.2.0 → 0.3.0

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,6 +52,7 @@ export type PiRegisterReducerF = <S extends ReduxState, A extends ReduxAction>(
   eventType: string,
   mapper: ReduceF<S, A>, // (state: S, action: A, dispatch: DispatchF) => S,
   priority?: number,
+  key?: string,
 ) => void
 
 export type PiRegisterOneShotReducerF = <
@@ -76,6 +77,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 +91,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 }