@pihanga2/core 0.2.0

package/src/index.tsx

@@ -0,0 +1,193 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { Provider } from "react-redux"
+import { Dispatch } from "react"
+
+import {
+  PiCardDef,
+  PiCardRef,
+  PiRegisterComponent,
+  ReduxAction,
+  ReduxState,
+  PiReducer,
+  RegisterCardF,
+  MetaCardMapperF,
+  PiRegisterMetaCard,
+} from "./types"
+import { Card, registerCard, registerCardComponent, registerMetacard } from "./card"
+import { createReducer } from "./reducer"
+import { ON_INIT_ACTION, currentRoute, init as routerInit } from "./router"
+
+import { configureStore } from "@reduxjs/toolkit"
+
+//import monitorReducerEnhancer from "./monitor_enhancer"
+import { getLogger } from "./logger"
+import {
+  PiRegisterDeleteProps,
+  PiRegisterGetProps,
+  PiRegisterPoPuPaProps,
+  registerDELETE,
+  registerGET,
+  registerPATCH,
+  registerPOST,
+  registerPUT,
+} from "./rest"
+const logger = getLogger("root")
+
+export type {
+  PiMapProps,
+  PiCardDef,
+  RegisterCardF,
+  ReduxState,
+  ReduxAction,
+  DispatchF,
+  ReduceF,
+  PiDefCtxtProps,
+  StateMapperContext,
+  StateMapper,
+  PiReducer,
+  PiRegisterMetaCard,
+} from "./types"
+export { registerActions, actionTypesToEvents, createOnAction } from "./redux"
+export { Card, memo, createCardDeclaration, isCardRef } from "./card"
+export { getLogger } from "./logger"
+export type { PiCardProps, PiCardRef } from "./types"
+export type { ErrorAction as RestErrorAction } from "./rest"
+export { RestContentType } from "./rest"
+
+export { showPage, onInit, onShowPage, createShowPageAction, onNavigateToPage } from "./router"
+export type { ShowPageEvent, NavigateToPageEvent } from "./router"
+
+export interface PiRegister {
+  card(name: string, parameters: PiCardDef): PiCardRef
+
+  cardComponent(declaration: PiRegisterComponent): void
+
+  /**
+   * Register a meta card which expands a single card definition of type `name`
+   * into a new set of cards which can be registered in turn through `registerCards`.
+   *
+   * The `transformF` function takes the property declaration and uses the
+   * the common `PiRegister` to define the inner content of this meta card
+   *
+   * @param {string} type
+   * @param {function} mapper
+   */
+  metaCard<C>(declaration: PiRegisterMetaCard): void
+
+  GET<S extends ReduxState, A extends ReduxAction, R, C = any>(
+    props: PiRegisterGetProps<S, A, R, C>,
+  ): void
+  PUT<S extends ReduxState, A extends ReduxAction, R, C = any>(
+    props: PiRegisterPoPuPaProps<S, A, R, C>,
+  ): void
+  POST<S extends ReduxState, A extends ReduxAction, R, C = any>(
+    props: PiRegisterPoPuPaProps<S, A, R, C>,
+  ): void
+  PATCH<S extends ReduxState, A extends ReduxAction, R, C = any>(
+    props: PiRegisterPoPuPaProps<S, A, R, C>,
+  ): void
+  DELETE<S extends ReduxState, A extends ReduxAction, R, C = any>(
+    props: PiRegisterDeleteProps<S, A, R, C>,
+  ): void
+  //registerPeriodicGET<S extends ReduxState, A extends ReduxAction, R>(props: PiRegisterPeridicGetProps<S, A, R>): void;
+
+  reducer: PiReducer
+}
+
+export const DEFAULT_REDUX_STATE = {
+  route: { path: [], query: {}, url: "", fromBrowser: false },
+  pihanga: {},
+}
+
+export type StartProps = {
+  // redux settins
+  disableSerializableStateCheck?: boolean
+  disableSerializableActionCheck?: boolean
+  ignoredActions?: string[]
+  ignoredActionPaths?: string[]
+  ignoredStatePaths?: string[]
+}
+
+export function start<S extends Partial<ReduxState>>(
+  initialState: S,
+  inits: ((register: PiRegister) => void)[] = [],
+  props: StartProps = {}
+): PiRegister {
+  const state = {
+    ...DEFAULT_REDUX_STATE,
+    ...initialState,
+    ...{ route: currentRoute() }, // override route with current one
+  }
+  let dispatchF: Dispatch<any> | null = null
+  const dispatcherW: Dispatch<any> = (a: any): void => {
+    if (dispatchF) {
+      dispatchF(a)
+    } else {
+      logger.error("dispatch function is not properly set")
+    }
+  }
+  const [reducer, piReducer] = createReducer(state, dispatcherW)
+  const route = routerInit(piReducer)
+
+  const ignoredActions = ([] as string[]).concat(props.ignoredActions || [])
+  const ignoredActionPaths = [
+    "apiURL", // from IVCAP
+    "mapper",
+    "content", // from REST
+    "request",
+    "headers",
+    "cause",
+    "data",
+  ].concat(props.ignoredActionPaths || [])
+  const ignoredPaths = ["cause.content"].concat(props.ignoredStatePaths || [])
+
+  const store = configureStore({
+    reducer,
+    preloadedState: state as any, // keep type checking happy
+    // enhancers: [monitorReducerEnhancer as unknown as StoreEnhancer],
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({
+        serializableCheck: {
+          ignoredActions,
+          ignoredActionPaths,
+          ignoredPaths,
+          ignoreState: props.disableSerializableStateCheck,
+          ignoreAction: props.disableSerializableActionCheck,
+        }
+      })
+  })
+  dispatchF = store.dispatch
+
+  const card = registerCard(piReducer.register, dispatchF)
+  const register: PiRegister = {
+    card,
+    cardComponent: registerCardComponent,
+    metaCard: registerMetacard(card),
+    reducer: piReducer,
+    GET: registerGET(piReducer),
+    PUT: registerPUT(piReducer),
+    POST: registerPOST(piReducer),
+    PATCH: registerPATCH(piReducer),
+    DELETE: registerDELETE(piReducer),
+  }
+  inits.forEach((f) => f(register))
+
+  piReducer.dispatch({ type: ON_INIT_ACTION })
+
+  const rootComp = RootComponent(store)
+  const root = ReactDOM.createRoot(document.getElementById("root")!)
+  root.render(rootComp)
+
+  return register
+}
+
+function RootComponent(store: any) {
+  return (
+    <React.StrictMode>
+      <Provider store={store}>
+        <Card cardName="page" parentCard="" />
+      </Provider>
+    </React.StrictMode>
+  )
+}

