@lvce-editor/static-server 0.116.22 → 0.116.23

package/static/{e233bda → ade3bcd}/manifest.json

@@ -11,13 +11,13 @@
   "display_override": ["window-controls-overlay", "minimal-ui"],
   "icons": [
     {
-      "src": "/e233bda/icons/pwa-icon-192.png",
+      "src": "/ade3bcd/icons/pwa-icon-192.png",
       "type": "image/png",
       "sizes": "192x192",
       "purpose": "any maskable"
     },
     {
-      "src": "/e233bda/icons/pwa-icon-512.png",
+      "src": "/ade3bcd/icons/pwa-icon-512.png",
       "type": "image/png",
       "sizes": "512x512",
       "purpose": "any maskable"

package/static/{e233bda → ade3bcd}/packages/component-state-worker/dist/componentStateWorkerMain.js

@@ -651,6 +651,9 @@ const restoreExistingError = (error, currentStack) => {
 };
 const restoreMethodNotFoundError = (error, currentStack) => {
   const restoredError = new JsonRpcError(error.message);
+  Object.assign(restoredError, {
+    code: error.code
+  });
   const parentStack = getParentStack(error);
   setStack(restoredError, `${parentStack}${NewLine}${currentStack}`);
   return restoredError;
@@ -670,9 +673,13 @@ const applyDataProperties = (restoredError, error) => {
     // @ts-ignore
     restoredError.codeFrame = error.data.codeFrame;
   }
-  if (error.data.code) {
+  if (typeof error.data.code === 'string' || typeof error.data.code === 'number') {
     // @ts-ignore
-    restoredError.code = error.data.code;
+    Object.defineProperty(restoredError, 'code', {
+      configurable: true,
+      value: error.data.code,
+      writable: true
+    });
   }
   if (error.data.type) {
     // @ts-ignore
@@ -693,7 +700,14 @@ const applyDirectProperties = (restoredError, error) => {
   }
 };
 const restoreMessageError = (error, _currentStack) => {
-  const restoredError = constructError(error.message, error.type, error.name);
+  const restoredError = constructError(error.message, error.type || error.data?.type, error.name);
+  if (typeof error.code === 'string' || typeof error.code === 'number') {
+    Object.defineProperty(restoredError, 'code', {
+      configurable: true,
+      value: error.code,
+      writable: true
+    });
+  }
   if (error.data) {
     applyDataProperties(restoredError, error);
   } else {
@@ -772,9 +786,9 @@ const getErrorProperty = (error, prettyError) => {
   return {
     code: Custom,
     data: {
-      code: prettyError.code,
+      code: prettyError.code ?? error?.code,
       codeFrame: prettyError.codeFrame,
-      name: prettyError.name,
+      name: prettyError.name ?? error?.name,
       stack: getStack(prettyError),
       type: getErrorType(prettyError)
     },
@@ -809,7 +823,12 @@ const getErrorResponseSimple = (id, error) => {
   return {
     error: {
       code: Custom,
-      data: error,
+      data: error instanceof Error ? {
+        ...error,
+        code: 'code' in error ? error.code : undefined,
+        stack: error.stack,
+        type: error.name
+      } : error,
       // @ts-ignore
       message: error.message
     },
@@ -1123,7 +1142,7 @@ const createMockRpc = ({
 };
 
 const rpcs = Object.create(null);
-const set$3 = (id, rpc) => {
+const set$4 = (id, rpc) => {
   rpcs[id] = rpc;
 };
 const get$1 = id => {
@@ -1156,7 +1175,7 @@ const create$2 = rpcId => {
       const mockRpc = createMockRpc({
         commandMap
       });
-      set$3(rpcId, mockRpc);
+      set$4(rpcId, mockRpc);
       // @ts-ignore
       mockRpc[Symbol.dispose] = () => {
         remove(rpcId);
@@ -1165,7 +1184,7 @@ const create$2 = rpcId => {
       return mockRpc;
     },
     set(rpc) {
-      set$3(rpcId, rpc);
+      set$4(rpcId, rpc);
     }
   };
 };
@@ -1185,20 +1204,33 @@ const None = 0;
 const Disabled = 5;
 
 const EditorWorker = 99;
+const MainProcess = -5;
 const RendererWorker = 1;
+const TestWorker = 9001;
 
 const SetDom2 = 'Viewlet.setDom2';
 
+const {
+  invoke: invoke$2,
+  set: set$3
+} = create$2(EditorWorker);
+
 const {
   invoke: invoke$1,
   set: set$2
-} = create$2(EditorWorker);
+} = create$2(MainProcess);
 
 const {
   invoke,
   invokeAndTransfer,
   set: set$1
 } = create$2(RendererWorker);
+const initializeRendererWorkerForWorker = async commandMap => {
+  const rpc = await create$3({
+    commandMap
+  });
+  set$1(rpc);
+};
 const getComponents = async () => {
   return invoke('ComponentState.getComponents');
 };
@@ -1209,17 +1241,34 @@ const sendMessagePortToEditorWorker = async (port, rpcId) => {
 const getPreference = async key => {
   return await invoke('Preferences.get', key);
 };
+const getWindowId = async () => {
+  return invoke('GetWindowId.getWindowId');
+};
+const initializeEditorWorker$1 = async (sourceId = TestWorker) => {
+  const rpc = await create$4({
+    commandMap: {},
+    send: port => sendMessagePortToEditorWorker(port, sourceId)
+  });
+  set$3(rpc);
+};
 
 const editorChange = 1;
 const rpcId = 9113;
 const register = async () => {
-  await invoke$1('Listener.register', editorChange, rpcId);
+  await invoke$2('Listener.register', editorChange, rpcId);
 };
 
 const initializeEditorWorker = async () => {
+  await initializeEditorWorker$1(rpcId);
+};
+
+const send$1 = async port => {
+  await invokeAndTransfer('SendMessagePortToMainProcess.sendMessagePortToMainProcess', port, 'HandleElectronMessagePort.handleElectronMessagePort', 0);
+};
+const initializeMainProcess = async () => {
   const rpc = await create$4({
     commandMap: {},
-    send: port => sendMessagePortToEditorWorker(port, rpcId)
+    send: send$1
   });
   set$2(rpc);
 };
@@ -1492,8 +1541,17 @@ const {
   wrapCommand
 } = create$1();
 
+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 create = (uid, x, y, width, height) => {
   const state = {
+    columnCount: getColumnCount(width),
     components: [],
     dragUri: '',
     height,
@@ -1506,21 +1564,13 @@ 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);
   const diff = [];
-  if (oldState.components !== scheduledState.components || oldState.loaded !== scheduledState.loaded || getColumnCount(oldState.width) !== getColumnCount(scheduledState.width)) {
+  if (oldState.components !== scheduledState.components || oldState.loaded !== scheduledState.loaded || oldState.columnCount !== scheduledState.columnCount) {
     diff.push(1);
   }
   if (oldState.dragUri !== scheduledState.dragUri) {
@@ -1707,29 +1757,112 @@ const exists = async uri => {
   return components.some(component => component.uid === uid && component.editable);
 };
 
+const emptyObject = {};
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  let result = key;
+  for (const [placeholder, replacement] of Object.entries(placeholders)) {
+    result = result.split(`{${placeholder}}`).join(String(replacement));
+  }
+  return result;
+};
+
+const LiveComponentState = 'Live Component State';
+const LiveComponentStateActions = 'Live Component State actions';
+const Refresh = 'Refresh';
+const OpenJsonState = 'Open JSON state';
+const StateApiUnavailable = 'State API unavailable';
+const Uid = 'uid {PH1}';
+const UidWithSize = 'uid {PH1} ({PH2} bytes)';
+const LiveComponents = '{PH1} live components';
+const LoadingLiveComponents = 'Loading live components…';
+const ShowDom = 'Show Dom';
+
+const liveComponentState = () => {
+  return i18nString(LiveComponentState);
+};
+const liveComponentStateActions = () => {
+  return i18nString(LiveComponentStateActions);
+};
+const refresh = () => {
+  return i18nString(Refresh);
+};
+const openJsonState = () => {
+  return i18nString(OpenJsonState);
+};
+const stateApiUnavailable = () => {
+  return i18nString(StateApiUnavailable);
+};
+const uid = value => {
+  return i18nString(Uid, {
+    PH1: value
+  });
+};
+const uidWithSize = (uid, size) => {
+  return i18nString(UidWithSize, {
+    PH1: uid,
+    PH2: size
+  });
+};
+const liveComponents = value => {
+  return i18nString(LiveComponents, {
+    PH1: value
+  });
+};
+const loadingLiveComponents = () => {
+  return i18nString(LoadingLiveComponents);
+};
+const showDom$1 = () => {
+  return i18nString(ShowDom);
+};
+
 const getMenuEntries = (_uid, {
   componentUid,
-  domAvailable = true
+  domAvailable = true,
+  heapSnapshotAvailable = false
 }) => [{
   args: [componentUid],
   command: 'ComponentState.showDom',
   flags: domAvailable ? None : Disabled,
   id: 'showDom',
-  label: 'Show Dom'
+  label: showDom$1()
+}, {
+  args: [componentUid],
+  command: 'ComponentState.showHeapSnapshot',
+  flags: heapSnapshotAvailable ? None : Disabled,
+  id: 'showHeapSnapshot',
+  label: 'Show Heap Snapshot'
 }];
 
 const ComponentState = 34;
 
 const getMenuEntryIds = () => [ComponentState];
 
+const openUri = async (viewUid, uri) => {
+  await invoke('Application.executeForView', viewUid, 'Main.openUri', uri);
+};
+
 const handleClick = async (state, uid) => {
   const {
     uid: viewUid
   } = state;
-  await invoke('Application.executeForView', viewUid, 'Main.openUri', toUri(Number(uid)));
+  await openUri(viewUid, toUri(Number(uid)));
   return state;
 };
 
+const send = async port => {
+  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToMenuWorker', port);
+};
+const rpc = await create$4({
+  commandMap: {},
+  send
+});
+const show2 = async (uid, menuId, x, y, args) => {
+  await rpc.invoke('Menu.show2', uid, menuId, x, y, args);
+};
+
 const handleContextMenu = async (state, uid, x, y) => {
   const {
     components,
@@ -1740,9 +1873,10 @@ const handleContextMenu = async (state, uid, x, y) => {
   if (!component) {
     return state;
   }
-  await invoke('ContextMenu.show2', viewUid, ComponentState, x, y, {
+  await show2(viewUid, ComponentState, x, y, {
     componentUid,
-    domAvailable: component.domAvailable
+    domAvailable: component.domAvailable,
+    heapSnapshotAvailable: component.heapSnapshotAvailable === true
   });
   return state;
 };
@@ -1756,7 +1890,7 @@ const parseState = content => {
     return undefined;
   }
 };
-const handleEditorChanged = async (editorUid, uri) => {
+const applyEditorChanged = async (editorUid, uri) => {
   const isDom = is$1(uri);
   let componentUid;
   try {
@@ -1764,7 +1898,7 @@ const handleEditorChanged = async (editorUid, uri) => {
   } catch {
     return;
   }
-  const content = await invoke$1('Editor.getText', editorUid);
+  const content = await invoke$2('Editor.getText', editorUid);
   if (isDom) {
     let dom;
     try {
@@ -1782,6 +1916,35 @@ const handleEditorChanged = async (editorUid, uri) => {
   }
   await invoke('ComponentState.setState', componentUid, removeSchemaProperty(state));
 };
+const pendingChanges = new Map();
+
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types -- shared pending work is updated by subsequent editor notifications
+const applyPendingChanges = async (editorUid, pending) => {
+  try {
+    while (pending.rerun) {
+      pending.rerun = false;
+      await applyEditorChanged(editorUid, pending.uri);
+    }
+  } finally {
+    pendingChanges.delete(editorUid);
+  }
+};
+const handleEditorChanged = (editorUid, uri) => {
+  const current = pendingChanges.get(editorUid);
+  if (current) {
+    current.uri = uri;
+    current.rerun = true;
+    return current.promise;
+  }
+  const pending = {
+    promise: Promise.resolve(),
+    rerun: true,
+    uri
+  };
+  pendingChanges.set(editorUid, pending);
+  pending.promise = applyPendingChanges(editorUid, pending);
+  return pending.promise;
+};
 
 const handlePointerDown = (state, button, uid) => {
   if (button !== 0) {
@@ -1797,14 +1960,37 @@ const handlePointerDown = (state, button, uid) => {
   };
 };
 
+const getComponentWithStateSize = async component => {
+  if (!component.editable) {
+    return component;
+  }
+  try {
+    const componentState = await invoke('ComponentState.getState', component.uid);
+    const serializedState = JSON.stringify(componentState);
+    if (typeof serializedState !== 'string') {
+      return component;
+    }
+    return {
+      ...component,
+      stateSize: serializedState.length
+    };
+  } catch {
+    return component;
+  }
+};
+const getComponentsWithStateSizes = async components => {
+  return Promise.all(components.map(getComponentWithStateSize));
+};
 const loadContent = async state => {
   const {
     uid: viewUid
   } = state;
-  const [components, showUnavailableComponents] = await Promise.all([invoke('ComponentState.getComponents', viewUid), getPreference('componentStateView.showUnavailableComponents')]);
+  const [components, showUnavailableComponents, showStateSize] = await Promise.all([invoke('ComponentState.getComponents', viewUid), getPreference('componentStateView.showUnavailableComponents'), getPreference('componentStateView.showStateSize')]);
+  const visibleComponents = showUnavailableComponents === true ? components : components.filter(component => component.editable);
+  const loadedComponents = showStateSize === true ? await getComponentsWithStateSizes(visibleComponents) : visibleComponents;
   return {
     ...state,
-    components: showUnavailableComponents === true ? components : components.filter(component => component.editable),
+    components: loadedComponents,
     loaded: true
   };
 };
@@ -1853,18 +2039,15 @@ const headingNode = {
   type: H2
 };
 const actionsNode = {
-  ariaLabel: 'Live Component State actions',
   childCount: 1,
   className: HeaderActions,
   role: ToolBar,
   type: Div
 };
 const refreshButtonNode = {
-  ariaLabel: 'Refresh',
   childCount: 1,
   className: IconButton,
   onClick: HandleRefresh,
-  title: 'Refresh',
   type: Button
 };
 const refreshIconNode = {
@@ -1872,7 +2055,14 @@ const refreshIconNode = {
   className: mergeClassNames(MaskIcon, MaskIconRefresh),
   type: Div
 };
-const getHeader = () => [headerNode, headingNode, text('Live Component State'), actionsNode, refreshButtonNode, refreshIconNode];
+const getHeader = () => [headerNode, headingNode, text(liveComponentState()), {
+  ...actionsNode,
+  ariaLabel: liveComponentStateActions()
+}, {
+  ...refreshButtonNode,
+  ariaLabel: refresh(),
+  title: refresh()
+}, refreshIconNode];
 
 const titleNode = {
   childCount: 1,
@@ -1890,7 +2080,8 @@ const statusNode = {
   type: Span
 };
 const getCard = component => {
-  const status = component.editable ? 'Open JSON state' : 'State API unavailable';
+  const status = component.editable ? openJsonState() : stateApiUnavailable();
+  const uid$1 = typeof component.stateSize === 'number' ? uidWithSize(component.uid, component.stateSize) : uid(component.uid);
   return [{
     childCount: 3,
     className: Card,
@@ -1902,20 +2093,19 @@ const getCard = component => {
     onDragStart: HandleDragStart,
     onPointerDown: HandlePointerDown,
     type: Button
-  }, titleNode, text(component.displayName || component.moduleId), uidNode, text(`uid ${component.uid}`), statusNode, text(status)];
+  }, titleNode, text(component.displayName || component.moduleId), uidNode, text(uid$1), statusNode, text(status)];
 };
 
 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));
+    rows.push(components.slice(index, index + columnCount));
   }
-  return rows;
+  return rows.flatMap(row => [{
+    childCount: row.length,
+    className: Row,
+    type: Div
+  }, ...row.flatMap(getCard)]);
 };
 
 const viewNode = {
@@ -1928,9 +2118,8 @@ const descriptionNode = {
   className: Description,
   type: Div
 };
-const getComponentStateVirtualDom = (components, loaded, width) => {
-  const description = loaded ? `${components.length} live components` : 'Loading live components…';
-  const columnCount = getColumnCount(width);
+const getComponentStateVirtualDom = (components, loaded, columnCount) => {
+  const description = loaded ? liveComponents(components.length) : loadingLiveComponents();
   const rowCount = Math.ceil(components.length / columnCount);
   return [viewNode, ...getHeader(), descriptionNode, text(description), {
     childCount: rowCount,
@@ -1939,6 +2128,23 @@ const getComponentStateVirtualDom = (components, loaded, width) => {
   }, ...getRows(components, columnCount)];
 };
 
+const renderDragData = newState => {
+  const {
+    dragUri,
+    uid
+  } = newState;
+  const items = dragUri ? [{
+    data: dragUri,
+    type: 'text/uri-list'
+  }, {
+    data: dragUri,
+    type: 'text/plain'
+  }] : [];
+  return ['Viewlet.setDragData', uid, {
+    items
+  }];
+};
+
 const render2 = (uid, diffResult) => {
   const {
     newState
@@ -1946,21 +2152,10 @@ const render2 = (uid, diffResult) => {
   set(uid, newState, newState);
   const commands = [];
   if (diffResult.includes(1)) {
-    commands.push([SetDom2, uid, getComponentStateVirtualDom(newState.components, newState.loaded, newState.width)]);
+    commands.push([SetDom2, uid, getComponentStateVirtualDom(newState.components, newState.loaded, newState.columnCount)]);
   }
   if (diffResult.includes(2)) {
-    const {
-      dragUri
-    } = newState;
-    commands.push(['Viewlet.setDragData', uid, {
-      items: dragUri ? [{
-        data: dragUri,
-        type: 'text/uri-list'
-      }, {
-        data: dragUri,
-        type: 'text/plain'
-      }] : []
-    }]);
+    commands.push(renderDragData(newState));
   }
   return commands;
 };
@@ -1987,14 +2182,30 @@ const renderEventListeners = () => [{
 
 const resize = (state, dimensions) => ({
   ...state,
-  ...dimensions
+  ...dimensions,
+  columnCount: getColumnCount(dimensions.width)
 });
 
 const showDom = async (state, componentUid) => {
   const {
     uid: viewUid
   } = state;
-  await invoke('Application.executeForView', viewUid, 'Main.openUri', toUri$2(componentUid));
+  await openUri(viewUid, toUri$2(componentUid));
+  return state;
+};
+
+const showHeapSnapshot = async (state, componentUid) => {
+  const {
+    components,
+    uid: viewUid
+  } = state;
+  if (components.every(component => !(component.uid === componentUid && component.heapSnapshotAvailable))) {
+    return state;
+  }
+  const workerName = await invoke('ComponentState.getWorkerName', componentUid);
+  const windowId = await getWindowId();
+  const uri = await invoke$1('ElectronDeveloper.takeWorkerHeapSnapshot', windowId, workerName);
+  await invoke('Application.executeForView', viewUid, 'Main.openUri', uri);
   return state;
 };
 
@@ -2003,7 +2214,8 @@ const viewCommandMap = {
   'ComponentState.handleContextMenu': wrapCommand(handleContextMenu),
   'ComponentState.handlePointerDown': wrapCommand(handlePointerDown),
   'ComponentState.refresh': wrapCommand(loadContent),
-  'ComponentState.showDom': wrapCommand(showDom)
+  'ComponentState.showDom': wrapCommand(showDom),
+  'ComponentState.showHeapSnapshot': wrapCommand(showHeapSnapshot)
 };
 const commandMap = {
   'ComponentState.create': create,
@@ -2026,10 +2238,7 @@ const commandMap = {
 };
 
 const initializeRendererWorker = async () => {
-  const rpc = await create$3({
-    commandMap: commandMap
-  });
-  set$1(rpc);
+  await initializeRendererWorkerForWorker(commandMap);
 };
 
 const registerCommands = () => {
@@ -2038,7 +2247,7 @@ const registerCommands = () => {
 
 const listen = async () => {
   registerCommands();
-  await Promise.all([initializeRendererWorker(), initializeEditorWorker()]);
+  await Promise.all([initializeRendererWorker(), initializeEditorWorker(), initializeMainProcess()]);
 };
 
 const main = async () => {