@3sln/dodo 0.0.3 → 0.0.5

package/src/vdom.js

@@ -32,32 +32,35 @@ class VNode {
 }
 
 function defaultShouldUpdate(a, b) {
-    if (a === b) return false;
-    if (a && b && typeof a === 'object' && typeof b === 'object') {
-        if (a.constructor !== b.constructor) return true;
-
-        if (Array.isArray(a)) {
-            if (a.length !== b.length) return true;
-            for (let j = 0; j < a.length; j++) {
-                if (a[j] !== b[j]) return true;
-            }
-            return false;
-        }
+  if (a === b) return false;
+  if (a && b && typeof a === 'object' && typeof b === 'object') {
+    if (a.constructor !== b.constructor) return true;
+
+    if (Array.isArray(a)) {
+      if (a.length !== b.length) return true;
+      for (let j = 0; j < a.length; j++) {
+        if (a[j] !== b[j]) return true;
+      }
+      return false;
+    }
 
-        if (a.constructor === Object) {
-            const keysA = Object.keys(a);
-            if (keysA.length !== Object.keys(b).length) return true;
-            for (const key of keysA) {
-                if (!b.hasOwnProperty(key) || a[key] !== b[key]) return true;
-            }
-            return false;
-        }
+    if (a.constructor === Object) {
+      const keysA = Object.keys(a);
+      if (keysA.length !== Object.keys(b).length) return true;
+      for (const key of keysA) {
+        if (!b.hasOwnProperty(key) || a[key] !== b[key]) return true;
+      }
+      return false;
     }
-    return true;
+  }
+  return true;
 }
 
 function isIterable(x) {
-  return Array.isArray(x) || (x != null && typeof x[Symbol.iterator] === 'function' && typeof x !== 'string');
+  return (
+    Array.isArray(x) ||
+    (x != null && typeof x[Symbol.iterator] === 'function' && typeof x !== 'string')
+  );
 }
 
 function alias(f) {
@@ -71,8 +74,10 @@ function special(o) {
 function newElementNamespace(parentNode, newNodeTag) {
   if (parentNode.namespaceURI === 'http://www.w3.org/1999/xhtml') {
     switch (newNodeTag) {
-      case 'svg': return 'http://www.w3.org/2000/svg';
-      case 'math': return 'http://www.w3.org/1998/Math/MathML';
+      case 'svg':
+        return 'http://www.w3.org/2000/svg';
+      case 'math':
+        return 'http://www.w3.org/1998/Math/MathML';
     }
   }
   return parentNode.namespaceURI ?? parentNode.host?.namespaceURI ?? 'http://www.w3.org/1999/xhtml';
@@ -80,7 +85,7 @@ function newElementNamespace(parentNode, newNodeTag) {
 
 function createElementNode(parentNode, tag, vdom) {
   const el = parentNode.ownerDocument.createElementNS(newElementNamespace(parentNode, tag), tag);
-  el[NODE_STATE] = { originalProps: {}, newVdom: vdom };
+  el[NODE_STATE] = {originalProps: {}, newVdom: vdom};
   return el;
 }
 
@@ -117,10 +122,10 @@ function removePathFromFocusWithinSet(set, newPath) {
 
 function installFocusTrackingForDocument(doc) {
   const focusWithinSet = new Set();
-  doc.addEventListener('focusin', (event) => {
+  doc.addEventListener('focusin', event => {
     addPathToFocusWithinSet(focusWithinSet, event.composedPath());
   });
-  doc.addEventListener('focusout', (event) => {
+  doc.addEventListener('focusout', event => {
     const newPath = event.relatedTarget ? event.composedPath() : [];
     removePathFromFocusWithinSet(focusWithinSet, newPath);
   });
@@ -129,27 +134,50 @@ function installFocusTrackingForDocument(doc) {
   return focusWithinSet;
 }
 
-export default (userSettings) => {
+export default userSettings => {
   const shouldUpdate = userSettings?.shouldUpdate ?? defaultShouldUpdate;
-  const isMap = userSettings?.isMap ?? ((x) => x?.constructor === Object);
-  const mapIter = userSettings?.mapIter ?? ((m) => Object.entries(m));
+  const isMap = userSettings?.isMap ?? (x => x?.constructor === Object);
+  const mapIter = userSettings?.mapIter ?? (m => Object.entries(m));
   const mapGet = userSettings?.mapGet ?? ((m, k) => m[k]);
   const mapMerge = userSettings?.mapMerge ?? ((...maps) => Object.assign({}, ...maps));
-  const newMap = userSettings?.newMap ?? ((obj) => ({...obj}));
-  const mapPut = userSettings?.mapPut ?? ((m, k, v) => { m[k] = v; return m; });
+  const newMap = userSettings?.newMap ?? (obj => ({...obj}));
+  const mapPut =
+    userSettings?.mapPut ??
+    ((m, k, v) => {
+      m[k] = v;
+      return m;
+    });
   const isSeq = userSettings?.isSeq ?? isIterable;
-  const seqIter = userSettings?.seqIter ?? ((s) => s);
-  const convertTagName = userSettings?.convertTagName ?? ((t) => t);
-  const convertPropName = userSettings?.convertPropName ?? ((p) => p);
-  const convertStyleName = userSettings?.convertStyleName ?? ((s) => s);
-  const convertDataName = userSettings?.convertDataName ?? ((d) => d);
-  const convertClassName = userSettings?.convertClassName ?? ((c) => c);
+  const seqIter = userSettings?.seqIter ?? (s => s);
+  const convertName = userSettings?.convertName ?? (x => x);
+  const convertTagName = userSettings?.convertTagName ?? convertName;
+  const convertPropName = userSettings?.convertPropName ?? convertName;
+  const convertStyleName = userSettings?.convertStyleName ?? convertName;
+  const convertDataName = userSettings?.convertDataName ?? convertName;
+  const convertClassName = userSettings?.convertClassName ?? convertName;
+  const convertHookName = userSettings?.convertHookName ?? convertName;
   const listenerKey = userSettings?.listenerKey ?? 'listener';
   const captureKey = userSettings?.captureKey ?? 'capture';
   const passiveKey = userSettings?.passiveKey ?? 'passive';
 
+  const EMPTY_MAP = newMap({});
+
+  function toIterator(iterableOrIterator) {
+    if (iterableOrIterator == null) return [][Symbol.iterator]();
+    if (typeof iterableOrIterator[Symbol.iterator] === 'function') {
+      return iterableOrIterator[Symbol.iterator]();
+    }
+    if (typeof iterableOrIterator.next === 'function') {
+      return iterableOrIterator;
+    }
+    return [iterableOrIterator][Symbol.iterator]();
+  }
+
   function flattenSeqIntoArray(array, items, excludeFalsey) {
-    for (const item of seqIter(items)) {
+    const iterator = toIterator(seqIter(items));
+    let result;
+    while (!(result = iterator.next()).done) {
+      const item = result.value;
       if (excludeFalsey && (item == null || item == false)) {
         continue;
       }
@@ -157,7 +185,7 @@ export default (userSettings) => {
       if (!isSeq(item)) {
         array.push(item);
       } else {
-        flattenSeqIntoArray(array, item);
+        flattenSeqIntoArray(array, item, excludeFalsey);
       }
     }
   }
@@ -176,7 +204,7 @@ export default (userSettings) => {
       if (!isSeq(item)) {
         array.push(item);
       } else {
-        flattenVNodeChildrenIntoArray(array, seqIter(item));
+        flattenSeqIntoArray(array, seqIter(item));
       }
     }
   }
@@ -189,37 +217,52 @@ export default (userSettings) => {
   function h(tag, props, ...children) {
     if (!isMap(props)) {
       children.unshift(props);
-      props = EMPTY_OBJECT;
+      props = EMPTY_MAP;
     }
-    return new VNode(ELEMENT_NODE, convertTagName(tag), [props ?? EMPTY_OBJECT, ...children]);
+    return new VNode(ELEMENT_NODE, convertTagName(tag), [props ?? EMPTY_MAP, ...children]);
   }
 
   function reconcileElementStyling(target, oldStyling, newStyling) {
     const style = target.style;
-    for (const [name, value] of mapIter(newStyling)) {
+    const newStylingIterator = toIterator(mapIter(newStyling));
+    let result;
+    while (!(result = newStylingIterator.next()).done) {
+      const [name, value] = result.value;
       style.setProperty(convertStyleName(name), value);
     }
-    for (const [name] of mapIter(oldStyling)) {
+    const oldStylingIterator = toIterator(mapIter(oldStyling));
+    while (!(result = oldStylingIterator.next()).done) {
+      const [name] = result.value;
       if (mapGet(newStyling, name) !== undefined) continue;
       style.removeProperty(convertStyleName(name));
     }
   }
 
   function reconcileElementAttributes(target, oldAttrs, newAttrs) {
-    for (const [name, value] of mapIter(newAttrs)) {
+    const newAttrsIterator = toIterator(mapIter(newAttrs));
+    let result;
+    while (!(result = newAttrsIterator.next()).done) {
+      const [name, value] = result.value;
       target.setAttribute(convertPropName(name), value);
     }
-    for (const [name] of mapIter(oldAttrs)) {
+    const oldAttrsIterator = toIterator(mapIter(oldAttrs));
+    while (!(result = oldAttrsIterator.next()).done) {
+      const [name] = result.value;
       if (mapGet(newAttrs, name) !== undefined) continue;
       target.removeAttribute(convertPropName(name));
     }
   }
 
   function reconcileElementDataset(target, oldDataset, newDataset) {
-    for (const [name, value] of mapIter(newDataset)) {
+    const newDatasetIterator = toIterator(mapIter(newDataset));
+    let result;
+    while (!(result = newDatasetIterator.next()).done) {
+      const [name, value] = result.value;
       target.dataset[convertDataName(name)] = value;
     }
-    for (const [name] of mapIter(oldDataset)) {
+    const oldDatasetIterator = toIterator(mapIter(oldDataset));
+    while (!(result = oldDatasetIterator.next()).done) {
+      const [name] = result.value;
       if (mapGet(newDataset, name) !== undefined) continue;
       delete target.dataset[convertDataName(name)];
     }
@@ -240,136 +283,160 @@ export default (userSettings) => {
   function reconcileElementProps(target, props) {
     const nodeState = target[NODE_STATE];
     const isHtml = target.namespaceURI === 'http://www.w3.org/1999/xhtml';
-    const oldProps = nodeState.vdom?.args[0] ?? EMPTY_OBJECT;
+    const oldProps = nodeState.vdom?.args[0] ?? EMPTY_MAP;
 
     // Handle new and changed props
-    for (const [name, newValue] of mapIter(props)) {
-        const propName = convertPropName(name);
-        const oldValue = mapGet(oldProps, name);
-
-        if (Object.is(newValue, oldValue)) continue;
-
-        switch (propName) {
-            case '$styling': {
-                if (!isMap(newValue)) throw new Error('invalid value for styling prop');
-                reconcileElementStyling(target, oldValue ?? EMPTY_OBJECT, newValue ?? EMPTY_OBJECT);
-                break;
-            }
-            case '$classes': {
-                if (!isSeq(newValue)) throw new Error('invalid value for classes prop');
-                reconcileElementClasses(target, oldValue ?? [], newValue ?? []);
-                break;
-            }
-            case '$attrs': {
-                if (!isMap(newValue)) throw new Error('invalid value for attrs prop');
-                reconcileElementAttributes(target, oldValue ?? EMPTY_OBJECT, newValue ?? EMPTY_OBJECT);
-                break;
+    const propsIterator = toIterator(mapIter(props));
+    let result;
+    while (!(result = propsIterator.next()).done) {
+      const [name, newValue] = result.value;
+      const propName = convertPropName(name);
+      const oldValue = mapGet(oldProps, name);
+
+      if (Object.is(newValue, oldValue)) continue;
+
+      switch (propName) {
+        case '$styling': {
+          if (!isMap(newValue)) throw new Error('invalid value for styling prop');
+          reconcileElementStyling(target, oldValue ?? EMPTY_MAP, newValue ?? EMPTY_MAP);
+          break;
+        }
+        case '$classes': {
+          if (!isSeq(newValue)) throw new Error('invalid value for classes prop');
+          reconcileElementClasses(target, oldValue ?? [], newValue ?? []);
+          break;
+        }
+        case '$attrs': {
+          if (!isMap(newValue)) throw new Error('invalid value for attrs prop');
+          reconcileElementAttributes(target, oldValue ?? EMPTY_MAP, newValue ?? EMPTY_MAP);
+          break;
+        }
+        case '$dataset': {
+          if (!isMap(newValue)) throw new Error('invalid value for dataset prop');
+          reconcileElementDataset(target, oldValue ?? EMPTY_MAP, newValue ?? EMPTY_MAP);
+          break;
+        }
+        default: {
+          if (isHtml) {
+            const originalProps = nodeState.originalProps;
+            if (!(propName in originalProps)) {
+              originalProps[propName] = target[propName];
             }
-            case '$dataset': {
-                if (!isMap(newValue)) throw new Error('invalid value for dataset prop');
-                reconcileElementDataset(target, oldValue ?? EMPTY_OBJECT, newValue ?? EMPTY_OBJECT);
-                break;
+            if (newValue === undefined) {
+              target[propName] = originalProps[propName];
+            } else {
+              target[propName] = newValue;
             }
-            default: {
-                if (isHtml) {
-                    const originalProps = nodeState.originalProps;
-                    if (!(propName in originalProps)) {
-                        originalProps[propName] = target[propName];
-                    }
-                    if (newValue === undefined) {
-                        target[propName] = originalProps[propName];
-                    } else {
-                        target[propName] = newValue;
-                    }
-                } else {
-                    if (newValue === undefined) {
-                        target.removeAttribute(propName);
-                    } else {
-                        target.setAttribute(propName, newValue);
-                    }
-                }
-                break;
+          } else {
+            if (newValue === undefined) {
+              target.removeAttribute(propName);
+            } else {
+              target.setAttribute(propName, newValue);
             }
+          }
+          break;
         }
+      }
     }
 
     // Handle removed props
-    for (const [name, oldValue] of mapIter(oldProps)) {
-        if (mapGet(props, name) !== undefined) continue; // it wasn't removed
-
-        const propName = convertPropName(name);
-        switch (propName) {
-            case '$styling':
-                reconcileElementStyling(target, oldValue ?? EMPTY_OBJECT, EMPTY_OBJECT);
-                break;
-            case '$classes':
-                reconcileElementClasses(target, oldValue ?? [], []);
-                break;
-            case '$attrs':
-                reconcileElementAttributes(target, oldValue ?? EMPTY_OBJECT, EMPTY_OBJECT);
-                break;
-            case '$dataset':
-                reconcileElementDataset(target, oldValue ?? EMPTY_OBJECT, EMPTY_OBJECT);
-                break;
-            default: {
-                if (isHtml) {
-                    const originalProps = nodeState.originalProps;
-                    if (propName in originalProps) {
-                        target[propName] = originalProps[propName];
-                        delete originalProps[propName];
-                    }
-                } else {
-                    target.removeAttribute(propName);
-                }
-                break;
+    const oldPropsIterator = toIterator(mapIter(oldProps));
+    while (!(result = oldPropsIterator.next()).done) {
+      const [name, oldValue] = result.value;
+      if (mapGet(props, name) !== undefined) continue; // it wasn't removed
+
+      const propName = convertPropName(name);
+      switch (propName) {
+        case '$styling':
+          reconcileElementStyling(target, oldValue ?? EMPTY_MAP, EMPTY_MAP);
+          break;
+        case '$classes':
+          reconcileElementClasses(target, oldValue ?? [], []);
+          break;
+        case '$attrs':
+          reconcileElementAttributes(target, oldValue ?? EMPTY_MAP, EMPTY_MAP);
+          break;
+        case '$dataset':
+          reconcileElementDataset(target, oldValue ?? EMPTY_MAP, EMPTY_MAP);
+          break;
+        default: {
+          if (isHtml) {
+            const originalProps = nodeState.originalProps;
+            if (propName in originalProps) {
+              target[propName] = originalProps[propName];
+              delete originalProps[propName];
             }
+          } else {
+            target.removeAttribute(propName);
+          }
+          break;
         }
+      }
     }
   }
 
   function reconcileListeners(target, hooks) {
     const state = target[NODE_STATE];
     if (!state.vdom) {
-      for (const [name, listener] of mapIter(hooks)) {
-        if (name[0] === '$') continue;
+      const hooksIterator = toIterator(mapIter(hooks));
+      let result;
+      while (!(result = hooksIterator.next()).done) {
+        const [name, listener] = result.value;
+        const hookName = convertHookName(name);
+        if (hookName[0] === '$') continue;
         if (typeof listener === 'function') {
-          target.addEventListener(name, listener);
+          target.addEventListener(hookName, listener);
         } else if (listener != null) {
-          target.addEventListener(name, mapGet(listener, listenerKey), { 
-            capture: !!mapGet(listener, captureKey), 
-            passive: !!mapGet(listener, passiveKey) 
+          target.addEventListener(hookName, mapGet(listener, listenerKey), {
+            capture: !!mapGet(listener, captureKey),
+            passive: !!mapGet(listener, passiveKey),
           });
         }
       }
     } else {
-      const oldHooks = state.vdom.hooks ?? EMPTY_OBJECT;
-      for (const [name, listener] of mapIter(hooks)) {
-        if (name[0] === '$') continue;
+      const oldHooks = state.vdom.hooks ?? EMPTY_MAP;
+      const hooksIterator = toIterator(mapIter(hooks));
+      let result;
+      while (!(result = hooksIterator.next()).done) {
+        const [name, listener] = result.value;
+        const hookName = convertHookName(name);
+        if (hookName[0] === '$') continue;
         const oldListener = mapGet(oldHooks, name);
         if (listener === oldListener) continue;
 
         if (typeof oldListener === 'function') {
-          target.removeEventListener(name, oldListener);
+          target.removeEventListener(hookName, oldListener);
         } else if (oldListener != null) {
-          target.removeEventListener(name, mapGet(oldListener, listenerKey), !!mapGet(oldListener, captureKey));
+          target.removeEventListener(
+            hookName,
+            mapGet(oldListener, listenerKey),
+            !!mapGet(oldListener, captureKey),
+          );
         }
-        
+
         if (typeof listener === 'function') {
-          target.addEventListener(name, listener);
+          target.addEventListener(hookName, listener);
         } else if (listener != null) {
-          target.addEventListener(name, mapGet(listener, listenerKey), { 
-            capture: !!mapGet(listener, captureKey), 
-            passive: !!mapGet(listener, passiveKey) 
+          target.addEventListener(hookName, mapGet(listener, listenerKey), {
+            capture: !!mapGet(listener, captureKey),
+            passive: !!mapGet(listener, passiveKey),
           });
         }
       }
-      for (const [name] of mapIter(oldHooks)) {
-        if (name[0] === '$' || mapGet(hooks, name) !== undefined) continue;
+      const oldHooksIterator = toIterator(mapIter(oldHooks));
+      while (!(result = oldHooksIterator.next()).done) {
+        const [name] = result.value;
+        const hookName = convertHookName(name);
+        if (hookName[0] === '$' || mapGet(hooks, name) !== undefined) continue;
         const oldListener = mapGet(oldHooks, name);
         if (typeof oldListener === 'function') {
-          target.removeEventListener(name, oldListener);
+          target.removeEventListener(hookName, oldListener);
         } else if (oldListener != null) {
-          target.removeEventListener(name, mapGet(oldListener, listenerKey), !!mapGet(oldListener, captureKey));
+          target.removeEventListener(
+            hookName,
+            mapGet(oldListener, listenerKey),
+            !!mapGet(oldListener, captureKey),
+          );
         }
       }
     }
@@ -384,7 +451,7 @@ export default (userSettings) => {
     switch (newVdom.type) {
       case ELEMENT_NODE: {
         reconcileElementProps(target, args[0]);
-        reconcileElementChildren(target, args.slice(1));
+        reconcileElementChildren(target, flattenVNodeChildren(args.slice(1)));
         break;
       }
       case OPAQUE_NODE: {
@@ -395,9 +462,9 @@ export default (userSettings) => {
         const innerVdom = newVdom.tag.apply(undefined, newVdom.args);
         if (innerVdom === undefined || innerVdom === null) break;
         if (isSeq(innerVdom)) {
-          reconcileElementChildren(target, innerVdom);
+          reconcileElementChildren(target, flattenSeq(innerVdom));
         } else {
-          reconcileElementChildren(target, [innerVdom]);
+          reconcileElementChildren(target, flattenVNodeChildren([innerVdom]));
         }
         break;
       }
@@ -412,7 +479,7 @@ export default (userSettings) => {
     }
 
     if (newVdom.hooks || oldVdom?.hooks) {
-      reconcileListeners(target, newVdom.hooks ?? EMPTY_OBJECT);
+      reconcileListeners(target, newVdom.hooks ?? EMPTY_MAP);
     }
     try {
       newVdom.hooks?.$update?.(target, newVdom, oldVdom);
@@ -459,7 +526,6 @@ export default (userSettings) => {
   function cleanupTarget(target) {
     const state = target[NODE_STATE];
     if (state) {
-
       switch (state.vdom.type) {
         case ELEMENT_NODE:
           reconcileElementProps(target, {});
@@ -491,8 +557,7 @@ export default (userSettings) => {
     }
   }
 
-  function reconcileElementChildren(target, childrenIterable) {
-    const newChildren = flattenVNodeChildren(childrenIterable);
+  function reconcileElementChildren(target, newChildren) {
     const oldNodesToRemove = new Set(target.childNodes);
     const oldVNodeNodesPool = new Map();
     const oldTextNodesPool = [];
@@ -502,14 +567,21 @@ export default (userSettings) => {
         oldTextNodesPool.push(oldChild);
         continue;
       }
-      const vdom = oldChild[NODE_STATE]?.vdom;
+
+      const oldChildState = oldChild[NODE_STATE];
+      const vdom = oldChildState?.vdom;
       if (vdom === undefined) {
+        if (oldChildState?.newVdom) {
+          throw new Error(
+            'Attempt to reconcile against a target while already working on a reconciliation against that same target, this is not allowed',
+          );
+        }
         continue;
       }
 
       let oldNodesPoolForTag = oldVNodeNodesPool.get(vdom.tag);
       if (!oldNodesPoolForTag) {
-        oldNodesPoolForTag = { nodesForKey: new Map(), nodesWithoutKey: [] };
+        oldNodesPoolForTag = {nodesForKey: new Map(), nodesWithoutKey: []};
         oldVNodeNodesPool.set(vdom.tag, oldNodesPoolForTag);
       }
 
@@ -540,6 +612,9 @@ export default (userSettings) => {
               newDomNode = pool.shift();
               const state = newDomNode[NODE_STATE];
               if (shouldUpdate(state.vdom.args, newVdom.args)) {
+                if (state.vdom.hooks || newVdom.hooks) {
+                  reconcileListeners(target, newVdom.hooks);
+                }
                 state.newVdom = newVdom;
               }
             } else {
@@ -551,6 +626,9 @@ export default (userSettings) => {
               newDomNode = unkeyedOldNode;
               const state = newDomNode[NODE_STATE];
               if (shouldUpdate(state.vdom.args, newVdom.args)) {
+                if (state.vdom.hooks || newVdom.hooks) {
+                  reconcileListeners(target, newVdom.hooks);
+                }
                 state.newVdom = newVdom;
               }
             } else {
@@ -583,7 +661,11 @@ export default (userSettings) => {
           const newChild = newDomChildren[i];
           const existingChildAtPosition = target.childNodes[i];
           if (newChild !== existingChildAtPosition) {
-            (newChild.isConnected ? moveBefore : insertBefore).call(target, newChild, existingChildAtPosition);
+            (newChild.isConnected ? moveBefore : insertBefore).call(
+              target,
+              newChild,
+              existingChildAtPosition,
+            );
           }
           const state = newChild[NODE_STATE];
           if (state?.newVdom) {
@@ -668,14 +750,17 @@ export default (userSettings) => {
     }
 
     if (isSeq(vdom)) {
-      reconcileElementChildren(target, seqIter(vdom));
+      reconcileElementChildren(target, flattenSeq(vdom));
       return;
     }
 
     if (vdom instanceof VNode) {
       if (state) {
         if (state.vdom.type === vdom.type) {
-          if (shouldUpdate(state.vdom.args, vdom.args)) {
+          if (
+            shouldUpdate(state.vdom.args, vdom.args) ||
+            shouldUpdate(state.vdom.hooks, vdom.hooks)
+          ) {
             state.newVdom = vdom;
             reconcileNode(target);
           }
@@ -687,13 +772,18 @@ export default (userSettings) => {
       switch (vdom.type) {
         case ELEMENT_NODE:
         case OPAQUE_NODE:
-          if (0 !== target.nodeName.localeCompare(convertTagName(vdom.tag), undefined, { sensitivity: 'base' })) {
+          if (
+            0 !==
+            target.nodeName.localeCompare(convertTagName(vdom.tag), undefined, {
+              sensitivity: 'base',
+            })
+          ) {
             throw new Error('incompatible target for vdom');
           }
           break;
       }
 
-      target[NODE_STATE] = { originalProps: {}, newVdom: vdom };
+      target[NODE_STATE] = {originalProps: {}, newVdom: vdom};
       try {
         vdom.hooks?.$attach?.(target);
         if (vdom.type === SPECIAL_NODE) {
@@ -709,9 +799,32 @@ export default (userSettings) => {
     throw new Error('invalid vdom');
   }
 
-  return { h, alias, special, reconcile, settings: {
-    shouldUpdate, isMap, mapIter, mapGet, mapMerge, newMap, mapPut, isSeq, flattenSeq, seqIter,
-    convertTagName, convertPropName, convertStyleName, convertDataName, convertClassName,
-    listenerKey, captureKey, passiveKey
-  } };
-}
+  return {
+    h,
+    alias,
+    special,
+    reconcile,
+    settings: {
+      shouldUpdate,
+      isMap,
+      mapIter,
+      mapGet,
+      mapMerge,
+      newMap,
+      mapPut,
+      isSeq,
+      flattenSeq,
+      seqIter,
+      convertTagName,
+      convertPropName,
+      convertStyleName,
+      convertDataName,
+      convertClassName,
+      convertHookName,
+      convertName,
+      listenerKey,
+      captureKey,
+      passiveKey,
+    },
+  };
+};