@lvce-editor/explorer-view 1.17.0 → 1.19.0

package/dist/explorerViewWorkerMain.js

@@ -442,10 +442,10 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set$1 = (id, fn) => {
+const set$2 = (id, fn) => {
   callbacks[id] = fn;
 };
-const get$1 = id => {
+const get$2 = id => {
   return callbacks[id];
 };
 const remove$1 = id => {
@@ -461,7 +461,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set$1(id, resolve);
+  set$2(id, resolve);
   return {
     id,
     promise
@@ -618,7 +618,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$1(id);
+  const fn = get$2(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -657,7 +657,7 @@ const getErrorProperty = (error, prettyError) => {
     }
   };
 };
-const create$1 = (message, error) => {
+const create$1$1 = (message, error) => {
   return {
     jsonrpc: Two,
     id: message.id,
@@ -668,7 +668,7 @@ const getErrorResponse = (message, error, preparePrettyError, logError) => {
   const prettyError = preparePrettyError(error);
   logError(error, prettyError);
   const errorProperty = getErrorProperty(error, prettyError);
-  return create$1(message, errorProperty);
+  return create$1$1(message, errorProperty);
 };
 const create$5 = (message, result) => {
   return {
@@ -843,7 +843,7 @@ const listen$1 = async (module, options) => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
-const create = async ({
+const create$1 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -855,7 +855,7 @@ const create = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create
+  create: create$1
 };
 
 const RE_CHARACTERS = /^[a-zA-Z.-]+$/;
@@ -925,7 +925,9 @@ const computeExplorerRenamedDirent = (dirents, index, newName) => {
       name: newName
     })
   };
-  const depth = newDirent.depth;
+  const {
+    depth
+  } = newDirent;
   // TODO
   for (; startIndex >= 0; startIndex--) {
     const dirent = dirents[startIndex];
@@ -1013,15 +1015,15 @@ const Rename$1 = 3;
 const RendererWorker = 1;
 
 const rpcs = Object.create(null);
-const set = (id, rpc) => {
+const set$1 = (id, rpc) => {
   rpcs[id] = rpc;
 };
-const get = id => {
+const get$1 = id => {
   return rpcs[id];
 };
 
 const invoke = (method, ...params) => {
-  const rpc = get(RendererWorker);
+  const rpc = get$1(RendererWorker);
   return rpc.invoke(method, ...params);
 };
 
@@ -1093,7 +1095,7 @@ const acceptCreate = async (state, newDirentType, createFn) => {
   // TODO better handle error
   try {
     await createFn(absolutePath);
-  } catch (error) {
+  } catch {
     // TODO display error
     return state;
   }
@@ -1173,7 +1175,7 @@ const acceptRename = async state => {
     const oldParentPath = dirname(pathSeparator, oldAbsolutePath);
     const newAbsolutePath = [oldParentPath, editingValue].join(pathSeparator);
     await rename$1(oldAbsolutePath, newAbsolutePath);
-  } catch (error) {
+  } catch {
     // TODO
     // await ErrorHandling.showErrorDialog(error)
     return state;
@@ -1283,6 +1285,54 @@ const copyRelativePath$1 = async state => {
   return state;
 };
 
+const states = Object.create(null);
+const get = uid => {
+  return states[uid];
+};
+const set = (uid, oldState, newState) => {
+  states[uid] = {
+    oldState,
+    newState
+  };
+};
+
+const ListItem = 22;
+
+const Slash = '/';
+
+const create = (id, uri, x, y, width, height, args, parentUid) => {
+  const state = {
+    uid: id,
+    parentUid,
+    root: '',
+    items: [],
+    focusedIndex: -1,
+    focused: false,
+    hoverIndex: -1,
+    x,
+    y,
+    width,
+    height,
+    deltaY: 0,
+    minLineY: 0,
+    maxLineY: 0,
+    pathSeparator: Slash,
+    version: 0,
+    editingIndex: -1,
+    itemHeight: ListItem,
+    dropTargets: [],
+    excluded: [],
+    editingValue: '',
+    editingType: None$5,
+    editingIcon: '',
+    fileIconCache: Object.create(null),
+    useChevrons: false,
+    icons: []
+  };
+  set(state.uid, state, state);
+  return state;
+};
+
 const isSymbolicLink = dirent => {
   return dirent.type === Symlink;
 };
@@ -1474,7 +1524,9 @@ const expandAll = async state => {
     return state;
   }
   const dirent = items[focusedIndex];
-  const depth = dirent.depth;
+  const {
+    depth
+  } = dirent;
   const newDirents = [...items];
   // TODO fetch child dirents in parallel
   for (const dirent of newDirents) {
@@ -1813,6 +1865,7 @@ 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';
@@ -1824,6 +1877,18 @@ 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 HandleBlur = 'handleBlur';
 const HandleClick = 'handleClick';
 const handleClickOpenFolder$1 = 'handleClickOpenFolder';
@@ -1957,13 +2022,14 @@ const getExplorerWelcomeVirtualDom = isWide => {
   }, text(openFolder$1())];
 };
 
-const getExplorerVirtualDom = (visibleItems, focusedIndex, root, isWide) => {
+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),
+    className: mergeClassNames(Viewlet, Explorer$1, extraClass),
     tabIndex: 0,
     role: Tree,
     ariaLabel: filesExplorer(),
@@ -2304,6 +2370,7 @@ const handleBlur = state => {
 };
 
 const handleClickDirectory = async (state, dirent, index, keepFocus) => {
+  // @ts-ignore
   dirent.type = DirectoryExpanding;
   // TODO handle error
   const dirents = await getChildDirents(state.pathSeparator, dirent);
@@ -2319,7 +2386,9 @@ const handleClickDirectory = async (state, dirent, index, keepFocus) => {
   }
   const newDirents = [...state2.items];
   newDirents.splice(newIndex + 1, 0, ...dirents);
+  // @ts-ignore
   dirent.type = DirectoryExpanded;
+  // @ts-ignore
   dirent.icon = getIcon();
   const {
     height,
@@ -2348,9 +2417,12 @@ const handleClickDirectoryExpanded$1 = async (state, dirent, index, keepFocus) =
   const {
     minLineY,
     maxLineY,
-    itemHeight
+    itemHeight,
+    fileIconCache
   } = state;
+  // @ts-ignore
   dirent.type = Directory;
+  // @ts-ignore
   dirent.icon = getIcon();
   const endIndex = getParentEndIndex(state.items, index);
   const removeCount = endIndex - index - 1;
@@ -2367,7 +2439,7 @@ const handleClickDirectoryExpanded$1 = async (state, dirent, index, keepFocus) =
     const {
       icons,
       newFileIconCache
-    } = await getFileIcons(parts, state.fileIconCache);
+    } = await getFileIcons(parts, fileIconCache);
     return {
       ...state,
       items: newDirents,
@@ -2384,7 +2456,7 @@ const handleClickDirectoryExpanded$1 = async (state, dirent, index, keepFocus) =
   const {
     icons,
     newFileIconCache
-  } = await getFileIcons(parts, state.fileIconCache);
+  } = await getFileIcons(parts, fileIconCache);
   return {
     ...state,
     items: newDirents,
@@ -2396,7 +2468,9 @@ const handleClickDirectoryExpanded$1 = async (state, dirent, index, keepFocus) =
 };
 
 const handleClickDirectoryExpanding = async (state, dirent, index, keepFocus) => {
+  // @ts-ignore
   dirent.type = Directory;
+  // @ts-ignore
   dirent.icon = getIcon();
   return {
     ...state,
@@ -2405,8 +2479,12 @@ const handleClickDirectoryExpanding = async (state, dirent, index, keepFocus) =>
   };
 };
 
+const openUri = async (uri, focus) => {
+  await invoke(/* Main.openAbsolutePath */'Main.openUri', /* absolutePath */uri, /* focus */focus);
+};
+
 const handleClickFile$1 = async (state, dirent, index, keepFocus = false) => {
-  await invoke(/* Main.openAbsolutePath */'Main.openUri', /* absolutePath */dirent.path, /* focus */!keepFocus);
+  await openUri(dirent.path, !keepFocus);
   return {
     ...state,
     focusedIndex: index,
@@ -2793,7 +2871,9 @@ const isEqual = (a, b) => {
   if (a.length !== b.length) {
     return false;
   }
-  const length = a.length;
+  const {
+    length
+  } = a;
   for (let i = 0; i < length; i++) {
     if (a[i] !== b[i]) {
       return false;
@@ -2984,6 +3064,15 @@ const handleDrop = async (state, x, y, files) => {
   }
 };
 
+const setFocus = key => {
+  return invoke('Focus.setFocus', key);
+};
+
+const handleFocus = async state => {
+  await setFocus(FocusExplorer);
+  return state;
+};
+
 const updateIcon = dirent => {
   return {
     ...dirent,
@@ -3322,10 +3411,6 @@ const handleWorkspaceChange = async state => {
   return newState;
 };
 
-const setFocus = key => {
-  return invoke('Focus.setFocus', key);
-};
-
 const ExplorerEditBox = FocusExplorerEditBox;
 
 const newDirent = async (state, editingType) => {
@@ -3393,7 +3478,7 @@ const removeDirent = async state => {
   try {
     // TODO handle error
     await remove(absolutePath);
-  } catch (error) {
+  } 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)
@@ -3463,21 +3548,22 @@ const renameDirent = state => {
 
 const renderItems = {
   isEqual(oldState, newState) {
-    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;
+    return oldState.items === 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 && oldState.focused === newState.focused;
   },
   apply(oldState, newState) {
     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);
+    const dom = getExplorerVirtualDom(visibleDirents, newState.focusedIndex, newState.root, isWide, newState.focused);
     return ['Viewlet.setDom2', dom];
   }
 };
 
-// const renderFocusedIndex = {
-//   isEqual(oldState:any, newState:any) {
+// TODO add virtual dom diffing so that focus is not lost when updating dom
+// const renderFocus = {
+//   isEqual(oldState: any, newState: any) {
 //     return oldState.focusedIndex === newState.focusedIndex && oldState.focused === newState.focused && oldState.minLineY === newState.minLineY
 //   },
-//   apply(oldState:any, newState:any) {
+//   apply(oldState: any, newState: any) {
 //     const oldFocusedIndex = oldState.focusedIndex - oldState.minLineY
 //     const newFocusedIndex = newState.focusedIndex - newState.minLineY
 //     return [/* method */ 'setFocusedIndex', /* oldindex */ oldFocusedIndex, /* newIndex */ newFocusedIndex, /* focused */ newState.focused]
@@ -3502,7 +3588,23 @@ const renderEditingIndex = {
   }
 };
 const render = [renderItems, renderEditingIndex];
-const doRender = (oldState, newState) => {
+const doRender = (uid, _) => {
+  if (typeof uid === 'number') {
+    const {
+      oldState,
+      newState
+    } = get(uid);
+    const commands = [];
+    for (const fn of render) {
+      if (!fn.isEqual(oldState, newState)) {
+        commands.push(fn.apply(oldState, newState));
+      }
+    }
+    return commands;
+  }
+  // deprecated
+  const oldState = uid;
+  const newState = _;
   const commands = [];
   for (const fn of render) {
     if (!fn.isEqual(oldState, newState)) {
@@ -3818,14 +3920,22 @@ const isExpandedDirectory = dirent => {
   return dirent.type === DirectoryExpanded;
 };
 
-const saveState = state => {
+const saveState = uid => {
+  let newState;
+  if (typeof uid === 'number') {
+    const value = get(uid);
+    newState = value.newState;
+  } else {
+    // deprecated
+    newState = uid;
+  }
   const {
     items,
     root,
     deltaY,
     minLineY,
     maxLineY
-  } = state;
+  } = newState;
   const expandedPaths = items.filter(isExpandedDirectory).map(getPath);
   return {
     expandedPaths,
@@ -3860,6 +3970,10 @@ const setDeltaY = (state, deltaY) => {
   };
 };
 
+const terminate = () => {
+  globalThis.close();
+};
+
 const updateEditingValue = (state, value) => {
   const editingIcon = getFileIcon({
     name: value
@@ -3871,62 +3985,83 @@ 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;
+    }
+  };
+  return wrapped;
+};
+
 const commandMap = {
-  'Explorer.acceptEdit': acceptEdit,
-  'Explorer.cancelEdit': cancelEdit,
-  'Explorer.collapseAll': collapseAll$1,
-  'Explorer.copyPath': copyPath$1,
-  'Explorer.copyRelativePath': copyRelativePath$1,
-  'Explorer.expandAll': expandAll,
-  'Explorer.expandRecursively': expandRecursively,
-  'Explorer.focusFirst': focusFirst,
-  'Explorer.focusIndex': focusIndex,
-  'Explorer.focusLast': focusLast,
-  'Explorer.focusNext': focusNext,
-  'Explorer.focusPrevious': focusPrevious,
-  'Explorer.getActions': getActions,
-  'Explorer.getKeyBindings': getKeyBindings,
-  'Explorer.getMenuEntries': getMenuEntries,
-  'Explorer.getVirtualDom': getExplorerVirtualDom,
-  'Explorer.getVisibleItems': getVisibleExplorerItems,
-  'Explorer.handleArrowLeft': handleArrowLeft,
-  'Explorer.handleArrowRight': handleArrowRight,
-  'Explorer.handleBlur': handleBlur,
-  'Explorer.handleClick': handleClick,
-  'Explorer.handleClickAt': handleClickAt,
-  'Explorer.handleClickCurrentButKeepFocus': handleClickCurrentButKeepFocus,
-  'Explorer.handleClickOpenFolder': handleClickOpenFolder,
-  'Explorer.handleContextMenu': handleContextMenu,
-  'Explorer.handleCopy': handleCopy,
-  'Explorer.handleDragOver': handleDragOver,
-  'Explorer.handleDrop': handleDrop,
-  'Explorer.handleIconThemeChange': handleIconThemeChange,
-  'Explorer.handlePaste': handlePaste,
-  'Explorer.handlePointerDown': handlePointerDown,
-  'Explorer.handleUpload': handleUpload,
-  'Explorer.handleWheel': handleWheel,
-  'Explorer.handleWorkspaceChange': handleWorkspaceChange,
-  'Explorer.loadContent': loadContent,
-  'Explorer.newFile': newFile,
-  'Explorer.newFolder': newFolder,
-  'Explorer.openContainingFolder': openContainingFolder,
-  'Explorer.removeDirent': removeDirent,
-  'Explorer.renameDirent': renameDirent,
+  'Explorer.acceptEdit': wrapCommand(acceptEdit),
+  'Explorer.cancelEdit': wrapCommand(cancelEdit),
+  'Explorer.collapseAll': wrapCommand(collapseAll$1),
+  'Explorer.copyPath': wrapCommand(copyPath$1),
+  'Explorer.copyRelativePath': wrapCommand(copyRelativePath$1),
+  'Explorer.expandAll': wrapCommand(expandAll),
+  'Explorer.expandRecursively': wrapCommand(expandRecursively),
+  'Explorer.focusFirst': wrapCommand(focusFirst),
+  'Explorer.focusIndex': wrapCommand(focusIndex),
+  'Explorer.focusLast': wrapCommand(focusLast),
+  'Explorer.focusNext': wrapCommand(focusNext),
+  'Explorer.focusPrevious': wrapCommand(focusPrevious),
+  'Explorer.getActions': wrapCommand(getActions),
+  'Explorer.getKeyBindings': wrapCommand(getKeyBindings),
+  'Explorer.getMenuEntries': wrapCommand(getMenuEntries),
+  'Explorer.getVirtualDom': wrapCommand(getExplorerVirtualDom),
+  'Explorer.getVisibleItems': wrapCommand(getVisibleExplorerItems),
+  'Explorer.handleArrowLeft': wrapCommand(handleArrowLeft),
+  'Explorer.handleArrowRight': wrapCommand(handleArrowRight),
+  'Explorer.handleBlur': wrapCommand(handleBlur),
+  'Explorer.handleClick': wrapCommand(handleClick),
+  'Explorer.handleClickAt': wrapCommand(handleClickAt),
+  'Explorer.handleClickCurrentButKeepFocus': wrapCommand(handleClickCurrentButKeepFocus),
+  'Explorer.handleClickOpenFolder': wrapCommand(handleClickOpenFolder),
+  'Explorer.handleContextMenu': wrapCommand(handleContextMenu),
+  'Explorer.handleCopy': wrapCommand(handleCopy),
+  'Explorer.handleDragOver': wrapCommand(handleDragOver),
+  'Explorer.handleDrop': wrapCommand(handleDrop),
+  'Explorer.handleFocus': wrapCommand(handleFocus),
+  'Explorer.handleIconThemeChange': wrapCommand(handleIconThemeChange),
+  'Explorer.handlePaste': wrapCommand(handlePaste),
+  'Explorer.handlePointerDown': wrapCommand(handlePointerDown),
+  'Explorer.handleUpload': wrapCommand(handleUpload),
+  'Explorer.handleWheel': wrapCommand(handleWheel),
+  'Explorer.handleWorkspaceChange': wrapCommand(handleWorkspaceChange),
+  'Explorer.loadContent': wrapCommand(loadContent),
+  'Explorer.newFile': wrapCommand(newFile),
+  'Explorer.newFolder': wrapCommand(newFolder),
+  'Explorer.openContainingFolder': wrapCommand(openContainingFolder),
+  'Explorer.removeDirent': wrapCommand(removeDirent),
+  'Explorer.renameDirent': wrapCommand(renameDirent),
+  'Explorer.restoreState': wrapCommand(restoreState),
+  'Explorer.revealItem': wrapCommand(revealItem),
+  'Explorer.setDeltaY': wrapCommand(setDeltaY),
+  'Explorer.terminate': wrapCommand(terminate),
+  'Explorer.updateEditingValue': wrapCommand(updateEditingValue),
+  'Explorer.updateIcons': wrapCommand(updateIcons),
+  // not wrapped
+  'Explorer.create': create,
   'Explorer.render': doRender,
   'Explorer.renderActions': renderActions,
-  'Explorer.restoreState': restoreState,
-  'Explorer.revealItem': revealItem,
-  'Explorer.saveState': saveState,
-  'Explorer.setDeltaY': setDeltaY,
-  'Explorer.updateEditingValue': updateEditingValue,
-  'Explorer.updateIcons': updateIcons
+  'Explorer.saveState': saveState
 };
 
 const listen = async () => {
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set(RendererWorker, rpc);
+  set$1(RendererWorker, rpc);
 };
 
 const main = async () => {

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@lvce-editor/explorer-view",
-  "version": "1.17.0",
+  "version": "1.19.0",
   "description": "Explorer Worker",
-  "main": "dist/explorerViewWorkerMain.js",
-  "type": "module",
   "keywords": [],
-  "author": "Lvce Editor",
-  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lvce-editor/explorer-view.git"
-  }
+  },
+  "license": "MIT",
+  "author": "Lvce Editor",
+  "type": "module",
+  "main": "dist/explorerViewWorkerMain.js"
 }