@lvce-editor/virtual-dom 0.3.2

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024-present, Lvce Editor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# virtual dom

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+
+
+export const render: (elements: any[], eventMap: any) => void
+
+export const renderInto: ($Parent: HTMLElement, elements: any[], eventMap: any) => void

package/dist/index.js

@@ -0,0 +1,358 @@
+// src/parts/ClearNode/ClearNode.ts
+var clearNode = ($Node) => {
+  $Node.textContent = "";
+};
+
+// src/parts/ElementTags/ElementTags.ts
+var Audio = "audio";
+var Button = "button";
+var Col = "col";
+var ColGroup = "colgroup";
+var Del = "del";
+var Div = "div";
+var H1 = "h1";
+var H2 = "h2";
+var H3 = "h3";
+var H4 = "h4";
+var H5 = "h5";
+var H6 = "h6";
+var I = "i";
+var Img = "img";
+var Input = "input";
+var Ins = "ins";
+var Kbd = "kbd";
+var Span = "span";
+var Table = "table";
+var TBody = "tbody";
+var Td = "td";
+var Th = "th";
+var THead = "thead";
+var Tr = "tr";
+var Article = "article";
+var Aside = "aside";
+var Footer = "footer";
+var Header = "header";
+var Nav = "nav";
+var Section = "section";
+var Search = "search";
+var Dd = "dd";
+var Dl = "dl";
+var Figcaption = "figcaption";
+var Figure = "figure";
+var Hr = "hr";
+var Li = "li";
+var Ol = "ol";
+var P = "p";
+var Pre = "pre";
+var A = "a";
+var Br = "br";
+var Cite = "cite";
+var Data = "data";
+var Time = "time";
+var Tfoot = "tfoot";
+var Ul = "ul";
+var Video = "video";
+var TextArea = "textarea";
+var Select = "select";
+var Option = "option";
+
+// src/parts/VirtualDomElements/VirtualDomElements.ts
+var Audio2 = 0;
+var Button2 = 1;
+var Col2 = 2;
+var ColGroup2 = 3;
+var Div2 = 4;
+var H12 = 5;
+var Input2 = 6;
+var Kbd2 = 7;
+var Span2 = 8;
+var Table2 = 9;
+var TBody2 = 10;
+var Td2 = 11;
+var Text = 12;
+var Th2 = 13;
+var THead2 = 14;
+var Tr2 = 15;
+var I2 = 16;
+var Img2 = 17;
+var Ins2 = 20;
+var Del2 = 21;
+var H22 = 22;
+var H32 = 23;
+var H42 = 24;
+var H52 = 25;
+var H62 = 26;
+var Article2 = 27;
+var Aside2 = 28;
+var Footer2 = 29;
+var Header2 = 30;
+var Nav2 = 40;
+var Section2 = 41;
+var Search2 = 42;
+var Dd2 = 43;
+var Dl2 = 44;
+var Figcaption2 = 45;
+var Figure2 = 46;
+var Hr2 = 47;
+var Li2 = 48;
+var Ol2 = 49;
+var P2 = 50;
+var Pre2 = 51;
+var A2 = 53;
+var Br2 = 55;
+var Cite2 = 56;
+var Data2 = 57;
+var Time2 = 58;
+var Tfoot2 = 59;
+var Ul2 = 60;
+var Video2 = 61;
+var TextArea2 = 62;
+var Select2 = 63;
+var Option2 = 64;
+
+// src/parts/ElementTagMap/ElementTagMap.ts
+var getElementTag = (type) => {
+  switch (type) {
+    case Audio2:
+      return Audio;
+    case H12:
+      return H1;
+    case H22:
+      return H2;
+    case H32:
+      return H3;
+    case H42:
+      return H4;
+    case H52:
+      return H5;
+    case H62:
+      return H6;
+    case Div2:
+      return Div;
+    case Kbd2:
+      return Kbd;
+    case Table2:
+      return Table;
+    case TBody2:
+      return TBody;
+    case Th2:
+      return Th;
+    case Td2:
+      return Td;
+    case THead2:
+      return THead;
+    case Tr2:
+      return Tr;
+    case Input2:
+      return Input;
+    case ColGroup2:
+      return ColGroup;
+    case Col2:
+      return Col;
+    case Button2:
+      return Button;
+    case Span2:
+      return Span;
+    case I2:
+      return I;
+    case Img2:
+      return Img;
+    case Ins2:
+      return Ins;
+    case Del2:
+      return Del;
+    case Article2:
+      return Article;
+    case Aside2:
+      return Aside;
+    case Footer2:
+      return Footer;
+    case Header2:
+      return Header;
+    case Nav2:
+      return Nav;
+    case Section2:
+      return Section;
+    case Search2:
+      return Search;
+    case Dd2:
+      return Dd;
+    case Dl2:
+      return Dl;
+    case Figcaption2:
+      return Figcaption;
+    case Figure2:
+      return Figure;
+    case Hr2:
+      return Hr;
+    case Li2:
+      return Li;
+    case Ol2:
+      return Ol;
+    case P2:
+      return P;
+    case Pre2:
+      return Pre;
+    case A2:
+      return A;
+    case Br2:
+      return Br;
+    case Cite2:
+      return Cite;
+    case Data2:
+      return Data;
+    case Time2:
+      return Time;
+    case Tfoot2:
+      return Tfoot;
+    case Ul2:
+      return Ul;
+    case Video2:
+      return Video;
+    case TextArea2:
+      return TextArea;
+    case Select2:
+      return Select;
+    case Option2:
+      return Option;
+    default:
+      throw new Error(`element tag not found ${type}`);
+  }
+};
+
+// src/parts/AttachEvent/AttachEvent.ts
+var attachEvent = ($Node, eventMap, key, value) => {
+};
+
+// src/parts/VirtualDomElementProp/VirtualDomElementProp.ts
+var setProp = ($Element, key, value, eventMap) => {
+  switch (key) {
+    case "maskImage":
+      $Element.style.maskImage = `url('${value}')`;
+      $Element.style.webkitMaskImage = `url('${value}')`;
+      break;
+    case "paddingLeft":
+    case "paddingRight":
+    case "top":
+    case "left":
+    case "marginTop":
+      $Element.style[key] = typeof value === "number" ? `${value}px` : value;
+      break;
+    case "translate":
+      $Element.style[key] = value;
+      break;
+    case "width":
+    case "height":
+      if ($Element instanceof HTMLImageElement) {
+        $Element[key] = value;
+      } else if (typeof value === "number") {
+        $Element.style[key] = `${value}px`;
+      } else {
+        $Element.style[key] = value;
+      }
+      break;
+    case "style":
+      throw new Error("style property is not supported");
+    case "childCount":
+    case "type":
+      break;
+    case "ariaOwns":
+      if (value) {
+        $Element.setAttribute("aria-owns", value);
+      } else {
+        $Element.removeAttribute("aria-owns");
+      }
+      break;
+    case "inputType":
+      $Element.type = value;
+      break;
+    case "ariaLabelledBy":
+      $Element.setAttribute("aria-labelledby", value);
+      break;
+    case "onBlur":
+    case "onChange":
+    case "onClick":
+    case "onContextMenu":
+    case "onDblClick":
+    case "onFocus":
+    case "onFocusIn":
+    case "onFocusIn":
+    case "onFocusOut":
+    case "onInput":
+    case "onKeyDown":
+    case "onMouseDown":
+    case "onPointerDown":
+    case "onPointerOut":
+    case "onPointerOver":
+    case "onWheel":
+      const eventName = key.slice(2).toLowerCase();
+      if (!eventMap || !value) {
+        return;
+      }
+      attachEvent($Element, eventMap, eventName, value);
+      break;
+    default:
+      if (key.startsWith("data-")) {
+        $Element.dataset[key.slice("data-".length)] = value;
+      } else {
+        $Element[key] = value;
+      }
+  }
+};
+
+// src/parts/VirtualDomElementProps/VirtualDomElementProps.ts
+var setProps = ($Element, props, eventMap) => {
+  for (const key in props) {
+    setProp($Element, key, props[key], eventMap);
+  }
+};
+
+// src/parts/VirtualDomElement/VirtualDomElement.ts
+var renderDomTextNode = (element) => {
+  return document.createTextNode(element.text);
+};
+var renderDomElement = (element, eventMap) => {
+  const tag = getElementTag(element.type);
+  const $Element = document.createElement(tag);
+  setProps($Element, element, eventMap);
+  return $Element;
+};
+var render = (element, eventMap) => {
+  switch (element.type) {
+    case Text:
+      return renderDomTextNode(element);
+    default:
+      return renderDomElement(element, eventMap);
+  }
+};
+
+// src/parts/RenderInternal/RenderInternal.ts
+var renderInternal2 = ($Parent, elements, eventMap) => {
+  const max = elements.length - 1;
+  let stack = [];
+  for (let i = max; i >= 0; i--) {
+    const element = elements[i];
+    const $Element = render(element, eventMap);
+    if (element.childCount > 0) {
+      $Element.append(...stack.slice(0, element.childCount));
+      stack = stack.slice(element.childCount);
+    }
+    stack.unshift($Element);
+  }
+  $Parent.append(...stack);
+};
+
+// src/parts/VirtualDom/VirtualDom.ts
+var renderInto = ($Parent, dom, eventMap = {}) => {
+  clearNode($Parent);
+  renderInternal2($Parent, dom, eventMap);
+};
+var render2 = (elements, eventMap = {}) => {
+  const $Root = document.createElement("div");
+  renderInternal2($Root, elements, eventMap);
+  return $Root;
+};
+export {
+  render2 as render,
+  renderInto
+};

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@lvce-editor/virtual-dom",
+  "version": "0.3.2",
+  "main": "dist/index.js",
+  "type": "module",
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "description": "",
+  "types": "dist/index.d.ts"
+}

