piral-debug-utils 0.14.14-beta.3753 → 0.14.14-beta.3765

package/esm/DebugRouteSwitch.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export declare function freezeRouteRefresh(): () => void;
+export interface DebugRouteSwitch {
+    NotFound: React.ComponentType;
+    paths: Array<{
+        path: string;
+        Component: React.ComponentType;
+    }>;
+}
+export declare const DebugRouteSwitch: React.FC<DebugRouteSwitch>;

package/esm/DebugRouteSwitch.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Switch, Route } from 'react-router';
+const debugRouteCache = {
+    active: 0,
+    paths: [],
+    refresh: undefined,
+};
+export function freezeRouteRefresh() {
+    debugRouteCache.active++;
+    return () => {
+        var _a;
+        debugRouteCache.active--;
+        if (!debugRouteCache.active) {
+            (_a = debugRouteCache.refresh) === null || _a === void 0 ? void 0 : _a.call(debugRouteCache, (s) => s + 1);
+        }
+    };
+}
+export const DebugRouteSwitch = ({ paths, NotFound }) => {
+    const [_, triggerChange] = React.useState(0);
+    React.useEffect(() => {
+        debugRouteCache.refresh = triggerChange;
+        return () => {
+            debugRouteCache.refresh = undefined;
+        };
+    }, []);
+    if (!debugRouteCache.active) {
+        debugRouteCache.paths = paths;
+    }
+    return (React.createElement(Switch, null,
+        debugRouteCache.paths.map(({ path, Component }) => (React.createElement(Route, { exact: true, key: path, path: path, component: Component }))),
+        React.createElement(Route, { component: NotFound })));
+};
+//# sourceMappingURL=DebugRouteSwitch.js.map

package/esm/DebugRouteSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugRouteSwitch.js","sourceRoot":"","sources":["../src/DebugRouteSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,eAAe,GAAG;IACtB,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,EAAE;IACT,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,UAAU,kBAAkB;IAChC,eAAe,CAAC,MAAM,EAAE,CAAC;IAEzB,OAAO,GAAG,EAAE;;QACV,eAAe,CAAC,MAAM,EAAE,CAAC;QAEzB,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;YAC3B,MAAA,eAAe,CAAC,OAAO,+CAAvB,eAAe,EAAW,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;SACjD;IACH,CAAC,CAAC;AACJ,CAAC;AAUD,MAAM,CAAC,MAAM,gBAAgB,GAA+B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClF,MAAM,CAAC,CAAC,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE7C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,OAAO,GAAG,aAAa,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;QACtC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;QAC3B,eAAe,CAAC,KAAK,GAAG,KAAK,CAAC;KAC/B;IAED,OAAO,CACL,oBAAC,MAAM;QACJ,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAClD,oBAAC,KAAK,IAAC,KAAK,QAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,CAC7D,CAAC;QACF,oBAAC,KAAK,IAAC,SAAS,EAAE,QAAQ,GAAI,CACvB,CACV,CAAC;AACJ,CAAC,CAAC"}

package/esm/emulator.d.ts

@@ -1,3 +1,3 @@
 import { PiletRequester } from 'piral-base';
 import { EmulatorConnectorOptions } from './types';
-export declare function withEmulatorPilets(requestPilets: PiletRequester, options: EmulatorConnectorOptions): PiletRequester;
+export declare function installPiletsEmulator(requestPilets: PiletRequester, options: EmulatorConnectorOptions): void;

package/esm/emulator.js

@@ -1,57 +1,77 @@
 import { isfunc, setupPilet } from 'piral-base';
