New updates for 0.5.0

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Piral Inspector Changelog
 
+## 0.5.0
+
+- Improved temporary pilet name (#11)
+- Fixed current settings display
+- Disabled source maps (#10)
+- Fixed to have a single instance per tag (#9)
+- Show the state container (#8)
+- Provide disable capability (#7)
+
 ## 0.4.0
 
 - Allow toggling state output (#6)

package.json

@@ -1,6 +1,6 @@
 {
  "name": "piral-inspector",
- "version": "0.4.0",
+ "version": "0.5.0",
  "description": "A DevTools extension for Piral instances and their pilets.",
  "keywords": [
  "piral",
@@ -38,7 +38,7 @@
  "build:opera": "npm run build:parcel -- --out-dir dist/opera && npm run build:web-ext -- -s dist/opera -a web-ext-artifacts/opera",
  "deploy:opera": "rm -rf dist/opera && npm run build:opera && shipit opera dist/opera",
  "watch:parcel": "parcel watch --no-hmr src/devtools.html",
- "build:parcel": "parcel build src/devtools.html",
+ "build:parcel": "parcel build src/devtools.html --no-source-maps",
  "watch:web-ext": "wait-on -d 6000 package.json && web-ext run",
  "build:web-ext": "web-ext build",
  "prettify": "prettier --config prettier.config.js --write \"src/**/*.{ts,tsx}\""

src/app/AdjustSettingsModal.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, useState, useEffect } from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, CustomInput, FormGroup } from 'reactstrap';
 import { jsx } from '@emotion/core';
 import { updateSettings } from './commands';
@@ -17,6 +17,12 @@ export const AdjustSettingsModal: FC<AdjustSettingsModalProps> = ({ settings, is
  toggle();
  };
 
+ useEffect(() => {
+ if (settings !== values) {
+ setValues(settings);
+ }
+ }, [settings]);
+
  return (
  <Modal isOpen={isOpen} toggle={toggle}>
  <ModalHeader toggle={toggle}>Debug Settings</ModalHeader>

src/app/App.tsx

@@ -25,6 +25,8 @@ export const App: FC<AppProps> = () => {
  return actions.updateRoutes(message.routes);
  case 'settings':
  return actions.updateSettings(message.settings);
+ case 'container':
+ return actions.updateContainer(message.container);
  case 'events':
  return actions.updateEvents(message.events);
  }

src/app/AvailablePilets.tsx

@@ -1,22 +1,28 @@
 import { FC } from 'react';
-import { ListGroup, ListGroupItem, Button } from 'reactstrap';
+import { ListGroup, ListGroupItem, Button, CustomInput } from 'reactstrap';
 import { jsx } from '@emotion/core';
-import { removePilet } from './commands';
+import { removePilet, togglePilet } from './commands';
 import { useStore } from './store';
 
 export interface AvailablePiletsProps {}
 
 export const AvailablePilets: FC<AvailablePiletsProps> = () => {
- const pilets = useStore(m => m.state.pilets);
+ const pilets = useStore(m => m.state.pilets) ?? [];
+
  return (
  <ListGroup>
- {pilets &&
- pilets.map(pilet => (
- <ListGroupItem key={pilet.name}>
- <Button onClick={() => removePilet(pilet.name)} close />
- {pilet.name}
- </ListGroupItem>
- ))}
+ {pilets.map(pilet => (
+ <ListGroupItem key={pilet.name}>
+ <Button onClick={() => removePilet(pilet.name)} close />
+ <CustomInput
+ type="switch"
+ id={`toggle-${pilet.name}`}
+ label={pilet.name}
+ checked={!pilet.disabled}
+ onChange={() => togglePilet(pilet.name)}
+ />
+ </ListGroupItem>
+ ))}
  </ListGroup>
  );
 };

src/app/StateContainer.tsx

@@ -0,0 +1,124 @@
+import { FC, Fragment, useState } from 'react';
+import {
+ ListGroup,
+ ListGroupItem,
+ ListGroupItemHeading,
+ ListGroupItemText,
+ Breadcrumb,
+ BreadcrumbItem,
+} from 'reactstrap';
+import { jsx } from '@emotion/core';
+import { useStore } from './store';
+
+function display(value: any) {
+ switch (typeof value) {
+ case 'boolean':
+ case 'number':
+ case 'string':
+ case 'bigint':
+ case 'symbol':
+ return (
+ <span>
+ <b>({typeof value})</b> <code>{value.toString()}</code>
+ </span>
+ );
+ case 'object':
+ if (Array.isArray(value)) {
+ return (
+ <span>
+ <b>(Array)</b> <code>[{value.length} entries]</code>
+ </span>
+ );
+ } else if (!value) {
+ return (
+ <span>
+ <code>null</code>
+ </span>
+ );
+ } else {
+ return (
+ <span>
+ <b>(Object)</b> <code>[{Object.keys(value).length} keys]</code>
+ </span>
+ );
+ }
+ case 'undefined':
+ return (
+ <span>
+ <code>undefined</code>
+ </span>
+ );
+ default:
+ return (
+ <span>
+ <b>(unknown)</b> <code>{typeof value}</code>
+ </span>
+ );
+ }
+}
+
+function removeIfEmpty(value: any) {
+ /**
+ * We have an object (non-null) that has no keys -> potentially should be removed.
+ */
+ if (typeof value === 'object' && value && Object.keys(value).length === 0) {
+ return false;
+ }
+
+ return true;
+}
+
+export interface StateContainerProps {}
+
+export const StateContainer: FC<StateContainerProps> = () => {
+ const container = useStore(m => m.state.container);
+ const [path, setPath] = useState([]);
+ const current = path.reduce((prev, curr) => prev[curr] ?? {}, container);
+
+ return (
+ <Fragment>
+ <Breadcrumb>
+ <BreadcrumbItem>
+ <a
+ href="#"
+ onClick={e => {
+ setPath(path.slice(0, 0));
+ e.preventDefault();
+ }}>
+ #
+ </a>
+ </BreadcrumbItem>
+ {path.map((item, i) => (
+ <BreadcrumbItem key={`${i}_${item}`}>
+ <a
+ href="#"
+ onClick={e => {
+ setPath(path.slice(0, i + 1));
+ e.preventDefault();
+ }}>
+ {item}
+ </a>
+ </BreadcrumbItem>
+ ))}
+ </Breadcrumb>
+ <ListGroup>
+ {Object.keys(current)
+ .filter(c => removeIfEmpty(current[c]))
+ .map(c => (
+ <ListGroupItem
+ key={c}
+ tag="a"
+ href="#"
+ action
+ onClick={e => {
+ setPath([...path, c]);
+ e.preventDefault();
+ }}>
+ <ListGroupItemHeading>{c}</ListGroupItemHeading>
+ <ListGroupItemText>{display(current[c])}</ListGroupItemText>
+ </ListGroupItem>
+ ))}
+ </ListGroup>
+ </Fragment>
+ );
+};

src/app/View.tsx

@@ -6,6 +6,7 @@ import { UploadPilets } from './UploadPilets';
 import { RecordedEvents } from './RecordedEvents';
 import { AvailablePilets } from './AvailablePilets';
 import { RegisteredRoutes } from './RegisteredRoutes';
+import { StateContainer } from './StateContainer';
 import { useStore } from './store';
 import { connectedView, notConnectedView, appSectionView } from './styles';
 
@@ -40,6 +41,11 @@ export const View: FC<ViewProps> = () => {
  <p>These events from the Piral instance have been recorded so far.</p>
  <RecordedEvents />
  </div>
+ <div css={appSectionView}>
+ <h3>State Container</h3>
+ <p>The currently available global state.</p>
+ <StateContainer />
+ </div>
  </div>
  );
  }

src/app/commands.ts

@@ -59,6 +59,13 @@ export function appendPilet(meta: PiletMetadata) {
  });
 }
 
+export function togglePilet(name: string) {
+ emit({
+ type: 'toggle-pilet',
+ name,
+ })
+}
+
 export function updateSettings(settings: PiralDebugSettings) {
  emit({
  type: 'update-settings',

src/app/store.ts

@@ -10,6 +10,7 @@ export interface StoreState {
  pilets?: Array<any>;
  routes?: Array<any>;
  events?: Array<PiralEvent>;
+ container?: any;
  settings?: PiralDebugSettings;
 }
 
@@ -20,6 +21,7 @@ export interface StoreActions {
  updateRoutes(routes: Array<string>): void;
  updateSettings(settings: PiralDebugSettings): void;
  updateEvents(events: Array<PiralEvent>): void;
+ updateContainer(container: any): void;
 }
 
 export interface Store {
@@ -51,6 +53,7 @@ const [useStore] = create<Store>(set => ({
  events: [],
  pilets: [],
  routes: [],
+ container: {},
  settings: {
  loadPilets: false,
  viewState: true,
@@ -85,6 +88,11 @@ const [useStore] = create<Store>(set => ({
  events,
  }));
  },
+ updateContainer(container) {
+ dispatch(set, () => ({
+ container,
+ }));
+ },
  },
 }));
 

src/app/utils.ts

@@ -13,9 +13,10 @@ export function injectPiletsFromUrl(url: string) {
  }
  },
  () => {
+ const path = url.substr(url.indexOf('//') + 2).replace(/\//g, '-');
  // it's a JS (or non-JSON) file!
  appendPilet({
- name: 'temp-pilet',
+ name: `pilet-${path}`,
  version: '1.0.0',
  link: url,
  });

src/manifest.json

@@ -8,7 +8,7 @@
  },
  "name": "Piral Inspector",
  "short_name": "pi-inspect",
- "version": "0.4.0",
+ "version": "0.5.0",
  "description": "The official Piral developer tools browser extension.",
  "author": "smapiot",
  "homepage_url": "https://piral.io",

src/scripts/helpers.ts

@@ -61,7 +61,9 @@ export function getSettings() {
  const loadPilets = sessionStorage.getItem('dbg:load-pilets') === 'on';
  const hardRefresh = sessionStorage.getItem('dbg:hard-refresh') === 'on';
  const ev = new CustomEvent('piral-settings', {
- detail: { viewState, loadPilets, hardRefresh },
+ detail: {
+ settings: { viewState, loadPilets, hardRefresh },
+ },
  });
  window.dispatchEvent(ev);
  `);
@@ -153,6 +155,27 @@ export function listenToEvents() {
  `);
 }
 
+export function togglePilet(name: string) {
+ injectScript(`
+ const dp = window['dbg:piral'];
+ const ctx = dp.instance.context;
+ const [pilet] = ctx.readState(state => state.modules).filter(m => m.name === ${JSON.stringify(name)});
+
+ if (pilet.disabled) {
+ try {
+ const { createApi } = dp.pilets;
+ const newApi = createApi(pilet);
+ ctx.injectPilet(pilet.original);
+ pilet.original.setup(newApi);
+ } catch (error) {
+ console.error(error);
+ }
+ } else {
+ ctx.injectPilet({ name: ${JSON.stringify(name)}, disabled: true, original: pilet });
+ }
+ `);
+}
+
 export function removePilet(name: string) {
  injectScript(`
  const dp = window['dbg:piral'];
@@ -171,6 +194,15 @@ export function supervise() {
  const deps = dp.pilets.getDependencies();
  const ctx = dp.instance.context;
  const { addChangeHandler } = deps['@dbeining/react-atom'];
+ const triggerUpdate = (current) => {
+ window.dispatchEvent(new CustomEvent('piral-container', {
+ detail: {
+ container: JSON.parse(JSON.stringify(current)),
+ },
+ }));
+ };
+
+ triggerUpdate(ctx.readState(state => state));
 
  addChangeHandler(ctx.state, 'inspector', ({ current, previous }) => {
  if (current.modules !== previous.modules) {
@@ -190,6 +222,8 @@ export function supervise() {
  });
  window.dispatchEvent(ev);
  }
+
+ triggerUpdate(current);
  });
  `);
 }