@lvce-editor/virtual-dom 0.3.4 → 0.4.0

package/dist/index.d.ts

@@ -1,5 +1,18 @@
+export const render: (elements: any[], eventMap?: any) => HTMLElement
 
+export const renderInto: (
+  $Parent: HTMLElement,
+  elements: any[],
+  eventMap?: any,
+) => void
 
-export const render: (elements: any[], eventMap?: any) => HTMLElement
+export const setIpc: (ipc: any) => void
+
+export const setComponentUid: ($Element: HTMLElement) => void
 
-export const renderInto: ($Parent: HTMLElement, elements: any[], eventMap?: any) => void
+export const rememberFocus: (
+  $Viewlet: HTMLElement,
+  dom: any[],
+  eventMap: any,
+  uid: number,
+) => void

package/dist/index.js

@@ -1,3 +1,37 @@
+// src/parts/ComponentUid/ComponentUid.ts
+var uidSymbol = Symbol("uid");
+var setComponentUid = ($Element, uid) => {
+  $Element[uidSymbol] = uid;
+};
+var getUidTarget = ($Element) => {
+  while ($Element) {
+    if ($Element[uidSymbol]) {
+      return $Element;
+    }
+    $Element = $Element.parentNode;
+  }
+  return void 0;
+};
+var get = ($Element) => {
+  const $Target = getUidTarget($Element);
+  return $Target[uidSymbol];
+};
+var fromEvent = (event) => {
+  const { target, currentTarget } = event;
+  return get(currentTarget || target);
+};
+
+// src/parts/IpcState/IpcState.ts
+var state = {
+  ipc: void 0
+};
+var getIpc = () => {
+  return state.ipc;
+};
+var setIpc = (value) => {
+  state.ipc = value;
+};
+
 // src/parts/ClearNode/ClearNode.ts
 var clearNode = ($Node) => {
   $Node.textContent = "";
@@ -220,8 +254,60 @@ var getElementTag = (type) => {
   }
 };
 
+// src/parts/GetEventListenerOptions/GetEventListenerOptions.ts
+var getEventListenerOptions = (eventName) => {
+  switch (eventName) {
+    case "wheel":
+      return {
+        passive: true
+      };
+    default:
+      return void 0;
+  }
+};
+
+// src/parts/NameAnonymousFunction/NameAnonymousFunction.ts
+var nameAnonymousFunction = (fn, name) => {
+  Object.defineProperty(fn, "name", {
+    value: name
+  });
+};
+
+// src/parts/GetWrappedListener/GetWrappedListener.ts
+var cache = /* @__PURE__ */ new Map();
+var getWrappedListener = (listener, returnValue) => {
+  if (!returnValue) {
+    return listener;
+  }
+  if (!cache.has(listener)) {
+    const wrapped = (event) => {
+      const uid = fromEvent(event);
+      const result = listener(event);
+      if (result.length === 0) {
+        return;
+      }
+      const ipc = getIpc();
+      ipc.send("Viewlet.executeViewletCommand", uid, ...result);
+    };
+    nameAnonymousFunction(wrapped, listener.name);
+    cache.set(listener, wrapped);
+  }
+  return cache.get(listener);
+};
+
 // src/parts/AttachEvent/AttachEvent.ts
 var attachEvent = ($Node, eventMap, key, value) => {
+  const listener = eventMap[value];
+  if (!listener) {
+    console.warn("listener not found", value);
+    return;
+  }
+  const options = getEventListenerOptions(eventMap);
+  const wrapped = getWrappedListener(
+    listener,
+    eventMap.returnValue
+  );
+  $Node.addEventListener(key, wrapped, options);
 };
 
 // src/parts/VirtualDomElementProp/VirtualDomElementProp.ts
@@ -354,5 +440,7 @@ var render2 = (elements, eventMap = {}) => {
 };
 export {
   render2 as render,
-  renderInto
+  renderInto,
+  setComponentUid,
+  setIpc
 };

package/package.json

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

package/src/parts/AttachEvent/AttachEvent.ts

