@lvce-editor/server 0.0.26 → 0.0.29

package/static/bf7d47a/packages/renderer-process/src/parts/IpcParent/IpcParentWithModuleWorker.js

@@ -0,0 +1,94 @@
+const getDisplayName = (name) => {
+  if (!name) {
+    return '<unknown> worker'
+  }
+  if (name.endsWith('Worker')) {
+    return name.toLowerCase()
+  }
+  return `${name} worker`
+}
+
+const tryToGetActualErrorMessage = async ({ url, name }) => {
+  const displayName = getDisplayName(name)
+  try {
+    await import(url)
+    return `Failed to start ${displayName}: Unknown Error`
+  } catch (error) {
+    if (
+      error &&
+      error instanceof Error &&
+      error.message.startsWith('Failed to fetch dynamically imported module')
+    ) {
+      try {
+        const response = await fetch(url)
+        switch (response.status) {
+          case 404:
+            return `Failed to start ${displayName}: Not found (404)`
+          default:
+            return `Failed to start ${displayName}: Unknown Network Error`
+        }
+      } catch {
+        return `Failed to start ${displayName}: Unknown Network Error`
+      }
+    }
+    return `Failed to start ${displayName}: ${error}`
+  }
+}
+
+const isFirefoxError = (message) => {
+  return [
+    'SyntaxError: import declarations may only appear at top level of a module',
+    'SyntaxError: export declarations may only appear at top level of a module',
+  ].includes(message)
+}
+
+export const create = async ({ url, name }) => {
+  try {
+    const worker = new Worker(url, {
+      type: 'module',
+      name,
+    })
+    await new Promise((resolve, reject) => {
+      const cleanup = () => {
+        worker.onmessage = null
+        worker.onerror = null
+      }
+      const handleFirstMessage = (event) => {
+        cleanup()
+        if (event.data === 'ready') {
+          resolve(undefined)
+        } else {
+          reject(new Error('unexpected first message from renderer worker'))
+        }
+      }
+      const handleFirstError = async (event) => {
+        cleanup()
+        if (isFirefoxError(event.message)) {
+          event.preventDefault()
+          reject(new Error('module workers are not supported in firefox'))
+        } else {
+          const actualErrorMessage = await tryToGetActualErrorMessage({
+            url,
+            name,
+          })
+          reject(new Error(actualErrorMessage))
+        }
+      }
+      worker.onmessage = handleFirstMessage
+      worker.onerror = handleFirstError
+    })
+    return worker
+  } catch (error) {
+    if (
+      error &&
+      error instanceof Error &&
+      error.message === 'module workers are not supported in firefox'
+    ) {
+      const IpcParentWithMessagePort = await import(
+        './IpcParentWithMessagePort.js'
+      )
+      return IpcParentWithMessagePort.create({ url })
+    }
+    throw error
+  }
+}

package/static/bf7d47a/packages/renderer-process/src/parts/IpcParent/IpcParentWithReferencePort.js

@@ -0,0 +1,8 @@
+export const create = async (url) => {
+  const referencePort = await new Promise((resolve) => {
+    globalThis.acceptReferencePort = resolve
+    import(url)
+  })
+  delete globalThis.acceptReferencePort
+  return referencePort
+}

package/static/bf7d47a/packages/renderer-process/src/parts/KeyBindings/KeyBindings.js

