@lvce-editor/explorer-view 1.29.0 → 2.0.0

package/dist/explorerViewWorkerMain.js

@@ -1802,7 +1802,108 @@ const focusPrevious = state => {
   }
 };
 
-const Button$2 = 1;
+const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleCopy', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'refresh', 'relealItem', 'removeDirent', 'rename', 'renameDirent', 'revealItem', 'scrollDown', 'scrollUp', 'setDeltaY', 'renderEventListeners', 'updateEditingValue', 'updateIcons'];
+
+const getCommandIds = () => {
+  return commandIds;
+};
+
+const Enter = 3;
+const Escape = 8;
+const Space = 9;
+const End = 255;
+const Home = 12;
+const LeftArrow = 13;
+const UpArrow = 14;
+const RightArrow = 15;
+const DownArrow = 16;
+const Delete$1 = 18;
+const KeyC = 31;
+const KeyV = 50;
+const F2 = 58;
+const Star = 131;
+
+const CtrlCmd = 1 << 11 >>> 0;
+const Alt = 1 << 9 >>> 0;
+
+const FocusExplorer = 13;
+const FocusExplorerEditBox = 14;
+
+const getKeyBindings = () => {
+  return [{
+    key: RightArrow,
+    command: 'Explorer.handleArrowRight',
+    when: FocusExplorer
+  }, {
+    key: LeftArrow,
+    command: 'Explorer.handleArrowLeft',
+    when: FocusExplorer
+  }, {
+    key: Home,
+    command: 'Explorer.focusFirst',
+    when: FocusExplorer
+  }, {
+    key: End,
+    command: 'Explorer.focusLast',
+    when: FocusExplorer
+  }, {
+    key: UpArrow,
+    command: 'Explorer.focusPrevious',
+    when: FocusExplorer
+  }, {
+    key: DownArrow,
+    command: 'Explorer.focusNext',
+    when: FocusExplorer
+  }, {
+    key: CtrlCmd | Star,
+    command: 'Explorer.expandAll',
+    when: FocusExplorer
+  }, {
+    key: Alt | RightArrow,
+    command: 'Explorer.expandRecursively',
+    when: FocusExplorer
+  }, {
+    key: CtrlCmd | LeftArrow,
+    command: 'Explorer.collapseAll',
+    when: FocusExplorer
+  }, {
+    key: CtrlCmd | KeyV,
+    command: 'Explorer.handlePaste',
+    when: FocusExplorer
+  }, {
+    key: CtrlCmd | KeyC,
+    command: 'Explorer.handleCopy',
+    when: FocusExplorer
+  }, {
+    key: F2,
+    command: 'Explorer.rename',
+    when: FocusExplorer
+  }, {
+    key: Escape,
+    command: 'Explorer.cancelEdit',
+    when: FocusExplorerEditBox
+  }, {
+    key: Enter,
+    command: 'Explorer.acceptEdit',
+    when: FocusExplorerEditBox
+  }, {
+    key: Delete$1,
+    command: 'Explorer.removeDirent',
+    when: FocusExplorer
+  }, {
+    key: Escape,
+    command: 'Explorer.focusNone',
+    when: FocusExplorer
+  }, {
+    key: Space,
+    command: 'Explorer.handleClickCurrentButKeepFocus',
+    when: FocusExplorer
+  }, {
+    key: Enter,
+    command: 'Explorer.handleClickCurrent',
+    when: FocusExplorer
+  }];
+};
 
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
@@ -1826,7 +1927,7 @@ const Paste = 'Paste';
 const CopyPath = 'Copy Path';
 const CopyRelativePath = 'Copy Relative Path';
 const Rename = 'Rename';
-const Delete$1 = 'Delete';
+const Delete = 'Delete';
 const RefreshExplorer = 'Refresh Explorer';
 const CollapseAllFoldersInExplorer = 'Collapse All Folders in Explorer';
 const FilesExplorer = 'Files Explorer';
