piral-core 0.15.0-beta.4633 → 0.15.0-beta.4672

package/lib/defaults/navigator_v5.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNavigation = exports.createRedirect = exports.useCurrentNavigation = exports.useRouterContext = void 0;
+const React = require("react");
+const react_router_1 = require("react-router");
+let _nav;
+const _noop = () => { };
+function useRouterContext() {
+    return React.useContext(react_router_1.__RouterContext);
+}
+exports.useRouterContext = useRouterContext;
+function useCurrentNavigation() {
+    const ctx = useRouterContext();
+    const location = (0, react_router_1.useLocation)();
+    React.useEffect(() => {
+        if (_nav) {
+            window.dispatchEvent(new CustomEvent('piral-navigate', {
+                detail: {
+                    location,
+                },
+            }));
+        }
+    }, [location]);
+    React.useEffect(() => {
+        _nav = ctx.history;
+        return () => {
+            _nav = undefined;
+        };
+    }, []);
+}
+exports.useCurrentNavigation = useCurrentNavigation;
+function createRedirect(to) {
+    return () => React.createElement(react_router_1.Redirect, { to: to });
+}
+exports.createRedirect = createRedirect;
+function createNavigation() {
+    const enhance = (location, action) => ({
+        action,
+        location: Object.assign({ get href() {
+                return _nav.createHref(location);
+            } }, location),
+    });
+    return {
+        get path() {
+            if (_nav) {
+                return _nav.location.pathname;
+            }
+            return location.pathname;
+        },
+        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) {
+            const handler = (e) => listener(enhance(e.detail, _nav.action));
+            window.addEventListener('piral-navigate', handler);
+            return () => {
+                window.removeEventListener('piral-navigate', handler);
+            };
+        },
+        router: {
+            history: _nav,
+        },
+    };
+}
+exports.createNavigation = createNavigation;
+//# sourceMappingURL=navigator_v5.js.map

package/lib/defaults/navigator_v5.js.map

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

package/lib/defaults/navigator_v6.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { NavigationApi } from '../types';
+export declare function useRouterContext(): unknown;
+export declare function useCurrentNavigation(): void;
+export declare function createRedirect(to: string): () => JSX.Element;
+export declare function createNavigation(): NavigationApi;

package/lib/defaults/navigator_v6.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNavigation = exports.createRedirect = exports.useCurrentNavigation = exports.useRouterContext = void 0;
+const React = require("react");
+//@ts-ignore
+const react_router_1 = require("react-router");
+let _nav;
+const _noop = () => { };
+function useRouterContext() {
+    return React.useContext(react_router_1.UNSAFE_NavigationContext);
+}
+exports.useRouterContext = useRouterContext;
+function useCurrentNavigation() {
+    const ctx = useRouterContext();
+    const location = (0, react_router_1.useLocation)();
+    React.useEffect(() => {
+        if (_nav) {
+            window.dispatchEvent(new CustomEvent('piral-navigate', {
+                detail: {
+                    location,
+                },
+            }));
+        }
+    }, [location]);
+    React.useEffect(() => {
+        _nav = ctx.navigator;
+        return () => {
+            _nav = undefined;
+        };
+    }, []);
+}
+exports.useCurrentNavigation = useCurrentNavigation;
+function createRedirect(to) {
+    return () => React.createElement(react_router_1.Navigate, { to: to });
+}
+exports.createRedirect = createRedirect;
+function createNavigation() {
+    const enhance = (info) => (Object.assign(Object.assign({}, info), { location: Object.assign({ get href() {
+                return _nav.createHref(info.location);
+            } }, info.location) }));
+    return {
+        get path() {
+            if (_nav) {
+                return _nav.location.pathname;
+            }
+            return location.pathname;
+        },
+        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) {
+            const handler = (e) => listener(enhance(e.detail));
+            window.addEventListener('piral-navigate', handler);
+            return () => {
+                window.removeEventListener('piral-navigate', handler);
+            };
+        },
+        router: _nav,
+    };
+}
+exports.createNavigation = createNavigation;
+//# sourceMappingURL=navigator_v6.js.map

