@lvce-editor/server 0.4.4 → 0.6.0

package/static/fbac85f/packages/renderer-process/src/parts/FileSystemHandle/FileSystemHandle.ipc.js

@@ -0,0 +1,5 @@
+import * as FileSystemHandle from './FileSystemHandle.js'
+
+export const Commands = {
+  'FileSystemHandle.requestPermission': FileSystemHandle.requestPermission,
+}

package/static/fbac85f/packages/renderer-process/src/parts/FileSystemHandle/FileSystemHandle.js

@@ -0,0 +1,3 @@
+export const requestPermission = (handle, options) => {
+  return handle.requestPermission(options)
+}

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

@@ -0,0 +1,31 @@
+/* istanbul ignore file */
+
+export const Methods = {
+  MessagePort: 1,
+  ModuleWorker: 2,
+  ReferencePort: 3,
+}
+
+/**
+ * @type {number}
+ */
+const METHOD_PREFERRED = Methods.ModuleWorker
+
+const getModule = () => {
+  switch (METHOD_PREFERRED) {
+    case Methods.ModuleWorker:
+      return import('./IpcParentWithModuleWorker.js')
+    case Methods.MessagePort:
+      return import('./IpcParentWithMessagePort.js')
+    case Methods.ReferencePort:
+      return import('./IpcParentWithReferencePort.js')
+    default:
+      throw new Error('unknown method')
+  }
+}
+
+export const create = async ({ method, ...options }) => {
+  const module = await getModule()
+  // @ts-ignore
+  return module.create(options)
+}

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

@@ -0,0 +1,155 @@
+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)
+  console.log({ identifier, matchingKeyBinding })
+  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/fbac85f/packages/renderer-process/src/parts/Layout/Layout.js

@@ -0,0 +1,246 @@
+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 { clientX, clientY } = event
+  RendererWorker.send(
+    /* Layout.handleSashPointerMove */ 'Layout.handleSashPointerMove',
+    /* x */ clientX,
+    /* y */ clientY
+  )
+}
+
+const handleSashPointerUp = (event) => {
+  const { target, pointerId } = event
+  target.releasePointerCapture(pointerId)
+  target.removeEventListener('pointermove', handleSashPointerMove)
+  target.removeEventListener('pointerup', handleSashPointerUp)
+}
+
+const handleSashPointerDown = (event) => {
+  const { target, pointerId } = event
+  target.setPointerCapture(pointerId)
+  target.addEventListener('pointermove', handleSashPointerMove)
+  target.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/fbac85f/packages/renderer-process/src/parts/MenuEntryId/MenuEntryId.js

@@ -0,0 +1,35 @@
+// TODO this enum should only be present in renderer worker
+export const ActivityBar = 1
+
+export const Edit = 2
+
+export const Editor = 3
+
+export const Explorer = 4
+export const File = 5
+
+export const Go = 6
+
+export const Help = 7
+
+export const ManageExtension = 8
+
+export const OpenRecent = 9
+
+export const Run = 10
+
+export const Selection = 11
+
+export const Settings = 12
+
+export const Tab = 13
+
+export const Terminal = 14
+
+export const TitleBar = 15
+
+export const View = 16
+
+export const ActivityBarAdditionalViews = 17
+
+export const Search = 18

package/static/fbac85f/packages/renderer-process/src/parts/Module/Module.js

@@ -0,0 +1,64 @@
+import * as ModuleId from '../ModuleId/ModuleId.js'
+
+export const load = (moduleId) => {
+  switch (moduleId) {
+    case ModuleId.Audio:
+      return import('../Audio/Audio.ipc.js')
+    case ModuleId.ClipBoard:
+      return import('../ClipBoard/ClipBoard.ipc.js')
+    case ModuleId.Css:
+      return import('../Css/Css.ipc.js')
+    case ModuleId.Developer:
+      return import('../Developer/Developer.ipc.js')
+    case ModuleId.Dialog:
+      return import('../Dialog/Dialog.ipc.js')
+    case ModuleId.Download:
+      return import('../Download/Download.ipc.js')
+    case ModuleId.EditorError:
+      return import('../EditorError/EditorError.ipc.js')
+    case ModuleId.EditorHover:
+      return import('../EditorHover/EditorHover.ipc.js')
+    case ModuleId.EditorRename:
+      return import('../EditorRename/EditorRename.ipc.js')
+    case ModuleId.Eval:
+      return import('../Eval/Eval.ipc.js')
+    case ModuleId.FilePicker:
+      return import('../FilePicker/FilePicker.ipc.js')
+    case ModuleId.FileSystemHandle:
+      return import('../FileSystemHandle/FileSystemHandle.ipc.js')
+    case ModuleId.FindWidget:
+      return import('../FindWidget/FindWidget.ipc.js')
+    case ModuleId.ImagePreview:
+      return import('../ImagePreview/ImagePreview.ipc.js')
+    case ModuleId.InitData:
+      return import('../InitData/InitData.ipc.js')
+    case ModuleId.KeyBindings:
+      return import('../KeyBindings/KeyBindings.ipc.js')
+    case ModuleId.Layout:
+      return import('../Layout/Layout.ipc.js')
+    case ModuleId.Location:
+      return import('../Location/Location.ipc.js')
+    case ModuleId.Meta:
+      return import('../Meta/Meta.ipc.js')
+    case ModuleId.Notification:
+      return import('../Notification/Notification.ipc.js')
+    case ModuleId.Menu:
+      return import('../OldMenu/Menu.ipc.js')
+    case ModuleId.Open:
+      return import('../Open/Open.ipc.js')
+    case ModuleId.Performance:
+      return import('../Performance/Performance.ipc.js')
+    case ModuleId.ServiceWorker:
+      return import('../ServiceWorker/ServiceWorker.ipc.js')
+    case ModuleId.TestFrameWork:
+      return import('../TestFrameWork/TestFrameWork.ipc.js')
+    case ModuleId.Viewlet:
+      return import('../Viewlet/Viewlet.ipc.js')
+    case ModuleId.WebStorage:
+      return import('../WebStorage/WebStorage.ipc.js')
+    case ModuleId.Window:
+      return import('../Window/Window.ipc.js')
+    default:
+      throw new Error(`module ${moduleId} not found`)
+  }
+}

package/static/fbac85f/packages/renderer-process/src/parts/ModuleId/ModuleId.js

@@ -0,0 +1,34 @@
+export const Audio = 1
+export const ClipBoard = 2
+export const Css = 3
+export const Developer = 4
+export const Dialog = 5
+export const Download = 6
+export const EditorController = 7
+export const EditorError = 8
+export const EditorHover = 9
+export const EditorRename = 10
+export const FindWidget = 11
+export const ImagePreview = 12
+export const InitData = 13
+export const KeyBindings = 14
+export const Layout = 15
+export const Location = 16
+export const Main = 17
+export const Menu = 18
+export const Meta = 19
+export const Notification = 20
+export const Open = 21
+export const Panel = 22
+export const ServiceWorker = 23
+export const Test = 24
+export const TestFrameWork = 25
+export const Viewlet = 26
+export const ViewService = 27
+export const WebStorage = 28
+export const Window = 29
+export const Workbench = 30
+export const Performance = 31
+export const Eval = 32
+export const FilePicker = 33
+export const FileSystemHandle = 34