package/src/logger.ts

@@ -0,0 +1,13 @@
+/* eslint-disable prettier/prettier */
+import { Logger } from "tslog";
+
+export const core = new Logger({
+  type: "pretty",
+  name: "",
+  prettyLogTemplate: "{{hh}}:{{MM}}:{{ss}}:{{ms}} {{logLevelName}} {{name}} "
+});
+export const pihanga = core.getSubLogger({ name: "pihanga" });
+
+export function getLogger(name: string): Logger<unknown> {
+  return core.getSubLogger({ name });
+}

package/src/reducer.ts

@@ -0,0 +1,127 @@
+import { Action, Reducer } from "@reduxjs/toolkit"
+import {
+  DispatchF,
+  PiReducer,
+  PiRegisterOneShotReducerF,
+  PiRegisterReducerF,
+  ReduceF,
+  ReduceOnceF,
+  ReduxAction,
+  ReduxState,
+} from "./types"
+import { produce } from "immer"
+import { RegisterCardState, UPDATE_STATE_ACTION } from "./card"
+import StackTrace from "stacktrace-js"
+import { getLogger } from "./logger"
+import { Dispatch } from "react"
+
+const logger = getLogger("reducer")
+
+type ReducerDef<S extends ReduxState, A extends ReduxAction> = {
+  mapperMany?: ReduceF<S, A>
+  mapperOnce?: ReduceOnceF<S, A>
+  priority?: number
+  definedIn?: StackTrace.StackFrame
+}
+
+export function createReducer(
+  initialState: ReduxState,
+  dispatcher: Dispatch<any>,
+): [Reducer<ReduxState, Action>, PiReducer] {
+  const mappings: { [k: string]: ReducerDef<ReduxState, Action>[] } = {}
+  mappings[UPDATE_STATE_ACTION] = [{ mapperMany: RegisterCardState.reducer }]
+
+  const delayedDispatcher = (a: any): void => {
+    setTimeout(() => dispatcher(a), 0)
+  }
+  const reducer = (
+    state: ReduxState | undefined,
+    action: Action,
+  ): ReduxState => {
+    const s = state || initialState
+    const ra = mappings[action.type]
+    if (!ra || ra.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
+    })
+    return nextState
+  }
+
+  const registerReducer: PiRegisterReducerF = <
+    S extends ReduxState,
+    A extends ReduxAction,
+  >(
+    eventType: string,
+    mapper: ReduceF<S, A>,
+    priority: number = 0,
+  ): void => {
+    addReducer(eventType, { mapperMany: mapper, priority })
+  }
+
+  const registerOneShot: PiRegisterOneShotReducerF = <
+    S extends ReduxState,
+    A extends ReduxAction,
+  >(
+    eventType: string,
+    mapper: (state: S, action: A, dispatch: DispatchF) => [S, boolean],
+    priority: number = 0,
+  ): void => {
+    addReducer(eventType, { mapperOnce: mapper, priority })
+  }
+
+  function addReducer<S extends ReduxState, A extends ReduxAction>(
+    eventType: string,
+    reducerDef: ReducerDef<S, A>,
+    // mappings: { [k: string]: ReducerDef<ReduxState, Action>[] }
+  ) {
+    const m = mappings[eventType] || []
+    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
+
+    const callback = (frames: StackTrace.StackFrame[]) => {
+      // const stack = frames.map((sf) => `${sf.fileName}:${sf.lineNumber}`)
+      // console.log(stack)
+      reducerDef.definedIn = frames[2]
+    }
+
+    const errback = (err: any) => {
+      logger.warn(err.message)
+    }
+    StackTrace.get().then(callback).catch(errback)
+  }
+
+  const piReducer: PiReducer = {
+    register: registerReducer,
+    registerOneShot,
+    dispatch: dispatcher,
+    dispatchFromReducer: delayedDispatcher,
+  }
+
+  return [reducer, piReducer]
+}

