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

package/src/debug.ts

@@ -1,35 +1,77 @@
-import { isfunc } from 'piral-base';
 import { DebugTracker } from './DebugTracker';
 import { VisualizationWrapper } from './VisualizationWrapper';
-import { DebuggerOptions } from './types';
+import { ExtensionCatalogue } from './ExtensionCatalogue';
+import { decycle } from './decycle';
+import { setState, initialSettings } from './state';
+import { DebugCustomSetting, DebuggerOptions } from './types';
 
 export function installPiralDebug(options: DebuggerOptions) {
-  const { context, onChange, ...pilets } = options;
+  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 = {
+  const settings: Record<string, DebugCustomSetting> = {
+    ...customSettings,
     viewState: {
-      value: sessionStorage.getItem('dbg:view-state') !== 'off',
+      value: initialSettings.viewState,
       type: 'boolean',
       label: 'State container logging',
+      onChange(value) {
+        sessionStorage.setItem('dbg:view-state', value ? 'on' : 'off');
+      },
     },
     loadPilets: {
-      value: sessionStorage.getItem('dbg:load-pilets') === 'on',
+      value: initialSettings.loadPilets,
       type: 'boolean',
       label: 'Load available pilets',
+      onChange(value) {
+        sessionStorage.setItem('dbg:load-pilets', value ? 'on' : 'off');
+      },
     },
     hardRefresh: {
-      value: sessionStorage.getItem('dbg:hard-refresh') === 'on',
+      value: initialSettings.hardRefresh,
       type: 'boolean',
       label: 'Full refresh on change',
+      onChange(value) {
+        sessionStorage.setItem('dbg:hard-refresh', value ? 'on' : 'off');
+      },
     },
     viewOrigins: {
-      value: sessionStorage.getItem('dbg:view-origins') === 'on',
+      value: initialSettings.viewOrigins,
       type: 'boolean',
       label: 'Visualize component origins',
+      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 events = [];
 
   const sendMessage = (content: any) => {
     window.postMessage(
@@ -42,79 +84,84 @@ export function installPiralDebug(options: DebuggerOptions) {
     );
   };
 
-  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 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,
+        };
+      }
 
-  const setSetting = (setting: { value: any }, key: string, value: any) => {
-    setting.value = value;
-    sessionStorage.setItem(key, value ? 'on' : 'off');
+      return obj;
+    }, {});
   };
 
   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);
