@rasamjs/core 0.2.0 → 0.3.0

package/src/interchange/references.ts

@@ -1,5 +1,5 @@
 import type { AnyNode } from '../core/types.js';
-import { classifyReference, resolveReference } from '../resources/references.js';
+import { classifyReference, isLink, resolveReference } from '../resources/references.js';
 import { referenceValue } from '../services/reference-value.js';
 import { InterchangeDom } from './dom.js';
 import { XLINK_NAMESPACE } from '../catalog/namespaces.js';
@@ -10,10 +10,13 @@ export function dependencyRoots(source: AnyNode, references: 'typed' | 'local'):
   const pending = [...included];
   for (let index = 0; index < pending.length; index++) {
     const node = pending[index];
-    const targets = new Set(node.references.values());
+    // Links are not dependencies: copying a connector never copies the shapes it joins.
+    const targets = new Set(
+      [...node.references].filter(([name]) => !isLink(name)).map(([, target]) => target),
+    );
     if (references === 'local')
       for (const [name, value] of node.attributes.entries()) {
-        if (!classifyReference(name, value)) continue;
+        if (!classifyReference(name, value) || isLink(name)) continue;
         // Hyperlinks navigate; they are not rendering dependencies.
         if (name === 'href' && ['a', 'image'].includes(node.el.localName)) continue;
         const target = resolveReference(node, name);
@@ -87,10 +90,15 @@ export function restoreLocalReferences(nodes: readonly AnyNode[]): void {
       .map((node) => [String(node.getAttributeValue('id')), node]),
   );
   for (const node of all)
-    for (const [name, value] of node.attributes.entries()) {
+    for (const [name, value] of [...node.attributes.entries()]) {
       const reference = classifyReference(name, value);
       if (!reference) continue;
       const target = ids.get(reference.id);
+      // A connector pasted without its target keeps that end loose.
+      if (!target && isLink(name)) {
+        node.setAttributeValue(name, undefined);
+        continue;
+      }
       if (!target)
         throw new TypeError(`Local reference is outside the imported forest: ${reference.id}`);
       if (name === 'href' && ['a', 'image'].includes(node.el.localName)) continue;

package/src/mixins/parent-internals.ts

@@ -4,11 +4,48 @@ import { assertNotDestroying, pendingDestruction } from '../core/destruction.js'
 /** Structural preflight shared by Parent and the opt-in tree operations. */
 export const validateChild = Symbol('validateChild');
 
+let internalStructure = 0;
+const unlocked = new Set<AnyNode>();
+
+/** @internal Core's own exact-tree paths (adoption, replay, rollback) bypass child ownership. */
+export function withInternalStructure<Result>(callback: () => Result): Result {
+  internalStructure++;
+  try {
+    return callback();
+  } finally {
+    internalStructure--;
+  }
+}
+
+/** @internal Lets a node whose class owns its children change them inside the callback. */
+export function withOwnedChildren<Result>(parent: AnyNode, callback: () => Result): Result {
+  if (unlocked.has(parent)) return callback();
+  unlocked.add(parent);
+  try {
+    return callback();
+  } finally {
+    unlocked.delete(parent);
+  }
+}
+
+/** Throws for outside structural edits of a node whose class owns its children. */
+export function assertChildrenEditable(parent: AnyNode | null | undefined): void {
+  if (
+    parent &&
+    (parent.constructor as { readonly ownsChildren?: boolean }).ownsChildren &&
+    !internalStructure &&
+    !unlocked.has(parent) &&
+    !pendingDestruction.has(parent)
+  )
+    throw new Error('This node owns its children');
+}
+
 export function assertCanAddChildren(parent: AnyNode): void {
   parent.assertLive();
   // Whole-drawing teardown already cleans late subscriptions and registrations.
   const drawingCloses = parent.context.root && pendingDestruction.has(parent.context.root);
   if (!drawingCloses) assertNotDestroying(parent);
+  assertChildrenEditable(parent);
 }
 
 export function validateIndex(index: number, length: number): void {

package/src/mixins/parent.ts

@@ -1,11 +1,16 @@
 import { mutation } from '../changes/mutation.js';
 import type { Node } from '../core/node.js';
 import type { AnyNode } from '../core/types.js';
-import type { ElementClass } from '../services/types.js';
+import type { ElementClass, CreationOptions } from '../services/types.js';
 import { BBox } from '../math/bbox.js';
 import type { Bounds } from '../types/common.js';
 import type { MixinParent, NodeSelector } from './types.js';
-import { assertCanAddChildren, validateChild, validateIndex } from './parent-internals.js';
+import {
+  assertCanAddChildren,
+  assertChildrenEditable,
+  validateChild,
+  validateIndex,
+} from './parent-internals.js';
 import { assertNotDestroying } from '../core/destruction.js';
 
 export const Parent: MixinParent = (BaseClass) => {
@@ -50,6 +55,7 @@ export const Parent: MixinParent = (BaseClass) => {
     adopt(element: SVGElement): AnyNode {
       return mutation(this, () => {
         this.assertLive();
+        assertChildrenEditable(this);
         const siblings = this.context.dom.children(this.el);
         if (!siblings.includes(element))
           throw new Error('Element is not a native child of this parent');
@@ -93,6 +99,7 @@ export const Parent: MixinParent = (BaseClass) => {
     [validateChild](child: AnyNode): void {
       assertCanAddChildren(this);
       child.assertLive();
+      if (child.parent !== this) assertChildrenEditable(child.parent);
       assertNotDestroying(child);
       this.validateChildTag(this.context.dom.tag(child.el));
       if (child.context !== this.context) throw new Error('Cross-root moves are unsupported');
@@ -110,13 +117,13 @@ export const Parent: MixinParent = (BaseClass) => {
 
     create<Options, Child extends AnyNode>(
       Constructor: ElementClass<Options, Child>,
-      options: Options,
+      options: NoInfer<CreationOptions<Options, Child>>,
     ): Child {
       return mutation(this, () => {
         assertCanAddChildren(this);
         this.validateChildTag(Constructor.tag);
         this.context.registry.register(Constructor);
-        return this.add(new Constructor(this.context, options));
+        return this.add(new Constructor(this.context, options as Options));
       });
     }
 
@@ -128,6 +135,7 @@ export const Parent: MixinParent = (BaseClass) => {
 
     detachChild(child: AnyNode): void {
       return mutation(this, () => {
+        assertChildrenEditable(this);
         const index = this.#children.indexOf(child);
         if (index >= 0) {
           this.context.changes.touch(child);
@@ -139,6 +147,7 @@ export const Parent: MixinParent = (BaseClass) => {
     }
 
     private childrenChanged(): void {
+      this.context.changes.invalidateOrder(this);
       this.context.bounds.invalidate();
       this.context.defs.invalidateHost(this);
     }

package/src/mixins/types.ts

@@ -16,7 +16,7 @@ import type { Text } from '../elements/text.js';
 import type { Use } from '../elements/use.js';
 import type { Matrix } from '../math/matrix.js';
 import type { Vec2 } from '../math/vec2.js';
-import type { ElementClass } from '../services/types.js';
+import type { ElementClass, CreationOptions } from '../services/types.js';
 import type {
   CommonAttributes,
   Bounds,
@@ -62,7 +62,7 @@ export interface ParentFeature {
   detachChild(child: AnyNode): void;
   create<Options, Child extends AnyNode>(
     Constructor: ElementClass<Options, Child>,
-    options: Options,
+    options: NoInfer<CreationOptions<Options, Child>>,
   ): Child;
   remove(): this;
   remove(child: AnyNode): this;

package/src/resources/references.ts

@@ -30,16 +30,16 @@ function localReference(
   }
 }
 
+/** Connector ends link to their targets; the targets are not rendering resources. */
+export const isLink = (attribute: string): boolean =>
+  attribute === 'data-rasam-connector-start' || attribute === 'data-rasam-connector-end';
+
 /** Classifies local fragments for lookup/remapping; it never acquires a typed binding. */
 export function classifyReference(attribute: string, value: unknown): LocalReference | null {
   attribute = Attributes.normalizeName(attribute);
   if (typeof value !== 'string') return null;
   const source = value.replace(/^[ \t\r\n\f]+|[ \t\r\n\f]+$/g, '');
-  if (
-    attribute === 'href' ||
-    attribute === 'data-rasam-connector-start' ||
-    attribute === 'data-rasam-connector-end'
-  ) {
+  if (attribute === 'href' || isLink(attribute)) {
     const match = /^#([^\s#<>"'()\\\u0000-\u001f\u007f]+)$/.exec(source);
     return localReference('href', match?.[1]);
   }

package/src/services/catalog.ts

@@ -1,14 +1,16 @@
 import type { Registry } from './registry.js';
+import { elementKey } from './element-key.js';
 import type { ElementClass } from './types.js';
 
 /** Preflight a per-drawing catalog before changing the registry. */
 export function registerElements(registry: Registry, elements: readonly ElementClass[]): void {
   const pending = new Map<string, ElementClass>();
   for (const Constructor of elements) {
-    const previous = pending.get(Constructor.tag) ?? registry.get(Constructor.tag);
+    const key = elementKey(Constructor);
+    const previous = pending.get(key) ?? registry.registered(Constructor);
     if (previous && previous !== Constructor)
-      throw new Error(`Tag already registered: ${Constructor.tag}`);
-    pending.set(Constructor.tag, Constructor);
+      throw new Error(`${Constructor.variant ? 'Variant' : 'Tag'} already registered: ${key}`);
+    pending.set(key, Constructor);
   }
   for (const Constructor of pending.values()) registry.register(Constructor);
 }

package/src/services/defs-manager.ts

@@ -56,6 +56,11 @@ export class DefsManager {
     return count;
   }
 
+  /** Nodes holding a typed reference to `target`, detached ones included, from the index. */
+  consumersOf(target: AnyNode): AnyNode[] {
+    return [...(this.consumersByTarget.get(target)?.keys() ?? [])];
+  }
+
   *geometryConsumers(target: AnyNode): IterableIterator<AnyNode> {
     for (const [consumer, attributes] of this.consumersByTarget.get(target) ?? [])
       if (attributes.has('href')) yield consumer;

package/src/services/element-key.ts

@@ -0,0 +1,14 @@
+import type { ElementClass } from './types.js';
+
+/** A tag, or `tag[attribute="value"]` for a variant. Variants share the constructor map. */
+export function elementKey(Constructor: ElementClass): string {
+  const variant = Constructor.variant;
+  if (!variant) return Constructor.tag;
+  if (
+    !/^data-[a-z0-9_.-]+$/.test(variant.attribute) ||
+    typeof variant.value != 'string' ||
+    !variant.value
+  )
+    throw new TypeError('Variants need a lowercase data-* attribute and a value');
+  return `${Constructor.tag}[${variant.attribute}="${variant.value}"]`;
+}

package/src/services/initialization.ts

@@ -0,0 +1,25 @@
+import type { AnyNode } from '../core/types.js';
+
+/** Internal extension hook, after the entire native/reconstructed tree is available. */
+export const initializeElement = Symbol('init');
+type Initializable = AnyNode & { [initializeElement]?: () => void };
+let pending: Initializable[] | undefined;
+
+export function initializeNode(node: AnyNode): void {
+  if (pending) pending.push(node);
+  else (node as Initializable)[initializeElement]?.();
+}
+
+/** Delay hooks until clone/import has restored references and copied model features. */
+export function withInitialization<Result>(callback: () => Result): Result {
+  if (pending) return callback();
+  pending = [];
+  try {
+    const result = callback();
+    // Initializers are idempotent; nested adoptions can append work while hooks run.
+    for (const node of pending) if (!node.isDestroyed) node[initializeElement]?.();
+    return result;
+  } finally {
+    pending = undefined;
+  }
+}

package/src/services/registry.ts

@@ -4,6 +4,9 @@ import { validateAttributeValue } from '../core/attribute-validation.js';
 import { validateNativeElement } from '../core/native-validation.js';
 import type { AnyNode } from '../core/types.js';
 import type { ParentNode } from '../mixins/types.js';
+import { withInternalStructure } from '../mixins/parent-internals.js';
+import { elementKey } from './element-key.js';
+import { initializeNode, withInitialization } from './initialization.js';
 import type { DrawingContext } from './context.js';
 import type { ElementClass } from './types.js';
 
@@ -11,6 +14,8 @@ export class Registry {
   private static readonly identity = new WeakMap<SVGElement, AnyNode>();
   private readonly wrappers = new Map<SVGElement, AnyNode>();
   private readonly constructors = new Map<string, ElementClass>();
+  /** Tags that have variants, with the attributes that select them. */
+  private readonly variantAttributes = new Map<string, Set<string>>();
 
   constructor(private readonly context: DrawingContext) {}
 
@@ -19,18 +24,45 @@ export class Registry {
   }
 
   register<Options, Result extends AnyNode>(Constructor: ElementClass<Options, Result>): this {
-    const previous = this.constructors.get(Constructor.tag);
+    const key = elementKey(Constructor);
+    const previous = this.constructors.get(key);
     if (previous === Constructor) return this;
-    if (previous && previous !== Constructor)
-      throw new Error(`Tag already registered: ${Constructor.tag}`);
-    this.constructors.set(Constructor.tag, Constructor);
+    if (previous)
+      throw new Error(`${Constructor.variant ? 'Variant' : 'Tag'} already registered: ${key}`);
+    this.constructors.set(key, Constructor);
+    const variant = Constructor.variant;
+    if (variant) {
+      const attributes = this.variantAttributes.get(Constructor.tag) ?? new Set<string>();
+      this.variantAttributes.set(Constructor.tag, attributes.add(variant.attribute));
+    }
     return this;
   }
 
+  /** The tag's base constructor, ignoring variants. */
   get(tag: string): ElementClass | undefined {
     return this.constructors.get(tag);
   }
 
+  /** The constructor registered for the same tag or variant as `Constructor`, if any. */
+  registered(Constructor: ElementClass): ElementClass | undefined {
+    return this.constructors.get(elementKey(Constructor));
+  }
+
+  variant(tag: string, attribute: string, value: string): ElementClass | undefined {
+    return this.constructors.get(`${tag}[${attribute}="${value}"]`);
+  }
+
+  /** The constructor for a native element: a matching variant, else the tag's base. */
+  resolve(element: SVGElement): ElementClass | undefined {
+    const tag = this.context.dom.tag(element);
+    for (const attribute of this.variantAttributes.get(tag) ?? []) {
+      const value = element.getAttribute(attribute);
+      const Constructor = value === null ? undefined : this.variant(tag, attribute, value);
+      if (Constructor) return Constructor;
+    }
+    return this.constructors.get(tag);
+  }
+
   /** Creates a fresh wrapper for binding initialization, without constructor defaults or mounting. */
   createEmpty(tag: string, context = this.context): AnyNode {
     const Constructor = this.get(tag);
@@ -61,6 +93,7 @@ export class Registry {
     for (const node of this.wrappers.values()) this.forget(node);
     this.wrappers.clear();
     this.constructors.clear();
+    this.variantAttributes.clear();
   }
 
   adopt(element: SVGElement, parent?: ParentNode): AnyNode {
@@ -77,14 +110,17 @@ export class Registry {
       ancestor;
       ancestor = this.context.dom.svgParent(ancestor)
     ) {
-      const Constructor = this.get(this.context.dom.tag(ancestor));
+      const Constructor = this.resolve(ancestor);
       if (Constructor?.opaqueContent)
         throw new Error('Cannot adopt descendants across an opaque native boundary');
       for (const tag of Constructor?.forbiddenDescendantTags ?? []) forbidden.add(tag);
     }
     this.validateTree(element, forbidden);
-    const wrapped = this.wrapTree(element);
-    return parent ? parent.add(wrapped) : wrapped;
+    // Adoption reproduces a native tree exactly, so it may fill owned children.
+    return withInitialization(() => {
+      const wrapped = withInternalStructure(() => this.wrapTree(element));
+      return parent ? parent.add(wrapped) : wrapped;
+    });
   }
 
   private assertAdoptionParent(parent: ParentNode | undefined): void {
@@ -103,7 +139,7 @@ export class Registry {
       if (existing.context !== this.context) throw new Error('Cross-root adoption is unsupported');
       return;
     }
-    const Constructor = this.get(tag);
+    const Constructor = this.resolve(element);
     if (!this.context.dom.isSvg(element) || !Constructor)
       throw new TypeError(`Unsupported SVG tag: ${tag}`);
     Constructor[validateNativeElement]?.(element);
@@ -130,16 +166,17 @@ export class Registry {
   private wrapTree(element: SVGElement): AnyNode {
     const existing = Registry.wrapper(element);
     if (existing) return existing;
-    const Constructor = this.get(this.context.dom.tag(element));
+    const Constructor = this.resolve(element)!;
     const children = this.managedChildren(element);
     const node = new Constructor(this.context, {}, element);
     if (Constructor.isContainer)
       (node as ParentNode).adoptChildren(children.map((child) => this.wrapTree(child)));
+    initializeNode(node);
     return node;
   }
 
   private managedChildren(element: SVGElement): SVGElement[] {
-    const Constructor = this.get(this.context.dom.tag(element));
+    const Constructor = this.resolve(element);
     if (Constructor?.opaqueContent) return [];
     return this.context.dom
       .children(element)

package/src/services/types.ts

@@ -7,6 +7,23 @@ import { validateNativeElement } from '../core/native-validation.js';
 
 // Registry
 
+/** Type-only capability for constructors whose options come from instance fields. */
+export declare const creationOptions: unique symbol;
+export type CreationOptions<Options, Instance> = Instance extends {
+  readonly [creationOptions]: infer Fields;
+}
+  ? Fields
+  : Options;
+
+/**
+ * Selects a subclass for elements that share a tag, by the exact value of one `data-*`
+ * attribute. Instances always carry that value, and it can't change.
+ */
+export interface ElementVariant {
+  readonly attribute: string;
+  readonly value: string;
+}
+
 export interface ElementClass<Options = any, Result extends AnyNode = AnyNode> {
   readonly tag: string;
   readonly attributeNames: readonly string[];
@@ -15,6 +32,10 @@ export interface ElementClass<Options = any, Result extends AnyNode = AnyNode> {
   readonly childTags?: readonly string[] | undefined;
   readonly forbiddenDescendantTags?: readonly string[] | undefined;
   readonly opaqueContent?: boolean;
+  /** Registers the class for one attribute value of its tag instead of the whole tag. */
+  readonly variant?: ElementVariant | undefined;
+  /** Children belong to the class: outside structural edits throw. */
+  readonly ownsChildren?: boolean;
   [validateAttributeValue]?(name: string, value: AttributeValue): void;
   [validateNativeElement]?(element: SVGElement): void;
   new (context: DrawingContext, options: Options, existing?: any): Result;

package/src/template/parts.ts

@@ -1,9 +1,10 @@
 import type { AnyNode } from '../core/types.js';
 import { Attributes } from '../dom/attributes.js';
 import type { DomFactory } from '../dom/create.js';
-import type { MarkupNode } from '../dom/types.js';
+import type { MarkupElement } from '../dom/types.js';
 import { Guards } from '../mixins/guards.js';
 import type { Registry } from '../services/registry.js';
+import type { ElementClass } from '../services/types.js';
 import type { TemplateValue } from './svg-tag.js';
 import type { TextBinding } from '../text/internals.js';
 import { classifyReference } from '../resources/references.js';
@@ -15,21 +16,36 @@ export interface TemplateDescription {
   readonly attributes: Readonly<Record<string, readonly PartValue[]>>;
   readonly children: readonly TemplateDescription[];
   readonly text: readonly PartValue[];
-  readonly content: readonly (TemplateDescription | { readonly parts: readonly PartValue[] })[];
+  readonly content: readonly ContentItem[];
 }
 
+/** An element, or a text run whose number parts are hole indexes (child holes outside text). */
+export type ContentItem = TemplateDescription | { readonly parts: readonly PartValue[] };
+
 export class TemplateCompiler {
-  private static readonly cache = new WeakMap<
-    TemplateStringsArray,
-    readonly TemplateDescription[]
-  >();
+  private static readonly cache = new WeakMap<TemplateStringsArray, readonly ContentItem[]>();
   private readonly counts: number[];
 
   private constructor(strings: TemplateStringsArray) {
     this.counts = new Array<number>(strings.length - 1).fill(0);
   }
 
+  /** Top-level elements; templates with top-level child holes need `content()`. */
   static compile(dom: DomFactory, strings: TemplateStringsArray): readonly TemplateDescription[] {
+    const content = TemplateCompiler.content(dom, strings);
+    if (
+      content.some(
+        (item) =>
+          !('tag' in item) &&
+          item.parts.some((part) => part !== '' && (typeof part == 'number' || part.trim())),
+      )
+    )
+      throw new TypeError('Template text must be inside a text element');
+    return content.filter((item): item is TemplateDescription => 'tag' in item);
+  }
+
+  /** Top-level content in order: elements and text runs that may hold child holes. */
+  static content(dom: DomFactory, strings: TemplateStringsArray): readonly ContentItem[] {
     const cached = TemplateCompiler.cache.get(strings);
     if (cached) return cached;
     if (strings.some((part) => /rasamHole\d+End/.test(part)))
@@ -38,51 +54,55 @@ export class TemplateCompiler {
     const source = strings
       .map((part, index) => part + (index < strings.length - 1 ? `rasamHole${index}End` : ''))
       .join('');
-    const result: TemplateDescription[] = [];
-    for (const node of dom.parse(source)) {
-      const description = compiler.describe(node);
-      if (description) result.push(description);
-    }
+    const result: ContentItem[] = [];
+    for (const node of dom.parse(source))
+      result.push('text' in node ? { parts: compiler.split(node.text) } : compiler.describe(node));
     if (compiler.counts.some((count) => count !== 1))
       throw new TypeError('Bindings must appear in attribute values or text elements');
     TemplateCompiler.cache.set(strings, result);
     return result;
   }
 
+  /** `parent` is the container class that receives `content`, for its child rules. */
   static validate(
-    descriptions: readonly TemplateDescription[],
+    content: readonly ContentItem[],
     registry: Registry,
     forbidden: ReadonlySet<string> = new Set(),
+    parent?: ElementClass,
   ): void {
-    for (const description of descriptions) {
+    for (const description of content) {
+      if (!('tag' in description)) {
+        if (description.parts.some((part) => typeof part == 'string' && part.trim()))
+          throw new TypeError('Template text must be inside a text element');
+        continue;
+      }
       const Constructor = registry.get(description.tag);
       if (forbidden.has(description.tag))
         throw new TypeError('Nested links or forbidden descendants are unsupported');
       if (!Constructor) throw new TypeError(`Unsupported template tag: ${description.tag}`);
+      if (parent?.childTags && !parent.childTags.includes(description.tag))
+        throw new TypeError(`${parent.tag} only accepts ${parent.childTags.join(', ')} children`);
       for (const name of Object.keys(description.attributes)) {
         if (!Constructor.attributeNames.includes(name) && !/^(?:data|aria)-[\w-]+$/.test(name))
           throw new TypeError(`Unsupported template attribute: ${name}`);
       }
       if (description.children.length > 0 && !Constructor.isContainer)
         throw new TypeError('Only containers may have element children');
+      // Outside text elements, holes between children are child holes, so only containers take them.
       if (
-        Constructor.childTags &&
-        description.children.some((child) => !Constructor.childTags.includes(child.tag))
-      )
-        throw new TypeError(
-          `${description.tag} only accepts ${Constructor.childTags.join(', ')} children`,
-        );
-      if (
-        description.text.some((part) => typeof part === 'number' || part.trim()) &&
-        !Constructor.isText
+        !Constructor.isText &&
+        description.text.some((part) =>
+          typeof part == 'number' ? !Constructor.isContainer : part.trim(),
+        )
       )
         throw new TypeError('Text bindings require a text element');
       TemplateCompiler.validate(
-        description.children,
+        Constructor.isText ? description.children : description.content,
         registry,
         Constructor.forbiddenDescendantTags
           ? new Set([...forbidden, ...Constructor.forbiddenDescendantTags])
           : forbidden,
+        Constructor,
       );
     }
   }
@@ -101,11 +121,7 @@ export class TemplateCompiler {
     return parts;
   }
 
-  private describe(node: MarkupNode): TemplateDescription | null {
-    if ('text' in node) {
-      if (node.text.trim()) throw new TypeError('Template text must be inside a text element');
-      return null;
-    }
+  private describe(node: MarkupElement): TemplateDescription {
     if (/rasamHole\d+End/.test(node.tag)) throw new TypeError('Dynamic tag names are unsupported');
     const attributes: Record<string, readonly PartValue[]> = {};
     for (const [rawName, value] of Object.entries(node.attributes)) {
@@ -121,7 +137,7 @@ export class TemplateCompiler {
     }
     const text: PartValue[] = [];
     const children: TemplateDescription[] = [];
-    const content: (TemplateDescription | { readonly parts: readonly PartValue[] })[] = [];
+    const content: ContentItem[] = [];
     for (const child of node.children) {
       if ('text' in child) {
         const parts = this.split(child.text);
@@ -129,10 +145,8 @@ export class TemplateCompiler {
         content.push({ parts });
       } else {
         const description = this.describe(child);
-        if (description) {
-          children.push(description);
-          content.push(description);
-        }
+        children.push(description);
+        content.push(description);
       }
     }
     return { tag: node.tag, attributes, children, text, content };
@@ -140,8 +154,6 @@ export class TemplateCompiler {
 }
 
 export class BindingPart {
-  private previous: string | undefined;
-
   constructor(
     private readonly node: AnyNode,
     private readonly name: string | null,
@@ -183,15 +195,18 @@ export class BindingPart {
     }
   }
 
-  commit(value: string | undefined, initial = false): void {
-    if (!initial && value === this.previous) return;
+  commit(value: string | undefined): void {
     if (this.name === null) {
       if (!Guards.isTextual(this.node))
         throw new TypeError('Text binding requires the Textual mixin');
+      if ((this.textBinding ? this.textBinding.value : this.node.text()) === (value ?? '')) return;
       if (this.textBinding) this.textBinding.set(value ?? '');
       else this.node.text(value ?? '');
-    } else this.node.setAttributeValue(this.name, value);
-    this.previous = value;
+    } else {
+      const current = this.node.getAttributeValue(this.name);
+      if ((current === undefined ? undefined : String(current)) === value) return;
+      this.node.setAttributeValue(this.name, value);
+    }
   }
 
   private static primitive(value: TemplateValue): string {