package/src/redux.ts

@@ -0,0 +1,64 @@
+import { PiRegister } from "."
+import { pihanga as logger } from "./logger"
+import { CardAction, ReduceF, ReduxState } from "./types"
+
+const ns2Actions: { [k: string]: boolean } = {}
+
+/**
+ * Register a set of actions for a particular namespace.
+ *
+ * The 'actions' parameter is an array of local action
+ * names which will be converted into a hash where the local name
+ * is the key and the value is of the pattern 'namespace:name'.
+ *
+ * The function returns the hash registered under this namespace.
+ *
+ * @param {string} namespace
+ * @param {hash||array} actions
+ */
+export function registerActions<T extends string>(
+  namespace: string,
+  actions: readonly T[],
+): { [S in Uppercase<T>]: string } {
+  if (ns2Actions[namespace]) {
+    logger.warn(`Overwriting action namespace  "${namespace}"`)
+  }
+  const ah: any = {}
+  actions.forEach((a) => {
+    ah[a.toUpperCase()] = `${namespace}/${a}`
+  })
+  logger.info(`Register action ns "${namespace}"`)
+  ns2Actions[namespace] = true
+  return ah as { [S in Uppercase<T>]: string }
+}
+
+export function actionTypesToEvents(actionTypes: { [k: string]: string }): {
+  [k: string]: string
+} {
+  return Object.entries(actionTypes).reduce((p, el) => {
+    const [k, v] = el
+    const n = k
+      .split("_")
+      .map((s) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase())
+      .join("")
+    p[`on${n}`] = v
+    return p
+  }, {} as { [k: string]: string })
+}
+
+/**
+ * Return a function to more conventiently register a
+ * reducer function for 'actionType'.
+ *
+ * @param {string} actionType
+ * @returns a function to register a reducer for 'actionType'
+ */
+export function createOnAction<E>(actionType: string): <S extends ReduxState>(
+  register: PiRegister,
+  //f: (state: S, ev: CardAction & E) => S,
+  f: ReduceF<S, CardAction & E>,
+) => void {
+  return (register, f) => {
+    register.reducer.register(actionType, f)
+  }
+}

