@lvce-editor/server 0.0.28 → 0.0.31

package/static/f9b8874/packages/renderer-process/src/parts/OldMenu/Menu.js

@@ -1,333 +0,0 @@
-import * as FindIndex from '../../shared/findIndex.js'
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as Widget from '../Widget/Widget.js'
-import * as MenuItem from '../MenuItem/MenuItem.js'
-import * as BackDrop from '../BackDrop/BackDrop.js'
-import * as Focus from '../Focus/Focus.js'
-
-// TODO when pressing tab -> focus next element in tab order and close menu
-
-// TODO menu and contextmenu should have own keybinding logic
-// seems not possible to do with just one keybinding listener
-
-// TODO similar to context menu, show sub menu entries
-// there can be multiple instances (parent -> child -> child) submenus
-
-// TODO using .style.top, .style.left causes chrome devtools to show many layout shift -> maybe use transform instead
-
-// TODO when cycling through items, recalculate style is much slower
-// than in vscode (1.49ms vs 0.33ms)
-// paint is also faster in vscode (0.32ms vs 0.14ms)
-
-// TODO focus on menu is not announced to screenreader
-
-// TODO recalculate style and paint is slow when cycling through items:
-// 0.59ms recalculate style
-// 36us update layer tree
-// 0.35ms paint
-// 0.20ms composite layer
-
-// const contextMenuWidth = 150
-// const contextMenuHeight = 150 + /* padding */ 8 * 4
-
-// TODO keyboard handling
-
-export const state = {
-  handleKeyDown(event) {},
-  handleFocusOut(event) {},
-  $$Menus: [],
-  anchorX: 0,
-  anchorY: 0,
-  anchorTime: -1,
-  $BackDrop: undefined,
-}
-
-const getLevel = ($Menu) => {
-  return state.$$Menus.indexOf($Menu)
-}
-
-const handleMouseDown = (event) => {
-  const $Target = event.target
-  const $Menu = $Target.closest('.Menu')
-  const index = FindIndex.findIndex($Menu, $Target)
-  if (index === -1) {
-    console.log('index is negative one')
-    return
-  }
-  event.preventDefault()
-  const level = getLevel($Menu)
-  RendererWorker.send(
-    /* Menu.handleClick */ 'Menu.selectIndex',
-    /* level */ level,
-    /* index */ index
-  )
-}
-
-// const handleKeyDown = (event) => {
-//   console.log({ key: event.key })
-//   switch (event.key) {
-//     case 'ArrowUp':
-//       RendererWorker.send( /* Menu.focusPrevious */ 7405)
-//       break
-//     case 'ArrowLeft':
-//       // TODO collapse menu maybe
-//       break
-//     case 'ArrowDown':
-//       RendererWorker.send( /* Menu.focusNext */ 7404)
-//       break
-//     case 'ArrowRight':
-//       // TODO expand sub menu maybe
-//       break
-//     case 'Home':
-//       RendererWorker.send( /* Menu.focusFirst */ 7406)
-//       break
-//     case 'End':
-//       RendererWorker.send( /* Menu.focusLast */ 7407)
-//       break
-//     default:
-//       break
-//   }
-// }
-
-const MOUSE_LOCS_TRACKED = 3
-
-/**
- *
- * @param {MouseEvent} event
- */
-const handleMouseEnter = (event) => {
-  const $Target = event.target
-  // @ts-ignore
-  const $Menu = $Target.closest('.Menu')
-  const x = event.clientX
-  const y = event.clientY
-  const timeStamp = event.timeStamp
-
-  const index = FindIndex.findIndex($Menu, $Target)
-  if (index === -1) {
-    return
-  }
-  const level = getLevel($Menu)
-  RendererWorker.send(
-    /* Menu.handleMouseEnter */ 'Menu.handleMouseEnter',
-    /* level */ level,
-    /* index */ index,
-    /* x */ x,
-    /* y */ y,
-    /* timeStamp */ timeStamp
-  )
-}
-
-const handleMouseMove = (event) => {
-  // const x = event.clientX
-  // const y = event.clientY
-  // console.log('move', { x, y })
-}
-
-const handleMouseLeave = (event) => {
-  // const x = event.clientX
-  // const y = event.clientY
-  // console.log('leave', { x, y })
-}
-
-// const handleBlur = (event) => {}
-const handleKeyDown = (event) => {
-  state.handleKeyDown(event)
-}
-
-const handleFocusOut = (event) => {
-  state.handleFocusOut(event)
-}
-
-const create$Menu = () => {
-  // TODO set aria label on menu (e.g. File, Edit, Selection)
-  const $Menu = document.createElement('ul')
-  $Menu.className = 'Menu'
-  $Menu.setAttribute('role', 'menu')
-  $Menu.tabIndex = -1
-  // $ContextMenu.onmousedown = contextMenuHandleMouseDown
-  // TODO mousedown vs click? (click is usually better but mousedown is faster, why wait 100ms?)
-  $Menu.addEventListener('mousedown', handleMouseDown)
-  $Menu.addEventListener('mouseenter', handleMouseEnter, {
-    capture: true,
-  })
-  $Menu.addEventListener('mouseleave', handleMouseLeave, {
-    capture: true,
-  })
-  $Menu.addEventListener('mousemove', handleMouseMove, {
-    passive: true,
-  })
-  $Menu.onkeydown = handleKeyDown
-  $Menu.addEventListener('focusout', handleFocusOut)
-  $Menu.oncontextmenu = handleContextMenu
-  // $ContextMenu.onfocus = handleFocus
-  // $ContextMenu.onblur = handleBlur
-  return $Menu
-}
-
-export const focusIndex = (level, oldFocusedIndex, newFocusedIndex) => {
-  const $Menu = state.$$Menus[level]
-  if (oldFocusedIndex !== -1) {
-    $Menu.children[oldFocusedIndex].classList.remove('Focused')
-  }
-  if (newFocusedIndex !== -1) {
-    $Menu.children[newFocusedIndex].classList.add('Focused')
-    $Menu.children[newFocusedIndex].focus()
-  }
-}
-
-// TODO replace function that recycles menu dom nodes
-
-const handleBackDropMouseDown = () => {
-  RendererWorker.send(/* Menu.hide */ 'Menu.hide')
-}
-
-const handleContextMenu = (event) => {
-  event.preventDefault()
-}
-
-export const showMenu = (
-  x,
-  y,
-  width,
-  height,
-  items,
-  level,
-  parentIndex = -1,
-  mouseBlocking = false
-) => {
-  if (mouseBlocking) {
-    const $BackDrop = BackDrop.create$BackDrop()
-    $BackDrop.onmousedown = handleBackDropMouseDown
-    $BackDrop.oncontextmenu = handleContextMenu
-    state.$BackDrop = $BackDrop
-    Widget.append($BackDrop)
-  }
-
-  const $Menu = create$Menu()
-  $Menu.append(...items.map(MenuItem.create$MenuItem))
-  $Menu.style.left = `${x}px`
-  $Menu.style.top = `${y}px`
-  $Menu.id = `Menu-${level}`
-
-  if (parentIndex !== -1) {
-    const $ParentMenu = state.$$Menus[level - 1]
-    const $ParentMenuItem = $ParentMenu.children[parentIndex]
-    $ParentMenuItem.ariaExpanded = 'true'
-    $ParentMenuItem.setAttribute('aria-owns', $Menu.id)
-  }
-
-  state.$$Menus.push($Menu)
-  Widget.append($Menu)
-
-  if (level === 0) {
-    Focus.focus($Menu, 'menu')
-  }
-}
-
-export const showContextMenu = (x, y, width, height, level, items) => {
-  for (const $Menu of state.$$Menus) {
-    Widget.remove($Menu)
-  }
-  state.$$Menus = []
-  while (state.$$Menus.length > 0) {
-    state.$$Menus[0].remove()
-  }
-  const $Menu = create$Menu()
-  $Menu.append(...items.map(MenuItem.create$MenuItem))
-  $Menu.style.left = `${x}px`
-  $Menu.style.top = `${y}px`
-  $Menu.id = `Menu-${level}`
-  Widget.append($Menu)
-  state.$$Menus.push($Menu)
-  // TODO create backdrop
-}
-
-export const closeSubMenu = () => {
-  const $SubMenu = state.$$Menus.pop()
-  const $ParentMenu = state.$$Menus.at(-1)
-  Widget.remove($SubMenu)
-}
-
-export const hideSubMenu = (level) => {
-  const $$ChildMenus = state.$$Menus.slice(level)
-  for (const $ChildMenu of $$ChildMenus) {
-    Widget.remove($ChildMenu)
-  }
-}
-
-// export const showSubMenu = (level, items, parentIndex) => {
-//   const $$ChildMenus = state.$$Menus.slice(level)
-//   for (const $ChildMenu of $$ChildMenus) {
-//     Widget.remove($ChildMenu)
-//   }
-//   state.$$Menus = state.$$Menus.slice(0, level)
-//   const $ParentMenu = state.$$Menus[level - 1]
-//   const $ParentMenuItem = $ParentMenu.children[parentIndex]
-//   const rect = $ParentMenuItem.getBoundingClientRect()
-//   const x = rect.right
-//   const y = rect.top
-//   showMenu(x, y, items, level)
-//   // TODO remove aria-owns when sub-menu is closed
-//   $ParentMenuItem.setAttribute('aria-owns', 'Menu')
-// }
-
-// TODO implement focusIndex like this
-// const focusIndex2=(id, index)=>{
-//   const $Menu = state.menus[id]
-//   $Menu.children[index].focus()
-// }
-
-// TODO support nested menus / submenus
-export const showControlled = ({
-  x,
-  y,
-  items,
-  handleKeyDown,
-  handleFocusOut,
-  $Parent,
-  level,
-  width,
-  height,
-}) => {
-  showMenu(x, y, width, height, items, level)
-  // TODO menu should not necessarily know about parent (titleBarMenuBar)
-  // it should be the other way around
-  state.$Parent = $Parent
-  state.handleFocusOut = handleFocusOut
-  state.handleKeyDown = handleKeyDown
-  if ($Parent) {
-    // state.$Menu.ariaLabel=''
-    // state.$Menu.ariaLabelledBy  =$Parent.id
-    $Parent.setAttribute('aria-owns', 'Menu')
-  } else {
-    // state.$Menu.removeAttribute('aria-labelledby')
-  }
-  // Context.setFocus('menu') // TODO overlapping focus: titleBarMenuBar has focus (kinda) but also menu at the same time
-}
-
-// TODO have function to show submenu
-
-export const hide = (restoreFocus = true) => {
-  for (const $Menu of state.$$Menus) {
-    Widget.remove($Menu)
-  }
-  state.$$Menus = []
-  if (state.$BackDrop) {
-    Widget.remove(state.$BackDrop)
-    state.$BackDrop = undefined
-  }
-  // TODO focus previous item
-  if (restoreFocus) {
-    Focus.focusPrevious()
-  }
-}
-
-export const contains = ($Element) => {
-  for (const $Menu of state.$$Menus) {
-    if ($Menu.contains($Element)) {
-      return true
-    }
-  }
-  return false
-}