-    }
+    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: string) => {
-    const pilet: any = context.readState((state) => state.modules).find((m) => m.name === name);
+    const pilet: any = 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) {
         console.error(error);
       }
     } else {
-      context.injectPilet({ name, disabled: true, original: pilet } as any);
+      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 pilets = getPilets().filter((m) => m.name !== name);
+    injectPilet({ name } as any);
+    setPilets(pilets);
   };
 
   const appendPilet = (meta: any) => {
@@ -122,7 +169,7 @@ export function installPiralDebug(options: DebuggerOptions) {
     loadPilet(meta).then((pilet) => {
       try {
         const newApi = createApi(pilet);
-        context.injectPilet(pilet);
+        injectPilet(pilet);
         pilet.setup(newApi as any);
       } catch (error) {
         console.error(error);
@@ -131,37 +178,31 @@ export function installPiralDebug(options: DebuggerOptions) {
   };
 
   const toggleVisualize = () => {
-    context.dispatch((s) => ({
+    setState((s) => ({
       ...s,
-      $debug: {
-        ...s.$debug,
-        visualize: {
-          ...s.$debug.visualize,
-          force: !s.$debug.visualize.force,
-        },
+      visualize: {
+        ...s.visualize,
+        force: !s.visualize.force,
       },
     }));
   };
 
   const updateVisualize = (active: boolean) => {
-    context.dispatch((s) => ({
+    setState((s) => ({
       ...s,
-      $debug: {
-        ...s.$debug,
-        visualize: {
-          ...s.$debug.visualize,
-          active,
-        },
+      visualize: {
+        ...s.visualize,
+        active,
       },
     }));
   };
 
-  const goToRoute = (route: string) => {
-    context.dispatch((s) => ({
+  const goToRoute = (path: string, state?: any) => {
+    setState((s) => ({
       ...s,
-      $debug: {
-        ...s.$debug,
-        route,
+      route: {
+        path,
+        state,
       },
     }));
   };
@@ -174,41 +215,45 @@ export function installPiralDebug(options: DebuggerOptions) {
       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: any) => ({
-        name: pilet.name,
-        version: pilet.version,
-        disabled: pilet.disabled,
-      }));
+    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: 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'],
+      mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+      capabilities: ['events', 'container', 'routes', 'pilets', 'settings', 'extensions', 'dependencies'],
       state: {
         routes,
         pilets,
         container,
         settings,
         events,
+        extensions,
+        dependencies,
       },
     });
   };
@@ -218,7 +263,7 @@ export function installPiralDebug(options: DebuggerOptions) {
       events.unshift({
         id: events.length.toString(),
         name: ev.type.replace('piral-', ''),
-        args: ev.detail.arg,
+        args: decycle(ev.detail.arg),
         time: Date.now(),
       });
 
@@ -231,36 +276,15 @@ export function installPiralDebug(options: DebuggerOptions) {
     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) {
+    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',
       });
     }
   });
@@ -281,53 +305,90 @@ export function installPiralDebug(options: DebuggerOptions) {
         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: any) => ({
+            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();

package/src/decycle.ts

@@ -0,0 +1,55 @@
+export function decycle(obj: Record<string, any>) {
+  const objects = [];
+  const paths = [];
+
+  const derez = (value: Record<string, any>, path: string) => {
+    const _value = value && value.toJSON instanceof Function ? value.toJSON() : value;
+
+    if (_value === null || _value === undefined) {
+      return undefined;
+    } else if (typeof _value === 'function') {
+      return `<function>`;
+    } else if (_value instanceof Error) {
+      return `<error>`;
+    } else if (_value instanceof Node) {
+      return `<node>`;
+    } else if (typeof _value === 'object') {
+      for (let i = 0; i < objects.length; i++) {
+        if (objects[i] === _value) {
+          return { $ref: paths[i] };
+        }
+      }
+
+      objects.push(_value);
+      paths.push(path);
+
+      if (Array.isArray(_value)) {
+        const nu = [];
+
+        for (let i = 0; i < _value.length; i += 1) {
+          nu[i] = derez(_value[i], `${path}[${i}]`);
+        }
+
+        return nu;
+      } else {
+        const nu = {};
+
+        for (const name in _value) {
+          if (Object.prototype.hasOwnProperty.call(_value, name)) {
+            nu[name] = derez(_value[name], `${path}[${JSON.stringify(name)}]`);
+          }
+        }
+
+        return nu;
+      }
+    } else if (typeof _value === 'symbol') {
+      return '<symbol>';
+    } else if (typeof _value === 'bigint') {
+      return '<bigint>';
+    }
+
+    return _value;
+  };
+
+  return derez(obj, '$');
+}

package/src/elements.d.ts

@@ -0,0 +1,10 @@
+interface PiralExtensionProps {
+  name: string;
+  params: string;
+}
+
+declare module JSX {
+  interface IntrinsicElements {
+    'piral-extension': React.DetailedHTMLProps<PiralExtensionProps, {}>;
+  }
+}

package/src/emulator.ts

@@ -1,14 +1,8 @@
-import { isfunc, Pilet, PiletApiCreator, PiletLoader, PiletRequester, setupPilet } from 'piral-base';
-
-export interface EmulatorConnectorOptions {
-  createApi: PiletApiCreator;
-  loadPilet: PiletLoader;
-  inject?(pilet: Pilet): void;
-  piletApiFallback?: string;
-}
+import { isfunc, PiletRequester, setupPilet } from 'piral-base';
+import { EmulatorConnectorOptions } from './types';
 
 export function withEmulatorPilets(requestPilets: PiletRequester, options: EmulatorConnectorOptions): PiletRequester {
-  const { loadPilet, createApi, inject, piletApiFallback = '/$pilet-api' } = options;
+  const { loadPilet, createApi, injectPilet, piletApiFallback = '/$pilet-api' } = options;
   // check if pilets should be loaded
   const loadPilets = sessionStorage.getItem('dbg:load-pilets') === 'on';
   const noPilets: PiletRequester = () => Promise.resolve([]);
@@ -37,10 +31,15 @@ export function withEmulatorPilets(requestPilets: PiletRequester, options: Emula
       if (!hardRefresh) {
         // standard setting is to just perform an inject
         const meta = JSON.parse(data);
+        
+        // tear down pilet
+        injectPilet({ name: meta.name } as any);
+
+        // load and evaluate pilet
         loadPilet(meta).then((pilet) => {
           try {
-            if (isfunc(inject)) {
-              inject(pilet);
+            if (isfunc(injectPilet)) {
+              injectPilet(pilet);
             }
 
             setupPilet(pilet, createApi);

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './debug';
 export * from './emulator';
+export * from './types';