@pihanga2/core 0.3.3 → 0.3.5

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;
 
@@ -150,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;