@@ -1864,7 +1965,7 @@ const rename = () => {
   return i18nString(Rename);
 };
 const deleteItem = () => {
-  return i18nString(Delete$1);
+  return i18nString(Delete);
 };
 const refresh = () => {
   return i18nString(RefreshExplorer);
@@ -1882,391 +1983,58 @@ const openFolder$1 = () => {
   return i18nString(OpenFolder);
 };
 
-const CollapseAll = 'CollapseAll';
-const NewFile = 'NewFile';
-const NewFolder = 'NewFolder';
-const Refresh = 'Refresh';
-
-const getActions = root => {
-  if (!root) {
-    return [];
-  }
-  return [{
-    type: Button$2,
-    id: newFile$1(),
-    icon: NewFile,
-    command: 'newFile'
-  }, {
-    type: Button$2,
-    id: newFolder$1(),
-    icon: NewFolder,
-    command: 'newFolder'
-  }, {
-    type: Button$2,
-    id: refresh(),
-    icon: Refresh,
-    command: 'refresh'
-  }, {
-    type: Button$2,
-    id: collapseAll(),
-    icon: CollapseAll,
-    command: 'collapseAll'
-  }];
-};
-
-const commandIds = ['acceptEdit', 'cancelEdit', 'collapseAll', 'copyPath', 'copyRelativePath', 'expandAll', 'expandRecursively', 'focus', 'focusFirst', 'focusIndex', 'focusLast', 'focusNext', 'focusNone', 'focusPrevious', 'getFocusedDirent', 'handleArrowLeft', 'handleArrowLeft', 'handleArrowRight', 'handleArrowRight', 'handleBlur', 'handleClick', 'handleClickAt', 'handleClickCurrent', 'handleClickCurrentButKeepFocus', 'handleClickOpenFolder', 'handleContextMenu', 'handleCopy', 'handleDragOver', 'handleDrop', 'handleFocus', 'handleIconThemeChange', 'handleLanguagesChanged', 'handleMouseEnter', 'handleMouseLeave', 'handlePaste', 'handlePointerDown', 'handleUpload', 'handleWheel', 'handleWorkspaceChange', 'hotReload', 'newFile', 'newFolder', 'openContainingFolder', 'refresh', 'refresh', 'relealItem', 'removeDirent', 'rename', 'renameDirent', 'revealItem', 'scrollDown', 'scrollUp', 'setDeltaY', 'renderEventListeners', 'updateEditingValue', 'updateIcons'];
+const Separator = 1;
+const None$4 = 0;
+const RestoreFocus = 6;
 
-const getCommandIds = () => {
-  return commandIds;
+const menuEntrySeparator = {
+  id: 'separator',
+  label: '',
+  flags: Separator,
+  command: ''
 };
 
-const None$4 = 'none';
-const ToolBar = 'toolbar';
-const Tree = 'tree';
-const TreeItem$1 = 'treeitem';
-
-const Actions = 'Actions';
-const Button$1 = 'Button';
-const ButtonNarrow = 'ButtonNarrow';
-const ButtonPrimary = 'ButtonPrimary';
-const ButtonWide = 'ButtonWide';
-const Chevron = 'Chevron';
-const Explorer$1 = 'Explorer';
-const FileIcon = 'FileIcon';
-const FocusOutline = 'FocusOutline';
-const IconButton = 'IconButton';
-const InputBox = 'InputBox';
-const Label = 'Label';
-const MaskIconChevronDown = 'MaskIconChevronDown';
-const MaskIconChevronRight = 'MaskIconChevronRight';
-const TreeItem = 'TreeItem';
-const TreeItemActive = 'TreeItemActive';
-const Viewlet = 'Viewlet';
-const Welcome = 'Welcome';
-const WelcomeMessage = 'WelcomeMessage';
-
-// TODO add option to make classnames numeric
-// once at start, send all classnames to renderer process
-// then, components uses numeric classname
-// when a component uses multiple classnames, it is a new number
-// representing the concatenated strings for example
-// 0 = 'Button'
-// 1 = 'IconButton'
-// 2 = 'Button IconButton'
-// it could make dom diffing faster, since for classname,
-// only numbers are compared. it could also make rendering faster,
-// since less data is transferred to renderer process
-
-const HandleClick = 'handleClick';
-const HandleClickOpenFolder = 'handleClickOpenFolder';
-const HandleContextMenu = 'handleContextMenu';
-const HandleEditingInput = 'handleEditingInput';
-const HandleListBlur = 'handleListBlur';
-const HandleListFocus = 'handleListFocus';
-const HandlePointerDown = 'handlePointerDown';
-const HandleWheel = 'handleWheel';
-
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
+const menuEntryNewFile = {
+  id: 'newFile',
+  label: newFile$1(),
+  flags: None$4,
+  command: 'Explorer.newFile'
 };
-const Text = 12;
-const text = data => {
-  return {
-    type: Text,
-    text: data,
-    childCount: 0
-  };
+const menuEntryNewFolder = {
+  id: 'newFolder',
+  label: newFolder$1(),
+  flags: None$4,
+  command: 'Explorer.newFolder'
 };
-
-const Button = 1;
-const Div = 4;
-const Input = 6;
-const Img = 17;
-const P = 50;
-
-const chevronDownVirtualDom = {
-  type: Div,
-  className: mergeClassNames(Chevron, MaskIconChevronDown),
-  childCount: 0
+const menuEntryOpenContainingFolder = {
+  id: 'openContainingFolder',
+  label: openContainingFolder$1(),
+  flags: RestoreFocus,
+  command: 'Explorer.openContainingFolder'
 };
-
-const chevronRightVirtualDom = {
-  type: Div,
-  className: mergeClassNames(Chevron, MaskIconChevronRight),
-  childCount: 0
+const menuEntryOpenInIntegratedTerminal = {
+  id: 'openInIntegratedTerminal',
+  label: openInIntegratedTerminal(),
+  flags: None$4,
+  command: /* TODO */'-1'
 };
-
-const chevronDomNodes = [[], [chevronRightVirtualDom], [chevronDownVirtualDom]];
-const getChevronVirtualDom = chevronType => {
-  return chevronDomNodes[chevronType];
+const menuEntryCut = {
+  id: 'cut',
+  label: cut(),
+  flags: RestoreFocus,
+  command: /* TODO */'-1'
 };
-
-const getFileIconVirtualDom = icon => {
-  return {
-    type: Img,
-    className: FileIcon,
-    src: icon,
-    role: None$4,
-    childCount: 0
-  };
+const menuEntryCopy = {
+  id: 'copy',
+  label: copy(),
+  flags: RestoreFocus,
+  command: 'Explorer.handleCopy'
 };
-
-const ExplorerInput = 'ExplorerInput';
-
-const label = {
-  type: Div,
-  className: Label,
-  childCount: 1
-};
-const getInputOrLabelDom = (isEditing, name) => {
-  if (isEditing) {
-    return [{
-      type: Input,
-      className: InputBox,
-      id: 'ExplorerInput',
-      onInput: HandleEditingInput,
-      childCount: 0,
-      name: ExplorerInput
-    }];
-  }
-  return [label, text(name)];
-};
-
-const getExplorerItemVirtualDom = item => {
-  const {
-    posInSet,
-    setSize,
-    icon,
-    name,
-    path,
-    depth,
-    indent,
-    chevron,
-    id,
-    className,
-    isEditing,
-    ariaExpanded
-  } = item;
-  const chevronDom = getChevronVirtualDom(chevron);
-  const dom = [{
-    type: Div,
-    role: TreeItem$1,
-    className,
-    draggable: true,
-    title: path,
-    ariaPosInSet: posInSet,
-    ariaSetSize: setSize,
-    ariaLevel: depth,
-    childCount: 2 + chevronDom.length,
-    paddingLeft: indent,
-    ariaLabel: name,
-    ariaExpanded,
-    ariaDescription: '',
-    id
-  }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, name)];
-  return dom;
-};
-
-const getExplorerWelcomeVirtualDom = isWide => {
-  return [{
-    type: Div,
-    className: mergeClassNames(Viewlet, Explorer$1),
-    tabIndex: 0,
-    childCount: 1
-  }, {
-    type: Div,
-    className: Welcome,
-    childCount: 2
-  }, {
-    type: P,
-    className: WelcomeMessage,
-    childCount: 1
-  }, text(youHaveNotYetOpenedAFolder()), {
-    type: Button,
-    className: mergeClassNames(Button$1, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
-    childCount: 1,
-    onClick: HandleClickOpenFolder
-  }, text(openFolder$1())];
-};
-
-const getActiveDescendant = focusedIndex => {
-  if (focusedIndex >= 0) {
-    return 'TreeItemActive';
-  }
-  return undefined;
-};
-const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused) => {
-  if (!root) {
-    return getExplorerWelcomeVirtualDom(isWide);
-  }
-  const extraClass = focused && focusedIndex === -1 ? FocusOutline : '';
-  const dom = [{
-    type: Div,
-    className: mergeClassNames(Viewlet, Explorer$1, extraClass),
-    tabIndex: 0,
-    role: Tree,
-    ariaLabel: filesExplorer(),
-    childCount: visibleItems.length,
-    ariaActiveDescendant: getActiveDescendant(focusedIndex),
-    onFocus: HandleListFocus,
-    onBlur: HandleListBlur,
-    onContextMenu: HandleContextMenu,
-    onPointerDown: HandlePointerDown,
-    onWheel: HandleWheel,
-    onClick: HandleClick
-  }, ...visibleItems.flatMap(getExplorerItemVirtualDom)];
-  return dom;
-};
-
-const Enter = 3;
-const Escape = 8;
-const Space = 9;
-const End = 255;
-const Home = 12;
-const LeftArrow = 13;
-const UpArrow = 14;
-const RightArrow = 15;
-const DownArrow = 16;
-const Delete = 18;
-const KeyC = 31;
-const KeyV = 50;
-const F2 = 58;
-const Star = 131;
-
-const CtrlCmd = 1 << 11 >>> 0;
-const Alt = 1 << 9 >>> 0;
-
-const FocusExplorer = 13;
-const FocusExplorerEditBox = 14;
-
-const getKeyBindings = () => {
-  return [{
-    key: RightArrow,
-    command: 'Explorer.handleArrowRight',
-    when: FocusExplorer
-  }, {
-    key: LeftArrow,
-    command: 'Explorer.handleArrowLeft',
-    when: FocusExplorer
-  }, {
-    key: Home,
-    command: 'Explorer.focusFirst',
-    when: FocusExplorer
-  }, {
-    key: End,
-    command: 'Explorer.focusLast',
-    when: FocusExplorer
-  }, {
-    key: UpArrow,
-    command: 'Explorer.focusPrevious',
-    when: FocusExplorer
-  }, {
-    key: DownArrow,
-    command: 'Explorer.focusNext',
-    when: FocusExplorer
-  }, {
-    key: CtrlCmd | Star,
-    command: 'Explorer.expandAll',
-    when: FocusExplorer
-  }, {
-    key: Alt | RightArrow,
-    command: 'Explorer.expandRecursively',
-    when: FocusExplorer
-  }, {
-    key: CtrlCmd | LeftArrow,
-    command: 'Explorer.collapseAll',
-    when: FocusExplorer
-  }, {
-    key: CtrlCmd | KeyV,
-    command: 'Explorer.handlePaste',
-    when: FocusExplorer
-  }, {
-    key: CtrlCmd | KeyC,
-    command: 'Explorer.handleCopy',
-    when: FocusExplorer
-  }, {
-    key: F2,
-    command: 'Explorer.rename',
-    when: FocusExplorer
-  }, {
-    key: Escape,
-    command: 'Explorer.cancelEdit',
-    when: FocusExplorerEditBox
-  }, {
-    key: Enter,
-    command: 'Explorer.acceptEdit',
-    when: FocusExplorerEditBox
-  }, {
-    key: Delete,
-    command: 'Explorer.removeDirent',
-    when: FocusExplorer
-  }, {
-    key: Escape,
-    command: 'Explorer.focusNone',
-    when: FocusExplorer
-  }, {
-    key: Space,
-    command: 'Explorer.handleClickCurrentButKeepFocus',
-    when: FocusExplorer
-  }, {
-    key: Enter,
-    command: 'Explorer.handleClickCurrent',
-    when: FocusExplorer
-  }];
-};
-
-const Separator = 1;
-const None$3 = 0;
-const RestoreFocus = 6;
-
-const menuEntrySeparator = {
-  id: 'separator',
-  label: '',
-  flags: Separator,
-  command: ''
-};
-
-const menuEntryNewFile = {
-  id: 'newFile',
-  label: newFile$1(),
-  flags: None$3,
-  command: 'Explorer.newFile'
-};
-const menuEntryNewFolder = {
-  id: 'newFolder',
-  label: newFolder$1(),
-  flags: None$3,
-  command: 'Explorer.newFolder'
-};
-const menuEntryOpenContainingFolder = {
-  id: 'openContainingFolder',
-  label: openContainingFolder$1(),
-  flags: RestoreFocus,
-  command: 'Explorer.openContainingFolder'
-};
-const menuEntryOpenInIntegratedTerminal = {
-  id: 'openInIntegratedTerminal',
-  label: openInIntegratedTerminal(),
-  flags: None$3,
-  command: /* TODO */'-1'
-};
-const menuEntryCut = {
-  id: 'cut',
-  label: cut(),
-  flags: RestoreFocus,
-  command: /* TODO */'-1'
-};
-const menuEntryCopy = {
-  id: 'copy',
-  label: copy(),
-  flags: RestoreFocus,
-  command: 'Explorer.handleCopy'
-};
-const menuEntryPaste = {
-  id: 'paste',
-  label: paste(),
-  flags: None$3,
-  command: 'Explorer.handlePaste'
+const menuEntryPaste = {
+  id: 'paste',
+  label: paste(),
+  flags: None$4,
+  command: 'Explorer.handlePaste'
 };
 const menuEntryCopyPath = {
   id: 'copyPath',
@@ -2283,13 +2051,13 @@ const menuEntryCopyRelativePath = {
 const menuEntryRename = {
   id: 'rename',
   label: rename(),
-  flags: None$3,
+  flags: None$4,
   command: 'Explorer.renameDirent'
 };
 const menuEntryDelete = {
   id: 'delete',
   label: deleteItem(),
-  flags: None$3,
+  flags: None$4,
   command: 'Explorer.removeDirent'
 };
 const ALL_ENTRIES = [menuEntryNewFile, menuEntryNewFolder, menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryCut, menuEntryCopy, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath, menuEntrySeparator, menuEntryRename, menuEntryDelete];
@@ -2330,116 +2098,19 @@ const getMenuEntries = state => {
   }
 };
 
-const None$2 = 0;
-const Right = 1;
-const Down = 2;
+const getParentStartIndex = (dirents, index) => {
+  const dirent = dirents[index];
+  let startIndex = index - 1;
+  while (startIndex >= 0 && dirents[startIndex].depth >= dirent.depth) {
+    startIndex--;
+  }
+  return startIndex;
+};
 
-const getChevronType = (type, useChevrons) => {
-  if (!useChevrons) {
-    return None$2;
-  }
-  switch (type) {
-    case Directory:
-      return Right;
-    case DirectoryExpanded:
-    case DirectoryExpanding:
-      return Down;
-    default:
-      return None$2;
-  }
-};
-
-const None$1 = 0;
-const Expanded = 1;
-const Collapsed = 2;
-
-const getExpandedType = type => {
-  switch (type) {
-    case Directory:
-      return Collapsed;
-    case DirectoryExpanding:
-    case DirectoryExpanded:
-      return Expanded;
-    default:
-      return None$1;
-  }
-};
-
-const defaultIndent$1 = 1;
-const getTreeItemIndent = depth => {
-  return `${depth * defaultIndent$1}rem`;
-};
-
-// TODO make all of these variable configurable
-const defaultPaddingLeft = 4;
-const defaultIndent = 8;
-
-// TODO make chevron size configurable
-const chevronSize = 22;
-const getTreeItemIndentWithChevron = (depth, chevron) => {
-  // TODO use numeric value here, convert to string value in renderer process
-  const extraSpace = chevron ? 0 : chevronSize;
-  return `${depth * defaultIndent + extraSpace + defaultPaddingLeft}px`;
-};
-
-const ariaExpandedValues = [undefined, 'true', 'false'];
-const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, icons, useChevrons) => {
-  const visible = [];
-  const indentFn = useChevrons ? getTreeItemIndentWithChevron : getTreeItemIndent;
-  let iconIndex = 0;
-  for (let i = minLineY; i < Math.min(maxLineY, items.length); i++) {
-    const item = items[i];
-    const icon = icons[iconIndex++];
-    const chevron = getChevronType(item.type, useChevrons);
-    const indent = indentFn(item.depth, chevron);
-    const isFocused = i === focusedIndex;
-    const id = isFocused ? 'TreeItemActive' : undefined;
-    const className = isFocused ? TreeItem + ' ' + TreeItemActive : TreeItem;
-    const expanded = getExpandedType(item.type);
-    const ariaExpanded = ariaExpandedValues[expanded];
-    visible.push({
-      ...item,
-      isEditing: i === editingIndex,
-      icon,
-      indent,
-      ariaExpanded,
-      chevron,
-      id,
-      className
-    });
-  }
-  if (editingType !== None$5 && editingIndex === -1) {
-    visible.push({
-      depth: 3,
-      posInSet: 1,
-      setSize: 1,
-      icon: '',
-      name: 'new',
-      path: '/test/new',
-      isEditing: true,
-      indent: '',
-      ariaExpanded: undefined,
-      chevron: 0,
-      id: undefined,
-      className: TreeItem
-    });
-  }
-  return visible;
-};
-
-const getParentStartIndex = (dirents, index) => {
-  const dirent = dirents[index];
-  let startIndex = index - 1;
-  while (startIndex >= 0 && dirents[startIndex].depth >= dirent.depth) {
-    startIndex--;
-  }
-  return startIndex;
-};
-
-const focusParentFolder = state => {
-  const parentStartIndex = getParentStartIndex(state.items, state.focusedIndex);
-  if (parentStartIndex === -1) {
-    return state;
+const focusParentFolder = state => {
+  const parentStartIndex = getParentStartIndex(state.items, state.focusedIndex);
+  if (parentStartIndex === -1) {
+    return state;
   }
   return focusIndex(state, parentStartIndex);
 };
@@ -2789,7 +2460,7 @@ const show = async (x, y, id, ...args) => {
   return invoke('ContextMenu.show', x, y, id, ...args);
 };
 
-const Explorer = 4;
+const Explorer$1 = 4;
 
 const handleContextMenuKeyboard = async state => {
   const {
@@ -2801,7 +2472,7 @@ const handleContextMenuKeyboard = async state => {
   } = state;
   const menuX = x;
   const menuY = y + (focusedIndex - minLineY + 1) * itemHeight;
-  await show(menuX, menuY, Explorer);
+  await show(menuX, menuY, Explorer$1);
   return state;
 };
 
@@ -2809,7 +2480,7 @@ const handleContextMenuMouseAt = async (state, x, y) => {
   number(x);
   number(y);
   const focusedIndex = getIndexFromPosition(state, x, y);
-  await show(x, y, Explorer);
+  await show(x, y, Explorer$1);
   return {
     ...state,
     focusedIndex,
@@ -3182,7 +2853,7 @@ const handlePasteNone = async (state, nativeFiles) => {
   return state;
 };
 
-const None = 'none';
+const None$3 = 'none';
 const Copy = 'copy';
 const Cut = 'cut';
 
@@ -3200,7 +2871,7 @@ const getPasteHandler = type => {
   // TODO but will it work if the folder is a symlink?
   // TODO handle error gracefully when copy fails
   switch (type) {
-    case None:
+    case None$3:
       return handlePasteNone;
     case Copy:
       return handlePasteCopy;
@@ -3514,113 +3185,408 @@ const newFolder = state => {
   return newDirent(state, CreateFolder);
 };
 
-const getContaingingFolder = (root, dirents, focusedIndex, pathSeparator) => {
-  if (focusedIndex < 0) {
-    return root;
+const getContaingingFolder = (root, dirents, focusedIndex, pathSeparator) => {
+  if (focusedIndex < 0) {
+    return root;
+  }
+  const dirent = dirents[focusedIndex];
+  const direntPath = dirent.path;
+  const direntParentPath = direntPath.slice(0, -(dirent.name.length + 1));
+  const path = `${direntParentPath}`;
+  return path;
+};
+const openContainingFolder = async state => {
+  const {
+    focusedIndex,
+    root,
+    items} = state;
+  const path = getContaingingFolder(root, items, focusedIndex);
+  await invoke('OpenNativeFolder.openNativeFolder', /* path */path);
+  return state;
+};
+
+// TODO support multiselection and removing multiple dirents
+const removeDirent = async state => {
+  if (state.focusedIndex < 0) {
+    return state;
+  }
+  const dirent = getFocusedDirent$1(state);
+  const absolutePath = dirent.path;
+  try {
+    // TODO handle error
+    await remove(absolutePath);
+  } catch {
+    // TODO vscode shows error as alert (no stacktrace) and retry button
+    // maybe should show alert as well, but where to put stacktrace?
+    // on web should probably show notification (dialog)
+    // ErrorHandling.handleError(error)
+    // await ErrorHandling.showErrorDialog(error)
+    return state;
+  }
+  // TODO avoid state mutation
+  // @ts-ignore
+  const newVersion = ++state.version;
+  // TODO race condition
+  // const newState = await loadContent(state:any)
+  // @ts-ignore
+  if (state.version !== newVersion || state.disposed) {
+    return state;
+  }
+  // TODO is it possible to make this more functional instead of mutating state?
+  // maybe every function returns a new state?
+  const index = state.items.indexOf(dirent);
+  let deleteEnd = index + 1;
+  for (; deleteEnd < state.items.length; deleteEnd++) {
+    if (state.items[deleteEnd].depth <= dirent.depth) {
+      break;
+    }
+  }
+  const deleteCount = deleteEnd - index;
+  const newDirents = [...state.items];
+  newDirents.splice(index, deleteCount);
+  let indexToFocus = -1;
+  if (newDirents.length === 0) {
+    indexToFocus = -1;
+  } else if (index < state.focusedIndex) {
+    indexToFocus = state.focusedIndex - 1;
+  } else if (index === state.focusedIndex) {
+    indexToFocus = Math.max(state.focusedIndex - 1, 0);
+  } else {
+    indexToFocus = Math.max(state.focusedIndex - 1, 0);
+  }
+  const visible = newDirents.slice(state.minLineY, state.maxLineY);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(visible, state.fileIconCache);
+  return {
+    ...state,
+    items: newDirents,
+    icons,
+    fileIconCache: newFileIconCache,
+    focusedIndex: indexToFocus
+  };
+};
+
+const renameDirent = state => {
+  const {
+    focusedIndex,
+    items
+  } = state;
+  const item = items[focusedIndex];
+  // Focus.setFocus(FocusKey.ExplorerEditBox)
+  return {
+    ...state,
+    editingIndex: focusedIndex,
+    editingType: Rename$1,
+    editingValue: item.name
+  };
+};
+
+const renderEditingIndex = (oldState, newState) => {
+  return ['focusInput', 'ExplorerInput'];
+};
+
+const renderFocus = (oldState, newState) => {
+  // TODO
+  // 1. when focused, focus the outer list element
+  // 2. when focused, set focus context in renderer worker
+  return [];
+};
+
+const None$2 = 'none';
+const ToolBar = 'toolbar';
+const Tree = 'tree';
+const TreeItem$1 = 'treeitem';
+
+const Actions = 'Actions';
+const Button$2 = 'Button';
+const ButtonNarrow = 'ButtonNarrow';
+const ButtonPrimary = 'ButtonPrimary';
+const ButtonWide = 'ButtonWide';
+const Chevron = 'Chevron';
+const Explorer = 'Explorer';
+const FileIcon = 'FileIcon';
+const FocusOutline = 'FocusOutline';
+const IconButton = 'IconButton';
+const InputBox = 'InputBox';
+const Label = 'Label';
+const MaskIconChevronDown = 'MaskIconChevronDown';
+const MaskIconChevronRight = 'MaskIconChevronRight';
+const TreeItem = 'TreeItem';
+const TreeItemActive = 'TreeItemActive';
+const Viewlet = 'Viewlet';
+const Welcome = 'Welcome';
+const WelcomeMessage = 'WelcomeMessage';
+
+// TODO add option to make classnames numeric
+// once at start, send all classnames to renderer process
+// then, components uses numeric classname
+// when a component uses multiple classnames, it is a new number
+// representing the concatenated strings for example
+// 0 = 'Button'
+// 1 = 'IconButton'
+// 2 = 'Button IconButton'
+// it could make dom diffing faster, since for classname,
+// only numbers are compared. it could also make rendering faster,
+// since less data is transferred to renderer process
+
+const HandleClick = 'handleClick';
+const HandleClickOpenFolder = 'handleClickOpenFolder';
+const HandleContextMenu = 'handleContextMenu';
+const HandleEditingInput = 'handleEditingInput';
+const HandleListBlur = 'handleListBlur';
+const HandleListFocus = 'handleListFocus';
+const HandlePointerDown = 'handlePointerDown';
+const HandleWheel = 'handleWheel';
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+const Text = 12;
+const text = data => {
+  return {
+    type: Text,
+    text: data,
+    childCount: 0
+  };
+};
+
+const Button$1 = 1;
+const Div = 4;
+const Input = 6;
+const Img = 17;
+const P = 50;
+
+const chevronDownVirtualDom = {
+  type: Div,
+  className: mergeClassNames(Chevron, MaskIconChevronDown),
+  childCount: 0
+};
+
+const chevronRightVirtualDom = {
+  type: Div,
+  className: mergeClassNames(Chevron, MaskIconChevronRight),
+  childCount: 0
+};
+
+const chevronDomNodes = [[], [chevronRightVirtualDom], [chevronDownVirtualDom]];
+const getChevronVirtualDom = chevronType => {
+  return chevronDomNodes[chevronType];
+};
+
+const getFileIconVirtualDom = icon => {
+  return {
+    type: Img,
+    className: FileIcon,
+    src: icon,
+    role: None$2,
+    childCount: 0
+  };
+};
+
+const ExplorerInput = 'ExplorerInput';
+
+const label = {
+  type: Div,
+  className: Label,
+  childCount: 1
+};
+const getInputOrLabelDom = (isEditing, name) => {
+  if (isEditing) {
+    return [{
+      type: Input,
+      className: InputBox,
+      id: 'ExplorerInput',
+      onInput: HandleEditingInput,
+      childCount: 0,
+      name: ExplorerInput
+    }];
+  }
+  return [label, text(name)];
+};
+
+const getExplorerItemVirtualDom = item => {
+  const {
+    posInSet,
+    setSize,
+    icon,
+    name,
+    path,
+    depth,
+    indent,
+    chevron,
+    id,
+    className,
+    isEditing,
+    ariaExpanded
+  } = item;
+  const chevronDom = getChevronVirtualDom(chevron);
+  const dom = [{
+    type: Div,
+    role: TreeItem$1,
+    className,
+    draggable: true,
+    title: path,
+    ariaPosInSet: posInSet,
+    ariaSetSize: setSize,
+    ariaLevel: depth,
+    childCount: 2 + chevronDom.length,
+    paddingLeft: indent,
+    ariaLabel: name,
+    ariaExpanded,
+    ariaDescription: '',
+    id
+  }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, name)];
+  return dom;
+};
+
+const getExplorerWelcomeVirtualDom = isWide => {
+  return [{
+    type: Div,
+    className: mergeClassNames(Viewlet, Explorer),
+    tabIndex: 0,
+    childCount: 1
+  }, {
+    type: Div,
+    className: Welcome,
+    childCount: 2
+  }, {
+    type: P,
+    className: WelcomeMessage,
+    childCount: 1
+  }, text(youHaveNotYetOpenedAFolder()), {
+    type: Button$1,
+    className: mergeClassNames(Button$2, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
+    childCount: 1,
+    onClick: HandleClickOpenFolder
+  }, text(openFolder$1())];
+};
+
+const getActiveDescendant = focusedIndex => {
+  if (focusedIndex >= 0) {
+    return 'TreeItemActive';
   }
-  const dirent = dirents[focusedIndex];
-  const direntPath = dirent.path;
-  const direntParentPath = direntPath.slice(0, -(dirent.name.length + 1));
-  const path = `${direntParentPath}`;
-  return path;
+  return undefined;
 };
-const openContainingFolder = async state => {
-  const {
-    focusedIndex,
-    root,
-    items} = state;
-  const path = getContaingingFolder(root, items, focusedIndex);
-  await invoke('OpenNativeFolder.openNativeFolder', /* path */path);
-  return state;
+const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide, focused) => {
+  if (!root) {
+    return getExplorerWelcomeVirtualDom(isWide);
+  }
+  const extraClass = focused && focusedIndex === -1 ? FocusOutline : '';
+  const dom = [{
+    type: Div,
+    className: mergeClassNames(Viewlet, Explorer, extraClass),
+    tabIndex: 0,
+    role: Tree,
+    ariaLabel: filesExplorer(),
+    childCount: visibleItems.length,
+    ariaActiveDescendant: getActiveDescendant(focusedIndex),
+    onFocus: HandleListFocus,
+    onBlur: HandleListBlur,
+    onContextMenu: HandleContextMenu,
+    onPointerDown: HandlePointerDown,
+    onWheel: HandleWheel,
+    onClick: HandleClick
+  }, ...visibleItems.flatMap(getExplorerItemVirtualDom)];
+  return dom;
 };
 
-// TODO support multiselection and removing multiple dirents
-const removeDirent = async state => {
-  if (state.focusedIndex < 0) {
-    return state;
-  }
-  const dirent = getFocusedDirent$1(state);
-  const absolutePath = dirent.path;
-  try {
-    // TODO handle error
-    await remove(absolutePath);
-  } catch {
-    // TODO vscode shows error as alert (no stacktrace) and retry button
-    // maybe should show alert as well, but where to put stacktrace?
-    // on web should probably show notification (dialog)
-    // ErrorHandling.handleError(error)
-    // await ErrorHandling.showErrorDialog(error)
-    return state;
-  }
-  // TODO avoid state mutation
-  // @ts-ignore
-  const newVersion = ++state.version;
-  // TODO race condition
-  // const newState = await loadContent(state:any)
-  // @ts-ignore
-  if (state.version !== newVersion || state.disposed) {
-    return state;
+const None$1 = 0;
+const Right = 1;
+const Down = 2;
+
+const getChevronType = (type, useChevrons) => {
+  if (!useChevrons) {
+    return None$1;
   }
-  // TODO is it possible to make this more functional instead of mutating state?
-  // maybe every function returns a new state?
-  const index = state.items.indexOf(dirent);
-  let deleteEnd = index + 1;
-  for (; deleteEnd < state.items.length; deleteEnd++) {
-    if (state.items[deleteEnd].depth <= dirent.depth) {
-      break;
-    }
+  switch (type) {
+    case Directory:
+      return Right;
+    case DirectoryExpanded:
+    case DirectoryExpanding:
+      return Down;
+    default:
+      return None$1;
   }
-  const deleteCount = deleteEnd - index;
-  const newDirents = [...state.items];
-  newDirents.splice(index, deleteCount);
-  let indexToFocus = -1;
-  if (newDirents.length === 0) {
-    indexToFocus = -1;
-  } else if (index < state.focusedIndex) {
-    indexToFocus = state.focusedIndex - 1;
-  } else if (index === state.focusedIndex) {
-    indexToFocus = Math.max(state.focusedIndex - 1, 0);
-  } else {
-    indexToFocus = Math.max(state.focusedIndex - 1, 0);
+};
+
+const None = 0;
+const Expanded = 1;
+const Collapsed = 2;
+
+const getExpandedType = type => {
+  switch (type) {
+    case Directory:
+      return Collapsed;
+    case DirectoryExpanding:
+    case DirectoryExpanded:
+      return Expanded;
+    default:
+      return None;
   }
-  const visible = newDirents.slice(state.minLineY, state.maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(visible, state.fileIconCache);
-  return {
-    ...state,
-    items: newDirents,
-    icons,
-    fileIconCache: newFileIconCache,
-    focusedIndex: indexToFocus
-  };
 };
 
-const renameDirent = state => {
-  const {
-    focusedIndex,
-    items
-  } = state;
-  const item = items[focusedIndex];
-  // Focus.setFocus(FocusKey.ExplorerEditBox)
-  return {
-    ...state,
-    editingIndex: focusedIndex,
-    editingType: Rename$1,
-    editingValue: item.name
-  };
+const defaultIndent$1 = 1;
+const getTreeItemIndent = depth => {
+  return `${depth * defaultIndent$1}rem`;
 };
 
-const renderEditingIndex = (oldState, newState) => {
-  return ['focusInput', 'ExplorerInput'];
+// TODO make all of these variable configurable
+const defaultPaddingLeft = 4;
+const defaultIndent = 8;
+
+// TODO make chevron size configurable
+const chevronSize = 22;
+const getTreeItemIndentWithChevron = (depth, chevron) => {
+  // TODO use numeric value here, convert to string value in renderer process
+  const extraSpace = chevron ? 0 : chevronSize;
+  return `${depth * defaultIndent + extraSpace + defaultPaddingLeft}px`;
 };
 
-const renderFocus = (oldState, newState) => {
-  // TODO
-  // 1. when focused, focus the outer list element
-  // 2. when focused, set focus context in renderer worker
-  return [];
+const ariaExpandedValues = [undefined, 'true', 'false'];
+const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, icons, useChevrons) => {
+  const visible = [];
+  const indentFn = useChevrons ? getTreeItemIndentWithChevron : getTreeItemIndent;
+  let iconIndex = 0;
+  for (let i = minLineY; i < Math.min(maxLineY, items.length); i++) {
+    const item = items[i];
+    const icon = icons[iconIndex++];
+    const chevron = getChevronType(item.type, useChevrons);
+    const indent = indentFn(item.depth, chevron);
+    const isFocused = i === focusedIndex;
+    const id = isFocused ? 'TreeItemActive' : undefined;
+    const className = isFocused ? TreeItem + ' ' + TreeItemActive : TreeItem;
+    const expanded = getExpandedType(item.type);
+    const ariaExpanded = ariaExpandedValues[expanded];
+    visible.push({
+      ...item,
+      isEditing: i === editingIndex,
+      icon,
+      indent,
+      ariaExpanded,
+      chevron,
+      id,
+      className
+    });
+  }
+  if (editingType !== None$5 && editingIndex === -1) {
+    visible.push({
+      depth: 3,
+      posInSet: 1,
+      setSize: 1,
+      icon: '',
+      name: 'new',
+      path: '/test/new',
+      isEditing: true,
+      indent: '',
+      ariaExpanded: undefined,
+      chevron: 0,
+      id: undefined,
+      className: TreeItem
+    });
+  }
+  return visible;
 };
 
 const renderItems = (oldState, newState) => {
@@ -3665,31 +3631,45 @@ const render2 = (uid, diffResult) => {
   return commands;
 };
 
-const renderInternal = (oldState, newState) => {
-  const diffResult = diff(oldState, newState);
-  return applyRender(oldState, newState, diffResult);
-};
-const doRender = (uid, _) => {
-  if (typeof uid === 'number') {
-    const {
-      oldState,
-      newState
-    } = get(uid);
-    const commands = renderInternal(oldState, newState);
-    return commands;
+const Button = 1;
+
+const CollapseAll = 'CollapseAll';
+const NewFile = 'NewFile';
+const NewFolder = 'NewFolder';
+const Refresh = 'Refresh';
+
+const getActions = root => {
+  if (!root) {
+    return [];
   }
-  // deprecated
-  const oldState = uid;
-  const newState = _;
-  const commands = renderInternal(oldState, newState);
-  return commands;
+  return [{
+    type: Button,
+    id: newFile$1(),
+    icon: NewFile,
+    command: 'newFile'
+  }, {
+    type: Button,
+    id: newFolder$1(),
+    icon: NewFolder,
+    command: 'newFolder'
+  }, {
+    type: Button,
+    id: refresh(),
+    icon: Refresh,
+    command: 'refresh'
+  }, {
+    type: Button,
+    id: collapseAll(),
+    icon: CollapseAll,
+    command: 'collapseAll'
+  }];
 };
 
 const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
     className: `MaskIcon MaskIcon${icon}`,
-    role: None$4,
+    role: None$2,
     childCount: 0
   };
 };
@@ -3701,7 +3681,7 @@ const getActionButtonVirtualDom = action => {
     command
   } = action;
   return [{
-    type: Button,
+    type: Button$1,
     className: IconButton,
     title: id,
     'data-command': command,
@@ -3711,7 +3691,7 @@ const getActionButtonVirtualDom = action => {
 
 const getActionVirtualDom = action => {
   switch (action.type) {
-    case Button$2:
+    case Button:
       return getActionButtonVirtualDom(action);
     default:
       return [];
@@ -3727,7 +3707,7 @@ const getActionsVirtualDom = actions => {
   }, ...actions.flatMap(getActionVirtualDom)];
 };
 
-const renderActions$1 = uid => {
+const renderActions = uid => {
   const {
     newState
   } = get(uid);
@@ -3736,12 +3716,6 @@ const renderActions$1 = uid => {
   return dom;
 };
 
-const renderActions = state => {
-  const actions = getActions(state.root);
-  const dom = getActionsVirtualDom(actions);
-  return dom;
-};
-
 const renderEventListeners = () => {
   return [{
     name: HandleListBlur,
@@ -4072,17 +4046,15 @@ const updateEditingValue = (state, value) => {
 
 const wrapCommand = fn => {
   const wrapped = async (uid, ...args) => {
-    if (typeof uid === 'number') {
-      const {
-        newState
-      } = get(uid);
-      const newerState = await fn(newState, ...args);
-      set(uid, newState, newerState);
-    } else {
-      // deprecated
-      const newerState = await fn(uid, ...args);
-      return newerState;
+    const {
+      newState
+    } = get(uid);
+    const newerState = await fn(newState, ...args);
+    if (newState === newerState) {
+      return;
     }
+    const latest = get(uid);
+    set(uid, latest.oldState, newerState);
   };
   return wrapped;
 };
@@ -4136,17 +4108,10 @@ const commandMap = {
   'Explorer.getKeyBindings': getKeyBindings,
   'Explorer.getMenuEntries': getMenuEntries,
   'Explorer.render2': render2,
-  'Explorer.renderActions2': renderActions$1,
+  'Explorer.renderActions2': renderActions,
   'Explorer.renderEventListeners': renderEventListeners,
   'Explorer.saveState': saveState,
-  'Explorer.terminate': terminate,
-  // deprecated
-  'Explorer.getVirtualDom': getExplorerVirtualDom,
-  'Explorer.getVisibleItems': getVisibleExplorerItems,
-  'Explorer.getActions': getActions,
-  'Explorer.renderActions': renderActions,
-  'Explorer.render': doRender,
-  'Explorer.diff': diff
+  'Explorer.terminate': terminate
 };
 
 const listen = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/explorer-view",
-  "version": "1.29.0",
+  "version": "2.0.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",