package/lib/defaults/navigator_v6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigator_v6.js","sourceRoot":"","sources":["../../src/defaults/navigator_v6.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,YAAY;AACZ,+CAAgG;AAGhG,IAAI,IAAS,CAAC;AACd,MAAM,KAAK,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;AAEvB,SAAgB,gBAAgB;IAC9B,OAAO,KAAK,CAAC,UAAU,CAAC,uCAAa,CAAC,CAAC;AACzC,CAAC;AAFD,4CAEC;AAED,SAAgB,oBAAoB;IAClC,MAAM,GAAG,GAAQ,gBAAgB,EAAE,CAAC;IACpC,MAAM,QAAQ,GAAG,IAAA,0BAAW,GAAE,CAAC;IAE/B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,IAAI,EAAE;YACR,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,MAAM,EAAE;oBACN,QAAQ;iBACT;aACF,CAAC,CACH,CAAC;SACH;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,GAAG,GAAG,CAAC,SAAS,CAAC;QAErB,OAAO,GAAG,EAAE;YACV,IAAI,GAAG,SAAS,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAvBD,oDAuBC;AAED,SAAgB,cAAc,CAAC,EAAU;IACvC,OAAO,GAAG,EAAE,CAAC,oBAAC,uBAAQ,IAAC,EAAE,EAAE,EAAE,GAAI,CAAC;AACpC,CAAC;AAFD,wCAEC;AAED,SAAgB,gBAAgB;IAC9B,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,iCACrB,IAAI,KACP,QAAQ,kBACN,IAAI,IAAI;gBACN,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACxC,CAAC,IACE,IAAI,CAAC,QAAQ,KAElB,CAAC;IAEH,OAAO;QACL,IAAI,IAAI;YACN,IAAI,IAAI,EAAE;gBACR,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;aAC/B;YAED,OAAO,QAAQ,CAAC,QAAQ,CAAC;QAC3B,CAAC;QACD,IAAI,CAAC,MAAM,EAAE,KAAK;YAChB,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;aAC1B;QACH,CAAC;QACD,OAAO,CAAC,MAAM,EAAE,KAAK;YACnB,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;aAC7B;QACH,CAAC;QACD,EAAE,CAAC,CAAC;YACF,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;aACZ;QACH,CAAC;QACD,KAAK,CAAC,OAAO;YACX,IAAI,CAAC,IAAI,EAAE;gBACT,OAAO,KAAK,CAAC;aACd;YACD,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAClE,CAAC;QACD,MAAM,CAAC,QAAQ;YACb,MAAM,OAAO,GAAG,CAAC,CAAc,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;YAEhE,MAAM,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;YAEnD,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;YACxD,CAAC,CAAC;QACJ,CAAC;QACD,MAAM,EAAE,IAAI;KACb,CAAC;AACJ,CAAC;AAnDD,4CAmDC"}

package/lib/modules/element.js