package/src/index.ts

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

package/src/parts/AttachEvent/AttachEvent.ts

@@ -0,0 +1,3 @@
+export const attachEvent = ($Node, eventMap, key, value) => {
+  // TODO
+}

package/src/parts/ClearNode/ClearNode.ts

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

package/src/parts/ElementTagMap/ElementTagMap.ts

@@ -0,0 +1,111 @@
+import * as ElementTag from '../ElementTags/ElementTags.ts'
+import * as VirtualDomElements from '../VirtualDomElements/VirtualDomElements.ts'
+
+export const getElementTag = (type) => {
+  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
+    default:
+      throw new Error(`element tag not found ${type}`)
+  }
+}

package/src/parts/ElementTags/ElementTags.ts

@@ -0,0 +1,52 @@
+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'

package/src/parts/Main/Main.ts

@@ -0,0 +1 @@
+export { render, renderInto } from '../VirtualDom/VirtualDom.ts'

package/src/parts/RenderInternal/RenderInternal.ts

@@ -0,0 +1,22 @@
+import * as VirtualDomElement from '../VirtualDomElement/VirtualDomElement.ts'
+
+export const renderInternal = (
+  $Parent: HTMLElement,
+  elements: any[],
+  eventMap: any,
+) => {
+  const max = elements.length - 1
+  let stack = []
+  for (let i = max; i >= 0; i--) {
+    const element = elements[i]
+    const $Element = VirtualDomElement.render(element, eventMap)
+    if (element.childCount > 0) {
+      // @ts-expect-error
+      $Element.append(...stack.slice(0, element.childCount))
+      stack = stack.slice(element.childCount)
+    }
+    // @ts-expect-error
+    stack.unshift($Element)
+  }
+  $Parent.append(...stack)
+}