package/src/rest/delete.ts

@@ -0,0 +1,41 @@
+import { PiReducer, ReduxAction, ReduxState } from "../types"
+import { registerCommon } from "./utils"
+import { Bindings, ACTION_TYPES, PiRegisterDeleteProps } from "./types"
+
+export function registerDELETE<S extends ReduxState, A extends ReduxAction, R, C = any>(
+  reducer: PiReducer,
+): (props: PiRegisterDeleteProps<S, A, R, C>) => void {
+  return function (props: PiRegisterDeleteProps<S, A, R>) {
+    _registerDELETE(props, reducer)
+  }
+}
+
+function _registerDELETE<S extends ReduxState, A extends ReduxAction, R, C = any>(
+  props: PiRegisterDeleteProps<S, A, R, C>,
+  reducer: PiReducer,
+) {
+  const { name, request } = props
+
+  const submitType = `${ACTION_TYPES.DELETE_SUBMITTED}:${name}`
+  const resultType = `${ACTION_TYPES.DELETE_RESULT}:${name}`
+  const errorType = `${ACTION_TYPES.DELETE_ERROR}:${name}`
+  const intErrorType = `${ACTION_TYPES.DELETE_INTERNAL_ERROR}:${name}`
+
+  function requestF(state: S, action: A): [RequestInit, Bindings] {
+    const bindings = request ? request(action, state) : {}
+    const reqInit = {
+      method: "DELETE",
+    }
+    return [reqInit, bindings]
+  }
+
+  registerCommon(
+    reducer,
+    props,
+    requestF,
+    submitType,
+    resultType,
+    errorType,
+    intErrorType,
+  )
+}

package/src/rest/enums.ts

@@ -0,0 +1,8 @@
+// Enums are not types, but we kind of use them like types, so we have
+// to work around imports and type checking
+
+export enum RestContentType {
+  Blob = "blob",
+  Text = "text",
+  Object = "object",
+}

package/src/rest/get.ts

@@ -0,0 +1,50 @@
+import { PiReducer, ReduxAction, ReduxState } from "../types"
+import { registerCommon } from "./utils"
+import { Bindings, Domain, PiRegisterGetProps } from "./types"
+import { registerActions } from "../redux"
+
+export const ACTION_TYPES = registerActions(`${Domain}/get`, [
+  "submitted",
+  "result",
+  "error",
+  "internal_error",
+  // "PERIODIC_TICK",
+])
+
+export function registerGET<S extends ReduxState, A extends ReduxAction, R, C = any>(
+  reducer: PiReducer,
+): (props: PiRegisterGetProps<S, A, R, C>) => void {
+  return function (props: PiRegisterGetProps<S, A, R, C>) {
+    _registerGET(props, reducer)
+  }
+}
+
+function _registerGET<S extends ReduxState, A extends ReduxAction, R, C = any>(
+  props: PiRegisterGetProps<S, A, R, C>,
+  reducer: PiReducer,
+) {
+  const { name, request } = props
+
+  const submitType = `${ACTION_TYPES.SUBMITTED}/${name}`
+  const resultType = `${ACTION_TYPES.RESULT}/${name}`
+  const errorType = `${ACTION_TYPES.ERROR}/${name}`
+  const intErrorType = `${ACTION_TYPES.INTERNAL_ERROR}/${name}`
+
+  function requestF(state: S, action: A): [RequestInit, Bindings] {
+    const bindings = request ? request(action, state) : {}
+    const reqInit = {
+      method: "GET",
+    }
+    return [reqInit, bindings]
+  }
+
+  registerCommon(
+    reducer,
+    props,
+    requestF,
+    submitType,
+    resultType,
+    errorType,
+    intErrorType,
+  )
+}

package/src/rest/index.ts

@@ -0,0 +1,7 @@
+export { registerGET } from "./get"
+//export { registerPeriodicGET } from './get-periodic';
+export { registerPOST, registerPUT, registerPATCH } from "./postPutPatch"
+export { registerDELETE } from "./delete"
+
+export type * from "./types"
+export * from "./enums"

