@lvce-editor/server 0.7.3 → 0.7.5

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletExplorer/ViewletExplorerFocusFirst.js

@@ -1,8 +1,8 @@
 import { focusIndex } from './ViewletExplorerFocusIndex.js'
 
 export const focusFirst = (state) => {
-  const { focusedIndex, dirents } = state
-  if (dirents.length === 0 || focusedIndex === 0) {
+  const { focusedIndex, items } = state
+  if (items.length === 0 || focusedIndex === 0) {
     return state
   }
   return focusIndex(state, 0)

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletExplorer/ViewletExplorerFocusLast.js

@@ -2,9 +2,9 @@ import { focusIndex } from './ViewletExplorerFocusIndex.js'
 import * as Arrays from '../Arrays/Arrays.js'
 
 export const focusLast = (state) => {
-  const { focusedIndex, dirents } = state
-  const lastIndex = Arrays.lastIndex(dirents)
-  if (dirents.length === 0 || focusedIndex === lastIndex) {
+  const { focusedIndex, items } = state
+  const lastIndex = Arrays.lastIndex(items)
+  if (items.length === 0 || focusedIndex === lastIndex) {
     return state
   }
   return focusIndex(state, lastIndex)

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletExplorer/ViewletExplorerFocusNext.js

@@ -2,8 +2,8 @@ import { focusIndex } from './ViewletExplorerFocusIndex.js'
 import * as Arrays from '../Arrays/Arrays.js'
 
 export const focusNext = (state) => {
-  const { focusedIndex, dirents } = state
-  if (focusedIndex === Arrays.lastIndex(dirents)) {
+  const { focusedIndex, items } = state
+  if (focusedIndex === Arrays.lastIndex(items)) {
     return state
   }
   return focusIndex(state, focusedIndex + 1)

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletExplorer/ViewletExplorerFocusPrevious.js

@@ -2,13 +2,13 @@ import { focusIndex } from './ViewletExplorerFocusIndex.js'
 import * as Arrays from '../Arrays/Arrays.js'
 
 export const focusPrevious = (state) => {
-  const { focusedIndex, dirents } = state
+  const { focusedIndex, items } = state
   switch (focusedIndex) {
     case -1:
-      if (dirents.length === 0) {
+      if (items.length === 0) {
         return state
       }
-      return focusIndex(state, Arrays.lastIndex(dirents))
+      return focusIndex(state, Arrays.lastIndex(items))
     case 0:
       return state
     default:

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletExplorer/ViewletExplorerHandleDropIndex.js

@@ -7,7 +7,7 @@ import * as FileSystem from '../FileSystem/FileSystem.js'
 import { handleDropRoot } from './ViewletExplorerHandleDropRoot.js'
 
 const handleDropIntoFolder = async (state, dirent, index, files) => {
-  const { pathSeparator, root, dirents } = state
+  const { pathSeparator, root, items } = state
   for (const file of files) {
     const from = file.path
     const to = dirent.path + pathSeparator + file.name
@@ -19,23 +19,23 @@ const handleDropIntoFolder = async (state, dirent, index, files) => {
   const startIndex = index + 1
   const endIndex = index + 2
   const mergedDirents = [
-    ...dirents.slice(0, startIndex),
+    ...items.slice(0, startIndex),
     ...childDirents,
-    ...dirents.slice(endIndex),
+    ...items.slice(endIndex),
   ]
 
   // const mergedDirents = mergeDirents(dirents, childDirents)
   console.log({ childDirents })
   return {
     ...state,
-    dirents: mergedDirents,
+    items: mergedDirents,
     dropTargets: [],
   }
 }
 
 const handleDropIntoFile = (state, dirent, index, files) => {
-  const { dirents } = state
-  const parentIndex = getParentStartIndex(dirents, index)
+  const { items } = state
+  const parentIndex = getParentStartIndex(items, index)
   if (parentIndex === -1) {
     return handleDropRoot(state, files)
   }
@@ -43,8 +43,8 @@ const handleDropIntoFile = (state, dirent, index, files) => {
 }
 
 export const handleDropIndex = (state, index, files) => {
-  const { dirents } = state
-  const dirent = dirents[index]
+  const { items } = state
+  const dirent = items[index]
   // TODO if it is a file, drop into the folder of the file
   // TODO if it is a folder, drop into the folder
   // TODO if it is a symlink, read symlink and determine if file can be dropped

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletExplorer/ViewletExplorerHandleDropRoot.js

@@ -28,12 +28,12 @@ const getMergedDirents = async (root, pathSeparator, dirents) => {
 }
 
 const handleDropRootElectron = async (state, files) => {
-  const { root, pathSeparator, dirents } = state
+  const { root, pathSeparator, items } = state
   await copyFilesElectron(root, pathSeparator, files)
-  const mergedDirents = await getMergedDirents(root, pathSeparator, dirents)
+  const mergedDirents = await getMergedDirents(root, pathSeparator, items)
   return {
     ...state,
-    dirents: mergedDirents,
+    items: mergedDirents,
     dropTargets: [],
   }
 }
@@ -47,12 +47,12 @@ const uploadFiles = async (root, pathSeparator, files) => {
 }
 
 const handleDropRootDefault = async (state, files) => {
-  const { root, pathSeparator, dirents } = state
+  const { root, pathSeparator, items } = state
   await uploadFiles(root, pathSeparator, files)
-  const mergedDirents = await getMergedDirents(root, pathSeparator, dirents)
+  const mergedDirents = await getMergedDirents(root, pathSeparator, items)
   return {
     ...state,
-    dirents: mergedDirents,
+    items: mergedDirents,
     dropTargets: [],
   }
 }

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletExplorer/ViewletExplorerShared.js

@@ -5,12 +5,12 @@ import * as DirentType from '../DirentType/DirentType.js'
 import * as IconTheme from '../IconTheme/IconTheme.js'
 
 export const getIndexFromPosition = (state, x, y) => {
-  const { top, itemHeight, dirents } = state
+  const { top, itemHeight, items } = state
   const index = Math.floor((y - top) / itemHeight)
   if (index < 0) {
     return 0
   }
-  if (index >= dirents.length) {
+  if (index >= items.length) {
     return -1
   }
   return index

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletExplorer/ViewletExplorerUpdateRoot.js

@@ -17,10 +17,10 @@ export const updateRoot = async () => {
   if (state2.disposed || state2.root !== state1.root) {
     return state2
   }
-  const newDirents = mergeDirents(state2.dirents, topLevelDirents)
+  const newDirents = mergeDirents(state2.items, topLevelDirents)
   const state3 = {
     ...state2,
-    dirents: newDirents,
+    items: newDirents,
   }
   return state3
 }

package/static/000e502/packages/renderer-worker/src/parts/ViewletExtensions/ViewletExtensions.ipc.js

@@ -0,0 +1,45 @@
+import * as Viewlet from '../Viewlet/Viewlet.js'
+import * as ViewletExtensions from './ViewletExtensions.js'
+import * as LazyCommand from '../LazyCommand/LazyCommand.js'
+
+const Imports = {
+  FocusFirst: () => import('./ViewletExtensionsFocusFirst.js'),
+  FocusIndex: () => import('./ViewletExtensionsFocusIndex.js'),
+  FocusLast: () => import('./ViewletExtensionsFocusLast.js'),
+  FocusNext: () => import('./ViewletExtensionsFocusNext.js'),
+  FocusNextPage: () => import('./ViewletExtensionsFocusNextPage.js'),
+  FocusPrevious: () => import('./ViewletExtensionsFocusPrevious.js'),
+  FocusPreviousPage: () => import('./ViewletExtensionsFocusPreviousPage.js'),
+  HandleClick: () => import('./ViewletExtensionsHandleClick.js'),
+  HandleTouchStart: () => import('./ViewletExtensionsHandleTouchStart.js'),
+  HandleTouchEnd: () => import('./ViewletExtensionsHandleTouchEnd.js'),
+  HandleTouchMove: () => import('./ViewletExtensionsHandleTouchMove.js'),
+}
+
+// prettier-ignore
+export const Commands = {
+  'Extensions.closeSuggest': Viewlet.wrapViewletCommand(ViewletExtensions.name, ViewletExtensions.closeSuggest),
+  'Extensions.focusFirst': LazyCommand.create(ViewletExtensions.name, Imports.FocusFirst, 'focusFirst'),
+  'Extensions.focusIndex': LazyCommand.create(ViewletExtensions.name, Imports.FocusIndex, 'focusIndex'),
+  'Extensions.focusLast': LazyCommand.create(ViewletExtensions.name, Imports.FocusLast, 'focusLast'),
+  'Extensions.focusNext': LazyCommand.create(ViewletExtensions.name, Imports.FocusNext, 'focusNext'),
+  'Extensions.focusNextPage': LazyCommand.create(ViewletExtensions.name, Imports.FocusNextPage, 'focusNextPage'),
+  'Extensions.focusPrevious': LazyCommand.create(ViewletExtensions.name, Imports.FocusPrevious, 'focusPrevious'),
+  'Extensions.focusPreviousPage': LazyCommand.create(Imports.FocusPreviousPage, 'focusPreviousPage'),
+  'Extensions.handleClick': LazyCommand.create(ViewletExtensions.name, Imports.HandleClick, 'handleClick'),
+  'Extensions.handleContextMenu': Viewlet.wrapViewletCommand(ViewletExtensions.name, ViewletExtensions.handleContextMenu),
+  'Extensions.handleInput': Viewlet.wrapViewletCommand(ViewletExtensions.name, ViewletExtensions.handleInput),
+  'Extensions.handleInstall': Viewlet.wrapViewletCommand(ViewletExtensions.name, ViewletExtensions.handleInstall),
+  'Extensions.handleScrollBarClick': Viewlet.wrapViewletCommand(ViewletExtensions.name, ViewletExtensions.handleScrollBarClick),
+  'Extensions.handleScrollBarMove': Viewlet.wrapViewletCommand(ViewletExtensions.name, ViewletExtensions.handleScrollBarMove),
+  'Extensions.handleTouchEnd':LazyCommand.create(ViewletExtensions.name, Imports.HandleTouchEnd, 'handleTouchEnd'),
+  'Extensions.handleTouchMove':LazyCommand.create(ViewletExtensions.name, Imports.HandleTouchMove, 'handleTouchMove'),
+  'Extensions.handleTouchStart': LazyCommand.create(ViewletExtensions.name, Imports.HandleTouchStart, 'handleTouchStart'),
+  'Extensions.handleUninstall': Viewlet.wrapViewletCommand(ViewletExtensions.name, ViewletExtensions.handleUninstall),
+  'Extensions.handleWheel': Viewlet.wrapViewletCommand(ViewletExtensions.name, ViewletExtensions.handleWheel),
+  'Extensions.openSuggest': Viewlet.wrapViewletCommand(ViewletExtensions.name, ViewletExtensions.openSuggest),
+  'Extensions.setDeltaY': Viewlet.wrapViewletCommand(ViewletExtensions.name, ViewletExtensions.setDeltaY),
+  'Extensions.toggleSuggest': Viewlet.wrapViewletCommand(ViewletExtensions.name, ViewletExtensions.toggleSuggest),
+}
+
+export * from './ViewletExtensions.js'

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletExtensions/ViewletExtensions.js

@@ -9,7 +9,6 @@ import * as RendererProcess from '../RendererProcess/RendererProcess.js'
 import {
   getListHeight,
   HEADER_HEIGHT,
-  ITEM_HEIGHT,
   MINIMUM_SLIDER_SIZE,
 } from './ViewletExtensionsShared.js'
 
@@ -55,6 +54,7 @@ export const create = (id, uri, left, top, width, height) => {
     touchOffsetY: 0,
     touchTimeStamp: 0,
     touchDifference: 0,
+    itemHeight: 62,
   }
 }
 
@@ -63,6 +63,7 @@ const getVisible = (state) => {
 }
 
 export const loadContent = async (state) => {
+  const { itemHeight, height } = state
   // TODO just get local extensions on demand (not when query string is already different)
 
   // TODO get installed extensions from extension host
@@ -70,18 +71,19 @@ export const loadContent = async (state) => {
   const extensions = await ExtensionManagement.getAllExtensions()
   const viewObjects = filterExtensions(
     extensions.map(toInstalledViewObject),
-    state.parsedValue
+    state.parsedValue,
+    itemHeight
   )
 
   const listHeight = getListHeight(state)
-  const contentHeight = viewObjects.length * ITEM_HEIGHT
-  const scrollBarHeight = getScrollBarHeight(state.height, contentHeight)
+  const contentHeight = viewObjects.length * itemHeight
+  const scrollBarHeight = getScrollBarHeight(height, contentHeight)
 
   return {
     ...state,
     extensions,
     filteredExtensions: viewObjects,
-    maxLineY: Math.round(listHeight / ITEM_HEIGHT),
+    maxLineY: Math.round(listHeight / itemHeight),
     scrollBarHeight,
   }
 }
@@ -191,7 +193,7 @@ const matchesParsedValue = (extension, parsedValue) => {
   return false
 }
 
-const filterExtensions = (extensions, parsedValue) => {
+const filterExtensions = (extensions, parsedValue, itemHeight) => {
   const filteredExtensions = []
   for (const extension of extensions) {
     if (matchesParsedValue(extension, parsedValue)) {
@@ -202,7 +204,7 @@ const filterExtensions = (extensions, parsedValue) => {
   for (let i = 0; i < filteredExtensions.length; i++) {
     filteredExtensions[i].setSize = filteredExtensions.length
     filteredExtensions[i].posInSet = i + 1
-    filteredExtensions[i].top = i * ITEM_HEIGHT
+    filteredExtensions[i].top = i * itemHeight
   }
   return filteredExtensions
 }
@@ -252,6 +254,7 @@ export const handleInput = async (state, value) => {
   try {
     // TODO make this functional somehow
     state.searchValue = value
+    const { itemHeight } = state
     // TODO cancel ongoing requests
     // TODO handle errors
     const parsedValue = parseValue(value)
@@ -264,7 +267,11 @@ export const handleInput = async (state, value) => {
     if (state.searchValue !== value) {
       return state
     }
-    const filteredExtensions = filterExtensions(extensions, parsedValue)
+    const filteredExtensions = filterExtensions(
+      extensions,
+      parsedValue,
+      itemHeight
+    )
     const displayExtensions = toDisplayExtensions(filteredExtensions)
     return {
       ...state,
@@ -444,9 +451,10 @@ export const toggleSuggest = async (state) => {
 export const hasFunctionalResize = true
 
 export const resize = (state, dimensions) => {
+  const { itemHeight, minLineY } = state
   // TODO should just return new state, render function can take old state and new state and return render commands
   const listHeight = getListHeight(dimensions)
-  const maxLineY = state.minLineY + Math.ceil(listHeight / ITEM_HEIGHT)
+  const maxLineY = minLineY + Math.ceil(listHeight / itemHeight)
   return {
     ...state,
     ...dimensions,
@@ -458,23 +466,18 @@ export const setDeltaY = (state, deltaY) => {
   Assert.object(state)
   Assert.number(deltaY)
   const listHeight = getListHeight(state)
+  const { itemHeight, filteredExtensions } = state
   if (deltaY < 0) {
     deltaY = 0
-  } else if (
-    deltaY >
-    state.filteredExtensions.length * ITEM_HEIGHT - listHeight
-  ) {
-    deltaY = Math.max(
-      state.filteredExtensions.length * ITEM_HEIGHT - listHeight,
-      0
-    )
+  } else if (deltaY > filteredExtensions.length * itemHeight - listHeight) {
+    deltaY = Math.max(filteredExtensions.length * itemHeight - listHeight, 0)
   }
   if (state.deltaY === deltaY) {
     return state
   }
   // TODO when it only moves by one px, extensions don't need to be rerendered, only negative margin
-  const minLineY = Math.floor(deltaY / ITEM_HEIGHT)
-  const maxLineY = minLineY + Math.round(listHeight / ITEM_HEIGHT)
+  const minLineY = Math.floor(deltaY / itemHeight)
+  const maxLineY = minLineY + Math.round(listHeight / itemHeight)
   const negativeMargin = -Math.round(deltaY)
   return {
     ...state,
@@ -571,7 +574,8 @@ const renderHeight = {
     )
   },
   apply(oldState, newState) {
-    const contentHeight = newState.filteredExtensions.length * ITEM_HEIGHT
+    const { itemHeight } = newState
+    const contentHeight = newState.filteredExtensions.length * itemHeight
     return [
       /* Viewlet.send */ 'Viewlet.send',
       /* id */ 'Extensions',

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletExtensions/ViewletExtensionsFocusIndex.js

@@ -1,6 +1,7 @@
-import { getListHeight, ITEM_HEIGHT } from './ViewletExtensionsShared.js'
+import { getListHeight } from './ViewletExtensionsShared.js'
 
 export const focusIndex = (state, index) => {
+  const { itemHeight } = state
   if (index === -1) {
     return {
       ...state,
@@ -11,8 +12,8 @@ export const focusIndex = (state, index) => {
   if (index < state.minLineY + 1) {
     // scroll up
     const minLineY = index
-    const maxLineY = minLineY + Math.ceil(listHeight / ITEM_HEIGHT)
-    const negativeMargin = -minLineY * ITEM_HEIGHT
+    const maxLineY = minLineY + Math.ceil(listHeight / itemHeight)
+    const negativeMargin = -minLineY * itemHeight
     return {
       ...state,
       focusedIndex: index,
@@ -24,9 +25,9 @@ export const focusIndex = (state, index) => {
   if (index >= state.maxLineY - 1) {
     //  scroll down
     const maxLineY = index + 1
-    const minLineY = maxLineY - Math.ceil(listHeight / ITEM_HEIGHT)
+    const minLineY = maxLineY - Math.ceil(listHeight / itemHeight)
     const negativeMargin =
-      -minLineY * ITEM_HEIGHT + (listHeight % ITEM_HEIGHT) - ITEM_HEIGHT
+      -minLineY * itemHeight + (listHeight % itemHeight) - itemHeight
     return {
       ...state,
       focusedIndex: index,

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletExtensions/ViewletExtensionsShared.js

@@ -1,5 +1,3 @@
-export const ITEM_HEIGHT = 62
-
 export const MINIMUM_SLIDER_SIZE = 20
 
 export const HEADER_HEIGHT = 35.94 // TODO improve this

package/static/000e502/packages/renderer-worker/src/parts/ViewletKeyBindings/ViewletKeyBindings.ipc.js

@@ -0,0 +1,10 @@
+import * as ViewletKeyBindings from './ViewletKeyBindings.js'
+import * as Viewlet from '../Viewlet/Viewlet.js'
+
+// prettier-ignore
+export const Commands = {
+  'KeyBindings.handleInput': Viewlet.wrapViewletCommand(ViewletKeyBindings.name, ViewletKeyBindings.handleInput),
+  'KeyBindings.handleWheel': Viewlet.wrapViewletCommand(ViewletKeyBindings.name, ViewletKeyBindings.handleWheel),
+}
+
+export * from './ViewletKeyBindings.js'

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletKeyBindings/ViewletKeyBindingsRender.js

@@ -216,4 +216,21 @@ const renderValue = {
   },
 }
 
-export const render = [renderKeyBindings, renderValue]
+const renderNoResults = {
+  isEqual(oldState, newState) {
+    return (
+      oldState.value === newState.value &&
+      newState.filteredKeyBindings.length === 0
+    )
+  },
+  apply(oldState, newState) {
+    const message =
+      newState.filteredKeyBindings.length === 0 ? 'No Results found' : ''
+    return [
+      /* Viewlet.ariaAnnounce */ 'Viewlet.ariaAnnounce',
+      /* message */ message,
+    ]
+  },
+}
+
+export const render = [renderKeyBindings, renderValue, renderNoResults]

package/static/000e502/packages/renderer-worker/src/parts/ViewletLocations/ViewletLocations.ipc.js

@@ -0,0 +1,13 @@
+import * as Viewlet from '../Viewlet/Viewlet.js'
+import * as ViewletLocations from './ViewletLocations.js'
+
+// prettier-ignore
+export const Commands = {
+  'Locations.focusFirst': Viewlet.wrapViewletCommand(ViewletLocations.name, ViewletLocations.focusFirst),
+  'Locations.focusIndex': Viewlet.wrapViewletCommand(ViewletLocations.name, ViewletLocations.focusIndex),
+  'Locations.focusLast': Viewlet.wrapViewletCommand(ViewletLocations.name, ViewletLocations.focusLast),
+  'Locations.focusNext': Viewlet.wrapViewletCommand(ViewletLocations.name, ViewletLocations.focusNext),
+  'Locations.focusPrevious': Viewlet.wrapViewletCommand(ViewletLocations.name, ViewletLocations.focusPrevious),
+  'Locations.selectCurrent': Viewlet.wrapViewletCommand(ViewletLocations.name, ViewletLocations.selectCurrent),
+  'Locations.selectIndex': Viewlet.wrapViewletCommand(ViewletLocations.name, ViewletLocations.selectIndex),
+}

package/static/000e502/packages/renderer-worker/src/parts/ViewletMain/ViewletMain.ipc.js

@@ -0,0 +1,25 @@
+import * as Viewlet from '../Viewlet/Viewlet.js'
+import * as ViewletMain from './ViewletMain.js'
+
+// prettier-ignore
+export const Commands = {
+  'Main.closeActiveEditor': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.closeActiveEditor),
+  'Main.closeAllEditors': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.closeAllEditors),
+  'Main.closeEditor': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.closeEditor),
+  'Main.closeFocusedTab': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.closeFocusedTab),
+  'Main.closeOthers': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.closeOthers),
+  'Main.closeTabsLeft': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.closeTabsLeft),
+  'Main.closeTabsRight': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.closeTabsRight),
+  'Main.focusFirst': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.focusFirst),
+  'Main.focusLast': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.focusLast),
+  'Main.focusNext': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.focusNext),
+  'Main.focusPrevious': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.focusPrevious),
+  'Main.handleDrop': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.handleDrop),
+  'Main.handleTabClick': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.handleTabClick),
+  'Main.handleTabContextMenu': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.handleTabContextMenu),
+  // 'Main.hydrate': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.hydrate),
+  'Main.openUri': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.openUri),
+  'Main.save': Viewlet.wrapViewletCommand(ViewletMain.name, ViewletMain.save),
+}
+
+export * from './ViewletMain.js'

package/static/{de007b0 → 000e502}/packages/renderer-worker/src/parts/ViewletManager/ViewletManager.js

@@ -59,6 +59,19 @@ const getInstanceSavedState = (savedState, id) => {
   return undefined
 }
 
+const getRenderCommands = (module, oldState, newState) => {
+  if (Array.isArray(module.render)) {
+    const commands = []
+    for (const item of module.render) {
+      if (!item.isEqual(oldState, newState)) {
+        commands.push(item.apply(oldState, newState))
+      }
+    }
+    return commands
+  }
+  return module.render(oldState, newState)
+}
+
 // TODO add lots of unit tests for this
 /**
  *
@@ -119,6 +132,41 @@ export const load = async (viewlet, focus = false, restore = false) => {
       instanceSavedState = getInstanceSavedState(stateToSave, viewlet.id)
     }
     let newState = await module.loadContent(viewletState, instanceSavedState)
+
+    const extraCommands = []
+
+    if (module.getChildren) {
+      const children = module.getChildren(newState)
+      const childModules = await Promise.all(
+        children.map((child) => child.id).map(viewlet.getModule)
+      )
+
+      for (const childModule of childModules) {
+        await RendererProcess.invoke(
+          /* Viewlet.load */ 'Viewlet.loadModule',
+          /* id */ childModule.name
+        )
+        if (childModule.Commands) {
+          for (const [key, value] of Object.entries(childModule.Commands)) {
+            Command.register(key, value)
+          }
+        }
+      }
+
+      for (const childModule of childModules) {
+        const oldState = childModule.create()
+        const newState = await childModule.loadContent(oldState)
+        const childInstance = {
+          state: newState,
+          factory: childModule,
+        }
+        ViewletStates.set(childModule.name, childInstance)
+        const commands = getRenderCommands(childModule, oldState, newState)
+        extraCommands.push(['Viewlet.create', childModule.name])
+        extraCommands.push(...commands)
+        extraCommands.push(['Viewlet.append', viewlet.id, childModule.name])
+      }
+    }
     if (focus && module.focus) {
       newState = await module.focus(newState)
     }
@@ -175,20 +223,12 @@ export const load = async (viewlet, focus = false, restore = false) => {
     }
 
     if (module.hasFunctionalRender) {
-      let commands = []
-      if (Array.isArray(module.render)) {
-        for (const item of module.render) {
-          if (!item.isEqual(viewletState, newState)) {
-            commands.push(item.apply(viewletState, newState))
-          }
-        }
-      } else {
-        commands = module.render(viewletState, newState)
-      }
+      const commands = getRenderCommands(module, viewletState, newState)
       if (viewlet.show === false) {
         const allCommands = [
           ['Viewlet.create', viewlet.id],
           ...commands,
+          ...extraCommands,
           ['Viewlet.show', viewlet.id],
         ]
         if (module.getPosition) {
@@ -203,6 +243,8 @@ export const load = async (viewlet, focus = false, restore = false) => {
         }
         return allCommands
       }
+      // console.log('else', viewlet.id, { commands })
+      commands.push(...extraCommands)
       await RendererProcess.invoke(
         /* Viewlet.sendMultiple */ 'Viewlet.sendMultiple',
         /* commands */ commands
@@ -248,6 +290,9 @@ export const load = async (viewlet, focus = false, restore = false) => {
         const handleUpdate = async () => {
           const instance = ViewletStates.getInstance(viewlet.id)
           const newState = await value(instance.state)
+          if (!newState) {
+            throw new Error('newState must be defined')
+          }
           if (!module.shouldApplyNewState(newState)) {
             console.log('[viewlet manager] return', newState)