@lvce-editor/extension-detail-view 6.8.0 → 7.0.0

package/dist/extensionDetailViewWorkerMain.js

@@ -324,22 +324,339 @@ const A = 53;
 const Ul = 60;
 const Code$2 = 65;
 const Dt = 67;
+const Reference = 100;
+
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
+const TargetHref = 'event.target.href';
+const TargetName = 'event.target.name';
 
 const LeftArrow = 13;
 const RightArrow = 15;
 
+const Script$1 = 2;
+
+const ExtensionDetailReadme = 20;
+const ExtensionDetailIconContextMenu$2 = 4091;
+
+const None$2 = 0;
+
+const Web$1 = 1;
+const Electron$1 = 2;
+
+const ExtensionHostWorker = 44;
+const ExtensionManagementWorker = 9006;
+const FileSystemWorker$1 = 209;
+const MarkdownWorker$1 = 300;
+const RendererWorker = 1;
+
+const FocusElementByName = 'Viewlet.focusElementByName';
+const SetDom2 = 'Viewlet.setDom2';
+const SetFocusContext = 'Viewlet.setFocusContext';
+const SetPatches = 'Viewlet.setPatches';
+
+const FocusExtensionDetailTabs = 451;
+
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
 
 const text = data => {
   return {
-    type: Text$1,
+    childCount: 0,
     text: data,
-    childCount: 0
+    type: Text$1
   };
 };
 