package/src/parts/VirtualDom/VirtualDom.ts

@@ -0,0 +1,46 @@
+import * as ClearNode from '../ClearNode/ClearNode.ts'
+import * as RenderInternal from '../RenderInternal/RenderInternal.ts'
+
+export const renderInto = ($Parent, dom, eventMap = {}) => {
+  ClearNode.clearNode($Parent)
+  RenderInternal.renderInternal($Parent, dom, eventMap)
+}
+
+export const renderIncremental = ($Parent, dom) => {
+  if ($Parent.textContent === '') {
+    // @ts-expect-error
+    renderInternal($Parent, dom)
+    return
+  }
+  // TODO
+  const $Node = $Parent
+  for (let i = 0; i < dom.length; i++) {
+    const node = dom[i]
+    if (!$Node) {
+      $Parent.append
+    }
+    console.log({ $Node, node })
+    console.log($Node.nodeValue, node.text)
+
+    if ($Node.nodeValue !== node.props.text && node.props.text) {
+      $Node.nodeValue = node.props.text
+    }
+    if ($Node.title !== node.props.title && node.props.title) {
+      $Node.title = node.props.title
+    }
+  }
+  // const newCount = dom
+  // const $Root = render(dom)
+  // $Parent.replaceChildren(...$Root.children)
+}
+
+/**
+ *
+ * @param {any[]} elements
+ * @returns
+ */
+export const render = (elements, eventMap = {}) => {
+  const $Root = document.createElement('div')
+  RenderInternal.renderInternal($Root, elements, eventMap)
+  return $Root
+}

package/src/parts/VirtualDomElement/VirtualDomElement.ts

@@ -0,0 +1,23 @@
+import * as ElementTagMap from '../ElementTagMap/ElementTagMap.ts'
+import * as VirtualDomElementProps from '../VirtualDomElementProps/VirtualDomElementProps.ts'
+import * as VirtualDomElements from '../VirtualDomElements/VirtualDomElements.ts'
+
+const renderDomTextNode = (element) => {
+  return document.createTextNode(element.text)
+}
+
+const renderDomElement = (element, eventMap) => {
+  const tag = ElementTagMap.getElementTag(element.type)
+  const $Element = document.createElement(tag)
+  VirtualDomElementProps.setProps($Element, element, eventMap)
+  return $Element
+}
+
+export const render = (element, eventMap) => {
+  switch (element.type) {
+    case VirtualDomElements.Text:
+      return renderDomTextNode(element)
+    default:
+      return renderDomElement(element, eventMap)
+  }
+}

