@lvce-editor/server 0.0.28 → 0.0.31

package/static/0e4d46a/packages/renderer-process/src/parts/Renderer/RendererTree.js

@@ -0,0 +1,41 @@
+export const renderTemplate = () => {
+  const label = document.createElement('div')
+  label.className = 'TreeItemLabel'
+  const root = document.createElement('div')
+  root.className = 'ListItem TreeItem'
+  // @ts-ignore
+  root.role = 'treeitem'
+  root.append(label)
+  return {
+    root,
+    label,
+  }
+}
+
+export const renderElement = (template, data, index) => {
+  template.label.textContent = data.name
+  template.root.setAttribute('aria-level', data.level)
+  // TODO renderer should do the index and id thing
+  // template.root.id = `treeitem-${index}`
+  template.root.dataset.index = index
+  template.root.title = data.absolutePath
+  switch (data.type) {
+    case /* file */ 'file':
+      template.root.removeAttribute('aria-expanded')
+      break
+    case /* expandedFolder */ 'directory-expanded':
+      template.root.setAttribute('aria-expanded', 'true')
+      break
+    case /* collapsedFolder */ 'directory':
+      template.root.setAttribute('aria-expanded', 'false')
+      break
+    default:
+      break
+  }
+}
+
+export const renderWrapper = (wrapper) => {
+  wrapper.role = 'tree'
+  wrapper.ariaLabel = 'Files Explorer'
+  wrapper.setAttribute('aria-multiselectable', 'true')
+}

package/static/0e4d46a/packages/renderer-process/src/parts/RendererWorker/RendererWorker.js

