@lvce-editor/server 0.0.41 → 0.2.0

package/static/{d4a8cd1 → 56d97e9}/packages/renderer-worker/src/parts/ViewletActivityBar/ViewletActivityBar.js

@@ -3,8 +3,21 @@ import * as RendererProcess from '../RendererProcess/RendererProcess.js'
 import * as GlobalEventBus from '../GlobalEventBus/GlobalEventBus.js'
 import * as Layout from '../Layout/Layout.js'
 import * as ViewletStates from '../ViewletStates/ViewletStates.js'
-
-const ACTIVITY_BAR_ITEM_HEIGHT = 48
+import * as ActivityBarItemFlags from '../ActivityBarItemFlags/ActvityBarItemFlags.js'
+import * as I18nString from '../I18NString/I18NString.js'
+
+/**
+ * @enum {string}
+ */
+const UiStrings = {
+  Explorer: 'Explorer',
+  Search: 'Search',
+  SourceControl: 'Source Control',
+  RunAndDebug: 'Run and Debug',
+  Extensions: 'Extensions',
+  Settings: 'Settings',
+  AdditionalViews: 'Additional Views',
+}
 
 export const name = 'ActivityBar'
 
@@ -17,9 +30,8 @@ export const name = 'ActivityBar'
 // TODO unregister listeners when hidden
 
 const getNumberOfVisibleItems = (state) => {
-  const numberOfVisibleItemsTop = Math.floor(
-    state.height / ACTIVITY_BAR_ITEM_HEIGHT
-  )
+  const { height, itemHeight } = state
+  const numberOfVisibleItemsTop = Math.floor(height / itemHeight)
   return numberOfVisibleItemsTop
 }
 
@@ -40,9 +52,10 @@ const getVisibleActivityBarItems = (state) => {
   }
   const showMoreItem = {
     id: 'Additional Views',
+    title: I18nString.i18nString(UiStrings.AdditionalViews),
     icon: 'icons/ellipsis.svg',
     enabled: true,
-    flags: /* Button */ 2,
+    flags: ActivityBarItemFlags.Button,
     keyShortCuts: '',
   }
   const visibleItems = [
@@ -71,6 +84,7 @@ export const create = (id, uri, left, top, width, height) => {
     top,
     width,
     height,
+    itemHeight: 48,
   }
 }
 
@@ -79,45 +93,51 @@ const getActivityBarItems = () => {
     // Top
     {
       id: 'Explorer',
+      title: I18nString.i18nString(UiStrings.Explorer),
       icon: 'icons/files.svg',
       enabled: true,
-      flags: /* Tab */ 1,
+      flags: ActivityBarItemFlags.Tab,
       keyShortcuts: 'Control+Shift+E',
     },
     {
       id: 'Search',
+      title: I18nString.i18nString(UiStrings.Search),
       icon: 'icons/search.svg',
       enabled: true,
-      flags: /* Tab */ 1,
+      flags: ActivityBarItemFlags.Tab,
       keyShortcuts: 'Control+Shift+F',
     },
     {
       id: 'Source Control',
+      title: I18nString.i18nString(UiStrings.SourceControl),
       icon: 'icons/source-control.svg',
       enabled: true,
-      flags: /* Tab */ 1,
+      flags: ActivityBarItemFlags.Tab,
       keyShortcuts: 'Control+Shift+G',
     },
     {
       id: 'Run and Debug',
+      title: I18nString.i18nString(UiStrings.RunAndDebug),
       icon: 'icons/debug-alt-2.svg',
       enabled: true,
-      flags: /* Tab */ 1,
+      flags: ActivityBarItemFlags.Tab,
       keyShortcuts: 'Control+Shift+D',
     },
     {
       id: 'Extensions',
+      title: I18nString.i18nString(UiStrings.Extensions),
       icon: 'icons/extensions.svg',
       enabled: true,
-      flags: /* Tab */ 1,
+      flags: ActivityBarItemFlags.Tab,
       keyShortcuts: 'Control+Shift+X',
     },
     // Bottom
     {
       id: 'Settings',
+      title: I18nString.i18nString(UiStrings.Settings),
       icon: 'icons/settings-gear.svg',
       enabled: true,
-      flags: /* Button */ 2,
+      flags: ActivityBarItemFlags.Button,
       keyShortcuts: '',
     },
   ]
