@lvce-editor/virtual-dom 1.0.3 → 1.2.0

package/dist/index.d.ts

@@ -20,3 +20,5 @@ export const rememberFocus: (
   eventMap: any,
   uid: number,
 ) => void
+
+export const registerEventListeners: any

package/dist/index.js

@@ -1,8 +1,7 @@
-// src/parts/ComponentUid/ComponentUid.ts
+// src/parts/UidSymbol/UidSymbol.ts
 var uidSymbol = Symbol("uid");
-var setComponentUid = ($Element, uid) => {
-  $Element[uidSymbol] = uid;
-};
+
+// src/parts/GetUidTarget/GetUidTarget.ts
 var getUidTarget = ($Element) => {
   while ($Element) {
     if ($Element[uidSymbol]) {
@@ -12,6 +11,11 @@ var getUidTarget = ($Element) => {
   }
   return void 0;
 };
+
+// src/parts/ComponentUid/ComponentUid.ts
+var setComponentUid = ($Element, uid) => {
+  $Element[uidSymbol] = uid;
+};
 var getComponentUid = ($Element) => {
   const $Target = getUidTarget($Element);
   if (!$Target) {
@@ -35,6 +39,47 @@ var setIpc = (value) => {
   state.ipc = value;
 };
 
+// src/parts/NameAnonymousFunction/NameAnonymousFunction.ts
+var nameAnonymousFunction = (fn, name) => {
+  Object.defineProperty(fn, "name", {
+    value: name
+  });
+};
+
+// src/parts/RegisterEventListeners/RegisterEventListeners.ts
+var listeners = /* @__PURE__ */ Object.create(null);
+var getArgs = (params, event) => {
+  return [...params];
+};
+var createFn = (info) => {
+  const fn = (event) => {
+    if (info.preventDefault) {
+      event.preventDefault(event);
+    }
+    const uid = getComponentUidFromEvent(event);
+    const args = getArgs(info.params, event);
+    if (args.length === 0) {
+      return;
+    }
+    const ipc = getIpc();
+    ipc.send("Viewlet.executeViewletCommand", uid, ...args);
+  };
+  nameAnonymousFunction(fn, info.name);
+  return fn;
+};
+var registerEventListeners = (id, eventListeners) => {
+  const map = /* @__PURE__ */ Object.create(null);
+  for (const info of eventListeners) {
+    const fn = createFn(info);
+    map[info.name] = fn;
+  }
+  listeners[id] = map;
+};
+var getEventListenerMap = (id) => {
+  const map = listeners[id];
+  return map;
+};
+
 // src/parts/ClearNode/ClearNode.ts
 var clearNode = ($Node) => {
   $Node.textContent = "";
@@ -269,20 +314,24 @@ var getEventListenerOptions = (eventName) => {
   }
 };
 
-// src/parts/NameAnonymousFunction/NameAnonymousFunction.ts
-var nameAnonymousFunction = (fn, name) => {
-  Object.defineProperty(fn, "name", {
-    value: name
-  });
+// src/parts/ListenerCache/ListenerCache.ts
+var cache = /* @__PURE__ */ new Map();
+var has = (listener) => {
+  return cache.has(listener);
+};
+var set = (listener, value) => {
+  cache.set(listener, value);
+};
+var get = (listener) => {
+  return cache.get(listener);
 };
 
 // src/parts/GetWrappedListener/GetWrappedListener.ts
-var cache = /* @__PURE__ */ new Map();
 var getWrappedListener = (listener, returnValue) => {
   if (!returnValue) {
     return listener;
   }
-  if (!cache.has(listener)) {
+  if (!has(listener)) {
     const wrapped = (event) => {
       const uid = getComponentUidFromEvent(event);
       const result = listener(event);
@@ -293,13 +342,17 @@ var getWrappedListener = (listener, returnValue) => {
       ipc.send("Viewlet.executeViewletCommand", uid, ...result);
     };
     nameAnonymousFunction(wrapped, listener.name);
-    cache.set(listener, wrapped);
+    set(listener, wrapped);
   }
-  return cache.get(listener);
+  return get(listener);
 };
 
 // src/parts/AttachEvent/AttachEvent.ts
-var attachEvent = ($Node, eventMap, key, value) => {
+var attachEvent = ($Node, eventMap, key, value, newEventMap) => {
+  if (newEventMap && newEventMap[value]) {
+    $Node.addEventListener(key, newEventMap[value]);
+    return;
+  }
   const listener = eventMap[value];
   if (!listener) {
     console.warn("listener not found", value);
@@ -314,7 +367,7 @@ var attachEvent = ($Node, eventMap, key, value) => {
 };
 
 // src/parts/VirtualDomElementProp/VirtualDomElementProp.ts
-var setProp = ($Element, key, value, eventMap) => {
+var setProp = ($Element, key, value, eventMap, newEventMap) => {
   switch (key) {
     case "maskImage":
       $Element.style.maskImage = `url('${value}')`;
@@ -378,7 +431,7 @@ var setProp = ($Element, key, value, eventMap) => {
       if (!eventMap || !value) {
         return;
       }
-      attachEvent($Element, eventMap, eventName, value);
+      attachEvent($Element, eventMap, eventName, value, newEventMap);
       break;
     default:
       if (key.startsWith("data-")) {
@@ -390,9 +443,15 @@ var setProp = ($Element, key, value, eventMap) => {
 };
 
 // src/parts/VirtualDomElementProps/VirtualDomElementProps.ts
-var setProps = ($Element, props, eventMap) => {
+var setProps = ($Element, props, eventMap, newEventMap) => {
   for (const key in props) {
-    setProp($Element, key, props[key], eventMap);
+    setProp(
+      $Element,
+      key,
+      props[key],
+      eventMap,
+      newEventMap
+    );
   }
 };
 
@@ -400,28 +459,28 @@ var setProps = ($Element, props, eventMap) => {
 var renderDomTextNode = (element) => {
   return document.createTextNode(element.text);
 };
-var renderDomElement = (element, eventMap) => {
+var renderDomElement = (element, eventMap, newEventMap) => {
   const tag = getElementTag(element.type);
   const $Element = document.createElement(tag);
-  setProps($Element, element, eventMap);
+  setProps($Element, element, eventMap, newEventMap);
   return $Element;
 };
-var render = (element, eventMap) => {
+var render = (element, eventMap, newEventMap) => {
   switch (element.type) {
     case Text:
       return renderDomTextNode(element);
     default:
-      return renderDomElement(element, eventMap);
+      return renderDomElement(element, eventMap, newEventMap);
   }
 };
 
 // src/parts/RenderInternal/RenderInternal.ts
-var renderInternal2 = ($Parent, elements, eventMap) => {
+var renderInternal2 = ($Parent, elements, eventMap, newEventMap) => {
   const max = elements.length - 1;
   let stack = [];
   for (let i = max; i >= 0; i--) {
     const element = elements[i];
-    const $Element = render(element, eventMap);
+    const $Element = render(element, eventMap, newEventMap);
     if (element.childCount > 0) {
       $Element.append(...stack.slice(0, element.childCount));
       stack = stack.slice(element.childCount);
@@ -436,9 +495,9 @@ var renderInto = ($Parent, dom, eventMap = {}) => {
   clearNode($Parent);
   renderInternal2($Parent, dom, eventMap);
 };
-var render2 = (elements, eventMap = {}) => {
+var render2 = (elements, eventMap = {}, newEventMap = {}) => {
   const $Root = document.createElement("div");
-  renderInternal2($Root, elements, eventMap);
+  renderInternal2($Root, elements, eventMap, newEventMap);
   return $Root;
 };
 
@@ -458,7 +517,8 @@ var rememberFocus = ($Viewlet, dom, eventMap, uid = 0) => {
     inputMap[$Input.name] = $Input.value;
   }
   if (uid) {
-    const $New = render2(dom, eventMap).firstChild;
+    const newEventMap = getEventListenerMap(uid);
+    const $New = render2(dom, eventMap, newEventMap).firstChild;
     setComponentUid($New, uid);
     $Viewlet.replaceWith($New);
     $Viewlet = $New;
@@ -484,6 +544,7 @@ var rememberFocus = ($Viewlet, dom, eventMap, uid = 0) => {
 export {
   getComponentUid,
   getComponentUidFromEvent,
+  registerEventListeners,
   rememberFocus,
   render2 as render,
   renderInto,

package/package.json

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

package/src/parts/AttachEvent/AttachEvent.ts

@@ -6,7 +6,13 @@ export const attachEvent = (
   eventMap: any,
   key: string,
   value: string,
+  newEventMap?: any,
 ) => {
+  if (newEventMap && newEventMap[value]) {
+    // TODO support event listener options
+    $Node.addEventListener(key, newEventMap[value])
+    return
+  }
   const listener = eventMap[value]
   if (!listener) {
     console.warn('listener not found', value)

package/src/parts/ClearNode/ClearNode.ts

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

package/src/parts/ComponentUid/ComponentUid.ts

@@ -1,19 +1,10 @@
-const uidSymbol = Symbol('uid')
+import { getUidTarget } from '../GetUidTarget/GetUidTarget.ts'
+import { uidSymbol } from '../UidSymbol/UidSymbol.ts'
 
 export const setComponentUid = ($Element, uid) => {
   $Element[uidSymbol] = uid
 }
 
-const getUidTarget = ($Element) => {
-  while ($Element) {
-    if ($Element[uidSymbol]) {
-      return $Element
-    }
-    $Element = $Element.parentNode
-  }
-  return undefined
-}
-
 export const getComponentUid = ($Element) => {
   const $Target = getUidTarget($Element)
   if (!$Target) {

package/src/parts/GetUidTarget/GetUidTarget.ts

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

package/src/parts/GetWrappedListener/GetWrappedListener.ts

@@ -1,14 +1,13 @@
 import * as ComponentUid from '../ComponentUid/ComponentUid.ts'
-import * as NameAnonymousFunction from '../NameAnonymousFunction/NameAnonymousFunction.ts'
 import * as IpcState from '../IpcState/IpcState.ts'
-
-const cache = new Map()
+import * as ListenerCache from '../ListenerCache/ListenerCache.ts'
+import * as NameAnonymousFunction from '../NameAnonymousFunction/NameAnonymousFunction.ts'
 
 export const getWrappedListener = (listener, returnValue) => {
   if (!returnValue) {
     return listener
   }
-  if (!cache.has(listener)) {
+  if (!ListenerCache.has(listener)) {
     const wrapped = (event) => {
       const uid = ComponentUid.getComponentUidFromEvent(event)
       const result = listener(event)
@@ -20,7 +19,7 @@ export const getWrappedListener = (listener, returnValue) => {
       ipc.send('Viewlet.executeViewletCommand', uid, ...result)
     }
     NameAnonymousFunction.nameAnonymousFunction(wrapped, listener.name)
-    cache.set(listener, wrapped)
+    ListenerCache.set(listener, wrapped)
   }
-  return cache.get(listener)
+  return ListenerCache.get(listener)
 }

package/src/parts/ListenerCache/ListenerCache.ts

@@ -0,0 +1,13 @@
+const cache = new Map()
+
+export const has = (listener) => {
+  return cache.has(listener)
+}
+
+export const set = (listener, value) => {
+  cache.set(listener, value)
+}
+
+export const get = (listener) => {
+  return cache.get(listener)
+}

package/src/parts/Main/Main.ts

@@ -4,5 +4,6 @@ export {
   setComponentUid,
 } from '../ComponentUid/ComponentUid.ts'
 export { setIpc } from '../IpcState/IpcState.ts'
+export { registerEventListeners } from '../RegisterEventListeners/RegisterEventListeners.ts'
 export { rememberFocus } from '../RememberFocus/RememberFocus.ts'
 export { render, renderInto } from '../VirtualDom/VirtualDom.ts'

package/src/parts/RegisterEventListeners/RegisterEventListeners.ts

@@ -0,0 +1,40 @@
+import * as ComponentUid from '../ComponentUid/ComponentUid.ts'
+import * as IpcState from '../IpcState/IpcState.ts'
+import * as NameAnonymousFunction from '../NameAnonymousFunction/NameAnonymousFunction.ts'
+
+const listeners = Object.create(null)
+
+const getArgs = (params, event) => {
+  return [...params]
+}
+
+const createFn = (info) => {
+  const fn = (event) => {
+    if (info.preventDefault) {
+      event.preventDefault(event)
+    }
+    const uid = ComponentUid.getComponentUidFromEvent(event)
+    const args = getArgs(info.params, event)
+    if (args.length === 0) {
+      return
+    }
+    const ipc = IpcState.getIpc()
+    ipc.send('Viewlet.executeViewletCommand', uid, ...args)
+  }
+  NameAnonymousFunction.nameAnonymousFunction(fn, info.name)
+  return fn
+}
+
+export const registerEventListeners = (id, eventListeners) => {
+  const map = Object.create(null)
+  for (const info of eventListeners) {
+    const fn = createFn(info)
+    map[info.name] = fn
+  }
+  listeners[id] = map
+}
+
+export const getEventListenerMap = (id) => {
+  const map = listeners[id]
+  return map
+}

package/src/parts/RememberFocus/RememberFocus.ts

@@ -1,5 +1,6 @@
 import * as ComponentUid from '../ComponentUid/ComponentUid.ts'
 import * as VirtualDom from '../VirtualDom/VirtualDom.ts'
+import * as RegisterEventListeners from '../RegisterEventListeners/RegisterEventListeners.ts'
 
 const queryInputs = ($Viewlet: HTMLElement) => {
   return [...$Viewlet.querySelectorAll('input, textarea')]
@@ -26,7 +27,8 @@ export const rememberFocus = (
     inputMap[$Input.name] = $Input.value
   }
   if (uid) {
-    const $New = VirtualDom.render(dom, eventMap).firstChild
+    const newEventMap = RegisterEventListeners.getEventListenerMap(uid)
+    const $New = VirtualDom.render(dom, eventMap, newEventMap).firstChild
     ComponentUid.setComponentUid($New, uid)
     // @ts-ignore
     $Viewlet.replaceWith($New)

package/src/parts/RenderInternal/RenderInternal.ts

@@ -4,12 +4,13 @@ export const renderInternal = (
   $Parent: HTMLElement,
   elements: any[],
   eventMap: any,
+  newEventMap?: 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)
+    const $Element = VirtualDomElement.render(element, eventMap, newEventMap)
     if (element.childCount > 0) {
       // @ts-expect-error
       $Element.append(...stack.slice(0, element.childCount))

package/src/parts/UidSymbol/UidSymbol.ts

@@ -0,0 +1 @@
+export const uidSymbol = Symbol('uid')

package/src/parts/VirtualDom/VirtualDom.ts

@@ -39,8 +39,8 @@ export const renderIncremental = ($Parent, dom) => {
  * @param {any[]} elements
  * @returns
  */
-export const render = (elements, eventMap = {}) => {
+export const render = (elements, eventMap = {}, newEventMap = {}) => {
   const $Root = document.createElement('div')
-  RenderInternal.renderInternal($Root, elements, eventMap)
+  RenderInternal.renderInternal($Root, elements, eventMap, newEventMap)
   return $Root
 }

package/src/parts/VirtualDomElement/VirtualDomElement.ts

@@ -6,18 +6,18 @@ const renderDomTextNode = (element) => {
   return document.createTextNode(element.text)
 }
 
-const renderDomElement = (element, eventMap) => {
+const renderDomElement = (element, eventMap, newEventMap) => {
   const tag = ElementTagMap.getElementTag(element.type)
   const $Element = document.createElement(tag)
-  VirtualDomElementProps.setProps($Element, element, eventMap)
+  VirtualDomElementProps.setProps($Element, element, eventMap, newEventMap)
   return $Element
 }
 
-export const render = (element, eventMap) => {
+export const render = (element, eventMap, newEventMap?: any) => {
   switch (element.type) {
     case VirtualDomElements.Text:
       return renderDomTextNode(element)
     default:
-      return renderDomElement(element, eventMap)
+      return renderDomElement(element, eventMap, newEventMap)
   }
 }

package/src/parts/VirtualDomElementProp/VirtualDomElementProp.ts

@@ -1,6 +1,12 @@
 import * as AttachEvent from '../AttachEvent/AttachEvent.ts'
 
-export const setProp = ($Element: HTMLElement, key: string, value: any, eventMap: any) => {
+export const setProp = (
+  $Element: HTMLElement,
+  key: string,
+  value: any,
+  eventMap: any,
+  newEventMap?: any,
+) => {
   switch (key) {
     case 'maskImage':
       $Element.style.maskImage = `url('${value}')`
@@ -65,7 +71,7 @@ export const setProp = ($Element: HTMLElement, key: string, value: any, eventMap
       if (!eventMap || !value) {
         return
       }
-      AttachEvent.attachEvent($Element, eventMap, eventName, value)
+      AttachEvent.attachEvent($Element, eventMap, eventName, value, newEventMap)
       break
     default:
       if (key.startsWith('data-')) {

package/src/parts/VirtualDomElementProps/VirtualDomElementProps.ts

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