foldkit 0.128.1 → 0.130.0

package/dist/html/index.js

@@ -1,6 +1,6 @@
-import { Array, Context, Data, Effect, Fiber, Function, Match, Option, Predicate, Stream, String, pipe, } from 'effect';
-import { h } from 'snabbdom';
+import { Array, Context, Data, Effect, Fiber, Function, Option, Stream, } from 'effect';
 import { MountTracker } from '../mount/index.js';
+import { VNodeDataMask, h, vnodeDataMaskKey, } from '../snabbdom/index.js';
 import { isChildAttribute } from './childAttribute.js';
 import { checkScheduledLeave, clearDragZoneAfterDrop, getDragZoneState, processDragEnter, processDragLeave, } from './dragZoneTracking.js';
 import { clearRuntime, requireBoundaryMappers, requireDispatch, requireRuntimeContext, requireUnmountResolver, setRuntime, } from './runtimeSingleton.js';
@@ -87,18 +87,46 @@ export { Prop, OnCustomEvent };
 const setData = (ctx, key, value) => {
     ctx.data[key] = value;
 };
-const updateData = (ctx, key, value) => {
-    const existing = ctx.data[key];
-    if (existing === undefined) {
-        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-        ctx.data[key] = value;
+const addVNodeDataMask = (ctx, dataMask) => {
+    ctx.data[vnodeDataMaskKey] = (ctx.data[vnodeDataMaskKey] ?? 0) | dataMask;
+};
+const setModuleData = (ctx, key, value, dataMask) => {
+    ctx.data[key] = value;
+    addVNodeDataMask(ctx, dataMask);
+};
+// NOTE: single-key fast paths. The bulk of attribute handlers set exactly
+// one prop, attr, or event handler; writing it directly into the vnode data
+// avoids allocating a `{ key: value }` literal and merging it per attribute.
+const setDataProp = (ctx, key, value) => {
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    const props = (ctx.data.props ??= {});
+    props[key] = value;
+    addVNodeDataMask(ctx, VNodeDataMask.Props);
+};
+const setDataAttr = (ctx, key, value) => {
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    const attrs = (ctx.data.attrs ??= {});
+    attrs[key] = value;
+    addVNodeDataMask(ctx, VNodeDataMask.Attrs);
+};
+const addDataOn = (ctx, eventName, handler) => {
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    const on = (ctx.data.on ??= {});
+    addVNodeDataMask(ctx, VNodeDataMask.On);
+    const existingHandler = on[eventName];
+    if (existingHandler === undefined) {
+        on[eventName] = handler;
     }
     else {
-        Object.assign(existing, value);
+        // NOTE: chain in registration order, mirroring updateDataOn.
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        const previous = existingHandler;
+        on[eventName] = (...args) => {
+            previous(...args);
+            handler(...args);
+        };
     }
 };
-const updateDataProps = (ctx, props) => updateData(ctx, 'props', props);
-const updateDataAttrs = (ctx, attrs) => updateData(ctx, 'attrs', attrs);
 // Event handlers chain per DOM event in spread order. Without this,
 // `Object.assign` would silently drop earlier handlers for the same
 // event when a consumer spreads published ChildAttributes alongside
@@ -108,6 +136,7 @@ const updateDataAttrs = (ctx, attrs) => updateData(ctx, 'attrs', attrs);
 // earlier handler throws, later handlers do not run (mirroring native
 // exception propagation, not silently swallowing bugs).
 const updateDataOn = (ctx, on) => {
+    addVNodeDataMask(ctx, VNodeDataMask.On);
     if (ctx.data.on === undefined) {
         /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
         ctx.data.on = on;
@@ -135,40 +164,55 @@ const updateDataOn = (ctx, on) => {
     }
 };
 const updatePropsWithPostpatch = (ctx, propName, value) => {
-    updateDataProps(ctx, { [propName]: value });
-    ctx.postpatchProps.push({ propName, value });
+    setDataProp(ctx, propName, value);
+    ctx.getPostpatchProps().push({ propName, value });
 };
-// NOTE: Built once at module load. The matcher dispatches on `_tag` and
-// returns a thunk that applies the resulting mutation to a per-VNode
-// BuildContext. Per-attribute cost drops from O(matcher arms) closure
-// allocations to one thunk. `Attribute<unknown>` is the runtime-erased
-// shape. Message is purely a TypeScript parameter at this level and
-// DispatchSync already accepts unknown.
-const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
-    Key: ({ value }) => (ctx) => setData(ctx, 'key', value),
-    Class: ({ value }) => {
-        const classObject = pipe(value, String.split(/\s+/), Array.filter(String.isNonEmpty), Array.reduce({}, (acc, className) => ({
-            ...acc,
-            [className]: true,
-        })));
-        return (ctx) => setData(ctx, 'class', classObject);
-    },
-    Id: ({ value }) => (ctx) => updateDataProps(ctx, { id: value }),
-    Title: ({ value }) => (ctx) => updateDataProps(ctx, { title: value }),
-    Lang: ({ value }) => (ctx) => updateDataProps(ctx, { lang: value }),
-    Dir: ({ value }) => (ctx) => updateDataProps(ctx, { dir: value }),
-    Tabindex: ({ value }) => (ctx) => updateDataProps(ctx, { tabIndex: value }),
-    Hidden: ({ value }) => (ctx) => updateDataProps(ctx, { hidden: value }),
-    Contenteditable: ({ value }) => (ctx) => updateDataAttrs(ctx, { contenteditable: value }),
-    Draggable: ({ value }) => (ctx) => updateDataProps(ctx, { draggable: value }),
-    Accesskey: ({ value }) => (ctx) => updateDataAttrs(ctx, { accesskey: value }),
-    Translate: ({ value }) => (ctx) => updateDataAttrs(ctx, { translate: value }),
-    Inert: ({ value }) => (ctx) => updateDataProps(ctx, { inert: value }),
-    Popover: ({ value }) => (ctx) => updateDataAttrs(ctx, { popover: value }),
-    Popovertarget: ({ value }) => (ctx) => updateDataAttrs(ctx, { popovertarget: value }),
-    Popovertargetaction: ({ value }) => (ctx) => updateDataAttrs(ctx, { popovertargetaction: value }),
-    OnClick: ({ message }) => (ctx) => updateDataOn(ctx, { click: () => ctx.dispatch(message) }),
-    OnClickFocus: ({ focusSelector, message }) => (ctx) => updateDataOn(ctx, {
+// NOTE: class strings repeat heavily across elements and renders, so the
+// parsed class object is cached per distinct string. Cached objects are
+// shared across vnodes; snabbdom's classModule only reads them, and the
+// Class handler installs them via `setData` (never merged into), so sharing
+// is safe. Class strings interpolated from model data can take unboundedly
+// many values, so the cache clears at a size cap instead of retaining every
+// string for the page lifetime; the render after a clear re-parses and
+// re-caches what it actually uses.
+const CLASS_OBJECT_CACHE_LIMIT = 10_000;
+const classObjectCache = new Map();
+const classObjectFor = (value) => {
+    const cached = classObjectCache.get(value);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const classObject = {};
+    for (const className of value.split(/\s+/)) {
+        if (className !== '') {
+            classObject[className] = true;
+        }
+    }
+    if (classObjectCache.size >= CLASS_OBJECT_CACHE_LIMIT) {
+        classObjectCache.clear();
+    }
+    classObjectCache.set(value, classObject);
+    return classObject;
+};
+const attributeHandlers = {
+    Key: ({ value }, ctx) => setData(ctx, 'key', value),
+    Class: ({ value }, ctx) => setModuleData(ctx, 'class', classObjectFor(value), VNodeDataMask.Class),
+    Id: ({ value }, ctx) => setDataProp(ctx, 'id', value),
+    Title: ({ value }, ctx) => setDataProp(ctx, 'title', value),
+    Lang: ({ value }, ctx) => setDataProp(ctx, 'lang', value),
+    Dir: ({ value }, ctx) => setDataProp(ctx, 'dir', value),
+    Tabindex: ({ value }, ctx) => setDataProp(ctx, 'tabIndex', value),
+    Hidden: ({ value }, ctx) => setDataProp(ctx, 'hidden', value),
+    Contenteditable: ({ value }, ctx) => setDataAttr(ctx, 'contenteditable', value),
+    Draggable: ({ value }, ctx) => setDataProp(ctx, 'draggable', value),
+    Accesskey: ({ value }, ctx) => setDataAttr(ctx, 'accesskey', value),
+    Translate: ({ value }, ctx) => setDataAttr(ctx, 'translate', value),
+    Inert: ({ value }, ctx) => setDataProp(ctx, 'inert', value),
+    Popover: ({ value }, ctx) => setDataAttr(ctx, 'popover', value),
+    Popovertarget: ({ value }, ctx) => setDataAttr(ctx, 'popovertarget', value),
+    Popovertargetaction: ({ value }, ctx) => setDataAttr(ctx, 'popovertargetaction', value),
+    OnClick: ({ message }, ctx) => addDataOn(ctx, 'click', () => ctx.dispatch(message)),
+    OnClickFocus: ({ focusSelector, message }, ctx) => updateDataOn(ctx, {
         click: () => {
             const focusTarget = document.querySelector(focusSelector);
             if (focusTarget instanceof HTMLElement) {
@@ -177,61 +221,61 @@ const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
             ctx.dispatch(message);
         },
     }),
-    OnDoubleClick: ({ message }) => (ctx) => updateDataOn(ctx, { dblclick: () => ctx.dispatch(message) }),
-    OnMouseDown: ({ message }) => (ctx) => updateDataOn(ctx, { mousedown: () => ctx.dispatch(message) }),
-    OnMouseUp: ({ message }) => (ctx) => updateDataOn(ctx, { mouseup: () => ctx.dispatch(message) }),
-    OnMouseEnter: ({ message }) => (ctx) => updateDataOn(ctx, { mouseenter: () => ctx.dispatch(message) }),
-    OnMouseLeave: ({ message }) => (ctx) => updateDataOn(ctx, { mouseleave: () => ctx.dispatch(message) }),
-    OnMouseOver: ({ message }) => (ctx) => updateDataOn(ctx, { mouseover: () => ctx.dispatch(message) }),
-    OnMouseOut: ({ message }) => (ctx) => updateDataOn(ctx, { mouseout: () => ctx.dispatch(message) }),
-    OnMouseMove: ({ message }) => (ctx) => updateDataOn(ctx, { mousemove: () => ctx.dispatch(message) }),
-    OnPointerMove: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnDoubleClick: ({ message }, ctx) => addDataOn(ctx, 'dblclick', () => ctx.dispatch(message)),
+    OnMouseDown: ({ message }, ctx) => addDataOn(ctx, 'mousedown', () => ctx.dispatch(message)),
+    OnMouseUp: ({ message }, ctx) => addDataOn(ctx, 'mouseup', () => ctx.dispatch(message)),
+    OnMouseEnter: ({ message }, ctx) => addDataOn(ctx, 'mouseenter', () => ctx.dispatch(message)),
+    OnMouseLeave: ({ message }, ctx) => addDataOn(ctx, 'mouseleave', () => ctx.dispatch(message)),
+    OnMouseOver: ({ message }, ctx) => addDataOn(ctx, 'mouseover', () => ctx.dispatch(message)),
+    OnMouseOut: ({ message }, ctx) => addDataOn(ctx, 'mouseout', () => ctx.dispatch(message)),
+    OnMouseMove: ({ message }, ctx) => addDataOn(ctx, 'mousemove', () => ctx.dispatch(message)),
+    OnPointerMove: ({ f: toMaybeMessage }, ctx) => updateDataOn(ctx, {
         pointermove: (event) => {
-            const maybeMessage = f(event.screenX, event.screenY, event.pointerType);
+            const maybeMessage = toMaybeMessage(event.screenX, event.screenY, event.pointerType);
             if (Option.isSome(maybeMessage)) {
                 ctx.dispatch(maybeMessage.value);
             }
         },
     }),
-    OnPointerLeave: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnPointerLeave: ({ f: toMaybeMessage }, ctx) => updateDataOn(ctx, {
         pointerleave: (event) => {
-            const maybeMessage = f(event.pointerType);
+            const maybeMessage = toMaybeMessage(event.pointerType);
             if (Option.isSome(maybeMessage)) {
                 ctx.dispatch(maybeMessage.value);
             }
         },
     }),
-    OnPointerDown: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnPointerDown: ({ f: toMaybeMessage }, ctx) => updateDataOn(ctx, {
         pointerdown: (event) => {
-            const maybeMessage = f(event.pointerType, event.button, event.screenX, event.screenY, event.timeStamp, event.clientX, event.clientY);
+            const maybeMessage = toMaybeMessage(event.pointerType, event.button, event.screenX, event.screenY, event.timeStamp, event.clientX, event.clientY);
             if (Option.isSome(maybeMessage)) {
                 ctx.dispatch(maybeMessage.value);
             }
         },
     }),
-    OnPointerUp: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnPointerUp: ({ f: toMaybeMessage }, ctx) => updateDataOn(ctx, {
         pointerup: (event) => {
-            const maybeMessage = f(event.screenX, event.screenY, event.pointerType, event.timeStamp);
+            const maybeMessage = toMaybeMessage(event.screenX, event.screenY, event.pointerType, event.timeStamp);
             if (Option.isSome(maybeMessage)) {
                 ctx.dispatch(maybeMessage.value);
             }
         },
     }),
-    OnKeyDown: ({ f }) => (ctx) => updateDataOn(ctx, {
-        keydown: (event) => ctx.dispatch(f(event.key, keyboardModifiers(event))),
+    OnKeyDown: ({ f: toMessage }, ctx) => updateDataOn(ctx, {
+        keydown: (event) => ctx.dispatch(toMessage(event.key, keyboardModifiers(event))),
     }),
-    OnKeyDownPreventDefault: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnKeyDownPreventDefault: ({ f: toMaybeMessage }, ctx) => updateDataOn(ctx, {
         keydown: (event) => {
-            const maybeMessage = f(event.key, keyboardModifiers(event));
+            const maybeMessage = toMaybeMessage(event.key, keyboardModifiers(event));
             if (Option.isSome(maybeMessage)) {
                 event.preventDefault();
                 ctx.dispatch(maybeMessage.value);
             }
         },
     }),
-    OnKeyDownFocus: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnKeyDownFocus: ({ f: toMaybeFocusAndMessage }, ctx) => updateDataOn(ctx, {
         keydown: (event) => {
-            const maybeResult = f(event.key, keyboardModifiers(event));
+            const maybeResult = toMaybeFocusAndMessage(event.key, keyboardModifiers(event));
             if (Option.isSome(maybeResult)) {
                 event.preventDefault();
                 const { focusSelector, message } = maybeResult.value;
@@ -243,23 +287,23 @@ const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
             }
         },
     }),
-    OnKeyUp: ({ f }) => (ctx) => updateDataOn(ctx, {
-        keyup: (event) => ctx.dispatch(f(event.key, keyboardModifiers(event))),
+    OnKeyUp: ({ f: toMessage }, ctx) => updateDataOn(ctx, {
+        keyup: (event) => ctx.dispatch(toMessage(event.key, keyboardModifiers(event))),
     }),
-    OnKeyUpPreventDefault: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnKeyUpPreventDefault: ({ f: toMaybeMessage }, ctx) => updateDataOn(ctx, {
         keyup: (event) => {
-            const maybeMessage = f(event.key, keyboardModifiers(event));
+            const maybeMessage = toMaybeMessage(event.key, keyboardModifiers(event));
             if (Option.isSome(maybeMessage)) {
                 event.preventDefault();
                 ctx.dispatch(maybeMessage.value);
             }
         },
     }),
-    OnKeyPress: ({ f }) => (ctx) => updateDataOn(ctx, {
-        keypress: (event) => ctx.dispatch(f(event.key, keyboardModifiers(event))),
+    OnKeyPress: ({ f: toMessage }, ctx) => updateDataOn(ctx, {
+        keypress: (event) => ctx.dispatch(toMessage(event.key, keyboardModifiers(event))),
     }),
-    OnFocus: ({ message }) => (ctx) => updateDataOn(ctx, { focus: () => ctx.dispatch(message) }),
-    OnBlur: ({ message }) => (ctx) => updateDataOn(ctx, {
+    OnFocus: ({ message }, ctx) => addDataOn(ctx, 'focus', () => ctx.dispatch(message)),
+    OnBlur: ({ message }, ctx) => updateDataOn(ctx, {
         blur: (event) => {
             if (event.relatedTarget instanceof Element &&
                 event.relatedTarget.id === DEVTOOLS_HOST_ID) {
@@ -268,17 +312,17 @@ const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
             ctx.dispatch(message);
         },
     }),
-    OnInput: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnInput: ({ f: toMessage }, ctx) => updateDataOn(ctx, {
         input: (event) => 
         /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-        ctx.dispatch(f(event.target.value)),
+        ctx.dispatch(toMessage(event.target.value)),
     }),
-    OnChange: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnChange: ({ f: toMessage }, ctx) => updateDataOn(ctx, {
         change: (event) => 
         /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-        ctx.dispatch(f(event.target.value)),
+        ctx.dispatch(toMessage(event.target.value)),
     }),
-    OnFileChange: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnFileChange: ({ f: toMessage }, ctx) => updateDataOn(ctx, {
         change: tagAsFileHandler((event) => {
             /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
             const target = event.target;
@@ -286,36 +330,36 @@ const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
                 ? Array.fromIterable(target.files)
                 : Array.empty();
             target.value = '';
-            ctx.dispatch(f(files));
+            ctx.dispatch(toMessage(files));
         }, 'OnFileChange'),
     }),
-    OnSubmit: ({ message }) => (ctx) => updateDataOn(ctx, {
+    OnSubmit: ({ message }, ctx) => updateDataOn(ctx, {
         submit: (event) => {
             event.preventDefault();
             ctx.dispatch(message);
         },
     }),
-    OnReset: ({ message }) => (ctx) => updateDataOn(ctx, { reset: () => ctx.dispatch(message) }),
-    OnScroll: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnReset: ({ message }, ctx) => addDataOn(ctx, 'reset', () => ctx.dispatch(message)),
+    OnScroll: ({ f: toMessage }, ctx) => updateDataOn(ctx, {
         scroll: (event) => 
         /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-        ctx.dispatch(f(event.target.scrollTop)),
+        ctx.dispatch(toMessage(event.target.scrollTop)),
     }),
-    OnWheel: ({ message }) => (ctx) => updateDataOn(ctx, { wheel: () => ctx.dispatch(message) }),
-    OnCopy: ({ message }) => (ctx) => updateDataOn(ctx, { copy: () => ctx.dispatch(message) }),
-    OnCut: ({ message }) => (ctx) => updateDataOn(ctx, { cut: () => ctx.dispatch(message) }),
-    OnPaste: ({ message }) => (ctx) => updateDataOn(ctx, { paste: () => ctx.dispatch(message) }),
-    OnPastePreventDefault: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnWheel: ({ message }, ctx) => addDataOn(ctx, 'wheel', () => ctx.dispatch(message)),
+    OnCopy: ({ message }, ctx) => addDataOn(ctx, 'copy', () => ctx.dispatch(message)),
+    OnCut: ({ message }, ctx) => addDataOn(ctx, 'cut', () => ctx.dispatch(message)),
+    OnPaste: ({ message }, ctx) => addDataOn(ctx, 'paste', () => ctx.dispatch(message)),
+    OnPastePreventDefault: ({ f: toMaybeMessage }, ctx) => updateDataOn(ctx, {
         paste: (event) => {
             const text = event.clipboardData?.getData('text/plain') ?? '';
-            const maybeMessage = f(text);
+            const maybeMessage = toMaybeMessage(text);
             if (Option.isSome(maybeMessage)) {
                 event.preventDefault();
                 ctx.dispatch(maybeMessage.value);
             }
         },
     }),
-    OnCopyText: ({ text }) => (ctx) => updateDataOn(ctx, {
+    OnCopyText: ({ text }, ctx) => updateDataOn(ctx, {
         copy: (event) => {
             if (event.clipboardData) {
                 event.clipboardData.setData('text/plain', text);
@@ -323,7 +367,7 @@ const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
             }
         },
     }),
-    OnCutText: ({ text, message }) => (ctx) => updateDataOn(ctx, {
+    OnCutText: ({ text, message }, ctx) => updateDataOn(ctx, {
         cut: (event) => {
             if (event.clipboardData) {
                 event.clipboardData.setData('text/plain', text);
@@ -332,27 +376,27 @@ const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
             }
         },
     }),
-    OnCancel: ({ message }) => (ctx) => updateDataOn(ctx, {
+    OnCancel: ({ message }, ctx) => updateDataOn(ctx, {
         cancel: (event) => {
             event.preventDefault();
             ctx.dispatch(message);
         },
     }),
-    OnToggle: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnToggle: ({ f: toMessage }, ctx) => updateDataOn(ctx, {
         toggle: event => 
         /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-        ctx.dispatch(f(event.target.open)),
+        ctx.dispatch(toMessage(event.target.open)),
     }),
-    OnContextMenu: ({ message }) => (ctx) => updateDataOn(ctx, {
+    OnContextMenu: ({ message }, ctx) => updateDataOn(ctx, {
         contextmenu: (event) => {
             event.preventDefault();
             ctx.dispatch(message);
         },
     }),
-    OnDragStart: ({ message }) => (ctx) => updateDataOn(ctx, { dragstart: () => ctx.dispatch(message) }),
-    OnDrag: ({ message }) => (ctx) => updateDataOn(ctx, { drag: () => ctx.dispatch(message) }),
-    OnDragEnd: ({ message }) => (ctx) => updateDataOn(ctx, { dragend: () => ctx.dispatch(message) }),
-    OnDragEnter: ({ message }) => (ctx) => updateDataOn(ctx, {
+    OnDragStart: ({ message }, ctx) => addDataOn(ctx, 'dragstart', () => ctx.dispatch(message)),
+    OnDrag: ({ message }, ctx) => addDataOn(ctx, 'drag', () => ctx.dispatch(message)),
+    OnDragEnd: ({ message }, ctx) => addDataOn(ctx, 'dragend', () => ctx.dispatch(message)),
+    OnDragEnter: ({ message }, ctx) => updateDataOn(ctx, {
         dragenter: (event) => {
             event.preventDefault();
             const zone = event.currentTarget;
@@ -366,7 +410,7 @@ const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
             }
         },
     }),
-    OnDragLeave: ({ message }) => (ctx) => updateDataOn(ctx, {
+    OnDragLeave: ({ message }, ctx) => updateDataOn(ctx, {
         dragleave: (event) => {
             const zone = event.currentTarget;
             if (!(zone instanceof Element)) {
@@ -383,18 +427,18 @@ const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
             }
         },
     }),
-    OnDragOver: ({ message }) => (ctx) => updateDataOn(ctx, {
+    OnDragOver: ({ message }, ctx) => updateDataOn(ctx, {
         dragover: (event) => {
             event.preventDefault();
             ctx.dispatch(message);
         },
     }),
-    AllowDrop: () => (ctx) => updateDataOn(ctx, {
+    AllowDrop: (_attribute, ctx) => updateDataOn(ctx, {
         dragover: (event) => {
             event.preventDefault();
         },
     }),
-    OnDrop: ({ message }) => (ctx) => updateDataOn(ctx, {
+    OnDrop: ({ message }, ctx) => updateDataOn(ctx, {
         drop: (event) => {
             event.preventDefault();
             const zone = event.currentTarget;
@@ -404,7 +448,7 @@ const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
             ctx.dispatch(message);
         },
     }),
-    OnDropFiles: ({ f }) => (ctx) => updateDataOn(ctx, {
+    OnDropFiles: ({ f: toMessage }, ctx) => updateDataOn(ctx, {
         drop: tagAsFileHandler((event) => {
             event.preventDefault();
             /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
@@ -416,260 +460,260 @@ const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
             const files = dragEvent.dataTransfer?.files
                 ? Array.fromIterable(dragEvent.dataTransfer.files)
                 : Array.empty();
-            ctx.dispatch(f(files));
+            ctx.dispatch(toMessage(files));
         }, 'OnDropFiles'),
     }),
-    OnTouchStart: ({ message }) => (ctx) => updateDataOn(ctx, { touchstart: () => ctx.dispatch(message) }),
-    OnTouchEnd: ({ message }) => (ctx) => updateDataOn(ctx, { touchend: () => ctx.dispatch(message) }),
-    OnTouchMove: ({ message }) => (ctx) => updateDataOn(ctx, { touchmove: () => ctx.dispatch(message) }),
-    OnTouchCancel: ({ message }) => (ctx) => updateDataOn(ctx, { touchcancel: () => ctx.dispatch(message) }),
-    OnAnimationStart: ({ message }) => (ctx) => updateDataOn(ctx, { animationstart: () => ctx.dispatch(message) }),
-    OnAnimationEnd: ({ message }) => (ctx) => updateDataOn(ctx, { animationend: () => ctx.dispatch(message) }),
-    OnAnimationIteration: ({ message }) => (ctx) => updateDataOn(ctx, { animationiteration: () => ctx.dispatch(message) }),
-    OnTransitionEnd: ({ message }) => (ctx) => updateDataOn(ctx, { transitionend: () => ctx.dispatch(message) }),
-    OnLoad: ({ message }) => (ctx) => updateDataOn(ctx, { load: () => ctx.dispatch(message) }),
-    OnError: ({ message }) => (ctx) => updateDataOn(ctx, { error: () => ctx.dispatch(message) }),
-    OnPlay: ({ message }) => (ctx) => updateDataOn(ctx, { play: () => ctx.dispatch(message) }),
-    OnPause: ({ message }) => (ctx) => updateDataOn(ctx, { pause: () => ctx.dispatch(message) }),
-    OnEnded: ({ message }) => (ctx) => updateDataOn(ctx, { ended: () => ctx.dispatch(message) }),
-    OnTimeUpdate: ({ message }) => (ctx) => updateDataOn(ctx, { timeupdate: () => ctx.dispatch(message) }),
-    OnVolumeChange: ({ message }) => (ctx) => updateDataOn(ctx, { volumechange: () => ctx.dispatch(message) }),
-    OnSelect: ({ message }) => (ctx) => updateDataOn(ctx, { select: () => ctx.dispatch(message) }),
-    Value: ({ value }) => (ctx) => updatePropsWithPostpatch(ctx, 'value', value),
-    Checked: ({ value }) => (ctx) => updatePropsWithPostpatch(ctx, 'checked', value),
-    Selected: ({ value }) => (ctx) => updatePropsWithPostpatch(ctx, 'selected', value),
-    Open: ({ value }) => (ctx) => updatePropsWithPostpatch(ctx, 'open', value),
-    Placeholder: ({ value }) => (ctx) => updateDataProps(ctx, { placeholder: value }),
-    Name: ({ value }) => (ctx) => updateDataProps(ctx, { name: value }),
-    Disabled: ({ value }) => (ctx) => updateDataProps(ctx, { disabled: value }),
-    Readonly: ({ value }) => (ctx) => updateDataProps(ctx, { readOnly: value }),
-    Required: ({ value }) => (ctx) => updateDataProps(ctx, { required: value }),
-    Autofocus: ({ value }) => (ctx) => updateDataProps(ctx, { autofocus: value }),
-    Spellcheck: ({ value }) => (ctx) => updateDataAttrs(ctx, { spellcheck: value.toString() }),
-    Autocorrect: ({ value }) => (ctx) => updateDataAttrs(ctx, { autocorrect: value }),
-    Autocapitalize: ({ value }) => (ctx) => updateDataAttrs(ctx, { autocapitalize: value }),
-    InputMode: ({ value }) => (ctx) => updateDataAttrs(ctx, { inputmode: value }),
-    EnterKeyHint: ({ value }) => (ctx) => updateDataAttrs(ctx, { enterkeyhint: value }),
-    Multiple: ({ value }) => (ctx) => updateDataProps(ctx, { multiple: value }),
-    Type: ({ value }) => (ctx) => updateDataProps(ctx, { type: value }),
-    Accept: ({ value }) => (ctx) => updateDataProps(ctx, { accept: value }),
-    Autocomplete: ({ value }) => (ctx) => updateDataProps(ctx, { autocomplete: value }),
-    Pattern: ({ value }) => (ctx) => updateDataProps(ctx, { pattern: value }),
-    Maxlength: ({ value }) => (ctx) => updateDataProps(ctx, { maxLength: value }),
-    Minlength: ({ value }) => (ctx) => updateDataProps(ctx, { minLength: value }),
-    Size: ({ value }) => (ctx) => updateDataProps(ctx, { size: value }),
-    Cols: ({ value }) => (ctx) => updateDataProps(ctx, { cols: value }),
-    Rows: ({ value }) => (ctx) => updateDataProps(ctx, { rows: value }),
-    Max: ({ value }) => (ctx) => updateDataProps(ctx, { max: value }),
-    Min: ({ value }) => (ctx) => updateDataProps(ctx, { min: value }),
-    Step: ({ value }) => (ctx) => updateDataProps(ctx, { step: value }),
-    For: ({ value }) => (ctx) => updateDataProps(ctx, { htmlFor: value }),
-    Href: ({ value }) => (ctx) => updateDataProps(ctx, { href: value }),
-    Src: ({ value }) => (ctx) => updateDataProps(ctx, { src: value }),
-    Alt: ({ value }) => (ctx) => updateDataProps(ctx, { alt: value }),
-    Target: ({ value }) => (ctx) => updateDataProps(ctx, { target: value }),
-    Rel: ({ value }) => (ctx) => updateDataProps(ctx, { rel: value }),
-    Download: ({ value }) => (ctx) => updateDataProps(ctx, { download: value }),
-    Action: ({ value }) => (ctx) => updateDataProps(ctx, { action: value }),
-    Method: ({ value }) => (ctx) => updateDataProps(ctx, { method: value }),
-    Enctype: ({ value }) => (ctx) => updateDataProps(ctx, { enctype: value }),
-    Novalidate: ({ value }) => (ctx) => updateDataProps(ctx, { noValidate: value }),
-    Formaction: ({ value }) => (ctx) => updateDataProps(ctx, { formAction: value }),
-    Formmethod: ({ value }) => (ctx) => updateDataProps(ctx, { formMethod: value }),
-    Formnovalidate: ({ value }) => (ctx) => updateDataProps(ctx, { formNoValidate: value }),
-    Formtarget: ({ value }) => (ctx) => updateDataProps(ctx, { formTarget: value }),
-    Formenctype: ({ value }) => (ctx) => updateDataProps(ctx, { formEnctype: value }),
-    Colspan: ({ value }) => (ctx) => updateDataProps(ctx, { colSpan: value }),
-    Rowspan: ({ value }) => (ctx) => updateDataProps(ctx, { rowSpan: value }),
-    Scope: ({ value }) => (ctx) => updateDataAttrs(ctx, { scope: value }),
-    Headers: ({ value }) => (ctx) => updateDataAttrs(ctx, { headers: value }),
-    Span: ({ value }) => (ctx) => updateDataProps(ctx, { span: value }),
-    Start: ({ value }) => (ctx) => updateDataProps(ctx, { start: value }),
-    Reversed: ({ value }) => (ctx) => updateDataProps(ctx, { reversed: value }),
-    CiteAttr: ({ value }) => (ctx) => updateDataProps(ctx, { cite: value }),
-    Datetime: ({ value }) => (ctx) => updateDataProps(ctx, { dateTime: value }),
-    Wrap: ({ value }) => (ctx) => updateDataProps(ctx, { wrap: value }),
-    List: ({ value }) => (ctx) => updateDataAttrs(ctx, { list: value }),
-    FormAttr: ({ value }) => (ctx) => updateDataAttrs(ctx, { form: value }),
-    LabelAttr: ({ value }) => (ctx) => updateDataProps(ctx, { label: value }),
-    ContentAttr: ({ value }) => (ctx) => updateDataAttrs(ctx, { content: value }),
-    Charset: ({ value }) => (ctx) => updateDataAttrs(ctx, { charset: value }),
-    HttpEquiv: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'http-equiv': value }),
-    Srcset: ({ value }) => (ctx) => updateDataAttrs(ctx, { srcset: value }),
-    Sizes: ({ value }) => (ctx) => updateDataAttrs(ctx, { sizes: value }),
-    Loading: ({ value }) => (ctx) => updateDataAttrs(ctx, { loading: value }),
-    Decoding: ({ value }) => (ctx) => updateDataAttrs(ctx, { decoding: value }),
-    Fetchpriority: ({ value }) => (ctx) => updateDataAttrs(ctx, { fetchpriority: value }),
-    Crossorigin: ({ value }) => (ctx) => updateDataAttrs(ctx, { crossorigin: value }),
-    Referrerpolicy: ({ value }) => (ctx) => updateDataAttrs(ctx, { referrerpolicy: value }),
-    Integrity: ({ value }) => (ctx) => updateDataAttrs(ctx, { integrity: value }),
-    Hreflang: ({ value }) => (ctx) => updateDataAttrs(ctx, { hreflang: value }),
-    Ping: ({ value }) => (ctx) => updateDataAttrs(ctx, { ping: value }),
-    Sandbox: ({ value }) => (ctx) => updateDataAttrs(ctx, { sandbox: value }),
-    Allow: ({ value }) => (ctx) => updateDataAttrs(ctx, { allow: value }),
-    Srcdoc: ({ value }) => (ctx) => updateDataAttrs(ctx, { srcdoc: value }),
-    Autoplay: ({ value }) => (ctx) => updateDataProps(ctx, { autoplay: value }),
-    Controls: ({ value }) => (ctx) => updateDataProps(ctx, { controls: value }),
-    Loop: ({ value }) => (ctx) => updateDataProps(ctx, { loop: value }),
-    Muted: ({ value }) => (ctx) => updatePropsWithPostpatch(ctx, 'muted', value),
-    Poster: ({ value }) => (ctx) => updateDataProps(ctx, { poster: value }),
-    Preload: ({ value }) => (ctx) => updateDataProps(ctx, { preload: value }),
-    Playsinline: ({ value }) => (ctx) => updateDataProps(ctx, { playsInline: value }),
-    High: ({ value }) => (ctx) => updateDataProps(ctx, { high: value }),
-    Low: ({ value }) => (ctx) => updateDataProps(ctx, { low: value }),
-    Optimum: ({ value }) => (ctx) => updateDataProps(ctx, { optimum: value }),
-    Usemap: ({ value }) => (ctx) => updateDataAttrs(ctx, { usemap: value }),
-    Ismap: ({ value }) => (ctx) => updateDataProps(ctx, { isMap: value }),
-    Role: ({ value }) => (ctx) => updateDataAttrs(ctx, { role: value }),
-    AriaLabel: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-label': value }),
-    AriaLabelledBy: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-labelledby': value }),
-    AriaDescribedBy: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-describedby': value }),
-    AriaHidden: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-hidden': value.toString() }),
-    AriaExpanded: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-expanded': value.toString() }),
-    AriaSelected: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-selected': value.toString() }),
-    AriaChecked: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-checked': value.toString() }),
-    AriaDisabled: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-disabled': value.toString() }),
-    AriaRequired: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-required': value.toString() }),
-    AriaInvalid: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-invalid': value.toString() }),
-    AriaLive: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-live': value }),
-    AriaControls: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-controls': value }),
-    AriaCurrent: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-current': value }),
-    AriaOrientation: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-orientation': value }),
-    AriaPressed: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-pressed': value }),
-    AriaHasPopup: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-haspopup': value }),
-    AriaActiveDescendant: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-activedescendant': value }),
-    AriaSort: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-sort': value }),
-    AriaMultiSelectable: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-multiselectable': value.toString() }),
-    AriaModal: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-modal': value.toString() }),
-    AriaBusy: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-busy': value.toString() }),
-    AriaErrorMessage: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-errormessage': value }),
-    AriaRoleDescription: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-roledescription': value }),
-    AriaAtomic: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-atomic': value.toString() }),
-    AriaAutocomplete: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-autocomplete': value }),
-    AriaColcount: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-colcount': value.toString() }),
-    AriaColindex: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-colindex': value.toString() }),
-    AriaColspan: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-colspan': value.toString() }),
-    AriaDescription: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-description': value }),
-    AriaDetails: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-details': value }),
-    AriaFlowto: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-flowto': value }),
-    AriaKeyshortcuts: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-keyshortcuts': value }),
-    AriaLevel: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-level': value.toString() }),
-    AriaOwns: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-owns': value }),
-    AriaPlaceholder: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-placeholder': value }),
-    AriaPosinset: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-posinset': value.toString() }),
-    AriaReadonly: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-readonly': value.toString() }),
-    AriaRelevant: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-relevant': value }),
-    AriaRowcount: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-rowcount': value.toString() }),
-    AriaRowindex: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-rowindex': value.toString() }),
-    AriaRowspan: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-rowspan': value.toString() }),
-    AriaSetsize: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-setsize': value.toString() }),
-    AriaValuemax: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-valuemax': value.toString() }),
-    AriaValuemin: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-valuemin': value.toString() }),
-    AriaValuenow: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-valuenow': value.toString() }),
-    AriaValuetext: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-valuetext': value }),
-    Attribute: ({ key, value }) => (ctx) => updateDataAttrs(ctx, { [key]: value }),
-    DataAttribute: ({ key, value }) => (ctx) => updateDataAttrs(ctx, { [`data-${key}`]: value }),
-    Style: ({ value }) => (ctx) => setData(ctx, 'style', value),
-    InnerHTML: ({ value }) => (ctx) => updateDataProps(ctx, { innerHTML: value }),
-    ViewBox: ({ value }) => (ctx) => updateDataAttrs(ctx, { viewBox: value }),
-    Xmlns: ({ value }) => (ctx) => updateDataAttrs(ctx, { xmlns: value }),
-    Fill: ({ value }) => (ctx) => updateDataAttrs(ctx, { fill: value }),
-    FillRule: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'fill-rule': value }),
-    ClipRule: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'clip-rule': value }),
-    Stroke: ({ value }) => (ctx) => updateDataAttrs(ctx, { stroke: value }),
-    StrokeWidth: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stroke-width': value }),
-    StrokeLinecap: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stroke-linecap': value }),
-    StrokeLinejoin: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stroke-linejoin': value }),
-    D: ({ value }) => (ctx) => updateDataAttrs(ctx, { d: value }),
-    Cx: ({ value }) => (ctx) => updateDataAttrs(ctx, { cx: value }),
-    Cy: ({ value }) => (ctx) => updateDataAttrs(ctx, { cy: value }),
-    R: ({ value }) => (ctx) => updateDataAttrs(ctx, { r: value }),
-    X: ({ value }) => (ctx) => updateDataAttrs(ctx, { x: value }),
-    Y: ({ value }) => (ctx) => updateDataAttrs(ctx, { y: value }),
-    Width: ({ value }) => (ctx) => updateDataAttrs(ctx, { width: value }),
-    Height: ({ value }) => (ctx) => updateDataAttrs(ctx, { height: value }),
-    X1: ({ value }) => (ctx) => updateDataAttrs(ctx, { x1: value }),
-    Y1: ({ value }) => (ctx) => updateDataAttrs(ctx, { y1: value }),
-    X2: ({ value }) => (ctx) => updateDataAttrs(ctx, { x2: value }),
-    Y2: ({ value }) => (ctx) => updateDataAttrs(ctx, { y2: value }),
-    Points: ({ value }) => (ctx) => updateDataAttrs(ctx, { points: value }),
-    Transform: ({ value }) => (ctx) => updateDataAttrs(ctx, { transform: value }),
-    Opacity: ({ value }) => (ctx) => updateDataAttrs(ctx, { opacity: value }),
-    StrokeDasharray: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stroke-dasharray': value }),
-    StrokeDashoffset: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stroke-dashoffset': value }),
-    Dx: ({ value }) => (ctx) => updateDataAttrs(ctx, { dx: value }),
-    Dy: ({ value }) => (ctx) => updateDataAttrs(ctx, { dy: value }),
-    Rotate: ({ value }) => (ctx) => updateDataAttrs(ctx, { rotate: value }),
-    TextAnchor: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'text-anchor': value }),
-    DominantBaseline: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'dominant-baseline': value }),
-    AlignmentBaseline: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'alignment-baseline': value }),
-    BaselineShift: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'baseline-shift': value }),
-    TextLength: ({ value }) => (ctx) => updateDataAttrs(ctx, { textLength: value }),
-    LengthAdjust: ({ value }) => (ctx) => updateDataAttrs(ctx, { lengthAdjust: value }),
-    FontFamily: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'font-family': value }),
-    FontSize: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'font-size': value }),
-    FontWeight: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'font-weight': value }),
-    FontStyle: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'font-style': value }),
-    LetterSpacing: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'letter-spacing': value }),
-    WordSpacing: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'word-spacing': value }),
-    TextDecoration: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'text-decoration': value }),
-    WritingMode: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'writing-mode': value }),
-    Rx: ({ value }) => (ctx) => updateDataAttrs(ctx, { rx: value }),
-    Ry: ({ value }) => (ctx) => updateDataAttrs(ctx, { ry: value }),
-    PathLength: ({ value }) => (ctx) => updateDataAttrs(ctx, { pathLength: value }),
-    FillOpacity: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'fill-opacity': value }),
-    StrokeOpacity: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stroke-opacity': value }),
-    StrokeMiterlimit: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stroke-miterlimit': value }),
-    PaintOrder: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'paint-order': value }),
-    VectorEffect: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'vector-effect': value }),
-    Color: ({ value }) => (ctx) => updateDataAttrs(ctx, { color: value }),
-    Visibility: ({ value }) => (ctx) => updateDataAttrs(ctx, { visibility: value }),
-    Display: ({ value }) => (ctx) => updateDataAttrs(ctx, { display: value }),
-    Overflow: ({ value }) => (ctx) => updateDataAttrs(ctx, { overflow: value }),
-    PointerEvents: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'pointer-events': value }),
-    Cursor: ({ value }) => (ctx) => updateDataAttrs(ctx, { cursor: value }),
-    ShapeRendering: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'shape-rendering': value }),
-    TextRendering: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'text-rendering': value }),
-    ImageRendering: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'image-rendering': value }),
-    ClipPath: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'clip-path': value }),
-    Mask: ({ value }) => (ctx) => updateDataAttrs(ctx, { mask: value }),
-    Filter: ({ value }) => (ctx) => updateDataAttrs(ctx, { filter: value }),
-    ClipPathUnits: ({ value }) => (ctx) => updateDataAttrs(ctx, { clipPathUnits: value }),
-    MaskUnits: ({ value }) => (ctx) => updateDataAttrs(ctx, { maskUnits: value }),
-    MaskContentUnits: ({ value }) => (ctx) => updateDataAttrs(ctx, { maskContentUnits: value }),
-    FilterUnits: ({ value }) => (ctx) => updateDataAttrs(ctx, { filterUnits: value }),
-    PrimitiveUnits: ({ value }) => (ctx) => updateDataAttrs(ctx, { primitiveUnits: value }),
-    Offset: ({ value }) => (ctx) => updateDataAttrs(ctx, { offset: value }),
-    StopColor: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stop-color': value }),
-    StopOpacity: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stop-opacity': value }),
-    GradientUnits: ({ value }) => (ctx) => updateDataAttrs(ctx, { gradientUnits: value }),
-    GradientTransform: ({ value }) => (ctx) => updateDataAttrs(ctx, { gradientTransform: value }),
-    SpreadMethod: ({ value }) => (ctx) => updateDataAttrs(ctx, { spreadMethod: value }),
-    Fx: ({ value }) => (ctx) => updateDataAttrs(ctx, { fx: value }),
-    Fy: ({ value }) => (ctx) => updateDataAttrs(ctx, { fy: value }),
-    Fr: ({ value }) => (ctx) => updateDataAttrs(ctx, { fr: value }),
-    PatternUnits: ({ value }) => (ctx) => updateDataAttrs(ctx, { patternUnits: value }),
-    PatternContentUnits: ({ value }) => (ctx) => updateDataAttrs(ctx, { patternContentUnits: value }),
-    PatternTransform: ({ value }) => (ctx) => updateDataAttrs(ctx, { patternTransform: value }),
-    MarkerStart: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'marker-start': value }),
-    MarkerMid: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'marker-mid': value }),
-    MarkerEnd: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'marker-end': value }),
-    MarkerWidth: ({ value }) => (ctx) => updateDataAttrs(ctx, { markerWidth: value }),
-    MarkerHeight: ({ value }) => (ctx) => updateDataAttrs(ctx, { markerHeight: value }),
-    MarkerUnits: ({ value }) => (ctx) => updateDataAttrs(ctx, { markerUnits: value }),
-    RefX: ({ value }) => (ctx) => updateDataAttrs(ctx, { refX: value }),
-    RefY: ({ value }) => (ctx) => updateDataAttrs(ctx, { refY: value }),
-    Orient: ({ value }) => (ctx) => updateDataAttrs(ctx, { orient: value }),
-    PreserveAspectRatio: ({ value }) => (ctx) => updateDataAttrs(ctx, { preserveAspectRatio: value }),
-    Prop: ({ key, value }) => (ctx) => updateDataProps(ctx, { [key]: value }),
-    OnCustomEvent: ({ name, f }) => (ctx) => updateDataOn(ctx, {
+    OnTouchStart: ({ message }, ctx) => addDataOn(ctx, 'touchstart', () => ctx.dispatch(message)),
+    OnTouchEnd: ({ message }, ctx) => addDataOn(ctx, 'touchend', () => ctx.dispatch(message)),
+    OnTouchMove: ({ message }, ctx) => addDataOn(ctx, 'touchmove', () => ctx.dispatch(message)),
+    OnTouchCancel: ({ message }, ctx) => addDataOn(ctx, 'touchcancel', () => ctx.dispatch(message)),
+    OnAnimationStart: ({ message }, ctx) => addDataOn(ctx, 'animationstart', () => ctx.dispatch(message)),
+    OnAnimationEnd: ({ message }, ctx) => addDataOn(ctx, 'animationend', () => ctx.dispatch(message)),
+    OnAnimationIteration: ({ message }, ctx) => addDataOn(ctx, 'animationiteration', () => ctx.dispatch(message)),
+    OnTransitionEnd: ({ message }, ctx) => addDataOn(ctx, 'transitionend', () => ctx.dispatch(message)),
+    OnLoad: ({ message }, ctx) => addDataOn(ctx, 'load', () => ctx.dispatch(message)),
+    OnError: ({ message }, ctx) => addDataOn(ctx, 'error', () => ctx.dispatch(message)),
+    OnPlay: ({ message }, ctx) => addDataOn(ctx, 'play', () => ctx.dispatch(message)),
+    OnPause: ({ message }, ctx) => addDataOn(ctx, 'pause', () => ctx.dispatch(message)),
+    OnEnded: ({ message }, ctx) => addDataOn(ctx, 'ended', () => ctx.dispatch(message)),
+    OnTimeUpdate: ({ message }, ctx) => addDataOn(ctx, 'timeupdate', () => ctx.dispatch(message)),
+    OnVolumeChange: ({ message }, ctx) => addDataOn(ctx, 'volumechange', () => ctx.dispatch(message)),
+    OnSelect: ({ message }, ctx) => addDataOn(ctx, 'select', () => ctx.dispatch(message)),
+    Value: ({ value }, ctx) => updatePropsWithPostpatch(ctx, 'value', value),
+    Checked: ({ value }, ctx) => updatePropsWithPostpatch(ctx, 'checked', value),
+    Selected: ({ value }, ctx) => updatePropsWithPostpatch(ctx, 'selected', value),
+    Open: ({ value }, ctx) => updatePropsWithPostpatch(ctx, 'open', value),
+    Placeholder: ({ value }, ctx) => setDataProp(ctx, 'placeholder', value),
+    Name: ({ value }, ctx) => setDataProp(ctx, 'name', value),
+    Disabled: ({ value }, ctx) => setDataProp(ctx, 'disabled', value),
+    Readonly: ({ value }, ctx) => setDataProp(ctx, 'readOnly', value),
+    Required: ({ value }, ctx) => setDataProp(ctx, 'required', value),
+    Autofocus: ({ value }, ctx) => setDataProp(ctx, 'autofocus', value),
+    Spellcheck: ({ value }, ctx) => setDataAttr(ctx, 'spellcheck', value.toString()),
+    Autocorrect: ({ value }, ctx) => setDataAttr(ctx, 'autocorrect', value),
+    Autocapitalize: ({ value }, ctx) => setDataAttr(ctx, 'autocapitalize', value),
+    InputMode: ({ value }, ctx) => setDataAttr(ctx, 'inputmode', value),
+    EnterKeyHint: ({ value }, ctx) => setDataAttr(ctx, 'enterkeyhint', value),
+    Multiple: ({ value }, ctx) => setDataProp(ctx, 'multiple', value),
+    Type: ({ value }, ctx) => setDataProp(ctx, 'type', value),
+    Accept: ({ value }, ctx) => setDataProp(ctx, 'accept', value),
+    Autocomplete: ({ value }, ctx) => setDataProp(ctx, 'autocomplete', value),
+    Pattern: ({ value }, ctx) => setDataProp(ctx, 'pattern', value),
+    Maxlength: ({ value }, ctx) => setDataProp(ctx, 'maxLength', value),
+    Minlength: ({ value }, ctx) => setDataProp(ctx, 'minLength', value),
+    Size: ({ value }, ctx) => setDataProp(ctx, 'size', value),
+    Cols: ({ value }, ctx) => setDataProp(ctx, 'cols', value),
+    Rows: ({ value }, ctx) => setDataProp(ctx, 'rows', value),
+    Max: ({ value }, ctx) => setDataProp(ctx, 'max', value),
+    Min: ({ value }, ctx) => setDataProp(ctx, 'min', value),
+    Step: ({ value }, ctx) => setDataProp(ctx, 'step', value),
+    For: ({ value }, ctx) => setDataProp(ctx, 'htmlFor', value),
+    Href: ({ value }, ctx) => setDataProp(ctx, 'href', value),
+    Src: ({ value }, ctx) => setDataProp(ctx, 'src', value),
+    Alt: ({ value }, ctx) => setDataProp(ctx, 'alt', value),
+    Target: ({ value }, ctx) => setDataProp(ctx, 'target', value),
+    Rel: ({ value }, ctx) => setDataProp(ctx, 'rel', value),
+    Download: ({ value }, ctx) => setDataProp(ctx, 'download', value),
+    Action: ({ value }, ctx) => setDataProp(ctx, 'action', value),
+    Method: ({ value }, ctx) => setDataProp(ctx, 'method', value),
+    Enctype: ({ value }, ctx) => setDataProp(ctx, 'enctype', value),
+    Novalidate: ({ value }, ctx) => setDataProp(ctx, 'noValidate', value),
+    Formaction: ({ value }, ctx) => setDataProp(ctx, 'formAction', value),
+    Formmethod: ({ value }, ctx) => setDataProp(ctx, 'formMethod', value),
+    Formnovalidate: ({ value }, ctx) => setDataProp(ctx, 'formNoValidate', value),
+    Formtarget: ({ value }, ctx) => setDataProp(ctx, 'formTarget', value),
+    Formenctype: ({ value }, ctx) => setDataProp(ctx, 'formEnctype', value),
+    Colspan: ({ value }, ctx) => setDataProp(ctx, 'colSpan', value),
+    Rowspan: ({ value }, ctx) => setDataProp(ctx, 'rowSpan', value),
+    Scope: ({ value }, ctx) => setDataAttr(ctx, 'scope', value),
+    Headers: ({ value }, ctx) => setDataAttr(ctx, 'headers', value),
+    Span: ({ value }, ctx) => setDataProp(ctx, 'span', value),
+    Start: ({ value }, ctx) => setDataProp(ctx, 'start', value),
+    Reversed: ({ value }, ctx) => setDataProp(ctx, 'reversed', value),
+    CiteAttr: ({ value }, ctx) => setDataProp(ctx, 'cite', value),
+    Datetime: ({ value }, ctx) => setDataProp(ctx, 'dateTime', value),
+    Wrap: ({ value }, ctx) => setDataProp(ctx, 'wrap', value),
+    List: ({ value }, ctx) => setDataAttr(ctx, 'list', value),
+    FormAttr: ({ value }, ctx) => setDataAttr(ctx, 'form', value),
+    LabelAttr: ({ value }, ctx) => setDataProp(ctx, 'label', value),
+    ContentAttr: ({ value }, ctx) => setDataAttr(ctx, 'content', value),
+    Charset: ({ value }, ctx) => setDataAttr(ctx, 'charset', value),
+    HttpEquiv: ({ value }, ctx) => setDataAttr(ctx, 'http-equiv', value),
+    Srcset: ({ value }, ctx) => setDataAttr(ctx, 'srcset', value),
+    Sizes: ({ value }, ctx) => setDataAttr(ctx, 'sizes', value),
+    Loading: ({ value }, ctx) => setDataAttr(ctx, 'loading', value),
+    Decoding: ({ value }, ctx) => setDataAttr(ctx, 'decoding', value),
+    Fetchpriority: ({ value }, ctx) => setDataAttr(ctx, 'fetchpriority', value),
+    Crossorigin: ({ value }, ctx) => setDataAttr(ctx, 'crossorigin', value),
+    Referrerpolicy: ({ value }, ctx) => setDataAttr(ctx, 'referrerpolicy', value),
+    Integrity: ({ value }, ctx) => setDataAttr(ctx, 'integrity', value),
+    Hreflang: ({ value }, ctx) => setDataAttr(ctx, 'hreflang', value),
+    Ping: ({ value }, ctx) => setDataAttr(ctx, 'ping', value),
+    Sandbox: ({ value }, ctx) => setDataAttr(ctx, 'sandbox', value),
+    Allow: ({ value }, ctx) => setDataAttr(ctx, 'allow', value),
+    Srcdoc: ({ value }, ctx) => setDataAttr(ctx, 'srcdoc', value),
+    Autoplay: ({ value }, ctx) => setDataProp(ctx, 'autoplay', value),
+    Controls: ({ value }, ctx) => setDataProp(ctx, 'controls', value),
+    Loop: ({ value }, ctx) => setDataProp(ctx, 'loop', value),
+    Muted: ({ value }, ctx) => updatePropsWithPostpatch(ctx, 'muted', value),
+    Poster: ({ value }, ctx) => setDataProp(ctx, 'poster', value),
+    Preload: ({ value }, ctx) => setDataProp(ctx, 'preload', value),
+    Playsinline: ({ value }, ctx) => setDataProp(ctx, 'playsInline', value),
+    High: ({ value }, ctx) => setDataProp(ctx, 'high', value),
+    Low: ({ value }, ctx) => setDataProp(ctx, 'low', value),
+    Optimum: ({ value }, ctx) => setDataProp(ctx, 'optimum', value),
+    Usemap: ({ value }, ctx) => setDataAttr(ctx, 'usemap', value),
+    Ismap: ({ value }, ctx) => setDataProp(ctx, 'isMap', value),
+    Role: ({ value }, ctx) => setDataAttr(ctx, 'role', value),
+    AriaLabel: ({ value }, ctx) => setDataAttr(ctx, 'aria-label', value),
+    AriaLabelledBy: ({ value }, ctx) => setDataAttr(ctx, 'aria-labelledby', value),
+    AriaDescribedBy: ({ value }, ctx) => setDataAttr(ctx, 'aria-describedby', value),
+    AriaHidden: ({ value }, ctx) => setDataAttr(ctx, 'aria-hidden', value.toString()),
+    AriaExpanded: ({ value }, ctx) => setDataAttr(ctx, 'aria-expanded', value.toString()),
+    AriaSelected: ({ value }, ctx) => setDataAttr(ctx, 'aria-selected', value.toString()),
+    AriaChecked: ({ value }, ctx) => setDataAttr(ctx, 'aria-checked', value.toString()),
+    AriaDisabled: ({ value }, ctx) => setDataAttr(ctx, 'aria-disabled', value.toString()),
+    AriaRequired: ({ value }, ctx) => setDataAttr(ctx, 'aria-required', value.toString()),
+    AriaInvalid: ({ value }, ctx) => setDataAttr(ctx, 'aria-invalid', value.toString()),
+    AriaLive: ({ value }, ctx) => setDataAttr(ctx, 'aria-live', value),
+    AriaControls: ({ value }, ctx) => setDataAttr(ctx, 'aria-controls', value),
+    AriaCurrent: ({ value }, ctx) => setDataAttr(ctx, 'aria-current', value),
+    AriaOrientation: ({ value }, ctx) => setDataAttr(ctx, 'aria-orientation', value),
+    AriaPressed: ({ value }, ctx) => setDataAttr(ctx, 'aria-pressed', value),
+    AriaHasPopup: ({ value }, ctx) => setDataAttr(ctx, 'aria-haspopup', value),
+    AriaActiveDescendant: ({ value }, ctx) => setDataAttr(ctx, 'aria-activedescendant', value),
+    AriaSort: ({ value }, ctx) => setDataAttr(ctx, 'aria-sort', value),
+    AriaMultiSelectable: ({ value }, ctx) => setDataAttr(ctx, 'aria-multiselectable', value.toString()),
+    AriaModal: ({ value }, ctx) => setDataAttr(ctx, 'aria-modal', value.toString()),
+    AriaBusy: ({ value }, ctx) => setDataAttr(ctx, 'aria-busy', value.toString()),
+    AriaErrorMessage: ({ value }, ctx) => setDataAttr(ctx, 'aria-errormessage', value),
+    AriaRoleDescription: ({ value }, ctx) => setDataAttr(ctx, 'aria-roledescription', value),
+    AriaAtomic: ({ value }, ctx) => setDataAttr(ctx, 'aria-atomic', value.toString()),
+    AriaAutocomplete: ({ value }, ctx) => setDataAttr(ctx, 'aria-autocomplete', value),
+    AriaColcount: ({ value }, ctx) => setDataAttr(ctx, 'aria-colcount', value.toString()),
+    AriaColindex: ({ value }, ctx) => setDataAttr(ctx, 'aria-colindex', value.toString()),
+    AriaColspan: ({ value }, ctx) => setDataAttr(ctx, 'aria-colspan', value.toString()),
+    AriaDescription: ({ value }, ctx) => setDataAttr(ctx, 'aria-description', value),
+    AriaDetails: ({ value }, ctx) => setDataAttr(ctx, 'aria-details', value),
+    AriaFlowto: ({ value }, ctx) => setDataAttr(ctx, 'aria-flowto', value),
+    AriaKeyshortcuts: ({ value }, ctx) => setDataAttr(ctx, 'aria-keyshortcuts', value),
+    AriaLevel: ({ value }, ctx) => setDataAttr(ctx, 'aria-level', value.toString()),
+    AriaOwns: ({ value }, ctx) => setDataAttr(ctx, 'aria-owns', value),
+    AriaPlaceholder: ({ value }, ctx) => setDataAttr(ctx, 'aria-placeholder', value),
+    AriaPosinset: ({ value }, ctx) => setDataAttr(ctx, 'aria-posinset', value.toString()),
+    AriaReadonly: ({ value }, ctx) => setDataAttr(ctx, 'aria-readonly', value.toString()),
+    AriaRelevant: ({ value }, ctx) => setDataAttr(ctx, 'aria-relevant', value),
+    AriaRowcount: ({ value }, ctx) => setDataAttr(ctx, 'aria-rowcount', value.toString()),
+    AriaRowindex: ({ value }, ctx) => setDataAttr(ctx, 'aria-rowindex', value.toString()),
+    AriaRowspan: ({ value }, ctx) => setDataAttr(ctx, 'aria-rowspan', value.toString()),
+    AriaSetsize: ({ value }, ctx) => setDataAttr(ctx, 'aria-setsize', value.toString()),
+    AriaValuemax: ({ value }, ctx) => setDataAttr(ctx, 'aria-valuemax', value.toString()),
+    AriaValuemin: ({ value }, ctx) => setDataAttr(ctx, 'aria-valuemin', value.toString()),
+    AriaValuenow: ({ value }, ctx) => setDataAttr(ctx, 'aria-valuenow', value.toString()),
+    AriaValuetext: ({ value }, ctx) => setDataAttr(ctx, 'aria-valuetext', value),
+    Attribute: ({ key, value }, ctx) => setDataAttr(ctx, key, value),
+    DataAttribute: ({ key, value }, ctx) => setDataAttr(ctx, `data-${key}`, value),
+    Style: ({ value }, ctx) => setModuleData(ctx, 'style', value, VNodeDataMask.Style),
+    InnerHTML: ({ value }, ctx) => setDataProp(ctx, 'innerHTML', value),
+    ViewBox: ({ value }, ctx) => setDataAttr(ctx, 'viewBox', value),
+    Xmlns: ({ value }, ctx) => setDataAttr(ctx, 'xmlns', value),
+    Fill: ({ value }, ctx) => setDataAttr(ctx, 'fill', value),
+    FillRule: ({ value }, ctx) => setDataAttr(ctx, 'fill-rule', value),
+    ClipRule: ({ value }, ctx) => setDataAttr(ctx, 'clip-rule', value),
+    Stroke: ({ value }, ctx) => setDataAttr(ctx, 'stroke', value),
+    StrokeWidth: ({ value }, ctx) => setDataAttr(ctx, 'stroke-width', value),
+    StrokeLinecap: ({ value }, ctx) => setDataAttr(ctx, 'stroke-linecap', value),
+    StrokeLinejoin: ({ value }, ctx) => setDataAttr(ctx, 'stroke-linejoin', value),
+    D: ({ value }, ctx) => setDataAttr(ctx, 'd', value),
+    Cx: ({ value }, ctx) => setDataAttr(ctx, 'cx', value),
+    Cy: ({ value }, ctx) => setDataAttr(ctx, 'cy', value),
+    R: ({ value }, ctx) => setDataAttr(ctx, 'r', value),
+    X: ({ value }, ctx) => setDataAttr(ctx, 'x', value),
+    Y: ({ value }, ctx) => setDataAttr(ctx, 'y', value),
+    Width: ({ value }, ctx) => setDataAttr(ctx, 'width', value),
+    Height: ({ value }, ctx) => setDataAttr(ctx, 'height', value),
+    X1: ({ value }, ctx) => setDataAttr(ctx, 'x1', value),
+    Y1: ({ value }, ctx) => setDataAttr(ctx, 'y1', value),
+    X2: ({ value }, ctx) => setDataAttr(ctx, 'x2', value),
+    Y2: ({ value }, ctx) => setDataAttr(ctx, 'y2', value),
+    Points: ({ value }, ctx) => setDataAttr(ctx, 'points', value),
+    Transform: ({ value }, ctx) => setDataAttr(ctx, 'transform', value),
+    Opacity: ({ value }, ctx) => setDataAttr(ctx, 'opacity', value),
+    StrokeDasharray: ({ value }, ctx) => setDataAttr(ctx, 'stroke-dasharray', value),
+    StrokeDashoffset: ({ value }, ctx) => setDataAttr(ctx, 'stroke-dashoffset', value),
+    Dx: ({ value }, ctx) => setDataAttr(ctx, 'dx', value),
+    Dy: ({ value }, ctx) => setDataAttr(ctx, 'dy', value),
+    Rotate: ({ value }, ctx) => setDataAttr(ctx, 'rotate', value),
+    TextAnchor: ({ value }, ctx) => setDataAttr(ctx, 'text-anchor', value),
+    DominantBaseline: ({ value }, ctx) => setDataAttr(ctx, 'dominant-baseline', value),
+    AlignmentBaseline: ({ value }, ctx) => setDataAttr(ctx, 'alignment-baseline', value),
+    BaselineShift: ({ value }, ctx) => setDataAttr(ctx, 'baseline-shift', value),
+    TextLength: ({ value }, ctx) => setDataAttr(ctx, 'textLength', value),
+    LengthAdjust: ({ value }, ctx) => setDataAttr(ctx, 'lengthAdjust', value),
+    FontFamily: ({ value }, ctx) => setDataAttr(ctx, 'font-family', value),
+    FontSize: ({ value }, ctx) => setDataAttr(ctx, 'font-size', value),
+    FontWeight: ({ value }, ctx) => setDataAttr(ctx, 'font-weight', value),
+    FontStyle: ({ value }, ctx) => setDataAttr(ctx, 'font-style', value),
+    LetterSpacing: ({ value }, ctx) => setDataAttr(ctx, 'letter-spacing', value),
+    WordSpacing: ({ value }, ctx) => setDataAttr(ctx, 'word-spacing', value),
+    TextDecoration: ({ value }, ctx) => setDataAttr(ctx, 'text-decoration', value),
+    WritingMode: ({ value }, ctx) => setDataAttr(ctx, 'writing-mode', value),
+    Rx: ({ value }, ctx) => setDataAttr(ctx, 'rx', value),
+    Ry: ({ value }, ctx) => setDataAttr(ctx, 'ry', value),
+    PathLength: ({ value }, ctx) => setDataAttr(ctx, 'pathLength', value),
+    FillOpacity: ({ value }, ctx) => setDataAttr(ctx, 'fill-opacity', value),
+    StrokeOpacity: ({ value }, ctx) => setDataAttr(ctx, 'stroke-opacity', value),
+    StrokeMiterlimit: ({ value }, ctx) => setDataAttr(ctx, 'stroke-miterlimit', value),
+    PaintOrder: ({ value }, ctx) => setDataAttr(ctx, 'paint-order', value),
+    VectorEffect: ({ value }, ctx) => setDataAttr(ctx, 'vector-effect', value),
+    Color: ({ value }, ctx) => setDataAttr(ctx, 'color', value),
+    Visibility: ({ value }, ctx) => setDataAttr(ctx, 'visibility', value),
+    Display: ({ value }, ctx) => setDataAttr(ctx, 'display', value),
+    Overflow: ({ value }, ctx) => setDataAttr(ctx, 'overflow', value),
+    PointerEvents: ({ value }, ctx) => setDataAttr(ctx, 'pointer-events', value),
+    Cursor: ({ value }, ctx) => setDataAttr(ctx, 'cursor', value),
+    ShapeRendering: ({ value }, ctx) => setDataAttr(ctx, 'shape-rendering', value),
+    TextRendering: ({ value }, ctx) => setDataAttr(ctx, 'text-rendering', value),
+    ImageRendering: ({ value }, ctx) => setDataAttr(ctx, 'image-rendering', value),
+    ClipPath: ({ value }, ctx) => setDataAttr(ctx, 'clip-path', value),
+    Mask: ({ value }, ctx) => setDataAttr(ctx, 'mask', value),
+    Filter: ({ value }, ctx) => setDataAttr(ctx, 'filter', value),
+    ClipPathUnits: ({ value }, ctx) => setDataAttr(ctx, 'clipPathUnits', value),
+    MaskUnits: ({ value }, ctx) => setDataAttr(ctx, 'maskUnits', value),
+    MaskContentUnits: ({ value }, ctx) => setDataAttr(ctx, 'maskContentUnits', value),
+    FilterUnits: ({ value }, ctx) => setDataAttr(ctx, 'filterUnits', value),
+    PrimitiveUnits: ({ value }, ctx) => setDataAttr(ctx, 'primitiveUnits', value),
+    Offset: ({ value }, ctx) => setDataAttr(ctx, 'offset', value),
+    StopColor: ({ value }, ctx) => setDataAttr(ctx, 'stop-color', value),
+    StopOpacity: ({ value }, ctx) => setDataAttr(ctx, 'stop-opacity', value),
+    GradientUnits: ({ value }, ctx) => setDataAttr(ctx, 'gradientUnits', value),
+    GradientTransform: ({ value }, ctx) => setDataAttr(ctx, 'gradientTransform', value),
+    SpreadMethod: ({ value }, ctx) => setDataAttr(ctx, 'spreadMethod', value),
+    Fx: ({ value }, ctx) => setDataAttr(ctx, 'fx', value),
+    Fy: ({ value }, ctx) => setDataAttr(ctx, 'fy', value),
+    Fr: ({ value }, ctx) => setDataAttr(ctx, 'fr', value),
+    PatternUnits: ({ value }, ctx) => setDataAttr(ctx, 'patternUnits', value),
+    PatternContentUnits: ({ value }, ctx) => setDataAttr(ctx, 'patternContentUnits', value),
+    PatternTransform: ({ value }, ctx) => setDataAttr(ctx, 'patternTransform', value),
+    MarkerStart: ({ value }, ctx) => setDataAttr(ctx, 'marker-start', value),
+    MarkerMid: ({ value }, ctx) => setDataAttr(ctx, 'marker-mid', value),
+    MarkerEnd: ({ value }, ctx) => setDataAttr(ctx, 'marker-end', value),
+    MarkerWidth: ({ value }, ctx) => setDataAttr(ctx, 'markerWidth', value),
+    MarkerHeight: ({ value }, ctx) => setDataAttr(ctx, 'markerHeight', value),
+    MarkerUnits: ({ value }, ctx) => setDataAttr(ctx, 'markerUnits', value),
+    RefX: ({ value }, ctx) => setDataAttr(ctx, 'refX', value),
+    RefY: ({ value }, ctx) => setDataAttr(ctx, 'refY', value),
+    Orient: ({ value }, ctx) => setDataAttr(ctx, 'orient', value),
+    PreserveAspectRatio: ({ value }, ctx) => setDataAttr(ctx, 'preserveAspectRatio', value),
+    Prop: ({ key, value }, ctx) => setDataProp(ctx, key, value),
+    OnCustomEvent: ({ name, f: toMessage }, ctx) => updateDataOn(ctx, {
         [name]: (event) => {
             if (event instanceof CustomEvent) {
-                ctx.dispatch(f(event));
+                ctx.dispatch(toMessage(event));
             }
         },
     }),
-    OnMount: ({ action }) => (ctx) => {
+    OnMount: ({ action }, ctx) => {
         const capturedContext = ctx.getCapturedContext();
         const maybeTracker = Context.getOption(capturedContext, MountTracker);
         const notifyStarted = Option.isSome(maybeTracker)
@@ -714,7 +758,7 @@ const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
             },
         };
     },
-    OnUnmount: ({ message }) => (ctx) => {
+    OnUnmount: ({ message }, ctx) => {
         // NOTE: resolve the boundary wrapping chain eagerly, while the boundary
         // is still live this render. The destroy hook fires during the patch
         // that removes the element, after the Submodel's own destroy hook has
@@ -734,130 +778,156 @@ const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
             },
         };
     },
