@lvce-editor/virtual-dom 2.18.0 → 3.1.0

package/dist/index.js

@@ -65,12 +65,13 @@ const Span = 8;
 const Table = 9;
 const TBody = 10;
 const Td = 11;
-const Text = 12;
+const Text$1 = 12;
 const Th = 13;
 const THead = 14;
 const Tr = 15;
 const I = 16;
 const Img = 17;
+const Root = 0;
 const Ins = 20;
 const Del = 21;
 const H2 = 22;
@@ -95,6 +96,7 @@ const Ol = 49;
 const P = 50;
 const Pre = 51;
 const A = 53;
+const Abbr = 54;
 const Br = 55;
 const Cite = 56;
 const Data = 57;
@@ -109,7 +111,68 @@ const Code = 65;
 const Label = 66;
 const Dt = 67;
 
-const getElementTag = type => {
+const VirtualDomElements = {
+    __proto__: null,
+    A,
+    Abbr,
+    Article,
+    Aside,
+    Audio,
+    Br,
+    Button,
+    Cite,
+    Code,
+    Col,
+    ColGroup,
+    Data,
+    Dd,
+    Del,
+    Div,
+    Dl,
+    Dt,
+    Figcaption,
+    Figure,
+    Footer,
+    H1,
+    H2,
+    H3,
+    H4,
+    H5,
+    H6,
+    Header,
+    Hr,
+    I,
+    Img,
+    Input,
+    Ins,
+    Kbd,
+    Label,
+    Li,
+    Nav,
+    Ol,
+    Option,
+    P,
+    Pre,
+    Root,
+    Search,
+    Section,
+    Select,
+    Span,
+    TBody,
+    THead,
+    Table,
+    Td,
+    Text: Text$1,
+    TextArea,
+    Tfoot,
+    Th,
+    Time,
+    Tr,
+    Ul,
+    Video
+};
+
+const getElementTag$1 = type => {
   switch (type) {
     case Audio:
       return Audio$1;
@@ -224,6 +287,15 @@ const getElementTag = type => {
   }
 };
 
+const ElementTagMap = {
+    __proto__: null,
+    getElementTag: getElementTag$1
+};
+
+const {
+  getElementTag
+} = ElementTagMap;
+
 const getEventListenerOptions = (eventName, value) => {
   if (value.passive) {
     return {
@@ -453,6 +525,9 @@ const setProps = ($Element, props, eventMap, newEventMap) => {
   }
 };
 
+const {
+  Text} = VirtualDomElements;
+
 const renderDomTextNode = element => {
   return document.createTextNode(element.text);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/virtual-dom",
-  "version": "2.18.0",
+  "version": "3.1.0",
   "main": "dist/index.js",
   "type": "module",
   "keywords": [],

package/src/index.ts

@@ -1 +0,0 @@
-export * from './parts/Main/Main.ts'

package/src/parts/AddPatch/AddPatch.ts

@@ -1,6 +0,0 @@
-import type { VirtualDomNode } from '../VirtualDomNode/VirtualDomNode.ts'
-
-export interface AddPatch {
-  readonly type: 6
-  readonly nodes: readonly VirtualDomNode[]
-}

package/src/parts/ApplyDragInfoMaybe/ApplyDragInfoMaybe.ts

@@ -1,20 +0,0 @@
-import { getComponentUid } from '../ComponentUid/ComponentUid.ts'
-import { getDragInfo } from '../DragInfo/DragInfo.ts'
-import { setDragImage } from '../SetDragImage/SetDragImage.ts'
-
-export const applyDragInfoMaybe = (event: any): void => {
-  const { target, dataTransfer } = event
-  if (dataTransfer) {
-    const uid = getComponentUid(target)
-    const dragInfo = getDragInfo(uid)
-    if (!dragInfo) {
-      return
-    }
-    for (const item of dragInfo) {
-      dataTransfer.setData(item.type, item.data)
-    }
-    if (dragInfo.label) {
-      setDragImage(dataTransfer, dragInfo.label)
-    }
-  }
-}

package/src/parts/ApplyPatch/ApplyPatch.ts

@@ -1,41 +0,0 @@
-import type { Patch } from '../Patch/Patch.ts'
-import * as PatchFunctions from '../PatchFunctions/PatchFunctions.ts'
-import * as PatchType from '../PatchType/PatchType.ts'
-
-export const applyPatch = ($Element: Node, patches: readonly Patch[]): void => {
-  let $Current = $Element
-  for (const patch of patches) {
-    switch (patch.type) {
-      case PatchType.SetAttribute:
-        PatchFunctions.setAttribute(
-          $Current as HTMLElement,
-          patch.key,
-          patch.value,
-        )
-        break
-      case PatchType.RemoveAttribute:
-        PatchFunctions.removeAttribute($Current as HTMLElement, patch.key)
-        break
-      case PatchType.SetText:
-        PatchFunctions.setText($Current as Text, patch.value)
-        break
-      case PatchType.RemoveChild:
-        PatchFunctions.removeChild($Current as HTMLElement, patch.index)
-        break
-      case PatchType.Add:
-        PatchFunctions.add($Current as HTMLElement, patch.nodes)
-        break
-      case PatchType.NavigateSibling:
-        $Current = ($Current.parentNode as HTMLElement).childNodes[patch.index]
-        break
-      case PatchType.NavigateChild:
-        $Current = ($Current as HTMLElement).childNodes[patch.index]
-        break
-      case PatchType.NavigateParent:
-        $Current = $Current.parentNode as HTMLElement
-        break
-      default:
-        break
-    }
-  }
-}

package/src/parts/AttachEvent/AttachEvent.ts

@@ -1,38 +0,0 @@
-import * as GetEventListenerOptions from '../GetEventListenerOptions/GetEventListenerOptions.ts'
-import * as GetWrappedListener from '../GetWrappedListener/GetWrappedListener.ts'
-
-const getOptions = (fn: any): any => {
-  if (fn.passive) {
-    return {
-      passive: true,
-    }
-  }
-  return undefined
-}
-
-export const attachEvent = (
-  $Node: HTMLElement,
-  eventMap: any,
-  key: string,
-  value: string,
-  newEventMap?: any,
-): void => {
-  if (newEventMap && newEventMap[value]) {
-    const fn = newEventMap[value]
-    const options: any = getOptions(fn)
-    // TODO support event listener options
-    $Node.addEventListener(key, newEventMap[value], options)
-    return
-  }
-  const listener = eventMap[value]
-  if (!listener) {
-    console.warn('listener not found', value)
-    return
-  }
-  const options = GetEventListenerOptions.getEventListenerOptions(key, value)
-  const wrapped = GetWrappedListener.getWrappedListener(
-    listener,
-    eventMap.returnValue,
-  )
-  $Node.addEventListener(key, wrapped, options)
-}

package/src/parts/AttributePatch/AttributePatch.ts

@@ -1,5 +0,0 @@
-export interface AttributePatch {
-  readonly type: 3
-  readonly key: string
-  readonly value: any
-}

package/src/parts/ClearNode/ClearNode.ts

@@ -1,3 +0,0 @@
-export const clearNode = ($Node: HTMLElement): void => {
-  $Node.textContent = ''
-}

package/src/parts/ComponentUid/ComponentUid.ts

@@ -1,19 +0,0 @@
-import { getUidTarget } from '../GetUidTarget/GetUidTarget.ts'
-import { uidSymbol } from '../UidSymbol/UidSymbol.ts'
-
-export const setComponentUid = ($Element, uid): void => {
-  $Element[uidSymbol] = uid
-}
-
-export const getComponentUid = ($Element): number => {
-  const $Target = getUidTarget($Element)
-  if (!$Target) {
-    return 0
-  }
-  return $Target[uidSymbol]
-}
-
-export const getComponentUidFromEvent = (event): number => {
-  const { target, currentTarget } = event
-  return getComponentUid(currentTarget || target)
-}

package/src/parts/CreateEventListenerFunction/CreateEventListenerFunction.ts

@@ -1,45 +0,0 @@
-import { applyDragInfoMaybe } from '../ApplyDragInfoMaybe/ApplyDragInfoMaybe.ts'
-import * as ComponentUid from '../ComponentUid/ComponentUid.ts'
-import * as DomEventType from '../DomEventType/DomEventType.ts'
-import * as EventState from '../EventState/EventState.ts'
-import * as GetEventListenerArgs from '../GetEventListenerArgs/GetEventListenerArgs.ts'
-import * as IpcState from '../IpcState/IpcState.ts'
-import * as NameAnonymousFunction from '../NameAnonymousFunction/NameAnonymousFunction.ts'
-import { preventEventsMaybe } from '../PreventEventsMaybe/PreventEventsMaybe.ts'
-
-const applyPointerTrackMaybe = (info, map, event): void => {
-  const { trackPointerEvents } = info
-  if (!trackPointerEvents) {
-    return
-  }
-  const { target, pointerId } = event
-  target.setPointerCapture(pointerId)
-  const [pointerMoveKey, pointerUpKey] = trackPointerEvents
-  target.addEventListener(DomEventType.PointerMove, map[pointerMoveKey])
-  // TODO use pointerlost event instead
-  target.addEventListener(DomEventType.PointerUp, map[pointerUpKey])
-}
-
-export const createFn = (info, map): any => {
-  const fn = (event): void => {
-    if (EventState.enabled()) {
-      return
-    }
-    const uid = ComponentUid.getComponentUidFromEvent(event)
-    const args = GetEventListenerArgs.getEventListenerArgs(info.params, event)
-    preventEventsMaybe(info, event)
-    applyDragInfoMaybe(event)
-    applyPointerTrackMaybe(info, map, event)
-    if (args.length === 0) {
-      return
-    }
-    const ipc = IpcState.getIpc()
-    ipc.send('Viewlet.executeViewletCommand', uid, ...args)
-  }
-  NameAnonymousFunction.nameAnonymousFunction(fn, info.name)
-  if (info.passive) {
-    // TODO avoid mutating function property, maybe return an object with function and options
-    fn.passive = true
-  }
-  return fn
-}

package/src/parts/DomEventType/DomEventType.ts

@@ -1,2 +0,0 @@
-export const PointerMove = 'pointermove'
-export const PointerUp = 'pointerup'

package/src/parts/DragInfo/DragInfo.ts

@@ -1,13 +0,0 @@
-const dragInfos = Object.create(null)
-
-export const setDragInfo = (id: string | number, data: any): void => {
-  dragInfos[id] = data
-}
-
-export const getDragInfo = (id: string | number): any => {
-  return dragInfos[id]
-}
-
-export const removeDragInfo = (id: string | number): void => {
-  delete dragInfos[id]
-}

package/src/parts/ElementTagMap/ElementTagMap.ts

@@ -1,117 +0,0 @@
-import * as ElementTag from '../ElementTags/ElementTags.ts'
-import * as VirtualDomElements from '../VirtualDomElements/VirtualDomElements.ts'
-
-export const getElementTag = (type: number): string => {
-  switch (type) {
-    case VirtualDomElements.Audio:
-      return ElementTag.Audio
-    case VirtualDomElements.H1:
-      return ElementTag.H1
-    case VirtualDomElements.H2:
-      return ElementTag.H2
-    case VirtualDomElements.H3:
-      return ElementTag.H3
-    case VirtualDomElements.H4:
-      return ElementTag.H4
-    case VirtualDomElements.H5:
-      return ElementTag.H5
-    case VirtualDomElements.H6:
-      return ElementTag.H6
-    case VirtualDomElements.Div:
-      return ElementTag.Div
-    case VirtualDomElements.Kbd:
-      return ElementTag.Kbd
-    case VirtualDomElements.Table:
-      return ElementTag.Table
-    case VirtualDomElements.TBody:
-      return ElementTag.TBody
-    case VirtualDomElements.Th:
-      return ElementTag.Th
-    case VirtualDomElements.Td:
-      return ElementTag.Td
-    case VirtualDomElements.THead:
-      return ElementTag.THead
-    case VirtualDomElements.Tr:
-      return ElementTag.Tr
-    case VirtualDomElements.Input:
-      return ElementTag.Input
-    case VirtualDomElements.ColGroup:
-      return ElementTag.ColGroup
-    case VirtualDomElements.Col:
-      return ElementTag.Col
-    case VirtualDomElements.Button:
-      return ElementTag.Button
-    case VirtualDomElements.Span:
-      return ElementTag.Span
-    case VirtualDomElements.I:
-      return ElementTag.I
-    case VirtualDomElements.Img:
-      return ElementTag.Img
-    case VirtualDomElements.Ins:
-      return ElementTag.Ins
-    case VirtualDomElements.Del:
-      return ElementTag.Del
-    case VirtualDomElements.Article:
-      return ElementTag.Article
-    case VirtualDomElements.Aside:
-      return ElementTag.Aside
-    case VirtualDomElements.Footer:
-      return ElementTag.Footer
-    case VirtualDomElements.Header:
-      return ElementTag.Header
-    case VirtualDomElements.Nav:
-      return ElementTag.Nav
-    case VirtualDomElements.Section:
-      return ElementTag.Section
-    case VirtualDomElements.Search:
-      return ElementTag.Search
-    case VirtualDomElements.Dd:
-      return ElementTag.Dd
-    case VirtualDomElements.Dl:
-      return ElementTag.Dl
-    case VirtualDomElements.Figcaption:
-      return ElementTag.Figcaption
-    case VirtualDomElements.Figure:
-      return ElementTag.Figure
-    case VirtualDomElements.Hr:
-      return ElementTag.Hr
-    case VirtualDomElements.Li:
-      return ElementTag.Li
-    case VirtualDomElements.Ol:
-      return ElementTag.Ol
-    case VirtualDomElements.P:
-      return ElementTag.P
-    case VirtualDomElements.Pre:
-      return ElementTag.Pre
-    case VirtualDomElements.A:
-      return ElementTag.A
-    case VirtualDomElements.Br:
-      return ElementTag.Br
-    case VirtualDomElements.Cite:
-      return ElementTag.Cite
-    case VirtualDomElements.Data:
-      return ElementTag.Data
-    case VirtualDomElements.Time:
-      return ElementTag.Time
-    case VirtualDomElements.Tfoot:
-      return ElementTag.Tfoot
-    case VirtualDomElements.Ul:
-      return ElementTag.Ul
-    case VirtualDomElements.Video:
-      return ElementTag.Video
-    case VirtualDomElements.TextArea:
-      return ElementTag.TextArea
-    case VirtualDomElements.Select:
-      return ElementTag.Select
-    case VirtualDomElements.Option:
-      return ElementTag.Option
-    case VirtualDomElements.Code:
-      return ElementTag.Code
-    case VirtualDomElements.Label:
-      return ElementTag.Label
-    case VirtualDomElements.Dt:
-      return ElementTag.Dt
-    default:
-      throw new Error(`element tag not found ${type}`)
-  }
-}

package/src/parts/ElementTags/ElementTags.ts

@@ -1,55 +0,0 @@
-export const Audio = 'audio'
-export const Button = 'button'
-export const Col = 'col'
-export const ColGroup = 'colgroup'
-export const Del = 'del'
-export const Div = 'div'
-export const H1 = 'h1'
-export const H2 = 'h2'
-export const H3 = 'h3'
-export const H4 = 'h4'
-export const H5 = 'h5'
-export const H6 = 'h6'
-export const I = 'i'
-export const Img = 'img'
-export const Input = 'input'
-export const Ins = 'ins'
-export const Kbd = 'kbd'
-export const Span = 'span'
-export const Table = 'table'
-export const TBody = 'tbody'
-export const Td = 'td'
-export const Th = 'th'
-export const THead = 'thead'
-export const Tr = 'tr'
-export const Article = 'article'
-export const Aside = 'aside'
-export const Footer = 'footer'
-export const Header = 'header'
-export const Nav = 'nav'
-export const Section = 'section'
-export const Search = 'search'
-export const Dd = 'dd'
-export const Dl = 'dl'
-export const Figcaption = 'figcaption'
-export const Figure = 'figure'
-export const Hr = 'hr'
-export const Li = 'li'
-export const Ol = 'ol'
-export const P = 'p'
-export const Pre = 'pre'
-export const A = 'a'
-export const Abbr = 'abbr'
-export const Br = 'br'
-export const Cite = 'cite'
-export const Data = 'data'
-export const Time = 'time'
-export const Tfoot = 'tfoot'
-export const Ul = 'ul'
-export const Video = 'video'
-export const TextArea = 'textarea'
-export const Select = 'select'
-export const Option = 'option'
-export const Code = 'code'
-export const Label = 'label'
-export const Dt = 'dt'

package/src/parts/EventState/EventState.ts

@@ -1,13 +0,0 @@
-let ignore = false
-
-export const startIgnore = (): void => {
-  ignore = true
-}
-
-export const stopIgnore = (): void => {
-  ignore = false
-}
-
-export const enabled = (): boolean => {
-  return ignore
-}

package/src/parts/FileHandles/FileHandles.ts

@@ -1,28 +0,0 @@
-import * as Id from '../Id/Id.ts'
-
-const state: Record<number, Promise<FileSystemHandle>> = Object.create(null)
-
-export const acquire = (id: number): Promise<FileSystemHandle> => {
-  const promise = state[id]
-  delete state[id]
-  return promise
-}
-
-export const getFileHandles = async (
-  ids: readonly number[],
-): Promise<readonly FileSystemHandle[]> => {
-  const promises = ids.map((id) => acquire(id))
-  const handles = await Promise.all(promises)
-  return handles
-}
-
-export const add = (promise: Promise<FileSystemHandle>): number => {
-  const id = Id.create()
-  state[id] = promise
-  return id
-}
-
-export const addFileHandle = (fileHandle: FileSystemHandle): number => {
-  const promise = Promise.resolve(fileHandle)
-  return add(promise)
-}

package/src/parts/GetActiveElementInside/GetActiveElementInside.ts

@@ -1,15 +0,0 @@
-export const getActiveElementInside = (
-  $Viewlet: HTMLElement | undefined,
-): HTMLElement | undefined => {
-  if (!$Viewlet) {
-    return undefined
-  }
-  const $ActiveElement = document.activeElement as HTMLElement
-  if (!$ActiveElement) {
-    return undefined
-  }
-  if (!$Viewlet.contains($ActiveElement)) {
-    return undefined
-  }
-  return $ActiveElement
-}

package/src/parts/GetEventListenerArg/GetEventListenerArg.ts

@@ -1,69 +0,0 @@
-import * as FileHandles from '../FileHandles/FileHandles.ts'
-
-const handleDataTransferFiles = (event: any): readonly number[] => {
-  const items = [...event.dataTransfer.items]
-  const promises = items.map((item) => item.getAsFileSystemHandle())
-  const ids = promises.map((promise) => FileHandles.add(promise))
-  return ids
-}
-
-export const getEventListenerArg = (param: string, event: any): any => {
-  switch (param) {
-    case 'event.dataTransfer.files2':
-      return handleDataTransferFiles(event)
-    case 'event.clientX':
-      return event.clientX
-    case 'event.x':
-      return event.x
-    case 'event.clientY':
-      return event.clientY
-    case 'event.y':
-      return event.y
-    case 'event.button':
-      return event.button
-    case 'event.target.value':
-      return event.target.value
-    case 'event.isTrusted':
-      return event.isTrusted
-    case 'event.dataTransfer.files':
-      return event.dataTransfer.files
-    case 'event.target.className':
-      return event.target.className
-    case 'event.data':
-      return event.data
-    case 'event.deltaMode':
-      return event.deltaMode
-    case 'event.deltaX':
-      return event.deltaX
-    case 'event.deltaY':
-      return event.deltaY
-    case 'event.target.scrollTop':
-      return event.target.scrollTop
-    case 'event.detail':
-      return event.detail
-    case 'event.target.name':
-      return event.target.name || ''
-    case 'event.target.href':
-      return event.target.href
-    case 'event.target.src':
-      return event.target.src
-    case 'event.altKey':
-      return event.altKey
-    case 'event.key':
-      return event.key
-    case 'event.ctrlKey':
-      return event.ctrlKey
-    case 'event.shiftKey':
-      return event.shiftKey
-    case 'event.inputType':
-      return event.inputType
-    case 'event.defaultPrevented':
-      return event.defaultPrevented
-    case 'event.target.dataset.name':
-      return event.target.dataset.name
-    case 'event.target.dataset.index':
-      return event.target.dataset.index
-    default:
-      return param
-  }
-}

package/src/parts/GetEventListenerArgs/GetEventListenerArgs.ts

@@ -1,12 +0,0 @@
-import * as GetEventListenerArg from '../GetEventListenerArg/GetEventListenerArg.ts'
-
-export const getEventListenerArgs = (
-  params: readonly string[],
-  event: any,
-): readonly any[] => {
-  const serialized: any[] = []
-  for (const param of params) {
-    serialized.push(GetEventListenerArg.getEventListenerArg(param, event))
-  }
-  return serialized
-}

package/src/parts/GetEventListenerOptions/GetEventListenerOptions.ts

@@ -1,15 +0,0 @@
-export const getEventListenerOptions = (eventName: string, value: any): any => {
-  if (value.passive) {
-    return {
-      passive: true,
-    }
-  }
-  switch (eventName) {
-    case 'wheel':
-      return {
-        passive: true,
-      }
-    default:
-      return undefined
-  }
-}

package/src/parts/GetUidTarget/GetUidTarget.ts

@@ -1,13 +0,0 @@
-import { uidSymbol } from '../UidSymbol/UidSymbol.ts'
-
-export const getUidTarget = (
-  $Element: HTMLElement,
-): HTMLElement | undefined => {
-  while ($Element) {
-    if ($Element[uidSymbol]) {
-      return $Element
-    }
-    $Element = $Element.parentNode as HTMLElement
-  }
-  return undefined
-}