@@ -0,0 +1,154 @@
+import * as Context from '../Context/Context.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as Platform from '../Platform/Platform.js'
+
+const RE_ASCII = /[\p{ASCII}]+/u
+
+export const state = {
+  keyBindings: [],
+  modifier: '',
+  modifierTimeout: -1,
+}
+
+const isAscii = (key) => {
+  return RE_ASCII.test(key)
+}
+
+const getIdentifier = (event) => {
+  let identifier = ''
+  if (event.ctrlKey) {
+    identifier += 'ctrl+'
+  }
+  if (event.shiftKey) {
+    identifier += 'shift+'
+  }
+  if (event.altKey) {
+    identifier += 'alt+'
+  }
+  let key = event.key
+  if (key === ' ') {
+    key = 'Space'
+  }
+  if (key.length === 1) {
+    key = key.toLowerCase()
+  }
+  identifier += key
+  return identifier
+}
+
+// TODO store keybindings as json somewhere
+
+// TODO sort keybindings by `when` priority -> focus.editorCompletions: 10, focus.editor:9 etc.
+
+// TODO does it make sense to have all of these configurable?
+// could remove some context logic and have less user configuration when these are default
+// e.g. arrow down focuses next, arrow up always focuses previous item (like in aria spec)
+
+// TODO ui should only have keys -> commands get resolved inside renderer worker
+// TODO should toggle terminal, not only open
+
+const matchesContext = (keybinding) => {
+  if (!keybinding.when) {
+    return true
+  }
+  return Context.get(keybinding.when)
+}
+
+const getMatchingKeyBinding = (identifier) => {
+  // TODO this could be more efficient in O(N) instead of O(2N)
+  const matchesIdentifier = (keyBinding) => {
+    return keyBinding.key === identifier
+  }
+  const matchingKeyBindings = state.keyBindings.filter(matchesIdentifier)
+  const matchingKeyBinding = matchingKeyBindings.find(matchesContext)
+  return matchingKeyBinding
+}
+
+const getModifier = (event) => {
+  switch (event.key) {
+    case 'Control':
+      return 'ctrl'
+    case 'Shift':
+      return 'shift'
+    case 'Alt':
+      return 'alt'
+  }
+  return ''
+}
+
+const clearModifier = () => {
+  if (!state.modifier) {
+    return
+  }
+  if (state.modifierTimeout !== -1) {
+    clearTimeout(state.modifierTimeout)
+    state.modifier = ''
+    state.modifierTimeout = -1
+  }
+}
+
+const handleMatchingKeyBinding = (matchingKeyBinding) => {
+  // TODO execute command directly or -> executeCommand -> keybindings -> executeCommand
+  // better directly
+  // TODO always should be number
+  // when launching keybindings -> map string command to number
+  // TODO should args always be defined? (probably yes -> monomorphism & simpler code since all objects are the same)
+
+  // TODO matchingKeyBinding.command should always be number
+  RendererWorker.send(
+    /* KeyBindings.handleKeyBinding */ 'KeyBindings.handleKeyBinding',
+    /* keyBinding */ matchingKeyBinding
+  )
+}
+
+const handleKeyDown = (event) => {
+  const identifier = getIdentifier(event)
+  const matchingKeyBinding = getMatchingKeyBinding(identifier)
+  if (!matchingKeyBinding) {
+    return
+  }
+  event.preventDefault()
+  handleMatchingKeyBinding(matchingKeyBinding)
+}
+
+const handleKeyUp = (event) => {
+  const modifier = getModifier(event)
+  if (!modifier) {
+    clearModifier()
+    return
+  }
+  if (state.modifier === modifier) {
+    clearModifier()
+    const identifier = `${modifier} ${modifier}`
+    const matchingKeyBinding = getMatchingKeyBinding(identifier)
+    if (matchingKeyBinding) {
+      handleMatchingKeyBinding(matchingKeyBinding)
+    }
+    return
+  }
+
+  state.modifier = modifier
+  // @ts-ignore
+  state.modifierTimeout = setTimeout(clearModifier, 300)
+}
+
+export const hydrate = async (keyBindings) => {
+  // TODO is this the right place for browser context ?
+  // maybe in env file / env service
+  const browser = Platform.getBrowser()
+  Context.set(`browser.${browser}`, true)
+  state.keyBindings = keyBindings
+  window.addEventListener('keydown', handleKeyDown)
+  // TODO only need keyup listener if keybindings include double modifier key (e.g "shift shift")
+  window.addEventListener('keyup', handleKeyUp)
+}
+
+// TODO should be in renderer worker
+export const lookupKeyBinding = (commandId) => {
+  switch (commandId) {
+    case 'scm.acceptInput':
+      return 'Ctrl+Enter'
+    default:
+      return ''
+  }
+}

package/static/bf7d47a/packages/renderer-process/src/parts/Layout/Layout.js