@@ -0,0 +1,187 @@
+import * as Callback from '../Callback/Callback.js'
+import * as Command from '../Command/Command.js'
+import { JsonRpcError } from '../Errors/JsonRpcError.js'
+import * as IpcParent from '../IpcParent/IpcParent.js'
+import * as Platform from '../Platform/Platform.js'
+
+// const URL_RENDERER_WORKER =
+// '/packages/renderer-worker/distmin/rendererWorkerMain-0ead0bed.js'
+
+export const state = {
+  /**
+   * @type {any}
+   */
+  ipc: undefined,
+}
+
+class NonError extends Error {
+  name = 'NonError'
+
+  constructor(message) {
+    super(message)
+  }
+}
+
+// ensureError based on https://github.com/sindresorhus/ensure-error/blob/main/index.js (License MIT)
+const ensureError = (input) => {
+  if (!(input instanceof Error)) {
+    return new NonError(input)
+  }
+  return input
+}
+
+const serializeError = (error) => {
+  error = ensureError(error)
+  return {
+    stack: error.stack,
+    message: error.message,
+  }
+}
+
+const handleMessageFromRendererWorker = async (event) => {
+  const message = event.data
+  if ('id' in message) {
+    if ('method' in message) {
+      try {
+        const result = await Command.execute(message.method, ...message.params)
+        state.ipc.send({
+          jsonrpc: '2.0',
+          id: message.id,
+          result,
+        })
+        return
+      } catch (error) {
+        const serializedError = serializeError(error)
+        state.ipc.send({
+          jsonrpc: '2.0',
+          id: message.id,
+          error: {
+            message: serializedError.message,
+            stack: serializedError.stack,
+          },
+        })
+      }
+      return
+    }
+    Callback.resolve(message.id, message)
+    return
+  }
+  throw new JsonRpcError('unexpected message from renderer process')
+}
+
+const getIpc = async () => {
+  const rendererWorker = await IpcParent.create({
+    method: IpcParent.Methods.ModuleWorker,
+    url: Platform.getRendererWorkerUrl(),
+    name: 'Renderer Worker',
+  })
+  return {
+    send(message) {
+      rendererWorker.postMessage(message)
+    },
+    sendAndTransfer(message, transferables) {
+      rendererWorker.postMessage(message, transferables)
+    },
+    get onmessage() {
+      return rendererWorker.onmessage
+    },
+    set onmessage(listener) {
+      rendererWorker.onmessage = listener
+    },
+  }
+}
+
+export const hydrate = async (config) => {
+  const ipc = await getIpc()
+
+  // setup electron message port
+  if (Platform.isElectron()) {
+    await new Promise((resolve, reject) => {
+      const handleIpcMessage = (event) => {
+        if (event.data !== 'get-port') {
+          reject(new Error('unexpected message from renderer worker'))
+          return
+        }
+        const handleMessageFromWindow = (event) => {
+          const port = event.ports[0]
+          ipc.sendAndTransfer('port', [port])
+          resolve()
+        }
+
+        // @ts-ignore
+        window.addEventListener('message', handleMessageFromWindow, {
+          once: true,
+        })
+        // @ts-ignore
+        window.myApi.ipcConnect()
+      }
+      ipc.onmessage = handleIpcMessage
+    })
+  }
+  ipc.onmessage = handleMessageFromRendererWorker
+  state.ipc = ipc
+}
+
+// TODO needed?
+export const dispose = () => {
+  if (state.rendererWorker) {
+    state.rendererWorker.terminate()
+  }
+}
+
+export const send = (method, ...params) => {
+  state.ipc.send({
+    jsonrpc: '2.0',
+    method,
+    params,
+  })
+}
+
+const deserializeError = (serializedError) => {
+  const error = new Error()
+  if (serializedError && serializedError.message) {
+    error.message = serializedError.message
+  }
+  if (serializedError && serializedError.stack) {
+    error.stack = serializedError.stack
+  }
+  return error
+}
+
+const combineStacks = (upperStack, lowerStack) => {
+  const indexNewLine = lowerStack.indexOf('\n')
+  return upperStack + lowerStack.slice(indexNewLine)
+}
+
+class RendererWorkerError extends Error {
+  constructor(serializedError) {
+    const deserializedError = deserializeError(serializedError)
+    super(deserializedError.message)
+    if (this.stack) {
+      this.stack = combineStacks(deserializedError.stack, this.stack)
+    }
+  }
+}
+
+export const invoke = async (method, ...params) => {
+  const responseMessage = await new Promise((resolve, reject) => {
+    const callbackId = Callback.register(resolve, reject)
+    state.ipc.send({
+      jsonrpc: '2.0',
+      method,
+      params,
+      id: callbackId,
+    })
+  })
+  if ('error' in responseMessage) {
+    throw new RendererWorkerError(responseMessage.error)
+  }
+  if ('result' in responseMessage) {
+    return responseMessage.result
+  }
+  throw new JsonRpcError('unexpected message from renderer process')
+}
+
+export const sendAndTransfer = (message, transfer) => {
+  state.ipc.sendAndTransfer(message, transfer)
+}

package/static/0e4d46a/packages/renderer-process/src/parts/Terminal/Terminal.js

@@ -0,0 +1,18 @@
+import { createTerminal } from '../../../static/js/termterm.js'
+
+export const create = ({ $Element, handleInput }) => {
+  const state = {
+    terminal: createTerminal($Element, { handleInput }),
+  }
+  return state
+}
+
+export const close = () => {}
+
+// export const
+
+export const write = (state, text) => {
+  state.terminal.write(text)
+}
+
+export const wrapTerminalCommand = (id) => {}

package/static/0e4d46a/packages/renderer-process/src/parts/TestFrameWork/ConditionErrors.js