-export function withEmulatorPilets(requestPilets, options) {
-    const { loadPilet, createApi, injectPilet, piletApiFallback = '/$pilet-api' } = options;
+import { freezeRouteRefresh, DebugRouteSwitch } from './DebugRouteSwitch';
+export function installPiletsEmulator(requestPilets, options) {
+    const { loadPilet, createApi, injectPilet, integrate, piletApiFallback = '/$pilet-api' } = options;
     // check if pilets should be loaded
     const loadPilets = sessionStorage.getItem('dbg:load-pilets') === 'on';
     const noPilets = () => Promise.resolve([]);
     const requester = loadPilets ? requestPilets : noPilets;
-    return () => {
-        const promise = requester();
-        // the window['dbg:pilet-api'] should point to an API address used as a proxy, fall back to '/$pilet-api' if unavailable
-        const piletApi = window['dbg:pilet-api'] || piletApiFallback;
-        // either take a full URI or make it an absolute path relative to the current origin
-        const initialTarget = /^https?:/.test(piletApi)
-            ? piletApi
-            : `${location.origin}${piletApi[0] === '/' ? '' : '/'}${piletApi}`;
-        const updateTarget = initialTarget.replace('http', 'ws');
-        const ws = new WebSocket(updateTarget);
-        const appendix = fetch(initialTarget)
-            .then((res) => res.json())
-            .then((item) => (Array.isArray(item) ? item : [item]));
-        ws.onmessage = ({ data }) => {
-            const hardRefresh = sessionStorage.getItem('dbg:hard-refresh') === 'on';
-            if (!hardRefresh) {
-                // standard setting is to just perform an inject
-                const meta = JSON.parse(data);
-                // tear down pilet
-                injectPilet({ name: meta.name });
-                // load and evaluate pilet
-                loadPilet(meta).then((pilet) => {
-                    try {
-                        if (isfunc(injectPilet)) {
-                            injectPilet(pilet);
-                        }
-                        setupPilet(pilet, createApi);
-                    }
-                    catch (error) {
-                        console.error(error);
-                    }
-                });
-            }
-            else {
-                location.reload();
-            }
-        };
-        return promise
-            .catch((err) => {
-            console.error(`Requesting the pilets failed. We'll continue loading without pilets (DEBUG only).`, err);
-            return [];
-        })
-            .then((pilets) => appendix.then((debugPilets) => {
-            const debugPiletNames = debugPilets.map((m) => m.name);
-            const feedPilets = pilets.filter((m) => !debugPiletNames.includes(m.name));
-            return [...feedPilets, ...debugPilets];
-        }));
-    };
+    integrate({
+        components: {
+            RouteSwitch: DebugRouteSwitch,
+        },
+        requester() {
+            const promise = requester();
+            // the window['dbg:pilet-api'] should point to an API address used as a proxy, fall back to '/$pilet-api' if unavailable
+            const piletApi = window['dbg:pilet-api'] || piletApiFallback;
+            // either take a full URI or make it an absolute path relative to the current origin
+            const initialTarget = /^https?:/.test(piletApi)
+                ? piletApi
+                : `${location.origin}${piletApi[0] === '/' ? '' : '/'}${piletApi}`;
+            const updateTarget = initialTarget.replace('http', 'ws');
+            const ws = new WebSocket(updateTarget);
+            const timeoutCache = {};
+            const timeout = 150;
+            const appendix = fetch(initialTarget)
+                .then((res) => res.json())
+                .then((item) => (Array.isArray(item) ? item : [item]));
+            ws.onmessage = ({ data }) => {
+                const hardRefresh = sessionStorage.getItem('dbg:hard-refresh') === 'on';
+                if (!hardRefresh) {
+                    // standard setting is to just perform an inject
+                    const meta = JSON.parse(data);
+                    const name = meta.name;
+                    // like a debounce; only one change of the current pilet should be actively processed
+                    clearTimeout(timeoutCache[name]);
+                    // some bundlers may have fired before writing to the disk
+                    // so we give them a bit of time before actually loading the pilet
+                    timeoutCache[name] = setTimeout(() => {
+                        // we should make sure to only refresh the page / router if pilets have been loaded
+                        const unfreeze = freezeRouteRefresh();
+                        // tear down pilet
+                        injectPilet({ name });
+                        // load and evaluate pilet
+                        loadPilet(meta).then((pilet) => {
+                            try {
+                                if (isfunc(injectPilet)) {
+                                    injectPilet(pilet);
+                                }
+                                // setup actual pilet
+                                setupPilet(pilet, createApi);
+                                // disable route cache, should be zero again and lead to route refresh
+                                unfreeze();
+                            }
+                            catch (error) {
+                                console.error(error);
+                            }
+                        });
+                    }, timeout);
+                }
+                else {
+                    location.reload();
+                }
+            };
+            return promise
+                .catch((err) => {
+                console.error(`Requesting the pilets failed. We'll continue loading without pilets (DEBUG only).`, err);
+                return [];
+            })
+                .then((pilets) => appendix.then((debugPilets) => {
+                const debugPiletNames = debugPilets.map((m) => m.name);
+                const feedPilets = pilets.filter((m) => !debugPiletNames.includes(m.name));
+                return [...feedPilets, ...debugPilets];
+            }));
+        },
+    });
 }
 //# sourceMappingURL=emulator.js.map

package/esm/emulator.js.map

@@ -1 +1 @@
-{"version":3,"file":"emulator.js","sourceRoot":"","sources":["../src/emulator.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"emulator.js","sourceRoot":"","sources":["../src/emulator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAkB,UAAU,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAG1E,MAAM,UAAU,qBAAqB,CAAC,aAA6B,EAAE,OAAiC;IACpG,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,GAAG,aAAa,EAAE,GAAG,OAAO,CAAC;IACnG,mCAAmC;IACnC,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtE,MAAM,QAAQ,GAAmB,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAC3D,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC;IAExD,SAAS,CAAC;QACR,UAAU,EAAE;YACV,WAAW,EAAE,gBAAgB;SAC9B;QACD,SAAS;YACP,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;YAE5B,wHAAwH;YACxH,MAAM,QAAQ,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,gBAAgB,CAAC;YAE7D,oFAAoF;YACpF,MAAM,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAC7C,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,QAAQ,EAAE,CAAC;YACrE,MAAM,YAAY,GAAG,aAAa,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YACzD,MAAM,EAAE,GAAG,IAAI,SAAS,CAAC,YAAY,CAAC,CAAC;YACvC,MAAM,YAAY,GAAG,EAAE,CAAC;YACxB,MAAM,OAAO,GAAG,GAAG,CAAC;YAEpB,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;iBAClC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;iBACzB,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAEzD,EAAE,CAAC,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;gBAC1B,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;gBAExE,IAAI,CAAC,WAAW,EAAE;oBAChB,gDAAgD;oBAChD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;oBAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;oBAEvB,qFAAqF;oBACrF,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;oBAEjC,0DAA0D;oBAC1D,kEAAkE;oBAClE,YAAY,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE;wBACnC,mFAAmF;wBACnF,MAAM,QAAQ,GAAG,kBAAkB,EAAE,CAAC;wBAEtC,kBAAkB;wBAClB,WAAW,CAAC,EAAE,IAAI,EAAS,CAAC,CAAC;wBAE7B,0BAA0B;wBAC1B,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;4BAC7B,IAAI;gCACF,IAAI,MAAM,CAAC,WAAW,CAAC,EAAE;oCACvB,WAAW,CAAC,KAAK,CAAC,CAAC;iCACpB;gCAED,qBAAqB;gCACrB,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;gCAE7B,sEAAsE;gCACtE,QAAQ,EAAE,CAAC;6BACZ;4BAAC,OAAO,KAAK,EAAE;gCACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;6BACtB;wBACH,CAAC,CAAC,CAAC;oBACL,CAAC,EAAE,OAAO,CAAC,CAAC;iBACb;qBAAM;oBACL,QAAQ,CAAC,MAAM,EAAE,CAAC;iBACnB;YACH,CAAC,CAAC;YAEF,OAAO,OAAO;iBACX,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;gBACb,OAAO,CAAC,KAAK,CAAC,mFAAmF,EAAE,GAAG,CAAC,CAAC;gBACxG,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC;iBACD,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CACf,QAAQ,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE;gBAC5B,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;gBACvD,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC3E,OAAO,CAAC,GAAG,UAAU,EAAE,GAAG,WAAW,CAAC,CAAC;YACzC,CAAC,CAAC,CACH,CAAC;QACN,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}

package/esm/types.d.ts

@@ -1,10 +1,11 @@
 import type { FC } from 'react';
-import type { Pilet, PiletApiCreator, PiletLoader, PiletMetadata } from 'piral-base';
+import type { Pilet, PiletApiCreator, PiletLoader, PiletMetadata, PiletRequester } from 'piral-base';
 export interface EmulatorConnectorOptions {
     createApi: PiletApiCreator;
     loadPilet: PiletLoader;
     injectPilet?(pilet: Pilet): void;
     piletApiFallback?: string;
+    integrate(components: EmulatorComponents): void;
 }
 export interface ChangeSet {
     state?: boolean;
@@ -13,6 +14,10 @@ export interface ChangeSet {
     extensions?: boolean;
     dependencies?: boolean;
 }
+export interface EmulatorComponents {
+    components: Record<string, FC>;
+    requester: PiletRequester;
+}
 export interface DebugComponents {
     wrappers: Record<string, FC>;
     components: Record<string, FC>;

package/lib/DebugRouteSwitch.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export declare function freezeRouteRefresh(): () => void;
+export interface DebugRouteSwitch {
+    NotFound: React.ComponentType;
+    paths: Array<{
+        path: string;
+        Component: React.ComponentType;
+    }>;
+}
+export declare const DebugRouteSwitch: React.FC<DebugRouteSwitch>;

package/lib/DebugRouteSwitch.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DebugRouteSwitch = exports.freezeRouteRefresh = void 0;
+const React = require("react");
+const react_router_1 = require("react-router");
+const debugRouteCache = {
+    active: 0,
+    paths: [],
+    refresh: undefined,
+};
+function freezeRouteRefresh() {
+    debugRouteCache.active++;
+    return () => {
+        var _a;
+        debugRouteCache.active--;
+        if (!debugRouteCache.active) {
+            (_a = debugRouteCache.refresh) === null || _a === void 0 ? void 0 : _a.call(debugRouteCache, (s) => s + 1);
+        }
+    };
+}
+exports.freezeRouteRefresh = freezeRouteRefresh;
+const DebugRouteSwitch = ({ paths, NotFound }) => {
+    const [_, triggerChange] = React.useState(0);
+    React.useEffect(() => {
+        debugRouteCache.refresh = triggerChange;
+        return () => {
+            debugRouteCache.refresh = undefined;
+        };
+    }, []);
+    if (!debugRouteCache.active) {
+        debugRouteCache.paths = paths;
+    }
+    return (React.createElement(react_router_1.Switch, null,
+        debugRouteCache.paths.map(({ path, Component }) => (React.createElement(react_router_1.Route, { exact: true, key: path, path: path, component: Component }))),
+        React.createElement(react_router_1.Route, { component: NotFound })));
+};
+exports.DebugRouteSwitch = DebugRouteSwitch;
+//# sourceMappingURL=DebugRouteSwitch.js.map

package/lib/DebugRouteSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugRouteSwitch.js","sourceRoot":"","sources":["../src/DebugRouteSwitch.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,+CAA6C;AAE7C,MAAM,eAAe,GAAG;IACtB,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,EAAE;IACT,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,SAAgB,kBAAkB;IAChC,eAAe,CAAC,MAAM,EAAE,CAAC;IAEzB,OAAO,GAAG,EAAE;;QACV,eAAe,CAAC,MAAM,EAAE,CAAC;QAEzB,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;YAC3B,MAAA,eAAe,CAAC,OAAO,+CAAvB,eAAe,EAAW,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;SACjD;IACH,CAAC,CAAC;AACJ,CAAC;AAVD,gDAUC;AAUM,MAAM,gBAAgB,GAA+B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClF,MAAM,CAAC,CAAC,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE7C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,OAAO,GAAG,aAAa,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;QACtC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;QAC3B,eAAe,CAAC,KAAK,GAAG,KAAK,CAAC;KAC/B;IAED,OAAO,CACL,oBAAC,qBAAM;QACJ,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAClD,oBAAC,oBAAK,IAAC,KAAK,QAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,CAC7D,CAAC;QACF,oBAAC,oBAAK,IAAC,SAAS,EAAE,QAAQ,GAAI,CACvB,CACV,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,gBAAgB,oBAsB3B"}

package/lib/emulator.d.ts

@@ -1,3 +1,3 @@
 import { PiletRequester } from 'piral-base';
 import { EmulatorConnectorOptions } from './types';
-export declare function withEmulatorPilets(requestPilets: PiletRequester, options: EmulatorConnectorOptions): PiletRequester;
+export declare function installPiletsEmulator(requestPilets: PiletRequester, options: EmulatorConnectorOptions): void;

package/lib/emulator.js

@@ -1,61 +1,81 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withEmulatorPilets = void 0;
+exports.installPiletsEmulator = void 0;
 const piral_base_1 = require("piral-base");
-function withEmulatorPilets(requestPilets, options) {
-    const { loadPilet, createApi, injectPilet, piletApiFallback = '/$pilet-api' } = options;
+const DebugRouteSwitch_1 = require("./DebugRouteSwitch");
+function installPiletsEmulator(requestPilets, options) {
+    const { loadPilet, createApi, injectPilet, integrate, piletApiFallback = '/$pilet-api' } = options;
     // check if pilets should be loaded
     const loadPilets = sessionStorage.getItem('dbg:load-pilets') === 'on';
     const noPilets = () => Promise.resolve([]);
     const requester = loadPilets ? requestPilets : noPilets;
-    return () => {
-        const promise = requester();
-        // the window['dbg:pilet-api'] should point to an API address used as a proxy, fall back to '/$pilet-api' if unavailable
-        const piletApi = window['dbg:pilet-api'] || piletApiFallback;
-        // either take a full URI or make it an absolute path relative to the current origin
-        const initialTarget = /^https?:/.test(piletApi)
-            ? piletApi
-            : `${location.origin}${piletApi[0] === '/' ? '' : '/'}${piletApi}`;
-        const updateTarget = initialTarget.replace('http', 'ws');
-        const ws = new WebSocket(updateTarget);
-        const appendix = fetch(initialTarget)
-            .then((res) => res.json())
-            .then((item) => (Array.isArray(item) ? item : [item]));
-        ws.onmessage = ({ data }) => {
-            const hardRefresh = sessionStorage.getItem('dbg:hard-refresh') === 'on';
-            if (!hardRefresh) {
-                // standard setting is to just perform an inject
-                const meta = JSON.parse(data);
-                // tear down pilet
-                injectPilet({ name: meta.name });
-                // load and evaluate pilet
-                loadPilet(meta).then((pilet) => {
-                    try {
-                        if ((0, piral_base_1.isfunc)(injectPilet)) {
-                            injectPilet(pilet);
-                        }
-                        (0, piral_base_1.setupPilet)(pilet, createApi);
-                    }
-                    catch (error) {
-                        console.error(error);
-                    }
-                });
-            }
-            else {
-                location.reload();
-            }
-        };
-        return promise
-            .catch((err) => {
-            console.error(`Requesting the pilets failed. We'll continue loading without pilets (DEBUG only).`, err);
-            return [];
-        })
-            .then((pilets) => appendix.then((debugPilets) => {
-            const debugPiletNames = debugPilets.map((m) => m.name);
-            const feedPilets = pilets.filter((m) => !debugPiletNames.includes(m.name));
-            return [...feedPilets, ...debugPilets];
-        }));
-    };
+    integrate({
+        components: {
+            RouteSwitch: DebugRouteSwitch_1.DebugRouteSwitch,
+        },
+        requester() {
+            const promise = requester();
+            // the window['dbg:pilet-api'] should point to an API address used as a proxy, fall back to '/$pilet-api' if unavailable
+            const piletApi = window['dbg:pilet-api'] || piletApiFallback;
+            // either take a full URI or make it an absolute path relative to the current origin
+            const initialTarget = /^https?:/.test(piletApi)
+                ? piletApi
+                : `${location.origin}${piletApi[0] === '/' ? '' : '/'}${piletApi}`;
+            const updateTarget = initialTarget.replace('http', 'ws');
+            const ws = new WebSocket(updateTarget);
+            const timeoutCache = {};
+            const timeout = 150;
+            const appendix = fetch(initialTarget)
+                .then((res) => res.json())
+                .then((item) => (Array.isArray(item) ? item : [item]));
+            ws.onmessage = ({ data }) => {
+                const hardRefresh = sessionStorage.getItem('dbg:hard-refresh') === 'on';
+                if (!hardRefresh) {
+                    // standard setting is to just perform an inject
+                    const meta = JSON.parse(data);
+                    const name = meta.name;
+                    // like a debounce; only one change of the current pilet should be actively processed
+                    clearTimeout(timeoutCache[name]);
+                    // some bundlers may have fired before writing to the disk
+                    // so we give them a bit of time before actually loading the pilet
+                    timeoutCache[name] = setTimeout(() => {
+                        // we should make sure to only refresh the page / router if pilets have been loaded
+                        const unfreeze = (0, DebugRouteSwitch_1.freezeRouteRefresh)();
+                        // tear down pilet
+                        injectPilet({ name });
+                        // load and evaluate pilet
+                        loadPilet(meta).then((pilet) => {
+                            try {
+                                if ((0, piral_base_1.isfunc)(injectPilet)) {
+                                    injectPilet(pilet);
+                                }
+                                // setup actual pilet
+                                (0, piral_base_1.setupPilet)(pilet, createApi);
+                                // disable route cache, should be zero again and lead to route refresh
+                                unfreeze();
+                            }
+                            catch (error) {
+                                console.error(error);
+                            }
+                        });
+                    }, timeout);
+                }
+                else {
+                    location.reload();
+                }
+            };
+            return promise
+                .catch((err) => {
+                console.error(`Requesting the pilets failed. We'll continue loading without pilets (DEBUG only).`, err);
+                return [];
+            })
+                .then((pilets) => appendix.then((debugPilets) => {
+                const debugPiletNames = debugPilets.map((m) => m.name);
+                const feedPilets = pilets.filter((m) => !debugPiletNames.includes(m.name));
+                return [...feedPilets, ...debugPilets];
+            }));
+        },
+    });
 }
-exports.withEmulatorPilets = withEmulatorPilets;
+exports.installPiletsEmulator = installPiletsEmulator;
 //# sourceMappingURL=emulator.js.map

package/lib/emulator.js.map

@@ -1 +1 @@
-{"version":3,"file":"emulator.js","sourceRoot":"","sources":["../src/emulator.ts"],"names":[],"mappings":";;;AAAA,2CAAgE;AAGhE,SAAgB,kBAAkB,CAAC,aAA6B,EAAE,OAAiC;IACjG,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,GAAG,aAAa,EAAE,GAAG,OAAO,CAAC;IACxF,mCAAmC;IACnC,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtE,MAAM,QAAQ,GAAmB,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAC3D,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC;IAExD,OAAO,GAAG,EAAE;QACV,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;QAE5B,wHAAwH;QACxH,MAAM,QAAQ,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,gBAAgB,CAAC;QAE7D,oFAAoF;QACpF,MAAM,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC7C,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,QAAQ,EAAE,CAAC;QACrE,MAAM,YAAY,GAAG,aAAa,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACzD,MAAM,EAAE,GAAG,IAAI,SAAS,CAAC,YAAY,CAAC,CAAC;QAEvC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;aAClC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;aACzB,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAEzD,EAAE,CAAC,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;YAC1B,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;YAExE,IAAI,CAAC,WAAW,EAAE;gBAChB,gDAAgD;gBAChD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;gBAE9B,kBAAkB;gBAClB,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAS,CAAC,CAAC;gBAExC,0BAA0B;gBAC1B,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;oBAC7B,IAAI;wBACF,IAAI,IAAA,mBAAM,EAAC,WAAW,CAAC,EAAE;4BACvB,WAAW,CAAC,KAAK,CAAC,CAAC;yBACpB;wBAED,IAAA,uBAAU,EAAC,KAAK,EAAE,SAAS,CAAC,CAAC;qBAC9B;oBAAC,OAAO,KAAK,EAAE;wBACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;qBACtB;gBACH,CAAC,CAAC,CAAC;aACJ;iBAAM;gBACL,QAAQ,CAAC,MAAM,EAAE,CAAC;aACnB;QACH,CAAC,CAAC;QAEF,OAAO,OAAO;aACX,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;YACb,OAAO,CAAC,KAAK,CAAC,mFAAmF,EAAE,GAAG,CAAC,CAAC;YACxG,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CACf,QAAQ,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE;YAC5B,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACvD,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3E,OAAO,CAAC,GAAG,UAAU,EAAE,GAAG,WAAW,CAAC,CAAC;QACzC,CAAC,CAAC,CACH,CAAC;IACN,CAAC,CAAC;AACJ,CAAC;AAhED,gDAgEC"}
+{"version":3,"file":"emulator.js","sourceRoot":"","sources":["../src/emulator.ts"],"names":[],"mappings":"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"}

package/lib/types.d.ts

@@ -1,10 +1,11 @@
 import type { FC } from 'react';
-import type { Pilet, PiletApiCreator, PiletLoader, PiletMetadata } from 'piral-base';
+import type { Pilet, PiletApiCreator, PiletLoader, PiletMetadata, PiletRequester } from 'piral-base';
 export interface EmulatorConnectorOptions {
     createApi: PiletApiCreator;
     loadPilet: PiletLoader;
     injectPilet?(pilet: Pilet): void;
     piletApiFallback?: string;
+    integrate(components: EmulatorComponents): void;
 }
 export interface ChangeSet {
     state?: boolean;
@@ -13,6 +14,10 @@ export interface ChangeSet {
     extensions?: boolean;
     dependencies?: boolean;
 }
+export interface EmulatorComponents {
+    components: Record<string, FC>;
+    requester: PiletRequester;
+}
 export interface DebugComponents {
     wrappers: Record<string, FC>;
     components: Record<string, FC>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-debug-utils",
-  "version": "0.14.14-beta.3753",
+  "version": "0.14.14-beta.3765",
   "description": "Utilities for debugging Piral instances.",
   "keywords": [
     "piral",
@@ -38,12 +38,12 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-base": "0.14.14-beta.3753"
+    "piral-base": "0.14.14-beta.3765"
   },
   "peerDependencies": {
     "piral-base": "0.14.x",
     "react": ">=16.8.0",
     "react-router": ">=5.0.0"
   },
-  "gitHead": "34acaee35dc0edc17e08871ceca641fc5812c504"
+  "gitHead": "f933f63d8d746f6f592e6d62a4f74921d8fbcc01"
 }

package/src/DebugRouteSwitch.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Switch, Route } from 'react-router';
+
+const debugRouteCache = {
+  active: 0,
+  paths: [],
+  refresh: undefined,
+};
+
+export function freezeRouteRefresh() {
+  debugRouteCache.active++;
+
+  return () => {
+    debugRouteCache.active--;
+
+    if (!debugRouteCache.active) {
+      debugRouteCache.refresh?.((s: number) => s + 1);
+    }
+  };
+}
+
+export interface DebugRouteSwitch {
+  NotFound: React.ComponentType;
+  paths: Array<{
+    path: string;
+    Component: React.ComponentType;
+  }>;
+}
+
+export const DebugRouteSwitch: React.FC<DebugRouteSwitch> = ({ paths, NotFound }) => {
+  const [_, triggerChange] = React.useState(0);
+
+  React.useEffect(() => {
+    debugRouteCache.refresh = triggerChange;
+    return () => {
+      debugRouteCache.refresh = undefined;
+    };
+  }, []);
+
+  if (!debugRouteCache.active) {
+    debugRouteCache.paths = paths;
+  }
+
+  return (
+    <Switch>
+      {debugRouteCache.paths.map(({ path, Component }) => (
+        <Route exact key={path} path={path} component={Component} />
+      ))}
+      <Route component={NotFound} />
+    </Switch>
+  );
+};

package/src/emulator.ts

@@ -1,68 +1,91 @@
 import { isfunc, PiletRequester, setupPilet } from 'piral-base';
+import { freezeRouteRefresh, DebugRouteSwitch } from './DebugRouteSwitch';
 import { EmulatorConnectorOptions } from './types';
 
-export function withEmulatorPilets(requestPilets: PiletRequester, options: EmulatorConnectorOptions): PiletRequester {
-  const { loadPilet, createApi, injectPilet, piletApiFallback = '/$pilet-api' } = options;
+export function installPiletsEmulator(requestPilets: PiletRequester, options: EmulatorConnectorOptions) {
+  const { loadPilet, createApi, injectPilet, integrate, piletApiFallback = '/$pilet-api' } = options;
   // check if pilets should be loaded
   const loadPilets = sessionStorage.getItem('dbg:load-pilets') === 'on';
   const noPilets: PiletRequester = () => Promise.resolve([]);
   const requester = loadPilets ? requestPilets : noPilets;
 
-  return () => {
-    const promise = requester();
+  integrate({
+    components: {
+      RouteSwitch: DebugRouteSwitch,
+    },
+    requester() {
+      const promise = requester();
 
-    // the window['dbg:pilet-api'] should point to an API address used as a proxy, fall back to '/$pilet-api' if unavailable
-    const piletApi = window['dbg:pilet-api'] || piletApiFallback;
+      // the window['dbg:pilet-api'] should point to an API address used as a proxy, fall back to '/$pilet-api' if unavailable
+      const piletApi = window['dbg:pilet-api'] || piletApiFallback;
 
-    // either take a full URI or make it an absolute path relative to the current origin
-    const initialTarget = /^https?:/.test(piletApi)
-      ? piletApi
-      : `${location.origin}${piletApi[0] === '/' ? '' : '/'}${piletApi}`;
-    const updateTarget = initialTarget.replace('http', 'ws');
-    const ws = new WebSocket(updateTarget);
+      // either take a full URI or make it an absolute path relative to the current origin
+      const initialTarget = /^https?:/.test(piletApi)
+        ? piletApi
+        : `${location.origin}${piletApi[0] === '/' ? '' : '/'}${piletApi}`;
+      const updateTarget = initialTarget.replace('http', 'ws');
+      const ws = new WebSocket(updateTarget);
+      const timeoutCache = {};
+      const timeout = 150;
 
-    const appendix = fetch(initialTarget)
-      .then((res) => res.json())
-      .then((item) => (Array.isArray(item) ? item : [item]));
+      const appendix = fetch(initialTarget)
+        .then((res) => res.json())
+        .then((item) => (Array.isArray(item) ? item : [item]));
 
-    ws.onmessage = ({ data }) => {
-      const hardRefresh = sessionStorage.getItem('dbg:hard-refresh') === 'on';
+      ws.onmessage = ({ data }) => {
+        const hardRefresh = sessionStorage.getItem('dbg:hard-refresh') === 'on';
 
-      if (!hardRefresh) {
-        // standard setting is to just perform an inject
-        const meta = JSON.parse(data);
+        if (!hardRefresh) {
+          // standard setting is to just perform an inject
+          const meta = JSON.parse(data);
+          const name = meta.name;
 
-        // tear down pilet
-        injectPilet({ name: meta.name } as any);
+          // like a debounce; only one change of the current pilet should be actively processed
+          clearTimeout(timeoutCache[name]);
 
-        // load and evaluate pilet
-        loadPilet(meta).then((pilet) => {
-          try {
-            if (isfunc(injectPilet)) {
-              injectPilet(pilet);
-            }
+          // some bundlers may have fired before writing to the disk
+          // so we give them a bit of time before actually loading the pilet
+          timeoutCache[name] = setTimeout(() => {
+            // we should make sure to only refresh the page / router if pilets have been loaded
+            const unfreeze = freezeRouteRefresh();
 
-            setupPilet(pilet, createApi);
-          } catch (error) {
-            console.error(error);
-          }
-        });
-      } else {
-        location.reload();
-      }
-    };
+            // tear down pilet
+            injectPilet({ name } as any);
 
-    return promise
-      .catch((err) => {
-        console.error(`Requesting the pilets failed. We'll continue loading without pilets (DEBUG only).`, err);
-        return [];
-      })
-      .then((pilets) =>
-        appendix.then((debugPilets) => {
-          const debugPiletNames = debugPilets.map((m) => m.name);
-          const feedPilets = pilets.filter((m) => !debugPiletNames.includes(m.name));
-          return [...feedPilets, ...debugPilets];
-        }),
-      );
-  };
+            // load and evaluate pilet
+            loadPilet(meta).then((pilet) => {
+              try {
+                if (isfunc(injectPilet)) {
+                  injectPilet(pilet);
+                }
+
+                // setup actual pilet
+                setupPilet(pilet, createApi);
+
+                // disable route cache, should be zero again and lead to route refresh
+                unfreeze();
+              } catch (error) {
+                console.error(error);
+              }
+            });
+          }, timeout);
+        } else {
+          location.reload();
+        }
+      };
+
+      return promise
+        .catch((err) => {
+          console.error(`Requesting the pilets failed. We'll continue loading without pilets (DEBUG only).`, err);
+          return [];
+        })
+        .then((pilets) =>
+          appendix.then((debugPilets) => {
+            const debugPiletNames = debugPilets.map((m) => m.name);
+            const feedPilets = pilets.filter((m) => !debugPiletNames.includes(m.name));
+            return [...feedPilets, ...debugPilets];
+          }),
+        );
+    },
+  });
 }

package/src/types.ts

@@ -1,11 +1,12 @@
 import type { FC } from 'react';
-import type { Pilet, PiletApiCreator, PiletLoader, PiletMetadata } from 'piral-base';
+import type { Pilet, PiletApiCreator, PiletLoader, PiletMetadata, PiletRequester } from 'piral-base';
 
 export interface EmulatorConnectorOptions {
   createApi: PiletApiCreator;
   loadPilet: PiletLoader;
   injectPilet?(pilet: Pilet): void;
   piletApiFallback?: string;
+  integrate(components: EmulatorComponents): void;
 }
 
 export interface ChangeSet {
@@ -16,6 +17,11 @@ export interface ChangeSet {
   dependencies?: boolean;
 }
 
+export interface EmulatorComponents {
+  components: Record<string, FC>;
+  requester: PiletRequester;
+}
+
 export interface DebugComponents {
   wrappers: Record<string, FC>;
   components: Record<string, FC>;