@@ -0,0 +1,261 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+export const state = {
+  $ActivityBar: undefined,
+  $StatusBar: undefined,
+  $TitleBar: undefined,
+  $Main: undefined,
+  $SideBar: undefined,
+  $Panel: undefined,
+  $Workbench: undefined,
+  $SashSideBar: undefined,
+  $SashPanel: undefined,
+}
+
+// TODO when nodes are not visible, they are still kept in memory as detached dom nodes
+// maybe it doesn't matter but maybe they should be garbage collected
+
+export const update = (points) => {
+  const $ActivityBar = state.$ActivityBar
+  const $Main = state.$Main
+  const $TitleBar = state.$TitleBar
+  const $SideBar = state.$SideBar
+  const $StatusBar = state.$StatusBar
+  const $Panel = state.$Panel
+  const $SashSideBar = state.$SashSideBar
+  const $SashPanel = state.$SashPanel
+
+  if (points.activityBarVisible) {
+    $ActivityBar.style.top = `${points.activityBarTop}px`
+    $ActivityBar.style.left = `${points.activityBarLeft}px`
+    $ActivityBar.style.width = `${points.activityBarWidth}px`
+    $ActivityBar.style.height = `${points.activityBarHeight}px`
+    $ActivityBar.style.display = ''
+  } else {
+    $ActivityBar.style.display = 'none'
+  }
+  if (points.mainVisible) {
+    $Main.style.top = `${points.mainTop}px`
+    $Main.style.left = `${points.mainLeft}px`
+    $Main.style.width = `${points.mainWidth}px`
+    $Main.style.height = `${points.mainHeight}px`
+    $Main.style.display = ''
+  } else {
+    $Main.style.display = 'none'
+  }
+  if (points.panelVisible) {
+    $Panel.style.top = `${points.panelTop}px`
+    $Panel.style.left = `${points.panelLeft}px`
+    $Panel.style.width = `${points.panelWidth}px`
+    $Panel.style.height = `${points.panelHeight}px`
+    $Panel.style.display = ''
+
+    $SashPanel.style.top = `${points.panelTop}px`
+    $SashPanel.style.left = `${points.panelLeft}px`
+    $SashPanel.style.width = `${points.panelWidth}px`
+  } else {
+    $Panel.style.display = 'none'
+  }
+  if (points.sideBarVisible) {
+    $SideBar.style.top = `${points.sideBarTop}px`
+    $SideBar.style.left = `${points.sideBarLeft}px`
+    $SideBar.style.width = `${points.sideBarWidth}px`
+    $SideBar.style.height = `${points.sideBarHeight}px`
+    $SideBar.style.display = ''
+
+    $SashSideBar.style.left = `${points.sideBarLeft}px`
+    $SashSideBar.style.top = `${points.sideBarTop}px`
+    $SashSideBar.style.height = `${points.sideBarHeight}px`
+  } else {
+    $SideBar.style.display = 'none'
+  }
+  if (points.statusBarVisible) {
+    $StatusBar.style.top = `${points.statusBarTop}px`
+    $StatusBar.style.left = `${points.statusBarLeft}px`
+    $StatusBar.style.width = `${points.statusBarWidth}px`
+    $StatusBar.style.height = `${points.statusBarHeight}px`
+    $StatusBar.style.display = ''
+  } else {
+    $StatusBar.style.display = 'none'
+  }
+  if (points.titleBarVisible) {
+    $TitleBar.style.top = `${points.titleBarTop}px`
+    $TitleBar.style.left = `${points.titleBarLeft}px`
+    $TitleBar.style.width = `${points.titleBarWidth}px`
+    $TitleBar.style.height = `${points.titleBarHeight}px`
+    $TitleBar.style.display = ''
+  } else {
+    // TODO remove elements from dom instead of hiding them
+    $TitleBar.style.display = 'none'
+  }
+}
+
+// export const get$ActivityBar = () => {
+//   return state.$ActivityBar
+// }
+
+// export const get$SideBar = () => {
+//   return state.$SideBar
+// }
+
+// export const get$Panel = () => {
+//   return state.$Panel
+// }
+
+// export const get$TitleBar = () => {
+//   return state.$TitleBar
+// }
+
+// export const get$Main = () => {
+//   return state.$Main
+// }
+
+const getTitleBarHeight = () => {
+  if (
+    // @ts-ignore
+    navigator.windowControlsOverlay &&
+    // @ts-ignore
+    navigator.windowControlsOverlay.getTitlebarAreaRect
+  ) {
+    // @ts-ignore
+    const titleBarRect = navigator.windowControlsOverlay.getTitlebarAreaRect()
+    return titleBarRect.height
+  }
+  return 0
+}
+
+export const getBounds = () => {
+  return {
+    windowWidth: window.innerWidth,
+    windowHeight: window.innerHeight,
+    titleBarHeight: getTitleBarHeight(),
+  }
+}
+
+const handleResize = (event) => {
+  RendererWorker.send(
+    /* Layout.handleResize */ 'Layout.handleResize',
+    /* bounds */ getBounds()
+  )
+}
+
+const getSashId = ($Target) => {
+  console.log({ $Target })
+  if ($Target.id === 'SashPanel') {
+    return 'Panel'
+  }
+  if ($Target.id === 'SashSideBar') {
+    return 'SideBar'
+  }
+  return ''
+}
+
+const handleSashPointerMove = (event) => {
+  const x = event.clientX
+  const y = event.clientY
+  RendererWorker.send(
+    /* Layout.handleSashPointerMove */ 'Layout.handleSashPointerMove',
+    /* x */ x,
+    /* y */ y
+  )
+}
+
+const handleSashPointerUp = () => {
+  document.body.style.removeProperty('cursor')
+  window.removeEventListener('pointermove', handleSashPointerMove)
+  window.removeEventListener('pointerup', handleSashPointerUp)
+  const $Style = document.getElementById('SashStyle')
+  // @ts-ignore
+  $Style.remove()
+}
+
+const handleSashPointerDown = (event) => {
+  // TODO maybe add a class to body instead?
+  const $Style = document.createElement('style')
+  $Style.id = 'SashStyle'
+  $Style.textContent = `* {
+  cursor: col-resize !important;
+  pointer-events: none;
+}
+
+.SashVertical {
+  pointer-events: all;
+}
+.
+`
+  document.head.append($Style)
+  window.addEventListener('pointermove', handleSashPointerMove)
+  window.addEventListener('pointerup', handleSashPointerUp)
+  const $Target = event.target
+  const id = getSashId($Target)
+  RendererWorker.send(
+    /* Layout.handleSashPointerDown */ 'Layout.handleSashPointerDown',
+    /* id */ id
+  )
+}
+
+export const show = (points) => {
+  const $ActivityBar = document.createElement('div')
+  $ActivityBar.id = 'ActivityBar'
+
+  const $StatusBar = document.createElement('div')
+  $StatusBar.id = 'StatusBar'
+
+  const $TitleBar = document.createElement('div')
+  $TitleBar.id = 'TitleBar'
+
+  const $Main = document.createElement('main')
+  $Main.id = 'Main'
+
+  const $SideBar = document.createElement('div')
+  $SideBar.id = 'SideBar'
+
+  const $Panel = document.createElement('div')
+  $Panel.id = 'Panel'
+
+  // TODO use aria role splitter once supported https://github.com/w3c/aria/issues/1348
+  const $SashSideBar = document.createElement('div')
+  $SashSideBar.className = 'SashVertical'
+  $SashSideBar.id = 'SashSideBar'
+
+  // TODO use aria role splitter once supported https://github.com/w3c/aria/issues/1348
+  const $SashPanel = document.createElement('div')
+  $SashPanel.className = 'SashHorizontal'
+  $SashPanel.id = 'SashPanel'
+
+  const $Workbench = document.createElement('div')
+  $Workbench.id = 'Workbench'
+  $Workbench.append(
+    $TitleBar,
+    $Main,
+    $SideBar,
+    $ActivityBar,
+    $Panel,
+    $StatusBar,
+    $SashSideBar,
+    $SashPanel
+  )
+  // TODO don't like the random side effects here
+  state.$ActivityBar = $ActivityBar
+  state.$Main = $Main
+  state.$Panel = $Panel
+  state.$SideBar = $SideBar
+  state.$StatusBar = $StatusBar
+  state.$TitleBar = $TitleBar
+  state.$Workbench = $Workbench
+  state.$SashPanel = $SashPanel
+  state.$SashSideBar = $SashSideBar
+  update(points)
+  // document.body.role= 'application' // TODO this doesn't seem to work
+  // @ts-ignore
+  $Workbench.role = 'application'
+  document.body.append($Workbench)
+  window.addEventListener('resize', handleResize, { passive: true })
+  $SashSideBar.addEventListener('pointerdown', handleSashPointerDown)
+  $SashPanel.addEventListener('pointerdown', handleSashPointerDown)
+}
+
+export const hide = () => {
+  state.$Workbench.remove()
+  window.removeEventListener('resize', handleResize)
+}

