@lvce-editor/component-state-worker 0.1.1 → 0.3.0

package/README.md

@@ -5,3 +5,22 @@ Inspect and edit live LVCE Editor component state as JSON.
 The worker provides the component-state grid view and the
 `live-component-state:///<uid>.json` filesystem implementation used by LVCE
 Editor.
+
+## Development
+
+```sh
+npm ci
+npm run dev
+```
+
+Open `http://localhost:3000`, then run `Developer: Open Component State` from
+the command palette. Select an editable component to open its live state as a
+JSON file. Saving that file applies the new state to the running component.
+
+Run the browser tests headlessly with:
+
+```sh
+npm run build
+npm run build:static
+npm run e2e:headless
+```

package/dist/componentStateWorkerMain.js

@@ -54,6 +54,49 @@ class VError extends Error {
   }
 }
 
+class AssertionError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'AssertionError';
+  }
+}
+const Object$1 = 1;
+const Number$1 = 2;
+const Array$1 = 3;
+const String$1 = 4;
+const Boolean = 5;
+const Function = 6;
+const Null = 7;
+const Unknown = 8;
+const getType = value => {
+  switch (typeof value) {
+    case 'number':
+      return Number$1;
+    case 'function':
+      return Function;
+    case 'string':
+      return String$1;
+    case 'object':
+      if (value === null) {
+        return Null;
+      }
+      if (Array.isArray(value)) {
+        return Array$1;
+      }
+      return Object$1;
+    case 'boolean':
+      return Boolean;
+    default:
+      return Unknown;
+  }
+};
+const object = value => {
+  const type = getType(value);
+  if (type !== Object$1) {
+    throw new AssertionError('expected value to be of type object');
+  }
+};
+
 const isMessagePort = value => {
   return value && value instanceof MessagePort;
 };
@@ -967,6 +1010,9 @@ const {
   invoke,
   set: set$1
 } = create$2(RendererWorker);
+const getComponents = async () => {
+  return invoke('ComponentState.getComponents');
+};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1249,12 +1295,20 @@ const create = (uid, x, y, width, height) => {
   set(uid, state, state);
 };
 
+const cardGap = 8;
+const cardMinWidth = 180;
+const viewHorizontalPadding = 32;
+const getColumnCount = width => {
+  const availableWidth = Math.max(0, width - viewHorizontalPadding);
+  return Math.max(1, Math.floor((availableWidth + cardGap) / (cardMinWidth + cardGap)));
+};
+
 const diff2 = uid => {
   const {
     oldState,
     scheduledState
   } = get(uid);
-  return oldState.components === scheduledState.components && oldState.loaded === scheduledState.loaded ? [] : [1];
+  return oldState.components === scheduledState.components && oldState.loaded === scheduledState.loaded && getColumnCount(oldState.width) === getColumnCount(scheduledState.width) ? [] : [1];
 };
 
 const pattern = /^live-component-state:\/\/\/(\d+)\.json$/;
@@ -1267,11 +1321,6 @@ const getUid = uri => {
 };
 const toUri = uid => `live-component-state:///${uid}.json`;
 