@@ -4,6 +4,16 @@ exports.renderElement = void 0;
 const components_1 = require("../components");
 const utils_1 = require("../utils");
 if (typeof window !== 'undefined' && 'customElements' in window) {
+    /**
+     * This is a nice abstraction allowing anyone to actually use the extension system
+     * brought by Piral. Not all props of the extension system are actually exposed.
+     *
+     * Usage:
+     *
+     * ```
+     * <piral-extension name="my-ext-name"></piral-extension>
+     * ```
+     */
     class PiralExtension extends HTMLElement {
         constructor() {
             super(...arguments);
@@ -38,6 +48,7 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
             this.update(this.props);
         }
         connectedCallback() {
+            this.style.display = 'contents';
             if (this.isConnected) {
                 this.dispatchEvent(new CustomEvent('render-html', {
                     bubbles: true,
@@ -67,7 +78,40 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
             return ['name', 'params'];
         }
     }
-    customElements.define('piral-extension', PiralExtension);
+    customElements.define(utils_1.extensionName, PiralExtension);
+    /**
+     * This is a boundary to host elements from other frameworks - effectively vanishing
+     * at runtime.
+     *
+     * Usage:
+     *
+     * ```
+     * <piral-portal pid="host-1234"></piral-portal>
+     * ```
+     */
+    class PiralPortal extends HTMLElement {
+        connectedCallback() {
+            this.style.display = 'contents';
+        }
+    }
+    customElements.define(utils_1.portalName, PiralPortal);
+    /**
+     * This is a virtual element to aggregate rendering from other frameworks, mostly
+     * used like piral-portal, but without context-hosting capabilities. This would
+     * be used exclusively within a foreign framework, not from Piral to initiate.
+     *
+     * Usage:
+     *
+     * ```
+     * <piral-slot></piral-slot>
+     * ```
+     */
+    class PiralSlot extends HTMLElement {
+        connectedCallback() {
+            this.style.display = 'contents';
+        }
+    }
+    customElements.define(utils_1.slotName, PiralSlot);
 }
 function renderElement(context, element, props) {
     if (typeof window !== 'undefined') {

package/lib/modules/element.js.map

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

package/lib/types/navigation.d.ts

@@ -34,7 +34,7 @@ export interface NavigationLocation {
      * On the initial location, this will be the string default. On all subsequent
      * locations, this string will be a unique identifier.
      */
-    key: string;
+    key?: string;
 }
 export interface NavigationListener {
     (update: NavigationUpdate): void;
@@ -47,7 +47,7 @@ export interface NavigationUpdate {
     location: NavigationLocation;
 }
 export interface NavigationTransition extends NavigationUpdate {
-    retry(): void;
+    retry?(): void;
 }
 export interface NavigationApi {
     /**
@@ -78,6 +78,10 @@ export interface NavigationApi {
      * @returns The disposable for stopping the block.
      */
     listen(listener: NavigationListener): Disposable;
+    /**
+     * Gets the current path.
+     */
+    path: string;
     /**
      * The original router behind the navigation.
      */

package/lib/utils/extension.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ExtensionComponentProps, WrappedComponent } from '../types';
+import type { ExtensionComponentProps, WrappedComponent } from '../types';
 /**
  * Transforms the given component to an extension component.
  * @param Component The component to transform.

package/lib/utils/extension.js

@@ -13,7 +13,7 @@ const SlotCarrier = ({ nodes }) => {
         return () => removeAll(nodes);
     }, [nodes]);
     if (nodes.length) {
-        return React.createElement("slot", { ref: host });
+        return React.createElement("piral-slot", { ref: host });
     }
     return null;
 };

package/lib/utils/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../../src/utils/extension.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAG/B,SAAS,SAAS,CAAC,KAAuB;IACxC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AACzC,CAAC;AAMD,MAAM,WAAW,GAA+B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,EAAmB,CAAC;IAE7C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACnB,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC;QAC/B,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAI,KAAK,CAAC,MAAM,EAAE;QAChB,OAAO,8BAAM,GAAG,EAAE,IAAI,GAAI,CAAC;KAC5B;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF;;;;GAIG;AACH,SAAgB,WAAW,CAAI,SAAiC;IAC9D,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,KAAK,CAAC,MAAM,EAAI,CAAC;AACpD,CAAC;AAFD,kCAEC;AAED;;;;;;GAMG;AACH,SAAgB,eAAe,CAAC,UAAiC;IAC/D,MAAM,KAAK,GAAqB,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACjF,SAAS,CAAC,KAAK,CAAC,CAAC;IACjB,OAAO,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;AACvC,CAAC;AAJD,0CAIC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../../src/utils/extension.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAI/B,SAAS,SAAS,CAAC,KAAuB;IACxC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AACzC,CAAC;AAMD,MAAM,WAAW,GAA+B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,EAAmB,CAAC;IAE7C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACnB,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC;QAC/B,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAI,KAAK,CAAC,MAAM,EAAE;QAChB,OAAO,oCAAY,GAAG,EAAE,IAAI,GAAI,CAAC;KAClC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF;;;;GAIG;AACH,SAAgB,WAAW,CAAI,SAAiC;IAC9D,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,KAAK,CAAC,MAAM,EAAI,CAAC;AACpD,CAAC;AAFD,kCAEC;AAED;;;;;;GAMG;AACH,SAAgB,eAAe,CAAC,UAAiC;IAC/D,MAAM,KAAK,GAAqB,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACjF,SAAS,CAAC,KAAK,CAAC,CAAC;IACjB,OAAO,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;AACvC,CAAC;AAJD,0CAIC"}

package/lib/utils/foreign.d.ts

@@ -1,5 +1,8 @@
 import { ComponentType, ReactPortal } from 'react';
 import { GlobalStateContext, ForeignComponent } from '../types';
+export declare const extensionName = "piral-extension";
+export declare const portalName = "piral-portal";
+export declare const slotName = "piral-slot";
 export declare function attachDomPortal<TProps>(id: string, context: GlobalStateContext, element: HTMLElement | ShadowRoot, component: ComponentType<TProps>, props: TProps): [string, ReactPortal];
 export declare function changeDomPortal<TProps>(id: string, current: ReactPortal, context: GlobalStateContext, element: HTMLElement | ShadowRoot, component: ComponentType<TProps>, props: TProps): [string, ReactPortal];
 export declare function convertComponent<T extends {

package/lib/utils/foreign.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderInDom = exports.convertComponent = exports.changeDomPortal = exports.attachDomPortal = void 0;
+exports.renderInDom = exports.convertComponent = exports.changeDomPortal = exports.attachDomPortal = exports.slotName = exports.portalName = exports.extensionName = void 0;
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
+exports.extensionName = 'piral-extension';
+exports.portalName = 'piral-portal';
+exports.slotName = 'piral-slot';
 function attachDomPortal(id, context, element, component, props) {
     const portal = (0, react_dom_1.createPortal)((0, react_1.createElement)(component, props), element);
     context.showPortal(id, portal);
@@ -23,10 +26,10 @@ function convertComponent(converter, component) {
 }
 exports.convertComponent = convertComponent;
 function renderInDom(context, element, component, props) {
-    const portalId = 'data-portal-id';
+    const portalId = 'pid';
     let parent = element;
     while (parent) {
-        if (parent instanceof Element && parent.hasAttribute(portalId)) {
+        if (parent instanceof Element && parent.localName === exports.portalName && parent.hasAttribute(portalId)) {
             const id = parent.getAttribute(portalId);
             return attachDomPortal(id, context, element, component, props);
         }

package/lib/utils/foreign.js.map

@@ -1 +1 @@
-{"version":3,"file":"foreign.js","sourceRoot":"","sources":["../../src/utils/foreign.ts"],"names":[],"mappings":";;;AAAA,iCAAkE;AAClE,yCAAyC;AAGzC,SAAgB,eAAe,CAC7B,EAAU,EACV,OAA2B,EAC3B,OAAiC,EACjC,SAAgC,EAChC,KAAa;IAEb,MAAM,MAAM,GAAG,IAAA,wBAAY,EAAC,IAAA,qBAAa,EAAC,SAAS,EAAE,KAAK,CAAC,EAAE,OAAsB,CAAC,CAAC;IACrF,OAAO,CAAC,UAAU,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;AACtB,CAAC;AAVD,0CAUC;AAED,SAAgB,eAAe,CAC7B,EAAU,EACV,OAAoB,EACpB,OAA2B,EAC3B,OAAiC,EACjC,SAAgC,EAChC,KAAa;IAEb,MAAM,IAAI,GAAG,IAAA,wBAAY,EAAC,IAAA,qBAAa,EAAC,SAAS,EAAE,KAAK,CAAC,EAAE,OAAsB,CAAC,CAAC;IACnF,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;AACpB,CAAC;AAXD,0CAWC;AAED,SAAgB,gBAAgB,CAC9B,SAAgD,EAChD,SAAY;IAEZ,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE;QACnC,MAAM,IAAI,KAAK,CAAC,uCAAuC,SAAS,CAAC,IAAI,eAAe,CAAC,CAAC;KACvF;IAED,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;AAC9B,CAAC;AATD,4CASC;AAED,SAAgB,WAAW,CACzB,OAA2B,EAC3B,OAAiC,EACjC,SAAgC,EAChC,KAAa;IAEb,MAAM,QAAQ,GAAG,gBAAgB,CAAC;IAClC,IAAI,MAAM,GAAS,OAAO,CAAC;IAE3B,OAAO,MAAM,EAAE;QACb,IAAI,MAAM,YAAY,OAAO,IAAI,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE;YAC9D,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACzC,OAAO,eAAe,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;SAChE;QAED,MAAM,GAAG,MAAM,CAAC,UAAU,IAAK,MAAqB,CAAC,IAAI,CAAC;KAC3D;IAED,OAAO,eAAe,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;AACrE,CAAC;AAnBD,kCAmBC"}
+{"version":3,"file":"foreign.js","sourceRoot":"","sources":["../../src/utils/foreign.ts"],"names":[],"mappings":";;;AAAA,iCAAkE;AAClE,yCAAyC;AAG5B,QAAA,aAAa,GAAG,iBAAiB,CAAC;AAClC,QAAA,UAAU,GAAG,cAAc,CAAC;AAC5B,QAAA,QAAQ,GAAG,YAAY,CAAC;AAErC,SAAgB,eAAe,CAC7B,EAAU,EACV,OAA2B,EAC3B,OAAiC,EACjC,SAAgC,EAChC,KAAa;IAEb,MAAM,MAAM,GAAG,IAAA,wBAAY,EAAC,IAAA,qBAAa,EAAC,SAAS,EAAE,KAAK,CAAC,EAAE,OAAsB,CAAC,CAAC;IACrF,OAAO,CAAC,UAAU,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;AACtB,CAAC;AAVD,0CAUC;AAED,SAAgB,eAAe,CAC7B,EAAU,EACV,OAAoB,EACpB,OAA2B,EAC3B,OAAiC,EACjC,SAAgC,EAChC,KAAa;IAEb,MAAM,IAAI,GAAG,IAAA,wBAAY,EAAC,IAAA,qBAAa,EAAC,SAAS,EAAE,KAAK,CAAC,EAAE,OAAsB,CAAC,CAAC;IACnF,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;AACpB,CAAC;AAXD,0CAWC;AAED,SAAgB,gBAAgB,CAC9B,SAAgD,EAChD,SAAY;IAEZ,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE;QACnC,MAAM,IAAI,KAAK,CAAC,uCAAuC,SAAS,CAAC,IAAI,eAAe,CAAC,CAAC;KACvF;IAED,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;AAC9B,CAAC;AATD,4CASC;AAED,SAAgB,WAAW,CACzB,OAA2B,EAC3B,OAAiC,EACjC,SAAgC,EAChC,KAAa;IAEb,MAAM,QAAQ,GAAG,KAAK,CAAC;IACvB,IAAI,MAAM,GAAS,OAAO,CAAC;IAE3B,OAAO,MAAM,EAAE;QACb,IAAI,MAAM,YAAY,OAAO,IAAI,MAAM,CAAC,SAAS,KAAK,kBAAU,IAAI,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE;YACjG,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACzC,OAAO,eAAe,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;SAChE;QAED,MAAM,GAAG,MAAM,CAAC,UAAU,IAAK,MAAqB,CAAC,IAAI,CAAC;KAC3D;IAED,OAAO,eAAe,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;AACrE,CAAC;AAnBD,kCAmBC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-core",
-  "version": "0.15.0-beta.4633",
+  "version": "0.15.0-beta.4672",
   "description": "The core library for creating a Piral instance.",
   "keywords": [
     "portal",
@@ -70,8 +70,9 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "piral-base": "0.15.0-beta.4633",
-    "piral-debug-utils": "0.15.0-beta.4633",
+    "enhanced-resolve": "^5.10.0",
+    "piral-base": "0.15.0-beta.4672",
+    "piral-debug-utils": "0.15.0-beta.4672",
     "zustand": "^3.0.0"
   },
   "peerDependencies": {
@@ -97,5 +98,5 @@
     "react-router-dom",
     "tslib"
   ],
-  "gitHead": "96b950f26e9673595f68518103508dfc76001761"
+  "gitHead": "cd1026b70c90290fa5ba3f9b86c038eb852595be"
 }

package/src/components/ForeignComponentContainer.test.tsx

@@ -108,7 +108,7 @@ describe('ForeignComponentContainer component', () => {
     );
     await act(resolveAfter);
     expect(mount).toHaveBeenCalled();
-    const node = document.querySelector('[data-portal-id=foo]');
+    const node = document.querySelector('piral-portal[pid=foo]');
     expect(renderHtmlExtension).not.toHaveBeenCalled();
     node?.dispatchEvent(new CustomEvent('render-html', { detail: {} }));
     await act(resolveAfter);

package/src/components/ForeignComponentContainer.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { isfunc } from 'piral-base';
+import type {} from 'piral-debug-utils';
 import type { ForeignComponent, BaseComponentProps, ComponentContext } from '../types';
 
 interface ForeignComponentContainerProps<T> {
@@ -64,6 +65,6 @@ export class ForeignComponentContainer<T> extends React.Component<ForeignCompone
 
   render() {
     const { $portalId } = this.props;
-    return <div data-portal-id={$portalId} ref={this.setNode} />;
+    return <piral-portal pid={$portalId} ref={this.setNode} />;
   }
 }

package/src/defaults/navigator_v5.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import type { History, Location, Action } from 'history';
+import { __RouterContext as RouterContext, Redirect, useLocation } from 'react-router';
+import { NavigationApi } from '../types';
+
+let _nav: History;
+const _noop = () => {};
+
+export function useRouterContext() {
+  return React.useContext(RouterContext);
+}
+
+export function useCurrentNavigation() {
+  const ctx = useRouterContext();
+  const location = useLocation();
+
+  React.useEffect(() => {
+    if (_nav) {
+      window.dispatchEvent(
+        new CustomEvent('piral-navigate', {
+          detail: {
+            location,
+          },
+        }),
+      );
+    }
+  }, [location]);
+
+  React.useEffect(() => {
+    _nav = ctx.history;
+
+    return () => {
+      _nav = undefined;
+    };
+  }, []);
+}
+
+export function createRedirect(to: string) {
+  return () => <Redirect to={to} />;
+}
+
+export function createNavigation(): NavigationApi {
+  const enhance = (location: Location, action: Action) => ({
+    action,
+    location: {
+      get href() {
+        return _nav.createHref(location);
+      },
+      ...location,
+    },
+  });
+
+  return {
+    get path() {
+      if (_nav) {
+        return _nav.location.pathname;
+      }
+
+      return location.pathname;
+    },
+    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) {
+      const handler = (e: CustomEvent) => listener(enhance(e.detail, _nav.action));
+
+      window.addEventListener('piral-navigate', handler);
+
+      return () => {
+        window.removeEventListener('piral-navigate', handler);
+      };
+    },
+    router: {
+      history: _nav,
+    },
+  };
+}

package/src/defaults/navigator_v6.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+//@ts-ignore
+import { UNSAFE_NavigationContext as RouterContext, Navigate, useLocation } from 'react-router';
+import { NavigationApi } from '../types';
+
+let _nav: any;
+const _noop = () => {};
+
+export function useRouterContext() {
+  return React.useContext(RouterContext);
+}
+
+export function useCurrentNavigation() {
+  const ctx: any = useRouterContext();
+  const location = useLocation();
+
+  React.useEffect(() => {
+    if (_nav) {
+      window.dispatchEvent(
+        new CustomEvent('piral-navigate', {
+          detail: {
+            location,
+          },
+        }),
+      );
+    }
+  }, [location]);
+
+  React.useEffect(() => {
+    _nav = ctx.navigator;
+
+    return () => {
+      _nav = undefined;
+    };
+  }, []);
+}
+
+export function createRedirect(to: string) {
+  return () => <Navigate to={to} />;
+}
+
+export function createNavigation(): NavigationApi {
+  const enhance = (info) => ({
+    ...info,
+    location: {
+      get href() {
+        return _nav.createHref(info.location);
+      },
+      ...info.location,
+    },
+  });
+
+  return {
+    get path() {
+      if (_nav) {
+        return _nav.location.pathname;
+      }
+
+      return location.pathname;
+    },
+    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) {
+      const handler = (e: CustomEvent) => listener(enhance(e.detail));
+
+      window.addEventListener('piral-navigate', handler);
+
+      return () => {
+        window.removeEventListener('piral-navigate', handler);
+      };
+    },
+    router: _nav,
+  };
+}

package/src/modules/element.test.ts

@@ -3,16 +3,6 @@ import { createListener } from 'piral-base';
 import { createActions } from '../state';
 import { renderElement } from './element';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "piral-extension": HTMLElement & {
-      params: any;
-      name: string;
-      empty: any;
-    };
-  }
-}
-
 function createMockContext(): [any, any] {
   const state: any = create(() => ({
     portals: {},