@3sln/dodo 0.0.2 → 0.0.4

package/dodo.js

@@ -39,22 +39,25 @@ function defaultFlattenSeq(items) {
 }
 
 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')
+  );
 }
 
 export const settings = {
   shouldUpdate: defaultShouldUpdate,
-  isMap: (x) => x?.constructor === Object,
-  mapIter: (m) => Object.entries(m),
+  isMap: x => x?.constructor === Object,
+  mapIter: m => Object.entries(m),
   mapGet: (m, k) => m[k],
   isSeq: isIterable,
   flattenSeq: defaultFlattenSeq,
-  seqIter: (s) => s,
-  convertTagName: (t) => t,
-  convertPropName: (p) => p,
-  convertStyleName: (s) => s,
-  convertDataName: (d) => d,
-  convertClassName: (c) => c,
+  seqIter: s => s,
+  convertTagName: t => t,
+  convertPropName: p => p,
+  convertStyleName: s => s,
+  convertDataName: d => d,
+  convertClassName: c => c,
 };
 
 function flattenVNodeChildrenIntoArray(array, children) {
@@ -107,7 +110,10 @@ export function h(tag, props, ...children) {
     children.unshift(props);
     props = EMPTY_OBJECT;
   }
-  return new VNode(ELEMENT_NODE, settings.convertTagName(tag), [props ?? EMPTY_OBJECT, ...children]);
+  return new VNode(ELEMENT_NODE, settings.convertTagName(tag), [
+    props ?? EMPTY_OBJECT,
+    ...children,
+  ]);
 }
 
 export function o(tag, props) {
@@ -293,7 +299,10 @@ function reconcileListeners(target, hooks) {
           target.addEventListener(name, listener);
           break;
         case 'object':
-          target.addEventListener(name, listener.listener, { capture: listener.capture, passive: listener.passive });
+          target.addEventListener(name, listener.listener, {
+            capture: listener.capture,
+            passive: listener.passive,
+          });
           break;
       }
     }
@@ -321,7 +330,10 @@ function reconcileListeners(target, hooks) {
           target.addEventListener(name, listener);
           break;
         case 'object':
-          target.addEventListener(name, listener.listener, { capture: listener.capture, passive: listener.passive });
+          target.addEventListener(name, listener.listener, {
+            capture: listener.capture,
+            passive: listener.passive,
+          });
           break;
       }
     }
@@ -345,8 +357,10 @@ function reconcileListeners(target, hooks) {
 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';
@@ -404,7 +418,7 @@ function reconcileNode(target) {
 
 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;
 }
 
@@ -466,10 +480,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);
   });