-const assertObject = value => {
-  if (!value || typeof value !== 'object' || Array.isArray(value)) {
-    throw new TypeError('Component state must be a JSON object');
-  }
-};
 const readFile = async uri => {
   const uid = getUid(uri);
   const state = await invoke('ComponentState.getState', uid);
@@ -1280,11 +1329,11 @@ const readFile = async uri => {
 const writeFile = async (uri, content) => {
   const uid = getUid(uri);
   const state = JSON.parse(content);
-  assertObject(state);
+  object(state);
   await invoke('ComponentState.setState', uid, state);
 };
 const readDirWithFileTypes = async () => {
-  const components = await invoke('ComponentState.getComponents');
+  const components = await getComponents();
   return components.filter(component => component.editable).map(component => ({
     name: `${component.uid}.json`,
     type: File
@@ -1293,7 +1342,7 @@ const readDirWithFileTypes = async () => {
 const isReadonly = () => false;
 const exists = async uri => {
   const uid = getUid(uri);
-  const components = await invoke('ComponentState.getComponents');
+  const components = await getComponents();
   return components.some(component => component.uid === uid && component.editable);
 };
 
@@ -1303,7 +1352,7 @@ const handleClick = async (state, uid) => {
 };
 
 const loadContent = async state => {
-  const components = await invoke('ComponentState.getComponents');
+  const components = await getComponents();
   return {
     ...state,
     components,
@@ -1319,48 +1368,81 @@ const text = data => {
   };
 };
 
+const Card = 'ComponentStateCard';
+const CardStatus = 'ComponentStateCardStatus';
+const CardTitle = 'ComponentStateCardTitle';
+const CardUid = 'ComponentStateCardUid';
+const Description = 'ComponentStateDescription';
+const Heading = 'ComponentStateHeading';
+const Row = 'ComponentStateRow';
+const Rows = 'ComponentStateRows';
+const View = 'ComponentStateView';
+
+const HandleClick = 1;
+
+const titleNode = {
+  childCount: 1,
+  className: CardTitle,
+  type: Strong
+};
+const uidNode = {
+  childCount: 1,
+  className: CardUid,
+  type: Span
+};
+const statusNode = {
+  childCount: 1,
+  className: CardStatus,
+  type: Span
+};
 const getCard = component => {
   const status = component.editable ? 'Open JSON state' : 'State API unavailable';
   return [{
     childCount: 3,
-    className: 'ComponentStateCard',
+    className: Card,
     'data-uid': String(component.uid),
     disabled: !component.editable,
-    onClick: 1,
+    onClick: HandleClick,
     type: Button
-  }, {
-    childCount: 1,
-    className: 'ComponentStateCardTitle',
-    type: Strong
-  }, text(component.moduleId), {
-    childCount: 1,
-    className: 'ComponentStateCardUid',
-    type: Span
-  }, text(`uid ${component.uid}`), {
-    childCount: 1,
-    className: 'ComponentStateCardStatus',
-    type: Span
-  }, text(status)];
-};
-const getComponentStateVirtualDom = (components, loaded) => {
+  }, titleNode, text(component.moduleId), uidNode, text(`uid ${component.uid}`), statusNode, text(status)];
+};
+
+const viewNode = {
+  childCount: 3,
+  className: View,
+  type: Div
+};
+const headingNode = {
+  childCount: 1,
+  className: Heading,
+  type: H2
+};
+const descriptionNode = {
+  childCount: 1,
+  className: Description,
+  type: Div
+};
+const getRows = (components, columnCount) => {
+  const rows = [];
+  for (let index = 0; index < components.length; index += columnCount) {
+    const row = components.slice(index, index + columnCount);
+    rows.push({
+      childCount: row.length,
+      className: Row,
+      type: Div
+    }, ...row.flatMap(getCard));
+  }
+  return rows;
+};
+const getComponentStateVirtualDom = (components, loaded, width) => {
   const description = loaded ? `${components.length} live components` : 'Loading live components…';
-  return [{
-    childCount: 3,
-    className: 'ComponentStateView',
-    type: Div
-  }, {
-    childCount: 1,
-    className: 'ComponentStateHeading',
-    type: H2
-  }, text('Live Component State'), {
-    childCount: 1,
-    className: 'ComponentStateDescription',
-    type: Div
-  }, text(description), {
-    childCount: components.length,
-    className: 'ComponentStateGrid',
+  const columnCount = getColumnCount(width);
+  const rowCount = Math.ceil(components.length / columnCount);
+  return [viewNode, headingNode, text('Live Component State'), descriptionNode, text(description), {
+    childCount: rowCount,
+    className: Rows,
     type: Div
-  }, ...components.flatMap(getCard)];
+  }, ...getRows(components, columnCount)];
 };
 
 const render2 = (uid, diffResult) => {
@@ -1371,11 +1453,11 @@ const render2 = (uid, diffResult) => {
   if (diffResult.length === 0) {
     return [];
   }
-  return [[SetDom2, uid, getComponentStateVirtualDom(newState.components, newState.loaded)]];
+  return [[SetDom2, uid, getComponentStateVirtualDom(newState.components, newState.loaded, newState.width)]];
 };
 
 const renderEventListeners = () => [{
-  name: 1,
+  name: HandleClick,
   params: ['handleClick', 'event.currentTarget.dataset.uid'],
   preventDefault: true
 }];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/component-state-worker",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Inspect and edit live LVCE component state",
   "keywords": [
     "component-state",