@@ -0,0 +1,52 @@
+import * as QuerySelector from './QuerySelector.js'
+
+export const toBeVisible = (locator) => {
+  return `expected selector to be visible ${locator._selector}`
+}
+
+export const toHaveText = (locator, { text }) => {
+  const [element] = QuerySelector.querySelector(locator._selector)
+  if (!element) {
+    return `expected selector ${locator._selector} to have text "${text}" element was not found`
+  }
+  return `expected selector ${locator._selector} to have text "${text}" but was "${element.textContent}"`
+}
+
+export const toHaveAttribute = (locator, { key, value }) => {
+  const [element] = QuerySelector.querySelector(locator._selector)
+  if (!element) {
+    return `expected ${locator._selector} to have attribute ${key} ${value} but element was not found`
+  }
+  const actual = element.getAttribute(key)
+  return `expected ${locator._selector} to have attribute ${key} ${value} but was ${actual}`
+}
+
+export const toHaveCount = (locator, { count }) => {
+  return `expected ${locator._selector} to have count ${count}`
+}
+
+export const toBeFocused = (locator) => {
+  return `expected ${locator._selector} to be focused`
+}
+
+export const toHaveClass = (locator, { className }) => {
+  const [element] = QuerySelector.querySelector(locator._selector)
+  if (!element) {
+    return `expected ${locator._selector} to have class ${className} but element was not found`
+  }
+  return `expected ${locator._selector} to have class ${className}`
+}
+
+export const toBeHidden = (locator) => {
+  return `expected ${locator._selector} to be hidden`
+}
+
+export const toHaveCss = (locator, { key, value }) => {
+  const [element] = QuerySelector.querySelector(locator._selector)
+  if (!element) {
+    return `expected ${locator._selector} to have css ${key} ${value}`
+  }
+  const style = getComputedStyle(element)
+  const actual = style[key]
+  return `expected ${locator._selector} to have css ${key} ${value} but was ${actual}`
+}

package/static/0e4d46a/packages/renderer-process/src/parts/TitleBarMenuBar/TitleBarMenuBar.js