@@ -1,3 +1,21 @@
-export const attachEvent = ($Node, eventMap, key, value) => {
-  // TODO
+import * as GetEventListeneroptions from '../GetEventListenerOptions/GetEventListenerOptions.ts'
+import * as GetWrappedListener from '../GetWrappedListener/GetWrappedListener.ts'
+
+export const attachEvent = (
+  $Node: HTMLElement,
+  eventMap: any,
+  key: string,
+  value: string,
+) => {
+  const listener = eventMap[value]
+  if (!listener) {
+    console.warn('listener not found', value)
+    return
+  }
+  const options = GetEventListeneroptions.getEventListenerOptions(eventMap)
+  const wrapped = GetWrappedListener.getWrappedListener(
+    listener,
+    eventMap.returnValue,
+  )
+  $Node.addEventListener(key, wrapped, options)
 }

package/src/parts/ComponentUid/ComponentUid.ts

@@ -0,0 +1,25 @@
+const uidSymbol = Symbol('uid')
+
+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 get = ($Element) => {
+  const $Target = getUidTarget($Element)
+  return $Target[uidSymbol]
+}
+
+export const fromEvent = (event) => {
+  const { target, currentTarget } = event
+  return get(currentTarget || target)
+}

package/src/parts/GetEventListenerOptions/GetEventListenerOptions.ts

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

package/src/parts/GetWrappedListener/GetWrappedListener.ts

@@ -0,0 +1,26 @@
+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()
+
+export const getWrappedListener = (listener, returnValue) => {
+  if (!returnValue) {
+    return listener
+  }
+  if (!cache.has(listener)) {
+    const wrapped = (event) => {
+      const uid = ComponentUid.fromEvent(event)
+      const result = listener(event)
+      // TODO check for empty array by value
+      if (result.length === 0) {
+        return
+      }
+      const ipc = IpcState.getIpc()
+      ipc.send('Viewlet.executeViewletCommand', uid, ...result)
+    }
+    NameAnonymousFunction.nameAnonymousFunction(wrapped, listener.name)
+    cache.set(listener, wrapped)
+  }
+  return cache.get(listener)
+}

package/src/parts/IpcState/IpcState.ts

@@ -0,0 +1,11 @@
+const state = {
+  ipc: undefined,
+}
+
+export const getIpc = (): any => {
+  return state.ipc
+}
+
+export const setIpc = (value: any) => {
+  state.ipc = value
+}

package/src/parts/Main/Main.ts

@@ -1 +1,3 @@
+export { setComponentUid } from '../ComponentUid/ComponentUid.ts'
+export { setIpc } from '../IpcState/IpcState.ts'
 export { render, renderInto } from '../VirtualDom/VirtualDom.ts'

package/src/parts/NameAnonymousFunction/NameAnonymousFunction.ts

@@ -0,0 +1,5 @@
+export const nameAnonymousFunction = (fn: any, name: string) => {
+  Object.defineProperty(fn, 'name', {
+    value: name,
+  })
+}

package/src/parts/RememberFocus/RememberFocus.ts

@@ -0,0 +1,57 @@
+import * as ComponentUid from '../ComponentUid/ComponentUid.ts'
+import * as VirtualDom from '../VirtualDom/VirtualDom.ts'
+
+const queryInputs = ($Viewlet: HTMLElement) => {
+  return [...$Viewlet.querySelectorAll('input, textarea')]
+}
+
+export const rememberFocus = (
+  $Viewlet: HTMLElement,
+  dom: any[],
+  eventMap: any,
+  uid = 0,
+) => {
+  // TODO replace this workaround with
+  // virtual dom diffing
+  const oldLeft = $Viewlet.style.left
+  const oldTop = $Viewlet.style.top
+  const oldWidth = $Viewlet.style.width
+  const oldHeight = $Viewlet.style.height
+  // @ts-expect-error
+  const focused = document.activeElement.getAttribute('name')
+  const $$Inputs = queryInputs($Viewlet)
+  const inputMap = Object.create(null)
+  for (const $Input of $$Inputs) {
+    // @ts-ignore
+    inputMap[$Input.name] = $Input.value
+  }
+  if (uid) {
+    const $New = VirtualDom.render(dom, eventMap).firstChild
+    ComponentUid.setComponentUid($New, uid)
+    // @ts-ignore
+    $Viewlet.replaceWith($New)
+    // @ts-ignore
+    $Viewlet = $New
+  } else {
+    VirtualDom.renderInto($Viewlet, dom, eventMap)
+  }
+  const $$NewInputs = queryInputs($Viewlet)
+  for (const $Input of $$NewInputs) {
+    // @ts-ignore
+    $Input.value = inputMap[$Input.name] || $Input.value || ''
+  }
+  if (focused) {
+    const $Focused = $Viewlet.querySelector(`[name="${focused}"]`)
+    if ($Focused) {
+      // @ts-ignore
+      $Focused.focus()
+    }
+  }
+
+  $Viewlet.style.top = oldTop
+  $Viewlet.style.left = oldLeft
+  $Viewlet.style.height = oldHeight
+  $Viewlet.style.width = oldWidth
+
+  return $Viewlet
+}