package/static/f9b8874/packages/renderer-process/src/parts/OldMenu/Menu2.js

@@ -1,121 +0,0 @@
-import * as FindIndex from '../../shared/findIndex.js'
-import * as RendererWorker from '../RendererWorker/RendererWorker.js'
-import * as Widget from '../Widget/Widget.js'
-
-export const state = {
-  $$Menus: [],
-}
-
-const create$MenuItem = (item) => {
-  const $MenuItem = document.createElement('li')
-  switch (item.flags) {
-    case /* None */ 0:
-      $MenuItem.className = 'MenuItem'
-      $MenuItem.setAttribute('role', 'menuitem')
-      $MenuItem.textContent = item.label
-      $MenuItem.tabIndex = -1
-      break
-    case /* Separator */ 1:
-      $MenuItem.className = 'MenuItemSeparator'
-      $MenuItem.setAttribute('role', 'separator')
-      break
-    case /* Checked */ 2:
-      $MenuItem.className = 'MenuItem'
-      $MenuItem.setAttribute('role', 'menuitemcheckbox')
-      $MenuItem.ariaChecked = 'true'
-      $MenuItem.textContent = item.label
-      $MenuItem.tabIndex = -1
-      break
-    case /* UnChecked */ 3:
-      $MenuItem.className = 'MenuItem'
-      $MenuItem.setAttribute('role', 'menuitemcheckbox')
-      $MenuItem.ariaChecked = 'false'
-      $MenuItem.textContent = item.label
-      $MenuItem.tabIndex = -1
-      break
-    case /* SubMenu */ 4:
-      $MenuItem.className = 'MenuItem'
-      $MenuItem.setAttribute('role', 'menuitem')
-      $MenuItem.textContent = item.label
-      $MenuItem.tabIndex = -1
-      $MenuItem.ariaHasPopup = 'true'
-      $MenuItem.ariaExpanded = 'false'
-      break
-    case /* Disabled */ 5:
-      $MenuItem.className = 'MenuItem'
-      $MenuItem.setAttribute('role', 'menuitem')
-      $MenuItem.textContent = item.label
-      $MenuItem.tabIndex = -1
-      $MenuItem.setAttribute('disabled', 'true')
-      break
-    default:
-      $MenuItem.className = 'MenuItem'
-      $MenuItem.setAttribute('role', 'menuitem')
-      $MenuItem.textContent = item.label
-      $MenuItem.tabIndex = -1
-      console.warn(`invalid menu item flags: "${item.flags}"`)
-      break
-  }
-  return $MenuItem
-}
-
-const handleMouseDown = (event) => {
-  const $Target = event.target
-  const $Menu = $Target.closest('.Menu')
-  const index = FindIndex.findIndex($Menu, $Target)
-  if (index === -1) {
-    return
-  }
-  const menuIndex = state.$$Menus.indexOf($Menu)
-  RendererWorker.send(
-    /* Menu.handleClick */ 'Menu.selectIndex',
-    /* menuIndex */ menuIndex,
-    /* index */ index
-  )
-}
-
-const handleMouseEnter = (event) => {
-  const $Target = event.target
-  const $Menu = $Target.closest('.Menu')
-  const index = FindIndex.findIndex($Menu, $Target)
-  if (index === -1) {
-    return
-  }
-  const level = state.$$Menus.indexOf($Menu)
-  RendererWorker.send(
-    /* Menu.handleMouseEnter */ 'Menu.handleMouseEnter',
-    /* level */ level,
-    /* index */ index
-  )
-}
-
-/**
- *
- * @param {number} x
- * @param {number} y
- * @param {number} level
- * @param {any[]} items
- */
-export const show = (x, y, level, items) => {
-  // TODO set aria label on menu (e.g. File, Edit, Selection)
-  const $Menu = document.createElement('ul')
-  $Menu.className = 'Menu'
-  $Menu.setAttribute('role', 'menu')
-  $Menu.tabIndex = -1
-  $Menu.addEventListener('mousedown', handleMouseDown)
-  $Menu.addEventListener('mouseenter', handleMouseEnter, {
-    capture: true,
-  })
-  $Menu.style.left = `${x}px`
-  $Menu.style.top = `${y}px`
-  $Menu.dataset.id = `menu-${level}`
-  $Menu.append(...items.map(create$MenuItem))
-  state.$$Menus.push($Menu)
-}
-
-export const closeUntil = (untilIndex) => {
-  while (state.$$Menus.length > untilIndex) {
-    const $Menu = state.$$Menus.pop()
-    Widget.remove($Menu)
-  }
-}