@@ -0,0 +1,314 @@
+import * as Menu from '../OldMenu/Menu.js'
+import * as RendererWorker from '../RendererWorker/RendererWorker.js'
+import * as Widget from '../Widget/Widget.js'
+import * as Assert from '../Assert/Assert.js'
+
+// TODO set proper tabIndex 0 to focused item https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html
+
+// TODO screenreader doesn't read top level label
+// when menu is open,
+// first item is selected,
+// right is clicked it just reads
+// "Expanded" instead of "Selection Expanded"
+
+// TODO sometimes screenreader reads too much (e.g. "File, expanded, opens menu, expanded")
+
+// TODO don't focus on separators
+
+// TODO don't focus on hover
+// only focus on hover when it has already focus or the menu has focus
+
+// TODO title bar menu bar is very inefficient:
+
+// before: 5 times recalculate style
+// 1.37ms Recalculate style
+// 83us Update Layer tree
+// 0.34ms paint
+// 0.79ms composite layer
+// 0.23ms Hit test
+// 1.42ms Recalculate style
+// 1.44ms Recalculate style
+// 2.08ms Recalculate style
+// 0.44ms Recalculate style
+// 0.52ms Layout
+// 0.16ms Update Layer Tree
+// 48us hit test
+// 16us Update Layer Tree
+// 0.36ms paint
+// 0.33ms composite layer
+
+// now: 2 recalculate styles
+// 0.43ms recalculate style
+// 0.53ms recalculate style
+// 0.19ms layout
+// 0.16ms update layer tree
+// 30us hit test
+// 17us update layer tree
+// 0.17ms paint
+// 0.19ms composite layers
+
+const create$TopLevelEntry = (item) => {
+  const $TitleBarTopLevelEntry = document.createElement('li')
+  $TitleBarTopLevelEntry.className = 'TitleBarTopLevelEntry'
+  $TitleBarTopLevelEntry.tabIndex = -1
+  $TitleBarTopLevelEntry.ariaHasPopup = 'true'
+  $TitleBarTopLevelEntry.ariaExpanded = 'false'
+  // @ts-ignore
+  $TitleBarTopLevelEntry.role = 'menuitem'
+  if (item.keyboardShortCut) {
+    $TitleBarTopLevelEntry.ariaKeyShortcuts = item.keyboardShortCut
+  }
+  $TitleBarTopLevelEntry.textContent = item.name
+  $TitleBarTopLevelEntry.dataset.id = item.id
+  $TitleBarTopLevelEntry.id = `MenuItem-${item.id}`
+  return $TitleBarTopLevelEntry
+}
+
+export const getMenuEntryBounds = (state, index) => {
+  const $MenuEntry = state.$TitleBarMenu.children[index]
+  const rect = $MenuEntry.getBoundingClientRect()
+  return {
+    left: rect.left,
+    bottom: rect.bottom,
+  }
+}
+
+const getNodeIndex = ($Node) => {
+  let index = 0
+  while (($Node = $Node.previousElementSibling)) {
+    index++
+  }
+  return index
+}
+
+const getIndex = ($Target) => {
+  switch ($Target.className) {
+    case 'TitleBarTopLevelEntry':
+      return getNodeIndex($Target)
+    default:
+      return -1
+  }
+}
+
+const handleClick = (event) => {
+  const $Target = event.target
+  const index = getIndex($Target)
+  if (index === -1) {
+    return
+  }
+  // event.preventDefault()
+  RendererWorker.send(
+    /* TitleBarMenu.toggleIndex */ 'TitleBarMenuBar.toggleIndex',
+    /* index */ index
+  )
+}
+
+export const focusIndex = (state, unFocusIndex, index) => {
+  Assert.object(state)
+  Assert.number(unFocusIndex)
+  Assert.number(focusIndex)
+  console.log('FOCUS ONE')
+  console.log({ unFocusIndex, index })
+  const $TitleBarMenu = state.$TitleBarMenu
+  if (unFocusIndex !== -1) {
+    $TitleBarMenu.children[unFocusIndex].ariaExpanded = 'false'
+    $TitleBarMenu.children[unFocusIndex].removeAttribute('aria-owns')
+  }
+  $TitleBarMenu.children[index].focus()
+}
+
+const handleMouseEnter = (event) => {
+  const $Target = event.target
+  const index = getIndex($Target)
+  if (index === -1) {
+    return
+  }
+  const enterX = event.clientX
+  const enterY = event.clientY
+  RendererWorker.send(
+    /* TitleBarMenu.focusIndex */ 'TitleBarMenuBar.focusIndex',
+    /* index */ index,
+    /* enterX */ enterX,
+    /* enterY */ enterY
+  )
+}
+
+// TODO the focus variable is confusing: false means keep focus in menubar, true means focus the menu
+export const openMenu = (
+  state,
+  unFocusIndex,
+  index,
+  level,
+  menuItems,
+  menuFocusedIndex,
+  focus,
+  x,
+  y,
+  width,
+  height
+) => {
+  Assert.object(state)
+  Assert.number(unFocusIndex)
+  Assert.number(index)
+  Assert.number(level)
+  Assert.array(menuItems)
+  Assert.number(menuFocusedIndex)
+  Assert.boolean(focus)
+  Assert.number(x)
+  Assert.number(y)
+  Assert.number(width)
+  Assert.number(height)
+  // TODO this code is very unclean
+  state.$TitleBarMenu.addEventListener('mouseenter', handleMouseEnter, {
+    capture: true,
+  })
+  if (unFocusIndex !== -1) {
+    state.$TitleBarMenu.children[unFocusIndex].ariaExpanded = 'false'
+    state.$TitleBarMenu.children[unFocusIndex].removeAttribute('aria-owns')
+  }
+  state.$TitleBarMenu.children[index].ariaExpanded = 'true'
+  const $$Menus = Menu.state.$$Menus
+  Menu.state.$$Menus = []
+  Menu.showControlled({
+    x,
+    y,
+    width,
+    height,
+    items: menuItems,
+    handleKeyDown,
+    handleFocusOut,
+    $Parent: state.$TitleBarMenu.children[index],
+    level,
+  })
+  if (menuFocusedIndex !== -1) {
+    Menu.focusIndex(0, -1, menuFocusedIndex)
+  }
+  for (const $Menu of $$Menus) {
+    Widget.remove($Menu)
+  }
+}
+
+// TODO there need to be two variants of closeMenu: one just closes menu, another close menu and focuses top level entry
+export const closeMenu = (state, unFocusIndex, index) => {
+  if (unFocusIndex !== -1) {
+    state.$TitleBarMenu.children[unFocusIndex].ariaExpanded = 'false'
+    state.$TitleBarMenu.children[unFocusIndex].removeAttribute('aria-owns')
+  }
+  if (index !== -1) {
+    state.$TitleBarMenu.children[index].focus()
+  }
+  Menu.hide(/* restoreFocus */ false)
+  state.$TitleBarMenu.removeEventListener('mouseenter', handleMouseEnter, {
+    capture: true,
+  })
+}
+
+// TODO should only have the one listener in KeyBindings.js
+const handleKeyDown = (event) => {
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      event.stopPropagation()
+      RendererWorker.send(
+        /* TitleBarMenu.handleKeyArrowDown */ 'TitleBarMenu.handleKeyArrowDown'
+      )
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      event.stopPropagation()
+      RendererWorker.send(
+        /* TitleBarMenu.handleKeyArrowUp */ 'TitleBarMenu.handleKeyArrowUp'
+      )
+      break
+    case 'ArrowRight':
+      console.log('arrow right')
+      event.preventDefault()
+      event.stopPropagation()
+      RendererWorker.send(
+        /* TitleBarMenu.handleKeyArrowRight */ 'TitleBarMenu.handleKeyArrowRight'
+      )
+      break
+    case 'ArrowLeft':
+      event.preventDefault()
+      event.stopPropagation()
+      RendererWorker.send(
+        /* TitleBarMenu.handleKeyArrowLeft */ 'TitleBarMenu.handleKeyArrowLeft'
+      )
+      break
+    case 'Enter':
+      event.preventDefault()
+      event.stopPropagation()
+      RendererWorker.send(
+        /* TitleBarMenu.handleKeyEnter */ 'TitleBarMenu.handleKeyEnter'
+      )
+      break
+    case ' ':
+      event.preventDefault()
+      event.stopPropagation()
+      RendererWorker.send(
+        /* TitleBarMenu.handleKeySpace */ 'TitleBarMenu.handleKeySpace'
+      )
+      break
+    case 'Home':
+    case 'PageUp':
+      event.preventDefault()
+      event.stopPropagation()
+      RendererWorker.send(
+        /* TitleBarMenu.handleKeyHome */ 'TitleBarMenu.handleKeyHome'
+      )
+      break
+    case 'End':
+    case 'PageDown':
+      event.preventDefault()
+      event.stopPropagation()
+      RendererWorker.send(
+        /* TitleBarMenu.handleKeyEnd */ 'TitleBarMenu.handleKeyEnd'
+      )
+      break
+    case 'Escape':
+      event.preventDefault()
+      event.stopPropagation()
+      RendererWorker.send(
+        /* TitleBarMenu.handleKeyEscape */ 'TitleBarMenu.handleKeyEscape'
+      )
+      break
+    default:
+      break
+  }
+}
+
+const isInsideTitleBarMenu = ($Element) => {
+  return (
+    $Element.classList.contains('MenuItem') ||
+    $Element.classList.contains('Menu')
+  )
+}
+
+const handleFocusOut = (event) => {
+  const $ActiveElement = event.relatedTarget
+  if ($ActiveElement && isInsideTitleBarMenu($ActiveElement)) {
+    console.log('RETURN')
+    return
+  }
+  RendererWorker.send(
+    /* TitleBarMenu.closeMenu */ 'TitleBarMenuBar.closeMenu',
+    /* keepFocus */ false
+  )
+}
+
+export const create = () => {
+  const $TitleBarMenu = document.createElement('ul')
+  $TitleBarMenu.id = 'TitleBarMenu'
+  // @ts-ignore
+  $TitleBarMenu.role = 'menubar'
+  $TitleBarMenu.onkeydown = handleKeyDown
+  // TODO could have one mousedown listener on titlebar that delegates to titlebarMenu if necessary
+  $TitleBarMenu.onmousedown = handleClick
+  $TitleBarMenu.addEventListener('focusout', handleFocusOut)
+  return $TitleBarMenu
+}
+
+export const setEntries = (state, titleBarEntries) => {
+  const $TitleBarMenu = state.$TitleBarMenu
+  $TitleBarMenu.append(...titleBarEntries.map(create$TopLevelEntry))
+}