@lvce-editor/explorer-view 1.21.0 → 1.23.0

package/dist/explorerViewWorkerMain.js

@@ -1332,6 +1332,43 @@ const create = (id, uri, x, y, width, height, args, parentUid) => {
   return state;
 };
 
+const RenderItems = 4;
+const RenderEditingIndex = 5;
+
+const diffType$1 = RenderEditingIndex;
+const isEqual$2 = (oldState, newState) => {
+  return oldState.editingIndex === newState.editingIndex && oldState.editingType === newState.editingType;
+};
+
+const DiffEditingIndex = {
+  __proto__: null,
+  diffType: diffType$1,
+  isEqual: isEqual$2
+};
+
+const diffType = RenderItems;
+const isEqual$1 = (oldState, newState) => {
+  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;
+};
+
+const DiffItems = {
+  __proto__: null,
+  diffType,
+  isEqual: isEqual$1
+};
+
+const modules = [DiffItems, DiffEditingIndex];
+
+const diff = (oldState, newState) => {
+  const diffResult = [];
+  for (const module of modules) {
+    if (!module.isEqual(oldState, newState)) {
+      diffResult.push(module.diffType);
+    }
+  }
+  return diffResult;
+};
+
 const isSymbolicLink = dirent => {
   return dirent.type === Symlink;
 };
@@ -1895,7 +1932,7 @@ const WelcomeMessage = 'WelcomeMessage';
 
 const HandleBlur = 'handleBlur';
 const HandleClick = 'handleClick';
-const handleClickOpenFolder$1 = 'handleClickOpenFolder';
+const HandleClickOpenFolder = 'handleClickOpenFolder';
 const HandleContextMenu = 'handleContextMenu';
 const HandleEditingInput = 'handleEditingInput';
 const HandleFocus = 'handleFocus';
@@ -2022,7 +2059,7 @@ const getExplorerWelcomeVirtualDom = isWide => {
     type: Button,
     className: mergeClassNames(Button$1, ButtonPrimary, isWide ? ButtonWide : ButtonNarrow),
     childCount: 1,
-    onClick: handleClickOpenFolder$1
+    onClick: HandleClickOpenFolder
   }, text(openFolder$1())];
 };
 
@@ -2375,6 +2412,60 @@ const focusParentFolder = state => {
   return focusIndex(state, parentStartIndex);
 };
 
