piral-core 0.15.0-alpha.4409 → 0.15.0-beta.4466

package/app.codegen

@@ -68,9 +68,59 @@ function createDefaultState(imports, exports) {
       `import { __RouterContext as RouterContext } from 'react-router'`,
     );
     exports.push(`
-      function useNavigate() {
+      function useCurrentNavigation() {
         const ctx = useRouterContext();
-        return (...args) => ctx.history.push(...args);
+
+        useEffect(() => {
+          _nav = ctx.history;
+          return () => {
+            _nav = undefined;
+          };
+        }, []);
+      }
+    `);
+
+    exports.push(`
+      export function createNavigation() {
+        const enhance = info => ({
+          ...info,
+          location: {
+            get href() {
+              return _nav.createHref(info.location);
+            },
+            ...info.location,
+          },
+        });
+
+        return {
+          push(target, state) {
+            if (_nav) {
+              _nav.push(target, state);
+            }
+          },
+          replace(target, state) {
+            if (_nav) {
+              _nav.replace(target, state);
+            }
+          },
+          go(n) {
+            if (_nav) {
+              _nav.go(n);
+            }
+          },
+          block(blocker) {
+            if (!_nav) {
+              return _noop;
+            }
+            return _nav.block((location, action) => blocker(enhance({ location, action })));
+          },
+          listen(listener) {
+            if (!_nav) {
+              return _noop;
+            }
+            return _nav.listen((location, action) => listener(enhance({ location, action })));
+          },
+        };
       }
     `);
   } else {
@@ -80,9 +130,59 @@ function createDefaultState(imports, exports) {
       `import { UNSAFE_NavigationContext as RouterContext } from 'react-router'`,
     );
     exports.push(`
-      function useNavigate() {
+      function useCurrentNavigation() {
         const ctx = useRouterContext();
-        return (...args) => ctx.navigator.push(...args);
+
+        useEffect(() => {
+          _nav = ctx.navigator;
+          return () => {
+            _nav = undefined;
+          };
+        }, []);
+      }
+    `);
+
+    exports.push(`
+      export function createNavigation() {
+        const enhance = info => ({
+          ...info,
+          location: {
+            get href() {
+              return _nav.createHref(info.location);
+            },
+            ...info.location,
+          },
+        });
+
+        return {
+          push(target, state) {
+            if (_nav) {
+              _nav.push(target, state);
+            }
+          },
+          replace(target, state) {
+            if (_nav) {
+              _nav.replace(target, state);
+            }
+          },
+          go(n) {
+            if (_nav) {
+              _nav.go(n);
+            }
+          },
+          block(blocker) {
+            if (!_nav) {
+              return _noop;
+            }
+            return _nav.block(transition => blocker(enhance(transition)));
+          },
+          listen(listener) {
+            if (!_nav) {
+              return _noop;
+            }
+            return _nav.listen(update => listener(enhance(update)));
+          },
+        };
       }
     `);
   }
@@ -144,14 +244,7 @@ function createRouteHandler(imports, exports) {
   );
 
   assignments.push(`
-    const stateContext = useGlobalStateContext();
-    const navigate = useNavigate();
-
-    useEffect(() => {
-      const handler = ({ path, state }) => navigate(path, state);
-      stateContext.on('navigate', handler);
-      return () => stateContext.off('navigate', handler);
-    }, []);
+    useCurrentNavigation();
   `);
 
   if (process.env.DEBUG_PILET) {
@@ -186,6 +279,9 @@ module.exports = function () {
   return `
     ${imports.join('\n')}
 
+    let _nav;
+    const _noop = () => {};
+
     ${exports.join('\n')}
   `;
 };

package/app.codegen.d.ts

@@ -1,15 +1,15 @@
 import type { LoadPiletsOptions } from 'prial-base';
 import type { DebuggerExtensionOptions } from 'piral-debug-utils';
 import type { RouteComponentProps } from 'react-router';
-import type { AppPath, GlobalState, GlobalStateContext } from './src/types';
+import type { AppPath, GlobalState, GlobalStateContext, NavigationApi } from './src/types';
 
-export function fillDependencies(deps: Record<string, any>): void;
+export function createNavigation(): NavigationApi;
 
 export function createDefaultState(): GlobalState;
 
-export function useRouteFilter(paths: Array<AppPath>): Array<AppPath>;
+export function fillDependencies(deps: Record<string, any>): void;
 
-export function useRouterContext(): RouteComponentProps;
+export function useRouteFilter(paths: Array<AppPath>): Array<AppPath>;
 
 export function integrateDebugger(
   context: GlobalStateContext,

package/esm/actions/app.d.ts

@@ -2,7 +2,6 @@ import { ComponentType } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { ComponentsState, ErrorComponentsState, GlobalStateContext, Pilet, PiletEntry } from '../types';
 export declare function initialize(ctx: GlobalStateContext, loading: boolean, error: Error | undefined, modules: Array<Pilet>): void;
-export declare function navigate(ctx: GlobalStateContext, path: string, state?: any): void;
 export declare function addPilet(ctx: GlobalStateContext, meta: PiletEntry): Promise<void>;
 export declare function removePilet(ctx: GlobalStateContext, name: string): Promise<void>;
 export declare function injectPilet(ctx: GlobalStateContext, pilet: Pilet): Pilet;

package/esm/actions/app.js

@@ -4,9 +4,6 @@ export function initialize(ctx, loading, error, modules) {
     ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { app: Object.assign(Object.assign({}, state.app), { error,
             loading }), modules })));
 }
