@lvce-editor/source-control-worker 1.2.0 → 1.4.0

package/dist/sourceControlWorkerMain.js

@@ -1051,7 +1051,6 @@ const create2 = (id, uri, x, y, width, height, workspacePath) => {
     untracked: [],
     workingTree: [],
     inputValue: '',
-    displayItems: [],
     buttonIndex: -1,
     enabledProviderIds: [],
     isExpanded: true,
@@ -1062,7 +1061,8 @@ const create2 = (id, uri, x, y, width, height, workspacePath) => {
     gitRoot: '',
     itemHeight: 20,
     minimumSliderSize: 20,
-    workspacePath
+    workspacePath,
+    headerHeight: 40 // TODO
   };
   set$1(id, state, state);
 };
@@ -1071,7 +1071,7 @@ 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;
+  return oldState.allGroups === newState.allGroups && oldState.items === newState.items && 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];
@@ -1097,7 +1097,7 @@ const diff2 = uid => {
   return result;
 };
 
-const commandIds = ['acceptInput', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'handleClick', 'handleClickAt', 'handleIconThemeChange', 'handleWheel'];
+const commandIds = ['acceptInput', 'handleMouseOut', 'focus', 'focusFirst', 'handleFocus', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'handleClick', 'handleClickAt', 'handleIconThemeChange', 'handleMouseOver', 'handleWheel', 'selectIndex', 'handleMouseOverAt'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -1147,6 +1147,7 @@ const executeProvider = async ({
 
 const CommandExecute = 'ExtensionHostCommand.executeCommand';
 const SourceControlGetEnabledProviderIds = 'ExtensionHostSourceControl.getEnabledProviderIds';
+const SourceControlGetFileBefore = 'ExtensionHostSourceControl.GetFileBefore';
 const SourceControlGetGroups = 'ExtensionHostSourceControl.getGroups';
 
 const executeCommand = (id, ...args) => {
@@ -1161,7 +1162,7 @@ const Directory = 3;
 const DirectoryExpanded = 4;
 const File = 7;
 
-const getFileIcon = ({
+const getFileIcon$1 = ({
   name
 }) => {
   return '';
@@ -1183,8 +1184,8 @@ const getDisplayItemsGroup = (group, isExpanded) => {
     throw new Error('Source control group is missing an items property');
   }
   const length = items.length;
-  const type = DirectoryExpanded ;
-  const icon = 'ChevronDown' ;
+  const type = isExpanded ? DirectoryExpanded : Directory;
+  const icon = isExpanded ? 'ChevronDown' : 'ChevronRight';
   if (length > 0) {
     displayItems.push({
       file: '',
@@ -1201,7 +1202,7 @@ const getDisplayItemsGroup = (group, isExpanded) => {
       groupId: id
     });
   }
-  {
+  if (isExpanded) {
     for (let i = 0; i < length; i++) {
       const item = items[i];
       const {
@@ -1218,7 +1219,7 @@ const getDisplayItemsGroup = (group, isExpanded) => {
         detail: folderName,
         posInSet: i + 1,
         setSize: length,
-        icon: getFileIcon({
+        icon: getFileIcon$1({
           name: file
         }),
         decorationIcon: icon,
@@ -1232,21 +1233,142 @@ const getDisplayItemsGroup = (group, isExpanded) => {
   }
   return displayItems;
 };
+
 const getDisplayItems = (allGroups, isExpanded) => {
   const displayItems = [];
   for (const group of allGroups) {
-    const groupDisplayItems = getDisplayItemsGroup(group);
+    const groupDisplayItems = getDisplayItemsGroup(group, isExpanded);
     displayItems.push(...groupDisplayItems);
   }
   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 getFileBefore$1 = (providerId, path) => {
+  return executeProvider({
+    event: 'none',
+    method: SourceControlGetFileBefore,
+    params: [providerId, path]
+    // noProviderFoundMessage: 'No source control provider found',
+  });
+};
+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 getFileBefore = (providerId, file) => {
+  return getFileBefore$1(providerId, file);
+};
+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);
@@ -1290,32 +1412,6 @@ const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
   return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
 };
 
-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');
 };
@@ -1350,18 +1446,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 [];
@@ -1378,7 +1462,8 @@ const loadContent = async state => {
     itemHeight,
     height,
     minimumSliderSize,
-    workspacePath
+    workspacePath,
+    fileIconCache
   } = state;
   const root = workspacePath;
   const scheme = getProtocol(root);
@@ -1388,7 +1473,7 @@ const loadContent = async state => {
     gitRoot
   } = await getGroups(enabledProviderIds);
   const isExpanded = true;
-  const items = getDisplayItems(allGroups);
+  const items = getDisplayItems(allGroups, isExpanded);
   const buttons = await getNewButtons(items, state.providerId, state.buttonIndex);
   const splitButtonEnabled = get();
   const total = items.length;
@@ -1398,6 +1483,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,
@@ -1410,7 +1499,9 @@ const loadContent = async state => {
     splitButtonEnabled,
     maxLineY,
     scrollBarHeight,
-    finalDeltaY
+    finalDeltaY,
+    icons,
+    fileIconCache: newFileIconCache
   };
 };
 
@@ -1430,17 +1521,134 @@ const handleButtonClick = async (state, clickedIndex) => {
   return newState;
 };
 
+const getIndex = (state, eventX, eventY) => {
+  const {
+    headerHeight,
+    y,
+    itemHeight
+  } = state;
+  const relativeY = eventY - y - headerHeight;
+  const index = Math.floor(relativeY / itemHeight);
+  return index;
+};
+
+const handleClickDirectory = async (state, item) => {
+  const {
+    allGroups
+  } = state;
+  const isExpanded = true;
+  const displayItems = getDisplayItems(allGroups, isExpanded);
+  const newMaxLineY = displayItems.length;
+  return {
+    ...state,
+    items: displayItems,
+    isExpanded,
+    maxLineY: newMaxLineY
+  };
+};
+
+const handleClickDirectoryExpanded = async (state, item) => {
+  const {
+    allGroups,
+    maxLineY
+  } = state;
+  const isExpanded = false;
+  const displayItems = getDisplayItems(allGroups, isExpanded);
+  const newMaxLineY = Math.min(displayItems.length, maxLineY);
+  return {
+    ...state,
+    items: displayItems,
+    isExpanded,
+    maxLineY: newMaxLineY
+  };
+};
+
+const readFile = async (uri, encoding = 'utf8') => {
+  const content = await invoke$1('FileSystem.readFile', uri);
+  return content;
+};
+
+const openUri = uri => {
+  return invoke$1('Main.openUri', uri);
+};
+
+const handleClickFile = async (state, item) => {
+  const {
+    enabledProviderIds,
+    root
+  } = state;
+  const providerId = enabledProviderIds[0];
+  const absolutePath = `${root}/${item.file}`;
+  // TODO handle error
+  const [fileBefore] = await Promise.all([getFileBefore(providerId, item.file), readFile(absolutePath)]);
+  {
+    await openUri(`inline-diff://data://${fileBefore}<->${absolutePath}`);
+  }
+  return state;
+};
+
+const selectIndex = async (state, index) => {
+  const {
+    items
+  } = state;
+  if (index < 0 || index >= items.length) {
+    return state;
+  }
+  const item = items[index];
+  switch (item.type) {
+    case Directory:
+      return handleClickDirectory(state);
+    case DirectoryExpanded:
+      return handleClickDirectoryExpanded(state);
+    case File:
+      return handleClickFile(state, item);
+    default:
+      console.warn(`unknown item type: ${item.type}`);
+      return state;
+  }
+};
+
+const handleClickAt = async (state, eventX, eventY) => {
+  const index = getIndex(state, eventX, eventY);
+  return selectIndex(state, index);
+};
+
 const show = async (x, y, id, ...args) => {
   return invoke$1('ContextMenu.show', x, y, id, ...args);
 };
 
-const SourceControl = 22;
+const SourceControl$1 = 22;
 
 const handleContextMenu = async (state, button, x, y) => {
-  await show(x, y, SourceControl);
+  await show(x, y, SourceControl$1);
+  return state;
+};
+
+const handleFocus = async state => {
   return state;
 };
 
+const handleMouseOver = async (state, index) => {
+  const {
+    items,
+    providerId,
+    buttonIndex
+  } = state;
+  if (index === buttonIndex) {
+    return state;
+  }
+  const item = items[index];
+  if (!item) {
+    return state;
+  }
+  const actions = await getSourceControlActions(providerId, item.groupId, item.type);
+  return {
+    ...state,
+    buttonIndex: index,
+    buttons: actions
+  };
+};
+
 const getPortTuple = () => {
   const {
     port1,
@@ -1482,17 +1690,6 @@ const initialize = async () => {
   set(ExtensionHostWorker, extensionHostRpc);
 };
 
-const HandleClick = 'handleClick';
-const HandleContextMenu = 'handleContextMenu';
-const HandleMouseOut = 'handleMouseOut';
-const HandleMouseOver = 'handleMouseOver';
-const HandleWheel = 'handleWheel';
-
-const None = 'none';
-const ToolBar = 'toolbar';
-const Tree = 'tree';
-const TreeItem$1 = 'treeitem';
-
 const Actions = 'Actions';
 const Chevron = 'Chevron';
 const ChevronRight = 'ChevronRight';
@@ -1504,6 +1701,7 @@ const Label = 'Label';
 const LabelDetail = 'LabelDetail';
 const MaskIcon = 'MaskIcon';
 const MaskIconChevronDown = 'MaskIconChevronDown';
+const SourceControl = 'SourceControl';
 const SourceControlBadge = 'SourceControlBadge';
 const SourceControlButton = 'SourceControlButton';
 const SourceControlHeader = 'SourceControlHeader';
@@ -1516,9 +1714,41 @@ const SplitButtonDropDown = 'SplitButtonDropDown';
 const SplitButtonDropDownDisabled = 'SplitButtonDropDownDisabled';
 const SplitButtonSeparator = 'SplitButtonSeparator';
 const StrikeThrough = 'StrikeThrough';
-const TreeItem = 'TreeItem';
+const TreeItem$1 = 'TreeItem';
+const Viewlet = 'Viewlet';
 
-const emptySourceControlButtons = [];
+const HandleClickAt = 'handleClickAt';
+const HandleContextMenu = 'handleContextMenu';
+const HandleFocus = 'handleFocus';
+const HandleInput = 'handleInput';
+const HandleMouseOut = 'handleMouseOut';
+const HandleMouseOver = 'handleMouseOver';
+const HandleMouseOverAt = 'handleMouseOverAt';
+const HandleWheel = 'handleWheel';
+
+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;
@@ -1526,32 +1756,32 @@ const Input = 6;
 const Span = 8;
 const Img = 17;
 
-const Text = 12;
-const text = data => {
-  return {
-    type: Text,
-    text: data,
-    childCount: 0
-  };
-};
-
-const getBadgeVirtualDom = (className, count) => {
+const getSourceControlHeaderVirtualDom = () => {
   return [{
     type: Div,
-    className: `Badge ${className}`,
+    className: SourceControlHeader,
     childCount: 1
-  }, text(`${count}`)];
+  }, {
+    type: Input,
+    className: InputBox,
+    ariaLabel: sourceControlInput(),
+    autocapitalize: 'off',
+    autocorrect: 'off',
+    childCount: 0,
+    name: SourceControlInput$1,
+    onFocus: HandleFocus,
+    onInput: HandleInput,
+    placeholder: messageEnterToCommitOnMaster(),
+    spellcheck: false
+  }];
 };
 
-const getFileIconVirtualDom = icon => {
-  return {
-    type: Img,
-    className: FileIcon,
-    src: icon,
-    role: None,
-    childCount: 0
-  };
-};
+const None = 'none';
+const ToolBar = 'toolbar';
+const Tree = 'tree';
+const TreeItem = 'treeitem';
+
+const emptySourceControlButtons = [];
 
 const getIconVirtualDom = (icon, type = Div) => {
   return {
@@ -1562,16 +1792,6 @@ const getIconVirtualDom = (icon, type = Div) => {
   };
 };
 
-const PaddingLeft = '1rem';
-const PaddingRight = '12px';
-
-const getLabelClassName = decorationStrikeThrough => {
-  let className = Label + ' Grow';
-  if (decorationStrikeThrough) {
-    className += ` ${StrikeThrough}`;
-  }
-  return className;
-};
 const addButtons = (dom, buttons) => {
   if (buttons === emptySourceControlButtons) {
     return;
@@ -1591,6 +1811,38 @@ const addButtons = (dom, buttons) => {
     }, 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,
@@ -1605,8 +1857,8 @@ const createItemDirectory = item => {
   const labelClassName = getLabelClassName(decorationStrikeThrough);
   const dom = [{
     type: Div,
-    className: TreeItem,
-    role: TreeItem$1,
+    className: TreeItem$1,
+    role: TreeItem,
     ariaExpanded: type === DirectoryExpanded,
     ariaPosInSet: posInSet,
     ariaSetSize: setSize,
@@ -1626,6 +1878,28 @@ const createItemDirectory = item => {
   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,
@@ -1637,28 +1911,22 @@ const createItemOther = item => {
     decorationIconTitle,
     decorationStrikeThrough,
     detail,
-    buttons
+    buttons,
+    fileIcon
   } = item;
   const labelClassName = getLabelClassName(decorationStrikeThrough);
-  /**
-   * @type {any[]}
-   */
   const dom = [];
   dom.push({
     type: Div,
-    className: TreeItem,
-    role: TreeItem$1,
+    className: TreeItem$1,
+    role: TreeItem,
     ariaPosInSet: posInSet,
     ariaSetSize: setSize,
     title: file,
     childCount: 3,
     paddingLeft: '1rem',
     paddingRight: '12px'
-  }, ...(icon === ChevronRight ? [{
-    type: Div,
-    className: Chevron,
-    childCount: 1
-  }, getIconVirtualDom(icon)] : [getFileIconVirtualDom(icon)]));
+  }, ...getIconsDom(icon, fileIcon));
   const labelDom = {
     type: Div,
     className: labelClassName,
@@ -1683,6 +1951,7 @@ const createItemOther = item => {
   });
   return dom;
 };
+
 const getSourceControlItemVirtualDom = item => {
   switch (item.type) {
     case DirectoryExpanded:
@@ -1693,9 +1962,21 @@ const getSourceControlItemVirtualDom = item => {
   }
 };
 
-const getSourceControlItemsVirtualDom$1 = (hasItems, buttonText) => {
-  const dom = [];
-  dom.push({
+const getSourceControlListVirtualDom = items => {
+  return [{
+    type: Div,
+    className: SourceControlItems,
+    role: Tree,
+    childCount: items.length,
+    onClick: HandleClickAt
+  }, ...items.flatMap(getSourceControlItemVirtualDom)];
+};
+
+const getSplitButtonVirtualDom = (hasItems, splitButtonEnabled, buttonText) => {
+  if (!splitButtonEnabled || !hasItems) {
+    return [];
+  }
+  return [{
     type: Div,
     className: `${SplitButton} ${hasItems ? '' : SplitButtonDisabled}`,
     childCount: 3
@@ -1717,93 +1998,41 @@ const getSourceControlItemsVirtualDom$1 = (hasItems, buttonText) => {
     type: Div,
     className: `${MaskIcon} ${MaskIconChevronDown}`,
     childCount: 0
-  });
-  return dom;
-};
-
-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 getSourceControlItemsVirtualDom = (items, splitButtonEnabled) => {
-  const dom = [];
-  dom.push({
-    type: Div,
-    className: SourceControlHeader,
-    childCount: 1
-  }, {
-    type: Input,
-    className: InputBox,
-    spellcheck: false,
-    autocapitalize: 'off',
-    autocorrect: 'off',
-    placeholder: messageEnterToCommitOnMaster(),
-    ariaLabel: sourceControlInput(),
-    childCount: 0,
-    onInput: 'handleInput',
-    onFocus: 'handleFocus'
-  });
-  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 hasItems = items.length > 0;
   const dom = [{
     type: Div,
-    className: 'Viewlet SourceControl',
+    className: mergeClassNames(Viewlet, SourceControl),
     tabIndex: 0,
-    onClick: HandleClick,
     onContextMenu: HandleContextMenu,
     onMouseOver: HandleMouseOver,
     onMouseOut: HandleMouseOut,
     onWheel: HandleWheel,
     childCount: splitButtonEnabled ? 3 : 2
-  }, ...getSourceControlItemsVirtualDom(items, splitButtonEnabled)];
+  }, ...getSourceControlHeaderVirtualDom(), ...getSplitButtonVirtualDom(hasItems, splitButtonEnabled, 'Commit'), ...getSourceControlListVirtualDom(items)];
   return dom;
 };
 
-const getVisibleSourceControlItems = (items, minLineY, maxLineY, buttons, buttonIndex) => {
+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
+      buttons: itemButtons,
+      fileIcon
     });
   }
   return visible;
 };
 
 const renderItems = (oldState, newState) => {
-  const visible = getVisibleSourceControlItems(newState.items, newState.minLineY, newState.maxLineY, newState.buttons, newState.buttonIndex);
+  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];
 };
@@ -1885,6 +2114,29 @@ const renderEventListeners = () => {
     name: HandleWheel,
     params: ['handleWheel', 'event.deltaMode', 'event.deltaY'],
     passive: true
+  }, {
+    name: HandleFocus,
+    params: ['handleFocus']
+  }, {
+    name: HandleClickAt,
+    params: ['handleClickAt', 'event.clientX', 'event.clientY']
+  }, {
+    name: HandleMouseOverAt,
+    params: ['handleMouseOverAt', '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
   }];
 };
 
@@ -1910,19 +2162,42 @@ 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.create2': create2,
   'SourceControl.diff2': diff2,
   'SourceControl.getCommandIds': getCommandIds,
   'SourceControl.handleButtonClick': wrapCommand(handleButtonClick),
+  'SourceControl.handleClickAt': wrapCommand(handleClickAt),
   'SourceControl.handleContextMenu': wrapCommand(handleContextMenu),
+  'SourceControl.handleMouseOver': wrapCommand(handleMouseOver),
   'SourceControl.loadContent': wrapCommand(loadContent),
+  'SourceControl.handleFocus': wrapCommand(handleFocus),
   'SourceControl.render2': render2,
   'SourceControl.renderActions2': renderActions,
   'SourceControl.renderEventListeners': renderEventListeners,
   'SourceControl.saveState': saveState,
-  'SourceControl.terminate': terminate
+  'SourceControl.selectIndex': wrapCommand(selectIndex),
+  '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.2.0",
+  "version": "1.4.0",
   "description": "Source Control Worker",
   "keywords": [
     "Lvce Editor"