@@ -524,7 +538,7 @@ function reconcileElementChildren(target, childrenIterable) {
 
     let oldNodesPoolForTag = oldVNodeNodesPool.get(vdom.tag);
     if (!oldNodesPoolForTag) {
-      oldNodesPoolForTag = { nodesForKey: new Map(), nodesWithoutKey: [] };
+      oldNodesPoolForTag = {nodesForKey: new Map(), nodesWithoutKey: []};
       oldVNodeNodesPool.set(vdom.tag, oldNodesPoolForTag);
     }
 
@@ -597,7 +611,11 @@ function reconcileElementChildren(target, childrenIterable) {
       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) {
@@ -673,13 +691,13 @@ export function reconcile(target, vdom) {
     switch (vdom.type) {
       case ELEMENT_NODE:
       case OPAQUE_NODE:
-        if (0 !== target.nodeName.localeCompare(vdom.tag, undefined, { sensitivity: 'base' })) {
+        if (0 !== target.nodeName.localeCompare(vdom.tag, undefined, {sensitivity: 'base'})) {
           throw new Error('incompatible target for vdom');
         }
         break;
     }
 
-    target[NODE_STATE] = state = { originalProps: {}, newVdom: vdom };
+    target[NODE_STATE] = state = {originalProps: {}, newVdom: vdom};
     try {
       vdom.hooks?.$attach?.(target);
       if (vdom.type === SPECIAL_NODE) {

package/index.js

@@ -1,10 +1,10 @@
 import vdom from './src/vdom.js';
 
 // Create a default API instance by calling the factory with no settings.
-const { h, alias, special, reconcile, settings } = vdom();
+const {h, alias, special, reconcile, settings} = vdom();
 
-export { vdom, h, alias, special, reconcile, settings };
+export {vdom, h, alias, special, reconcile, settings};
 
 // Export all the HTML helpers.
 export * from './src/html.js';
-export { schedule, flush, clear } from './src/scheduler.js';
+export {schedule, flush, clear} from './src/scheduler.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3sln/dodo",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A minimal, configurable virtual DOM library.",
   "main": "index.js",
   "type": "module",
@@ -23,9 +23,13 @@
   ],
   "devDependencies": {
     "@types/bun": "latest",
-    "happy-dom": "^18.0.1"
+    "happy-dom": "^18.0.1",
+    "prettier": "^3.6.2"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "format": "prettier -w \"**/*.js\""
   }
 }

package/src/html.js

@@ -1,9 +1,9 @@
-import { h } from '../index.js';
+import {h} from '../index.js';
 
 // Document metadata
 export const title = (...args) => h('title', ...args);
-export const meta = (props) => h('meta', props);
-export const link = (props) => h('link', props);
+export const meta = props => h('meta', props);
+export const link = props => h('link', props);
 export const style = (...args) => h('style', ...args);
 export const script = (...args) => h('script', ...args);
 export const noscript = (...args) => h('noscript', ...args);
@@ -67,21 +67,21 @@ export const u = (...args) => h('u', ...args);
 export const wbr = () => h('wbr');
 
 // Image and multimedia
-export const area = (props) => h('area', props);
+export const area = props => h('area', props);
 export const audio = (...args) => h('audio', ...args);
-export const img = (props) => h('img', props);
+export const img = props => h('img', props);
 export const map = (...args) => h('map', ...args);
-export const track = (props) => h('track', props);
+export const track = props => h('track', props);
 export const video = (...args) => h('video', ...args);
 
 // Embedded content
-export const embed = (props) => h('embed', props);
+export const embed = props => h('embed', props);
 export const iframe = (...args) => h('iframe', ...args);
 export const object = (...args) => h('object', ...args);
-export const param = (props) => h('param', props);
+export const param = props => h('param', props);
 export const picture = (...args) => h('picture', ...args);
 export const portal = (...args) => h('portal', ...args);
-export const source = (props) => h('source', props);
+export const source = props => h('source', props);
 
 // SVG and MathML
 export const svg = (...args) => h('svg', ...args);
@@ -92,7 +92,7 @@ export const canvas = (...args) => h('canvas', ...args);
 
 // Table content
 export const caption = (...args) => h('caption', ...args);
-export const col = (props) => h('col', props);
+export const col = props => h('col', props);
 export const colgroup = (...args) => h('colgroup', ...args);
 export const table = (...args) => h('table', ...args);
 export const tbody = (...args) => h('tbody', ...args);
@@ -107,7 +107,7 @@ export const button = (...args) => h('button', ...args);
 export const datalist = (...args) => h('datalist', ...args);
 export const fieldset = (...args) => h('fieldset', ...args);
 export const form = (...args) => h('form', ...args);
-export const input = (props) => h('input', props);
+export const input = props => h('input', props);
 export const label = (...args) => h('label', ...args);
 export const legend = (...args) => h('legend', ...args);
 export const meter = (...args) => h('meter', ...args);

package/src/scheduler.js

@@ -6,74 +6,74 @@ const FRAME_BUDGET = 10; // ms
 const CHUNK_SIZE = 100;
 
 function _runTasks(tasks) {
-    for (const f of tasks) {
-        try {
-            f();
-        } catch (err) {
-            console.error("Error in scheduled function:", err);
-        }
+  for (const f of tasks) {
+    try {
+      f();
+    } catch (err) {
+      console.error('Error in scheduled function:', err);
     }
+  }
 }
 
 function runQueue() {
-    const startTime = performance.now();
-    frameId = 0;
+  const startTime = performance.now();
+  frameId = 0;
 
-    while (queue.length > 0) {
-        const chunk = queue.splice(0, CHUNK_SIZE);
-        _runTasks(chunk);
+  while (queue.length > 0) {
+    const chunk = queue.splice(0, CHUNK_SIZE);
+    _runTasks(chunk);
 
-        if (performance.now() - startTime > FRAME_BUDGET && queue.length > 0) {
-            frameId = requestAnimationFrame(runQueue);
-            return;
-        }
+    if (performance.now() - startTime > FRAME_BUDGET && queue.length > 0) {
+      frameId = requestAnimationFrame(runQueue);
+      return;
     }
+  }
 
-    scheduled = false;
+  scheduled = false;
 }
 
 // Schedules a function to be executed on the next animation frame.
-export function schedule(f, { signal } = {}) {
-    if (signal?.aborted) {
-        return;
-    }
+export function schedule(f, {signal} = {}) {
+  if (signal?.aborted) {
+    return;
+  }
 
-    let task = f;
-    // If a signal is provided, wrap the task to check for abortion before execution.
-    if (signal) {
-        task = () => {
-            if (!signal.aborted) {
-                f();
-            }
-        };
-    }
+  let task = f;
+  // If a signal is provided, wrap the task to check for abortion before execution.
+  if (signal) {
+    task = () => {
+      if (!signal.aborted) {
+        f();
+      }
+    };
+  }
 
-    queue.push(task);
+  queue.push(task);
 
-    if (!scheduled) {
-        scheduled = true;
-        frameId = requestAnimationFrame(runQueue);
-    }
+  if (!scheduled) {
+    scheduled = true;
+    frameId = requestAnimationFrame(runQueue);
+  }
 }
 
 // Immediately runs all queued tasks synchronously.
 export function flush() {
-    if (frameId) {
-        cancelAnimationFrame(frameId);
-    }
-    const toRun = queue;
-    queue = [];
-    _runTasks(toRun);
-    scheduled = false;
-    frameId = 0;
+  if (frameId) {
+    cancelAnimationFrame(frameId);
+  }
+  const toRun = queue;
+  queue = [];
+  _runTasks(toRun);
+  scheduled = false;
+  frameId = 0;
 }
 
 // Clears all pending tasks.
 export function clear() {
-    if (frameId) {
-        cancelAnimationFrame(frameId);
-    }
-    queue = [];
-    scheduled = false;
-    frameId = 0;
+  if (frameId) {
+    cancelAnimationFrame(frameId);
+  }
+  queue = [];
+  scheduled = false;
+  frameId = 0;
 }

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;
 }
 
@@ -91,10 +96,10 @@ function getPathFromElement(element) {
   let current = element;
   while (current) {
     path.push(current);
-    if (current.shadowRoot) {
-      current = current.shadowRoot.host;
+    if (current.parentElement) {
+      current = current.parentElement;
     } else {
-      current = current.parentNode;
+      current = current.getRootNode()?.host;
     }
   }
   return path;
@@ -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,21 +134,26 @@ 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 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 listenerKey = userSettings?.listenerKey ?? 'listener';
   const captureKey = userSettings?.captureKey ?? 'capture';
   const passiveKey = userSettings?.passiveKey ?? 'passive';
@@ -244,86 +254,86 @@ export default (userSettings) => {
 
     // Handle new and changed props
     for (const [name, newValue] of mapIter(props)) {
-        const propName = convertPropName(name);
-        const oldValue = mapGet(oldProps, name);
+      const propName = convertPropName(name);
+      const oldValue = mapGet(oldProps, name);
 
-        if (Object.is(newValue, oldValue)) continue;
+      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;
+      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;
+        }
+        case '$dataset': {
+          if (!isMap(newValue)) throw new Error('invalid value for dataset prop');
+          reconcileElementDataset(target, oldValue ?? EMPTY_OBJECT, newValue ?? EMPTY_OBJECT);
+          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;
+      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;
         }
+      }
     }
   }
 
@@ -335,9 +345,9 @@ export default (userSettings) => {
         if (typeof listener === 'function') {
           target.addEventListener(name, listener);
         } else if (listener != null) {
-          target.addEventListener(name, mapGet(listener, listenerKey), { 
-            capture: !!mapGet(listener, captureKey), 
-            passive: !!mapGet(listener, passiveKey) 
+          target.addEventListener(name, mapGet(listener, listenerKey), {
+            capture: !!mapGet(listener, captureKey),
+            passive: !!mapGet(listener, passiveKey),
           });
         }
       }
@@ -351,15 +361,19 @@ export default (userSettings) => {
         if (typeof oldListener === 'function') {
           target.removeEventListener(name, oldListener);
         } else if (oldListener != null) {
-          target.removeEventListener(name, mapGet(oldListener, listenerKey), !!mapGet(oldListener, captureKey));
+          target.removeEventListener(
+            name,
+            mapGet(oldListener, listenerKey),
+            !!mapGet(oldListener, captureKey),
+          );
         }
-        
+
         if (typeof listener === 'function') {
           target.addEventListener(name, listener);
         } else if (listener != null) {
-          target.addEventListener(name, mapGet(listener, listenerKey), { 
-            capture: !!mapGet(listener, captureKey), 
-            passive: !!mapGet(listener, passiveKey) 
+          target.addEventListener(name, mapGet(listener, listenerKey), {
+            capture: !!mapGet(listener, captureKey),
+            passive: !!mapGet(listener, passiveKey),
           });
         }
       }
@@ -369,7 +383,11 @@ export default (userSettings) => {
         if (typeof oldListener === 'function') {
           target.removeEventListener(name, oldListener);
         } else if (oldListener != null) {
-          target.removeEventListener(name, mapGet(oldListener, listenerKey), !!mapGet(oldListener, captureKey));
+          target.removeEventListener(
+            name,
+            mapGet(oldListener, listenerKey),
+            !!mapGet(oldListener, captureKey),
+          );
         }
       }
     }
@@ -459,7 +477,6 @@ export default (userSettings) => {
   function cleanupTarget(target) {
     const state = target[NODE_STATE];
     if (state) {
-
       switch (state.vdom.type) {
         case ELEMENT_NODE:
           reconcileElementProps(target, {});
@@ -509,7 +526,7 @@ export default (userSettings) => {
 
       let oldNodesPoolForTag = oldVNodeNodesPool.get(vdom.tag);
       if (!oldNodesPoolForTag) {
-        oldNodesPoolForTag = { nodesForKey: new Map(), nodesWithoutKey: [] };
+        oldNodesPoolForTag = {nodesForKey: new Map(), nodesWithoutKey: []};
         oldVNodeNodesPool.set(vdom.tag, oldNodesPoolForTag);
       }
 
@@ -539,7 +556,10 @@ export default (userSettings) => {
             if (pool && pool.length > 0) {
               newDomNode = pool.shift();
               const state = newDomNode[NODE_STATE];
-              if (shouldUpdate(state.vdom.args, newVdom.args)) {
+              if (
+                shouldUpdate(state.vdom.args, newVdom.args) ||
+                shouldUpdate(state.vdom.hooks, newVdom.hooks)
+              ) {
                 state.newVdom = newVdom;
               }
             } else {
@@ -550,7 +570,10 @@ export default (userSettings) => {
             if (unkeyedOldNode) {
               newDomNode = unkeyedOldNode;
               const state = newDomNode[NODE_STATE];
-              if (shouldUpdate(state.vdom.args, newVdom.args)) {
+              if (
+                shouldUpdate(state.vdom.args, newVdom.args) ||
+                shouldUpdate(state.vdom.hooks, newVdom.hooks)
+              ) {
                 state.newVdom = newVdom;
               }
             } else {
@@ -577,41 +600,69 @@ export default (userSettings) => {
 
     const moveBefore = window.Element.prototype.moveBefore;
     const insertBefore = window.Element.prototype.insertBefore;
-    if (target.isConnected && typeof moveBefore === 'function') {
-      for (let i = 0; i < newDomChildren.length; i++) {
-        const newChild = newDomChildren[i];
-        const existingChildAtPosition = target.childNodes[i];
-        if (newChild !== existingChildAtPosition) {
-          (newChild.isConnected ? moveBefore : insertBefore).call(target, newChild, existingChildAtPosition);
+    if (target.isConnected) {
+      if (typeof moveBefore === 'function') {
+        for (let i = 0; i < newDomChildren.length; i++) {
+          const newChild = newDomChildren[i];
+          const existingChildAtPosition = target.childNodes[i];
+          if (newChild !== existingChildAtPosition) {
+            (newChild.isConnected ? moveBefore : insertBefore).call(
+              target,
+              newChild,
+              existingChildAtPosition,
+            );
+          }
+          const state = newChild[NODE_STATE];
+          if (state?.newVdom) {
+            if (!state.vdom) {
+              try {
+                state.newVdom.hooks?.$attach?.(newChild);
+                if (state.newVdom.type === SPECIAL_NODE) {
+                  state.newVdom.tag.attach?.(newChild);
+                }
+              } catch (err) {
+                console.error(err);
+              }
+            }
+            reconcileNode(newChild);
+          }
         }
-        const state = newChild[NODE_STATE];
-        if (state?.newVdom) {
-          if (!state.vdom) {
-            try {
-              state.newVdom.hooks?.$attach?.(newChild);
-              if (state.newVdom.type === SPECIAL_NODE) {
-                state.newVdom.tag.attach?.(newChild);
+      } else {
+        const doc = target.ownerDocument;
+        let focusWithin = documentToFocusWithinSet.get(doc);
+        if (!focusWithin) {
+          focusWithin = installFocusTrackingForDocument(doc);
+        }
+        for (let i = 0; i < newDomChildren.length; i++) {
+          const newChild = newDomChildren[i];
+          const existingChildAtPosition = target.childNodes[i];
+          if (newChild !== existingChildAtPosition) {
+            if (!focusWithin.has(newChild)) {
+              insertBefore.call(target, newChild, existingChildAtPosition);
+            }
+          }
+          const state = newChild[NODE_STATE];
+          if (state?.newVdom) {
+            if (!state.vdom) {
+              try {
+                state.newVdom.hooks?.$attach?.(newChild);
+                if (state.newVdom.type === SPECIAL_NODE) {
+                  state.newVdom.tag.attach?.(newChild);
+                }
+              } catch (err) {
+                console.error(err);
               }
-            } catch (err) {
-              console.error(err);
             }
+            reconcileNode(newChild);
           }
-          reconcileNode(newChild);
         }
       }
     } else {
-      const doc = target.ownerDocument;
-      let focusWithin = documentToFocusWithinSet.get(doc);
-      if (!focusWithin) {
-        focusWithin = installFocusTrackingForDocument(doc);
-      }
       for (let i = 0; i < newDomChildren.length; i++) {
         const newChild = newDomChildren[i];
         const existingChildAtPosition = target.childNodes[i];
         if (newChild !== existingChildAtPosition) {
-          if (!focusWithin.has(newChild)) {
-            insertBefore.call(target, newChild, existingChildAtPosition);
-          }
+          insertBefore.call(target, newChild, existingChildAtPosition);
         }
         const state = newChild[NODE_STATE];
         if (state?.newVdom) {
@@ -651,7 +702,10 @@ export default (userSettings) => {
     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);
           }
@@ -663,13 +717,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) {
@@ -685,9 +744,30 @@ 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,
+      listenerKey,
+      captureKey,
+      passiveKey,
+    },
+  };
+};