package/src/rest/postPutPatch.ts

@@ -0,0 +1,118 @@
+import { PiReducer, ReduxAction, ReduxState } from "../types"
+import {
+  ACTION_TYPES,
+  Bindings,
+  PiRegisterPoPuPaProps,
+  PoPuPaRequest,
+} from "./types"
+import { RequestF, registerCommon } from "./utils"
+
+export function registerPOST<S extends ReduxState, A extends ReduxAction, R, C = any>(
+  reducer: PiReducer,
+): (props: PiRegisterPoPuPaProps<S, A, R>) => void {
+  return function (props: PiRegisterPoPuPaProps<S, A, R>) {
+    const { name, request } = props
+
+    const submitType = `${ACTION_TYPES.POST_SUBMITTED}:${name}`
+    const resultType = `${ACTION_TYPES.POST_RESULT}:${name}`
+    const errorType = `${ACTION_TYPES.POST_ERROR}:${name}`
+    const intErrorType = `${ACTION_TYPES.POST_INTERNAL_ERROR}:${name}`
+
+    registerCommon(
+      reducer,
+      props,
+      requestF("POST", request),
+      submitType,
+      resultType,
+      errorType,
+      intErrorType,
+    )
+  }
+}
+
+export function registerPUT<S extends ReduxState, A extends ReduxAction, R, C = any>(
+  reducer: PiReducer,
+): (props: PiRegisterPoPuPaProps<S, A, R>) => void {
+  return function (props: PiRegisterPoPuPaProps<S, A, R>) {
+    const { name, request } = props
+
+    const submitType = `${ACTION_TYPES.PUT_SUBMITTED}:${name}`
+    const resultType = `${ACTION_TYPES.PUT_RESULT}:${name}`
+    const errorType = `${ACTION_TYPES.PUT_ERROR}:${name}`
+    const intErrorType = `${ACTION_TYPES.PUT_INTERNAL_ERROR}:${name}`
+
+    registerCommon(
+      reducer,
+      props,
+      requestF("PUT", request),
+      submitType,
+      resultType,
+      errorType,
+      intErrorType,
+    )
+  }
+}
+
+export function registerPATCH<S extends ReduxState, A extends ReduxAction, R, C = any>(
+  reducer: PiReducer,
+): (props: PiRegisterPoPuPaProps<S, A, R, C>) => void {
+  return function (props: PiRegisterPoPuPaProps<S, A, R>) {
+    const { name, request } = props
+
+    const submitType = `${ACTION_TYPES.PATCH_SUBMITTED}:${name}`
+    const resultType = `${ACTION_TYPES.PATCH_RESULT}:${name}`
+    const errorType = `${ACTION_TYPES.PATCH_ERROR}:${name}`
+    const intErrorType = `${ACTION_TYPES.PATCH_INTERNAL_ERROR}:${name}`
+
+    registerCommon(
+      reducer,
+      props,
+      requestF("PATCH", request),
+      submitType,
+      resultType,
+      errorType,
+      intErrorType,
+    )
+  }
+}
+
+function requestF<S extends ReduxState, A extends ReduxAction>(
+  method: string,
+  request: (action: A, state: S) => PoPuPaRequest,
+): RequestF<S, A> {
+  return (state: S, action: A): [RequestInit, Bindings] => {
+    const r = request(action, state)
+    let ct = r.contentType
+    const headers = {} as { [k: string]: any }
+    let body = r.body
+    if (body) {
+      if (!ct) {
+        if (typeof body === "object") {
+          ct = "application/json"
+        } else if (typeof body === "string") {
+          ct = "text"
+        } else {
+          throw Error("Cannot determin 'contentType'")
+        }
+      }
+      headers["Content-Type"] = ct
+      if (ct === "application/json") {
+        body = JSON.stringify(body)
+      }
+    }
+    if (!ct) {
+      if (typeof body === "string") {
+        ct = "text"
+      } else {
+        throw Error("Cannot determin 'contentType'")
+      }
+    }
+
+    const reqInit = {
+      method,
+      body,
+      headers,
+    }
+    return [reqInit, r.bindings || {}]
+  }
+}