package/static/f9b8874/packages/renderer-process/src/parts/Platform/Platform.js

@@ -1,134 +0,0 @@
-/* istanbul ignore file */
-
-// TODO this should always be completely tree shaken out during build
-
-/**
- * @returns {'electron'|'remote'|'web'}
- */
-const getPlatform = () => {
-  // @ts-ignore
-  if (typeof 'remote' !== 'undefined') {
-    // @ts-ignore
-    return 'remote'
-  }
-  if (typeof process !== 'undefined' && process.env.NODE_ENV === 'test') {
-    return 'remote'
-  }
-  // @ts-ignore
-  const userAgentData = navigator.userAgentData
-  // TODO this is probably a bad check but electron doesn't deliver anything and
-  // this will be tree shaken out anyway during build
-  if (userAgentData && userAgentData.brands.length === 0) {
-    return 'electron'
-  }
-  return 'remote'
-}
-
-export const platform = getPlatform()
-
-// TODO treeshake this function out when targeting electron
-
-export const state = {
-  cachedIsMobileOrTablet: undefined,
-  isMobileOrTablet() {
-    // @ts-ignore
-    const userAgentData = navigator.userAgentData
-    if (userAgentData && userAgentData.mobile) {
-      return true
-    }
-    // copied from https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
-    let check = false
-    ;(function (a) {
-      if (
-        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
-          a
-        ) ||
-        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[23]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
-          a.slice(0, 4)
-        )
-      ) {
-        check = true
-      }
-      // @ts-ignore
-    })(navigator.userAgent || navigator.vendor || window.opera)
-    return check
-  },
-  getAssetDir() {
-    // @ts-ignore
-    if (typeof '/f9b8874' !== 'undefined') {
-      // @ts-ignore
-      return '/f9b8874'
-    }
-    if (platform === 'electron') {
-      return '../../../../..'
-    }
-    return ''
-  },
-  supportsHtml5Dialog() {
-    const $Dialog = document.createElement('dialog')
-    // @ts-ignore
-    return typeof $Dialog.showModal === 'function'
-  },
-  isElectron() {
-    return (
-      // @ts-ignore
-      window.myApi &&
-      // @ts-ignore
-      window.myApi.ipcConnect &&
-      // @ts-ignore
-      typeof window.myApi.ipcConnect === 'function'
-    )
-  },
-}
-
-export const isMobileOrTablet = () => {
-  return state.isMobileOrTablet()
-}
-
-// TODO if necessary support more browser detection
-export const getBrowser = () => {
-  if (platform === 'electron') {
-    return 'electron'
-  }
-  // @ts-ignore
-  const userAgentData = navigator.userAgentData
-  if (userAgentData) {
-    for (const brand of userAgentData.brands) {
-      const actualBrand = brand.brand.toLowerCase()
-      switch (actualBrand) {
-        case 'firefox':
-          return 'firefox'
-        case 'chromium':
-          return 'chromium'
-        default:
-          break
-      }
-    }
-  }
-  const userAgent = navigator.userAgent.toLowerCase()
-  if (userAgent.includes('firefox')) {
-    return 'firefox'
-  }
-  if (userAgent.includes('Electron')) {
-    return 'electron'
-  }
-  return 'chromium'
-}
-
-export const getAssetDir = () => {
-  return state.getAssetDir()
-}
-
-export const supportsHtml5Dialog = () => {
-  return state.supportsHtml5Dialog()
-}
-
-export const isElectron = () => {
-  return state.isElectron()
-}
-
-export const getRendererWorkerUrl = () => {
-  const assetDir = getAssetDir()
-  const urlRendererWorker = `${assetDir}/packages/renderer-worker/src/rendererWorkerMain.js`
-  return urlRendererWorker
-}