+const handleClickDirectoryExpanded = async (state, dirent, index, keepFocus) => {
+  const {
+    minLineY,
+    maxLineY,
+    itemHeight,
+    fileIconCache
+  } = state;
+  // @ts-ignore
+  dirent.type = Directory;
+  // @ts-ignore
+  dirent.icon = getIcon();
+  const endIndex = getParentEndIndex(state.items, index);
+  const removeCount = endIndex - index - 1;
+  // TODO race conditions and side effects are everywhere
+  const newDirents = [...state.items];
+  newDirents.splice(index + 1, removeCount);
+  const newTotal = newDirents.length;
+  if (newTotal < maxLineY) {
+    const visibleItems = Math.min(maxLineY - minLineY, newTotal);
+    const newMaxLineY = Math.min(maxLineY, newTotal);
+    const newMinLineY = newMaxLineY - visibleItems;
+    const deltaY = newMinLineY * itemHeight;
+    const parts = newDirents.slice(minLineY, maxLineY);
+    const {
+      icons,
+      newFileIconCache
+    } = await getFileIcons(parts, fileIconCache);
+    return {
+      ...state,
+      items: newDirents,
+      icons,
+      fileIconCache: newFileIconCache,
+      focusedIndex: index,
+      focused: keepFocus,
+      minLineY: newMinLineY,
+      maxLineY: newMaxLineY,
+      deltaY
+    };
+  }
+  const parts = newDirents.slice(state.minLineY, state.maxLineY);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(parts, fileIconCache);
+  return {
+    ...state,
+    items: newDirents,
+    icons,
+    fileIconCache: newFileIconCache,
+    focusedIndex: index,
+    focused: keepFocus
+  };
+};
+
 const handleArrowLeft = state => {
   const {
     items,
@@ -2390,8 +2481,7 @@ const handleArrowLeft = state => {
     case SymLinkFile:
       return focusParentFolder(state);
     case DirectoryExpanded:
-      // @ts-ignore
-      return handleClickDirectoryExpanded(state, dirent, focusedIndex);
+      return handleClickDirectoryExpanded(state, dirent, focusedIndex, true);
     default:
       // TODO handle expanding directory and cancel file system call to read child dirents
       return state;
@@ -2522,60 +2612,6 @@ const handleBlur = state => {
   };
 };
 
-const handleClickDirectoryExpanded$1 = async (state, dirent, index, keepFocus) => {
-  const {
-    minLineY,
-    maxLineY,
-    itemHeight,
-    fileIconCache
-  } = state;
-  // @ts-ignore
-  dirent.type = Directory;
-  // @ts-ignore
-  dirent.icon = getIcon();
-  const endIndex = getParentEndIndex(state.items, index);
-  const removeCount = endIndex - index - 1;
-  // TODO race conditions and side effects are everywhere
-  const newDirents = [...state.items];
-  newDirents.splice(index + 1, removeCount);
-  const newTotal = newDirents.length;
-  if (newTotal < maxLineY) {
-    const visibleItems = Math.min(maxLineY - minLineY, newTotal);
-    const newMaxLineY = Math.min(maxLineY, newTotal);
-    const newMinLineY = newMaxLineY - visibleItems;
-    const deltaY = newMinLineY * itemHeight;
-    const parts = newDirents.slice(minLineY, maxLineY);
-    const {
-      icons,
-      newFileIconCache
-    } = await getFileIcons(parts, fileIconCache);
-    return {
-      ...state,
-      items: newDirents,
-      icons,
-      fileIconCache: newFileIconCache,
-      focusedIndex: index,
-      focused: keepFocus,
-      minLineY: newMinLineY,
-      maxLineY: newMaxLineY,
-      deltaY
-    };
-  }
-  const parts = newDirents.slice(state.minLineY, state.maxLineY);
-  const {
-    icons,
-    newFileIconCache
-  } = await getFileIcons(parts, fileIconCache);
-  return {
-    ...state,
-    items: newDirents,
-    icons,
-    fileIconCache: newFileIconCache,
-    focusedIndex: index,
-    focused: keepFocus
-  };
-};
-
 const handleClickDirectoryExpanding = async (state, dirent, index, keepFocus) => {
   // @ts-ignore
   dirent.type = Directory;
@@ -2616,7 +2652,7 @@ const getClickFn = direntType => {
     case DirectoryExpanding:
       return handleClickDirectoryExpanding;
     case DirectoryExpanded:
-      return handleClickDirectoryExpanded$1;
+      return handleClickDirectoryExpanded;
     case Symlink:
       return handleClickSymLink;
     case CharacterDevice:
@@ -3167,7 +3203,7 @@ const handleUpload = async (state, dirents) => {
   }
 };
 
-const setDeltaY = (state, deltaY) => {
+const setDeltaY = async (state, deltaY) => {
   const {
     itemHeight,
     height,
@@ -3183,11 +3219,18 @@ const setDeltaY = (state, deltaY) => {
   }
   const minLineY = Math.round(deltaY / itemHeight);
   const maxLineY = minLineY + Math.round(height / itemHeight);
+  const visible = items.slice(minLineY, maxLineY);
+  const {
+    icons,
+    newFileIconCache
+  } = await getFileIcons(visible, state.fileIconCache);
   return {
     ...state,
     deltaY,
     minLineY,
-    maxLineY
+    maxLineY,
+    icons,
+    fileIconCache: newFileIconCache
   };
 };
 
@@ -3511,71 +3554,54 @@ const renameDirent = state => {
   };
 };
 
-const renderItems = {
-  isEqual(oldState, newState) {
-    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, newState.focused);
-    return ['Viewlet.setDom2', dom];
-  }
-};
-
-// 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) {
-//     const oldFocusedIndex = oldState.focusedIndex - oldState.minLineY
-//     const newFocusedIndex = newState.focusedIndex - newState.minLineY
-//     return [/* method */ 'setFocusedIndex', /* oldindex */ oldFocusedIndex, /* newIndex */ newFocusedIndex, /* focused */ newState.focused]
-//   },
-// }
-
-// const renderDropTargets = {
-//   isEqual(oldState:any, newState:any) {
-//     return oldState.dropTargets === newState.dropTargets
-//   },
-//   apply(oldState:any, newState:any) {
-//     return [/* method */ 'setDropTargets', /* oldDropTargets */ oldState.dropTargets, /* newDropTargets */ newState.dropTargets]
-//   },
-// }
-
-const renderEditingIndex = {
-  isEqual(oldState, newState) {
-    return oldState.editingIndex === newState.editingIndex && oldState.editingType === newState.editingType;
-  },
-  apply(oldState, newState) {
-    return ['focusInput', 'ExplorerInput'];
-  }
-};
-const render = [renderItems, renderEditingIndex];
+const renderEditingIndex = (oldState, newState) => {
+  return ['focusInput', 'ExplorerInput'];
+};
+
+const renderItems = (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, newState.focused);
+  return ['Viewlet.setDom2', dom];
+};
+
+const getRenderer = diffType => {
+  switch (diffType) {
+    case RenderEditingIndex:
+      return renderEditingIndex;
+    case RenderItems:
+      return renderItems;
+    default:
+      throw new Error('unknown renderer');
+  }
+};
+
+const applyRender = (oldState, newState, diffResult) => {
+  const commands = [];
+  for (const item of diffResult) {
+    const fn = getRenderer(item);
+    commands.push(fn(oldState, newState));
+  }
+  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 = [];
-    for (const fn of render) {
-      if (!fn.isEqual(oldState, newState)) {
-        commands.push(fn.apply(oldState, newState));
-      }
-    }
+    const commands = renderInternal(oldState, newState);
     return commands;
   }
   // deprecated
   const oldState = uid;
   const newState = _;
-  const commands = [];
-  for (const fn of render) {
-    if (!fn.isEqual(oldState, newState)) {
-      commands.push(fn.apply(oldState, newState));
-    }
-  }
+  const commands = renderInternal(oldState, newState);
   return commands;
 };
 
@@ -3627,6 +3653,41 @@ const renderActions = state => {
   return dom;
 };
 
+const renderEventListeners = () => {
+  return [{
+    name: HandleBlur,
+    params: ['handleBlur']
+  }, {
+    name: HandleFocus,
+    params: ['handleFocus', 'event.isTrusted', 'event.target.className']
+  }, {
+    name: HandleBlur,
+    params: ['handleBlur']
+  }, {
+    name: HandleClick,
+    params: ['event.button', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleClickOpenFolder,
+    params: [],
+    preventDefault: true
+  }, {
+    name: HandlePointerDown,
+    params: ['event.button', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleEditingInput,
+    params: ['event.target.value']
+  }, {
+    name: HandleContextMenu,
+    params: ['event.button', 'event.clientX', 'event.clientY']
+  }, {
+    name: HandleWheel,
+    params: ['event.deltaMode', 'event.deltaY'],
+    passive: true
+  }];
+};
+
 const getSavedRoot = (savedState, workspacePath) => {
   return workspacePath;
 };
@@ -3957,10 +4018,10 @@ const commandMap = {
   'Explorer.focusNext': wrapCommand(focusNext),
   'Explorer.focusPrevious': wrapCommand(focusPrevious),
   'Explorer.getActions': wrapCommand(getActions),
+  'Explorer.getCommandIds': getCommandIds,
   'Explorer.getKeyBindings': wrapCommand(getKeyBindings),
   'Explorer.getMenuEntries': wrapCommand(getMenuEntries),
   'Explorer.getVirtualDom': wrapCommand(getExplorerVirtualDom),
-  'Explorer.getCommandIds': getCommandIds,
   'Explorer.getVisibleItems': wrapCommand(getVisibleExplorerItems),
   'Explorer.handleArrowLeft': wrapCommand(handleArrowLeft),
   'Explorer.handleArrowRight': wrapCommand(handleArrowRight),
@@ -3996,7 +4057,9 @@ const commandMap = {
   'Explorer.create': create,
   'Explorer.render': doRender,
   'Explorer.renderActions': renderActions,
-  'Explorer.saveState': saveState
+  'Explorer.saveState': saveState,
+  'Explorer.renderEventListeners': renderEventListeners,
+  'Explorer.diff': diff
 };
 
 const listen = async () => {

package/package.json

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