@pihanga2/core 0.3.2 → 0.3.4

package/src/register_cards.ts

@@ -1,5 +1,5 @@
 import equal from "deep-equal";
-import { getLogger } from "./logger";
+import {getLogger} from "./logger";
 import {
   CSSModuleClasses,
   CardAction,
@@ -18,7 +18,7 @@ import {
   StateMapper,
   StateMapperContext,
 } from "./types";
-import { Action, AnyAction, Dispatch } from "@reduxjs/toolkit";
+import {Action, AnyAction, Dispatch} from "@reduxjs/toolkit";
 
 const logger = getLogger("card-register");
 
@@ -28,9 +28,11 @@ export function isCardRef(p: any): boolean {
 
 export type Mapping = {
   cardType: string;
-  props: { [k: string]: unknown };
-  eventMappers: { [k: string]: (ev: Action) => Action | null };
-  cardEvents: { [key: string]: string };
+  props: {[k: string]: unknown};
+  eventMappers: {
+    [k: string]: (ev: Action, ctxtProps: CardProp) => Action | null;
+  };
+  cardEvents: {[key: string]: string};
   parameters: PiCardDef; // original
 };
 
@@ -38,14 +40,14 @@ export type MetaCard = {
   type: string;
   registerCard: RegisterCardF;
   mapper: MetaCardMapperF;
-  events?: { [key: string]: string };
+  events?: {[key: string]: string};
 };
 
-export const cardTypes: { [k: string]: PiRegisterComponent } = {};
-export const metacardTypes: { [k: string]: MetaCard } = {};
+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 cardMappings: {[k: string]: Mapping} = {};
 export const dispatch2registerReducer: [
   React.Dispatch<any>,
   PiRegisterReducerF
@@ -69,12 +71,12 @@ export function registerCardComponent(card: PiRegisterComponent): void {
 
 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.info(`Register meta card type "${type}"`);
-    metacardTypes[type] = { type, registerCard, mapper, events };
+    metacardTypes[type] = {type, registerCard, mapper, events};
   }
   return f;
 }
@@ -98,7 +100,7 @@ export function updateOrRegisterCard(
   dispatch2registerReducer.push([dispatchF, registerReducer]);
   return (
     name: string,
-    parameters: { [key: string]: GenericCardParameterT }
+    parameters: {[key: string]: GenericCardParameterT}
   ): PiCardRef => {
     return _updateCard(name, parameters, registerReducer);
   };
@@ -108,7 +110,7 @@ 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}"`);
@@ -135,9 +137,9 @@ export function _registerCard(
 
 export function _updateCard(
   name: string,
-  parameters: { [key: string]: GenericCardParameterT },
+  parameters: {[key: string]: GenericCardParameterT},
   registerReducer: PiRegisterReducerF,
-  overrideEvents?: { [key: string]: string }
+  overrideEvents?: {[key: string]: string}
 ): PiCardRef {
   const mappings = cardMappings[name];
   if (!mappings) {
@@ -150,7 +152,7 @@ export function _updateCard(
     return _registerCard(name, p, registerReducer, overrideEvents);
   }
 
-  const p = { ...mappings.parameters, ...parameters };
+  const p = {...mappings.parameters, ...parameters};
   _createCardMapping(name, p, registerReducer, mappings.cardEvents);
   return name;
 }
@@ -159,10 +161,10 @@ 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;
@@ -270,8 +272,8 @@ export function createCardDeclaration<Props = {}, Events = {}>(
 function processEventParameter(
   propName: string,
   value: unknown,
-  events: { [key: string]: string },
-  eventMappers: { [k: string]: (ev: Action) => Action },
+  events: {[key: string]: string},
+  eventMappers: {[k: string]: (ev: Action) => Action},
   registerReducer: PiRegisterReducerF,
   cardName: string
 ): boolean {
@@ -302,7 +304,8 @@ function processEventParameter(
         return s;
       },
       0,
-      `${cardName}|${propName}`
+      `on card ${cardName} for ${propName}`,
+      r
     );
   }
   if (propName === `${evName}Mapper`) {
@@ -348,9 +351,9 @@ 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
 ): (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 || "-";

package/src/router.ts

@@ -1,10 +1,19 @@
-import { Update, createBrowserHistory, Location } from 'history';
-import { getLogger } from './logger';
-import { registerActions } from './redux';
-import { DispatchF, PathQuery, PiReducer, ReduceF, ReduxAction, ReduxState, Route } from './types';
-import { PiRegister } from '.';
-
-const logger = getLogger("router")
+import {Update, createBrowserHistory, Location} from "history";
+import {getLogger} from "./logger";
+import {createOnAction, registerActions} from "./redux";
+import {
+  DEF_REDUCER_PRIORITY,
+  DispatchF,
+  PathQuery,
+  PiReducer,
+  ReduceF,
+  ReduxAction,
+  ReduxState,
+  Route,
+} from "./types";
+import {PiRegister} from ".";
+
+const logger = getLogger("router");
 export const browserHistory = createBrowserHistory();
 
 // type Route = {
@@ -14,56 +23,69 @@ export const browserHistory = createBrowserHistory();
 //   fromBrowser?: boolean
 // }
 
-export const ACTION_TYPES = registerActions('pi/router', ['show_page', 'navigate_to_page']);
+export const ACTION_TYPES = registerActions("pi/router", [
+  "show_page",
+  "navigate_to_page",
+]);
 
 export type ShowPageEvent = {
-  path: string[]
-  query?: PathQuery
-  fromBrowser?: boolean
-}
-export const onShowPage = createOnAction<ShowPageEvent>(ACTION_TYPES.SHOW_PAGE)
+  path: string[];
+  query?: PathQuery;
+  fromBrowser?: boolean;
+};
+export const onShowPage = createOnAction<ShowPageEvent>(ACTION_TYPES.SHOW_PAGE);
 
-export const showPage = (dispatch: DispatchF, path: string[], query?: PathQuery) => {
-  dispatch(createShowPageAction(path, query))
-}
+export const showPage = (
+  dispatch: DispatchF,
+  path: string[],
+  query?: PathQuery
+) => {
+  dispatch(createShowPageAction(path, query));
+};
 
-export const createShowPageAction = (path: string[], query?: PathQuery): ReduxAction & ShowPageEvent => ({
+export const createShowPageAction = (
+  path: string[],
+  query?: PathQuery
+): ReduxAction & ShowPageEvent => ({
   type: ACTION_TYPES.SHOW_PAGE,
-  path, query, fromBrowser: false
-})
+  path,
+  query,
+  fromBrowser: false,
+});
 
 export type NavigateToPageEvent = {
-  url: string
-  fromBrowser: boolean
-}
-export const onNavigateToPage = createOnAction<NavigateToPageEvent>(ACTION_TYPES.NAVIGATE_TO_PAGE)
-
-export const ON_INIT_ACTION = "pi/start"
-export const onInit = createOnAction<{}>(ON_INIT_ACTION)
-
-export function currentRoute(pathPrefix = ''): Route {
-  const f = route_functions(pathPrefix)
-  const r2 = f.url2route(window.location.href)
-  const r = f.location2route(browserHistory.location)
-  return r
-
+  url: string;
+  fromBrowser: boolean;
+};
+export const onNavigateToPage = createOnAction<NavigateToPageEvent>(
+  ACTION_TYPES.NAVIGATE_TO_PAGE
+);
+
+export const ON_INIT_ACTION = "pi/start";
+export const onInit = createOnAction<{}>(ON_INIT_ACTION);
+
+export function currentRoute(pathPrefix = ""): Route {
+  const f = route_functions(pathPrefix);
+  const r2 = f.url2route(window.location.href);
+  const r = f.location2route(browserHistory.location);
+  return r;
 }
 
-export function init(reducer: PiReducer, pathPrefix = ''): Route {
-  let workingURL: string
-  const f = route_functions(pathPrefix)
+export function init(reducer: PiReducer, pathPrefix = ""): Route {
+  let workingURL: string;
+  const f = route_functions(pathPrefix);
 
-  browserHistory.listen(({ action, location }: Update) => {
+  browserHistory.listen(({action, location}: Update) => {
     // location is an object like window.location
-    const { url } = f.location2route(location)
+    const {url} = f.location2route(location);
     if (workingURL !== url) {
-      logger.info('browser history:', url, action)
-      setTimeout(() => navigateToPage(url, action === 'POP'))
+      logger.info("browser history:", url, action);
+      setTimeout(() => navigateToPage(url, action === "POP"));
     }
   });
 
   function browserPath(): Route {
-    return f.location2route(browserHistory.location)
+    return f.location2route(browserHistory.location);
   }
 
   function navigateToPage(url: string, fromBrowser = false) {
@@ -76,9 +98,9 @@ export function init(reducer: PiReducer, pathPrefix = ''): Route {
 
   reducer.register<ReduxState, ReduxAction & NavigateToPageEvent>(
     ACTION_TYPES.NAVIGATE_TO_PAGE,
-    (state, { url, fromBrowser }, dispatch) => {
-      const r = f.url2route(url)
-      r.fromBrowser = fromBrowser
+    (state, {url, fromBrowser}, dispatch) => {
+      const r = f.url2route(url);
+      r.fromBrowser = fromBrowser;
       if (workingURL && state.route?.url === r.url) {
         return state;
       }
@@ -86,16 +108,19 @@ export function init(reducer: PiReducer, pathPrefix = ''): Route {
         type: ACTION_TYPES.SHOW_PAGE,
         ...r,
       });
-      return state
-    });
+      return state;
+    },
+    DEF_REDUCER_PRIORITY,
+    "@builtin:router:NAVIGATE_TO_PAGE"
+  );
 
   reducer.register<ReduxState, ReduxAction & ShowPageEvent>(
     ACTION_TYPES.SHOW_PAGE,
-    (state, { path, query = {}, fromBrowser = false }) => {
-      const route = f.pathl2route(path, query)
-      workingURL = route.url
+    (state, {path, query = {}, fromBrowser = false}) => {
+      const route = f.pathl2route(path, query);
+      workingURL = route.url;
       if (!fromBrowser) {
-        const hp = browserPath()
+        const hp = browserPath();
         if (route.url !== hp.url) {
           browserHistory.push(route.url);
         }
@@ -103,69 +128,73 @@ export function init(reducer: PiReducer, pathPrefix = ''): Route {
       state.route = {
         ...route,
         fromBrowser,
-      }
-      return state
-    });
-
-  reducer.register('@@INIT', (state) => {
-    const url = browserPath().url
-    logger.info(`Request navigation to '${url}'`);
-    setTimeout(() => navigateToPage(url, true));
-    return state;
-  });
-  return f.location2route(browserHistory.location)
-};
+      };
+      return state;
+    },
+    DEF_REDUCER_PRIORITY,
+    "@builtin:router:SHOW_PAGE"
+  );
+
+  reducer.register(
+    "@@INIT",
+    (state) => {
+      const url = browserPath().url;
+      logger.info(`Request navigation to '${url}'`);
+      setTimeout(() => navigateToPage(url, true));
+      return state;
+    },
+    DEF_REDUCER_PRIORITY,
+    "@builtin:router:@@INIT"
+  );
+  return f.location2route(browserHistory.location);
+}
 
-function route_functions(pathPrefix = '') {
+function route_functions(pathPrefix = "") {
   const location2route = (location: Location): Route => {
-    const [p, s] = [location.pathname, location.search]
-    const url = s ? `${p}${s}` : p
-    return url2route(url)
-  }
+    const [p, s] = [location.pathname, location.search];
+    const url = s ? `${p}${s}` : p;
+    return url2route(url);
+  };
 
   const url2route = (url: string): Route => {
-    const [pn, search] = url.split("?")
-
-    const path = pn.substring(pathPrefix.length).split('/').filter(s => s !== '');
-    const query = {} as PathQuery
-    const s = search
+    const [pn, search] = url.split("?");
+
+    const path = pn
+      .substring(pathPrefix.length)
+      .split("/")
+      .filter((s) => s !== "");
+    const query = {} as PathQuery;
+    const s = search;
     if (s && s.length > 0) {
-      s.split('&').forEach((el) => {
-        const [k, v] = el.split('=');
+      s.split("&").forEach((el) => {
+        const [k, v] = el.split("=");
         query[decodeURI(k)] = v ? decodeURI(v) : true;
       });
     }
-    return { url, path, query }
-  }
+    return {url, path, query};
+  };
 
   const pathl2route = (path: string[], query: PathQuery): Route => {
-    let url = `${pathPrefix}/${path.join('/')}`
+    let url = `${pathPrefix}/${path.join("/")}`;
     if (query) {
       const qa = Object.entries(query);
       if (qa.length > 0) {
-        const s = qa.map(([k, v]) => {
-          const n = encodeURI(k)
-          if (typeof v === 'boolean') {
-            return n
-          } else if (typeof v === 'number') {
-            return `${n}=${v}`
-          } else {
-            return `${n}=${encodeURI(v)}`
-          }
-        }).join('&')
-        url = `${url}?${s}`
+        const s = qa
+          .map(([k, v]) => {
+            const n = encodeURI(k);
+            if (typeof v === "boolean") {
+              return n;
+            } else if (typeof v === "number") {
+              return `${n}=${v}`;
+            } else {
+              return `${n}=${encodeURI(v)}`;
+            }
+          })
+          .join("&");
+        url = `${url}?${s}`;
       }
     }
-    return { url, path, query }
-  }
-  return { location2route, url2route, pathl2route }
+    return {url, path, query};
+  };
+  return {location2route, url2route, pathl2route};
 }
-
-function createOnAction<E>(actionType: string): <S extends ReduxState>(
-  register: PiRegister,
-  f: ReduceF<S, ReduxAction & E>,
-) => void {
-  return (register, f) => {
-    register.reducer.register(actionType, f)
-  }
-}

package/src/types.ts

@@ -1,7 +1,7 @@
 export type ReduxState = {
   route: Route;
 
-  pihanga?: { [key: string]: any };
+  pihanga?: {[key: string]: any};
 };
 
 export type Route = {
@@ -10,7 +10,7 @@ export type Route = {
   url: string;
   fromBrowser?: boolean;
 };
-export type PathQuery = { [k: string]: string | number | boolean };
+export type PathQuery = {[k: string]: string | number | boolean};
 
 export type ReduxAction = {
   type: string;
@@ -23,7 +23,7 @@ export type CardAction = ReduxAction & {
 export type PiRegisterComponent = {
   name: string;
   component: any; // ReactComponent
-  events?: { [key: string]: string };
+  events?: {[key: string]: string};
   // defaults?: { [key: string]: any }
 };
 
@@ -48,11 +48,14 @@ export interface PiReducer {
   dispatchFromReducer: DispatchF;
 }
 
+export const DEF_REDUCER_PRIORITY = 0;
+
 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
+  key?: string,
+  targetMapper?: ReduceF<S, A>
 ) => PiReducerCancelF;
 
 export type PiReducerCancelF = () => void;
@@ -69,7 +72,7 @@ export type PiRegisterOneShotReducerF = <
 // CARDS
 
 // context props given to <Card> in parent card
-export type PiDefCtxtProps = { [k: string]: any };
+export type PiDefCtxtProps = {[k: string]: any};
 
 // type for <Card .../>
 export type CardProp = {
@@ -95,7 +98,7 @@ export type PiCardProps<P, E = {}> = P & {
   [Key in keyof E]: (ev: E[Key]) => void;
 };
 
-export type CSSModuleClasses = { readonly [key: string]: string };
+export type CSSModuleClasses = {readonly [key: string]: string};
 
 export type PiCardRef = string | PiCardDef;
 
@@ -122,15 +125,16 @@ export type PiMapProps<
     | CType[Property]
     | StateMapper<CType[Property], S, C>;
 } & EventHandler<EType, S> &
-  EventMapper<EType>;
+  EventMapper<EType, C>;
 
 export type EventHandler<T, S extends ReduxState> = {
   [Key in keyof T]?: ReduceF<S, T[Key] & ReduxAction>;
 };
 
-export type EventMapper<T> = {
+export type EventMapper<T, C = PiDefCtxtProps> = {
   [Key in keyof T as `${Key & string}Mapper`]?: (
-    ev: T[Key]
+    ev: T[Key],
+    ctxt: C
   ) => ReduxAction | null;
 };
 
@@ -149,7 +153,7 @@ export type PiCardDef = {
 export type PiRegisterMetaCard = {
   type: string;
   mapper: MetaCardMapperF;
-  events?: { [key: string]: string };
+  events?: {[key: string]: string};
 };
 
 export type RegisterCardF = (name: string, parameters: PiCardDef) => PiCardRef;