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

package/lib/state.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDebugState = exports.subscribe = exports.getState = exports.setState = exports.initialSettings = void 0;
+const react_1 = require("react");
+exports.initialSettings = {
+    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',
+    cataloguePath: '/$debug-extension-catalogue',
+};
+const listeners = [];
+let state = {
+    visualize: {
+        active: exports.initialSettings.viewOrigins,
+        force: false,
+    },
+    catalogue: {
+        active: exports.initialSettings.extensionCatalogue,
+        path: exports.initialSettings.cataloguePath,
+    },
+    route: undefined,
+};
+function setState(dispatch) {
+    const newState = dispatch(state);
+    if (newState !== state) {
+        state = newState;
+        listeners.forEach((listener) => listener());
+    }
+}
+exports.setState = setState;
+function getState() {
+    return state;
+}
+exports.getState = getState;
+function subscribe(select, notify) {
+    let prevState = select(state);
+    const cb = () => {
+        const nextState = select(state);
+        if (prevState !== nextState) {
+            prevState = nextState;
+            notify(nextState);
+        }
+    };
+    const unsubscribe = () => {
+        const idx = listeners.indexOf(cb);
+        if (idx !== -1) {
+            listeners.splice(idx, 1);
+        }
+    };
+    listeners.push(cb);
+    return unsubscribe;
+}
+exports.subscribe = subscribe;
+function useDebugState(select) {
+    const [state, setState] = (0, react_1.useState)(() => select(getState()));
+    (0, react_1.useEffect)(() => subscribe(select, setState), []);
+    return state;
+}
+exports.useDebugState = useDebugState;
+//# sourceMappingURL=state.js.map

package/lib/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../src/state.ts"],"names":[],"mappings":";;;AAAA,iCAA4C;AAE/B,QAAA,eAAe,GAAG;IAC7B,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,KAAK;IAC7D,UAAU,EAAE,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI;IAC9D,WAAW,EAAE,cAAc,CAAC,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI;IAChE,WAAW,EAAE,cAAc,CAAC,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI;IAChE,kBAAkB,EAAE,cAAc,CAAC,OAAO,CAAC,yBAAyB,CAAC,KAAK,KAAK;IAC/E,aAAa,EAAE,6BAA6B;CAC7C,CAAC;AAiBF,MAAM,SAAS,GAAsB,EAAE,CAAC;AAExC,IAAI,KAAK,GAAoB;IAC3B,SAAS,EAAE;QACT,MAAM,EAAE,uBAAe,CAAC,WAAW;QACnC,KAAK,EAAE,KAAK;KACb;IACD,SAAS,EAAE;QACT,MAAM,EAAE,uBAAe,CAAC,kBAAkB;QAC1C,IAAI,EAAE,uBAAe,CAAC,aAAa;KACpC;IACD,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,SAAgB,QAAQ,CAAC,QAAmD;IAC1E,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEjC,IAAI,QAAQ,KAAK,KAAK,EAAE;QACtB,KAAK,GAAG,QAAQ,CAAC;QACjB,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;KAC7C;AACH,CAAC;AAPD,4BAOC;AAED,SAAgB,QAAQ;IACtB,OAAO,KAAK,CAAC;AACf,CAAC;AAFD,4BAEC;AAED,SAAgB,SAAS,CAAI,MAAmC,EAAE,MAA0B;IAC1F,IAAI,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,MAAM,EAAE,GAAG,GAAG,EAAE;QACd,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAEhC,IAAI,SAAS,KAAK,SAAS,EAAE;YAC3B,SAAS,GAAG,SAAS,CAAC;YACtB,MAAM,CAAC,SAAS,CAAC,CAAC;SACnB;IACH,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,GAAG,GAAG,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAElC,IAAI,GAAG,KAAK,CAAC,CAAC,EAAE;YACd,SAAS,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;SAC1B;IACH,CAAC,CAAC;IACF,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACnB,OAAO,WAAW,CAAC;AACrB,CAAC;AAnBD,8BAmBC;AAED,SAAgB,aAAa,CAAI,MAAmC;IAClE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC7D,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC;IACjD,OAAO,KAAK,CAAC;AACf,CAAC;AAJD,sCAIC"}

package/lib/types.d.ts

