foldkit 0.147.0 → 0.148.0

package/dist/runtime/runtime.js

@@ -1,4 +1,5 @@
 import { Array, Cause, Context, Duration, Effect, Exit, Fiber, Function, Layer, Match, Option, Predicate, PubSub, Record, Ref, Runtime, Scheduler, Schema, Stream, SubscriptionRef, pipe, } from 'effect';
+import { HYDRATION_BUILD_ATTRIBUTE } from '../buildToken.js';
 import { __CurrentRegistry as __CurrentInterruptRegistry, __makeRegistry as __makeInterruptRegistry, } from '../command/interruptible/index.js';
 import { createDevToolsStore, } from '../devTools/store.js';
 import { startWebSocketBridge } from '../devTools/webSocketBridge.js';
@@ -195,8 +196,8 @@ export class Dispatch extends Context.Service()('@foldkit/Dispatch') {
 }
 const hydrationForRoot = (root, isFlagsRequired) => {
     const runtimeId = root.getAttribute(FOLDKIT_APP_ATTRIBUTE) ?? '';
-    const flagsPayloads = pipe(Array.fromIterable(document.querySelectorAll(`script[${FOLDKIT_FLAGS_ATTRIBUTE}]`)), Array.filter(script => script.getAttribute(FOLDKIT_FLAGS_ATTRIBUTE) === runtimeId), Array.map(script => script.textContent ?? ''));
-    return { root, runtimeId, flagsPayloads, isFlagsRequired };
+    const flagsScripts = pipe(Array.fromIterable(document.querySelectorAll(`script[${FOLDKIT_FLAGS_ATTRIBUTE}]`)), Array.filter(script => script.getAttribute(FOLDKIT_FLAGS_ATTRIBUTE) === runtimeId));
+    return { root, runtimeId, flagsScripts, isFlagsRequired };
 };
 // NOTE: hydration is scoped to the app's own stamped root so a server-rendered
 // app never adopts another app's DOM. A container that carries the stamp is that