@@ -171,39 +191,50 @@ const findIndex = (activityBarItems, id) => {
   return -1
 }
 
+const handleClickSettings = async (state, x, y, viewletId) => {
+  console.log('is settings')
+  await Command.execute(
+    /* ContextMenu.show */ 'ContextMenu.show',
+    /* x */ x,
+    /* y */ y,
+    /* id */ 'settings'
+  )
+  return state
+}
+
+const handleClickAdditionalViews = async (state, x, y, viewletId) => {
+  await Command.execute(
+    /* ContextMenu.show */ 'ContextMenu.show',
+    /* x */ x,
+    /* y */ y,
+    /* id */ 'activity-bar-additional-views'
+  )
+  return state
+}
+
+const handleClickOther = async (state, x, y, viewletId) => {
+  if (Layout.isSideBarVisible()) {
+    await Command.execute(
+      /* SideBar.showOrHideViewlet */ 'SideBar.showOrHideViewlet',
+      /* id */ viewletId
+    )
+  } else {
+    // TODO should show side bar with viewletId
+    await Layout.showSideBar()
+  }
+  return state
+}
+
 export const handleClick = async (state, index, x, y) => {
   const viewletId = state.activityBarItems[index].id
   switch (viewletId) {
     case 'Settings':
-      console.log('is settings')
-      await Command.execute(
-        /* ContextMenu.show */ 'ContextMenu.show',
-        /* x */ x,
-        /* y */ y,
-        /* id */ 'settings'
-      )
-      break
+      return handleClickSettings(state, x, y, viewletId)
     case 'Additional Views':
-      await Command.execute(
-        /* ContextMenu.show */ 'ContextMenu.show',
-        /* x */ x,
-        /* y */ y,
-        /* id */ 'activity-bar-additional-views'
-      )
-      break
+      return handleClickAdditionalViews(state, x, y, viewletId)
     default:
-      if (Layout.isSideBarVisible()) {
-        await Command.execute(
-          /* SideBar.showOrHideViewlet */ 'SideBar.showOrHideViewlet',
-          /* id */ viewletId
-        )
-      } else {
-        // TODO should show side bar with viewletId
-        await Layout.showSideBar()
-      }
-      break
+      return handleClickOther(state, x, y, viewletId)
   }
-  return state
 }
 
 export const handleSideBarViewletChange = async (state, id, ...args) => {
@@ -320,20 +351,18 @@ export const focusLast = (state) => {
 }
 
 const getPosition = (state, index) => {
-  if (index > state.activityBarItems.length - 2) {
+  const { activityBarItems, top, left, height, itemHeight } = state
+  if (index > activityBarItems.length - 2) {
     // at bottom
     return {
-      x: state.left,
-      y:
-        state.top +
-        state.height -
-        (state.activityBarItems.length - 1 - index) * ACTIVITY_BAR_ITEM_HEIGHT,
+      x: left,
+      y: top + height - (activityBarItems.length - 1 - index) * itemHeight,
     }
   }
   // at top
   return {
-    x: state.left,
-    y: state.top + index * ACTIVITY_BAR_ITEM_HEIGHT,
+    x: left,
+    y: top + index * itemHeight,
   }
 }
 

package/static/{d4a8cd1 → 56d97e9}/packages/renderer-worker/src/parts/ViewletEditorCompletion/ViewletEditorCompletion.js

@@ -5,6 +5,7 @@ import * as TextDocument from '../TextDocument/TextDocument.js'
 import * as Viewlet from '../Viewlet/Viewlet.js'
 import * as IconTheme from '../IconTheme/IconTheme.js'
 import * as EditorShowMessage from '../EditorCommand/EditorCommandShowMessage.js'
+import * as EditorCompletionType from '../EditorCompletionType/EditorCompletionType.js'
 
 export const create = (id, uri, top, left, width, height) => {
   console.log({ id, uri, top, left, width, height })
@@ -55,25 +56,18 @@ const getLabel = (item) => {
   return item.label
 }
 
+const EditorCompletionClassNames = {
+  [EditorCompletionType.Property]: 'IconProperty',
+  [EditorCompletionType.Value]: 'IconValue',
+  [EditorCompletionType.Function]: 'IconFunction',
+  [EditorCompletionType.Variable]: 'IconVariable',
+  [EditorCompletionType.Keyword]: 'IconKeyword',
+}
+
+const defaultClassName = 'IconDefault'
+
 const getIconClassName = (item) => {
-  switch (item.kind) {
-    case /* Property */ 1:
-      return 'IconProperty'
-    case /* Value */ 2:
-      return 'IconValue'
-    case /* Function */ 3:
-      return 'IconFunction'
-    case /* Variable */ 4:
-      return 'IconVariable'
-    case /* Keyword */ 5:
-      return 'IconKeyword'
-    case /* Folder */ 6:
-      return IconTheme.getFolderIcon({ name: item.label })
-    case /* File */ 7:
-      return IconTheme.getFileIcon({ name: item.label })
-    default:
-      return 'IconDefault'
-  }
+  return EditorCompletionClassNames[item.kind] || defaultClassName
 }
 
 const getVisibleItems = (filteredItems) => {

package/static/{d4a8cd1 → 56d97e9}/packages/renderer-worker/src/parts/ViewletEditorText/ViewletEditorText.js

@@ -166,6 +166,11 @@ export const resize = (state, dimensions) => {
 
 export const hasFunctionalRender = true
 
-export const render = (oldState, newState) => {
-  return Editor.render(oldState, newState)
+export const render = Editor.render
+
+export const focus = (state) => {
+  return {
+    ...state,
+    focused: true,
+  }
 }

package/static/56d97e9/packages/renderer-worker/src/parts/ViewletExplorer/ViewletExplorer.ipc.js

@@ -0,0 +1,46 @@
+import * as Viewlet from '../Viewlet/Viewlet.js'
+import * as ViewletExplorer from './ViewletExplorer.js'
+
+// prettier-ignore
+export const Commands = {
+  'Explorer.acceptNewFile':             Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.acceptNewFile),
+  'Explorer.acceptRename':              Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.acceptRename),
+  'Explorer.cancelNewFile':             Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.cancelNewFile),
+  'Explorer.cancelRename':              Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.cancelRename),
+  'Explorer.collapseAll':               Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.collapseAll),
+  'Explorer.copyPath':                  Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.copyPath),
+  'Explorer.copyRelativePath':          Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.copyRelativePath),
+  'Explorer.expandAll':                 Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.expandAll),
+  'Explorer.expandRecursively':         Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.expandRecursively),
+  'Explorer.focus':                     Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.focus),
+  'Explorer.focusFirst':                Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.focusFirst),
+  'Explorer.focusIndex':                Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.focusIndex),
+  'Explorer.focusLast':                 Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.focusLast),
+  'Explorer.focusNext':                 Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.focusNext),
+  'Explorer.focusNone':                 Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.focusNone),
+  'Explorer.focusPrevious':             Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.focusPrevious),
+  'Explorer.getFocusedDirent':          Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.getFocusedDirent),
+  'Explorer.handleArrowLeft':           Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.handleArrowLeft),
+  'Explorer.handleArrowRight':          Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.handleArrowRight),
+  'Explorer.handleBlur':                Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.handleBlur),
+  'Explorer.handleClick':               Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.handleClick),
+  'Explorer.handleClickCurrent':        Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.handleClickCurrent),
+  'Explorer.handleContextMenuKeyboard': Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.handleContextMenuKeyboard),
+  'Explorer.handleContextMenuMouse':    Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.handleContextMenuMouse),
+  'Explorer.handleCopy':                Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.handleCopy),
+  'Explorer.handleMouseEnter':          Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.handleMouseEnter),
+  'Explorer.handleMouseLeave':          Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.handleMouseLeave),
+  'Explorer.handlePaste':               Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.handlePaste),
+  'Explorer.handleWheel':               Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.handleWheel),
+  'Explorer.newFile':                   Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.newFile),
+  'Explorer.newFolder':                 Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.newFolder),
+  'Explorer.openContainingFolder':      Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.openContainingFolder),
+  'Explorer.removeDirent':              Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.removeDirent),
+  'Explorer.renameDirent':              Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.renameDirent),
+  'Explorer.revealItem':                Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.revealItem),
+  'Explorer.scrollDown':                Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.scrollDown),
+  'Explorer.scrollUp':                  Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.scrollUp),
+  'Explorer.setDeltaY':                 Viewlet.wrapViewletCommand('Explorer', ViewletExplorer.setDeltaY),
+}
+
+export * from './ViewletExplorer.js'