@@ -1,23 +1,55 @@
-import { GlobalStateContext } from 'piral-core';
-import { AvailableDependencies, PiletApiCreator, PiletLoader, PiletRequester } from 'piral-base';
-export interface DebuggerOptions {
+import type { FC } from 'react';
+import type { Pilet, PiletApiCreator, PiletLoader, PiletMetadata } from 'piral-base';
+export interface EmulatorConnectorOptions {
     createApi: PiletApiCreator;
     loadPilet: PiletLoader;
-    context?: GlobalStateContext;
-    requestPilets: PiletRequester;
-    getDependencies(): AvailableDependencies;
-    onChange?(cb: (previous: any, current: any) => void): void;
-}
-export interface PiralDebugState {
-    $debug: {
-        visualize: {
-            force: boolean;
-            active: boolean;
-        };
-        route: string;
-    };
-}
-declare module 'piral-core/lib/types/custom' {
-    interface PiralCustomState extends PiralDebugState {
-    }
+    injectPilet?(pilet: Pilet): void;
+    piletApiFallback?: string;
+}
+export interface ChangeSet {
+    state?: boolean;
+    pages?: boolean;
+    pilets?: boolean;
+    extensions?: boolean;
+    dependencies?: boolean;
+}
+export interface DebugComponents {
+    wrappers: Record<string, FC>;
+    components: Record<string, FC>;
+    routes: Record<string, FC>;
+    onChange(previous: any, current: any, changed: ChangeSet): void;
+}
+export interface DebugCustomBooleanSetting {
+    value: boolean;
+    type: 'boolean';
+    onChange(newValue: boolean, prevValue: boolean): void;
+}
+export interface DebugCustomNumberSetting {
+    value: number;
+    type: 'number';
+    onChange(newValue: number, prevValue: number): void;
+}
+export interface DebugCustomStringSetting {
+    value: string;
+    type: 'string';
+    onChange(newValue: string, prevValue: string): void;
+}
+export declare type DebugCustomSetting = (DebugCustomBooleanSetting | DebugCustomNumberSetting | DebugCustomStringSetting) & {
+    label: string;
+};
+export interface DebuggerExtensionOptions {
+    customSettings?: Record<string, DebugCustomSetting>;
+}
+export interface DebuggerOptions extends DebuggerExtensionOptions {
+    getDependencies(): Array<string>;
+    createApi: PiletApiCreator;
+    loadPilet: PiletLoader;
+    injectPilet(pilet: Pilet): void;
+    fireEvent(name: string, arg: any): void;
+    getGlobalState(): any;
+    getPilets(): Array<PiletMetadata>;
+    getExtensions(): Array<string>;
+    getRoutes(): Array<string>;
+    setPilets(pilets: Array<PiletMetadata>): void;
+    integrate(components: DebugComponents): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-debug-utils",
-  "version": "0.13.7",
+  "version": "0.14.0-alpha.3154",
   "description": "Utilities for debugging Piral instances.",
   "keywords": [
     "piral",
@@ -38,10 +38,12 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "^0.13.7"
+    "piral-base": "^0.14.0-alpha.3154"
   },
   "peerDependencies": {
-    "piral-core": "0.13.x"
+    "piral-base": "0.14.x",
+    "react": ">=16.8.0",
+    "react-router": ">=5.0.0"
   },
-  "gitHead": "201de6c1cddaacb1e5f9646bdd17dc43acf09e8e"
+  "gitHead": "bc6cc60a59e6a8b1a154d187883cb794e8609939"
 }

package/src/DebugTracker.tsx

@@ -1,14 +1,16 @@
 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: React.FC = () => {
-  const route = useGlobalState((s) => s.$debug.route);
+export interface DebugTrackerProps {}
+
+export const DebugTracker: React.FC<DebugTrackerProps> = () => {
+  const route = useDebugState((s) => s.route);
   const history = useHistory();
 
   React.useEffect(() => {
     if (route) {
-      history.push(route);
+      history.push(route.path, route.state);
     }
   }, [route]);
 

package/src/ExtensionCatalogue.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useLocation } from 'react-router';
+
+interface ExtensionCatalogueState {
+  name: string;
+  params: any;
+}
+
+export const ExtensionCatalogue: React.FC = () => {
+  const { state } = useLocation<ExtensionCatalogueState>();
+
+  if (state) {
+    const { name = '', params = {} } = state;
+    return <piral-extension name={name} params={JSON.stringify(params)} />;
+  }
+
+  return null;
+};

package/src/VisualizationWrapper.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useLocation } from 'react-router-dom';
-import { BaseComponentProps, useGlobalState } from 'piral-core';
+import type { PiletApi } from 'piral-base';
+import { useDebugState } from './state';
 
 interface VisualizerProps {
   pilet: string;
@@ -26,7 +26,6 @@ const Visualizer: React.FC<VisualizerProps> = ({ pilet, force, active }) => {
     '#F012BE',
     '#B10DC9',
   ];
-  const location = useLocation();
   const container = React.useRef<HTMLDivElement>();
   const color = React.useMemo(
     () => moduleColor[pilet] || (moduleColor[pilet] = colors[Object.keys(moduleColor).length % colors.length]),
@@ -37,44 +36,49 @@ const Visualizer: React.FC<VisualizerProps> = ({ pilet, force, active }) => {
     let sibling = container.current && (container.current.nextElementSibling as HTMLElement);
 
     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 as HTMLElement;
+        const newSibling = container.current?.nextElementSibling as HTMLElement;
 
         if (newSibling !== sibling) {
           remove();
@@ -91,7 +95,7 @@ const Visualizer: React.FC<VisualizerProps> = ({ pilet, force, active }) => {
         observer.disconnect();
       };
     }
-  }, [location.key, active, force]);
+  }, [active, force]);
 
   if (active) {
     const rect: React.CSSProperties = {
@@ -126,8 +130,12 @@ const Visualizer: React.FC<VisualizerProps> = ({ pilet, force, active }) => {
   return null;
 };
 
-export const VisualizationWrapper: React.FC<BaseComponentProps> = ({ piral, children }) => {
-  const { active, force } = useGlobalState((m) => m.$debug.visualize);
+export interface VisualizationWrapperProps {
+  piral: PiletApi;
+}
+
+export const VisualizationWrapper: React.FC<VisualizationWrapperProps> = ({ piral, children }) => {
+  const { active, force } = useDebugState((m) => m.visualize);
   return (
     <>
       <Visualizer pilet={piral.meta.name} force={force} active={active} />