piral-debug-utils - npm Package Compare versions

Comparing version 0.13.5 to 0.13.6

esm/debug.d.ts

@@ -1,9 +0,2 @@
-import { PiletApiCreator, PiletDependencyGetter, PiletLoader, PiletRequester } from 'piral-base';
-export interface DebuggerOptions {
-    createApi: PiletApiCreator;
-    getDependencies: PiletDependencyGetter;
-    loadPilet: PiletLoader;
-    requestPilets: PiletRequester;
-    context?: any;
-}
+import { DebuggerOptions } from './types';
 export declare function installPiralDebug(options: DebuggerOptions): void;

esm/debug.js

@@ -12,7 +12,128 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
+import { isfunc } from 'piral-base';
+import { DebugTracker } from './DebugTracker';
+import { VisualizationWrapper } from './VisualizationWrapper';
 export function installPiralDebug(options) {
-    const { context } = options, pilets = __rest(options, ["context"]);
-    // the DEBUG_PIRAL env should contain the Piral CLI compatibility version
-    window['dbg:piral'] = {
-        debug: 'v0',
+    const { context, onChange } = options, pilets = __rest(options, ["context", "onChange"]);
+    const selfSource = 'piral-debug-api';
+    const debugApiVersion = 'v1';
+    const settings = {
+        viewState: {
+            value: sessionStorage.getItem('dbg:view-state') !== 'off',
+            type: 'boolean',
+            label: 'State container logging',
+        },
+        loadPilets: {
+            value: sessionStorage.getItem('dbg:load-pilets') === 'on',
+            type: 'boolean',
+            label: 'Load available pilets',
+        },
+        hardRefresh: {
+            value: sessionStorage.getItem('dbg:hard-refresh') === 'on',
+            type: 'boolean',
+            label: 'Full refresh on change',
+        },
+        viewOrigins: {
+            value: sessionStorage.getItem('dbg:view-origins') === 'on',
+            type: 'boolean',
+            label: 'Visualize component origins',
+        },
+    };
+    const events = [];
+    const sendMessage = (content) => {
+        window.postMessage({
+            content,
+            source: selfSource,
+            version: debugApiVersion,
+        }, '*');
+    };
+    const sendCurrentPilets = (pilets) => {
+        sendMessage({
+            type: 'pilets',
+            pilets: pilets.map((pilet) => ({
+                name: pilet.name,
+                version: pilet.version,
+                disabled: !!pilet.disabled,
+            })),
+        });
+    };
+    const sendCurrentContainer = (state) => {
+        sendMessage({
+            type: 'container',
+            container: JSON.parse(JSON.stringify(state)),
+        });
+    };
+    const sendCurrentRoutes = (pages, routes) => {
+        const registeredRoutes = Object.keys(pages);
+        const componentRoutes = Object.keys(routes);
+        sendMessage({
+            type: 'routes',
+            routes: [...componentRoutes, ...registeredRoutes],
+        });
+    };
+    const setSetting = (setting, key, value) => {
+        setting.value = value;
+        sessionStorage.setItem(key, value ? 'on' : 'off');
+    };
+    const updateSettings = (values) => {
+        const prev = settings.viewOrigins.value;
+        setSetting(settings.viewState, 'dbg:view-state', values.viewState);
+        setSetting(settings.loadPilets, 'dbg:load-pilets', values.loadPilets);
+        setSetting(settings.hardRefresh, 'dbg:hard-refresh', values.hardRefresh);
+        setSetting(settings.viewOrigins, 'dbg:view-origins', values.viewOrigins);
+        const curr = settings.viewOrigins.value;
+        if (prev !== curr) {
+            updateVisualize(curr);
+        }
+        sendMessage({
+            settings,
+            type: 'settings',
+        });
+    };
+    const togglePilet = (name) => {
+        const pilet = context.readState((state) => state.modules).find((m) => m.name === name);
+        if (pilet.disabled) {
+            try {
+                const { createApi } = options;
+                const newApi = createApi(pilet);
+                context.injectPilet(pilet.original);
+                pilet.original.setup(newApi);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        else {
+            context.injectPilet({ name, disabled: true, original: pilet });
+        }
+    };
+    const removePilet = (name) => {
+        context.injectPilet({ name });
+        context.dispatch((state) => (Object.assign(Object.assign({}, state), { modules: state.modules.filter((m) => m.name !== name) })));
+    };
+    const appendPilet = (meta) => {
+        const { createApi, loadPilet } = options;
+        loadPilet(meta).then((pilet) => {
+            try {
+                const newApi = createApi(pilet);
+                context.injectPilet(pilet);
+                pilet.setup(newApi);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        });
+    };
+    const toggleVisualize = () => {
+        context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { visualize: Object.assign(Object.assign({}, s.$debug.visualize), { force: !s.$debug.visualize.force }) }) })));
+    };
+    const updateVisualize = (active) => {
+        context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { visualize: Object.assign(Object.assign({}, s.$debug.visualize), { active }) }) })));
+    };
+    const goToRoute = (route) => {
+        context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { route }) })));
+    };
+    const eventDispatcher = document.body.dispatchEvent;
+    const debugApi = {
+        debug: debugApiVersion,
         instance: {
@@ -31,3 +152,118 @@ name: process.env.BUILD_PCKG_NAME,
     };
+    const start = () => {
+        const registeredRoutes = context.readState((state) => Object.keys(state.registry.pages));
+        const componentRoutes = context.readState((state) => Object.keys(state.routes));
+        const routes = [...componentRoutes, ...registeredRoutes];
+        const container = JSON.parse(JSON.stringify(context.readState((s) => s)));
+        const pilets = context
+            .readState((m) => m.modules)
+            .map((pilet) => ({
+            name: pilet.name,
+            version: pilet.version,
+            disabled: pilet.disabled,
+        }));
+        sendMessage({
+            type: 'available',
+            name: debugApi.instance.name,
+            version: debugApi.instance.version,
+            kind: debugApiVersion,
+            capabilities: ['events', 'container', 'routes', 'pilets', 'settings'],
+            state: {
+                routes,
+                pilets,
+                container,
+                settings,
+                events,
+            },
+        });
+    };
+    document.body.dispatchEvent = function (ev) {
+        if (ev.type.startsWith('piral-')) {
+            events.unshift({
+                id: events.length.toString(),
+                name: ev.type.replace('piral-', ''),
+                args: ev.detail.arg,
+                time: Date.now(),
+            });
+            sendMessage({
+                events,
+                type: 'events',
+            });
+        }
+        return eventDispatcher.call(this, ev);
+    };
+    context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: {
+            visualize: {
+                active: settings.viewOrigins.value,
+                force: false,
+            },
+            route: undefined,
+        }, components: Object.assign(Object.assign({}, s.components), { Debug: DebugTracker }), registry: Object.assign(Object.assign({}, s.registry), { wrappers: Object.assign(Object.assign({}, s.registry.wrappers), { '*': VisualizationWrapper }) }) })));
+    window.addEventListener('storage', (event) => {
+        if (event.storageArea === sessionStorage) {
+            // potentially unknowingly updated settings
+            updateSettings({
+                viewState: sessionStorage.getItem('dbg:view-state') !== 'off',
+                loadPilets: sessionStorage.getItem('dbg:load-pilets') === 'on',
+                hardRefresh: sessionStorage.getItem('dbg:hard-refresh') === 'on',
+                viewOrigins: sessionStorage.getItem('dbg:view-origins') === 'on',
+            });
+        }
+    });
+    window.addEventListener('message', (event) => {
+        const { source, version, content } = event.data;
+        if (source !== selfSource && version === debugApiVersion) {
+            switch (content.type) {
+                case 'init':
+                    return start();
+                case 'update-settings':
+                    return updateSettings(content.settings);
+                case 'append-pilet':
+                    return appendPilet(content.meta);
+                case 'remove-pilet':
+                    return removePilet(content.name);
+                case 'toggle-pilet':
+                    return togglePilet(content.name);
+                case 'emit-event':
+                    return context.emit(content.name, content.args);
+                case 'goto-route':
+                    return goToRoute(content.route);
+                case 'visualize-all':
+                    return toggleVisualize();
+            }
+        }
+    });
+    if (isfunc(onChange)) {
+        onChange((previous, current) => {
+            if (settings.viewState) {
+                const infos = new Error().stack;
+                if (infos) {
+                    // Chrome, Firefox, ... (full capability)
+                    const lastLine = infos.split('\n')[7];
+                    if (lastLine) {
+                        const action = lastLine.replace(/^\s+at\s+(Atom\.|Object\.)?/, '');
+                        console.group(`%c Piral State Change %c ${new Date().toLocaleTimeString()}`, 'color: gray; font-weight: lighter;', 'color: black; font-weight: bold;');
+                        console.log('%c Previous', `color: #9E9E9E; font-weight: bold`, previous);
+                        console.log('%c Action', `color: #03A9F4; font-weight: bold`, action);
+                        console.log('%c Next', `color: #4CAF50; font-weight: bold`, current);
+                        console.groupEnd();
+                    }
+                }
+                else {
+                    // IE 11, ... (does not know colors etc.)
+                    console.log('Changed state', previous, current);
+                }
+            }
+            if (current.modules !== previous.modules) {
+                sendCurrentPilets(current.modules);
+            }
+            if (current.registry.pages !== previous.registry.pages || current.routes !== previous.routes) {
+                sendCurrentRoutes(current.registry.pages, current.routes);
+            }
+            sendCurrentContainer(current);
+        });
+    }
+    window['dbg:piral'] = debugApi;
+    start();
 }
 //# sourceMappingURL=debug.js.map