package/static/{d4a8cd1 → 56d97e9}/packages/renderer-worker/src/parts/ViewletExplorer/ViewletExplorer.js

@@ -1,5 +1,7 @@
 import * as Assert from '../Assert/Assert.js'
 import * as Command from '../Command/Command.js'
+import * as Compare from '../Compare/Compare.js'
+import * as DirentType from '../DirentType/DirentType.js'
 import * as ErrorHandling from '../ErrorHandling/ErrorHandling.js'
 import * as FileSystem from '../FileSystem/FileSystem.js'
 import * as IconTheme from '../IconTheme/IconTheme.js'
@@ -49,7 +51,7 @@ const compareDirentType = (direntA, direntB) => {
 }
 
 const compareDirentName = (direntA, direntB) => {
-  return direntA.name.localeCompare(direntB.name)
+  return Compare.compareString(direntA.name, direntB.name)
 }
 
 const compareDirent = (direntA, direntB) => {
@@ -240,10 +242,22 @@ export const handleWheel = (state, deltaY) => {
   return setDeltaY(state, state.deltaY + deltaY)
 }
 
-export const handleContextMenu = async (state, x, y, index, button) => {
-  if (button === -1) {
-    index = state.focusedIndex
+export const handleContextMenuKeyboard = async (state, index) => {
+  const x = state.left
+  const y = state.top + (index - state.minLineY + 1) * state.itemHeight
+  await Command.execute(
+    /* ContextMenu.show */ 'ContextMenu.show',
+    /* x */ x,
+    /* y */ y,
+    /* id */ 'explorer'
+  )
+  return {
+    ...state,
+    focusedIndex: index,
   }
+}
+
+export const handleContextMenuMouse = async (state, x, y, index) => {
   await Command.execute(
     /* ContextMenu.show */ 'ContextMenu.show',
     /* x */ x,
@@ -498,7 +512,11 @@ export const copyRelativePath = async (state) => {
   const dirent = getFocusedDirent(state)
   const relativePath = dirent.path.slice(1)
   // TODO handle error
-  await Command.execute(/* ClipBoard.writeText */ 241, /* text */ relativePath)
+  await Command.execute(
+    /* ClipBoard.writeText */ 'ClipBoard.writeText',
+    /* text */ relativePath
+  )
+  return state
 }
 
 export const copyPath = async (state) => {
@@ -506,7 +524,11 @@ export const copyPath = async (state) => {
   // TODO windows paths
   // TODO handle error
   const path = dirent.path
-  await Command.execute(/* ClipBoard.writeText */ 241, /* text */ path)
+  await Command.execute(
+    /* ClipBoard.writeText */ 'ClipBoard.writeText',
+    /* text */ path
+  )
+  return state
 }
 
 const getContaingingFolder = (root, dirents, focusedIndex, pathSeparator) => {
@@ -533,7 +555,7 @@ const newDirent = async (state) => {
   const index = state.focusedIndex + 1
   if (focusedIndex >= 0) {
     const dirent = state.dirents[state.focusedIndex]
-    if (dirent.type === 'directory') {
+    if (dirent.type === DirentType.Directory) {
       // TODO handle error
       await handleClickDirectory(state, dirent, focusIndex)
     }
@@ -599,11 +621,10 @@ const acceptDirent = async (state, type) => {
   // TODO better handle error
   try {
     switch (type) {
-      case 'file':
+      case DirentType.File:
         await FileSystem.writeFile(absolutePath, '')
         break
-      case 'folder':
-      case 'directory':
+      case DirentType.Directory:
         await FileSystem.mkdir(absolutePath)
         break
       default:
@@ -666,11 +687,11 @@ const acceptDirent = async (state, type) => {
 
 // TODO much duplicate logic with acceptNewFolder
 export const acceptNewFile = (state) => {
-  return acceptDirent(state, 'file')
+  return acceptDirent(state, DirentType.File)
 }
 
 export const acceptNewFolder = (state) => {
-  return acceptDirent(state, 'directory')
+  return acceptDirent(state, DirentType.Directory)
 }
 
 // TODO much copy paste with newFIle command
@@ -690,7 +711,7 @@ const handleClickFile = async (state, dirent, index) => {
 }
 
 const handleClickDirectory = async (state, dirent, index) => {
-  dirent.type = 'directory-expanding'
+  dirent.type = DirentType.DirectoryExpanding
   // TODO handle error
   const dirents = await getChildDirents(state.root, state.pathSeparator, dirent)
   const state2 = Viewlet.getState('Explorer')
@@ -706,7 +727,7 @@ const handleClickDirectory = async (state, dirent, index) => {
   // console.log(state.dirents[index] === dirent)
   const newDirents = [...state2.dirents]
   newDirents.splice(newIndex + 1, 0, ...dirents)
-  dirent.type = 'directory-expanded'
+  dirent.type = DirentType.DirectoryExpanded
   dirent.icon = IconTheme.getIcon(dirent)
   // TODO when focused index has changed while expanding, don't update it
   return {
@@ -717,7 +738,7 @@ const handleClickDirectory = async (state, dirent, index) => {
 }
 
 const handleClickDirectoryExpanding = async (state, dirent, index) => {
-  dirent.type = 'directory'
+  dirent.type = DirentType.Directory
   dirent.icon = IconTheme.getIcon(dirent)
   await RendererProcess.invoke(
     /* viewSend */ 'Viewlet.send',
@@ -730,7 +751,7 @@ const handleClickDirectoryExpanding = async (state, dirent, index) => {
 }
 
 const handleClickDirectoryExpanded = (state, dirent, index) => {
-  dirent.type = 'directory'
+  dirent.type = DirentType.Directory
   dirent.icon = IconTheme.getIcon(dirent)
   const endIndex = getParentEndIndex(state.dirents, index)
   const removeCount = endIndex - index - 1
@@ -755,17 +776,16 @@ export const handleClick = async (state, index) => {
   }
   // TODO dirent type should be numeric
   switch (dirent.type) {
-    case 'file':
+    case DirentType.File:
       return handleClickFile(state, dirent, actualIndex)
     // TODO decide on one name
-    case 'folder':
-    case 'directory':
+    case DirentType.Directory:
       return handleClickDirectory(state, dirent, actualIndex)
-    case 'directory-expanding':
+    case DirentType.DirectoryExpanding:
       return handleClickDirectoryExpanding(state, dirent, actualIndex)
-    case 'directory-expanded':
+    case DirentType.DirectoryExpanded:
       return handleClickDirectoryExpanded(state, dirent, actualIndex)
-    case 'symlink':
+    case DirentType.Symlink:
       return handleClickSymLink(state, dirent, state.focusedIndex)
     default:
       break
@@ -868,7 +888,7 @@ const handleClickSymLink = async (state, dirent, index) => {
   const realPath = await FileSystem.getRealPath(dirent.path)
   const type = await FileSystem.stat(realPath)
   switch (type) {
-    case 'file':
+    case DirentType.File:
       return handleClickFile(state, dirent, index)
     default:
       throw new Error(`unsupported file type ${type}`)
@@ -891,13 +911,13 @@ export const handleArrowRight = async (state) => {
   }
   const dirent = state.dirents[state.focusedIndex]
   switch (dirent.type) {
-    case 'file':
+    case DirentType.File:
       return state
-    case 'directory':
+    case DirentType.Directory:
       return handleClickDirectory(state, dirent, state.focusedIndex)
-    case 'directory-expanded':
+    case DirentType.DirectoryExpanded:
       return handleArrowRightDirectoryExpanded(state, dirent)
-    case 'symlink':
+    case DirentType.Symlink:
       return handleClickSymLink(state, dirent, state.focusedIndex)
     default:
       throw new Error(`unsupported file type ${dirent.type}`)
@@ -921,10 +941,10 @@ export const handleArrowLeft = (state) => {
   }
   const dirent = state.dirents[state.focusedIndex]
   switch (dirent.type) {
-    case 'directory':
-    case 'file':
+    case DirentType.Directory:
+    case DirentType.File:
       return focusParentFolder(state)
-    case 'directory-expanded':
+    case DirentType.DirectoryExpanded:
       return handleClickDirectoryExpanded(state, dirent, state.focusedIndex)
     default:
       // TODO handle expanding directory and cancel file system call to read child dirents
@@ -1172,10 +1192,10 @@ export const expandAll = async (state) => {
   const newDirents = [...dirents]
   // TODO fetch child dirents in parallel
   for (const dirent of newDirents) {
-    if (dirent.depth === depth && dirent.type === 'directory') {
+    if (dirent.depth === depth && dirent.type === DirentType.Directory) {
       // TODO expand
       // TODO avoid mutating state here
-      dirent.type = 'directory-expanding'
+      dirent.type = DirentType.DirectoryExpanding
       // TODO handle error
       // TODO race condition
       const childDirents = await getChildDirents(
@@ -1189,7 +1209,7 @@ export const expandAll = async (state) => {
       }
       newDirents.splice(newIndex + 1, 0, ...childDirents)
       // TODO avoid mutating state here
-      dirent.type = 'directory-expanded'
+      dirent.type = DirentType.DirectoryExpanded
       // await expand(state, dirent.index)
     }
   }
@@ -1204,10 +1224,10 @@ const isTopLevel = (dirent) => {
 }
 
 const toCollapsedDirent = (dirent) => {
-  if (dirent.type === 'directory-expanded') {
+  if (dirent.type === DirentType.DirectoryExpanded) {
     return {
       ...dirent,
-      type: 'directory',
+      type: DirentType.Directory,
     }
   }
   return dirent
@@ -1411,6 +1431,46 @@ export const revealItem = async (state, uri) => {
   return revealItemVisible(state, index)
 }
 
+export const expandRecursively = async (state) => {
+  const { dirents, focusedIndex, pathSeparator, root } = state
+  const dirent = dirents[focusedIndex]
+  if (
+    dirent.type !== DirentType.Directory &&
+    dirent.type !== DirentType.DirectoryExpanding
+  ) {
+    return state
+  }
+  // TODO this is very inefficient
+  const getChildDirentsRecursively = async (dirent) => {
+    switch (dirent.type) {
+      case DirentType.File:
+        return [dirent]
+      case DirentType.Directory:
+        const childDirents = await getChildDirents(root, pathSeparator, dirent)
+        const all = [dirent]
+        for (const childDirent of childDirents) {
+          const childAll = await getChildDirentsRecursively(childDirent)
+          all.push(...childAll)
+        }
+        return all
+      default:
+        return []
+    }
+  }
+  // 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?
+  const childDirents = await getChildDirentsRecursively(dirent)
+  const startIndex = focusedIndex
+  const endIndex = getParentEndIndex(dirents, focusedIndex)
+  const newDirents = [
+    ...dirents.slice(0, startIndex),
+    ...childDirents,
+    ...dirents.slice(endIndex),
+  ]
+  return { ...state, dirents: newDirents }
+}
+
 export const shouldApplyNewState = (newState, fn) => {
   if (newState.root !== Workspace.state.workspacePath) {
     console.log(