@lvce-editor/renderer-process 26.0.0 → 26.1.0

package/dist/rendererProcessMain.js

@@ -1300,114 +1300,91 @@ const setStyle = ($Element, styleString) => {
   }
 };
 
+const optionalAttributeProps = new Map([['ariaActivedescendant', 'aria-activedescendant'], ['ariaOwns', 'aria-owns']]);
+const mappedAttributeProps = new Map([['ariaControls', 'aria-controls'], ['ariaLabelledBy', 'aria-labelledby']]);
+const pixelStyleProps = new Set(['left', 'marginTop', 'paddingLeft', 'paddingRight', 'top']);
+const eventProps = new Set(['onBlur', 'onChange', 'onClick', 'onContextMenu', 'onBeforeInput', 'onDblClick', 'onDragEnd', 'onDragEnter', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onFocus', 'onFocusIn', 'onFocusOut', 'onInput', 'onKeydown', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onPointerDown', 'onPointerMove', 'onPointerOut', 'onPointerOver', 'onScroll', 'onSelectionChange', 'onSubmit', 'onWheel']);
+const setOptionalAttribute = ($Element, attributeName, value) => {
+  if (value) {
+    $Element.setAttribute(attributeName, value);
+    return;
+  }
+  $Element.removeAttribute(attributeName);
+};
+const setDimension = ($Element, key, value) => {
+  if ($Element instanceof HTMLImageElement) {
+    $Element[key] = value;
+    return;
+  }
+  $Element.style[key] = typeof value === 'number' ? `${value}px` : value;
+};
+const setPixelStyle = ($Element, key, value) => {
+  $Element.style[key] = typeof value === 'number' ? `${value}px` : value;
+};
+const setEventProp = ($Element, key, value, eventMap, newEventMap) => {
+  if (!eventMap || !value) {
+    return;
+  }
+  const eventName = key.slice(2).toLowerCase();
+  attachEvent$1($Element, eventMap, eventName, value, newEventMap);
+};
 const setProp = ($Element, key, value, eventMap, newEventMap) => {
-  switch (key) {
-    case 'ariaActivedescendant':
-      if (value) {
-        $Element.setAttribute('aria-activedescendant', value);
-      } else {
-        $Element.removeAttribute('aria-activedescendant');
-      }
-      break;
-    case 'ariaControls':
-      $Element.setAttribute('aria-controls', value);
-      break;
-    case 'ariaLabelledBy':
-      $Element.setAttribute('aria-labelledby', value);
-      break;
-    case 'ariaOwns':
-      // TODO remove this once idl is supported
-      if (value) {
-        $Element.setAttribute('aria-owns', value);
-      } else {
-        $Element.removeAttribute('aria-owns');
-      }
-      break;
-    case 'childCount':
-    case 'type':
-      break;
-    case 'height':
-    case 'width':
-      if ($Element instanceof HTMLImageElement) {
-        $Element[key] = value;
-      } else if (typeof value === 'number') {
-        $Element.style[key] = `${value}px`;
-      } else {
-        $Element.style[key] = value;
-      }
-      break;
-    case 'id':
-      if (value) {
-        $Element[key] = value;
-      } else {
-        $Element.removeAttribute(key);
-      }
-      break;
-    case 'inputType':
-      // @ts-ignore
-      $Element.type = value;
-      break;
-    case 'left':
-    case 'marginTop':
-    case 'paddingLeft':
-    case 'paddingRight':
-    case 'top':
-      $Element.style[key] = typeof value === 'number' ? `${value}px` : value;
-      break;
-    case 'maskImage':
-      $Element.style.maskImage = `url('${value}')`;
-      $Element.style.webkitMaskImage = `url('${value}')`;
-      break;
-    case 'onBlur':
-    case 'onChange':
-    case 'onClick':
-    case 'onContextMenu':
-    case 'onDblClick':
-    case 'onDragEnd':
-    case 'onDragEnter':
-    case 'onDragLeave':
-    case 'onDragOver':
-    case 'onDragStart':
-    case 'onDrop':
-    case 'onFocus':
-    case 'onFocusIn':
-    case 'onFocusOut':
-    case 'onInput':
-    case 'onKeydown':
-    case 'onKeyDown':
-    case 'onKeyUp':
-    case 'onMouseDown':
-    case 'onMouseMove':
-    case 'onMouseOut':
-    case 'onMouseOver':
-    case 'onMouseUp':
-    case 'onPointerDown':
-    case 'onPointerMove':
-    case 'onPointerOut':
-    case 'onPointerOver':
-    case 'onScroll':
-    case 'onSelectionChange':
-    case 'onSubmit':
-    case 'onWheel':
-      const eventName = key.slice(2).toLowerCase();
-      if (!eventMap || !value) {
-        return;
-      }
-      attachEvent$1($Element, eventMap, eventName, value, newEventMap);
-      break;
-    case 'style':
-      setStyle($Element, value);
-      break;
-    case 'translate':
-      $Element.style[key] = value;
-      break;
-    default:
-      if (key.startsWith('data-')) {
-        $Element.dataset[key.slice('data-'.length)] = value;
-      } else {
-        $Element[key] = value;
-      }
+  const optionalAttributeName = optionalAttributeProps.get(key);
+  if (optionalAttributeName) {
+    setOptionalAttribute($Element, optionalAttributeName, value);
+    return;
+  }
+  const mappedAttributeName = mappedAttributeProps.get(key);
+  if (mappedAttributeName) {
+    $Element.setAttribute(mappedAttributeName, value);
+    return;
+  }
+  if (key === 'childCount' || key === 'type') {
+    return;
+  }
+  if (key === 'height' || key === 'width') {
+    setDimension($Element, key, value);
+    return;
+  }
+  if (key === 'id') {
+    if (value) {
+      $Element[key] = value;
+    } else {
+      $Element.removeAttribute(key);
+    }
+    return;
   }
+  if (key === 'inputType') {
+    // @ts-ignore
+    $Element.type = value;
+    return;
+  }
+  if (pixelStyleProps.has(key)) {
+    setPixelStyle($Element, key, value);
+    return;
+  }
+  if (key === 'maskImage') {
+    $Element.style.maskImage = `url('${value}')`;
+    $Element.style.webkitMaskImage = `url('${value}')`;
+    return;
+  }
+  if (eventProps.has(key)) {
+    setEventProp($Element, key, value, eventMap, newEventMap);
+    return;
+  }
+  if (key === 'style') {
+    setStyle($Element, value);
+    return;
+  }
+  if (key === 'translate') {
+    $Element.style[key] = value;
+    return;
+  }
+  if (key.startsWith('data-')) {
+    $Element.dataset[key.slice('data-'.length)] = value;
+    return;
+  }
+  $Element[key] = value;
 };
 
 const setProps = ($Element, props, eventMap, newEventMap) => {
@@ -1552,117 +1529,136 @@ const RemoveChild = 9;
 const NavigateSibling = 10;
 const SetReferenceNodeUid = 11;
 
+const handleNavigateChild = (state, patches, patchIndex) => {
+  const patch = patches[patchIndex];
+  const $Children = state.current.childNodes;
+  const $Child = $Children[patch.index];
+  if ($Child) {
+    state.current = $Child;
+    return true;
+  }
+  const nextPatch = patches[patchIndex + 1];
+  if (nextPatch && nextPatch.type === Replace && patch.index === $Children.length) {
+    const $Placeholder = document.createComment('virtual-dom-placeholder');
+    state.current.append($Placeholder);
+    state.current = $Placeholder;
+    return true;
+  }
+  console.error('Cannot navigate to child: child not found at index', {
+    $Current: state.current,
+    index: patch.index,
+    childCount: $Children.length
+  });
+  return false;
+};
+const handleNavigateParent = state => {
+  const $Parent = state.current.parentNode;
+  if (!$Parent) {
+    console.error('Cannot navigate to parent: current node has no parent', {
+      $Current: state.current
+    });
+    return false;
+  }
+  state.current = $Parent;
+  return true;
+};
+const handleNavigateSibling = (state, patch, $Element, patchIndex) => {
+  const $Parent = state.current.parentNode;
+  if (!$Parent) {
+    console.error('Cannot navigate to sibling: current node has no parent', {
+      patchIndex
+    });
+    return false;
+  }
+  let $Sibling = $Parent.childNodes[patch.index];
+  if (!$Sibling && !state.hasAppliedMutation && state.current !== $Element) {
+    $Sibling = $Element.childNodes[patch.index];
+  }
+  if (!$Sibling) {
+    console.error('Cannot navigate to sibling: sibling not found at index', {
+      $Parent,
+      index: patch.index,
+      childCount: $Parent.childNodes.length
+    });
+    return false;
+  }
+  state.current = $Sibling;
+  return true;
+};
+const handleSetReferenceNodeUid = (state, patch) => {
+  const instance = get$a(patch.uid);
+  if (!instance || !instance.state) {
+    console.error('Cannot set reference node uid: instance not found', {
+      uid: patch.uid
+    });
+    return false;
+  }
+  const $NewNode = instance.state.$Viewlet;
+  // @ts-ignore
+  state.current.replaceWith($NewNode);
+  state.current = $NewNode;
+  state.hasAppliedMutation = true;
+  return true;
+};
+const handleNavigationPatch = (state, patch, patches, patchIndex, $Element) => {
+  switch (patch.type) {
+    case NavigateChild:
+      return handleNavigateChild(state, patches, patchIndex);
+    case NavigateParent:
+      return handleNavigateParent(state);
+    case NavigateSibling:
+      return handleNavigateSibling(state, patch, $Element, patchIndex);
+    default:
+      return true;
+  }
+};
+const applyMutationPatch = (state, patch, events) => {
+  switch (patch.type) {
+    case Add:
+      add(state.current, patch.nodes, events);
+      state.hasAppliedMutation = true;
+      break;
+    case RemoveAttribute:
+      removeAttribute(state.current, patch.key);
+      state.hasAppliedMutation = true;
+      break;
+    case RemoveChild:
+      removeChild(state.current, patch.index);
+      state.hasAppliedMutation = true;
+      break;
+    case Replace:
+      state.current = replace(state.current, patch.nodes, events);
+      state.hasAppliedMutation = true;
+      break;
+    case SetAttribute:
+      setProp(state.current, patch.key, patch.value, events);
+      state.hasAppliedMutation = true;
+      break;
+    case SetText:
+      setText$3(state.current, patch.value);
+      state.hasAppliedMutation = true;
+      break;
+  }
+};
 const applyPatch = ($Element, patches, eventMap = {}, id = 0) => {
   const events = getEventListenerMap(id) || eventMap;
-  let $Current = $Element;
-  let hasAppliedMutation = false;
+  const state = {
+    current: $Element,
+    hasAppliedMutation: false
+  };
   for (let patchIndex = 0; patchIndex < patches.length; patchIndex++) {
     const patch = patches[patchIndex];
     try {
-      switch (patch.type) {
-        case Add:
-          add($Current, patch.nodes, events);
-          hasAppliedMutation = true;
-          break;
-        case NavigateChild:
-          {
-            const $Children = $Current.childNodes;
-            const $Child = $Children[patch.index];
-            if (!$Child) {
-              const nextPatch = patches[patchIndex + 1];
-              if (nextPatch && nextPatch.type === Replace && patch.index === $Children.length) {
-                const $Placeholder = document.createComment('virtual-dom-placeholder');
-                $Current.append($Placeholder);
-                $Current = $Placeholder;
-                break;
-              }
-              console.error('Cannot navigate to child: child not found at index', {
-                $Current,
-                index: patch.index,
-                childCount: $Children.length
-              });
-              return;
-            }
-            $Current = $Child;
-            break;
-          }
-        case NavigateParent:
-          {
-            const $Parent = $Current.parentNode;
-            if (!$Parent) {
-              console.error('Cannot navigate to parent: current node has no parent', {
-                $Current
-              });
-              return;
-            }
-            $Current = $Parent;
-            break;
-          }
-        case NavigateSibling:
-          {
-            const $Parent = $Current.parentNode;
-            if (!$Parent) {
-              console.error('Cannot navigate to sibling: current node has no parent', {
-                patchIndex
-              });
-              return;
-            }
-            let $Sibling = $Parent.childNodes[patch.index];
-            if (!$Sibling && !hasAppliedMutation && $Current !== $Element) {
-              $Sibling = $Element.childNodes[patch.index];
-            }
-            $Current = $Sibling;
-            if (!$Current) {
-              console.error('Cannot navigate to sibling: sibling not found at index', {
-                $Parent,
-                index: patch.index,
-                childCount: $Parent.childNodes.length
-              });
-              return;
-            }
-            break;
-          }
-        case RemoveAttribute:
-          removeAttribute($Current, patch.key);
-          hasAppliedMutation = true;
-          break;
-        case RemoveChild:
-          removeChild($Current, patch.index);
-          hasAppliedMutation = true;
-          break;
-        case Replace:
-          $Current = replace($Current, patch.nodes, events);
-          hasAppliedMutation = true;
-          break;
-        case SetAttribute:
-          setProp($Current, patch.key, patch.value, events);
-          hasAppliedMutation = true;
-          break;
-        case SetReferenceNodeUid:
-          {
-            // Get the new reference node instance
-            const instance = get$a(patch.uid);
-            if (!instance || !instance.state) {
-              console.error('Cannot set reference node uid: instance not found', {
-                uid: patch.uid
-              });
-              return;
-            }
-            const $NewNode = instance.state.$Viewlet;
-            // Replace the current reference node with the new viewlet
-            // @ts-ignore
-            $Current.replaceWith($NewNode);
-            $Current = $NewNode;
-            hasAppliedMutation = true;
-            break;
-          }
-        case SetText:
-          setText$3($Current, patch.value);
-          hasAppliedMutation = true;
-          break;
-        default:
-          break;
+      if (!handleNavigationPatch(state, patch, patches, patchIndex, $Element)) {
+        return;
       }
+      if (patch.type === SetReferenceNodeUid) {
+        if (!handleSetReferenceNodeUid(state, patch)) {
+          return;
+        }
+        continue;
+      }
+      applyMutationPatch(state, patch, events);
     } catch (error) {
       console.error('Error applying patch at index ' + patchIndex, patch, error);
       throw error;
@@ -1693,71 +1689,96 @@ const focusElement = $Element => {
     preventScroll: true
   });
 };
-const rememberFocus$1 = ($Viewlet, dom, eventMap, uid = 0) => {
-  startIgnore();
-  const oldLeft = $Viewlet.style.left;
-  const oldTop = $Viewlet.style.top;
-  const oldWidth = $Viewlet.style.width;
-  const oldHeight = $Viewlet.style.height;
-  const activeElement = getActiveElementInside($Viewlet);
-  const isTreeFocused = activeElement?.getAttribute('role') === 'tree';
-  const isRootTree = $Viewlet.getAttribute('role') === 'tree' && activeElement === $Viewlet;
-  const focused = activeElement?.getAttribute('name');
-  const $Hidden = document.createElement('div');
-  $Hidden.style.display = 'none';
-  if (focused) {
-    if (document.body) {
-      document.body.append($Hidden);
-    }
-    // @ts-ignore
-    $Hidden.append(activeElement);
-  }
+const getInputMap = $Viewlet => {
   const $$Inputs = queryInputs($Viewlet);
   const inputMap = Object.create(null);
   for (const $Input of $$Inputs) {
     inputMap[$Input.name] = $Input.value;
   }
-  if (uid) {
-    const newEventMap = getEventListenerMap(uid);
-    const $New = render(dom, eventMap, newEventMap).firstChild;
-    setComponentUid($New, uid);
-    const $$NewInputs = queryInputs($New);
-    for (const $Input of $$NewInputs) {
-      $Input.value = inputMap[$Input.name] || $Input.value || '';
-    }
-    $Viewlet.replaceWith($New);
-    if (focused) {
-      const $NewFocused = $New.querySelector(`[name="${focused}"]`);
-      if ($NewFocused) {
-        const $Previous = $Hidden.firstChild;
-        $Previous.className = $NewFocused.className;
-        $Previous.placeholder = $NewFocused.placeholder;
-        if ($NewFocused.childNodes) {
-          $Previous.replaceChildren(...$NewFocused.childNodes);
-        }
-        $NewFocused.replaceWith($Previous);
-      }
-    }
-    $Hidden.remove();
-    $Viewlet = $New;
-  } else {
-    renderInto($Viewlet, dom, eventMap);
+  return inputMap;
+};
+const createHiddenContainer = (activeElement, focused) => {
+  const $Hidden = document.createElement('div');
+  $Hidden.style.display = 'none';
+  if (focused && activeElement && document.body) {
+    document.body.append($Hidden);
+    $Hidden.append(activeElement);
   }
+  return $Hidden;
+};
+const restoreFocusedElement = ($Hidden, $New, focused) => {
+  const $NewFocused = $New.querySelector(`[name="${focused}"]`);
+  if (!$NewFocused) {
+    return;
+  }
+  const $Previous = $Hidden.firstChild;
+  if (!$Previous) {
+    return;
+  }
+  $Previous.className = $NewFocused.className;
+  $Previous.placeholder = $NewFocused.placeholder;
+  if ($NewFocused.childNodes) {
+    $Previous.replaceChildren(...$NewFocused.childNodes);
+  }
+  $NewFocused.replaceWith($Previous);
+};
+const renderWithUid = ($Viewlet, dom, eventMap, uid, inputMap, focused, $Hidden) => {
+  const newEventMap = getEventListenerMap(uid);
+  const $New = render(dom, eventMap, newEventMap).firstChild;
+  setComponentUid($New, uid);
+  const $$NewInputs = queryInputs($New);
+  for (const $Input of $$NewInputs) {
+    $Input.value = inputMap[$Input.name] || $Input.value || '';
+  }
+  $Viewlet.replaceWith($New);
+  if (focused) {
+    restoreFocusedElement($Hidden, $New, focused);
+  }
+  return $New;
+};
+const restoreFocus = ($Viewlet, isRootTree, isTreeFocused, focused) => {
   if (isRootTree) {
     focusElement($Viewlet);
-  } else if (isTreeFocused) {
+    return;
+  }
+  if (isTreeFocused) {
     const $Tree = $Viewlet.querySelector('[role="tree"]');
     if ($Tree) {
       // @ts-ignore
       focusElement($Tree);
     }
-  } else if (focused) {
-    const $Focused = $Viewlet.querySelector(`[name="${focused}"]`);
-    if ($Focused) {
-      // @ts-ignore
-      focusElement($Focused);
-    }
+    return;
+  }
+  if (!focused) {
+    return;
+  }
+  const $Focused = $Viewlet.querySelector(`[name="${focused}"]`);
+  if ($Focused) {
+    // @ts-ignore
+    focusElement($Focused);
+  }
+};
+const rememberFocus$1 = ($Viewlet, dom, eventMap, uid = 0) => {
+  startIgnore();
+  const oldLeft = $Viewlet.style.left;
+  const oldTop = $Viewlet.style.top;
+  const oldWidth = $Viewlet.style.width;
+  const oldHeight = $Viewlet.style.height;
+  const activeElement = getActiveElementInside($Viewlet);
+  const isTreeFocused = activeElement?.getAttribute('role') === 'tree';
+  const isRootTree = $Viewlet.getAttribute('role') === 'tree' && activeElement === $Viewlet;
+  const focused = activeElement?.getAttribute('name') || null;
+  const $Hidden = createHiddenContainer(activeElement, focused);
+  const inputMap = getInputMap($Viewlet);
+  if (uid) {
+    const numericUid = Number(uid);
+    $Viewlet = renderWithUid($Viewlet, dom, eventMap, numericUid, inputMap, focused, $Hidden);
+    $Hidden.remove();
+  } else {
+    renderInto($Viewlet, dom, eventMap);
+    $Hidden.remove();
   }
+  restoreFocus($Viewlet, isRootTree, isTreeFocused, focused);
   $Viewlet.style.top = oldTop;
   $Viewlet.style.left = oldLeft;
   $Viewlet.style.height = oldHeight;
@@ -8975,6 +8996,11 @@ const setUid = (viewletId, uid) => {
   } = instance.state;
   set$3($Viewlet, uid);
 };
+const emptyFocusCallback = {
+  id: 0,
+  selector: ''
+};
+let focusCallback = emptyFocusCallback;
 const focusSelector = (viewletId, selector) => {
   const instance = get$a(viewletId);
   if (!instance) {
@@ -8987,7 +9013,16 @@ const focusSelector = (viewletId, selector) => {
   if (!$Element) {
     return;
   }
-  $Element.focus();
+  if ($Element && $Element instanceof HTMLElement) {
+    if ($Element.isConnected) {
+      $Element.focus();
+    } else {
+      focusCallback = {
+        id: viewletId,
+        selector
+      };
+    }
+  }
 };
 
 /**
@@ -9085,6 +9120,7 @@ const setPatches = (uid, patches) => {
     return;
   }
   applyPatch($Viewlet, patches, {}, uid);
+  applyLateFocusMaybe();
 };
 const waitForElement = selector => {
   const element = document.querySelector(selector);
@@ -9266,6 +9302,7 @@ const append = (parentId, childId, referenceNodes) => {
   if (childInstance.factory?.postAppend) {
     childInstance.factory.postAppend(childInstance.state);
   }
+  applyLateFocusMaybe();
 };
 const replaceChildren = (parentId, childIds) => {
   const parentInstance = get$a(parentId);
@@ -9278,11 +9315,32 @@ const replaceChildren = (parentId, childIds) => {
   }
   $Parent.replaceChildren($Fragment);
 };
+const applyLateFocusMaybe = () => {
+  if (focusCallback !== emptyFocusCallback) {
+    const {
+      id,
+      selector
+    } = focusCallback;
+    focusCallback = emptyFocusCallback;
+    const instance = get$a(id);
+    if (instance) {
+      const {
+        $Viewlet
+      } = instance.state;
+      const $Element = $Viewlet.querySelector(selector);
+      if ($Element) {
+        $Element.focus();
+        focusCallback = emptyFocusCallback;
+      }
+    }
+  }
+};
 const appendToBody = childId => {
   const $Parent = document.body;
   const childInstance = get$a(childId);
   const $Child = childInstance.state.$Viewlet;
   $Parent.append($Child);
+  applyLateFocusMaybe();
 };
 const executeCommands = commands => {
   for (const [command, ...args] of commands) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/renderer-process",
-  "version": "26.0.0",
+  "version": "26.1.0",
   "keywords": [
     "lvce-editor",
     "renderer-process"