@lvce-editor/process-explorer-worker 3.8.0 → 3.12.0

package/index.js

@@ -3,8 +3,28 @@ const toCommandId = key => {
   return key.slice(dotIndex + 1);
 };
 const create$e = () => {
+  const generations = Object.create(null);
   const states = Object.create(null);
   const commandMapRef = {};
+  const getGeneration = uid => generations[uid] || 0;
+  const isCurrentGeneration = (uid, generation) => {
+    return states[uid] !== undefined && getGeneration(uid) === generation;
+  };
+  const updateState = (uid, generation, fallbackState, updater) => {
+    if (!isCurrentGeneration(uid, generation)) {
+      return Promise.resolve(fallbackState);
+    }
+    const current = states[uid];
+    const updatedState = updater(current.newState);
+    if (updatedState !== current.newState) {
+      states[uid] = {
+        newState: updatedState,
+        oldState: current.oldState,
+        scheduledState: updatedState
+      };
+    }
+    return Promise.resolve(updatedState);
+  };
   return {
     clear() {
       for (const key of Object.keys(states)) {
@@ -43,14 +63,39 @@ const create$e = () => {
       Object.assign(commandMapRef, commandMap);
     },
     set(uid, oldState, newState, scheduledState) {
+      const current = states[uid];
+      if (!current || oldState === newState && newState !== current.newState) {
+        generations[uid] = getGeneration(uid) + 1;
+      }
       states[uid] = {
         newState,
         oldState,
         scheduledState: scheduledState ?? newState
       };
     },
+    wrapAsyncCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
+        let latestState = states[uid].newState;
+        const context = {
+          getState: () => {
+            if (isCurrentGeneration(uid, generation)) {
+              latestState = states[uid].newState;
+            }
+            return latestState;
+          },
+          updateState: async updater => {
+            latestState = await updateState(uid, generation, latestState, updater);
+            return latestState;
+          }
+        };
+        await fn(context, ...args);
+      };
+      return wrapped;
+    },
     wrapCommand(fn) {
       const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
         const {
           newState,
           oldState
@@ -59,6 +104,9 @@ const create$e = () => {
         if (oldState === newerState || newState === newerState) {
           return;
         }
+        if (!isCurrentGeneration(uid, generation)) {
+          return;
+        }
         const latestOld = states[uid];
         const latestNew = {
           ...latestOld.newState,
@@ -83,6 +131,7 @@ const create$e = () => {
     },
     wrapLoadContent(fn) {
       const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
         const {
           newState,
           oldState
@@ -97,6 +146,11 @@ const create$e = () => {
             error
           };
         }
+        if (!isCurrentGeneration(uid, generation)) {
+          return {
+            error
+          };
+        }
         const latestOld = states[uid];
         const latestNew = {
           ...latestOld.newState,
@@ -192,6 +246,8 @@ const {
   wrapLoadContent
 } = create$e();
 
+const processExplorerUpdateInterval = 1000;
+
 const getIncludeFrontendMemoryUsage = args => {
   if (!args || typeof args !== 'object') {
     return false;
@@ -199,6 +255,16 @@ const getIncludeFrontendMemoryUsage = args => {
   const createArgs = args;
   return createArgs.includeFrontendMemoryUsage === true;
 };
+const getUpdateInterval = args => {
+  if (!args || typeof args !== 'object') {
+    return processExplorerUpdateInterval;
+  }
+  const createArgs = args;
+  if (typeof createArgs.updateInterval !== 'number') {
+    return processExplorerUpdateInterval;
+  }
+  return createArgs.updateInterval;
+};
 const create$d = (id, _uri, x, y, width, height, args, parentUid, platform = 0, assetDir = '') => {
   const state = {
     assetDir,
@@ -217,6 +283,7 @@ const create$d = (id, _uri, x, y, width, height, args, parentUid, platform = 0,
     processes: [],
     rootPid: -1,
     uid: id,
+    updateInterval: getUpdateInterval(args),
     visibleProcesses: [],
     width,
     x,
@@ -367,7 +434,6 @@ const walkValue = (value, transferrables, isTransferrable) => {
     for (const property of Object.values(value)) {
       walkValue(property, transferrables, isTransferrable);
     }
-    return;
   }
 };
 const getTransferrables = value => {
@@ -521,7 +587,14 @@ class IpcError extends VError {
       const cause = new Error(message);
       // @ts-ignore
       cause.code = code;
-      cause.stack = stack;
+      if (stack) {
+        Object.defineProperty(cause, 'stack', {
+          configurable: true,
+          enumerable: false,
+          value: stack,
+          writable: true
+        });
+      }
       super(cause, betterMessage);
     } else {
       super(betterMessage);
@@ -1379,9 +1452,14 @@ const create$4 = async ({
 }) => {
   // TODO create a commandMap per rpc instance
   register(commandMap);
-  const rawIpc = await IpcParentWithWebSocket$1.create({
-    webSocket
-  });
+  let rawIpc;
+  try {
+    rawIpc = await IpcParentWithWebSocket$1.create({
+      webSocket
+    });
+  } catch (error) {
+    throw new VError(error, 'Failed to create rpc connection');
+  }
   const ipc = IpcParentWithWebSocket$1.wrap(rawIpc);
   handleIpc(ipc);
   const rpc = createRpc(ipc);
@@ -1494,7 +1572,15 @@ const create = rpcId => {
   };
 };
 
+const Audio = 0;
+const Button = 1;
+const Col = 2;
+const ColGroup = 3;
 const Div = 4;
+const H1 = 5;
+const Input = 6;
+const Kbd = 7;
+const Span = 8;
 const Table$1 = 9;
 const TBody = 10;
 const Td = 11;
@@ -1502,12 +1588,161 @@ const Text = 12;
 const Th = 13;
 const THead = 14;
 const Tr = 15;
+const I = 16;
+const Img = 17;
+const Root = 0;
+const Ins = 20;
+const Del = 21;
+const H2 = 22;
+const H3 = 23;
+const H4 = 24;
+const H5 = 25;
+const H6 = 26;
+const Article = 27;
+const Aside = 28;
+const Footer = 29;
+const Header = 30;
+const Nav = 40;
+const Section = 41;
+const Search = 42;
+const Dd = 43;
+const Dl = 44;
+const Figcaption = 45;
+const Figure = 46;
+const Hr = 47;
+const Li = 48;
+const Ol = 49;
+const P = 50;
 const Pre = 51;
+const A = 53;
+const Abbr = 54;
+const Br = 55;
+const Cite = 56;
+const Data = 57;
+const Time = 58;
+const Tfoot = 59;
+const Ul = 60;
+const Video = 61;
+const TextArea = 62;
+const Select = 63;
+const Option = 64;
+const Code = 65;
+const Label = 66;
+const Dt = 67;
+const Iframe = 68;
+const Main = 69;
+const Strong = 70;
+const Em = 71;
+const Style = 72;
+const Html = 73;
+const Head = 74;
+const Title = 75;
+const Meta = 76;
+const Canvas = 77;
+const Form = 78;
+const BlockQuote = 79;
+const Quote = 80;
+const Circle = 81;
+const Defs = 82;
+const Ellipse = 83;
+const G = 84;
+const Line = 85;
+const Path = 86;
+const Polygon = 87;
+const Polyline = 88;
+const Rect = 89;
+const Svg = 90;
+const Use = 91;
 const Reference = 100;
 
+const VirtualDomElements = {
+  __proto__: null,
+  A,
+  Abbr,
+  Article,
+  Aside,
+  Audio,
+  BlockQuote,
+  Br,
+  Button,
+  Canvas,
+  Circle,
+  Cite,
+  Code,
+  Col,
+  ColGroup,
+  Data,
+  Dd,
+  Defs,
+  Del,
+  Div,
+  Dl,
+  Dt,
+  Ellipse,
+  Em,
+  Figcaption,
+  Figure,
+  Footer,
+  Form,
+  G,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Head,
+  Header,
+  Hr,
+  Html,
+  I,
+  Iframe,
+  Img,
+  Input,
+  Ins,
+  Kbd,
+  Label,
+  Li,
+  Line,
+  Main,
+  Meta,
+  Nav,
+  Ol,
+  Option,
+  P,
+  Path,
+  Polygon,
+  Polyline,
+  Pre,
+  Quote,
+  Rect,
+  Reference,
+  Root,
+  Search,
+  Section,
+  Select,
+  Span,
+  Strong,
+  Style,
+  Svg,
+  TBody,
+  THead,
+  Table: Table$1,
+  Td,
+  Text,
+  TextArea,
+  Tfoot,
+  Th,
+  Time,
+  Title,
+  Tr,
+  Ul,
+  Use,
+  Video
+};
+
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
-const TargetName = 'event.target.name';
 
 const Enter = 3;
 const Space = 9;
@@ -1529,6 +1764,7 @@ const Remote = 3;
 
 const ErrorWorker = 3308;
 const FileSystemWorker$1 = 209;
+const ProcessExplorerRenderer = 33;
 const RendererWorker = 1;
 
 const FocusSelector = 'Viewlet.focusSelector';
@@ -1576,10 +1812,6 @@ const sendMessagePortToFileSystemWorker$1 = async (port, rpcId) => {
   const command = 'FileSystem.handleMessagePort';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToFileSystemWorker', port, command, rpcId);
 };
-const sendMessagePortToProcessExplorer$1 = async port => {
-  const command = 'ProcessExplorer.handleMessagePort';
-  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToProcessExplorer', port, command, 0);
-};
 
 const debugProcess = async (state, index = state.focusedIndex) => {
   const process = state.visibleProcesses[index];
@@ -1625,8 +1857,6 @@ const diff2 = uid => {
   return diff(oldState, scheduledState);
 };
 
-const processExplorerUpdateInterval = 1000;
-
 const intervals = new Map();
 const pending = new Set();
 const dispose$3 = uid => {
@@ -1655,7 +1885,7 @@ const update = async uid => {
   }
 };
 const start = (uid, interval = processExplorerUpdateInterval) => {
-  if (interval === 0 || intervals.has(uid)) {
+  if (interval <= 0 || intervals.has(uid)) {
     return;
   }
   const intervalId = setInterval(() => {
@@ -1663,16 +1893,20 @@ const start = (uid, interval = processExplorerUpdateInterval) => {
   }, interval);
   intervals.set(uid, intervalId);
 };
+const restart = (uid, interval) => {
+  dispose$3(uid);
+  start(uid, interval);
+};
 
-const sendMessagePortToProcessExplorer = async port => {
-  await sendMessagePortToProcessExplorer$1(port);
+const sendMessagePortToMainProcess = async port => {
+  await invokeAndTransfer('SendMessagePortToMainProcess.sendMessagePortToMainProcess', port, 'HandleElectronMessagePort.handleElectronMessagePort', ProcessExplorerRenderer);
 };
 
 const launchProcessExplorerElectron = async () => {
   try {
     const rpc = await create$5({
       commandMap: {},
-      send: sendMessagePortToProcessExplorer
+      send: sendMessagePortToMainProcess
     });
     return rpc;
   } catch (error) {
@@ -1965,7 +2199,7 @@ const handleBlur = state => {
 };
 
 const handleClickAt = (state, index) => {
-  return focusIndex(state, index);
+  return focusIndex(state, Number(index));
 };
 
 const show2 = async (uid, menuId, x, y, args) => {
@@ -1973,25 +2207,26 @@ const show2 = async (uid, menuId, x, y, args) => {
 };
 
 const handleContextMenu = async (state, index = state.focusedIndex, x = 0, y = 0) => {
-  const process = state.visibleProcesses[index];
+  const numericIndex = Number(index);
+  const process = state.visibleProcesses[numericIndex];
   if (!process) {
     return state;
   }
   const newState = {
     ...state,
     focused: false,
-    focusedIndex: index
+    focusedIndex: numericIndex
   };
   set$6(state.uid, state, newState);
   await show2(state.uid, ProcessExplorer$1, x, y, {
-    index,
+    index: numericIndex,
     menuId: ProcessExplorer$1
   });
   return newState;
 };
 
 const handleDoubleClick = (state, index = state.focusedIndex) => {
-  return toggleIndex(state, index);
+  return toggleIndex(state, Number(index));
 };
 
 const handleFocus = state => {
@@ -2165,7 +2400,7 @@ const hasError$1 = state => {
 const loadContent = async state => {
   const newState = await refresh(state);
   if (!hasError$1(newState)) {
-    start(newState.uid);
+    start(newState.uid, newState.updateInterval);
   }
   return {
     error: undefined,
@@ -2190,6 +2425,10 @@ const renderFocusContext = (oldState, newState) => {
   return [SetFocusContext, newState.uid, newState.focused ? FocusExplorer : Empty];
 };
 
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
 const text = data => {
   return {
     childCount: 0,
@@ -2198,6 +2437,8 @@ const text = data => {
   };
 };
 
+new Set(Object.values(VirtualDomElements));
+
 const SetText = 1;
 const Replace = 2;
 const SetAttribute = 3;
@@ -2500,9 +2741,28 @@ const formatMemory = memory => {
   return `${(memory / 1000 ** 4).toFixed(1)} TB`;
 };
 
+const Focusable = 0;
+
+const tableHeadNode = {
+  childCount: 1,
+  className: TableHead,
+  role: RowGroup,
+  type: THead
+};
+const headerRowNode = {
+  childCount: 3,
+  className: Row,
+  role: Row$1,
+  type: Tr
+};
+const headerCellNode = {
+  childCount: 1,
+  className: HeaderCell,
+  type: Th
+};
 const getRowClassName = focused => {
   if (focused) {
-    return `${Row} ${RowFocused}`;
+    return mergeClassNames(Row, RowFocused);
   }
   return Row;
 };
@@ -2511,9 +2771,6 @@ const getPaddingLeft = process => {
     return '0';
   }
   const depthCh = (process.depth - 1) * 1.5;
-  if (process.flags === None$2) {
-    return `calc(${depthCh}ch + 17px)`;
-  }
   return `${depthCh}ch`;
 };
 const getAriaExpanded = process => {
@@ -2530,6 +2787,7 @@ const getCellDom = (className, value, index, paddingLeft) => {
   return [{
     childCount: 1,
     className,
+    'data-index': index,
     name: String(index),
     paddingLeft,
     role: GridCell,
@@ -2538,25 +2796,10 @@ const getCellDom = (className, value, index, paddingLeft) => {
   }, text(value)];
 };
 const getHeaderDom = () => {
-  return [{
-    childCount: 1,
-    className: TableHead,
-    role: RowGroup,
-    type: THead
-  }, {
-    childCount: 3,
-    className: Row,
-    role: Row$1,
-    type: Tr
-  }, ...['Name', 'PID', 'Memory'].flatMap(label => [{
-    childCount: 1,
-    className: HeaderCell,
-    type: Th
-  }, text(label)])];
+  return [tableHeadNode, headerRowNode, ...['Name', 'PID', 'Memory'].flatMap(label => [headerCellNode, text(label)])];
 };
 const getRowDom = (process, index, focused) => {
   return [{
-    ariaDescription: '',
     ariaExpanded: getAriaExpanded(process),
     ariaLevel: process.depth,
     childCount: 3,
@@ -2567,7 +2810,7 @@ const getRowDom = (process, index, focused) => {
     tabIndex: focused ? 0 : -1,
     title: process.cmd,
     type: Tr
-  }, ...getCellDom(`${Cell} ${NameCell}`, process.name, index, getPaddingLeft(process)), ...getCellDom(Cell, String(process.pid), index), ...getCellDom(Cell, formatMemory(process.memory), index)];
+  }, ...getCellDom(mergeClassNames(Cell, NameCell), process.name, index, getPaddingLeft(process)), ...getCellDom(Cell, String(process.pid), index), ...getCellDom(Cell, formatMemory(process.memory), index)];
 };
 const getBodyDom = state => {
   const {
@@ -2591,16 +2834,26 @@ const getErrorSectionDom = (value, type) => {
   }, text(value)];
 };
 const hasError = state => {
-  return Boolean(state.errorMessage || state.errorCodeFrame || state.errorStack);
+  const {
+    errorCodeFrame,
+    errorMessage,
+    errorStack
+  } = state;
+  return Boolean(errorMessage || errorCodeFrame || errorStack);
 };
 const getErrorDom = state => {
-  const messageDom = getErrorSectionDom(state.errorMessage, Div);
-  const codeFrameDom = getErrorSectionDom(state.errorCodeFrame, Pre);
-  const stackDom = getErrorSectionDom(state.errorStack, Pre);
+  const {
+    errorCodeFrame,
+    errorMessage,
+    errorStack
+  } = state;
+  const messageDom = getErrorSectionDom(errorMessage, Div);
+  const codeFrameDom = getErrorSectionDom(errorCodeFrame, Pre);
+  const stackDom = getErrorSectionDom(errorStack, Pre);
   const childCount = messageDom.length / 2 + codeFrameDom.length / 2 + stackDom.length / 2;
   return [{
     childCount: 1,
-    className: `${Viewlet} ${ProcessExplorer}`,
+    className: mergeClassNames(Viewlet, ProcessExplorer),
     role: None,
     type: Div
   }, {
@@ -2610,14 +2863,17 @@ const getErrorDom = state => {
   }, ...messageDom, ...codeFrameDom, ...stackDom];
 };
 const getTableDom = state => {
+  const {
+    visibleProcesses
+  } = state;
   return [{
     childCount: 1,
-    className: `${Viewlet} ${ProcessExplorer}`,
+    className: mergeClassNames(Viewlet, ProcessExplorer),
     role: None,
     type: Div
   }, {
     ariaLabel: 'Process Explorer',
-    ariaRowCount: state.visibleProcesses.length + 1,
+    ariaRowCount: visibleProcesses.length + 1,
     childCount: 2,
     className: Table,
     onBlur: HandleBlur,
@@ -2627,12 +2883,15 @@ const getTableDom = state => {
     onFocus: HandleFocus,
     onPointerDown: HandlePointerDown,
     role: Grid,
-    tabIndex: 0,
+    tabIndex: Focusable,
     type: Table$1
   }, ...getHeaderDom(), ...getBodyDom(state)];
 };
 const getDom = state => {
-  if (state.initial) {
+  const {
+    initial
+  } = state;
+  if (initial) {
     return [];
   }
   if (hasError(state)) {
@@ -2696,19 +2955,19 @@ const renderEventListeners = () => {
     params: ['handleBlur']
   }, {
     name: HandleClick,
-    params: ['handleClickAt', TargetName],
+    params: ['handleClickAt', 'event.target.dataset.index'],
     preventDefault: true
   }, {
     name: HandleDoubleClick,
-    params: ['handleDoubleClick', TargetName],
+    params: ['handleDoubleClick', 'event.target.dataset.index'],
     preventDefault: true
   }, {
     name: HandleContextMenu,
-    params: ['handleContextMenu', TargetName, ClientX, ClientY],
+    params: ['handleContextMenu', 'event.target.dataset.index', ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandlePointerDown,
-    params: ['handleClickAt', TargetName]
+    params: ['handleClickAt', 'event.target.dataset.index']
   }];
 };
 
@@ -2762,6 +3021,14 @@ const setRootProcessId = (state, rootPid) => {
   };
 };
 
+const setUpdateInterval = (state, updateInterval) => {
+  restart(state.uid, updateInterval);
+  return {
+    ...state,
+    updateInterval
+  };
+};
+
 const commandMap = {
   'ProcessExplorer.collapseAll': wrapCommand(collapseAll),
   'ProcessExplorer.create': create$d,
@@ -2793,6 +3060,7 @@ const commandMap = {
   'ProcessExplorer.renderEventListeners': renderEventListeners,
   'ProcessExplorer.setError': wrapCommand(setError),
   'ProcessExplorer.setRootProcessId': wrapCommand(setRootProcessId),
+  'ProcessExplorer.setUpdateInterval': wrapCommand(setUpdateInterval),
   'ProcessExplorer.terminate': terminate,
   'ProcessExplorer.update': wrapCommand(refresh)
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/process-explorer-worker",
-  "version": "3.8.0",
+  "version": "3.12.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",