@@ -212,8 +213,159 @@ const hydrationForRoot = (root, isFlagsRequired) => {
 // root took the placeholder's place and `getElementById` no longer finds it, so
 // the stamp is the only handle; more than one stamped root is then ambiguous and
 // a hard error rather than a silent wrong-DOM adoption.
+// A runtime id names one application for the whole page: it pairs a root with
+// its Flags payload, and it keys the Model and scroll position hot reloading
+// preserves. Two roots sharing one are not two applications but one claimed
+// twice, so whichever boots second would read the other's handoff and restore
+// the other's Model. `injectIntoTemplate` refuses to build such a page; this is
+// the check for a page assembled some other way.
+//
+// Distinct ids do not make two hydrated applications independent, which is not
+// a supported arrangement: each page-owning application rewrites the document's
+// metadata and installs document-wide navigation listeners.
+const assertRuntimeIdsAreUnique = (stampedRoots) => {
+    const seen = new Set();
+    for (const root of stampedRoots) {
+        const runtimeId = root.getAttribute(FOLDKIT_APP_ATTRIBUTE) ?? '';
+        if (seen.has(runtimeId)) {
+            containRefusedPage(root.ownerDocument);
+            throw new Error(`[foldkit] Found more than one server-rendered root stamped ` +
+                `"${runtimeId}". A runtime id names one application for the whole ` +
+                'page: it pairs a root with its Flags payload and keys the Model and ' +
+                'scroll position hot reloading preserves, so two roots sharing one ' +
+                "would take each other's state. Render each application with its " +
+                'own `runtimeId`.');
+        }
+        seen.add(runtimeId);
+    }
+};
+// The reason this page cannot be adopted by this client, or `undefined` when
+// the two name the same deployment.
+//
+// The client's id is required and must be non-empty. An absent one would
+// otherwise equal the absent marker on a page served before build ids existed,
+// which reads a page from an unknown deployment as one of this build's own: the
+// exact case the id exists to refuse.
+const buildSkew = (root, buildId, runtimeId) => {
+    if (buildId === undefined || buildId === '') {
+        return new Error('[foldkit] Runtime.hydrate was given no build id. Hydration compares ' +
+            'the id the server stamped on the root with this client’s own before ' +
+            'it adopts any DOM, and without one a page from any deployment would ' +
+            'be adopted as this one. Pass ' +
+            '`buildId: import.meta.env.FOLDKIT_BUILD_ID`, the same value the ' +
+            'server entry passes to `renderToString`.');
+    }
+    const servedBuild = root.getAttribute(HYDRATION_BUILD_ATTRIBUTE);
+    if (servedBuild === buildId) {
+        return undefined;
+    }
+    return new Error(`[foldkit] Runtime.hydrate found application "${runtimeId}" served by ` +
+        `${servedBuild === null ? 'no known deployment' : `deployment "${servedBuild}"`}` +
+        `, but this client belongs to deployment "${buildId}". Startup stops ` +
+        'here rather than reading a handoff written by other code: the Flags in ' +
+        'the page are that deployment’s, and this build could accept them while ' +
+        'every value in them means something else. Serve the page from the ' +
+        'running deployment, and keep stale HTML out of shared caches.');
+};
+const REFUSED_ATTRIBUTE = 'data-foldkit-refused';
+const REFUSAL_SHIELD_ATTRIBUTE = 'data-foldkit-refusal-shield';
+const refusalShields = new WeakMap();
+const REFUSAL_SHIELD_INPUT_EVENTS = [
+    'auxclick',
+    'click',
+    'contextmenu',
+    'dblclick',
+    'keydown',
+    'keypress',
+    'keyup',
+    'mousedown',
+    'mouseup',
+    'pointerdown',
+    'pointerup',
+    'touchend',
+    'touchstart',
+];
+const preventRefusalShieldInteraction = (event) => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+};
+const openRefusalShield = (shield) => {
+    shield.inert = true;
+    shield.setAttribute('inert', '');
+    if (shield.open && typeof shield.close === 'function') {
+        shield.close();
+    }
+    if (typeof shield.showModal === 'function') {
+        shield.showModal();
+    }
+    else {
+        shield.setAttribute('open', '');
+    }
+    shield.inert = false;
+    shield.removeAttribute('inert');
+    shield.focus({ preventScroll: true });
+};
+const installRefusalShield = (ownerDocument) => {
+    const existing = refusalShields.get(ownerDocument);
+    if (existing !== undefined && existing.isConnected) {
+        openRefusalShield(existing);
+        return;
+    }
+    const shield = ownerDocument.createElement('dialog');
+    shield.setAttribute(REFUSAL_SHIELD_ATTRIBUTE, '');
+    shield.setAttribute('aria-label', 'Page unavailable');
+    shield.setAttribute('aria-modal', 'true');
+    shield.setAttribute('closedby', 'none');
+    shield.tabIndex = -1;
+    shield.textContent =
+        'This page could not start safely. Reload to get the current version.';
+    shield.style.alignItems = 'center';
+    shield.style.background = 'rgba(15, 23, 42, 0.96)';
+    shield.style.border = '0';
+    shield.style.boxSizing = 'border-box';
+    shield.style.color = 'white';
+    shield.style.font = '600 1rem/1.5 system-ui, sans-serif';
+    shield.style.display = 'grid';
+    shield.style.height = '100vh';
+    shield.style.inset = '0';
+    shield.style.margin = '0';
+    shield.style.maxHeight = 'none';
+    shield.style.maxWidth = 'none';
+    shield.style.overflow = 'hidden';
+    shield.style.padding = '2rem';
+    shield.style.position = 'fixed';
+    shield.style.touchAction = 'none';
+    shield.style.userSelect = 'none';
+    shield.style.width = '100vw';
+    shield.addEventListener('cancel', preventRefusalShieldInteraction);
+    for (const eventName of REFUSAL_SHIELD_INPUT_EVENTS) {
+        shield.addEventListener(eventName, preventRefusalShieldInteraction, {
+            capture: true,
+            passive: false,
+        });
+    }
+    ownerDocument.documentElement.appendChild(shield);
+    refusalShields.set(ownerDocument, shield);
+    openRefusalShield(shield);
+};
+const containRefusedPage = (ownerDocument) => {
+    const boundary = ownerDocument.body ?? ownerDocument.documentElement;
+    boundary.inert = true;
+    boundary.setAttribute('inert', '');
+    boundary.setAttribute('aria-hidden', 'true');
+    boundary.setAttribute(REFUSED_ATTRIBUTE, '');
+    installRefusalShield(ownerDocument);
+};
+// Whether this page carries anything a Foldkit server render leaves behind. A
+// resolution failure on such a page is a refused handoff, and the markup is
+// contained; the same failure on a page with none of these markers is a client
+// application whose container never existed, where there is no server render to
+// refuse and nothing to take out of reach.
+const hasServerRenderedMarkup = (ownerDocument) => ownerDocument.querySelector(`[${FOLDKIT_APP_ATTRIBUTE}], [${HYDRATION_BUILD_ATTRIBUTE}], ` +
+    `[${FOLDKIT_FLAGS_ATTRIBUTE}]`) !== null;
 const findDocumentHydration = (container, isFlagsRequired) => {
     const stampedRoots = Array.fromIterable(document.querySelectorAll(`[${FOLDKIT_APP_ATTRIBUTE}]`));
+    assertRuntimeIdsAreUnique(stampedRoots);
     if (container !== null) {
         if (container.hasAttribute(FOLDKIT_APP_ATTRIBUTE)) {
             return hydrationForRoot(container, isFlagsRequired);
@@ -230,6 +382,7 @@ const findDocumentHydration = (container, isFlagsRequired) => {
         });
     }
     if (stampedRoots.length > 1) {
+        containRefusedPage(document);
         throw new Error('[foldkit] Found multiple server-rendered roots stamped with ' +
             `\`${FOLDKIT_APP_ATTRIBUTE}\` but no container to disambiguate them. ` +
             'Give each app its own container element so the runtime can tell ' +
@@ -404,7 +557,7 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
     const runtimeId = hydration !== undefined && hydration.runtimeId !== ''
         ? hydration.runtimeId
         : (container?.id ?? '');
-    const startWith = (maybeConnector, hmrModel, bootMode = 'Fresh', bootFlags) => {
+    const startWith = (maybeConnector, hmrModel, bootMode = 'Fresh', bootFlags, buildId) => {
         // NOTE: one notifier per runtime, provided across the whole runtime
         // Effect so Commands, Subscriptions, and Mount-forked Effects all resolve
         // the same signal. A commit in one embedded application must never wake a
@@ -532,25 +685,54 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
                         Effect.succeed(undefined),
                 onSome: provideResources,
             });
-            const decodeFlagsPayload = (payload, runtimeId) => Effect.try({
+            // Every hydration refusal that knows which root it was going to adopt
+            // contains that root first. The build id is one reason to refuse; a
+            // missing, duplicated, malformed, or Schema-incompatible Flags payload
+            // is another, and the page left behind is just as live in each case.
+            const refuseHydration = (root, message, cause) => {
+                containRefusedPage(root.ownerDocument);
+                return Effect.die(cause === undefined
+                    ? new Error(message)
+                    : new Error(message, { cause }));
+            };
+            const decodeFlagsPayload = (payload, runtimeId, root) => Effect.try({
                 try: () => {
                     const parsedPayload = JSON.parse(payload);
                     return pipe(
                     /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
                     Schema.toCodecJson(FlagsCodec), Schema.decodeUnknownSync, decode => decode(parsedPayload));
                 },
-                catch: cause => new Error('[foldkit] Runtime.hydrate could not decode the server ' +
-                    `Flags payload for application "${runtimeId}". The HTML ` +
-                    'and client bundle must use the same Flags Schema.', { cause }),
-            }).pipe(Effect.orDie);
+                catch: cause => cause,
+            }).pipe(Effect.catch(cause => refuseHydration(root, '[foldkit] Runtime.hydrate could not decode the server ' +
+                `Flags payload for application "${runtimeId}". The HTML ` +
+                'and client bundle must use the same Flags Schema.', cause)));
             const maybeRequestedHydration = bootMode === 'Hydrate'
                 ? Option.fromNullishOr(hydration)
                 : Option.none();
             if (bootMode === 'Hydrate' && Option.isNone(maybeRequestedHydration)) {
+                // A hydrating client that finds no stamped root will not adopt
+                // whatever the page holds, so the page is contained whether or not the
+                // caller named a container.
+                containRefusedPage(container === null ? document : container.ownerDocument);
                 return yield* Effect.die(new Error('[foldkit] Runtime.hydrate could not find a server-rendered ' +
                     `root stamped with \`${FOLDKIT_APP_ATTRIBUTE}\`. Use ` +
                     'Runtime.run for a fresh client boot.'));
             }
+            // The build the served page came from is settled here, before the Flags
+            // payload text is accessed, parsed, or decoded, before `init` runs, and
+            // therefore before any Command, Subscription, ManagedResource, or port
+            // this boot would start. A page from another deployment carries that
+            // deployment's Flags, which the current Schema may well accept while
+            // every value in them means something else, so deferring the comparison
+            // to the DOM patch lets stale data reach new code that already acted on
+            // it.
+            if (Option.isSome(maybeRequestedHydration)) {
+                const skew = buildSkew(maybeRequestedHydration.value.root, buildId, maybeRequestedHydration.value.runtimeId);
+                if (skew !== undefined) {
+                    containRefusedPage(maybeRequestedHydration.value.root.ownerDocument);
+                    return yield* Effect.die(skew);
+                }
+            }
             // NOTE: an HMR-restored Model wins over DOM adoption because the
             // server DOM reflects older code. The hydration handoff is still
             // required, but the restored Model gets a fresh patch against its
@@ -561,15 +743,15 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
             const maybeHydrationFlags = yield* Option.match(maybeRequestedHydration, {
                 onNone: () => Effect.succeed(Option.none()),
                 onSome: requestedHydration => Effect.map(requestedHydration.isFlagsRequired
-                    ? Array.match(requestedHydration.flagsPayloads, {
-                        onEmpty: () => Effect.die(new Error('[foldkit] Runtime.hydrate found application ' +
+                    ? Array.match(requestedHydration.flagsScripts, {
+                        onEmpty: () => refuseHydration(requestedHydration.root, '[foldkit] Runtime.hydrate found application ' +
                             `"${requestedHydration.runtimeId}" but its ` +
-                            'server Flags payload is missing.')),
-                        onNonEmpty: ([payload, ...remainingPayloads]) => Array.isArrayNonEmpty(remainingPayloads)
-                            ? Effect.die(new Error('[foldkit] Runtime.hydrate found multiple ' +
+                            'server Flags payload is missing.'),
+                        onNonEmpty: ([payloadScript, ...remainingScripts]) => Array.isArrayNonEmpty(remainingScripts)
+                            ? refuseHydration(requestedHydration.root, '[foldkit] Runtime.hydrate found multiple ' +
                                 'server Flags payloads for application ' +
-                                `"${requestedHydration.runtimeId}".`))
-                            : decodeFlagsPayload(payload, requestedHydration.runtimeId),
+                                `"${requestedHydration.runtimeId}".`)
+                            : decodeFlagsPayload(payloadScript.textContent ?? '', requestedHydration.runtimeId, requestedHydration.root),
                     })
                     : /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
                         Effect.succeed(undefined), Option.some),
@@ -1061,7 +1243,11 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
                         // container (a dispose-then-embed remount) from re-detecting
                         // this now-consumed root as hydratable.
                         hydrationRoot.removeAttribute(FOLDKIT_APP_ATTRIBUTE);
-                        return __hydrateVNode(hydrationRoot, nextVNode, boundaryRegistry.dedupeSeen);
+                        // An empty id reaches the adoption step's own check as a
+                        // value that matches nothing. Boot already refused a
+                        // hydration without an id, so this stands in only for a
+                        // caller that reached here another way.
+                        return __hydrateVNode(hydrationRoot, nextVNode, boundaryRegistry.dedupeSeen, buildId ?? '');
                     }
                     return __patchVNode(maybeCurrentVNode, nextVNode, container, boundaryRegistry.dedupeSeen);
                 }));
@@ -1502,7 +1688,7 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
         ports,
     };
     runtimeInternals.set(program, {
-        startWith: (maybeConnector, hmrModel, bootMode, flags) => startWith(maybeConnector, hmrModel, bootMode, flags),
+        startWith: (maybeConnector, hmrModel, bootMode, flags, buildId) => startWith(maybeConnector, hmrModel, bootMode, flags, buildId),
         kind,
         isEmbedActive: false,
         maybeActiveFiber: Option.none(),
@@ -1631,6 +1817,14 @@ export function makeApplication(config) {
     const hydration = findDocumentHydration(container, hasFlags);
     const resolvedContainer = hydration?.root ?? container;
     if (resolvedContainer === null) {
+        // A server-rendered page whose root lost its stamp reaches exactly here:
+        // template injection put the render where the placeholder was, so
+        // `getElementById` finds nothing and the stamp that would have named the
+        // root is gone. There is no handoff to refuse further along, and the markup
+        // is as live as any other refused page, so it is contained here.
+        if (hasServerRenderedMarkup(document)) {
+            containRefusedPage(document);
+        }
         throw new Error('[foldkit] Container is null. Make sure the element exists in the DOM ' +
             'before calling makeApplication (e.g. that your <div id="root"></div> has ' +
             'rendered, and your script runs after it). On a server-rendered page ' +
@@ -1853,7 +2047,7 @@ const resolveHmrModel = (runtimeId) => {
 };
 /** Starts a program Effect with explicit boot inputs for runtime tests.
  * @internal */
-export const __startProgram = (program, hmrModel, bootMode, flags) => {
+export const __startProgram = (program, hmrModel, bootMode, flags, buildId) => {
     const internals = runtimeInternals.get(program);
     if (Predicate.isUndefined(internals)) {
         return Effect.die(new Error('[foldkit] Runtime boot expects a program created by ' +
@@ -1863,7 +2057,7 @@ export const __startProgram = (program, hmrModel, bootMode, flags) => {
         return Effect.die(new Error('[foldkit] Runtime.hydrate expects a program created by ' +
             'makeApplication.'));
     }
-    return internals.startWith(Option.none(), hmrModel, bootMode, flags);
+    return internals.startWith(Option.none(), hmrModel, bootMode, flags, buildId);
 };
 // NOTE: deliberately not `BrowserRuntime.runMain`, which interrupts the
 // runtime on `beforeunload`. `beforeunload` is a question, not a commitment:
@@ -1876,8 +2070,8 @@ export const __startProgram = (program, hmrModel, bootMode, flags) => {
 // interrupt at all and lets the document take the runtime with it. Error
 // reporting and the keep-alive interval come from `makeRunMain` either way.
 const runMainWithoutUnloadInterrupt = Runtime.makeRunMain(Function.constVoid);
-const startProgram = (program, bootMode, flags) => {
-    runMainWithoutUnloadInterrupt(provideBrowserScheduler(Effect.flatMap(resolveHmrModel(program.runtimeId), hmrModel => __startProgram(program, hmrModel, bootMode, flags))));
+const startProgram = (program, bootMode, flags, buildId) => {
+    runMainWithoutUnloadInterrupt(provideBrowserScheduler(Effect.flatMap(resolveHmrModel(program.runtimeId), hmrModel => __startProgram(program, hmrModel, bootMode, flags, buildId))));
 };
 export function run(program, options) {
     startProgram(program, 'Fresh', options?.flags);
@@ -1886,15 +2080,24 @@ export function run(program, options) {
  *  of building it fresh. Use this as the client entry for a page served by
  *  `renderToString`: the first render attaches to the stamped root, keeps the
  *  existing nodes, and reconstructs the Model from the Flags the server
- *  embedded. The handoff is strict: a missing server root, missing Flags
- *  payload, or undecodable payload terminates startup and leaves the server
- *  HTML visible but inert. Use `run` in a separate client-only entry when the
- *  page should boot without server output.
+ *  embedded. The handoff is strict: a missing server root, a root stamped more
+ *  than once, more than one root with no container to choose between them, a
+ *  missing Flags payload, an undecodable payload, or a page from another
+ *  deployment terminates startup. Every one of those contains the page first:
+ *  the document's body is marked `inert` and a nondismissable modal shield is
+ *  opened above existing top-layer content, so native links, forms, controls,
+ *  and focus targets stop responding. Containment leaves author-owned dialogs
+ *  open without calling `close` or dispatching `cancel`. Nothing is moved, so
+ *  no custom element reconnects and no frame reloads. This is not a script or
+ *  event sandbox: existing capture-phase handlers, browser-generated top-layer
+ *  events, timers, and other stale scripts can still run and can open newer
+ *  top-layer UI. Use `run` in a separate client-only entry when the page should
+ *  boot without server output.
  *
  * @experimental Server rendering and hydration are experimental while their
  * contracts settle. */
-export const hydrate = (program) => {
-    startProgram(program, 'Hydrate');
+export const hydrate = (program, options) => {
+    startProgram(program, 'Hydrate', undefined, options.buildId);
 };
 const buildPortHandles = (ports, connector) => {
     const handles = {};

package/dist/snabbdom/attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../src/snabbdom/attributes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;AAwD7D,eAAO,MAAM,gBAAgB,EAAE,MAI9B,CAAA"}
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../src/snabbdom/attributes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;AAkG7D,eAAO,MAAM,gBAAgB,EAAE,MAI9B,CAAA"}

package/dist/snabbdom/attributes.js

@@ -1,12 +1,65 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+import { parsedAttributeName } from '../domReflection.js';
 import { VNodeDataMask } from './vnode.js';
 const xlinkNS = 'http://www.w3.org/1999/xlink';
 const xmlnsNS = 'http://www.w3.org/2000/xmlns/';
 const xmlNS = 'http://www.w3.org/XML/1998/namespace';
-const colonChar = 58;
-const xChar = 120;
-const mChar = 109;
+const htmlNS = 'http://www.w3.org/1999/xhtml';
+const FOREIGN_ATTRIBUTE_NAMESPACES = {
+    'xlink:actuate': xlinkNS,
+    'xlink:arcrole': xlinkNS,
+    'xlink:href': xlinkNS,
+    'xlink:role': xlinkNS,
+    'xlink:show': xlinkNS,
+    'xlink:title': xlinkNS,
+    'xlink:type': xlinkNS,
+    'xml:base': xmlNS,
+    'xml:lang': xmlNS,
+    'xml:space': xmlNS,
+    xmlns: xmlnsNS,
+    'xmlns:xlink': xmlnsNS,
+};
+const namespaceFor = (elementNamespace, name) => {
+    if (elementNamespace === null || elementNamespace === htmlNS) {
+        return undefined;
+    }
+    return FOREIGN_ATTRIBUTE_NAMESPACES[name];
+};
+const normalizedAttributes = (attrs, namespace) => {
+    const normalized = new Map();
+    for (const name of Object.keys(attrs)) {
+        normalized.set(parsedAttributeName(namespace, name), attrs[name]);
+    }
+    return normalized;
+};
+const setAttribute = (element, name, value) => {
+    const namespace = namespaceFor(element.namespaceURI, name);
+    if (value === true) {
+        if (namespace === undefined) {
+            element.setAttribute(name, '');
+        }
+        else {
+            element.setAttributeNS(namespace, name, '');
+        }
+    }
+    else if (value === false) {
+        if (namespace === undefined) {
+            element.removeAttribute(name);
+        }
+        else {
+            const separator = name.indexOf(':');
+            const localName = separator === -1 ? name : name.slice(separator + 1);
+            element.removeAttributeNS(namespace, localName);
+        }
+    }
+    else if (namespace === undefined) {
+        element.setAttribute(name, value);
+    }
+    else {
+        element.setAttributeNS(namespace, name, value);
+    }
+};
 function updateAttrs(oldVnode, vnode) {
-    let key;
     const elm = vnode.elm;
     let oldAttrs = oldVnode.data.attrs;
     let attrs = vnode.data.attrs;
@@ -16,43 +69,18 @@ function updateAttrs(oldVnode, vnode) {
         return;
     oldAttrs = oldAttrs || {};
     attrs = attrs || {};
+    const normalizedOld = normalizedAttributes(oldAttrs, elm.namespaceURI);
+    const normalizedNext = normalizedAttributes(attrs, elm.namespaceURI);
     // update modified attributes, add new attributes
-    for (key in attrs) {
-        const cur = attrs[key];
-        const old = oldAttrs[key];
+    for (const [name, cur] of normalizedNext) {
+        const old = normalizedOld.get(name);
         if (old !== cur) {
-            if (cur === true) {
-                elm.setAttribute(key, '');
-            }
-            else if (cur === false) {
-                elm.removeAttribute(key);
-            }
-            else {
-                if (key.charCodeAt(0) !== xChar) {
-                    elm.setAttribute(key, cur);
-                }
-                else if (key.charCodeAt(3) === colonChar) {
-                    // Assume xml namespace
-                    elm.setAttributeNS(xmlNS, key, cur);
-                }
-                else if (key.charCodeAt(5) === colonChar) {
-                    // Assume 'xmlns' or 'xlink' namespace
-                    key.charCodeAt(1) === mChar
-                        ? elm.setAttributeNS(xmlnsNS, key, cur)
-                        : elm.setAttributeNS(xlinkNS, key, cur);
-                }
-                else {
-                    elm.setAttribute(key, cur);
-                }
-            }
+            setAttribute(elm, name, cur);
         }
     }
-    // remove removed attributes
-    // use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value)
-    // the other option is to remove all attributes with value == undefined
-    for (key in oldAttrs) {
-        if (!(key in attrs)) {
-            elm.removeAttribute(key);
+    for (const name of normalizedOld.keys()) {
+        if (!normalizedNext.has(name)) {
+            setAttribute(elm, name, false);
         }
     }
 }

package/dist/snabbdom/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/snabbdom/style.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAA;AAEvD,MAAM,MAAM,UAAU,GAAG,YAAY,GACnC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG;IACvB,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/C,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9C,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChD,CAAA;AAgHH,eAAO,MAAM,WAAW,EAAE,MAOzB,CAAA"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/snabbdom/style.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAA;AAEvD,MAAM,MAAM,UAAU,GAAG,YAAY,GACnC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG;IACvB,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/C,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9C,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChD,CAAA;AAyJH,eAAO,MAAM,WAAW,EAAE,MAOzB,CAAA"}

package/dist/snabbdom/style.js

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+import { serializedStylePropertyName } from '../domReflection.js';
 import { VNodeDataMask } from './vnode.js';
 // Binding `requestAnimationFrame` like this fixes a bug in IE/Edge. See #360 and #409.
 const raf = typeof window !== 'undefined' &&
@@ -10,11 +12,35 @@ const nextFrame = function (fn) {
     });
 };
 let reflowForced = false;
-function setNextFrame(obj, prop, val) {
+function setStyle(style, propertyName, value) {
+    style.setProperty(serializedStylePropertyName(propertyName), String(value));
+}
+function removeStyle(style, propertyName) {
+    style.removeProperty(serializedStylePropertyName(propertyName));
+}
+function setNextFrame(style, propertyName, value) {
     nextFrame(function () {
-        obj[prop] = val;
+        setStyle(style, propertyName, value);
     });
 }
+function createStyle(_oldVnode, vnode) {
+    const element = vnode.elm;
+    const style = vnode.data.style;
+    if (!style) {
+        return;
+    }
+    for (const name of Object.keys(style)) {
+        if (name !== 'delayed' && name !== 'destroy' && name !== 'remove') {
+            setStyle(element.style, name, style[name]);
+        }
+    }
+    const delayed = Object.hasOwn(style, 'delayed') ? style.delayed : undefined;
+    if (typeof delayed === 'object' && delayed !== null) {
+        for (const name of Object.keys(delayed)) {
+            setNextFrame(element.style, name, delayed[name]);
+        }
+    }
+}
 function updateStyle(oldVnode, vnode) {
     let cur;
     let name;
@@ -27,38 +53,31 @@ function updateStyle(oldVnode, vnode) {
         return;
     oldStyle = oldStyle || {};
     style = style || {};
-    const oldHasDel = 'delayed' in oldStyle;
-    for (name in oldStyle) {
-        if (!(name in style)) {
-            if (name[0] === '-' && name[1] === '-') {
-                ;
-                elm.style.removeProperty(name);
-            }
-            else {
-                ;
-                elm.style[name] = '';
-            }
+    const oldHasDel = Object.hasOwn(oldStyle, 'delayed');
+    for (name of Object.keys(oldStyle)) {
+        if (name !== 'delayed' &&
+            name !== 'destroy' &&
+            name !== 'remove' &&
+            !Object.hasOwn(style, name)) {
+            removeStyle(elm.style, name);
         }
     }
-    for (name in style) {
+    for (name of Object.keys(style)) {
         cur = style[name];
-        if (name === 'delayed' && style.delayed) {
-            for (const name2 in style.delayed) {
+        if (name === 'delayed' &&
+            typeof style.delayed === 'object' &&
+            style.delayed !== null) {
+            for (const name2 of Object.keys(style.delayed)) {
                 cur = style.delayed[name2];
                 if (!oldHasDel || cur !== oldStyle.delayed[name2]) {
                     setNextFrame(elm.style, name2, cur);
                 }
             }
         }
-        else if (name !== 'remove' && cur !== oldStyle[name]) {
-            if (name[0] === '-' && name[1] === '-') {
-                ;
-                elm.style.setProperty(name, cur);
-            }
-            else {
-                ;
-                elm.style[name] = cur;
-            }
+        else if (name !== 'destroy' &&
+            name !== 'remove' &&
+            cur !== oldStyle[name]) {
+            setStyle(elm.style, name, cur);
         }
     }
 }
@@ -67,16 +86,15 @@ function applyDestroyStyle(vnode) {
     let name;
     const elm = vnode.elm;
     const s = vnode.data.style;
-    if (!s || !(style = s['destroy']))
+    if (!s || !Object.hasOwn(s, 'destroy') || !(style = s['destroy']))
         return;
-    for (name in style) {
-        ;
-        elm.style[name] = style[name];
+    for (name of Object.keys(style)) {
+        setStyle(elm.style, name, style[name]);
     }
 }
 function applyRemoveStyle(vnode, rm) {
     const s = vnode.data.style;
-    if (!s || !s.remove) {
+    if (!s || !Object.hasOwn(s, 'remove') || !s.remove) {
         rm();
         return;
     }
@@ -92,9 +110,10 @@ function applyRemoveStyle(vnode, rm) {
     const style = s.remove;
     let amount = 0;
     const applied = [];
-    for (name in style) {
-        applied.push(name);
-        elm.style[name] = style[name];
+    for (name of Object.keys(style)) {
+        const propertyName = serializedStylePropertyName(name);
+        applied.push(propertyName);
+        setStyle(elm.style, name, style[name]);
     }
     const compStyle = getComputedStyle(elm);
     const props = compStyle['transition-property'].split(', ');
@@ -116,7 +135,7 @@ function forceReflow() {
 export const styleModule = {
     dataMask: VNodeDataMask.Style,
     pre: forceReflow,
-    create: updateStyle,
+    create: createStyle,
     update: updateStyle,
     destroy: applyDestroyStyle,
     remove: applyRemoveStyle,

package/dist/test/apps/attributes.d.ts

@@ -5,6 +5,7 @@ export declare const Message: S.Union<readonly [import("../../schema/index.js").
 export type Message = typeof Message.Type;
 export type Model = Readonly<{
     attribute: Attribute<Message>;
+    tagName?: string;
 }>;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
 export declare const testId = "attribute-host";