@lvce-editor/source-control-worker 1.1.0 → 1.3.0

package/dist/sourceControlWorkerMain.js

@@ -524,10 +524,10 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set$1 = (id, fn) => {
+const set$2 = (id, fn) => {
   callbacks[id] = fn;
 };
-const get$2 = id => {
+const get$3 = id => {
   return callbacks[id];
 };
 const remove = id => {
@@ -543,7 +543,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set$1(id, resolve);
+  set$2(id, resolve);
   return {
     id,
     promise
@@ -700,7 +700,7 @@ 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`);
@@ -739,7 +739,7 @@ const getErrorProperty = (error, prettyError) => {
     }
   };
 };
-const create$1 = (message, error) => {
+const create$1$1 = (message, error) => {
   return {
     jsonrpc: Two,
     id: message.id,
@@ -750,7 +750,7 @@ const getErrorResponse = (message, error, preparePrettyError, logError) => {
   const prettyError = preparePrettyError(error);
   logError(error, prettyError);
   const errorProperty = getErrorProperty(error, prettyError);
-  return create$1(message, errorProperty);
+  return create$1$1(message, errorProperty);
 };
 const create$5 = (message, result) => {
   return {
@@ -948,7 +948,7 @@ const MessagePortRpcParent = {
   __proto__: null,
   create: create$8
 };
-const create = async ({
+const create$1 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -960,24 +960,152 @@ const create = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create
+  create: create$1
 };
 
-const getPortTuple = () => {
-  const {
-    port1,
-    port2
-  } = new MessageChannel();
+const create = () => {
+  const states = Object.create(null);
   return {
-    port1,
-    port2
+    get(uid) {
+      return states[uid];
+    },
+    set(uid, oldState, newState) {
+      states[uid] = {
+        oldState,
+        newState
+      };
+    },
+    dispose(uid) {
+      delete states[uid];
+    },
+    getKeys() {
+      return Object.keys(states).map(key => {
+        return Number.parseInt(key);
+      });
+    },
+    clear() {
+      for (const key of Object.keys(states)) {
+        delete states[key];
+      }
+    },
+    wrapCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        const {
+          newState
+        } = states[uid];
+        const newerState = await fn(newState, ...args);
+        if (newState === newerState) {
+          return;
+        }
+        const latest = states[uid];
+        states[uid] = {
+          oldState: latest.oldState,
+          newState: newerState
+        };
+      };
+      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;
+    }
+  };
+};
+
+const {
+  get: get$2,
+  set: set$1,
+  wrapCommand
+} = create();
+
+const create2 = (id, uri, x, y, width, height, workspacePath) => {
+  const state = {
+    id,
+    root: '',
+    items: [],
+    x,
+    y,
+    width,
+    height,
+    deltaY: 0,
+    minLineY: 0,
+    maxLineY: 0,
+    fileIconCache: Object.create(null),
+    icons: [],
+    finalDeltaY: 0,
+    handleOffset: 0,
+    scrollBarActive: false,
+    scrollBarHeight: 0,
+    merge: [],
+    index: [],
+    untracked: [],
+    workingTree: [],
+    inputValue: '',
+    displayItems: [],
+    buttonIndex: -1,
+    enabledProviderIds: [],
+    isExpanded: true,
+    buttons: [],
+    providerId: '',
+    splitButtonEnabled: false,
+    allGroups: [],
+    gitRoot: '',
+    itemHeight: 20,
+    minimumSliderSize: 20,
+    workspacePath
   };
+  set$1(id, state, state);
+};
+
+const RenderItems = 4;
+
+const diffType = RenderItems;
+const isEqual = (oldState, newState) => {
+  return oldState.allGroups === newState.allGroups && oldState.displayItems === newState.displayItems && oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.deltaY === newState.deltaY && oldState.buttonIndex === newState.buttonIndex && oldState.buttons === newState.buttons;
+};
+
+const modules = [isEqual];
+const numbers = [diffType];
+
+const diff = (oldState, newState) => {
+  const diffResult = [];
+  for (let i = 0; i < modules.length; i++) {
+    const fn = modules[i];
+    if (!fn(oldState, newState)) {
+      diffResult.push(numbers[i]);
+    }
+  }
+  return diffResult;
+};
+
+const diff2 = uid => {
+  const {
+    oldState,
+    newState
+  } = get$2(uid);
+  const result = diff(oldState, newState);
+  return result;
+};
+
+const commandIds = ['acceptInput', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'handleClick', 'handleClickAt', 'handleIconThemeChange', 'handleWheel'];
+
+const getCommandIds = () => {
+  return commandIds;
 };
 
 const RendererWorker = 1;
 const ExtensionHostWorker = 44;
 const DebugWorker = 55;
-const SourceControlWorker = 66;
 
 const rpcs = Object.create(null);
 const set = (id, rpc) => {
@@ -998,40 +1126,42 @@ const invokeAndTransfer = (method, ...params) => {
   return rpc.invokeAndTransfer(method, ...params);
 };
 
-const sendMessagePortToExtensionHostWorker = async port => {
-  const command = 'HandleMessagePort.handleMessagePort';
-  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, DebugWorker);
+const activateByEvent = event => {
+  return invoke$1('ExtensionHostManagement.activateByEvent', event);
 };
 
-const createExtensionHostRpc = async () => {
-  try {
-    const {
-      port1,
-      port2
-    } = getPortTuple();
-    await sendMessagePortToExtensionHostWorker(port2);
-    port1.start();
-    const rpc = await MessagePortRpcParent.create({
-      commandMap: {},
-      messagePort: port1,
-      isMessagePortOpen: false
-    });
-    // TODO createMessageportRpcParent should call port start
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create extension host rpc`);
-  }
+const invoke = async (method, ...params) => {
+  const rpc = get$1(ExtensionHostWorker);
+  return rpc.invoke(method, ...params);
 };
 
-const initialize = async () => {
-  const extensionHostRpc = await createExtensionHostRpc();
-  set(SourceControlWorker, extensionHostRpc);
+const executeProvider = async ({
+  event,
+  method,
+  params
+}) => {
+  await activateByEvent(event);
+  const result = await invoke(method, ...params);
+  return result;
+};
+
+const CommandExecute = 'ExtensionHostCommand.executeCommand';
+const SourceControlGetEnabledProviderIds = 'ExtensionHostSourceControl.getEnabledProviderIds';
+const SourceControlGetGroups = 'ExtensionHostSourceControl.getGroups';
+
+const executeCommand = (id, ...args) => {
+  return executeProvider({
+    event: `onCommand:${id}`,
+    method: CommandExecute,
+    params: [id, ...args]
+  });
 };
 
+const Directory = 3;
 const DirectoryExpanded = 4;
 const File = 7;
 
-const getFileIcon = ({
+const getFileIcon$1 = ({
   name
 }) => {
   return '';
@@ -1088,7 +1218,7 @@ const getDisplayItemsGroup = (group, isExpanded) => {
         detail: folderName,
         posInSet: i + 1,
         setSize: length,
-        icon: getFileIcon({
+        icon: getFileIcon$1({
           name: file
         }),
         decorationIcon: icon,
@@ -1102,6 +1232,7 @@ const getDisplayItemsGroup = (group, isExpanded) => {
   }
   return displayItems;
 };
+
 const getDisplayItems = (allGroups, isExpanded) => {
   const displayItems = [];
   for (const group of allGroups) {
@@ -1111,12 +1242,121 @@ const getDisplayItems = (allGroups, isExpanded) => {
   return displayItems;
 };
 
+const getIconsCached = (dirents, fileIconCache) => {
+  return dirents.map(dirent => fileIconCache[dirent]);
+};
+
+const getMissingIconRequests = (dirents, fileIconCache) => {
+  const missingRequests = [];
+  for (const dirent of dirents) {
+    if (!(dirent.file in fileIconCache)) {
+      missingRequests.push({
+        type: dirent.type,
+        name: dirent.label,
+        path: dirent.file
+      });
+    }
+  }
+  return missingRequests;
+};
+
+const getPath = item => {
+  return item.file;
+};
+
+const getPaths = items => {
+  return items.map(getPath);
+};
+
+const getFileIcon = async name => {
+  return invoke$1('IconTheme.getFileIcon', {
+    name
+  });
+};
+
+const getFolderIcon = async name => {
+  return invoke$1('IconTheme.getFolderIcon', {
+    name
+  });
+};
+
+const requestFileIcons = async requests => {
+  const promises = requests.map(request => request.type === File ? getFileIcon(request.name) : getFolderIcon(request.name));
+  return Promise.all(promises);
+};
+
+const updateIconCache = (iconCache, missingRequests, newIcons) => {
+  if (missingRequests.length === 0) {
+    return iconCache;
+  }
+  const newFileIconCache = {
+    ...iconCache
+  };
+  for (let i = 0; i < missingRequests.length; i++) {
+    const request = missingRequests[i];
+    const icon = newIcons[i];
+    newFileIconCache[request.path] = icon;
+  }
+  return newFileIconCache;
+};
+
+const getFileIcons = async (dirents, fileIconCache) => {
+  const missingRequests = getMissingIconRequests(dirents, fileIconCache);
+  const newIcons = await requestFileIcons(missingRequests);
+  const newFileIconCache = updateIconCache(fileIconCache, missingRequests, newIcons);
+  const paths = getPaths(dirents);
+  const icons = getIconsCached(paths, newFileIconCache);
+  return {
+    icons,
+    newFileIconCache
+  };
+};
+
 const getFinalDeltaY = (height, itemHeight, itemsLength) => {
   const contentHeight = itemsLength * itemHeight;
   const finalDeltaY = Math.max(contentHeight - height, 0);
   return finalDeltaY;
 };
 
+const getGroups$2 = (providerId, path) => {
+  return executeProvider({
+    event: 'none',
+    method: SourceControlGetGroups,
+    params: [providerId, path]
+    // noProviderFoundMessage: 'No source control provider found',
+  });
+};
+const getEnabledProviderIds$1 = (scheme, root) => {
+  return executeProvider({
+    event: `onSourceControl:${scheme}`,
+    method: SourceControlGetEnabledProviderIds,
+    params: [scheme, root]
+    // noProviderFoundMessage: 'No source control provider found',
+  });
+};
+
+const getEnabledProviderIds = (scheme, root) => {
+  string(scheme);
+  string(root);
+  return getEnabledProviderIds$1(scheme, root);
+};
+const getGroups$1 = (providerId, root) => {
+  return getGroups$2(providerId, root);
+};
+
+const getGroups = async enabledProviderIds => {
+  const allGroups = [];
+  for (const providerId of enabledProviderIds) {
+    // @ts-ignore
+    const groups = await getGroups$1(providerId);
+    allGroups.push(...groups);
+  }
+  return {
+    allGroups,
+    gitRoot: ''
+  };
+};
+
 const getListHeight = (itemsLength, itemHeight, maxHeight) => {
   number(itemsLength);
   number(itemHeight);
@@ -1160,54 +1400,6 @@ const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
   return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
 };
 
-const activateByEvent = event => {
-  return invoke$1('ExtensionHostManagement.activateByEvent', event);
-};
-
-const invoke = async (method, ...params) => {
-  const rpc = get$1(ExtensionHostWorker);
-  return rpc.invoke(method, ...params);
-};
-
-const executeProvider = async ({
-  event,
-  method,
-  params
-}) => {
-  await activateByEvent(event);
-  const result = await invoke(method, ...params);
-  return result;
-};
-
-const SourceControlGetEnabledProviderIds = 'ExtensionHostSourceControl.getEnabledProviderIds';
-const SourceControlGetGroups = 'ExtensionHostSourceControl.getGroups';
-
-const getGroups$2 = (providerId, path) => {
-  return executeProvider({
-    event: 'none',
-    method: SourceControlGetGroups,
-    params: [providerId, path]
-    // noProviderFoundMessage: 'No source control provider found',
-  });
-};
-const getEnabledProviderIds$1 = (scheme, root) => {
-  return executeProvider({
-    event: `onSourceControl:${scheme}`,
-    method: SourceControlGetEnabledProviderIds,
-    params: [scheme, root]
-    // noProviderFoundMessage: 'No source control provider found',
-  });
-};
-
-const getEnabledProviderIds = (scheme, root) => {
-  string(scheme);
-  string(root);
-  return getEnabledProviderIds$1(scheme, root);
-};
-const getGroups$1 = (providerId, root) => {
-  return getGroups$2(providerId, root);
-};
-
 const getExtensions = async () => {
   return invoke('Extensions.getExtensions');
 };
@@ -1242,18 +1434,6 @@ const getSourceControlActions = async (providerId, groupId, type) => {
   return value;
 };
 
-const getGroups = async enabledProviderIds => {
-  const allGroups = [];
-  for (const providerId of enabledProviderIds) {
-    // @ts-ignore
-    const groups = await getGroups$1(providerId);
-    allGroups.push(...groups);
-  }
-  return {
-    allGroups,
-    gitRoot: ''
-  };
-};
 const getNewButtons = async (displayItems, providerId, buttonIndex) => {
   if (buttonIndex === -1) {
     return [];
@@ -1270,7 +1450,8 @@ const loadContent = async state => {
     itemHeight,
     height,
     minimumSliderSize,
-    workspacePath
+    workspacePath,
+    fileIconCache
   } = state;
   const root = workspacePath;
   const scheme = getProtocol(root);
@@ -1290,6 +1471,10 @@ const loadContent = async state => {
   const numberOfVisible = getNumberOfVisibleItems(listHeight, itemHeight);
   const maxLineY = Math.min(numberOfVisible, total);
   const finalDeltaY = getFinalDeltaY(listHeight, itemHeight, total);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(items, fileIconCache);
   return {
     ...state,
     allGroups,
@@ -1302,7 +1487,547 @@ const loadContent = async state => {
     splitButtonEnabled,
     maxLineY,
     scrollBarHeight,
-    finalDeltaY
+    finalDeltaY,
+    icons,
+    fileIconCache: newFileIconCache
+  };
+};
+
+const handleButtonClick = async (state, clickedIndex) => {
+  const {
+    buttonIndex,
+    buttons,
+    items
+  } = state;
+  const button = buttons[clickedIndex];
+  const item = items[buttonIndex];
+  if (!button) {
+    return state;
+  }
+  await executeCommand(button.command, item.file);
+  const newState = await loadContent(state);
+  return newState;
+};
+
+const show = async (x, y, id, ...args) => {
+  return invoke$1('ContextMenu.show', x, y, id, ...args);
+};
+
+const SourceControl$1 = 22;
+
+const handleContextMenu = async (state, button, x, y) => {
+  await show(x, y, SourceControl$1);
+  return state;
+};
+
+const getPortTuple = () => {
+  const {
+    port1,
+    port2
+  } = new MessageChannel();
+  return {
+    port1,
+    port2
+  };
+};
+
+const sendMessagePortToExtensionHostWorker = async port => {
+  const command = 'HandleMessagePort.handleMessagePort';
+  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, DebugWorker);
+};
+
+const createExtensionHostRpc = async () => {
+  try {
+    const {
+      port1,
+      port2
+    } = getPortTuple();
+    await sendMessagePortToExtensionHostWorker(port2);
+    port1.start();
+    const rpc = await MessagePortRpcParent.create({
+      commandMap: {},
+      messagePort: port1,
+      isMessagePortOpen: false
+    });
+    // TODO createMessageportRpcParent should call port start
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create extension host rpc`);
+  }
+};
+
+const initialize = async () => {
+  const extensionHostRpc = await createExtensionHostRpc();
+  set(ExtensionHostWorker, extensionHostRpc);
+};
+
+const Actions = 'Actions';
+const Chevron = 'Chevron';
+const ChevronRight = 'ChevronRight';
+const DecorationIcon = 'DecorationIcon';
+const FileIcon = 'FileIcon';
+const IconButton = 'IconButton';
+const InputBox = 'InputBox';
+const Label = 'Label';
+const LabelDetail = 'LabelDetail';
+const MaskIcon = 'MaskIcon';
+const MaskIconChevronDown = 'MaskIconChevronDown';
+const SourceControl = 'SourceControl';
+const SourceControlBadge = 'SourceControlBadge';
+const SourceControlButton = 'SourceControlButton';
+const SourceControlHeader = 'SourceControlHeader';
+const SourceControlItems = 'SourceControlItems';
+const SplitButton = 'SplitButton';
+const SplitButtonContent = 'SplitButtonContent';
+const SplitButtonContentDisabled = 'SplitButtonContentDisabled';
+const SplitButtonDisabled = 'SplitButtonDisabled';
+const SplitButtonDropDown = 'SplitButtonDropDown';
+const SplitButtonDropDownDisabled = 'SplitButtonDropDownDisabled';
+const SplitButtonSeparator = 'SplitButtonSeparator';
+const StrikeThrough = 'StrikeThrough';
+const TreeItem$1 = 'TreeItem';
+const Viewlet = 'Viewlet';
+
+const HandleClick = 'handleClick';
+const HandleClickAt = 'handleClickAt';
+const HandleContextMenu = 'handleContextMenu';
+const HandleFocus = 'handleFocus';
+const HandleInput = 'handleInput';
+const HandleMouseOut = 'handleMouseOut';
+const HandleMouseOver = 'handleMouseOver';
+const HandleWheel = 'handleWheel';
+
+const None = 'none';
+const ToolBar = 'toolbar';
+const Tree = 'tree';
+const TreeItem = 'treeitem';
+
+const SourceControlInput$1 = 'SourceControlInput';
+
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
+  };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
+};
+
+const MessageEnterToCommitOnMaster = `Message (Enter) to commit on 'master'`;
+const SourceControlInput = 'Source Control Input';
+
+const messageEnterToCommitOnMaster = () => {
+  return i18nString(MessageEnterToCommitOnMaster);
+};
+const sourceControlInput = () => {
+  return i18nString(SourceControlInput);
+};
+
+const Button$1 = 1;
+const Div = 4;
+const Input = 6;
+const Span = 8;
+const Img = 17;
+
+const getSourceControlHeaderVirtualDom = () => {
+  return [{
+    type: Div,
+    className: SourceControlHeader,
+    childCount: 1
+  }, {
+    type: Input,
+    className: InputBox,
+    ariaLabel: sourceControlInput(),
+    autocapitalize: 'off',
+    autocorrect: 'off',
+    childCount: 0,
+    name: SourceControlInput$1,
+    onFocus: HandleFocus,
+    onInput: HandleInput,
+    placeholder: messageEnterToCommitOnMaster(),
+    spellcheck: false
+  }];
+};
+
+const emptySourceControlButtons = [];
+
+const getIconVirtualDom = (icon, type = Div) => {
+  return {
+    type,
+    className: `MaskIcon MaskIcon${icon}`,
+    role: None,
+    childCount: 0
+  };
+};
+
+const addButtons = (dom, buttons) => {
+  if (buttons === emptySourceControlButtons) {
+    return;
+  }
+  dom[0].childCount += buttons.length;
+  for (const button of buttons) {
+    const {
+      icon,
+      label
+    } = button;
+    dom.push({
+      type: Button$1,
+      className: SourceControlButton,
+      title: label,
+      ariaLabel: label,
+      childCount: 1
+    }, getIconVirtualDom(icon, Span));
+  }
+};
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+const Text = 12;
+const text = data => {
+  return {
+    type: Text,
+    text: data,
+    childCount: 0
+  };
+};
+
+const getBadgeVirtualDom = (className, count) => {
+  return [{
+    type: Div,
+    className: `Badge ${className}`,
+    childCount: 1
+  }, text(`${count}`)];
+};
+
+const getLabelClassName = decorationStrikeThrough => {
+  let className = Label + ' Grow';
+  if (decorationStrikeThrough) {
+    className += ` ${StrikeThrough}`;
+  }
+  return className;
+};
+
+const PaddingLeft = '1rem';
+const PaddingRight = '12px';
+
+const createItemDirectory = item => {
+  const {
+    posInSet,
+    setSize,
+    icon,
+    label,
+    badgeCount,
+    decorationStrikeThrough,
+    type,
+    buttons
+  } = item;
+  const labelClassName = getLabelClassName(decorationStrikeThrough);
+  const dom = [{
+    type: Div,
+    className: TreeItem$1,
+    role: TreeItem,
+    ariaExpanded: type === DirectoryExpanded,
+    ariaPosInSet: posInSet,
+    ariaSetSize: setSize,
+    childCount: 3,
+    paddingLeft: PaddingLeft,
+    paddingRight: PaddingRight
+  }, {
+    type: Div,
+    className: `${Chevron} MaskIcon${icon}`,
+    childCount: 0
+  }, {
+    type: Div,
+    className: labelClassName,
+    childCount: 1
+  }, text(label)];
+  addButtons(dom, buttons);
+  dom.push(...getBadgeVirtualDom(SourceControlBadge, badgeCount));
+  return dom;
+};
+
+const getFileIconVirtualDom = icon => {
+  return {
+    type: Img,
+    className: FileIcon,
+    src: icon,
+    role: None,
+    childCount: 0
+  };
+};
+
+const chevron = {
+  type: Div,
+  className: Chevron,
+  childCount: 1
+};
+const getIconsDom = (icon, fileIcon) => {
+  if (icon === ChevronRight) {
+    return [chevron, getIconVirtualDom(icon)];
+  }
+  return [getFileIconVirtualDom(fileIcon)];
+};
+const createItemOther = item => {
+  const {
+    posInSet,
+    setSize,
+    icon,
+    file,
+    label,
+    decorationIcon,
+    decorationIconTitle,
+    decorationStrikeThrough,
+    detail,
+    buttons,
+    fileIcon
+  } = item;
+  const labelClassName = getLabelClassName(decorationStrikeThrough);
+  const dom = [];
+  dom.push({
+    type: Div,
+    className: TreeItem$1,
+    role: TreeItem,
+    ariaPosInSet: posInSet,
+    ariaSetSize: setSize,
+    title: file,
+    childCount: 3,
+    paddingLeft: '1rem',
+    paddingRight: '12px'
+  }, ...getIconsDom(icon, fileIcon));
+  const labelDom = {
+    type: Div,
+    className: labelClassName,
+    childCount: 1
+  };
+  dom.push(labelDom, text(label));
+  if (detail) {
+    labelDom.childCount++;
+    dom.push({
+      type: Span,
+      className: LabelDetail,
+      childCount: 1
+    }, text(detail));
+  }
+  addButtons(dom, buttons);
+  dom.push({
+    type: Img,
+    className: DecorationIcon,
+    title: decorationIconTitle,
+    src: decorationIcon,
+    childCount: 0
+  });
+  return dom;
+};
+
+const getSourceControlItemVirtualDom = item => {
+  switch (item.type) {
+    case DirectoryExpanded:
+    case Directory:
+      return createItemDirectory(item);
+    default:
+      return createItemOther(item);
+  }
+};
+
+const getSourceControlItemsVirtualDom$1 = (hasItems, buttonText) => {
+  const dom = [];
+  dom.push({
+    type: Div,
+    className: `${SplitButton} ${hasItems ? '' : SplitButtonDisabled}`,
+    childCount: 3
+  }, {
+    type: Div,
+    className: `${SplitButtonContent} ${hasItems ? '' : SplitButtonContentDisabled}`,
+    childCount: 1,
+    tabIndex: 0
+  }, text(buttonText), {
+    type: Div,
+    className: SplitButtonSeparator,
+    childCount: 0
+  }, {
+    type: Div,
+    className: `${SplitButtonDropDown} ${hasItems ? '' : SplitButtonDropDownDisabled}`,
+    childCount: 1,
+    tabIndex: 0
+  }, {
+    type: Div,
+    className: `${MaskIcon} ${MaskIconChevronDown}`,
+    childCount: 0
+  });
+  return dom;
+};
+
+const getSourceControlItemsVirtualDom = (items, splitButtonEnabled) => {
+  const dom = [];
+  dom.push(...getSourceControlHeaderVirtualDom());
+  if (splitButtonEnabled) {
+    const hasItems = items.length > 0;
+    dom.push(...getSourceControlItemsVirtualDom$1(hasItems, 'Commit'));
+  }
+  dom.push({
+    type: Div,
+    className: SourceControlItems,
+    role: Tree,
+    childCount: items.length
+  }, ...items.flatMap(getSourceControlItemVirtualDom));
+  return dom;
+};
+
+const getSourceControlVirtualDom = (items, splitButtonEnabled) => {
+  const dom = [{
+    type: Div,
+    className: mergeClassNames(Viewlet, SourceControl),
+    tabIndex: 0,
+    onClick: HandleClick,
+    onContextMenu: HandleContextMenu,
+    onMouseOver: HandleMouseOver,
+    onMouseOut: HandleMouseOut,
+    onWheel: HandleWheel,
+    childCount: splitButtonEnabled ? 3 : 2
+  }, ...getSourceControlItemsVirtualDom(items, splitButtonEnabled)];
+  return dom;
+};
+
+const getVisibleSourceControlItems = (items, minLineY, maxLineY, buttons, buttonIndex, icons) => {
+  const visible = [];
+  for (let i = minLineY; i < maxLineY; i++) {
+    const item = items[i];
+    const itemButtons = i === buttonIndex ? buttons : emptySourceControlButtons;
+    const fileIcon = icons[i - minLineY];
+    visible.push({
+      ...item,
+      buttons: itemButtons,
+      fileIcon
+    });
+  }
+  return visible;
+};
+
+const renderItems = (oldState, newState) => {
+  const visible = getVisibleSourceControlItems(newState.items, newState.minLineY, newState.maxLineY, newState.buttons, newState.buttonIndex, newState.icons);
+  const dom = getSourceControlVirtualDom(visible, newState.splitButtonEnabled);
+  return ['Viewlet.setDom2', dom];
+};
+
+const getRenderer = diffType => {
+  switch (diffType) {
+    case RenderItems:
+      return renderItems;
+    default:
+      throw new Error('unknown renderer');
+  }
+};
+
+const applyRender = (oldState, newState, diffResult) => {
+  const commands = [];
+  for (const item of diffResult) {
+    const fn = getRenderer(item);
+    const result = fn(oldState, newState);
+    if (result.length > 0) {
+      commands.push(result);
+    }
+  }
+  return commands;
+};
+
+const render2 = (uid, diffResult) => {
+  const {
+    oldState,
+    newState
+  } = get$2(uid);
+  set$1(uid, newState, newState);
+  const commands = applyRender(oldState, newState, diffResult);
+  return commands;
+};
+
+const Button = 1;
+
+const getActionButtonVirtualDom = action => {
+  const {
+    id,
+    icon,
+    command
+  } = action;
+  return [{
+    type: Button$1,
+    className: IconButton,
+    title: id,
+    'data-command': command,
+    childCount: 1
+  }, getIconVirtualDom(icon)];
+};
+
+const getActionVirtualDom = action => {
+  switch (action.type) {
+    case Button:
+      return getActionButtonVirtualDom(action);
+    default:
+      return [];
+  }
+};
+
+const getActionsVirtualDom = actions => {
+  return [{
+    type: Div,
+    className: Actions,
+    role: ToolBar,
+    childCount: actions.length
+  }, ...actions.flatMap(getActionVirtualDom)];
+};
+
+const renderActions = uid => {
+  const actions = [];
+  const dom = getActionsVirtualDom(actions);
+  return dom;
+};
+
+const renderEventListeners = () => {
+  return [{
+    name: HandleWheel,
+    params: ['handleWheel', 'event.deltaMode', 'event.deltaY'],
+    passive: true
+  }, {
+    name: HandleFocus,
+    params: ['handleFocus']
+  }, {
+    name: HandleClickAt,
+    params: ['handleClickAt', 'event.clientX', 'event.clientY']
+  }, {
+    name: HandleMouseOver,
+    params: ['handleMouseOver', 'event.clientX', 'event.clientY']
+  }, {
+    name: HandleInput,
+    params: ['handleInput', 'event.target.value']
+  }, {
+    name: HandleContextMenu,
+    params: ['handleContextMenu', 'event.button', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleWheel,
+    params: ['handleWheel', 'event.deltaMode', 'event.deltaY'],
+    passive: true
+  }];
+};
+
+const saveState = uid => {
+  number(uid);
+  const value = get$2(uid);
+  const {
+    newState
+  } = value;
+  const {
+    root,
+    maxLineY
+  } = newState;
+  return {
+    root,
+    minLineY: 0,
+    maxLineY,
+    deltaY: 0
   };
 };
 
@@ -1310,10 +2035,38 @@ const terminate = () => {
   globalThis.close();
 };
 
+const updateIcons = async state => {
+  const {
+    items,
+    minLineY,
+    maxLineY
+  } = state;
+  const visible = items.slice(minLineY, maxLineY);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(visible, Object.create(null));
+  return {
+    ...state,
+    icons,
+    fileIconCache: newFileIconCache
+  };
+};
+
 const commandMap = {
   'Initialize.initialize': initialize,
-  'SourceControl.loadControl': loadContent,
-  'SourceControl.terminate': terminate
+  'SourceControl.create2': create2,
+  'SourceControl.diff2': diff2,
+  'SourceControl.getCommandIds': getCommandIds,
+  'SourceControl.handleButtonClick': wrapCommand(handleButtonClick),
+  'SourceControl.handleContextMenu': wrapCommand(handleContextMenu),
+  'SourceControl.loadContent': wrapCommand(loadContent),
+  'SourceControl.render2': render2,
+  'SourceControl.renderActions2': renderActions,
+  'SourceControl.renderEventListeners': renderEventListeners,
+  'SourceControl.saveState': saveState,
+  'SourceControl.terminate': terminate,
+  'SourceControl.updateIcons': wrapCommand(updateIcons)
 };
 
 const listen = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/source-control-worker",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Source Control Worker",
   "keywords": [
     "Lvce Editor"