+const SetText = 1;
+const Replace = 2;
+const SetAttribute = 3;
+const RemoveAttribute = 4;
+const Add = 6;
+const NavigateChild = 7;
+const NavigateParent = 8;
+const RemoveChild = 9;
+const NavigateSibling = 10;
+const SetReferenceNodeUid = 11;
+
+const isKey = key => {
+  return key !== 'type' && key !== 'childCount';
+};
+
+const getKeys = node => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
+};
+
+const arrayToTree = nodes => {
+  const result = [];
+  let i = 0;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    const {
+      children,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, node.childCount || 0);
+    result.push({
+      node,
+      children
+    });
+    i += 1 + nodesConsumed;
+  }
+  return result;
+};
+const getChildrenWithCount = (nodes, startIndex, childCount) => {
+  if (childCount === 0) {
+    return {
+      children: [],
+      nodesConsumed: 0
+    };
+  }
+  const children = [];
+  let i = startIndex;
+  let remaining = childCount;
+  let totalConsumed = 0;
+  while (remaining > 0 && i < nodes.length) {
+    const node = nodes[i];
+    const nodeChildCount = node.childCount || 0;
+    const {
+      children: nodeChildren,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, nodeChildCount);
+    children.push({
+      node,
+      children: nodeChildren
+    });
+    const nodeSize = 1 + nodesConsumed;
+    i += nodeSize;
+    totalConsumed += nodeSize;
+    remaining--;
+  }
+  return {
+    children,
+    nodesConsumed: totalConsumed
+  };
+};
+
+const compareNodes = (oldNode, newNode) => {
+  const patches = [];
+  // Check if node type changed - return null to signal incompatible nodes
+  // (caller should handle this with a Replace operation)
+  if (oldNode.type !== newNode.type) {
+    return null;
+  }
+  // Handle reference nodes - special handling for uid changes
+  if (oldNode.type === Reference) {
+    if (oldNode.uid !== newNode.uid) {
+      patches.push({
+        type: SetReferenceNodeUid,
+        uid: newNode.uid
+      });
+    }
+    return patches;
+  }
+  // Handle text nodes
+  if (oldNode.type === Text$1 && newNode.type === Text$1) {
+    if (oldNode.text !== newNode.text) {
+      patches.push({
+        type: SetText,
+        value: newNode.text
+      });
+    }
+    return patches;
+  }
+  // Compare attributes
+  const oldKeys = getKeys(oldNode);
+  const newKeys = getKeys(newNode);
+  // Check for attribute changes
+  for (const key of newKeys) {
+    if (oldNode[key] !== newNode[key]) {
+      patches.push({
+        type: SetAttribute,
+        key,
+        value: newNode[key]
+      });
+    }
+  }
+  // Check for removed attributes
+  for (const key of oldKeys) {
+    if (!(key in newNode)) {
+      patches.push({
+        type: RemoveAttribute,
+        key
+      });
+    }
+  }
+  return patches;
+};
+
+const treeToArray = node => {
+  const result = [node.node];
+  for (const child of node.children) {
+    result.push(...treeToArray(child));
+  }
+  return result;
+};
+
+const diffChildren = (oldChildren, newChildren, patches) => {
+  const maxLength = Math.max(oldChildren.length, newChildren.length);
+  // Track where we are: -1 means at parent, >= 0 means at child index
+  let currentChildIndex = -1;
+  // Collect indices of children to remove (we'll add these patches at the end in reverse order)
+  const indicesToRemove = [];
+  for (let i = 0; i < maxLength; i++) {
+    const oldNode = oldChildren[i];
+    const newNode = newChildren[i];
+    if (!oldNode && !newNode) {
+      continue;
+    }
+    if (!oldNode) {
+      // Add new node - we should be at the parent
+      if (currentChildIndex >= 0) {
+        // Navigate back to parent
+        patches.push({
+          type: NavigateParent
+        });
+        currentChildIndex = -1;
+      }
+      // Flatten the entire subtree so renderInternal can handle it
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Add,
+        nodes: flatNodes
+      });
+    } else if (newNode) {
+      // Compare nodes to see if we need any patches
+      const nodePatches = compareNodes(oldNode.node, newNode.node);
+      // If nodePatches is null, the node types are incompatible - need to replace
+      if (nodePatches === null) {
+        // Navigate to this child
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Replace the entire subtree
+        const flatNodes = treeToArray(newNode);
+        patches.push({
+          type: Replace,
+          nodes: flatNodes
+        });
+        // After replace, we're at the new element (same position)
+        continue;
+      }
+      // Check if we need to recurse into children
+      const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
+      // Only navigate to this element if we need to do something
+      if (nodePatches.length > 0 || hasChildrenToCompare) {
+        // Navigate to this child if not already there
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Apply node patches (these apply to the current element, not children)
+        if (nodePatches.length > 0) {
+          patches.push(...nodePatches);
+        }
+        // Compare children recursively
+        if (hasChildrenToCompare) {
+          diffChildren(oldNode.children, newNode.children, patches);
+        }
+      }
+    } else {
+      // Remove old node - collect the index for later removal
+      indicesToRemove.push(i);
+    }
+  }
+  // Navigate back to parent if we ended at a child
+  if (currentChildIndex >= 0) {
+    patches.push({
+      type: NavigateParent
+    });
+    currentChildIndex = -1;
+  }
+  // Add remove patches in reverse order (highest index first)
+  // This ensures indices remain valid as we remove
+  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
+    patches.push({
+      type: RemoveChild,
+      index: indicesToRemove[j]
+    });
+  }
+};
+const diffTrees = (oldTree, newTree, patches, path) => {
+  // At the root level (path.length === 0), we're already AT the element
+  // So we compare the root node directly, then compare its children
+  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
+    const oldNode = oldTree[0];
+    const newNode = newTree[0];
+    // Compare root nodes
+    const nodePatches = compareNodes(oldNode.node, newNode.node);
+    // If nodePatches is null, the root node types are incompatible - need to replace
+    if (nodePatches === null) {
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Replace,
+        nodes: flatNodes
+      });
+      return;
+    }
+    if (nodePatches.length > 0) {
+      patches.push(...nodePatches);
+    }
+    // Compare children
+    if (oldNode.children.length > 0 || newNode.children.length > 0) {
+      diffChildren(oldNode.children, newNode.children, patches);
+    }
+  } else {
+    // Non-root level or multiple root elements - use the regular comparison
+    diffChildren(oldTree, newTree, patches);
+  }
+};
+
+const removeTrailingNavigationPatches = patches => {
+  // Find the last non-navigation patch
+  let lastNonNavigationIndex = -1;
+  for (let i = patches.length - 1; i >= 0; i--) {
+    const patch = patches[i];
+    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
+      lastNonNavigationIndex = i;
+      break;
+    }
+  }
+  // Return patches up to and including the last non-navigation patch
+  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+};
+
+const diffTree = (oldNodes, newNodes) => {
+  // Step 1: Convert flat arrays to tree structures
+  const oldTree = arrayToTree(oldNodes);
+  const newTree = arrayToTree(newNodes);
+  // Step 3: Compare the trees
+  const patches = [];
+  diffTrees(oldTree, newTree, patches, []);
+  // Remove trailing navigation patches since they serve no purpose
+  return removeTrailingNavigationPatches(patches);
+};
+
 const AdditionalDetails = 'AdditionalDetails';
 const AdditionalDetailsEntry = 'AdditionalDetailsEntry';
 const AdditionalDetailsTitle = 'AdditionalDetailsTitle';