lib/debug.d.ts

@@ -1,9 +0,2 @@
-import { PiletApiCreator, PiletDependencyGetter, PiletLoader, PiletRequester } from 'piral-base';
-export interface DebuggerOptions {
-    createApi: PiletApiCreator;
-    getDependencies: PiletDependencyGetter;
-    loadPilet: PiletLoader;
-    requestPilets: PiletRequester;
-    context?: any;
-}
+import { DebuggerOptions } from './types';
 export declare function installPiralDebug(options: DebuggerOptions): void;

lib/debug.js

@@ -15,7 +15,128 @@ "use strict";
 exports.installPiralDebug = void 0;
+const piral_base_1 = require("piral-base");
+const DebugTracker_1 = require("./DebugTracker");
+const VisualizationWrapper_1 = require("./VisualizationWrapper");
 function installPiralDebug(options) {
-    const { context } = options, pilets = __rest(options, ["context"]);
-    // the DEBUG_PIRAL env should contain the Piral CLI compatibility version
-    window['dbg:piral'] = {
-        debug: 'v0',
+    const { context, onChange } = options, pilets = __rest(options, ["context", "onChange"]);
+    const selfSource = 'piral-debug-api';
+    const debugApiVersion = 'v1';
+    const settings = {
+        viewState: {
+            value: sessionStorage.getItem('dbg:view-state') !== 'off',
+            type: 'boolean',
+            label: 'State container logging',
+        },
+        loadPilets: {
+            value: sessionStorage.getItem('dbg:load-pilets') === 'on',
+            type: 'boolean',
+            label: 'Load available pilets',
+        },
+        hardRefresh: {
+            value: sessionStorage.getItem('dbg:hard-refresh') === 'on',
+            type: 'boolean',
+            label: 'Full refresh on change',
+        },
+        viewOrigins: {
+            value: sessionStorage.getItem('dbg:view-origins') === 'on',
+            type: 'boolean',
+            label: 'Visualize component origins',
+        },
+    };
+    const events = [];
+    const sendMessage = (content) => {
+        window.postMessage({
+            content,
+            source: selfSource,
+            version: debugApiVersion,
+        }, '*');
+    };
+    const sendCurrentPilets = (pilets) => {
+        sendMessage({
+            type: 'pilets',
+            pilets: pilets.map((pilet) => ({
+                name: pilet.name,
+                version: pilet.version,
+                disabled: !!pilet.disabled,
+            })),
+        });
+    };
+    const sendCurrentContainer = (state) => {
+        sendMessage({
+            type: 'container',
+            container: JSON.parse(JSON.stringify(state)),
+        });
+    };
+    const sendCurrentRoutes = (pages, routes) => {
+        const registeredRoutes = Object.keys(pages);
+        const componentRoutes = Object.keys(routes);
+        sendMessage({
+            type: 'routes',
+            routes: [...componentRoutes, ...registeredRoutes],
+        });
+    };
+    const setSetting = (setting, key, value) => {
+        setting.value = value;
+        sessionStorage.setItem(key, value ? 'on' : 'off');
+    };
+    const updateSettings = (values) => {
+        const prev = settings.viewOrigins.value;
+        setSetting(settings.viewState, 'dbg:view-state', values.viewState);
+        setSetting(settings.loadPilets, 'dbg:load-pilets', values.loadPilets);
+        setSetting(settings.hardRefresh, 'dbg:hard-refresh', values.hardRefresh);
+        setSetting(settings.viewOrigins, 'dbg:view-origins', values.viewOrigins);
+        const curr = settings.viewOrigins.value;
+        if (prev !== curr) {
+            updateVisualize(curr);
+        }
+        sendMessage({
+            settings,
+            type: 'settings',
+        });
+    };
+    const togglePilet = (name) => {
+        const pilet = context.readState((state) => state.modules).find((m) => m.name === name);
+        if (pilet.disabled) {
+            try {
+                const { createApi } = options;
+                const newApi = createApi(pilet);
+                context.injectPilet(pilet.original);
+                pilet.original.setup(newApi);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        else {
+            context.injectPilet({ name, disabled: true, original: pilet });
+        }
+    };
+    const removePilet = (name) => {
+        context.injectPilet({ name });
+        context.dispatch((state) => (Object.assign(Object.assign({}, state), { modules: state.modules.filter((m) => m.name !== name) })));
+    };
+    const appendPilet = (meta) => {
+        const { createApi, loadPilet } = options;
+        loadPilet(meta).then((pilet) => {
+            try {
+                const newApi = createApi(pilet);
+                context.injectPilet(pilet);
+                pilet.setup(newApi);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        });
+    };
+    const toggleVisualize = () => {
+        context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { visualize: Object.assign(Object.assign({}, s.$debug.visualize), { force: !s.$debug.visualize.force }) }) })));
+    };
+    const updateVisualize = (active) => {
+        context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { visualize: Object.assign(Object.assign({}, s.$debug.visualize), { active }) }) })));
+    };
+    const goToRoute = (route) => {
+        context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { route }) })));
+    };
+    const eventDispatcher = document.body.dispatchEvent;
+    const debugApi = {
+        debug: debugApiVersion,
         instance: {
@@ -34,4 +155,119 @@ name: process.env.BUILD_PCKG_NAME,
     };
+    const start = () => {
+        const registeredRoutes = context.readState((state) => Object.keys(state.registry.pages));
+        const componentRoutes = context.readState((state) => Object.keys(state.routes));
+        const routes = [...componentRoutes, ...registeredRoutes];
+        const container = JSON.parse(JSON.stringify(context.readState((s) => s)));
+        const pilets = context
+            .readState((m) => m.modules)
+            .map((pilet) => ({
+            name: pilet.name,
+            version: pilet.version,
+            disabled: pilet.disabled,
+        }));
+        sendMessage({
+            type: 'available',
+            name: debugApi.instance.name,
+            version: debugApi.instance.version,
+            kind: debugApiVersion,
+            capabilities: ['events', 'container', 'routes', 'pilets', 'settings'],
+            state: {
+                routes,
+                pilets,
+                container,
+                settings,
+                events,
+            },
+        });
+    };
+    document.body.dispatchEvent = function (ev) {
+        if (ev.type.startsWith('piral-')) {
+            events.unshift({
+                id: events.length.toString(),
+                name: ev.type.replace('piral-', ''),
+                args: ev.detail.arg,
+                time: Date.now(),
+            });
+            sendMessage({
+                events,
+                type: 'events',
+            });
+        }
+        return eventDispatcher.call(this, ev);
+    };
+    context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: {
+            visualize: {
+                active: settings.viewOrigins.value,
+                force: false,
+            },
+            route: undefined,
+        }, components: Object.assign(Object.assign({}, s.components), { Debug: DebugTracker_1.DebugTracker }), registry: Object.assign(Object.assign({}, s.registry), { wrappers: Object.assign(Object.assign({}, s.registry.wrappers), { '*': VisualizationWrapper_1.VisualizationWrapper }) }) })));
+    window.addEventListener('storage', (event) => {
+        if (event.storageArea === sessionStorage) {
+            // potentially unknowingly updated settings
+            updateSettings({
+                viewState: sessionStorage.getItem('dbg:view-state') !== 'off',
+                loadPilets: sessionStorage.getItem('dbg:load-pilets') === 'on',
+                hardRefresh: sessionStorage.getItem('dbg:hard-refresh') === 'on',
+                viewOrigins: sessionStorage.getItem('dbg:view-origins') === 'on',
+            });
+        }
+    });
+    window.addEventListener('message', (event) => {
+        const { source, version, content } = event.data;
+        if (source !== selfSource && version === debugApiVersion) {
+            switch (content.type) {
+                case 'init':
+                    return start();
+                case 'update-settings':
+                    return updateSettings(content.settings);
+                case 'append-pilet':
+                    return appendPilet(content.meta);
+                case 'remove-pilet':
+                    return removePilet(content.name);
+                case 'toggle-pilet':
+                    return togglePilet(content.name);
+                case 'emit-event':
+                    return context.emit(content.name, content.args);
+                case 'goto-route':
+                    return goToRoute(content.route);
+                case 'visualize-all':
+                    return toggleVisualize();
+            }
+        }
+    });
+    if (piral_base_1.isfunc(onChange)) {
+        onChange((previous, current) => {
+            if (settings.viewState) {
+                const infos = new Error().stack;
+                if (infos) {
+                    // Chrome, Firefox, ... (full capability)
+                    const lastLine = infos.split('\n')[7];
+                    if (lastLine) {
+                        const action = lastLine.replace(/^\s+at\s+(Atom\.|Object\.)?/, '');
+                        console.group(`%c Piral State Change %c ${new Date().toLocaleTimeString()}`, 'color: gray; font-weight: lighter;', 'color: black; font-weight: bold;');
+                        console.log('%c Previous', `color: #9E9E9E; font-weight: bold`, previous);
+                        console.log('%c Action', `color: #03A9F4; font-weight: bold`, action);
+                        console.log('%c Next', `color: #4CAF50; font-weight: bold`, current);
+                        console.groupEnd();
+                    }
+                }
+                else {
+                    // IE 11, ... (does not know colors etc.)
+                    console.log('Changed state', previous, current);
+                }
+            }
+            if (current.modules !== previous.modules) {
+                sendCurrentPilets(current.modules);
+            }
+            if (current.registry.pages !== previous.registry.pages || current.routes !== previous.routes) {
+                sendCurrentRoutes(current.registry.pages, current.routes);
+            }
+            sendCurrentContainer(current);
+        });
+    }
+    window['dbg:piral'] = debugApi;
+    start();
 }
 exports.installPiralDebug = installPiralDebug;
 //# sourceMappingURL=debug.js.map

