@lvce-editor/static-server 0.44.3 → 0.44.5

package/static/{629a831 → 10163fd}/packages/explorer-worker/dist/explorerViewWorkerMain.js

@@ -442,10 +442,10 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set = (id, fn) => {
+const set$1 = (id, fn) => {
   callbacks[id] = fn;
 };
-const get = id => {
+const get$1 = id => {
   return callbacks[id];
 };
 const remove$1 = id => {
@@ -461,7 +461,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set(id, resolve);
+  set$1(id, resolve);
   return {
     id,
     promise
@@ -618,7 +618,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get(id);
+  const fn = get$1(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -898,7 +898,7 @@ const compareDirent = (direntA, direntB) => {
   return compareDirentType(direntA, direntB) || compareDirentName(direntA, direntB);
 };
 
-const getFileIcon$1 = ({
+const getFileIcon = ({
   name
 }) => {
   return '';
@@ -921,7 +921,7 @@ const computeExplorerRenamedDirent = (dirents, index, newName) => {
     ...oldDirent,
     name: newName,
     path: oldDirent.path.slice(0, -oldDirent.name.length) + newName,
-    icon: getFileIcon$1({
+    icon: getFileIcon({
       name: newName
     })
   };
@@ -959,7 +959,7 @@ const computeExplorerRenamedDirent = (dirents, index, newName) => {
     if (dirent.depth < depth) {
       break;
     }
-    if (insertIndex === -1 && compareDirent(dirent, newDirent === -1)) {
+    if (insertIndex === -1 && compareDirent(dirent, newDirent) === -1) {
       for (; endIndex < dirents.length; endIndex++) {
       }
       insertIndex = endIndex;
@@ -1005,22 +1005,25 @@ const computeExplorerRenamedDirent = (dirents, index, newName) => {
   };
 };
 
-const None$3 = 0;
+const None$5 = 0;
 const CreateFile = 1;
 const CreateFolder = 2;
 const Rename$1 = 3;
 
-const state = {
-  rpc: undefined
+const RendererWorker = 1;
+
+const rpcs = Object.create(null);
+const set = (id, rpc) => {
+  rpcs[id] = rpc;
 };
+const get = id => {
+  return rpcs[id];
+};
+
 const invoke = (method, ...params) => {
-  const rpc = state.rpc;
-  // @ts-ignore
+  const rpc = get(RendererWorker);
   return rpc.invoke(method, ...params);
 };
-const setRpc = rpc => {
-  state.rpc = rpc;
-};
 
 const remove = async dirent => {
   return invoke('FileSystem.remove', dirent);
@@ -1129,15 +1132,21 @@ const acceptCreate = async (state, newDirentType, createFn) => {
       deltaPosInSet = 1 - 1;
       break;
     } else {
+      // @ts-ignore
       posInSet = dirent.posInSet + 1;
+      // @ts-ignore
       setSize = dirent.setSize + 1;
+      // @ts-ignore
       insertIndex = i;
     }
+    // @ts-ignore
     dirent.setSize++;
+    // @ts-ignore
     dirent.posInSet += deltaPosInSet;
   }
   newDirent.setSize = setSize;
   newDirent.posInSet = posInSet;
+  // @ts-ignore
   items.splice(insertIndex + 1, 0, newDirent);
   const newDirents = [...items];
   const newMaxlineY = Math.max(state.maxLineY, newDirents.length);
@@ -1146,7 +1155,7 @@ const acceptCreate = async (state, newDirentType, createFn) => {
     items: newDirents,
     editingIndex: -1,
     focusedIndex: insertIndex + 1,
-    editingType: None$3,
+    editingType: None$5,
     maxLineY: newMaxlineY
   };
 };
@@ -1174,18 +1183,19 @@ const acceptRename = async state => {
     focusedIndex
   } = computeExplorerRenamedDirent(items, editingIndex, editingValue);
   //  TODO move focused index
+  // @ts-ignore
   state.items = newDirents;
   return {
     ...state,
     editingIndex: -1,
     editingValue: '',
-    editingType: None$3,
+    editingType: None$5,
     editingIcon: '',
     focusedIndex,
     focused: true
   };
 };
-const acceptEdit = state => {
+const acceptEdit = async state => {
   const {
     editingType
   } = state;
@@ -1211,7 +1221,7 @@ const cancelEdit = state => {
     focused: true,
     editingIndex: -1,
     editingValue: '',
-    editingType: None$3
+    editingType: None$5
   };
 };
 
@@ -1219,11 +1229,6 @@ const isTopLevel$1 = dirent => {
   return dirent.depth === 1;
 };
 
-const IsTopLevel = {
-  __proto__: null,
-  isTopLevel: isTopLevel$1
-};
-
 const toCollapsedDirent = dirent => {
   if (dirent.type === DirectoryExpanded) {
     return {
@@ -1238,7 +1243,7 @@ const collapseAll$1 = state => {
   const {
     items
   } = state;
-  const newDirents = items.filter(IsTopLevel).map(toCollapsedDirent);
+  const newDirents = items.filter(isTopLevel$1).map(toCollapsedDirent);
   return {
     ...state,
     items: newDirents
@@ -1403,6 +1408,59 @@ const getExplorerMaxLineY = (minLineY, height, itemHeight, direntsLength) => {
   return maxLineY;
 };
 
+const getIconsCached = (dirents, fileIconCache) => {
+  return dirents.map(dirent => fileIconCache[dirent.path]);
+};
+
+const getMissingIconRequests = (dirents, fileIconCache) => {
+  const missingRequests = [];
+  for (const dirent of dirents) {
+    if (!(dirent.path in fileIconCache)) {
+      missingRequests.push({
+        type: dirent.type,
+        name: dirent.name,
+        path: dirent.path
+      });
+    }
+  }
+  return missingRequests;
+};
+
+const requestFileIcons = async requests => {
+  const promises = requests.map(request => request.type === File ? invoke('IconTheme.getFileIcon', {
+    name: request.name
+  }) : invoke('IconTheme.getFolderIcon', {
+    name: 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 icons = getIconsCached(dirents, newFileIconCache);
+  return {
+    icons,
+    newFileIconCache
+  };
+};
+
 const expandAll = async state => {
   const {
     items,
@@ -1423,6 +1481,7 @@ const expandAll = async state => {
     if (dirent.depth === depth && dirent.type === Directory) {
       // TODO expand
       // TODO avoid mutating state here
+      // @ts-ignore
       dirent.type = DirectoryExpanding;
       // TODO handle error
       // TODO race condition
@@ -1433,14 +1492,22 @@ const expandAll = async state => {
       }
       newDirents.splice(newIndex + 1, 0, ...childDirents);
       // TODO avoid mutating state here
+      // @ts-ignore
       dirent.type = DirectoryExpanded;
       // await expand(state, dirent.index)
     }
   }
   const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
+  const visible = newDirents.slice(minLineY, maxLineY);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(visible, state.fileIconCache);
   return {
     ...state,
     items: newDirents,
+    icons,
+    fileIconCache: newFileIconCache,
     maxLineY
   };
 };
@@ -1504,6 +1571,7 @@ const expandRecursively = async state => {
   // TODO race condition: what if folder is being collapse while it is recursively expanding?
   // TODO race condition: what if folder is being deleted while it is recursively expanding?
   // TODO race condition: what if a new file/folder is created while the folder is recursively expanding?
+  // @ts-ignore
   const childDirents = await getChildDirentsRecursively(dirent);
   const startIndex = focusedIndex;
   if (focusedIndex >= 0) {
@@ -1622,11 +1690,6 @@ const focusPrevious = state => {
 
 const Button$2 = 1;
 
-const CollapseAll = 'CollapseAll';
-const NewFile$1 = 'NewFile';
-const NewFolder$1 = 'NewFolder';
-const Refresh = 'Refresh';
-
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1639,8 +1702,8 @@ const i18nString = (key, placeholders = emptyObject) => {
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-const NewFile = 'New File...';
-const NewFolder = 'New Folder...';
+const NewFile$1 = 'New File...';
+const NewFolder$1 = 'New Folder...';
 const OpenContainingFolder = 'Open Containing Folder';
 const OpenInIntegratedTerminal = 'Open in integrated Terminal';
 const Cut$1 = 'Cut';
@@ -1657,10 +1720,10 @@ const YouHaveNotYetOpenedAFolder = 'You have not yet opened a folder';
 const OpenFolder = 'Open folder';
 
 const newFile$1 = () => {
-  return i18nString(NewFile);
+  return i18nString(NewFile$1);
 };
 const newFolder$1 = () => {
-  return i18nString(NewFolder);
+  return i18nString(NewFolder$1);
 };
 const openContainingFolder$1 = () => {
   return i18nString(OpenContainingFolder);
@@ -1705,6 +1768,11 @@ const openFolder$1 = () => {
   return i18nString(OpenFolder);
 };
 
+const CollapseAll = 'CollapseAll';
+const NewFile = 'NewFile';
+const NewFolder = 'NewFolder';
+const Refresh = 'Refresh';
+
 const getActions = root => {
   if (!root) {
     return [];
@@ -1712,12 +1780,12 @@ const getActions = root => {
   return [{
     type: Button$2,
     id: newFile$1(),
-    icon: NewFile$1,
+    icon: NewFile,
     command: 'newFile'
   }, {
     type: Button$2,
     id: newFolder$1(),
-    icon: NewFolder$1,
+    icon: NewFolder,
     command: 'newFolder'
   }, {
     type: Button$2,
@@ -1732,19 +1800,24 @@ const getActions = root => {
   }];
 };
 
-const None$2 = 'none';
+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 IconButton = 'IconButton';
 const InputBox = 'InputBox';
 const Label = 'Label';
+const MaskIconChevronDown = 'MaskIconChevronDown';
+const MaskIconChevronRight = 'MaskIconChevronRight';
 const TreeItem = 'TreeItem';
 const TreeItemActive = 'TreeItemActive';
 const Viewlet = 'Viewlet';
@@ -1755,6 +1828,7 @@ const HandleBlur = 'handleBlur';
 const HandleClick = 'handleClick';
 const handleClickOpenFolder$1 = 'handleClickOpenFolder';
 const HandleContextMenu = 'handleContextMenu';
+const HandleEditingInput = 'handleEditingInput';
 const HandleFocus = 'handleFocus';
 const HandlePointerDown = 'handlePointerDown';
 const HandleWheel = 'handleWheel';
@@ -1766,21 +1840,33 @@ const Text = 12;
 const Img = 17;
 const P = 50;
 
+const chevronDownVirtualDom = {
+  type: Div,
+  className: `${Chevron} ${MaskIconChevronDown}`,
+  childCount: 0
+};
+
+const chevronRightVirtualDom = {
+  type: Div,
+  className: `${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,
+    role: None$4,
     childCount: 0
   };
 };
 
-const defaultIndent = 1;
-const getTreeItemIndent = depth => {
-  return `${depth * defaultIndent}rem`;
-};
-
 const ExplorerInput = 'ExploreerInput';
 
 const text = data => {
@@ -1791,57 +1877,26 @@ const text = data => {
   };
 };
 
-const getItemVirtualDomFile = item => {
-  const {
-    posInSet,
-    setSize,
-    icon,
-    name,
-    path,
-    depth,
-    isFocused,
-    isEditing
-  } = item;
-  const dom = [];
-  dom.push({
-    type: Div,
-    role: TreeItem$1,
-    className: TreeItem,
-    draggable: true,
-    title: path,
-    ariaPosInSet: posInSet,
-    ariaSetSize: setSize,
-    ariaLevel: depth,
-    childCount: 2,
-    paddingLeft: getTreeItemIndent(depth),
-    ariaLabel: name,
-    ariaDescription: ''
-  }, getFileIconVirtualDom(icon));
+const label = {
+  type: Div,
+  className: Label,
+  childCount: 1
+};
+const getInputOrLabelDom = (isEditing, name) => {
   if (isEditing) {
-    dom.push({
+    return [{
       type: Input,
       className: InputBox,
       id: 'ExplorerInput',
-      onInput: 'handleEditingInput',
+      onInput: HandleEditingInput,
       childCount: 0,
       name: ExplorerInput
-    });
-  } else {
-    dom.push({
-      type: Div,
-      className: Label,
-      childCount: 1
-    }, text(name));
-  }
-  if (isFocused) {
-    // @ts-ignore
-    dom[0].id = 'TreeItemActive';
-    // @ts-ignore
-    dom[0].className += ' ' + TreeItemActive;
+    }];
   }
-  return dom;
+  return [label, text(name)];
 };
-const getItemVirtualDomFolder = item => {
+
+const getExplorerItemVirtualDom = item => {
   const {
     posInSet,
     setSize,
@@ -1849,62 +1904,32 @@ const getItemVirtualDomFolder = item => {
     name,
     path,
     depth,
-    type,
-    isFocused
+    indent,
+    chevron,
+    id,
+    className,
+    isEditing,
+    ariaExpanded
   } = item;
-  let ariaExpanded = '';
-  switch (type) {
-    // TODO decide on directory vs folder
-    case Directory:
-      ariaExpanded = 'false';
-      break;
-    case DirectoryExpanding:
-      ariaExpanded = 'true'; // TODO tree should be aria-busy then
-      break;
-    case DirectoryExpanded:
-      ariaExpanded = 'true';
-      break;
-  }
-  const dom = [];
-  dom.push({
+  const chevronDom = getChevronVirtualDom(chevron);
+  const dom = [{
     type: Div,
     role: TreeItem$1,
-    className: TreeItem,
+    className,
     draggable: true,
     title: path,
     ariaPosInSet: posInSet,
     ariaSetSize: setSize,
     ariaLevel: depth,
-    childCount: 2,
-    paddingLeft: getTreeItemIndent(depth),
+    childCount: 2 + chevronDom.length,
+    paddingLeft: indent,
     ariaLabel: name,
     ariaExpanded,
-    ariaDescription: ''
-  });
-  dom.push(getFileIconVirtualDom(icon), {
-    type: Div,
-    className: Label,
-    childCount: 1
-  }, text(name));
-  if (isFocused) {
-    // @ts-ignore
-    dom[0].id = 'TreeItemActive';
-  }
+    ariaDescription: '',
+    id
+  }, ...chevronDom, getFileIconVirtualDom(icon), ...getInputOrLabelDom(isEditing, name)];
   return dom;
 };
-const getExplorerItemVirtualDom = item => {
-  const {
-    type
-  } = item;
-  switch (type) {
-    case Directory:
-    case DirectoryExpanding:
-    case DirectoryExpanded:
-      return getItemVirtualDomFolder(item);
-    default:
-      return getItemVirtualDomFile(item);
-  }
-};
 
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
@@ -1926,7 +1951,7 @@ const getExplorerWelcomeVirtualDom = isWide => {
     childCount: 1
   }, text(youHaveNotYetOpenedAFolder()), {
     type: Button,
-    className: mergeClassNames(Button$1, ButtonPrimary, isWide ? 'ButtonWide' : 'ButtonNarrow'),
+    className: mergeClassNames(Button$1, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
     childCount: 1,
     onClick: handleClickOpenFolder$1
   }, text(openFolder$1())];
@@ -1936,8 +1961,7 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide) => {
   if (!root) {
     return getExplorerWelcomeVirtualDom(isWide);
   }
-  const dom = [];
-  dom.push({
+  const dom = [{
     type: Div,
     className: mergeClassNames(Viewlet, Explorer$1),
     tabIndex: 0,
@@ -1951,8 +1975,7 @@ const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide) => {
     onPointerDown: HandlePointerDown,
     onWheel: HandleWheel,
     onClick: HandleClick
-  });
-  dom.push(...visibleItems.flatMap(getExplorerItemVirtualDom));
+  }, ...visibleItems.flatMap(getExplorerItemVirtualDom)];
   return dom;
 };
 
@@ -2054,7 +2077,7 @@ const getKeyBindings = () => {
 };
 
 const Separator = 1;
-const None$1 = 0;
+const None$3 = 0;
 const RestoreFocus = 6;
 
 const menuEntrySeparator = {
@@ -2067,13 +2090,13 @@ const menuEntrySeparator = {
 const menuEntryNewFile = {
   id: 'newFile',
   label: newFile$1(),
-  flags: None$1,
+  flags: None$3,
   command: 'Explorer.newFile'
 };
 const menuEntryNewFolder = {
   id: 'newFolder',
   label: newFolder$1(),
-  flags: None$1,
+  flags: None$3,
   command: 'Explorer.newFolder'
 };
 const menuEntryOpenContainingFolder = {
@@ -2085,7 +2108,7 @@ const menuEntryOpenContainingFolder = {
 const menuEntryOpenInIntegratedTerminal = {
   id: 'openInIntegratedTerminal',
   label: openInIntegratedTerminal(),
-  flags: None$1,
+  flags: None$3,
   command: /* TODO */-1
 };
 const menuEntryCut = {
@@ -2103,7 +2126,7 @@ const menuEntryCopy = {
 const menuEntryPaste = {
   id: 'paste',
   label: paste(),
-  flags: None$1,
+  flags: None$3,
   command: 'Explorer.handlePaste'
 };
 const menuEntryCopyPath = {
@@ -2121,13 +2144,13 @@ const menuEntryCopyRelativePath = {
 const menuEntryRename = {
   id: 'rename',
   label: rename(),
-  flags: None$1,
+  flags: None$3,
   command: 'Explorer.renameDirent'
 };
 const menuEntryDelete = {
   id: 'delete',
   label: deleteItem(),
-  flags: None$1,
+  flags: None$3,
   command: 'Explorer.removeDirent'
 };
 const ALL_ENTRIES = [menuEntryNewFile, menuEntryNewFolder, menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryCut, menuEntryCopy, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath, menuEntrySeparator, menuEntryRename, menuEntryDelete];
@@ -2168,38 +2191,98 @@ const getMenuEntries = state => {
   }
 };
 
-const getVisibleExplorerItems = (items, minLineY, maxLineY, focusedIndex, editingIndex, editingType, editingValue, icons) => {
+const None$2 = 0;
+const Right = 1;
+const Down = 2;
+
+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++];
-    if (i === editingIndex) {
-      visible.push({
-        ...item,
-        isFocused: i === focusedIndex,
-        isEditing: true,
-        icon
-      });
-    } else {
-      visible.push({
-        ...item,
-        isFocused: i === focusedIndex,
-        icon
-      });
-    }
+    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$3 && editingIndex === -1) {
+  if (editingType !== None$5 && editingIndex === -1) {
     visible.push({
       depth: 3,
       posInSet: 1,
       setSize: 1,
       icon: '',
-      isFocused: false,
       name: 'new',
       path: '/test/new',
-      type: 2,
-      isEditing: true
+      isEditing: true,
+      indent: '',
+      ariaExpanded: undefined,
+      chevron: 0,
+      id: undefined,
+      className: TreeItem
     });
   }
   return visible;
@@ -2211,7 +2294,7 @@ const handleBlur = state => {
   const {
     editingType
   } = state;
-  if (editingType !== None$3) {
+  if (editingType !== None$5) {
     return state;
   }
   return {
@@ -2220,22 +2303,6 @@ const handleBlur = state => {
   };
 };
 
-const getFileIcon = dirent => {
-  if (dirent.type === File) {
-    return invoke('IconTheme.getFileIcon', {
-      name: dirent.name
-    });
-  }
-  return invoke('IconTheme.getFolderIcon', {
-    name: dirent.name
-  });
-};
-const getFileIcons = async dirents => {
-  const promises = dirents.map(getFileIcon);
-  const icons = await Promise.all(promises);
-  return icons;
-};
-
 const handleClickDirectory = async (state, dirent, index, keepFocus) => {
   dirent.type = DirectoryExpanding;
   // TODO handle error
@@ -2262,11 +2329,15 @@ const handleClickDirectory = async (state, dirent, index, keepFocus) => {
   // TODO when focused index has changed while expanding, don't update it
   const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, newDirents.length);
   const parts = newDirents.slice(minLineY, maxLineY);
-  const icons = await getFileIcons(parts);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(parts, state.fileIconCache);
   return {
     ...state,
     items: newDirents,
     icons,
+    fileIconCache: newFileIconCache,
     focusedIndex: newIndex,
     focused: keepFocus,
     maxLineY
@@ -2293,11 +2364,15 @@ const handleClickDirectoryExpanded$1 = async (state, dirent, index, keepFocus) =
     const newMinLineY = newMaxLineY - visibleItems;
     const deltaY = newMinLineY * itemHeight;
     const parts = newDirents.slice(minLineY, maxLineY);
-    const icons = await getFileIcons(parts);
+    const {
+      icons,
+      newFileIconCache
+    } = await getFileIcons(parts, state.fileIconCache);
     return {
       ...state,
       items: newDirents,
       icons,
+      fileIconCache: newFileIconCache,
       focusedIndex: index,
       focused: keepFocus,
       minLineY: newMinLineY,
@@ -2306,17 +2381,21 @@ const handleClickDirectoryExpanded$1 = async (state, dirent, index, keepFocus) =
     };
   }
   const parts = newDirents.slice(state.minLineY, state.maxLineY);
-  const icons = await getFileIcons(parts);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(parts, state.fileIconCache);
   return {
     ...state,
     items: newDirents,
     icons,
+    fileIconCache: newFileIconCache,
     focusedIndex: index,
     focused: keepFocus
   };
 };
 
-const handleClickDirectoryExpanding = (state, dirent, index, keepFocus) => {
+const handleClickDirectoryExpanding = async (state, dirent, index, keepFocus) => {
   dirent.type = Directory;
   dirent.icon = getIcon();
   return {
@@ -2501,7 +2580,7 @@ const handleClickDirectoryExpanded = (state, dirent, index, keepFocus) => {
     focused: keepFocus
   };
 };
-const handleClick = (state, index, keepFocus = false) => {
+const handleClick = async (state, index, keepFocus = false) => {
   const {
     items,
     minLineY
@@ -2553,6 +2632,7 @@ const handleArrowRightDirectoryExpanded = (state, dirent) => {
   if (nextDirent.depth === dirent.depth + 1) {
     return focusIndex(state, focusedIndex + 1);
   }
+  return state;
 };
 const handleArrowRight = async state => {
   const {
@@ -2670,7 +2750,7 @@ const handleCopy = async state => {
   const dirent = getFocusedDirent$1(state);
   if (!dirent) {
     console.info('[ViewletExplorer/handleCopy] no dirent selected');
-    return;
+    return state;
   }
   const absolutePath = dirent.path;
   // TODO handle copy error gracefully
@@ -2738,23 +2818,13 @@ const handleDragOver = (state, x, y) => {
   };
 };
 
-const getFilePathElectron = async file => {
-  return invoke('GetFilePathElectron.getFilePathElectron', file);
+const uploadFileSystemHandles = async (root, pathSeparator, fileSystemHandles) => {
+  // TODO send to renderer worker
 };
 
 const mergeDirents$2 = (oldDirents, newDirents) => {
   return newDirents;
 };
-
-// TODO copy files in parallel
-const copyFilesElectron = async (root, pathSeparator, files) => {
-  for (const file of files) {
-    const from = await getFilePathElectron(file);
-    // const from = file.path
-    const to = join(pathSeparator, root, file.name);
-    await copy$1(from, to);
-  }
-};
 const getMergedDirents$2 = async (root, pathSeparator, dirents) => {
   const childDirents = await getChildDirents(pathSeparator, {
     path: root,
@@ -2769,7 +2839,10 @@ const handleDrop$2 = async (state, files) => {
     pathSeparator,
     items
   } = state;
-  await copyFilesElectron(root, pathSeparator, files);
+  const handled = await uploadFileSystemHandles();
+  if (handled) {
+    return state;
+  }
   const mergedDirents = await getMergedDirents$2(root, pathSeparator, items);
   return {
     ...state,
@@ -2778,13 +2851,23 @@ const handleDrop$2 = async (state, files) => {
   };
 };
 
-const uploadFileSystemHandles = async (root, pathSeparator, fileSystemHandles) => {
-  // TODO send to renderer worker
+const getFilePathElectron = async file => {
+  return invoke('GetFilePathElectron.getFilePathElectron', file);
 };
 
 const mergeDirents$1 = (oldDirents, newDirents) => {
   return newDirents;
 };
+
+// TODO copy files in parallel
+const copyFilesElectron = async (root, pathSeparator, files) => {
+  for (const file of files) {
+    const from = await getFilePathElectron(file);
+    // const from = file.path
+    const to = join(pathSeparator, root, file.name);
+    await copy$1(from, to);
+  }
+};
 const getMergedDirents$1 = async (root, pathSeparator, dirents) => {
   const childDirents = await getChildDirents(pathSeparator, {
     path: root,
@@ -2799,10 +2882,7 @@ const handleDrop$1 = async (state, files) => {
     pathSeparator,
     items
   } = state;
-  const handled = await uploadFileSystemHandles();
-  if (handled) {
-    return state;
-  }
+  await copyFilesElectron(root, pathSeparator, files);
   const mergedDirents = await getMergedDirents$1(root, pathSeparator, items);
   return {
     ...state,
@@ -2813,11 +2893,12 @@ const handleDrop$1 = async (state, files) => {
 
 const getModule = isElectron => {
   if (isElectron) {
-    return handleDrop$2;
+    return handleDrop$1;
   }
-  return handleDrop$1;
+  return handleDrop$2;
 };
 const handleDropRoot = async (state, files) => {
+  // @ts-ignore
   const fn = await getModule(state.isElectron);
   return fn(state, files);
 };
@@ -2870,7 +2951,7 @@ const handleDropIntoFile = (state, dirent, index, files) => {
   // @ts-ignore
   return handleDropIndex(parentIndex);
 };
-const handleDropIndex = (state, index, files) => {
+const handleDropIndex = async (state, index, files) => {
   const {
     items
   } = state;
@@ -2969,6 +3050,7 @@ const handlePasteCopy = async (state, nativeFiles) => {
   // TODO handle pasting files into hardlink
   // TODO what if folder is big and it takes a long time
   for (const source of nativeFiles.files) {
+    // @ts-ignore
     const target = join(state.pathSeperator, state.root, getBaseName(state.pathSeparator, source));
     await copy$1(source, target);
   }
@@ -2984,7 +3066,7 @@ const handlePasteCut = async (state, nativeFiles) => {
   return state;
 };
 
-const handlePasteNone = (state, nativeFiles) => {
+const handlePasteNone = async (state, nativeFiles) => {
   console.info('[ViewletExplorer/handlePaste] no paths detected');
   return state;
 };
@@ -3190,6 +3272,8 @@ const getSavedRoot$1 = (savedState, workspacePath) => {
   return workspacePath;
 };
 const loadContent = async (state, savedState) => {
+  const useChevronsRaw = await invoke('Preferences.get', 'explorer.useChevrons');
+  const useChevrons = Boolean(useChevronsRaw);
   const workspacePath = await getWorkspacePath();
   const root = getSavedRoot$1(savedState, workspacePath);
   // TODO path separator could be restored from saved state
@@ -3209,17 +3293,22 @@ const loadContent = async (state, savedState) => {
     deltaY = savedState.deltaY;
   }
   const maxLineY = getExplorerMaxLineY(minLineY, height, itemHeight, restoredDirents.length);
-  const icons = await getFileIcons(restoredDirents);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(restoredDirents, Object.create(null));
   return {
     ...state,
     root,
     items: restoredDirents,
     icons,
+    fileIconCache: newFileIconCache,
     minLineY,
     deltaY,
     maxLineY,
     pathSeparator,
-    excluded
+    excluded,
+    useChevrons
   };
 };
 
@@ -3233,12 +3322,12 @@ const handleWorkspaceChange = async state => {
   return newState;
 };
 
-const ExplorerEditBox = FocusExplorerEditBox;
-
 const setFocus = key => {
   return invoke('Focus.setFocus', key);
 };
 
+const ExplorerEditBox = FocusExplorerEditBox;
+
 const newDirent = async (state, editingType) => {
   // TODO make focus functional instead of side effect
   await setFocus(ExplorerEditBox);
@@ -3310,12 +3399,14 @@ const removeDirent = async state => {
     // on web should probably show notification (dialog)
     // ErrorHandling.handleError(error)
     // await ErrorHandling.showErrorDialog(error)
-    return;
+    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;
   }
@@ -3342,14 +3433,15 @@ const removeDirent = async state => {
     indexToFocus = Math.max(state.focusedIndex - 1, 0);
   }
   const visible = newDirents.slice(state.minLineY, state.maxLineY);
-  const icons = await getFileIcons(visible);
-  console.log({
-    icons
-  });
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(visible, state.fileIconCache);
   return {
     ...state,
     items: newDirents,
     icons,
+    fileIconCache: newFileIconCache,
     focusedIndex: indexToFocus
   };
 };
@@ -3374,7 +3466,7 @@ const renderItems = {
     return JSON.stringify(oldState.items) === JSON.stringify(newState.items) && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.focusedIndex === newState.focusedIndex && oldState.editingIndex === newState.editingIndex && oldState.editingType === newState.editingType && oldState.editingValue === newState.editingValue && oldState.width === newState.width;
   },
   apply(oldState, newState) {
-    const visibleDirents = getVisibleExplorerItems(newState.items, newState.minLineY, newState.maxLineY, newState.focusedIndex, newState.editingIndex, newState.editingType, newState.editingValue, newState.icons);
+    const visibleDirents = getVisibleExplorerItems(newState.items, newState.minLineY, newState.maxLineY, newState.focusedIndex, newState.editingIndex, newState.editingType, newState.editingValue, newState.icons, newState.useChevrons);
     const isWide = newState.width > 450;
     const dom = getExplorerVirtualDom(visibleDirents, newState.focusedIndex, newState.root, isWide);
     return ['Viewlet.setDom2', dom];
@@ -3424,7 +3516,7 @@ const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
     className: `MaskIcon MaskIcon${icon}`,
-    role: None$2,
+    role: None$4,
     childCount: 0
   };
 };
@@ -3441,7 +3533,7 @@ const getActionButtonVirtualDom = action => {
     title: id,
     'data-command': command,
     childCount: 1
-  }, getIconVirtualDom(icon)];
+  }, getIconVirtualDom(icon || '')];
 };
 
 const getActionVirtualDom = action => {
@@ -3769,7 +3861,7 @@ const setDeltaY = (state, deltaY) => {
 };
 
 const updateEditingValue = (state, value) => {
-  const editingIcon = getFileIcon$1({
+  const editingIcon = getFileIcon({
     name: value
   });
   return {
@@ -3834,7 +3926,7 @@ const listen = async () => {
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  setRpc(rpc);
+  set(RendererWorker, rpc);
 };
 
 const main = async () => {