@@ -1021,64 +1338,6 @@ const getFeatureVirtualDomHandler = featureName => {
   return feature.getVirtualDom;
 };
 
-const ClientX = 'event.clientX';
-const ClientY = 'event.clientY';
-const TargetHref = 'event.target.href';
-const TargetName = 'event.target.name';
-
-const Script$1 = 2;
-
-const ExtensionDetailReadme = 20;
-const ExtensionDetailIconContextMenu$2 = 4091;
-
-const None$2 = 0;
-
-const Web$1 = 1;
-const Electron$1 = 2;
-
-const ExtensionHostWorker = 44;
-const ExtensionManagementWorker = 9006;
-const FileSystemWorker$1 = 209;
-const MarkdownWorker$1 = 300;
-const RendererWorker = 1;
-
-const FocusElementByName = 'Viewlet.focusElementByName';
-const SetFocusContext = 'Viewlet.setFocusContext';
-
-const FocusExtensionDetailTabs = 451;
-
-const rpcs = Object.create(null);
-const set$a = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get$3 = id => {
-  return rpcs[id];
-};
-
-const create$4 = rpcId => {
-  return {
-    async dispose() {
-      const rpc = get$3(rpcId);
-      await rpc.dispose();
-    },
-    // @ts-ignore
-    invoke(method, ...params) {
-      const rpc = get$3(rpcId);
-      // @ts-ignore
-      return rpc.invoke(method, ...params);
-    },
-    // @ts-ignore
-    invokeAndTransfer(method, ...params) {
-      const rpc = get$3(rpcId);
-      // @ts-ignore
-      return rpc.invokeAndTransfer(method, ...params);
-    },
-    set(rpc) {
-      set$a(rpcId, rpc);
-    }
-  };
-};
-
 const normalizeLine = line => {
   if (line.startsWith('Error: ')) {
     return line.slice('Error: '.length);
@@ -1595,10 +1854,10 @@ const IpcParentWithMessagePort$1 = {
 
 const Two$1 = '2.0';
 const callbacks = Object.create(null);
-const get$2 = id => {
+const get$3 = id => {
   return callbacks[id];
 };
-const remove$1 = id => {
+const remove$2 = id => {
   delete callbacks[id];
 };
 class JsonRpcError extends Error {
@@ -1744,14 +2003,14 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$2(id);
+  const fn = get$3(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
     return;
   }
   fn(response);
-  remove$1(id);
+  remove$2(id);
 };
 const E_COMMAND_NOT_FOUND = 'E_COMMAND_NOT_FOUND';
 const getErrorType = prettyError => {
@@ -1807,7 +2066,7 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$1(id, errorProperty);
 };
-const create$3 = (message, result) => {
+const create$4 = (message, result) => {
   return {
     jsonrpc: Two$1,
     id: message.id,
@@ -1816,7 +2075,7 @@ const create$3 = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$3(message, resultProperty);
+  return create$4(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
@@ -1930,14 +2189,14 @@ const execute = (command, ...args) => {
 };
 
 const Two = '2.0';
-const create$p = (method, params) => {
+const create$t = (method, params) => {
   return {
     jsonrpc: Two,
     method,
     params
   };
 };
-const create$o = (id, method, params) => {
+const create$s = (id, method, params) => {
   const message = {
     id,
     jsonrpc: Two,
@@ -1947,14 +2206,14 @@ const create$o = (id, method, params) => {
   return message;
 };
 let id = 0;
-const create$n = () => {
+const create$r = () => {
   return ++id;
 };
 
 /* eslint-disable n/no-unsupported-features/es-syntax */
 
 const registerPromise = map => {
-  const id = create$n();
+  const id = create$r();
   const {
     promise,
     resolve
@@ -1972,7 +2231,7 @@ const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer)
     id,
     promise
   } = registerPromise(callbacks);
-  const message = create$o(id, method, params);
+  const message = create$s(id, method, params);
   if (useSendAndTransfer && ipc.sendAndTransfer) {
     ipc.sendAndTransfer(message);
   } else {
@@ -2008,7 +2267,7 @@ const createRpc = ipc => {
      * @deprecated
      */
     send(method, ...params) {
-      const message = create$p(method, params);
+      const message = create$t(method, params);
       ipc.send(message);
     }
   };
@@ -2044,7 +2303,54 @@ const listen$1 = async (module, options) => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
-const create$7 = async ({
+
+/* eslint-disable @typescript-eslint/no-misused-promises */
+
+const createSharedLazyRpc = factory => {
+  let rpcPromise;
+  const getOrCreate = () => {
+    if (!rpcPromise) {
+      rpcPromise = factory();
+    }
+    return rpcPromise;
+  };
+  return {
+    async dispose() {
+      const rpc = await getOrCreate();
+      await rpc.dispose();
+    },
+    async invoke(method, ...params) {
+      const rpc = await getOrCreate();
+      return rpc.invoke(method, ...params);
+    },
+    async invokeAndTransfer(method, ...params) {
+      const rpc = await getOrCreate();
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    async send(method, ...params) {
+      const rpc = await getOrCreate();
+      rpc.send(method, ...params);
+    }
+  };
+};
+const create$j = async ({
+  commandMap,
+  isMessagePortOpen,
+  send
+}) => {
+  return createSharedLazyRpc(() => {
+    return create$3({
+      commandMap,
+      isMessagePortOpen,
+      send
+    });
+  });
+};
+const LazyTransferMessagePortRpcParent = {
+  __proto__: null,
+  create: create$j
+};
+const create$5 = async ({
   commandMap,
   isMessagePortOpen = true,
   messagePort
@@ -2061,7 +2367,7 @@ const create$7 = async ({
   messagePort.start();
   return rpc;
 };
-const create$5 = async ({
+const create$3 = async ({
   commandMap,
   isMessagePortOpen,
   send
@@ -2071,7 +2377,7 @@ const create$5 = async ({
     port2
   } = new MessageChannel();
   await send(port1);
-  return create$7({
+  return create$5({
     commandMap,
     isMessagePortOpen,
     messagePort: port2
@@ -2079,9 +2385,9 @@ const create$5 = async ({
 };
 const TransferMessagePortRpcParent = {
   __proto__: null,
-  create: create$5
+  create: create$3
 };
-const create$2 = async ({
+const create$2$1 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -2093,7 +2399,7 @@ const create$2 = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create: create$2
+  create: create$2$1
 };
 const createMockRpc = ({
   commandMap
@@ -2115,12 +2421,61 @@ const createMockRpc = ({
   return mockRpc;
 };
 
+const rpcs = Object.create(null);
+const set$a = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get$2 = id => {
+  return rpcs[id];
+};
+const remove$1 = id => {
+  delete rpcs[id];
+};
+
+/* eslint-disable  @typescript-eslint/explicit-function-return-type */
+const create$2 = rpcId => {
+  return {
+    async dispose() {
+      const rpc = get$2(rpcId);
+      await rpc.dispose();
+    },
+    // @ts-ignore
+    invoke(method, ...params) {
+      const rpc = get$2(rpcId);
+      // @ts-ignore
+      return rpc.invoke(method, ...params);
+    },
+    // @ts-ignore
+    invokeAndTransfer(method, ...params) {
+      const rpc = get$2(rpcId);
+      // @ts-ignore
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    registerMockRpc(commandMap) {
+      const mockRpc = createMockRpc({
+        commandMap
+      });
+      set$a(rpcId, mockRpc);
+      // @ts-ignore
+      mockRpc[Symbol.dispose] = () => {
+        remove$1(rpcId);
+      };
+      // @ts-ignore
+      return mockRpc;
+    },
+    set(rpc) {
+      set$a(rpcId, rpc);
+    }
+  };
+};
+
 const {
   dispose: dispose$4,
   invoke: invoke$5,
   invokeAndTransfer: invokeAndTransfer$3,
+  registerMockRpc: registerMockRpc$2,
   set: set$9
-} = create$4(ExtensionHostWorker);
+} = create$2(ExtensionHostWorker);
 const executeReferenceProvider = async (id, offset) => {
   // @ts-ignore
   return invoke$5('ExtensionHostReference.executeReferenceProvider', id, offset);
@@ -2133,12 +2488,9 @@ const getRuntimeStatus$2 = async extensionId => {
   // @ts-ignore
   return invoke$5('ExtensionHost.getRuntimeStatus', extensionId);
 };
-const registerMockRpc$2 = commandMap => {
-  const mockRpc = createMockRpc({
-    commandMap
-  });
-  set$9(mockRpc);
-  return mockRpc;
+const getEnabledOutputProviderIds = async () => {
+  const channels = await invoke$5('Output.getEnabledProviders');
+  return channels;
 };
 
 const ExtensionHost = {
@@ -2146,6 +2498,7 @@ const ExtensionHost = {
   dispose: dispose$4,
   executeFileReferenceProvider,
   executeReferenceProvider,
+  getEnabledOutputProviderIds,
   getRuntimeStatus: getRuntimeStatus$2,
   invoke: invoke$5,
   invokeAndTransfer: invokeAndTransfer$3,
@@ -2156,7 +2509,7 @@ const ExtensionHost = {
 const {
   invoke: invoke$4,
   set: set$8
-} = create$4(ExtensionManagementWorker);
+} = create$2(ExtensionManagementWorker);
 const enable2 = (id, platform) => {
   return invoke$4(`Extensions.enable2`, id, platform);
 };
@@ -2168,8 +2521,9 @@ const {
   dispose: dispose$3,
   invoke: invoke$3,
   invokeAndTransfer: invokeAndTransfer$2,
+  registerMockRpc: registerMockRpc$1,
   set: set$7
-} = create$4(FileSystemWorker$1);
+} = create$2(FileSystemWorker$1);
 const remove = async dirent => {
   return invoke$3('FileSystem.remove', dirent);
 };
@@ -2177,7 +2531,6 @@ const readDirWithFileTypes = async uri => {
   return invoke$3('FileSystem.readDirWithFileTypes', uri);
 };
 const getPathSeparator = async root => {
-  // @ts-ignore
   return invoke$3('FileSystem.getPathSeparator', root);
 };
 const getRealPath = async path => {
@@ -2205,27 +2558,22 @@ const copy = async (oldUri, newUri) => {
   return invoke$3('FileSystem.copy', oldUri, newUri);
 };
 const exists$1 = async uri => {
-  // @ts-ignore
   return invoke$3('FileSystem.exists', uri);
 };
 const getFolderSize$1 = async uri => {
-  // @ts-ignore
   return invoke$3('FileSystem.getFolderSize', uri);
 };
 const readFileAsBlob$1 = async uri => {
-  // @ts-ignore
   return invoke$3('FileSystem.readFileAsBlob', uri);
 };
 const appendFile = async (uri, text) => {
-  // @ts-ignore
   return invoke$3('FileSystem.appendFile', uri, text);
 };
-const registerMockRpc$1 = commandMap => {
-  const mockRpc = createMockRpc({
-    commandMap
-  });
-  set$7(mockRpc);
-  return mockRpc;
+const watchFile = async (watchId, uri, rpcId) => {
+  await invoke$3('FileSystem.watchFile', watchId, uri, rpcId);
+};
+const unwatchFile = async watchId => {
+  await invoke$3('FileSystem.unwatchFile', watchId);
 };
 
 const FileSystemWorker = {
@@ -2249,6 +2597,8 @@ const FileSystemWorker = {
   rename,
   set: set$7,
   stat,
+  unwatchFile,
+  watchFile,
   writeFile
 };
 
@@ -2256,8 +2606,9 @@ const {
   dispose: dispose$2,
   invoke: invoke$2,
   invokeAndTransfer: invokeAndTransfer$1,
+  registerMockRpc,
   set: set$6
-} = create$4(MarkdownWorker$1);
+} = create$2(MarkdownWorker$1);
 const getVirtualDom$1 = async html => {
   // @ts-ignore
   return invoke$2('Markdown.getVirtualDom', html);
@@ -2266,13 +2617,6 @@ const render$1 = async (markdown, options) => {
   // @ts-ignore
   return invoke$2('Markdown.render', markdown, options);
 };
-const registerMockRpc = commandMap => {
-  const mockRpc = createMockRpc({
-    commandMap
-  });
-  set$6(mockRpc);
-  return mockRpc;
-};
 
 const MarkdownWorker = {
   __proto__: null,
@@ -2289,27 +2633,23 @@ const {
   invoke: invoke$1,
   invokeAndTransfer,
   set: set$5
-} = create$4(RendererWorker);
+} = create$2(RendererWorker);
 const showContextMenu2 = async (uid, menuId, x, y, args) => {
   number(uid);
   number(menuId);
   number(x);
   number(y);
-  // @ts-ignore
   await invoke$1('ContextMenu.show2', uid, menuId, x, y, args);
 };
 const setColorTheme$1 = async id => {
-  // @ts-ignore
   return invoke$1(/* ColorTheme.setColorTheme */'ColorTheme.setColorTheme', /* colorThemeId */id);
 };
 const sendMessagePortToMarkdownWorker$1 = async (port, rpcId) => {
   const command = 'Markdown.handleMessagePort';
-  // @ts-ignore
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToMarkdownWorker', port, command, rpcId);
 };
 const sendMessagePortToFileSystemWorker$1 = async (port, rpcId) => {
   const command = 'FileSystem.handleMessagePort';
-  // @ts-ignore
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToFileSystemWorker', port, command, rpcId);
 };
 const sendMessagePortToExtensionHostWorker$1 = async (port, rpcId = 0) => {
@@ -2317,7 +2657,6 @@ const sendMessagePortToExtensionHostWorker$1 = async (port, rpcId = 0) => {
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
 };
 const confirm = async (message, options) => {
-  // @ts-ignore
   const result = await invoke$1('ConfirmPrompt.prompt', message, options);
   return result;
 };
@@ -2325,7 +2664,6 @@ const writeClipBoardText = async text => {
   await invoke$1('ClipBoard.writeText', /* text */text);
 };
 const writeClipBoardImage = async blob => {
-  // @ts-ignore
   await invoke$1('ClipBoard.writeImage', /* text */blob);
 };
 const sendMessagePortToExtensionManagementWorker = async (port, rpcId) => {
@@ -2339,30 +2677,24 @@ const getAllExtensions$1 = async () => {
   return invoke$1('ExtensionManagement.getAllExtensions');
 };
 const getExtension$2 = async id => {
-  // @ts-ignore
   return invoke$1('ExtensionManagement.getExtension', id);
 };
 const openNativeFolder = async uri => {
-  // @ts-ignore
   await invoke$1('OpenNativeFolder.openNativeFolder', uri);
 };
 const uninstallExtension = async id => {
   return invoke$1('ExtensionManagement.uninstall', id);
 };
 const openExtensionSearch$1 = async () => {
-  // @ts-ignore
   return invoke$1('SideBar.openViewlet', 'Extensions');
 };
 const setExtensionsSearchValue = async searchValue => {
-  // @ts-ignore
   return invoke$1('Extensions.handleInput', searchValue, Script$1);
 };
 const openExternal$1 = async uri => {
-  // @ts-ignore
   await invoke$1('Open.openExternal', uri);
 };
 const openUrl = async uri => {
-  // @ts-ignore
   await invoke$1('Open.openUrl', uri);
 };
 
@@ -2985,42 +3317,68 @@ const create$1 = () => {
   const states = Object.create(null);
   const commandMapRef = {};
   return {
-    get(uid) {
-      return states[uid];
+    clear() {
+      for (const key of Object.keys(states)) {
+        delete states[key];
+      }
     },
-    set(uid, oldState, newState) {
-      states[uid] = {
-        oldState,
-        newState
-      };
+    diff(uid, modules, numbers) {
+      const {
+        newState,
+        oldState
+      } = states[uid];
+      const diffResult = [];
+      for (let i = 0; i < modules.length; i++) {
+        const fn = modules[i];
+        if (!fn(oldState, newState)) {
+          diffResult.push(numbers[i]);
+        }
+      }
+      return diffResult;
     },
     dispose(uid) {
       delete states[uid];
     },
+    get(uid) {
+      return states[uid];
+    },
+    getCommandIds() {
+      const keys = Object.keys(commandMapRef);
+      const ids = keys.map(toCommandId);
+      return ids;
+    },
     getKeys() {
       return Object.keys(states).map(key => {
         return Number.parseInt(key);
       });
     },
-    clear() {
-      for (const key of Object.keys(states)) {
-        delete states[key];
-      }
+    registerCommands(commandMap) {
+      Object.assign(commandMapRef, commandMap);
+    },
+    set(uid, oldState, newState) {
+      states[uid] = {
+        newState,
+        oldState
+      };
     },
     wrapCommand(fn) {
       const wrapped = async (uid, ...args) => {
         const {
-          oldState,
-          newState
+          newState,
+          oldState
         } = states[uid];
         const newerState = await fn(newState, ...args);
         if (oldState === newerState || newState === newerState) {
           return;
         }
-        const latest = states[uid];
+        const latestOld = states[uid];
+        const latestNew = {
+          ...latestOld.newState,
+          ...newerState
+        };
         states[uid] = {
-          oldState: latest.oldState,
-          newState: newerState
+          newState: latestNew,
+          oldState: latestOld.oldState
         };
       };
       return wrapped;
@@ -3033,28 +3391,6 @@ const create$1 = () => {
         return fn(newState, ...args);
       };
       return wrapped;
-    },
-    diff(uid, modules, numbers) {
-      const {
-        oldState,
-        newState
-      } = states[uid];
-      const diffResult = [];
-      for (let i = 0; i < modules.length; i++) {
-        const fn = modules[i];
-        if (!fn(oldState, newState)) {
-          diffResult.push(numbers[i]);
-        }
-      }
-      return diffResult;
-    },
-    getCommandIds() {
-      const keys = Object.keys(commandMapRef);
-      const ids = keys.map(toCommandId);
-      return ids;
-    },
-    registerCommands(commandMap) {
-      Object.assign(commandMapRef, commandMap);
     }
   };
 };
@@ -3166,6 +3502,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     hasReadme: false,
     iconSrc: '',
     importTime: 0,
+    initial: true,
     installationEntries: [],
     jsonValidation: [],
     lastUpdated: null,
@@ -3230,9 +3567,10 @@ const RenderItems = 3;
 const RenderScrollTop = 4;
 const RenderCss = 5;
 const RenderFocusContext = 6;
+const RenderIncremental = 7;
 
 const modules = [isEqual$1, isEqual$2, isEqual, isEqual$3, isEqual$2];
-const numbers = [RenderItems, RenderFocus, RenderScrollTop, RenderCss, RenderFocusContext];
+const numbers = [RenderIncremental, RenderFocus, RenderScrollTop, RenderCss, RenderFocusContext];
 
 const diff2 = uid => {
   const {
@@ -3484,7 +3822,7 @@ const getExtension$1 = async (id, platform) => {
 
 const getExtensionNew = async id => {
   try {
-    const rpc = get$3(ExtensionManagementWorker);
+    const rpc = get$2(ExtensionManagementWorker);
     return await rpc.invoke('Extensions.getExtension', id);
   } catch {
     // ignore
@@ -4425,6 +4763,7 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     hasColorTheme,
     hasReadme,
     iconSrc,
+    initial: false,
     installationEntries,
     lastUpdated,
     linkProtectionEnabled,
@@ -4827,7 +5166,7 @@ const sendMessagePortToMarkdownWorker = async port => {
 
 const createMarkdownWorkerRpc = async () => {
   try {
-    const rpc = await TransferMessagePortRpcParent.create({
+    const rpc = await LazyTransferMessagePortRpcParent.create({
       commandMap: {},
       send: sendMessagePortToMarkdownWorker
     });
@@ -5387,8 +5726,15 @@ const getExtensionDetailVirtualDom = (newState, selectedTab) => {
 };
 
 const renderDom = (oldState, newState) => {
+  const {
+    initial,
+    uid
+  } = newState;
+  if (initial) {
+    return [SetDom2, uid, []];
+  }
   const dom = getExtensionDetailVirtualDom(newState, newState.selectedTab);
-  return ['Viewlet.setDom2', dom];
+  return [SetDom2, uid, dom];
 };
 
 const renderFocus = (oldState, newState) => {
@@ -5419,6 +5765,16 @@ const renderFocusContext = (oldState, newState) => {
   return [FocusElementByName, ''];
 };
 
+const renderIncremental = (oldState, newState) => {
+  const {
+    uid
+  } = newState;
+  const oldDom = renderDom(oldState, oldState)[2];
+  const newDom = renderDom(newState, newState)[2];
+  const patches = diffTree(oldDom, newDom);
+  return [SetPatches, uid, patches];
+};
+
 const getScrollTop = (selectedTab, readmeScrollTop, changelogScrollTop) => {
   if (selectedTab === Details) {
     return readmeScrollTop;
@@ -5452,6 +5808,8 @@ const getRenderer = diffType => {
       return renderFocus;
     case RenderFocusContext:
       return renderFocusContext;
+    case RenderIncremental:
+      return renderIncremental;
     case RenderItems:
       return renderDom;
     case RenderScrollTop:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-detail-view",
-  "version": "6.8.0",
+  "version": "7.0.0",
   "description": "Extension Detail View Worker",
   "repository": {
     "type": "git",
@@ -11,6 +11,6 @@
   "type": "module",
   "main": "dist/extensionDetailViewWorkerMain.js",
   "dependencies": {
-    "@lvce-editor/constants": "^2.7.0"
+    "@lvce-editor/constants": "^3.1.0"
   }
 }