package/static/f9b8874/packages/renderer-process/src/parts/Renderer/RendererQuickPick.js

@@ -1,29 +0,0 @@
-export const renderTemplate = () => {
-  const label = document.createElement('div')
-  label.className = 'QuickPickItemLabel'
-  const description = document.createElement('div')
-  description.className = 'QuickPickItemDescription'
-  const root = document.createElement('li')
-  root.className = 'ListItem QuickPickItem'
-  root.setAttribute('role', 'option')
-  root.append(label, description)
-  return {
-    root,
-    label,
-    description,
-  }
-}
-
-export const renderElement = (template, data, index) => {
-  template.label.textContent = data.label
-  template.description.textContent = data.description || '~/sample-folder'
-  template.root.id = `item-${index}`
-  for (const key of Object.keys(template.root.dataset)) {
-    delete template.root.dataset[key]
-  }
-  template.root.dataset.index = index
-  for (const [key, value] of Object.entries(data.dataset || {})) {
-    template.root.dataset[key] = value
-  }
-  // template.root.dataset = data.dataset
-}

package/static/f9b8874/packages/renderer-process/src/parts/Renderer/RendererSearchResult.js

@@ -1,18 +0,0 @@
-export const renderTemplate = () => {
-  const label = document.createElement('div')
-  label.className = 'SearchResultLabel'
-  const root = document.createElement('div')
-  root.className = 'ListItem SearchResults'
-  root.setAttribute('role', 'option')
-  root.append(label)
-  return {
-    root,
-    label,
-  }
-}
-
-export const renderElement = (template, data, index) => {
-  template.label.textContent = data.text
-  template.root.id = `item-${index}`
-  template.root.dataset.index = index
-}

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

@@ -1,40 +0,0 @@
-export const renderTemplate = () => {
-  const label = document.createElement('div')
-  label.className = 'TreeItemLabel'
-  const root = document.createElement('div')
-  root.className = 'ListItem TreeItem'
-  root.setAttribute('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.setAttribute('role', 'tree')
-  wrapper.ariaLabel = 'Files Explorer'
-  wrapper.setAttribute('aria-multiselectable', 'true')
-}