package/static/bf7d47a/packages/renderer-process/src/parts/Location/Location.ipc.js

@@ -0,0 +1,9 @@
+import * as Command from '../Command/Command.js'
+import * as Location from './Location.js'
+
+export const __initialize__ = () => {
+  Command.register('Location.getHref', Location.getHref)
+  Command.register('Location.getPathName', Location.getPathName)
+  Command.register('Location.hydrate', Location.hydrate)
+  Command.register('Location.setPathName', Location.setPathName)
+}

package/static/bf7d47a/packages/renderer-process/src/parts/Location/Location.js

@@ -0,0 +1,26 @@
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+
+export const getPathName = () => {
+  return location.pathname
+}
+
+export const getHref = () => {
+  return location.href
+}
+
+// TODO should do nothing if it is already at this path
+export const setPathName = (pathName) => {
+  const currentPathName = getPathName()
+  if (currentPathName === pathName) {
+    return
+  }
+  history.pushState(null, null, pathName)
+}
+
+const handlePopState = (event) => {
+  RendererWorker.send(/* Workspace.hydrate */ 'Workspace.hydrate')
+}
+
+export const hydrate = () => {
+  addEventListener('popstate', handlePopState)
+}

package/static/bf7d47a/packages/renderer-process/src/parts/MenuItem/MenuItem.js

