@lvce-editor/virtual-dom 9.3.0 → 9.4.0

package/dist/index.js

@@ -1,9 +1,341 @@
-const instances = Object.create(null);
-const get$1 = viewletId => {
-  return instances[viewletId];
+const uidSymbol = Symbol('uid');
+
+const getUidTarget = $Element => {
+  while ($Element) {
+    if ($Element[uidSymbol]) {
+      return $Element;
+    }
+    $Element = $Element.parentNode;
+  }
+  return undefined;
 };
-const set$1 = (viewletId, instance) => {
-  instances[viewletId] = instance;
+
+const setComponentUid = ($Element, uid) => {
+  $Element[uidSymbol] = uid;
+};
+const getComponentUid = $Element => {
+  const $Target = getUidTarget($Element);
+  if (!$Target) {
+    return 0;
+  }
+  return $Target[uidSymbol];
+};
+const getComponentUidFromEvent = event => {
+  const {
+    currentTarget,
+    target
+  } = event;
+  return getComponentUid(currentTarget || target);
+};
+
+const dragInfos = Object.create(null);
+const setDragInfo = (id, data) => {
+  dragInfos[id] = data;
+};
+const getDragInfo = id => {
+  return dragInfos[id];
+};
+const removeDragInfo = id => {
+  delete dragInfos[id];
+};
+const isDragInfoOld = data => {
+  return Array.isArray(data);
+};
+
+const setDragImage = (dataTransfer, label) => {
+  const dragImage = document.createElement('div');
+  dragImage.className = 'DragImage';
+  dragImage.textContent = label;
+  document.body.append(dragImage);
+  dataTransfer.setDragImage(dragImage, -10, -10);
+  const handleTimeOut = () => {
+    dragImage.remove();
+  };
+  setTimeout(handleTimeOut, 0);
+};
+
+const applyDragInfoMaybe = event => {
+  const {
+    dataTransfer,
+    target
+  } = event;
+  if (dataTransfer) {
+    const uid = getComponentUid(target);
+    const dragInfo = getDragInfo(uid);
+    if (!dragInfo) {
+      return;
+    }
+    if (isDragInfoOld(dragInfo)) {
+      for (const item of dragInfo) {
+        dataTransfer.setData(item.type, item.data);
+      }
+    } else {
+      for (const item of dragInfo.items) {
+        dataTransfer.items.add(item.data, item.type);
+      }
+      if (dragInfo.label) {
+        setDragImage(dataTransfer, dragInfo.label);
+      }
+    }
+  }
+};
+
+const PointerMove = 'pointermove';
+const lostpointercapture = 'lostpointercapture';
+
+let ignore = false;
+const startIgnore = () => {
+  ignore = true;
+};
+const stopIgnore = () => {
+  ignore = false;
+};
+const enabled = () => {
+  return ignore;
+};
+
+let id = 0;
+const create = () => {
+  return ++id;
+};
+
+const state$1 = Object.create(null);
+const acquire = id => {
+  const promise = state$1[id];
+  delete state$1[id];
+  return promise;
+};
+const getFileHandles = async ids => {
+  const promises = ids.map(acquire);
+  const handles = await Promise.all(promises);
+  return handles;
+};
+const add$1 = promise => {
+  const id = create();
+  state$1[id] = promise;
+  return id;
+};
+const addFileHandle = fileHandle => {
+  const promise = Promise.resolve(fileHandle);
+  return add$1(promise);
+};
+
+const unwrapItemString = async item => {
+  const {
+    resolve,
+    promise
+  } = Promise.withResolvers();
+  item.getAsString(resolve);
+  const value = await promise;
+  return {
+    kind: 'string',
+    type: item.type,
+    value
+  };
+};
+const unwrapItemFile = async item => {
+  // @ts-ignore
+  const file = await item.getAsFileSystemHandle();
+  return {
+    kind: 'file',
+    type: item.type,
+    value: file
+  };
+};
+const unknownItem = {
+  kind: 'unknown',
+  type: '',
+  value: ''
+};
+const unwrapItem = item => {
+  switch (item.kind) {
+    case 'file':
+      return unwrapItemFile(item);
+    case 'string':
+      return unwrapItemString(item);
+    default:
+      return unknownItem;
+  }
+};
+const handleDataTransferFiles = event => {
+  if (!event.dataTransfer) {
+    return [];
+  }
+  const items = [...event.dataTransfer.items];
+  const promises = items.map(unwrapItem);
+  const ids = promises.map(promise => add$1(promise));
+  return ids;
+};
+const getEventListenerArg = (param, event) => {
+  switch (param) {
+    case 'event.altKey':
+      return event.altKey;
+    case 'event.button':
+      return event.button;
+    case 'event.clientX':
+      return event.clientX;
+    case 'event.clientY':
+      return event.clientY;
+    case 'event.ctrlKey':
+      return event.ctrlKey;
+    case 'event.data':
+      return event.data;
+    case 'event.dataTransfer.files':
+      return event.dataTransfer.files;
+    case 'event.dataTransfer.files2':
+      return handleDataTransferFiles(event);
+    case 'event.defaultPrevented':
+      return event.defaultPrevented;
+    case 'event.deltaMode':
+      return event.deltaMode;
+    case 'event.deltaX':
+      return event.deltaX;
+    case 'event.deltaY':
+      return event.deltaY;
+    case 'event.detail':
+      return event.detail;
+    case 'event.inputType':
+      return event.inputType;
+    case 'event.isTrusted':
+      return event.isTrusted;
+    case 'event.key':
+      return event.key;
+    case 'event.shiftKey':
+      return event.shiftKey;
+    case 'event.target.checked':
+      return event.target.checked;
+    case 'event.target.className':
+      return event.target.className;
+    case 'event.target.href':
+      return event.target.href;
+    case 'event.target.name':
+      return event.target.name || '';
+    case 'event.target.nodeName':
+      return event.target.nodeName;
+    case 'event.target.scrollTop':
+      return event.target.scrollTop;
+    case 'event.target.selectionEnd':
+      return event.target.selectionEnd;
+    case 'event.target.selectionStart':
+      return event.target.selectionStart;
+    case 'event.target.src':
+      return event.target.src;
+    case 'event.target.value':
+      return event.target.value;
+    case 'event.x':
+      return event.x;
+    case 'event.y':
+      return event.y;
+    default:
+      if (typeof param === 'string' && param.startsWith('event.target.dataset')) {
+        const rest = param.slice('event.target.dataset.'.length);
+        return event.target.dataset[rest];
+      }
+      return param;
+  }
+};
+
+const getEventListenerArgs = (params, event) => {
+  const serialized = [];
+  for (const param of params) {
+    serialized.push(getEventListenerArg(param, event));
+  }
+  return serialized;
+};
+
+const state = {
+  ipc: undefined
+};
+const getIpc = () => {
+  return state.ipc;
+};
+const setIpc = value => {
+  state.ipc = value;
+};
+
+const nameAnonymousFunction = (fn, name) => {
+  Object.defineProperty(fn, 'name', {
+    value: name
+  });
+};
+
+const isInputElement = element => {
+  return element instanceof HTMLInputElement;
+};
+
+const preventEventsMaybe = (info, event) => {
+  if (info.preventDefault === 2) {
+    if (!isInputElement(event.target)) {
+      event.preventDefault();
+    }
+  } else if (info.preventDefault) {
+    event.preventDefault();
+  }
+  if (info.stopPropagation) {
+    event.stopPropagation();
+  }
+};
+
+const applyPointerTrackMaybe = (info, map, event) => {
+  const {
+    trackPointerEvents
+  } = info;
+  if (!trackPointerEvents) {
+    return;
+  }
+  const {
+    pointerId,
+    target
+  } = event;
+  target.setPointerCapture(pointerId);
+  const [pointerMoveKey, pointerUpKey] = trackPointerEvents;
+  target.addEventListener(PointerMove, map[pointerMoveKey]);
+  target.addEventListener(lostpointercapture, map[pointerUpKey]);
+};
+const createFn = (info, map) => {
+  const fn = event => {
+    if (enabled()) {
+      return;
+    }
+    const uid = getComponentUidFromEvent(event);
+    const args = getEventListenerArgs(info.params, event);
+    preventEventsMaybe(info, event);
+    applyDragInfoMaybe(event);
+    applyPointerTrackMaybe(info, map, event);
+    if (args.length === 0) {
+      return;
+    }
+    const ipc = getIpc();
+    ipc.send('Viewlet.executeViewletCommand', uid, ...args);
+  };
+  nameAnonymousFunction(fn, info.name);
+  if (info.passive) {
+    // TODO avoid mutating function property, maybe return an object with function and options
+    fn.passive = true;
+  }
+  if (info.capture) {
+    // TODO avoid mutating function property, maybe return an object with function and options
+    fn.capture = true;
+  }
+  return fn;
+};
+
+const listeners = Object.create(null);
+const registerEventListeners = (id, eventListeners) => {
+  const map = Object.create(null);
+  for (const info of eventListeners) {
+    const fn = createFn(info, map);
+    map[info.name] = fn;
+  }
+  listeners[id] = map;
+};
+const getEventListenerMap = id => {
+  const map = listeners[id];
+  return map;
+};
+
+const clearNode = $Node => {
+  $Node.textContent = '';
 };
 
 const Audio$2 = 'audio';
@@ -364,67 +696,35 @@ const ElementTagMap = {
 
 const {
   getElementTag
-} = ElementTagMap;
-
-const getEventListenerOptions = (eventName, value) => {
-  if (value.passive) {
-    return {
-      passive: true
-    };
-  }
-  if (value.capture) {
-    return {
-      capture: true
-    };
-  }
-  switch (eventName) {
-    case 'wheel':
-      return {
-        passive: true
-      };
-    default:
-      return undefined;
-  }
-};
-
-const uidSymbol = Symbol('uid');
-
-const getUidTarget = $Element => {
-  while ($Element) {
-    if ($Element[uidSymbol]) {
-      return $Element;
-    }
-    $Element = $Element.parentNode;
-  }
-  return undefined;
-};
-
-const setComponentUid = ($Element, uid) => {
-  $Element[uidSymbol] = uid;
-};
-const getComponentUid = $Element => {
-  const $Target = getUidTarget($Element);
-  if (!$Target) {
-    return 0;
-  }
-  return $Target[uidSymbol];
-};
-const getComponentUidFromEvent = event => {
-  const {
-    currentTarget,
-    target
-  } = event;
-  return getComponentUid(currentTarget || target);
-};
+} = ElementTagMap;
 
-const state$1 = {
-  ipc: undefined
+const instances = Object.create(null);
+const get$1 = viewletId => {
+  return instances[viewletId];
 };
-const getIpc = () => {
-  return state$1.ipc;
+const set$1 = (viewletId, instance) => {
+  instances[viewletId] = instance;
 };
-const setIpc = value => {
-  state$1.ipc = value;
+
+const getEventListenerOptions = (eventName, value) => {
+  if (value.passive) {
+    return {
+      passive: true
+    };
+  }
+  if (value.capture) {
+    return {
+      capture: true
+    };
+  }
+  switch (eventName) {
+    case 'wheel':
+      return {
+        passive: true
+      };
+    default:
+      return undefined;
+  }
 };
 
 const cache = new Map();
@@ -438,12 +738,6 @@ const get = listener => {
   return cache.get(listener);
 };
 
-const nameAnonymousFunction = (fn, name) => {
-  Object.defineProperty(fn, 'name', {
-    value: name
-  });
-};
-
 const getWrappedListener = (listener, returnValue) => {
   if (!returnValue) {
     return listener;
@@ -777,392 +1071,131 @@ const renderDomElement = (element, eventMap, newEventMap) => {
   setProps($Element, element, eventMap, newEventMap);
   return $Element;
 };
-const renderReferenceNode = element => {
-  const instance = get$1(element.uid);
-  if (!instance || !instance.state) {
-    return document.createTextNode('Reference node not found');
-  }
-  const $Node = instance.state.$Viewlet;
-  return $Node;
-};
-const render$1 = (element, eventMap, newEventMap) => {
-  switch (element.type) {
-    case Reference:
-      return renderReferenceNode(element);
-    case Text:
-      return renderDomTextNode(element);
-    default:
-      return renderDomElement(element, eventMap, newEventMap);
-  }
-};
-
-const renderInternal = ($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$1(element, eventMap, newEventMap);
-    if (element.childCount > 0) {
-      // @ts-expect-error
-      $Element.append(...stack.slice(0, element.childCount));
-      stack = stack.slice(element.childCount);
-    }
-    stack.unshift($Element);
-  }
-  $Parent.append(...stack);
-};
-
-// Map of property names to attribute names for cases where they differ
-const propertyToAttribute = {
-  className: 'class',
-  htmlFor: 'for',
-  ariaActivedescendant: 'aria-activedescendant',
-  ariaControls: 'aria-controls',
-  ariaLabelledBy: 'aria-labelledby',
-  ariaOwns: 'aria-owns',
-  inputType: 'type'
-};
-
-// Style properties that need to be set on element.style
-const styleProperties = new Set(['width', 'height', 'top', 'left', 'marginTop', 'paddingLeft', 'paddingRight']);
-const removeAttribute = ($Element, key) => {
-  // Handle style properties
-  if (styleProperties.has(key)) {
-    // @ts-ignore - dynamic style property access
-    $Element.style[key] = '';
-    return;
-  }
-  const attributeName = propertyToAttribute[key] || key;
-  $Element.removeAttribute(attributeName);
-};
-const setText = ($Element, value) => {
-  $Element.nodeValue = value;
-};
-const removeChild = ($Element, index) => {
-  const $Child = $Element.childNodes[index];
-  if ($Child) {
-    $Child.remove();
-  }
-};
-const add$1 = ($Element, nodes, eventMap = {}) => {
-  renderInternal($Element, nodes, eventMap, eventMap);
-};
-const replace = ($Element, nodes, eventMap = {}) => {
-  // Create a temporary container to render the new nodes
-  const $Temp = document.createElement('div');
-  renderInternal($Temp, nodes, eventMap, eventMap);
-  // Replace the current element with the new node(s)
-  const $NewNode = $Temp.firstChild;
-  if (!$NewNode) {
-    // No node was created, just remove the old element
-    $Element.remove();
-    return $Element;
-  }
-  $Element.replaceWith($NewNode);
-  return $NewNode;
-};
-
-const SetText = 1;
-const Replace = 2;
-const SetAttribute = 3;
-const RemoveAttribute = 4;
-const Add = 6;
-const NavigateChild = 7;
-const NavigateParent = 8;
-const RemoveChild = 9;
-const NavigateSibling = 10;
-const SetReferenceNodeUid = 11;
-
-const dragInfos = Object.create(null);
-const setDragInfo = (id, data) => {
-  dragInfos[id] = data;
-};
-const getDragInfo = id => {
-  return dragInfos[id];
-};
-const removeDragInfo = id => {
-  delete dragInfos[id];
-};
-const isDragInfoOld = data => {
-  return Array.isArray(data);
-};
-
-const setDragImage = (dataTransfer, label) => {
-  const dragImage = document.createElement('div');
-  dragImage.className = 'DragImage';
-  dragImage.textContent = label;
-  document.body.append(dragImage);
-  dataTransfer.setDragImage(dragImage, -10, -10);
-  const handleTimeOut = () => {
-    dragImage.remove();
-  };
-  setTimeout(handleTimeOut, 0);
-};
-
-const applyDragInfoMaybe = event => {
-  const {
-    dataTransfer,
-    target
-  } = event;
-  if (dataTransfer) {
-    const uid = getComponentUid(target);
-    const dragInfo = getDragInfo(uid);
-    if (!dragInfo) {
-      return;
-    }
-    if (isDragInfoOld(dragInfo)) {
-      for (const item of dragInfo) {
-        dataTransfer.setData(item.type, item.data);
-      }
-    } else {
-      for (const item of dragInfo.items) {
-        dataTransfer.items.add(item.data, item.type);
-      }
-      if (dragInfo.label) {
-        setDragImage(dataTransfer, dragInfo.label);
-      }
-    }
-  }
-};
-
-const PointerMove = 'pointermove';
-const lostpointercapture = 'lostpointercapture';
-
-let ignore = false;
-const startIgnore = () => {
-  ignore = true;
-};
-const stopIgnore = () => {
-  ignore = false;
-};
-const enabled = () => {
-  return ignore;
-};
-
-let id = 0;
-const create = () => {
-  return ++id;
-};
-
-const state = Object.create(null);
-const acquire = id => {
-  const promise = state[id];
-  delete state[id];
-  return promise;
-};
-const getFileHandles = async ids => {
-  const promises = ids.map(acquire);
-  const handles = await Promise.all(promises);
-  return handles;
-};
-const add = promise => {
-  const id = create();
-  state[id] = promise;
-  return id;
-};
-const addFileHandle = fileHandle => {
-  const promise = Promise.resolve(fileHandle);
-  return add(promise);
-};
-
-const unwrapItemString = async item => {
-  const {
-    resolve,
-    promise
-  } = Promise.withResolvers();
-  item.getAsString(resolve);
-  const value = await promise;
-  return {
-    kind: 'string',
-    type: item.type,
-    value
-  };
-};
-const unwrapItemFile = async item => {
-  // @ts-ignore
-  const file = await item.getAsFileSystemHandle();
-  return {
-    kind: 'file',
-    type: item.type,
-    value: file
-  };
-};
-const unknownItem = {
-  kind: 'unknown',
-  type: '',
-  value: ''
-};
-const unwrapItem = item => {
-  switch (item.kind) {
-    case 'file':
-      return unwrapItemFile(item);
-    case 'string':
-      return unwrapItemString(item);
-    default:
-      return unknownItem;
-  }
-};
-const handleDataTransferFiles = event => {
-  if (!event.dataTransfer) {
-    return [];
+const renderReferenceNode = element => {
+  const instance = get$1(element.uid);
+  if (!instance || !instance.state) {
+    return document.createTextNode('Reference node not found');
   }
-  const items = [...event.dataTransfer.items];
-  const promises = items.map(unwrapItem);
-  const ids = promises.map(promise => add(promise));
-  return ids;
+  const $Node = instance.state.$Viewlet;
+  return $Node;
 };
-const getEventListenerArg = (param, event) => {
-  switch (param) {
-    case 'event.altKey':
-      return event.altKey;
-    case 'event.button':
-      return event.button;
-    case 'event.clientX':
-      return event.clientX;
-    case 'event.clientY':
-      return event.clientY;
-    case 'event.ctrlKey':
-      return event.ctrlKey;
-    case 'event.data':
-      return event.data;
-    case 'event.dataTransfer.files':
-      return event.dataTransfer.files;
-    case 'event.dataTransfer.files2':
-      return handleDataTransferFiles(event);
-    case 'event.defaultPrevented':
-      return event.defaultPrevented;
-    case 'event.deltaMode':
-      return event.deltaMode;
-    case 'event.deltaX':
-      return event.deltaX;
-    case 'event.deltaY':
-      return event.deltaY;
-    case 'event.detail':
-      return event.detail;
-    case 'event.inputType':
-      return event.inputType;
-    case 'event.isTrusted':
-      return event.isTrusted;
-    case 'event.key':
-      return event.key;
-    case 'event.shiftKey':
-      return event.shiftKey;
-    case 'event.target.checked':
-      return event.target.checked;
-    case 'event.target.className':
-      return event.target.className;
-    case 'event.target.href':
-      return event.target.href;
-    case 'event.target.name':
-      return event.target.name || '';
-    case 'event.target.nodeName':
-      return event.target.nodeName;
-    case 'event.target.scrollTop':
-      return event.target.scrollTop;
-    case 'event.target.selectionEnd':
-      return event.target.selectionEnd;
-    case 'event.target.selectionStart':
-      return event.target.selectionStart;
-    case 'event.target.src':
-      return event.target.src;
-    case 'event.target.value':
-      return event.target.value;
-    case 'event.x':
-      return event.x;
-    case 'event.y':
-      return event.y;
+const render$1 = (element, eventMap, newEventMap) => {
+  switch (element.type) {
+    case Reference:
+      return renderReferenceNode(element);
+    case Text:
+      return renderDomTextNode(element);
     default:
-      if (typeof param === 'string' && param.startsWith('event.target.dataset')) {
-        const rest = param.slice('event.target.dataset.'.length);
-        return event.target.dataset[rest];
-      }
-      return param;
+      return renderDomElement(element, eventMap, newEventMap);
   }
 };
 
-const getEventListenerArgs = (params, event) => {
-  const serialized = [];
-  for (const param of params) {
-    serialized.push(getEventListenerArg(param, event));
+const renderInternal = ($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$1(element, eventMap, newEventMap);
+    if (element.childCount > 0) {
+      // @ts-expect-error
+      $Element.append(...stack.slice(0, element.childCount));
+      stack = stack.slice(element.childCount);
+    }
+    stack.unshift($Element);
   }
-  return serialized;
+  $Parent.append(...stack);
 };
 
-const isInputElement = element => {
-  return element instanceof HTMLInputElement;
+const renderInto = ($Parent, dom, eventMap = {}) => {
+  clearNode($Parent);
+  renderInternal($Parent, dom, eventMap);
 };
 
-const preventEventsMaybe = (info, event) => {
-  if (info.preventDefault === 2) {
-    if (!isInputElement(event.target)) {
-      event.preventDefault();
-    }
-  } else if (info.preventDefault) {
-    event.preventDefault();
-  }
-  if (info.stopPropagation) {
-    event.stopPropagation();
+/**
+ *
+ * @param {any[]} elements
+ * @returns
+ */
+const render = (elements, eventMap = {}, newEventMap = {}) => {
+  const $Root = document.createElement('div');
+  renderInternal($Root, elements, eventMap, newEventMap);
+  return $Root;
+};
+
+const rememberFocus2 = ($Viewlet, dom, eventMap, uid = 0) => {
+  if (uid) {
+    const newEventMap = getEventListenerMap(uid);
+    const $New = render(dom, eventMap, newEventMap).firstChild;
+    setComponentUid($New, uid);
+    $Viewlet.replaceWith($New);
+    $Viewlet = $New;
+  } else {
+    renderInto($Viewlet, dom, eventMap);
   }
+  return $Viewlet;
 };
 
-const applyPointerTrackMaybe = (info, map, event) => {
-  const {
-    trackPointerEvents
-  } = info;
-  if (!trackPointerEvents) {
+// Map of property names to attribute names for cases where they differ
+const propertyToAttribute = {
+  className: 'class',
+  htmlFor: 'for',
+  ariaActivedescendant: 'aria-activedescendant',
+  ariaControls: 'aria-controls',
+  ariaLabelledBy: 'aria-labelledby',
+  ariaOwns: 'aria-owns',
+  inputType: 'type'
+};
+
+// Style properties that need to be set on element.style
+const styleProperties = new Set(['width', 'height', 'top', 'left', 'marginTop', 'paddingLeft', 'paddingRight']);
+const removeAttribute = ($Element, key) => {
+  // Handle style properties
+  if (styleProperties.has(key)) {
+    // @ts-ignore - dynamic style property access
+    $Element.style[key] = '';
     return;
   }
-  const {
-    pointerId,
-    target
-  } = event;
-  target.setPointerCapture(pointerId);
-  const [pointerMoveKey, pointerUpKey] = trackPointerEvents;
-  target.addEventListener(PointerMove, map[pointerMoveKey]);
-  target.addEventListener(lostpointercapture, map[pointerUpKey]);
+  const attributeName = propertyToAttribute[key] || key;
+  $Element.removeAttribute(attributeName);
 };
-const createFn = (info, map) => {
-  const fn = event => {
-    if (enabled()) {
-      return;
-    }
-    const uid = getComponentUidFromEvent(event);
-    const args = getEventListenerArgs(info.params, event);
-    preventEventsMaybe(info, event);
-    applyDragInfoMaybe(event);
-    applyPointerTrackMaybe(info, map, event);
-    if (args.length === 0) {
-      return;
-    }
-    const ipc = getIpc();
-    ipc.send('Viewlet.executeViewletCommand', uid, ...args);
-  };
-  nameAnonymousFunction(fn, info.name);
-  if (info.passive) {
-    // TODO avoid mutating function property, maybe return an object with function and options
-    fn.passive = true;
-  }
-  if (info.capture) {
-    // TODO avoid mutating function property, maybe return an object with function and options
-    fn.capture = true;
-  }
-  return fn;
+const setText = ($Element, value) => {
+  $Element.nodeValue = value;
 };
-
-const listeners = Object.create(null);
-const registerEventListeners = (id, eventListeners) => {
-  const map = Object.create(null);
-  for (const info of eventListeners) {
-    const fn = createFn(info, map);
-    map[info.name] = fn;
+const removeChild = ($Element, index) => {
+  const $Child = $Element.childNodes[index];
+  if ($Child) {
+    $Child.remove();
   }
-  listeners[id] = map;
 };
-const getEventListenerMap = id => {
-  const map = listeners[id];
-  return map;
+const add = ($Element, nodes, eventMap = {}) => {
+  renderInternal($Element, nodes, eventMap, eventMap);
+};
+const replace = ($Element, nodes, eventMap = {}) => {
+  // Create a temporary container to render the new nodes
+  const $Temp = document.createElement('div');
+  renderInternal($Temp, nodes, eventMap, eventMap);
+  // Replace the current element with the new node(s)
+  const $NewNode = $Temp.firstChild;
+  if (!$NewNode) {
+    // No node was created, just remove the old element
+    $Element.remove();
+    return $Element;
+  }
+  $Element.replaceWith($NewNode);
+  return $NewNode;
 };
 
+const SetText = 1;
+const Replace = 2;
+const SetAttribute = 3;
+const RemoveAttribute = 4;
+const Add = 6;
+const NavigateChild = 7;
+const NavigateParent = 8;
+const RemoveChild = 9;
+const NavigateSibling = 10;
+const SetReferenceNodeUid = 11;
+
 const applyPatch = ($Element, patches, eventMap = {}, id = 0) => {
   const events = getEventListenerMap(id) || eventMap;
   let $Current = $Element;
@@ -1171,7 +1204,7 @@ const applyPatch = ($Element, patches, eventMap = {}, id = 0) => {
     try {
       switch (patch.type) {
         case Add:
-          add$1($Current, patch.nodes, events);
+          add($Current, patch.nodes, events);
           break;
         case NavigateChild:
           {
@@ -1287,26 +1320,6 @@ const queryInputs = $Viewlet => {
   return [...$Viewlet.querySelectorAll('input, textarea, select')];
 };
 
-const clearNode = $Node => {
-  $Node.textContent = '';
-};
-
-const renderInto = ($Parent, dom, eventMap = {}) => {
-  clearNode($Parent);
-  renderInternal($Parent, dom, eventMap);
-};
-
-/**
- *
- * @param {any[]} elements
- * @returns
- */
-const render = (elements, eventMap = {}, newEventMap = {}) => {
-  const $Root = document.createElement('div');
-  renderInternal($Root, elements, eventMap, newEventMap);
-  return $Root;
-};
-
 const focusElement = $Element => {
   $Element.focus({
     preventScroll: true
@@ -1385,4 +1398,4 @@ const rememberFocus = ($Viewlet, dom, eventMap, uid = 0) => {
   return $Viewlet;
 };
 
-export { VirtualDomElements, addFileHandle, applyPatch, getComponentUid, getComponentUidFromEvent, getDragInfo, getFileHandles, get$1 as getViewletInstance, registerEventListeners, rememberFocus, removeDragInfo, render, renderInto, setComponentUid, setDragInfo, setIpc, set$1 as setViewletInstance };
+export { VirtualDomElements, addFileHandle, applyPatch, getComponentUid, getComponentUidFromEvent, getDragInfo, getFileHandles, get$1 as getViewletInstance, registerEventListeners, rememberFocus, rememberFocus2, removeDragInfo, render, renderInto, setComponentUid, setDragInfo, setIpc, set$1 as setViewletInstance };

package/dist/parts/Main/Main.d.ts

@@ -1,3 +1,4 @@
+export { rememberFocus2 } from '../RememberFocus2/RememberFocus2.ts';
 export { applyPatch } from '../ApplyPatch/ApplyPatch.ts';
 export { getComponentUid, getComponentUidFromEvent, setComponentUid, } from '../ComponentUid/ComponentUid.ts';
 export { getDragInfo, removeDragInfo, setDragInfo, } from '../DragInfo/DragInfo.ts';

package/dist/parts/RememberFocus2/RememberFocus2.d.ts

@@ -0,0 +1 @@
+export declare const rememberFocus2: ($Viewlet: HTMLElement, dom: any[], eventMap: any, uid?: number) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/virtual-dom",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lvce-editor/virtual-dom.git"