-export function navigate(ctx, path, state) {
-    ctx.emit('navigate', { path, state });
-}
 export function addPilet(ctx, meta) {
     return ctx.options
         .loadPilet(meta)

package/esm/actions/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/actions/app.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/actions/app.ts"],"names":[],"mappings":"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"}

package/esm/components/wrapComponent.js

@@ -3,7 +3,6 @@ import { PortalRenderer } from './PortalRenderer';
 import { ForeignComponentContainer } from './ForeignComponentContainer';
 import { useGlobalStateContext } from '../hooks';
 import { convertComponent, none } from '../utils';
-import { useRouterContext } from '../../app.codegen';
 // this is an arbitrary start number to have 6 digits
 let portalIdBase = 123456;
 function wrapReactComponent(Component, captured, Wrapper) {
@@ -12,10 +11,10 @@ function wrapReactComponent(Component, captured, Wrapper) {
 }
 function wrapForeignComponent(component, captured, Wrapper) {
     return React.memo((props) => {
-        const { state, readState, destroyPortal } = useGlobalStateContext();
-        const router = useRouterContext();
+        const { readState, destroyPortal, navigation } = useGlobalStateContext();
+        const publicPath = readState(s => s.app.publicPath);
         const id = React.useMemo(() => (portalIdBase++).toString(26), none);
-        const context = React.useMemo(() => ({ router, state, readState }), [router, state]);
+        const context = React.useMemo(() => ({ publicPath, navigation }), []);
         const innerProps = React.useMemo(() => (Object.assign(Object.assign({}, props), captured)), [props]);
         React.useEffect(() => () => destroyPortal(id), none);
         return (React.createElement(Wrapper, Object.assign({}, props),

package/esm/components/wrapComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapComponent.js","sourceRoot":"","sources":["../../src/components/wrapComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,qDAAqD;AACrD,IAAI,YAAY,GAAG,MAAM,CAAC;AAM1B,SAAS,kBAAkB,CACzB,SAAsD,EACtD,QAAuB,EACvB,OAAoB;IAEpB,OAAO,CAAC,KAAQ,EAAE,EAAE,CAAC,CACnB,oBAAC,OAAO,oBAAK,KAAK;QAChB,oBAAC,SAAS,oBAAK,KAAK,EAAM,QAAQ,EAAI,CAC9B,CACX,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAC3B,SAAmD,EACnD,QAAuB,EACvB,OAAoB;IAEpB,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,KAAQ,EAAE,EAAE;QAC7B,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,qBAAqB,EAAE,CAAC;QACpE,MAAM,MAAM,GAAG,gBAAgB,EAAE,CAAC;QAClC,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;QACpE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;QACrF,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,iCAAM,KAAK,GAAK,QAAQ,EAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAE7E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;QAErD,OAAO,CACL,oBAAC,OAAO,oBAAK,KAAK;YAChB,oBAAC,cAAc,IAAC,EAAE,EAAE,EAAE,GAAI;YAC1B,oBAAC,yBAAyB,IAAC,UAAU,EAAE,UAAU,eAAa,EAAE,gBAAc,SAAS,cAAY,OAAO,GAAI,CACtG,CACX,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,WAAW,CAAC,SAAc;IACjC,OAAO,CAAE,SAAmC,CAAC,QAAQ,CAAC;AACxD,CAAC;AAED,MAAM,UAAU,aAAa,CAC3B,UAAuD,EACvD,SAA+C,EAC/C,QAAuB,EACvB,OAAoB;IAEpB,IAAI,CAAC,SAAS,EAAE;QACd,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QACvC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,6CAA6C,CAAC,CAAC;QACtE,2CAA2C;QAC3C,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;KACxB;IAED,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;QAC3D,MAAM,MAAM,GAAG,gBAAgB,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;QACvE,OAAO,oBAAoB,CAAI,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;KAC3D;IAED,OAAO,kBAAkB,CAAI,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC7D,CAAC"}
+{"version":3,"file":"wrapComponent.js","sourceRoot":"","sources":["../../src/components/wrapComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGlD,qDAAqD;AACrD,IAAI,YAAY,GAAG,MAAM,CAAC;AAM1B,SAAS,kBAAkB,CACzB,SAAsD,EACtD,QAAuB,EACvB,OAAoB;IAEpB,OAAO,CAAC,KAAQ,EAAE,EAAE,CAAC,CACnB,oBAAC,OAAO,oBAAK,KAAK;QAChB,oBAAC,SAAS,oBAAK,KAAK,EAAM,QAAQ,EAAI,CAC9B,CACX,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAC3B,SAAmD,EACnD,QAAuB,EACvB,OAAoB;IAEpB,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,KAAQ,EAAE,EAAE;QAC7B,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,qBAAqB,EAAE,CAAC;QACzE,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACpD,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;QACpE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACtE,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,iCAAM,KAAK,GAAK,QAAQ,EAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAE7E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;QAErD,OAAO,CACL,oBAAC,OAAO,oBAAK,KAAK;YAChB,oBAAC,cAAc,IAAC,EAAE,EAAE,EAAE,GAAI;YAC1B,oBAAC,yBAAyB,IAAC,UAAU,EAAE,UAAU,eAAa,EAAE,gBAAc,SAAS,cAAY,OAAO,GAAI,CACtG,CACX,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,WAAW,CAAC,SAAc;IACjC,OAAO,CAAE,SAAmC,CAAC,QAAQ,CAAC;AACxD,CAAC;AAED,MAAM,UAAU,aAAa,CAC3B,UAAuD,EACvD,SAA+C,EAC/C,QAAuB,EACvB,OAAoB;IAEpB,IAAI,CAAC,SAAS,EAAE;QACd,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QACvC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,6CAA6C,CAAC,CAAC;QACtE,2CAA2C;QAC3C,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;KACxB;IAED,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;QAC3D,MAAM,MAAM,GAAG,gBAAgB,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;QACvE,OAAO,oBAAoB,CAAI,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;KAC3D;IAED,OAAO,kBAAkB,CAAI,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC7D,CAAC"}

package/esm/debugger.js

@@ -30,7 +30,7 @@ export function integrateDebugger(context, options, debug = {}) {
             return context.readState((s) => s);
         },
         navigate(path, state) {
-            return context.navigate(path, state);
+            return context.navigation.push(path, state);
         },
         getPilets() {
             return context.readState((s) => s.modules);

package/esm/debugger.js.map

@@ -1 +1 @@
-{"version":3,"file":"debugger.js","sourceRoot":"","sources":["../src/debugger.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"debugger.js","sourceRoot":"","sources":["../src/debugger.ts"],"names":[],"mappings":"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"}

package/esm/state/createActions.js

@@ -1,8 +1,9 @@
 import * as actions from '../actions';
+import { createNavigation } from '../../app.codegen';
 function createContext(state, events) {
     const ctx = Object.assign(Object.assign({}, events), { apis: {}, converters: {
             html: ({ component }) => component,
-        }, state });
+        }, navigation: createNavigation(), state });
     return ctx;
 }
 export function includeActions(ctx, actions) {

package/esm/state/createActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"createActions.js","sourceRoot":"","sources":["../../src/state/createActions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,YAAY,CAAC;AAItC,SAAS,aAAa,CAAC,KAAiC,EAAE,MAAoB;IAC5E,MAAM,GAAG,GAAG,gCACP,MAAM,KACT,IAAI,EAAE,EAAE,EACR,UAAU,EAAE;YACV,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;SACnC,EACD,KAAK,GACgB,CAAC;IACxB,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,GAAuB,EAAE,OAA2B;IACjF,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEzC,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;QACpC,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;QACnC,GAAG,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;KACzC;AACH,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAAiC,EAAE,MAAoB;IACnF,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC7C,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACjC,OAAO,OAAO,CAAC;AACjB,CAAC"}
+{"version":3,"file":"createActions.js","sourceRoot":"","sources":["../../src/state/createActions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,SAAS,aAAa,CAAC,KAAiC,EAAE,MAAoB;IAC5E,MAAM,GAAG,GAAG,gCACP,MAAM,KACT,IAAI,EAAE,EAAE,EACR,UAAU,EAAE;YACV,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;SACnC,EACD,UAAU,EAAE,gBAAgB,EAAE,EAC9B,KAAK,GACgB,CAAC;IACxB,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,GAAuB,EAAE,OAA2B;IACjF,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEzC,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;QACpC,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;QACnC,GAAG,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;KACzC;AACH,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAAiC,EAAE,MAAoB;IACnF,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC7C,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACjC,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/esm/types/components.d.ts

@@ -2,6 +2,7 @@ import type { ComponentType, ReactNode } from 'react';
 import type { RouteComponentProps, SwitchProps } from 'react-router';
 import type { FirstParametersOf, UnionOf } from './common';
 import type { PiralCustomErrors, PiralCustomComponentConverters } from './custom';
+import type { NavigationApi } from './navigation';
 import type { LayoutType } from './layout';
 /**
  * Mapping of available component converters.
@@ -30,7 +31,8 @@ export interface HtmlComponent<TProps> {
  * The context to be transported into the generic components.
  */
 export interface ComponentContext {
-    router: RouteComponentProps;
+    navigation: NavigationApi;
+    publicPath: string;
 }
 /**
  * Generic definition of a framework-independent component.

package/esm/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './data';
 export * from './extension';
 export * from './instance';
 export * from './layout';
+export * from './navigation';
 export * from './plugin';
 export * from './state';
 export * from './utils';

package/esm/types/index.js

@@ -7,6 +7,7 @@ export * from './data';
 export * from './extension';
 export * from './instance';
 export * from './layout';
+export * from './navigation';
 export * from './plugin';
 export * from './state';
 export * from './utils';

package/esm/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/esm/types/navigation.d.ts

@@ -0,0 +1,81 @@
+import type { Disposable } from './utils';
+export declare type NavigationAction = 'POP' | 'PUSH' | 'REPLACE';
+export interface NavigationLocation {
+    /**
+     * The fully qualified URL incl. the origin and base path.
+     */
+    href: string;
+    /**
+     * The location.pathname property is a string that contains an initial "/"
+     * followed by the remainder of the URL up to the ?.
+     */
+    pathname: string;
+    /**
+     * The location.search property is a string that contains an initial "?"
+     * followed by the key=value pairs in the query string. If there are no
+     * parameters, this value may be the empty string (i.e. '').
+     */
+    search: string;
+    /**
+     * The location.hash property is a string that contains an initial "#"
+     * followed by fragment identifier of the URL. If there is no fragment
+     * identifier, this value may be the empty string (i.e. '').
+     */
+    hash: string;
+    /**
+     * The location.state property is a user-supplied State object that is
+     * associated with this location. This can be a useful place to store
+     * any information you do not want to put in the URL, e.g. session-specific
+     * data.
+     */
+    state: unknown;
+    /**
+     * The location.key property is a unique string associated with this location.
+     * On the initial location, this will be the string default. On all subsequent
+     * locations, this string will be a unique identifier.
+     */
+    key: string;
+}
+export interface NavigationListener {
+    (update: NavigationUpdate): void;
+}
+export interface NavigationBlocker {
+    (tx: NavigationTransition): void;
+}
+export interface NavigationUpdate {
+    action: NavigationAction;
+    location: NavigationLocation;
+}
+export interface NavigationTransition extends NavigationUpdate {
+    retry(): void;
+}
+export interface NavigationApi {
+    /**
+     * Pushes a new location onto the history stack.
+     */
+    push(target: string, state?: any): void;
+    /**
+     * Replaces the current location with another.
+     */
+    replace(target: string, state?: any): void;
+    /**
+     * Changes the current index in the history stack by a given delta.
+     */
+    go(n: number): void;
+    /**
+     * Prevents changes to the history stack from happening.
+     * This is useful when you want to prevent the user navigating
+     * away from the current page, for example when they have some
+     * unsaved data on the current page.
+     * @param blocker The function being called with a transition request.
+     * @returns The disposable for stopping the block.
+     */
+    block(blocker: NavigationBlocker): Disposable;
+    /**
+     * Starts listening for location changes and calls the given
+     * callback with an Update when it does.
+     * @param listener The function being called when the route changes.
+     * @returns The disposable for stopping the block.
+     */
+    listen(listener: NavigationListener): Disposable;
+}

package/esm/types/navigation.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=navigation.js.map

package/esm/types/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../src/types/navigation.ts"],"names":[],"mappings":""}

package/esm/types/state.d.ts

@@ -3,6 +3,7 @@ import type { RouteComponentProps } from 'react-router';
 import type { LoadPiletsOptions } from 'piral-base';
 import type { UseBoundStore } from 'zustand';
 import type { Dict, Without } from './common';
+import type { NavigationApi } from './navigation';
 import type { SharedDataItem, DataStoreTarget } from './data';
 import type { PiralCustomActions, PiralCustomState, PiralCustomRegistryState, PiralCustomComponentsState } from './custom';
 import type { EventEmitter, Pilet, BaseComponentProps, PageComponentProps, ExtensionComponentProps, PiletsBag, PiralPageMeta, PiletEntry } from './api';
@@ -10,11 +11,6 @@ import type { ComponentConverters, LoadingIndicatorProps, ErrorInfoProps, Router
 export interface StateDispatcher<TState> {
     (state: TState): Partial<TState>;
 }
-declare module './components' {
-    interface ComponentContext {
-        readState: PiralActions['readState'];
-    }
-}
 export declare type WrappedComponent<TProps> = ComponentType<PropsWithChildren<Without<TProps, keyof BaseComponentProps>>>;
 /**
  * The base type for pilet component registration in the global state context.
@@ -313,12 +309,6 @@ export interface PiralActions extends PiralCustomActions {
      * @returns The desired part.
      */
     readState<S>(select: (state: GlobalState) => S): S;
-    /**
-     * Performs a navigation.
-     * @param path The path to navigate to.
-     * @param state The optional state for the navigation.
-     */
-    navigate(path: string, state?: any): void;
 }
 /**
  * The Piral app instance context.
@@ -337,6 +327,10 @@ export interface GlobalStateContext extends PiralActions, EventEmitter {
      * The available component converters.
      */
     converters: ComponentConverters<any>;
+    /**
+     * The navigation manager for the whole instance.
+     */
+    navigation: NavigationApi;
     /**
      * The initial options.
      */

package/lib/actions/app.d.ts

@@ -2,7 +2,6 @@ import { ComponentType } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { ComponentsState, ErrorComponentsState, GlobalStateContext, Pilet, PiletEntry } from '../types';
 export declare function initialize(ctx: GlobalStateContext, loading: boolean, error: Error | undefined, modules: Array<Pilet>): void;
-export declare function navigate(ctx: GlobalStateContext, path: string, state?: any): void;
 export declare function addPilet(ctx: GlobalStateContext, meta: PiletEntry): Promise<void>;
 export declare function removePilet(ctx: GlobalStateContext, name: string): Promise<void>;
 export declare function injectPilet(ctx: GlobalStateContext, pilet: Pilet): Pilet;

package/lib/actions/app.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.includeProvider = exports.setRoute = exports.setErrorComponent = exports.setComponent = exports.injectPilet = exports.removePilet = exports.addPilet = exports.navigate = exports.initialize = void 0;
+exports.includeProvider = exports.setRoute = exports.setErrorComponent = exports.setComponent = exports.injectPilet = exports.removePilet = exports.addPilet = exports.initialize = void 0;
 const piral_base_1 = require("piral-base");
 const utils_1 = require("../utils");
 function initialize(ctx, loading, error, modules) {
@@ -8,10 +8,6 @@ function initialize(ctx, loading, error, modules) {
             loading }), modules })));
 }
 exports.initialize = initialize;
-function navigate(ctx, path, state) {
-    ctx.emit('navigate', { path, state });
-}
-exports.navigate = navigate;
 function addPilet(ctx, meta) {
     return ctx.options
         .loadPilet(meta)

package/lib/actions/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/actions/app.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/actions/app.ts"],"names":[],"mappings":"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"}

package/lib/components/wrapComponent.js

@@ -6,7 +6,6 @@ const PortalRenderer_1 = require("./PortalRenderer");
 const ForeignComponentContainer_1 = require("./ForeignComponentContainer");
 const hooks_1 = require("../hooks");
 const utils_1 = require("../utils");
-const app_codegen_1 = require("../../app.codegen");
 // this is an arbitrary start number to have 6 digits
 let portalIdBase = 123456;
 function wrapReactComponent(Component, captured, Wrapper) {
@@ -15,10 +14,10 @@ function wrapReactComponent(Component, captured, Wrapper) {
 }
 function wrapForeignComponent(component, captured, Wrapper) {
     return React.memo((props) => {
-        const { state, readState, destroyPortal } = (0, hooks_1.useGlobalStateContext)();
-        const router = (0, app_codegen_1.useRouterContext)();
+        const { readState, destroyPortal, navigation } = (0, hooks_1.useGlobalStateContext)();
+        const publicPath = readState(s => s.app.publicPath);
         const id = React.useMemo(() => (portalIdBase++).toString(26), utils_1.none);
-        const context = React.useMemo(() => ({ router, state, readState }), [router, state]);
+        const context = React.useMemo(() => ({ publicPath, navigation }), []);
         const innerProps = React.useMemo(() => (Object.assign(Object.assign({}, props), captured)), [props]);
         React.useEffect(() => () => destroyPortal(id), utils_1.none);
         return (React.createElement(Wrapper, Object.assign({}, props),

package/lib/components/wrapComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapComponent.js","sourceRoot":"","sources":["../../src/components/wrapComponent.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,qDAAkD;AAClD,2EAAwE;AACxE,oCAAiD;AACjD,oCAAkD;AAClD,mDAAqD;AAGrD,qDAAqD;AACrD,IAAI,YAAY,GAAG,MAAM,CAAC;AAM1B,SAAS,kBAAkB,CACzB,SAAsD,EACtD,QAAuB,EACvB,OAAoB;IAEpB,OAAO,CAAC,KAAQ,EAAE,EAAE,CAAC,CACnB,oBAAC,OAAO,oBAAK,KAAK;QAChB,oBAAC,SAAS,oBAAK,KAAK,EAAM,QAAQ,EAAI,CAC9B,CACX,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAC3B,SAAmD,EACnD,QAAuB,EACvB,OAAoB;IAEpB,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,KAAQ,EAAE,EAAE;QAC7B,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,IAAA,6BAAqB,GAAE,CAAC;QACpE,MAAM,MAAM,GAAG,IAAA,8BAAgB,GAAE,CAAC;QAClC,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,YAAI,CAAC,CAAC;QACpE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;QACrF,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,iCAAM,KAAK,GAAK,QAAQ,EAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAE7E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,YAAI,CAAC,CAAC;QAErD,OAAO,CACL,oBAAC,OAAO,oBAAK,KAAK;YAChB,oBAAC,+BAAc,IAAC,EAAE,EAAE,EAAE,GAAI;YAC1B,oBAAC,qDAAyB,IAAC,UAAU,EAAE,UAAU,eAAa,EAAE,gBAAc,SAAS,cAAY,OAAO,GAAI,CACtG,CACX,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,WAAW,CAAC,SAAc;IACjC,OAAO,CAAE,SAAmC,CAAC,QAAQ,CAAC;AACxD,CAAC;AAED,SAAgB,aAAa,CAC3B,UAAuD,EACvD,SAA+C,EAC/C,QAAuB,EACvB,OAAoB;IAEpB,IAAI,CAAC,SAAS,EAAE;QACd,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QACvC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,6CAA6C,CAAC,CAAC;QACtE,2CAA2C;QAC3C,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;KACxB;IAED,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;QAC3D,MAAM,MAAM,GAAG,IAAA,wBAAgB,EAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;QACvE,OAAO,oBAAoB,CAAI,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;KAC3D;IAED,OAAO,kBAAkB,CAAI,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC7D,CAAC;AAnBD,sCAmBC"}
+{"version":3,"file":"wrapComponent.js","sourceRoot":"","sources":["../../src/components/wrapComponent.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,qDAAkD;AAClD,2EAAwE;AACxE,oCAAiD;AACjD,oCAAkD;AAGlD,qDAAqD;AACrD,IAAI,YAAY,GAAG,MAAM,CAAC;AAM1B,SAAS,kBAAkB,CACzB,SAAsD,EACtD,QAAuB,EACvB,OAAoB;IAEpB,OAAO,CAAC,KAAQ,EAAE,EAAE,CAAC,CACnB,oBAAC,OAAO,oBAAK,KAAK;QAChB,oBAAC,SAAS,oBAAK,KAAK,EAAM,QAAQ,EAAI,CAC9B,CACX,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAC3B,SAAmD,EACnD,QAAuB,EACvB,OAAoB;IAEpB,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,KAAQ,EAAE,EAAE;QAC7B,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,IAAA,6BAAqB,GAAE,CAAC;QACzE,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACpD,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,YAAI,CAAC,CAAC;QACpE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACtE,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,iCAAM,KAAK,GAAK,QAAQ,EAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAE7E,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,YAAI,CAAC,CAAC;QAErD,OAAO,CACL,oBAAC,OAAO,oBAAK,KAAK;YAChB,oBAAC,+BAAc,IAAC,EAAE,EAAE,EAAE,GAAI;YAC1B,oBAAC,qDAAyB,IAAC,UAAU,EAAE,UAAU,eAAa,EAAE,gBAAc,SAAS,cAAY,OAAO,GAAI,CACtG,CACX,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,WAAW,CAAC,SAAc;IACjC,OAAO,CAAE,SAAmC,CAAC,QAAQ,CAAC;AACxD,CAAC;AAED,SAAgB,aAAa,CAC3B,UAAuD,EACvD,SAA+C,EAC/C,QAAuB,EACvB,OAAoB;IAEpB,IAAI,CAAC,SAAS,EAAE;QACd,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QACvC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,6CAA6C,CAAC,CAAC;QACtE,2CAA2C;QAC3C,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;KACxB;IAED,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;QAC3D,MAAM,MAAM,GAAG,IAAA,wBAAgB,EAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;QACvE,OAAO,oBAAoB,CAAI,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;KAC3D;IAED,OAAO,kBAAkB,CAAI,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC7D,CAAC;AAnBD,sCAmBC"}

package/lib/debugger.js

@@ -33,7 +33,7 @@ function integrateDebugger(context, options, debug = {}) {
             return context.readState((s) => s);
         },
         navigate(path, state) {
-            return context.navigate(path, state);
+            return context.navigation.push(path, state);
         },
         getPilets() {
             return context.readState((s) => s.modules);

package/lib/debugger.js.map

@@ -1 +1 @@
-{"version":3,"file":"debugger.js","sourceRoot":"","sources":["../src/debugger.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"debugger.js","sourceRoot":"","sources":["../src/debugger.ts"],"names":[],"mappings":"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"}

package/lib/state/createActions.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createActions = exports.includeActions = void 0;
 const actions = require("../actions");
+const app_codegen_1 = require("../../app.codegen");
 function createContext(state, events) {
     const ctx = Object.assign(Object.assign({}, events), { apis: {}, converters: {
             html: ({ component }) => component,
-        }, state });
+        }, navigation: (0, app_codegen_1.createNavigation)(), state });
     return ctx;
 }
 function includeActions(ctx, actions) {

package/lib/state/createActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"createActions.js","sourceRoot":"","sources":["../../src/state/createActions.ts"],"names":[],"mappings":";;;AAAA,sCAAsC;AAItC,SAAS,aAAa,CAAC,KAAiC,EAAE,MAAoB;IAC5E,MAAM,GAAG,GAAG,gCACP,MAAM,KACT,IAAI,EAAE,EAAE,EACR,UAAU,EAAE;YACV,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;SACnC,EACD,KAAK,GACgB,CAAC;IACxB,OAAO,GAAG,CAAC;AACb,CAAC;AAED,SAAgB,cAAc,CAAC,GAAuB,EAAE,OAA2B;IACjF,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEzC,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;QACpC,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;QACnC,GAAG,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;KACzC;AACH,CAAC;AAPD,wCAOC;AAED,SAAgB,aAAa,CAAC,KAAiC,EAAE,MAAoB;IACnF,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC7C,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACjC,OAAO,OAAO,CAAC;AACjB,CAAC;AAJD,sCAIC"}
+{"version":3,"file":"createActions.js","sourceRoot":"","sources":["../../src/state/createActions.ts"],"names":[],"mappings":";;;AAAA,sCAAsC;AAEtC,mDAAqD;AAGrD,SAAS,aAAa,CAAC,KAAiC,EAAE,MAAoB;IAC5E,MAAM,GAAG,GAAG,gCACP,MAAM,KACT,IAAI,EAAE,EAAE,EACR,UAAU,EAAE;YACV,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS;SACnC,EACD,UAAU,EAAE,IAAA,8BAAgB,GAAE,EAC9B,KAAK,GACgB,CAAC;IACxB,OAAO,GAAG,CAAC;AACb,CAAC;AAED,SAAgB,cAAc,CAAC,GAAuB,EAAE,OAA2B;IACjF,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEzC,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;QACpC,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;QACnC,GAAG,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;KACzC;AACH,CAAC;AAPD,wCAOC;AAED,SAAgB,aAAa,CAAC,KAAiC,EAAE,MAAoB;IACnF,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC7C,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACjC,OAAO,OAAO,CAAC;AACjB,CAAC;AAJD,sCAIC"}

package/lib/types/components.d.ts

@@ -2,6 +2,7 @@ import type { ComponentType, ReactNode } from 'react';
 import type { RouteComponentProps, SwitchProps } from 'react-router';
 import type { FirstParametersOf, UnionOf } from './common';
 import type { PiralCustomErrors, PiralCustomComponentConverters } from './custom';
+import type { NavigationApi } from './navigation';
 import type { LayoutType } from './layout';
 /**
  * Mapping of available component converters.
@@ -30,7 +31,8 @@ export interface HtmlComponent<TProps> {
  * The context to be transported into the generic components.
  */
 export interface ComponentContext {
-    router: RouteComponentProps;
+    navigation: NavigationApi;
+    publicPath: string;
 }
 /**
  * Generic definition of a framework-independent component.

package/lib/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './data';
 export * from './extension';
 export * from './instance';
 export * from './layout';
+export * from './navigation';
 export * from './plugin';
 export * from './state';
 export * from './utils';

package/lib/types/index.js

@@ -10,6 +10,7 @@ tslib_1.__exportStar(require("./data"), exports);
 tslib_1.__exportStar(require("./extension"), exports);
 tslib_1.__exportStar(require("./instance"), exports);
 tslib_1.__exportStar(require("./layout"), exports);
+tslib_1.__exportStar(require("./navigation"), exports);
 tslib_1.__exportStar(require("./plugin"), exports);
 tslib_1.__exportStar(require("./state"), exports);
 tslib_1.__exportStar(require("./utils"), exports);

package/lib/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":";;;AAAA,gDAAsB;AACtB,mDAAyB;AACzB,uDAA6B;AAC7B,mDAAyB;AACzB,mDAAyB;AACzB,iDAAuB;AACvB,sDAA4B;AAC5B,qDAA2B;AAC3B,mDAAyB;AACzB,mDAAyB;AACzB,kDAAwB;AACxB,kDAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":";;;AAAA,gDAAsB;AACtB,mDAAyB;AACzB,uDAA6B;AAC7B,mDAAyB;AACzB,mDAAyB;AACzB,iDAAuB;AACvB,sDAA4B;AAC5B,qDAA2B;AAC3B,mDAAyB;AACzB,uDAA6B;AAC7B,mDAAyB;AACzB,kDAAwB;AACxB,kDAAwB"}

package/lib/types/navigation.d.ts

@@ -0,0 +1,81 @@
+import type { Disposable } from './utils';
+export declare type NavigationAction = 'POP' | 'PUSH' | 'REPLACE';
+export interface NavigationLocation {
+    /**
+     * The fully qualified URL incl. the origin and base path.
+     */
+    href: string;
+    /**
+     * The location.pathname property is a string that contains an initial "/"
+     * followed by the remainder of the URL up to the ?.
+     */
+    pathname: string;
+    /**
+     * The location.search property is a string that contains an initial "?"
+     * followed by the key=value pairs in the query string. If there are no
+     * parameters, this value may be the empty string (i.e. '').
+     */
+    search: string;
+    /**
+     * The location.hash property is a string that contains an initial "#"
+     * followed by fragment identifier of the URL. If there is no fragment
+     * identifier, this value may be the empty string (i.e. '').
+     */
+    hash: string;
+    /**
+     * The location.state property is a user-supplied State object that is
+     * associated with this location. This can be a useful place to store
+     * any information you do not want to put in the URL, e.g. session-specific
+     * data.
+     */
+    state: unknown;
+    /**
+     * The location.key property is a unique string associated with this location.
+     * On the initial location, this will be the string default. On all subsequent
+     * locations, this string will be a unique identifier.
+     */
+    key: string;
+}
+export interface NavigationListener {
+    (update: NavigationUpdate): void;
+}
+export interface NavigationBlocker {
+    (tx: NavigationTransition): void;
+}
+export interface NavigationUpdate {
+    action: NavigationAction;
+    location: NavigationLocation;
+}
+export interface NavigationTransition extends NavigationUpdate {
+    retry(): void;
+}
+export interface NavigationApi {
+    /**
+     * Pushes a new location onto the history stack.
+     */
+    push(target: string, state?: any): void;
+    /**
+     * Replaces the current location with another.
+     */
+    replace(target: string, state?: any): void;
+    /**
+     * Changes the current index in the history stack by a given delta.
+     */
+    go(n: number): void;
+    /**
+     * Prevents changes to the history stack from happening.
+     * This is useful when you want to prevent the user navigating
+     * away from the current page, for example when they have some
+     * unsaved data on the current page.
+     * @param blocker The function being called with a transition request.
+     * @returns The disposable for stopping the block.
+     */
+    block(blocker: NavigationBlocker): Disposable;
+    /**
+     * Starts listening for location changes and calls the given
+     * callback with an Update when it does.
+     * @param listener The function being called when the route changes.
+     * @returns The disposable for stopping the block.
+     */
+    listen(listener: NavigationListener): Disposable;
+}

package/lib/types/navigation.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=navigation.js.map

package/lib/types/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../src/types/navigation.ts"],"names":[],"mappings":""}

package/lib/types/state.d.ts

@@ -3,6 +3,7 @@ import type { RouteComponentProps } from 'react-router';
 import type { LoadPiletsOptions } from 'piral-base';
 import type { UseBoundStore } from 'zustand';
 import type { Dict, Without } from './common';
+import type { NavigationApi } from './navigation';
 import type { SharedDataItem, DataStoreTarget } from './data';
 import type { PiralCustomActions, PiralCustomState, PiralCustomRegistryState, PiralCustomComponentsState } from './custom';
 import type { EventEmitter, Pilet, BaseComponentProps, PageComponentProps, ExtensionComponentProps, PiletsBag, PiralPageMeta, PiletEntry } from './api';
@@ -10,11 +11,6 @@ import type { ComponentConverters, LoadingIndicatorProps, ErrorInfoProps, Router
 export interface StateDispatcher<TState> {
     (state: TState): Partial<TState>;
 }
-declare module './components' {
-    interface ComponentContext {
-        readState: PiralActions['readState'];
-    }
-}
 export declare type WrappedComponent<TProps> = ComponentType<PropsWithChildren<Without<TProps, keyof BaseComponentProps>>>;
 /**
  * The base type for pilet component registration in the global state context.
@@ -313,12 +309,6 @@ export interface PiralActions extends PiralCustomActions {
      * @returns The desired part.
      */
     readState<S>(select: (state: GlobalState) => S): S;
-    /**
-     * Performs a navigation.
-     * @param path The path to navigate to.
-     * @param state The optional state for the navigation.
-     */
-    navigate(path: string, state?: any): void;
 }
 /**
  * The Piral app instance context.
@@ -337,6 +327,10 @@ export interface GlobalStateContext extends PiralActions, EventEmitter {
      * The available component converters.
      */
     converters: ComponentConverters<any>;
+    /**
+     * The navigation manager for the whole instance.
+     */
+    navigation: NavigationApi;
     /**
      * The initial options.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-core",
-  "version": "0.15.0-alpha.4409",
+  "version": "0.15.0-beta.4466",
   "description": "The core library for creating a Piral instance.",
   "keywords": [
     "portal",
@@ -16,8 +16,7 @@
       "react": "react",
       "react-dom": "react-dom",
       "react-router": "react-router",
-      "react-router-dom": "react-router-dom",
-      "history": "history"
+      "react-router-dom": "react-router-dom"
     }
   },
   "author": "smapiot",
@@ -71,8 +70,8 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "piral-base": "0.15.0-alpha.4409",
-    "piral-debug-utils": "0.15.0-alpha.4409",
+    "piral-base": "0.15.0-beta.4466",
+    "piral-debug-utils": "0.15.0-beta.4466",
     "zustand": "^3.0.0"
   },
   "peerDependencies": {
@@ -82,7 +81,6 @@
     "react-router-dom": "5.x"
   },
   "devDependencies": {
-    "@types/history": "^4.7.8",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-router": "^5.1.8",
@@ -97,8 +95,7 @@
     "react-dom",
     "react-router",
     "react-router-dom",
-    "history",
     "tslib"
   ],
-  "gitHead": "f5a0a4bb26fa2074af90776fa4a8b85a3eb8369a"
+  "gitHead": "35d20c9cd14ad55ef8148f13a4fbf70b0e730df4"
 }

package/src/actions/app.ts

@@ -24,10 +24,6 @@ export function initialize(ctx: GlobalStateContext, loading: boolean, error: Err
   }));
 }
 
-export function navigate(ctx: GlobalStateContext, path: string, state?: any) {
-  ctx.emit('navigate', { path, state });
-}
-
 export function addPilet(ctx: GlobalStateContext, meta: PiletEntry): Promise<void> {
   return ctx.options
     .loadPilet(meta)

package/src/components/ExtensionSlot.test.tsx

@@ -15,6 +15,9 @@ jest.mock('../hooks/globalState', () => ({
         },
       },
     },
+    readState() {
+      return '/';
+    },
     destroyPortal: jest.fn(),
   }),
 }));

package/src/components/wrapComponent.tsx

@@ -3,7 +3,6 @@ import { PortalRenderer } from './PortalRenderer';
 import { ForeignComponentContainer } from './ForeignComponentContainer';
 import { useGlobalStateContext } from '../hooks';
 import { convertComponent, none } from '../utils';
-import { useRouterContext } from '../../app.codegen';
 import type { AnyComponent, ComponentConverters, ForeignComponent, PiletApi, BaseComponentProps } from '../types';
 
 // this is an arbitrary start number to have 6 digits
@@ -31,10 +30,10 @@ function wrapForeignComponent<T>(
   Wrapper: React.FC<T>,
 ) {
   return React.memo((props: T) => {
-    const { state, readState, destroyPortal } = useGlobalStateContext();
-    const router = useRouterContext();
+    const { readState, destroyPortal, navigation } = useGlobalStateContext();
+    const publicPath = readState(s => s.app.publicPath);
     const id = React.useMemo(() => (portalIdBase++).toString(26), none);
-    const context = React.useMemo(() => ({ router, state, readState }), [router, state]);
+    const context = React.useMemo(() => ({ publicPath, navigation }), []);
     const innerProps = React.useMemo(() => ({ ...props, ...captured }), [props]);
 
     React.useEffect(() => () => destroyPortal(id), none);

package/src/debugger.ts

@@ -42,7 +42,7 @@ export function integrateDebugger(
       return context.readState((s) => s);
     },
     navigate(path, state) {
-      return context.navigate(path, state);
+      return context.navigation.push(path, state);
     },
     getPilets() {
       return context.readState((s) => s.modules);

package/src/state/createActions.test.ts

@@ -14,7 +14,7 @@ describe('Create Actions Module', () => {
   it('createActions works with all actions', () => {
     const events = createListener(undefined);
     const actions = createActions('abc' as any, events);
-    expect(Object.keys(actions)).toEqual(['on', 'off', 'emit', 'apis', 'converters', 'state', 'a', 'b']);
+    expect(Object.keys(actions)).toEqual(['on', 'off', 'emit', 'apis', 'converters', 'navigation', 'state', 'a', 'b']);
   });
 
   it('createActions binds against given context', () => {

package/src/state/createActions.ts

@@ -1,5 +1,6 @@
 import * as actions from '../actions';
 import { UseBoundStore } from 'zustand';
+import { createNavigation } from '../../app.codegen';
 import { EventEmitter, GlobalState, GlobalStateContext, PiralDefineActions } from '../types';
 
 function createContext(state: UseBoundStore<GlobalState>, events: EventEmitter) {
@@ -9,6 +10,7 @@ function createContext(state: UseBoundStore<GlobalState>, events: EventEmitter)
     converters: {
       html: ({ component }) => component,
     },
+    navigation: createNavigation(),
     state,
   } as GlobalStateContext;
   return ctx;

package/src/state/withApi.test.tsx

@@ -6,6 +6,9 @@ import { StateContext } from '../state';
 
 function createMockContainer() {
   const state = create(() => ({
+    app: {
+      publicPath: '/',
+    },
     components: {
       ErrorInfo: StubErrorInfo,
     },

package/src/types/components.ts

@@ -2,6 +2,7 @@ import type { ComponentType, ReactNode } from 'react';
 import type { RouteComponentProps, SwitchProps } from 'react-router';
 import type { FirstParametersOf, UnionOf } from './common';
 import type { PiralCustomErrors, PiralCustomComponentConverters } from './custom';
+import type { NavigationApi } from './navigation';
 import type { LayoutType } from './layout';
 
 /**
@@ -33,7 +34,8 @@ export interface HtmlComponent<TProps> {
  * The context to be transported into the generic components.
  */
 export interface ComponentContext {
-  router: RouteComponentProps;
+  navigation: NavigationApi;
+  publicPath: string;
 }
 
 /**

package/src/types/index.ts

@@ -7,6 +7,7 @@ export * from './data';
 export * from './extension';
 export * from './instance';
 export * from './layout';
+export * from './navigation';
 export * from './plugin';
 export * from './state';
 export * from './utils';

package/src/types/navigation.ts

@@ -0,0 +1,88 @@
+import type { Disposable } from './utils';
+
+export type NavigationAction = 'POP' | 'PUSH' | 'REPLACE';
+
+export interface NavigationLocation {
+  /**
+   * The fully qualified URL incl. the origin and base path.
+   */
+  href: string;
+  /**
+   * The location.pathname property is a string that contains an initial "/"
+   * followed by the remainder of the URL up to the ?.
+   */
+  pathname: string;
+  /**
+   * The location.search property is a string that contains an initial "?"
+   * followed by the key=value pairs in the query string. If there are no
+   * parameters, this value may be the empty string (i.e. '').
+   */
+  search: string;
+  /**
+   * The location.hash property is a string that contains an initial "#"
+   * followed by fragment identifier of the URL. If there is no fragment
+   * identifier, this value may be the empty string (i.e. '').
+   */
+  hash: string;
+  /**
+   * The location.state property is a user-supplied State object that is
+   * associated with this location. This can be a useful place to store
+   * any information you do not want to put in the URL, e.g. session-specific
+   * data.
+   */
+  state: unknown;
+  /**
+   * The location.key property is a unique string associated with this location.
+   * On the initial location, this will be the string default. On all subsequent
+   * locations, this string will be a unique identifier.
+   */
+  key: string;
+}
+
+export interface NavigationListener {
+  (update: NavigationUpdate): void;
+}
+
+export interface NavigationBlocker {
+  (tx: NavigationTransition): void;
+}
+
+export interface NavigationUpdate {
+  action: NavigationAction;
+  location: NavigationLocation;
+}
+
+export interface NavigationTransition extends NavigationUpdate {
+  retry(): void;
+}
+
+export interface NavigationApi {
+  /**
+   * Pushes a new location onto the history stack.
+   */
+  push(target: string, state?: any): void;
+  /**
+   * Replaces the current location with another.
+   */
+  replace(target: string, state?: any): void;
+  /**
+   * Changes the current index in the history stack by a given delta.
+   */
+  go(n: number): void;
+  /**
+   * Prevents changes to the history stack from happening.
+   * This is useful when you want to prevent the user navigating
+   * away from the current page, for example when they have some
+   * unsaved data on the current page.
+   * @param blocker The function being called with a transition request.
+   * @returns The disposable for stopping the block.
+   */
+  block(blocker: NavigationBlocker): Disposable;
+  /**
+   * Starts listening for location changes and calls the given
+   * callback with an Update when it does.
+   * @param listener The function being called when the route changes.
+   * @returns The disposable for stopping the block.
+   */
+  listen(listener: NavigationListener): Disposable;
+}

package/src/types/state.ts

@@ -1,8 +1,9 @@
 import type { ComponentType, ReactPortal, PropsWithChildren } from 'react';
 import type { RouteComponentProps } from 'react-router';
 import type { LoadPiletsOptions } from 'piral-base';
-import type { StoreApi, UseBoundStore } from 'zustand';
+import type { UseBoundStore } from 'zustand';
 import type { Dict, Without } from './common';
+import type { NavigationApi } from './navigation';
 import type { SharedDataItem, DataStoreTarget } from './data';
 import type {
   PiralCustomActions,
@@ -34,12 +35,6 @@ export interface StateDispatcher<TState> {
   (state: TState): Partial<TState>;
 }
 
-declare module './components' {
-  interface ComponentContext {
-    readState: PiralActions['readState'];
-  }
-}
-
 export type WrappedComponent<TProps> = ComponentType<PropsWithChildren<Without<TProps, keyof BaseComponentProps>>>;
 
 /**
@@ -347,12 +342,6 @@ export interface PiralActions extends PiralCustomActions {
    * @returns The desired part.
    */
   readState<S>(select: (state: GlobalState) => S): S;
-  /**
-   * Performs a navigation.
-   * @param path The path to navigate to.
-   * @param state The optional state for the navigation.
-   */
-  navigate(path: string, state?: any): void;
 }
 
 /**
@@ -372,6 +361,10 @@ export interface GlobalStateContext extends PiralActions, EventEmitter {
    * The available component converters.
    */
   converters: ComponentConverters<any>;
+  /**
+   * The navigation manager for the whole instance.
+   */
+  navigation: NavigationApi;
   /**
    * The initial options.
    */