package/src/parts/VirtualDomElementProp/VirtualDomElementProp.ts

@@ -0,0 +1,77 @@
+import * as AttachEvent from '../AttachEvent/AttachEvent.ts'
+
+export const setProp = ($Element: HTMLElement, key: string, value: any, eventMap: any) => {
+  switch (key) {
+    case 'maskImage':
+      $Element.style.maskImage = `url('${value}')`
+      $Element.style.webkitMaskImage = `url('${value}')`
+      break
+    case 'paddingLeft':
+    case 'paddingRight':
+    case 'top':
+    case 'left':
+    case 'marginTop':
+      $Element.style[key] = typeof value === 'number' ? `${value}px` : value
+      break
+    case 'translate':
+      $Element.style[key] = value
+      break
+    case 'width':
+    case 'height':
+      if ($Element instanceof HTMLImageElement) {
+        $Element[key] = value
+      } else if (typeof value === 'number') {
+        $Element.style[key] = `${value}px`
+      } else {
+        $Element.style[key] = value
+      }
+      break
+    case 'style':
+      throw new Error('style property is not supported')
+    case 'childCount':
+    case 'type':
+      break
+    case 'ariaOwns': // TODO remove this once idl is supported
+      if (value) {
+        $Element.setAttribute('aria-owns', value)
+      } else {
+        $Element.removeAttribute('aria-owns')
+      }
+      break
+    case 'inputType':
+      // @ts-ignore
+      $Element.type = value
+      break
+    case 'ariaLabelledBy':
+      $Element.setAttribute('aria-labelledby', value)
+      break
+    case 'onBlur':
+    case 'onChange':
+    case 'onClick':
+    case 'onContextMenu':
+    case 'onDblClick':
+    case 'onFocus':
+    case 'onFocusIn':
+    case 'onFocusIn':
+    case 'onFocusOut':
+    case 'onInput':
+    case 'onKeyDown':
+    case 'onMouseDown':
+    case 'onPointerDown':
+    case 'onPointerOut':
+    case 'onPointerOver':
+    case 'onWheel':
+      const eventName = key.slice(2).toLowerCase()
+      if (!eventMap || !value) {
+        return
+      }
+      AttachEvent.attachEvent($Element, eventMap, eventName, value)
+      break
+    default:
+      if (key.startsWith('data-')) {
+        $Element.dataset[key.slice('data-'.length)] = value
+      } else {
+        $Element[key] = value
+      }
+  }
+}

package/src/parts/VirtualDomElementProps/VirtualDomElementProps.ts

@@ -0,0 +1,7 @@
+import * as VirtualDomElementProp from '../VirtualDomElementProp/VirtualDomElementProp.ts'
+
+export const setProps = ($Element, props, eventMap) => {
+  for (const key in props) {
+    VirtualDomElementProp.setProp($Element, key, props[key], eventMap)
+  }
+}

package/src/parts/VirtualDomElements/VirtualDomElements.ts

@@ -0,0 +1,54 @@
+export const Audio = 0
+export const Button = 1
+export const Col = 2
+export const ColGroup = 3
+export const Div = 4
+export const H1 = 5
+export const Input = 6
+export const Kbd = 7
+export const Span = 8
+export const Table = 9
+export const TBody = 10
+export const Td = 11
+export const Text = 12
+export const Th = 13
+export const THead = 14
+export const Tr = 15
+export const I = 16
+export const Img = 17
+export const Root = 0
+export const Ins = 20
+export const Del = 21
+export const H2 = 22
+export const H3 = 23
+export const H4 = 24
+export const H5 = 25
+export const H6 = 26
+export const Article = 27
+export const Aside = 28
+export const Footer = 29
+export const Header = 30
+export const Nav = 40
+export const Section = 41
+export const Search = 42
+export const Dd = 43
+export const Dl = 44
+export const Figcaption = 45
+export const Figure = 46
+export const Hr = 47
+export const Li = 48
+export const Ol = 49
+export const P = 50
+export const Pre = 51
+export const A = 53
+export const Abbr = 54
+export const Br = 55
+export const Cite = 56
+export const Data = 57
+export const Time = 58
+export const Tfoot = 59
+export const Ul = 60
+export const Video = 61
+export const TextArea = 62
+export const Select = 63
+export const Option = 64