-}));
-const buildVNodeData = (attributes) => {
-    // Capture lazily, and tolerate the absence of a runtime frame. Static
-    // elements (`h.code([h.Class('x')], ['text'])`) and prose fragments built
-    // at module top level (`const fragment = inlineCode('foo')` at import
-    // time) must construct without an active render frame. They never invoke
-    // the fallback dispatcher because they have no event handlers; event-
-    // bearing Html constructed outside a render reaches the fallback only at
-    // event-fire time, which surfaces a clear error rather than failing at
-    // import time.
-    let cachedCurrentDispatch;
-    const getCurrentDispatch = () => {
-        if (cachedCurrentDispatch === undefined) {
-            try {
-                cachedCurrentDispatch = requireDispatch();
-            }
-            catch {
-                cachedCurrentDispatch = () => {
-                    throw new Error('Foldkit: an event-bearing Html attribute fired without an ' +
-                        'active runtime frame. This typically means an Html element ' +
-                        'with event handlers (OnClick, OnInput, etc.) was constructed ' +
-                        'at module top level outside of a view function.');
-                };
-            }
-        }
-        return cachedCurrentDispatch;
-    };
-    let cachedUnmountResolver;
-    const getCurrentUnmountResolver = () => {
-        if (cachedUnmountResolver === undefined) {
-            try {
-                cachedUnmountResolver = requireUnmountResolver();
-            }
-            catch {
-                cachedUnmountResolver = () => () => {
-                    throw new Error('Foldkit: an OnUnmount attribute fired without an active runtime ' +
-                        'frame. This typically means an Html element with OnUnmount was ' +
-                        'constructed at module top level outside of a view function.');
-                };
-            }
-        }
-        return cachedUnmountResolver;
-    };
-    let cachedCapturedContext;
-    const getCapturedContext = () => {
-        if (cachedCapturedContext === undefined) {
-            try {
-                cachedCapturedContext = requireRuntimeContext();
-            }
-            catch {
-                cachedCapturedContext = Context.empty();
+};
+const applyAttribute = (attribute, ctx) => {
+    // NOTE: the mapped record type correlates each handler's attribute
+    // parameter with its tag, which TypeScript cannot re-derive at this
+    // widened call site.
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    const handler = attributeHandlers[attribute._tag];
+    handler(attribute, ctx);
+};
+// NOTE: tolerate the absence of a runtime frame. Static elements
+// (`h.code([h.Class('x')], ['text'])`) and prose fragments built at module
+// top level (`const fragment = inlineCode('foo')` at import time) must
+// construct without an active render frame. They never invoke the fallback
+// dispatcher because they have no event handlers; event-bearing Html
+// constructed outside a render reaches the fallback only at event-fire time,
+// which surfaces a clear error rather than failing at import time. The
+// fallbacks are module-level constants so element construction allocates no
+// per-element closures for them.
+const fallbackDispatch = () => {
+    throw new Error('Foldkit: an event-bearing Html attribute fired without an ' +
+        'active runtime frame. This typically means an Html element ' +
+        'with event handlers (OnClick, OnInput, etc.) was constructed ' +
+        'at module top level outside of a view function.');
+};
+const fallbackUnmountResolver = () => () => {
+    throw new Error('Foldkit: an OnUnmount attribute fired without an active runtime ' +
+        'frame. This typically means an Html element with OnUnmount was ' +
+        'constructed at module top level outside of a view function.');
+};
+const currentDispatchOrFallback = () => {
+    try {
+        return requireDispatch();
+    }
+    catch {
+        return fallbackDispatch;
+    }
+};
+const currentUnmountResolverOrFallback = () => {
+    try {
+        return requireUnmountResolver();
+    }
+    catch {
+        return fallbackUnmountResolver;
+    }
+};
+const capturedContextOrEmpty = () => {
+    try {
+        return requireRuntimeContext();
+    }
+    catch {
+        return Context.empty();
+    }
+};
+const attachPostpatchHook = (data, postpatchProps) => {
+    data.hook = {
+        ...data.hook,
+        postpatch: (_oldVnode, vnode) => {
+            if (vnode.elm) {
+                Array.forEach(postpatchProps, ({ propName, value }) => {
+                    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                    if (vnode.elm[propName] !== value) {
+                        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                        ;
+                        vnode.elm[propName] = value;
+                    }
+                });
             }
-        }
-        return cachedCapturedContext;
+        },
     };
-    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-    const data = {};
-    const postpatchProps = [];
-    // Most attributes route through the current frame's dispatch. ChildAttribute
-    // items carry a different dispatcher (captured by `childAttributes`
-    // in a Submodel's own boundary), so they need their own BuildContext closed
-    // over that dispatch. The matcher itself is module-level and shared.
-    // The main ctx is built lazily. Static-only attribute arrays (Class, Id,
-    // etc. with no event handlers) skip `requireDispatch` entirely so Html can
-    // be constructed at module top level.
+};
+const buildVNodeData = (attributes) => {
+    const data = { [vnodeDataMaskKey]: 0 };
+    if (attributes.length === 0) {
+        return data;
+    }
+    // NOTE: most attributes route through the current frame's dispatch.
+    // ChildAttribute items carry a different dispatcher (captured by
+    // `childAttributes` in a Submodel's own boundary), so they need their own
+    // BuildContext closed over that dispatch. The handler record itself is
+    // module-level and shared. The main ctx is built lazily. Static-only
+    // attribute arrays (Class, Id, etc. with no event handlers) skip
+    // `requireDispatch` entirely so Html can be constructed at module top
+    // level. The boundary ctx map is only allocated when a ChildAttribute is
+    // actually present.
     let mainCtx;
-    const boundaryCtxByDispatch = new Map();
+    let boundaryCtxByDispatch;
+    let sharedPostpatchProps;
+    const getSharedPostpatchProps = () => (sharedPostpatchProps ??= []);
     for (const item of attributes) {
         if (isChildAttribute(item)) {
+            boundaryCtxByDispatch ??= new Map();
             let ctx = boundaryCtxByDispatch.get(item.dispatch);
             if (ctx === undefined) {
                 ctx = {
                     data,
-                    postpatchProps,
+                    getPostpatchProps: getSharedPostpatchProps,
                     dispatch: item.dispatch,
                     resolveUnmount: item.resolveUnmount,
                     boundaryMappers: item.boundaryMappers,
-                    getCapturedContext,
+                    getCapturedContext: capturedContextOrEmpty,
                 };
                 boundaryCtxByDispatch.set(item.dispatch, ctx);
             }
             /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-            attributeMatcher(item.attribute)(ctx);
+            applyAttribute(item.attribute, ctx);
         }
         else {
             if (mainCtx === undefined) {
                 mainCtx = {
                     data,
-                    postpatchProps,
-                    dispatch: getCurrentDispatch(),
-                    resolveUnmount: getCurrentUnmountResolver(),
+                    getPostpatchProps: getSharedPostpatchProps,
+                    dispatch: currentDispatchOrFallback(),
+                    resolveUnmount: currentUnmountResolverOrFallback(),
                     boundaryMappers: requireBoundaryMappers(),
-                    getCapturedContext,
+                    getCapturedContext: capturedContextOrEmpty,
                 };
             }
             /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-            attributeMatcher(item)(mainCtx);
+            applyAttribute(item, mainCtx);
         }
     }
-    if (Array.isReadonlyArrayNonEmpty(postpatchProps)) {
-        data.hook = {
-            ...data.hook,
-            postpatch: (_oldVnode, vnode) => {
-                if (vnode.elm) {
-                    Array.forEach(postpatchProps, ({ propName, value }) => {
-                        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                        if (vnode.elm[propName] !== value) {
-                            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                            ;
-                            vnode.elm[propName] = value;
-                        }
-                    });
-                }
-            },
-        };
+    if (sharedPostpatchProps !== undefined &&
+        Array.isReadonlyArrayNonEmpty(sharedPostpatchProps)) {
+        attachPostpatchHook(data, sharedPostpatchProps);
     }
     return data;
 };
-const processVNodeChildren = (children) => Array.filter(children, Predicate.isNotNull);
-const createElement = (tagName, attributes = [], children = []) => h(tagName, buildVNodeData(attributes), Array.fromIterable(processVNodeChildren(children)));
+// NOTE: one fresh mutable array per element in a single pass: `h.empty`
+// children (null) are dropped, and snabbdom's `h` converts primitive
+// children to text vnodes in place, so the caller's array must never be
+// handed over directly.
+const copyChildrenDroppingEmpty = (children) => {
+    const next = [];
+    for (let index = 0; index < children.length; index++) {
+        const child = children[index];
+        if (child !== null && child !== undefined) {
+            next.push(child);
+        }
+    }
+    return next;
+};
+const createElement = (tagName, attributes = [], children = []) => h(tagName, buildVNodeData(attributes), copyChildrenDroppingEmpty(children));
 const element = () => (tagName) => (attributes = [], children = []) => createElement(tagName, attributes, children);
 export const customElement = () => (tagName) => (attributes = [], children = []) => createElement(tagName, attributes, children);
 const voidElement = () => (tagName) => (attributes = []) => createElement(tagName, attributes, []);
-const keyed = () => (tagName) => (key, attributes = [], children = []) => element()(tagName)([...attributes, Key({ value: key })], children);
+const keyed = () => (tagName) => (key, attributes = [], children = []) => {
+    const data = buildVNodeData(attributes);
+    data.key = key;
+    return h(tagName, data, copyChildrenDroppingEmpty(children));
+};
 const htmlElements = () => {
     const el = element();
     const voidEl = voidElement();
@@ -1137,12 +1207,12 @@ const htmlAttributes = () => ({
     OnMouseOver: (message) => OnMouseOver({ message }),
     OnMouseOut: (message) => OnMouseOut({ message }),
     OnMouseMove: (message) => OnMouseMove({ message }),
-    OnPointerMove: (f) => OnPointerMove({ f }),
-    OnPointerLeave: (f) => OnPointerLeave({ f }),
-    OnPointerDown: (f) => OnPointerDown({ f }),
-    OnPointerUp: (f) => OnPointerUp({ f }),
-    OnKeyDown: (f) => OnKeyDown({ f }),
-    OnKeyDownPreventDefault: (f) => OnKeyDownPreventDefault({ f }),
+    OnPointerMove: (toMaybeMessage) => OnPointerMove({ f: toMaybeMessage }),
+    OnPointerLeave: (toMaybeMessage) => OnPointerLeave({ f: toMaybeMessage }),
+    OnPointerDown: (toMaybeMessage) => OnPointerDown({ f: toMaybeMessage }),
+    OnPointerUp: (toMaybeMessage) => OnPointerUp({ f: toMaybeMessage }),
+    OnKeyDown: (toMessage) => OnKeyDown({ f: toMessage }),
+    OnKeyDownPreventDefault: (toMaybeMessage) => OnKeyDownPreventDefault({ f: toMaybeMessage }),
     /**
      * Keydown handler that, for a handled key, synchronously focuses the element
      * matching `focusSelector` and dispatches `message`, both inside the
@@ -1165,18 +1235,18 @@ const htmlAttributes = () => ({
      * )
      * ```
      */
-    OnKeyDownFocus: (f) => OnKeyDownFocus({ f }),
-    OnKeyUp: (f) => OnKeyUp({ f }),
-    OnKeyUpPreventDefault: (f) => OnKeyUpPreventDefault({ f }),
-    OnKeyPress: (f) => OnKeyPress({ f }),
+    OnKeyDownFocus: (toMaybeFocusAndMessage) => OnKeyDownFocus({ f: toMaybeFocusAndMessage }),
+    OnKeyUp: (toMessage) => OnKeyUp({ f: toMessage }),
+    OnKeyUpPreventDefault: (toMaybeMessage) => OnKeyUpPreventDefault({ f: toMaybeMessage }),
+    OnKeyPress: (toMessage) => OnKeyPress({ f: toMessage }),
     OnFocus: (message) => OnFocus({ message }),
     OnBlur: (message) => OnBlur({ message }),
-    OnInput: (f) => OnInput({ f }),
-    OnChange: (f) => OnChange({ f }),
-    OnFileChange: (f) => OnFileChange({ f }),
+    OnInput: (toMessage) => OnInput({ f: toMessage }),
+    OnChange: (toMessage) => OnChange({ f: toMessage }),
+    OnFileChange: (toMessage) => OnFileChange({ f: toMessage }),
     OnSubmit: (message) => OnSubmit({ message }),
     OnReset: (message) => OnReset({ message }),
-    OnScroll: (f) => OnScroll({ f }),
+    OnScroll: (toMessage) => OnScroll({ f: toMessage }),
     OnWheel: (message) => OnWheel({ message }),
     OnCopy: (message) => OnCopy({ message }),
     OnCut: (message) => OnCut({ message }),
@@ -1198,7 +1268,7 @@ const htmlAttributes = () => ({
      * h.OnPastePreventDefault(text => Option.some(PastedText({ text })))
      * ```
      */
-    OnPastePreventDefault: (f) => OnPastePreventDefault({ f }),
+    OnPastePreventDefault: (toMaybeMessage) => OnPastePreventDefault({ f: toMaybeMessage }),
     /**
      * Copy handler that synchronously writes `text` to the clipboard as
      * `text/plain` and calls `preventDefault`, replacing the browser's default
@@ -1227,7 +1297,7 @@ const htmlAttributes = () => ({
      */
     OnCutText: (text, message) => OnCutText({ text, message }),
     OnCancel: (message) => OnCancel({ message }),
-    OnToggle: (f) => OnToggle({ f }),
+    OnToggle: (toMessage) => OnToggle({ f: toMessage }),
     OnContextMenu: (message) => OnContextMenu({ message }),
     OnDragStart: (message) => OnDragStart({ message }),
     OnDrag: (message) => OnDrag({ message }),
@@ -1237,7 +1307,7 @@ const htmlAttributes = () => ({
     OnDragOver: (message) => OnDragOver({ message }),
     AllowDrop: () => AllowDrop(),
     OnDrop: (message) => OnDrop({ message }),
-    OnDropFiles: (f) => OnDropFiles({ f }),
+    OnDropFiles: (toMessage) => OnDropFiles({ f: toMessage }),
     OnTouchStart: (message) => OnTouchStart({ message }),
     OnTouchEnd: (message) => OnTouchEnd({ message }),
     OnTouchMove: (message) => OnTouchMove({ message }),