@@ -0,0 +1,67 @@
+const getLabel = (item) => {
+  if (!item || !item.label) {
+    console.warn('menu item has missing label', item)
+    return 'n/a'
+  }
+  return item.label
+}
+
+export const create$MenuItem = (item) => {
+  const $MenuItem = document.createElement('li')
+  switch (item.flags) {
+    case /* None */ 0:
+      $MenuItem.className = 'MenuItem'
+      // @ts-ignore
+      $MenuItem.role = 'menuitem'
+      $MenuItem.textContent = getLabel(item)
+      $MenuItem.tabIndex = -1
+      break
+    case /* Separator */ 1:
+      $MenuItem.className = 'MenuItemSeparator'
+      // @ts-ignore
+      $MenuItem.role = 'separator'
+      break
+    case /* Checked */ 2:
+      $MenuItem.className = 'MenuItem'
+      // @ts-ignore
+      $MenuItem.role = 'menuitemcheckbox'
+      $MenuItem.ariaChecked = 'true'
+      $MenuItem.textContent = getLabel(item)
+      $MenuItem.tabIndex = -1
+      break
+    case /* UnChecked */ 3:
+      $MenuItem.className = 'MenuItem'
+      // @ts-ignore
+      $MenuItem.role = 'menuitemcheckbox'
+      $MenuItem.ariaChecked = 'false'
+      $MenuItem.textContent = getLabel(item)
+      $MenuItem.tabIndex = -1
+      break
+    case /* SubMenu */ 4:
+      $MenuItem.className = 'MenuItem'
+      // @ts-ignore
+      $MenuItem.role = 'menuitem'
+      $MenuItem.textContent = getLabel(item)
+      $MenuItem.tabIndex = -1
+      $MenuItem.ariaHasPopup = 'true'
+      $MenuItem.ariaExpanded = 'false'
+      break
+    case /* Disabled */ 5:
+      $MenuItem.className = 'MenuItem'
+      // @ts-ignore
+      $MenuItem.role = 'menuitem'
+      $MenuItem.textContent = getLabel(item)
+      $MenuItem.tabIndex = -1
+      $MenuItem.setAttribute('disabled', 'true')
+      break
+    default:
+      $MenuItem.className = 'MenuItem'
+      // @ts-ignore
+      $MenuItem.role = 'menuitem'
+      $MenuItem.textContent = getLabel(item)
+      $MenuItem.tabIndex = -1
+      console.warn('invalid menu item flags:', item)
+      break
+  }
+  return $MenuItem
+}