piral-debug-utils 0.13.7 → 0.14.0-alpha.3154

package/esm/DebugTracker.d.ts

@@ -1,2 +1,4 @@
 import * as React from 'react';
-export declare const DebugTracker: React.FC;
+export interface DebugTrackerProps {
+}
+export declare const DebugTracker: React.FC<DebugTrackerProps>;

package/esm/DebugTracker.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
-import { useGlobalState } from 'piral-core';
+import { useHistory } from 'react-router';
+import { useDebugState } from './state';
 export const DebugTracker = () => {
-    const route = useGlobalState((s) => s.$debug.route);
+    const route = useDebugState((s) => s.route);
     const history = useHistory();
     React.useEffect(() => {
         if (route) {
-            history.push(route);
+            history.push(route.path, route.state);
         }
     }, [route]);
     // tslint:disable-next-line:no-null-keyword

package/esm/DebugTracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DebugTracker.js","sourceRoot":"","sources":["../src/DebugTracker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,CAAC,MAAM,YAAY,GAAa,GAAG,EAAE;IACzC,MAAM,KAAK,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,EAAE;YACT,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACrB;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,2CAA2C;IAC3C,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}
+{"version":3,"file":"DebugTracker.js","sourceRoot":"","sources":["../src/DebugTracker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,CAAC,MAAM,YAAY,GAAgC,GAAG,EAAE;IAC5D,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,EAAE;YACT,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;SACvC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,2CAA2C;IAC3C,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/esm/ExtensionCatalogue.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ExtensionCatalogue: React.FC;

package/esm/ExtensionCatalogue.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { useLocation } from 'react-router';
+export const ExtensionCatalogue = () => {
+    const { state } = useLocation();
+    if (state) {
+        const { name = '', params = {} } = state;
+        return React.createElement("piral-extension", { name: name, params: JSON.stringify(params) });
+    }
+    return null;
+};
+//# sourceMappingURL=ExtensionCatalogue.js.map

package/esm/ExtensionCatalogue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionCatalogue.js","sourceRoot":"","sources":["../src/ExtensionCatalogue.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAO3C,MAAM,CAAC,MAAM,kBAAkB,GAAa,GAAG,EAAE;IAC/C,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAA2B,CAAC;IAEzD,IAAI,KAAK,EAAE;QACT,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;QACzC,OAAO,yCAAiB,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAI,CAAC;KACxE;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/esm/VisualizationWrapper.d.ts

@@ -1,3 +1,6 @@
 import * as React from 'react';
-import { BaseComponentProps } from 'piral-core';
-export declare const VisualizationWrapper: React.FC<BaseComponentProps>;
+import type { PiletApi } from 'piral-base';
+export interface VisualizationWrapperProps {
+    piral: PiletApi;
+}
+export declare const VisualizationWrapper: React.FC<VisualizationWrapperProps>;

package/esm/VisualizationWrapper.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useLocation } from 'react-router-dom';
-import { useGlobalState } from 'piral-core';
+import { useDebugState } from './state';
 const moduleColor = {};
 const Visualizer = ({ pilet, force, active }) => {
     const colors = [
@@ -18,50 +17,55 @@ const Visualizer = ({ pilet, force, active }) => {
         '#F012BE',
         '#B10DC9',
     ];
-    const location = useLocation();
     const container = React.useRef();
     const color = React.useMemo(() => moduleColor[pilet] || (moduleColor[pilet] = colors[Object.keys(moduleColor).length % colors.length]), [pilet]);
     React.useEffect(() => {
         let sibling = container.current && container.current.nextElementSibling;
         if (sibling && active) {
-            const style = container.current.style;
             const target = container.current.parentNode;
             const mouseIn = () => {
-                style.display = 'block';
-                style.left = '0px';
-                style.top = '0px';
-                style.bottom = '0px';
-                style.right = '0px';
-                const targetRect = sibling.getBoundingClientRect();
-                const sourceRect = container.current.getBoundingClientRect();
-                style.left = targetRect.left - sourceRect.left + 'px';
-                style.top = targetRect.top - sourceRect.top + 'px';
-                style.bottom = -(targetRect.bottom - sourceRect.bottom) + 'px';
-                style.right = -(targetRect.right - sourceRect.right) + 'px';
+                if (container.current && sibling) {
+                    const style = container.current.style;
+                    style.display = 'block';
+                    style.left = '0px';
+                    style.top = '0px';
+                    style.bottom = '0px';
+                    style.right = '0px';
+                    const targetRect = sibling.getBoundingClientRect();
+                    const sourceRect = container.current.getBoundingClientRect();
+                    style.left = targetRect.left - sourceRect.left + 'px';
+                    style.top = targetRect.top - sourceRect.top + 'px';
+                    style.bottom = -(targetRect.bottom - sourceRect.bottom) + 'px';
+                    style.right = -(targetRect.right - sourceRect.right) + 'px';
+                }
             };
             const mouseOut = () => {
-                style.display = 'none';
+                if (container.current) {
+                    const style = container.current.style;
+                    style.display = 'none';
+                }
             };
             const append = () => {
-                if (!force) {
+                if (force) {
+                    mouseIn();
+                }
+                else if (sibling) {
                     sibling.addEventListener('mouseover', mouseIn);
                     sibling.addEventListener('mouseout', mouseOut);
                 }
-                else {
-                    mouseIn();
-                }
             };
             const remove = () => {
-                if (!force) {
+                if (force) {
+                    mouseOut();
+                }
+                else if (sibling) {
                     sibling.removeEventListener('mouseover', mouseIn);
                     sibling.removeEventListener('mouseout', mouseOut);
                 }
-                else {
-                    mouseOut();
-                }
             };
             const observer = new MutationObserver(() => {
-                const newSibling = container.current.nextElementSibling;
+                var _a;
+                const newSibling = (_a = container.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
                 if (newSibling !== sibling) {
                     remove();
                     sibling = newSibling;
@@ -75,7 +79,7 @@ const Visualizer = ({ pilet, force, active }) => {
                 observer.disconnect();
             };
         }
-    }, [location.key, active, force]);
+    }, [active, force]);
     if (active) {
         const rect = {
             border: '1px solid red',
@@ -104,7 +108,7 @@ const Visualizer = ({ pilet, force, active }) => {
     return null;
 };
 export const VisualizationWrapper = ({ piral, children }) => {
-    const { active, force } = useGlobalState((m) => m.$debug.visualize);
+    const { active, force } = useDebugState((m) => m.visualize);
     return (React.createElement(React.Fragment, null,
         React.createElement(Visualizer, { pilet: piral.meta.name, force: force, active: active }),
         children));

package/esm/VisualizationWrapper.js.map

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

package/esm/debug.js

@@ -1,44 +1,54 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { isfunc } from 'piral-base';
 import { DebugTracker } from './DebugTracker';
 import { VisualizationWrapper } from './VisualizationWrapper';
+import { ExtensionCatalogue } from './ExtensionCatalogue';
+import { decycle } from './decycle';
+import { setState, initialSettings } from './state';
 export function installPiralDebug(options) {
-    const { context, onChange } = options, pilets = __rest(options, ["context", "onChange"]);
+    const { injectPilet, getGlobalState, getExtensions, getDependencies, getRoutes, getPilets, setPilets, fireEvent, integrate, createApi, loadPilet, customSettings = {}, } = options;
+    const events = [];
+    const legacyBrowser = !new Error().stack;
+    const excludedRoutes = [initialSettings.cataloguePath];
     const selfSource = 'piral-debug-api';
     const debugApiVersion = 'v1';
-    const settings = {
-        viewState: {
-            value: sessionStorage.getItem('dbg:view-state') !== 'off',
+    const settings = Object.assign(Object.assign({}, customSettings), { viewState: {
+            value: initialSettings.viewState,
             type: 'boolean',
             label: 'State container logging',
-        },
-        loadPilets: {
-            value: sessionStorage.getItem('dbg:load-pilets') === 'on',
+            onChange(value) {
+                sessionStorage.setItem('dbg:view-state', value ? 'on' : 'off');
+            },
+        }, loadPilets: {
+            value: initialSettings.loadPilets,
             type: 'boolean',
             label: 'Load available pilets',
-        },
-        hardRefresh: {
-            value: sessionStorage.getItem('dbg:hard-refresh') === 'on',
+            onChange(value) {
+                sessionStorage.setItem('dbg:load-pilets', value ? 'on' : 'off');
+            },
+        }, hardRefresh: {
+            value: initialSettings.hardRefresh,
             type: 'boolean',
             label: 'Full refresh on change',
-        },
-        viewOrigins: {
-            value: sessionStorage.getItem('dbg:view-origins') === 'on',
+            onChange(value) {
+                sessionStorage.setItem('dbg:hard-refresh', value ? 'on' : 'off');
+            },
+        }, viewOrigins: {
+            value: initialSettings.viewOrigins,
             type: 'boolean',
             label: 'Visualize component origins',
-        },
-    };
-    const events = [];
+            onChange(value, prev) {
+                sessionStorage.setItem('dbg:view-origins', value ? 'on' : 'off');
+                if (prev !== value) {
+                    updateVisualize(value);
+                }
+            },
+        }, extensionCatalogue: {
+            value: initialSettings.extensionCatalogue,
+            type: 'boolean',
+            label: 'Enable extension catalogue',
+            onChange(value) {
+                sessionStorage.setItem('dbg:extension-catalogue', value ? 'on' : 'off');
+            },
+        } });
     const sendMessage = (content) => {
         window.postMessage({
             content,
@@ -46,56 +56,62 @@ export function installPiralDebug(options) {
             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 getSettings = () => {
+        return Object.keys(settings).reduce((obj, key) => {
+            const setting = settings[key];
+            if (setting &&
+                typeof setting === 'object' &&
+                typeof setting.label === 'string' &&
+                typeof setting.type === 'string' &&
+                ['boolean', 'string', 'number'].includes(typeof setting.value)) {
+                obj[key] = {
+                    label: setting.label,
+                    value: setting.value,
+                    type: setting.type,
+                };
+            }
+            return obj;
+        }, {});
     };
     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);
-        }
+        Object.keys(values).forEach((key) => {
+            const setting = settings[key];
+            switch (setting.type) {
+                case 'boolean': {
+                    const prev = setting.value;
+                    const value = values[key];
+                    setting.value = value;
+                    setting.onChange(value, prev);
+                    break;
+                }
+                case 'number': {
+                    const prev = setting.value;
+                    const value = values[key];
+                    setting.value = value;
+                    setting.onChange(value, prev);
+                    break;
+                }
+                case 'string': {
+                    const prev = setting.value;
+                    const value = values[key];
+                    setting.value = value;
+                    setting.onChange(value, prev);
+                    break;
+                }
+            }
+        });
         sendMessage({
-            settings,
+            settings: getSettings(),
             type: 'settings',
         });
     };
     const togglePilet = (name) => {
-        const pilet = context.readState((state) => state.modules).find((m) => m.name === name);
+        const pilet = getPilets().find((m) => m.name === name);
         if (pilet.disabled) {
             try {
                 const { createApi } = options;
                 const newApi = createApi(pilet);
-                context.injectPilet(pilet.original);
+                injectPilet(pilet.original);
                 pilet.original.setup(newApi);
             }
             catch (error) {
@@ -103,19 +119,20 @@ export function installPiralDebug(options) {
             }
         }
         else {
-            context.injectPilet({ name, disabled: true, original: pilet });
+            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 pilets = getPilets().filter((m) => m.name !== name);
+        injectPilet({ name });
+        setPilets(pilets);
     };
     const appendPilet = (meta) => {
         const { createApi, loadPilet } = options;
         loadPilet(meta).then((pilet) => {
             try {
                 const newApi = createApi(pilet);
-                context.injectPilet(pilet);
+                injectPilet(pilet);
                 pilet.setup(newApi);
             }
             catch (error) {
@@ -124,13 +141,16 @@ export function installPiralDebug(options) {
         });
     };
     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 }) }) })));
+        setState((s) => (Object.assign(Object.assign({}, s), { visualize: Object.assign(Object.assign({}, s.visualize), { force: !s.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 }) }) })));
+        setState((s) => (Object.assign(Object.assign({}, s), { visualize: Object.assign(Object.assign({}, s.visualize), { active }) })));
     };
-    const goToRoute = (route) => {
-        context.dispatch((s) => (Object.assign(Object.assign({}, s), { $debug: Object.assign(Object.assign({}, s.$debug), { route }) })));
+    const goToRoute = (path, state) => {
+        setState((s) => (Object.assign(Object.assign({}, s), { route: {
+                path,
+                state,
+            } })));
     };
     const eventDispatcher = document.body.dispatchEvent;
     const debugApi = {
@@ -139,23 +159,24 @@ export function installPiralDebug(options) {
             name: process.env.BUILD_PCKG_NAME,
             version: process.env.BUILD_PCKG_VERSION,
             dependencies: process.env.SHARED_DEPENDENCIES,
-            context,
         },
         build: {
             date: process.env.BUILD_TIME_FULL,
             cli: process.env.PIRAL_CLI_VERSION,
             compat: process.env.DEBUG_PIRAL,
         },
-        pilets,
+        pilets: {
+            loadPilet,
+            createApi,
+        },
     };
     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) => ({
+        const container = decycle(getGlobalState());
+        const routes = getRoutes().filter((r) => !excludedRoutes.includes(r));
+        const extensions = getExtensions();
+        const settings = getSettings();
+        const dependencies = getDependencies();
+        const pilets = getPilets().map((pilet) => ({
             name: pilet.name,
             version: pilet.version,
             disabled: pilet.disabled,
@@ -165,13 +186,16 @@ export function installPiralDebug(options) {
             name: debugApi.instance.name,
             version: debugApi.instance.version,
             kind: debugApiVersion,
-            capabilities: ['events', 'container', 'routes', 'pilets', 'settings'],
+            mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+            capabilities: ['events', 'container', 'routes', 'pilets', 'settings', 'extensions', 'dependencies'],
             state: {
                 routes,
                 pilets,
                 container,
                 settings,
                 events,
+                extensions,
+                dependencies,
             },
         });
     };
@@ -180,7 +204,7 @@ export function installPiralDebug(options) {
             events.unshift({
                 id: events.length.toString(),
                 name: ev.type.replace('piral-', ''),
-                args: ev.detail.arg,
+                args: decycle(ev.detail.arg),
                 time: Date.now(),
             });
             sendMessage({
@@ -190,21 +214,15 @@ export function installPiralDebug(options) {
         }
         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) {
+        if (!legacyBrowser && 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',
+                extensionCatalogue: sessionStorage.getItem('dbg:extension-catalogue') !== 'off',
             });
         }
     });
@@ -223,44 +241,80 @@ export function installPiralDebug(options) {
                 case 'toggle-pilet':
                     return togglePilet(content.name);
                 case 'emit-event':
-                    return context.emit(content.name, content.args);
+                    return fireEvent(content.name, content.args);
                 case 'goto-route':
-                    return goToRoute(content.route);
+                    return goToRoute(content.route, content.state);
                 case 'visualize-all':
                     return toggleVisualize();
             }
         }
     });
-    if (isfunc(onChange)) {
-        onChange((previous, current) => {
-            if (settings.viewState.value) {
-                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();
+    integrate({
+        components: {
+            Debug: DebugTracker,
+        },
+        routes: {
+            [initialSettings.cataloguePath]: ExtensionCatalogue,
+        },
+        wrappers: {
+            '*': VisualizationWrapper,
+        },
+        onChange(previous, current, changed) {
+            if (changed.state) {
+                if (settings.viewState.value) {
+                    if (!legacyBrowser) {
+                        // Chrome, Firefox, ... (full capability)
+                        const err = new Error();
+                        const lastLine = err.stack.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);
                     }
                 }
-                else {
-                    // IE 11, ... (does not know colors etc.)
-                    console.log('Changed state', previous, current);
-                }
+                sendMessage({
+                    type: 'container',
+                    container: decycle(getGlobalState()),
+                });
             }
-            if (current.modules !== previous.modules) {
-                sendCurrentPilets(current.modules);
+            if (changed.pilets) {
+                sendMessage({
+                    type: 'pilets',
+                    pilets: getPilets().map((pilet) => ({
+                        name: pilet.name,
+                        version: pilet.version,
+                        disabled: !!pilet.disabled,
+                    })),
+                });
             }
-            if (current.registry.pages !== previous.registry.pages || current.routes !== previous.routes) {
-                sendCurrentRoutes(current.registry.pages, current.routes);
+            if (changed.pages) {
+                sendMessage({
+                    type: 'routes',
+                    routes: getRoutes().filter((r) => !excludedRoutes.includes(r)),
+                });
             }
-            sendCurrentContainer(current);
-        });
-    }
+            if (changed.extensions) {
+                sendMessage({
+                    type: 'extensions',
+                    extensions: getExtensions(),
+                });
+            }
+            if (changed.dependencies) {
+                sendMessage({
+                    type: 'dependencies',
+                    dependencies: getDependencies(),
+                });
+            }
+        },
+    });
     window['dbg:piral'] = debugApi;
     start();
 }