package.json

 {
   "name": "piral-debug-utils",
-  "version": "0.13.5",
+  "version": "0.13.6",
   "description": "Utilities for debugging Piral instances.",
@@ -41,8 +41,8 @@ "keywords": [
   "devDependencies": {
-    "piral-base": "^0.13.5"
+    "piral-core": "^0.13.6"
   },
   "peerDependencies": {
-    "piral-base": "0.12.x || 0.13.x"
+    "piral-core": "0.13.x"
   },
-  "gitHead": "79c0410ffbaa50756b71db8adff639b55c98af1d"
+  "gitHead": "11c066bb86dcf097171236030d5aa1431588f537"
 }

src/debug.ts

@@ -1,17 +0,173 @@
-import { PiletApiCreator, PiletDependencyGetter, PiletLoader, PiletRequester } from 'piral-base';
+import { isfunc } from 'piral-base';
+import { DebugTracker } from './DebugTracker';
+import { VisualizationWrapper } from './VisualizationWrapper';
+import { DebuggerOptions } from './types';
 
-export interface DebuggerOptions {
-  createApi: PiletApiCreator;
-  getDependencies: PiletDependencyGetter;
-  loadPilet: PiletLoader;
-  requestPilets: PiletRequester;
-  context?: any;
-}
-
 export function installPiralDebug(options: DebuggerOptions) {
-  const { context, ...pilets } = options;
+  const { context, onChange, ...pilets } = options;
+  const selfSource = 'piral-debug-api';
+  const debugApiVersion = 'v1';
+  const settings = {
+    viewState: {
+      value: sessionStorage.getItem('dbg:view-state') !== 'off',
+      type: 'boolean',
+      label: 'State container logging',
+    },
+    loadPilets: {
+      value: sessionStorage.getItem('dbg:load-pilets') === 'on',
+      type: 'boolean',
+      label: 'Load available pilets',
+    },
+    hardRefresh: {
+      value: sessionStorage.getItem('dbg:hard-refresh') === 'on',
+      type: 'boolean',
+      label: 'Full refresh on change',
+    },
+    viewOrigins: {
+      value: sessionStorage.getItem('dbg:view-origins') === 'on',
+      type: 'boolean',
+      label: 'Visualize component origins',
+    },
+  };
+  const events = [];
 
-  // the DEBUG_PIRAL env should contain the Piral CLI compatibility version
-  window['dbg:piral'] = {
-    debug: 'v0',
+  const sendMessage = (content: any) => {
+    window.postMessage(
+      {
+        content,
+        source: selfSource,
+        version: debugApiVersion,
+      },
+      '*',
+    );
+  };
+
+  const sendCurrentPilets = (pilets: Array<any>) => {
+    sendMessage({
+      type: 'pilets',
+      pilets: pilets.map((pilet) => ({
+        name: pilet.name,
+        version: pilet.version,
+        disabled: !!pilet.disabled,
+      })),
+    });
+  };
+
+  const sendCurrentContainer = (state: any) => {
+    sendMessage({
+      type: 'container',
+      container: JSON.parse(JSON.stringify(state)),
+    });
+  };
+
+  const sendCurrentRoutes = (pages: Record<string, any>, routes: Record<string, any>) => {
+    const registeredRoutes = Object.keys(pages);
+    const componentRoutes = Object.keys(routes);
+    sendMessage({
+      type: 'routes',
+      routes: [...componentRoutes, ...registeredRoutes],
+    });
+  };
+
+  const setSetting = (setting: { value: any }, key: string, value: any) => {
+    setting.value = value;
+    sessionStorage.setItem(key, value ? 'on' : 'off');
+  };
+
+  const updateSettings = (values: Record<string, any>) => {
+    const prev = settings.viewOrigins.value;
+    setSetting(settings.viewState, 'dbg:view-state', values.viewState);
+    setSetting(settings.loadPilets, 'dbg:load-pilets', values.loadPilets);
+    setSetting(settings.hardRefresh, 'dbg:hard-refresh', values.hardRefresh);
+    setSetting(settings.viewOrigins, 'dbg:view-origins', values.viewOrigins);
+    const curr = settings.viewOrigins.value;
+
+    if (prev !== curr) {
+      updateVisualize(curr);
+    }
+
+    sendMessage({
+      settings,
+      type: 'settings',
+    });
+  };
+
+  const togglePilet = (name: string) => {
+    const pilet: any = context.readState((state) => state.modules).find((m) => m.name === name);
+
+    if (pilet.disabled) {
+      try {
+        const { createApi } = options;
+        const newApi = createApi(pilet);
+        context.injectPilet(pilet.original);
+        pilet.original.setup(newApi);
+      } catch (error) {
+        console.error(error);
+      }
+    } else {
+      context.injectPilet({ name, disabled: true, original: pilet } as any);
+    }
+  };
+
+  const removePilet = (name: string) => {
+    context.injectPilet({ name } as any);
+    context.dispatch((state) => ({
+      ...state,
+      modules: state.modules.filter((m) => m.name !== name),
+    }));
+  };
+
+  const appendPilet = (meta: any) => {
+    const { createApi, loadPilet } = options;
+    loadPilet(meta).then((pilet) => {
+      try {
+        const newApi = createApi(pilet);
+        context.injectPilet(pilet);
+        pilet.setup(newApi as any);
+      } catch (error) {
+        console.error(error);
+      }
+    });
+  };
+
+  const toggleVisualize = () => {
+    context.dispatch((s) => ({
+      ...s,
+      $debug: {
+        ...s.$debug,
+        visualize: {
+          ...s.$debug.visualize,
+          force: !s.$debug.visualize.force,
+        },
+      },
+    }));
+  };
+
+  const updateVisualize = (active: boolean) => {
+    context.dispatch((s) => ({
+      ...s,
+      $debug: {
+        ...s.$debug,
+        visualize: {
+          ...s.$debug.visualize,
+          active,
+        },
+      },
+    }));
+  };
+
+  const goToRoute = (route: string) => {
+    context.dispatch((s) => ({
+      ...s,
+      $debug: {
+        ...s.$debug,
+        route,
+      },
+    }));
+  };
+
+  const eventDispatcher = document.body.dispatchEvent;
+
+  const debugApi = {
+    debug: debugApiVersion,
     instance: {
@@ -30,2 +186,150 @@ name: process.env.BUILD_PCKG_NAME,
   };
+
+  const start = () => {
+    const registeredRoutes = context.readState((state) => Object.keys(state.registry.pages));
+    const componentRoutes = context.readState((state) => Object.keys(state.routes));
+    const routes = [...componentRoutes, ...registeredRoutes];
+    const container = JSON.parse(JSON.stringify(context.readState((s) => s)));
+    const pilets = context
+      .readState((m) => m.modules)
+      .map((pilet: any) => ({
+        name: pilet.name,
+        version: pilet.version,
+        disabled: pilet.disabled,
+      }));
+
+    sendMessage({
+      type: 'available',
+      name: debugApi.instance.name,
+      version: debugApi.instance.version,
+      kind: debugApiVersion,
+      capabilities: ['events', 'container', 'routes', 'pilets', 'settings'],
+      state: {
+        routes,
+        pilets,
+        container,
+        settings,
+        events,
+      },
+    });
+  };
+
+  document.body.dispatchEvent = function (ev: CustomEvent) {
+    if (ev.type.startsWith('piral-')) {
+      events.unshift({
+        id: events.length.toString(),
+        name: ev.type.replace('piral-', ''),
+        args: ev.detail.arg,
+        time: Date.now(),
+      });
+
+      sendMessage({
+        events,
+        type: 'events',
+      });
+    }
+
+    return eventDispatcher.call(this, ev);
+  };
+
+  context.dispatch((s) => ({
+    ...s,
+    $debug: {
+      visualize: {
+        active: settings.viewOrigins.value,
+        force: false,
+      },
+      route: undefined,
+    },
+    components: {
+      ...s.components,
+      Debug: DebugTracker,
+    },
+    registry: {
+      ...s.registry,
+      wrappers: {
+        ...s.registry.wrappers,
+        '*': VisualizationWrapper,
+      },
+    },
+  }));
+
+  window.addEventListener('storage', (event) => {
+    if (event.storageArea === sessionStorage) {
+      // potentially unknowingly updated settings
+      updateSettings({
+        viewState: sessionStorage.getItem('dbg:view-state') !== 'off',
+        loadPilets: sessionStorage.getItem('dbg:load-pilets') === 'on',
+        hardRefresh: sessionStorage.getItem('dbg:hard-refresh') === 'on',
+        viewOrigins: sessionStorage.getItem('dbg:view-origins') === 'on',
+      });
+    }
+  });
+
+  window.addEventListener('message', (event) => {
+    const { source, version, content } = event.data;
+
+    if (source !== selfSource && version === debugApiVersion) {
+      switch (content.type) {
+        case 'init':
+          return start();
+        case 'update-settings':
+          return updateSettings(content.settings);
+        case 'append-pilet':
+          return appendPilet(content.meta);
+        case 'remove-pilet':
+          return removePilet(content.name);
+        case 'toggle-pilet':
+          return togglePilet(content.name);
+        case 'emit-event':
+          return context.emit(content.name, content.args);
+        case 'goto-route':
+          return goToRoute(content.route);
+        case 'visualize-all':
+          return toggleVisualize();
+      }
+    }
+  });
+
+  if (isfunc(onChange)) {
+    onChange((previous, current) => {
+      if (settings.viewState) {
+        const infos = new Error().stack;
+
+        if (infos) {
+          // Chrome, Firefox, ... (full capability)
+          const lastLine = infos.split('\n')[7];
+
+          if (lastLine) {
+            const action = lastLine.replace(/^\s+at\s+(Atom\.|Object\.)?/, '');
+            console.group(
+              `%c Piral State Change %c ${new Date().toLocaleTimeString()}`,
+              'color: gray; font-weight: lighter;',
+              'color: black; font-weight: bold;',
+            );
+            console.log('%c Previous', `color: #9E9E9E; font-weight: bold`, previous);
+            console.log('%c Action', `color: #03A9F4; font-weight: bold`, action);
+            console.log('%c Next', `color: #4CAF50; font-weight: bold`, current);
+            console.groupEnd();
+          }
+        } else {
+          // IE 11, ... (does not know colors etc.)
+          console.log('Changed state', previous, current);
+        }
+      }
+
+      if (current.modules !== previous.modules) {
+        sendCurrentPilets(current.modules);
+      }
+
+      if (current.registry.pages !== previous.registry.pages || current.routes !== previous.routes) {
+        sendCurrentRoutes(current.registry.pages, current.routes);
+      }
+
+      sendCurrentContainer(current);
+    });
+  }
+
+  window['dbg:piral'] = debugApi;
+  start();
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 6 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92354

increased by296.93%

Number of package files

45

increased by87.5%

Lines of code

1510

increased by400%

Worsened metrics

Number of low supply chain risk alerts

12

increased byInfinity%

Number of medium supply chain risk alerts

3

increased by50%

No dependency changes