@rasamjs/core 0.2.0 → 0.3.0

package/src/components/decorators.ts

@@ -0,0 +1,104 @@
+import {
+  Component,
+  installField,
+  assertField,
+  editComponent,
+  registerAction,
+} from './component.js';
+import { defineComponent } from './metadata.js';
+import { initializeElement } from '../services/initialization.js';
+import { destroySubtrees } from '../core/destruction.js';
+import { withInternalStructure } from '../mixins/parent-internals.js';
+import type { ComponentClass, ComponentOptions, PropOptions } from './types.js';
+
+export function component(options: ComponentOptions) {
+  return <Class extends ComponentClass>(
+    target: Class,
+    _context: ClassDecoratorContext<Class>,
+  ): Class => {
+    if (!(target.prototype instanceof Component))
+      throw new TypeError('@component requires extends Component');
+    const Base = target as ComponentClass;
+    const Decorated = class extends Base {
+      constructor(...args: ConstructorParameters<ComponentClass>) {
+        const context = args[0],
+          before = new Set(context.registry.nodes);
+        try {
+          super(...args);
+          if (new.target === Decorated && !this.adopting) this[initializeElement]();
+        } catch (error) {
+          const created = context.registry.nodes.filter((node) => !before.has(node));
+          if (created.length) {
+            try {
+              withInternalStructure(() => created[0][destroySubtrees](created));
+            } catch (cleanup) {
+              throw new AggregateError(
+                [error, cleanup],
+                'Component construction and cleanup failed',
+              );
+            }
+          }
+          throw error;
+        }
+      }
+    };
+    // Inherit edit rules from the decorated application base, not this wrapper's implementation base.
+    defineComponent(Decorated, options);
+    Object.defineProperty(Decorated, 'variant', {
+      value: Object.freeze({ attribute: 'data-rasam-component', value: options.type }),
+    });
+    return Decorated as Class;
+  };
+}
+
+function field(kind: 'prop' | 'state', options: PropOptions) {
+  return <Host extends Component, Value>(
+    _target: undefined,
+    context: ClassFieldDecoratorContext<Host, Value>,
+  ) => {
+    if (
+      context.kind !== 'field' ||
+      context.private ||
+      context.static ||
+      typeof context.name !== 'string'
+    )
+      throw new TypeError(`@${kind} requires a public instance field`);
+    context.addInitializer(function () {
+      this[installField](context.name as string, kind, options, context.access.get(this));
+    });
+    return function (this: Host, value: Value): Value {
+      // Validate before the JS field definition can overwrite a base instance member.
+      this[assertField](context.name as string);
+      return value;
+    };
+  };
+}
+export function prop(options: PropOptions = {}) {
+  return field('prop', options);
+}
+export function state() {
+  return field('state', {});
+}
+
+export function action(label: string) {
+  return <Host extends Component, Args extends unknown[], Result>(
+    method: (this: Host, ...args: Args) => Result,
+    context: ClassMethodDecoratorContext<Host, (this: Host, ...args: Args) => Result>,
+  ) => {
+    if (
+      context.static ||
+      context.private ||
+      typeof context.name !== 'string' ||
+      !label.trim() ||
+      method.constructor.name === 'AsyncFunction'
+    )
+      throw new TypeError('@action requires a synchronous public instance method and label');
+    const name = context.name;
+    context.addInitializer(function () {
+      this[registerAction](name, label);
+    });
+    return function (this: Host, ...args: Args): Result {
+      return this[editComponent](label, () => method.apply(this, args));
+    };
+  };
+}

package/src/components/metadata.ts

@@ -0,0 +1,111 @@
+import type { PortDefinition } from '../types/common.js';
+import type {
+  ComponentClass,
+  ComponentDefinition,
+  ComponentOptions,
+  PropOptions,
+  PropValue,
+} from './types.js';
+
+const definitions = new WeakMap<object, ComponentDefinition>();
+
+export function definition(Constructor: object): ComponentDefinition {
+  const result = definitions.get(Constructor);
+  if (!result) throw new TypeError('Component classes require their own @component decorator');
+  return result;
+}
+
+export function defineComponent(Constructor: ComponentClass, options: ComponentOptions): void {
+  let parent = Object.getPrototypeOf(Constructor);
+  while (parent && !definitions.has(parent)) parent = Object.getPrototypeOf(parent);
+  const inherited = definitions.get(parent);
+  const result = {
+    category: 'General',
+    version: 1,
+    rotate: 'free',
+    flip: true,
+    resize: 'scale',
+    ...(inherited
+      ? {
+          rotate: inherited.rotate,
+          flip: inherited.flip,
+          resize: inherited.resize,
+          width: inherited.width,
+          height: inherited.height,
+        }
+      : {}),
+    ...options,
+  } as ComponentDefinition;
+  if (result.resize === 'props')
+    Object.assign(result, { width: result.width ?? 100, height: result.height ?? 100 });
+  if (!/^[a-z][a-z0-9-]*$/.test(result.type) || !result.name?.trim() || !result.category?.trim())
+    throw new TypeError('Components need a lowercase type, display name and category');
+  if (!Number.isInteger(result.version) || result.version < 1)
+    throw new TypeError('Component version must be a positive integer');
+  if (
+    result.rotate !== 'free' &&
+    result.rotate !== false &&
+    (!Number.isFinite(result.rotate) ||
+      result.rotate <= 0 ||
+      Math.abs(360 / result.rotate - Math.round(360 / result.rotate)) > 1e-8)
+  )
+    throw new TypeError('Rotation steps must be positive divisors of 360');
+  if (typeof result.flip !== 'boolean' || !['scale', 'props', false].includes(result.resize))
+    throw new TypeError('Invalid component flip or resize rule');
+  if (
+    result.resize === 'props'
+      ? !isSize(result.width) || !isSize(result.height)
+      : result.width !== undefined || result.height !== undefined
+  )
+    throw new TypeError("Default sizes need resize: 'props' and positive finite numbers");
+  definitions.set(Constructor, Object.freeze(result));
+}
+
+/** A saved size of a `resize: 'props'` component, in user units. */
+export const isSize = (value: unknown): value is number =>
+  typeof value === 'number' && Number.isFinite(value) && value > 0;
+
+export function validateProp(
+  value: unknown,
+  initial: PropValue,
+  options: PropOptions,
+  name: string,
+): asserts value is PropValue {
+  if (value !== null && !['string', 'number', 'boolean'].includes(typeof value))
+    throw new TypeError(`Invalid component prop: ${name}`);
+  if (value !== null && initial !== null && typeof value !== typeof initial)
+    throw new TypeError(`Wrong type for component prop: ${name}`);
+  if (
+    typeof value === 'number' &&
+    (!Number.isFinite(value) ||
+      value < (options.min ?? -Infinity) ||
+      value > (options.max ?? Infinity))
+  )
+    throw new RangeError(`Component prop is outside its limits: ${name}`);
+  if (options.options && !options.options.includes(value as PropValue))
+    throw new RangeError(`Unknown option for component prop: ${name}`);
+}
+
+const sides: readonly unknown[] = ['left', 'right', 'top', 'bottom'];
+
+/** Checks what `ports()` returned and freezes a copy with only the known fields. */
+export function validatePorts(ports: unknown): readonly PortDefinition[] {
+  if (!Array.isArray(ports)) throw new TypeError('Component ports() must return an array');
+  const names = new Set<string>();
+  return Object.freeze(
+    ports.map((port: Partial<PortDefinition> | null) => {
+      const { name, x, y, side } = port ?? {};
+      if (typeof name !== 'string' || !name)
+        throw new TypeError('Component port names must be non-empty strings');
+      if (names.has(name)) throw new TypeError(`Duplicate component port: ${name}`);
+      names.add(name);
+      if (!Number.isFinite(x) || !Number.isFinite(y))
+        throw new RangeError(`Component port ${name} needs finite x and y`);
+      if (side !== undefined && !sides.includes(side))
+        throw new TypeError(`Unknown side for component port ${name}: ${String(side)}`);
+      return Object.freeze(
+        side === undefined ? { name, x: x!, y: y! } : { name, x: x!, y: y!, side },
+      );
+    }),
+  );
+}

package/src/components/registry.ts

@@ -0,0 +1,79 @@
+import type { AnyNode } from '../core/types.js';
+import type { ParentNode } from '../mixins/types.js';
+import type { ElementClass } from '../services/types.js';
+import { Guards } from '../mixins/guards.js';
+import { ComponentChanges } from './changes.js';
+import { Component } from './component.js';
+import { definition } from './metadata.js';
+import type { ComponentClass, ComponentDefinition } from './types.js';
+
+/** Per-drawing type registration, palette metadata, icons and unknown-type warnings. */
+export class ComponentTypes {
+  private readonly types = new Map<string, ComponentClass>();
+  private readonly warned = new Set<string>();
+  private readonly seen = new WeakSet<AnyNode>();
+  private readonly stop: () => void;
+  constructor(
+    private readonly drawing: AnyNode,
+    types: readonly ComponentClass[] = [],
+  ) {
+    for (const Constructor of types) this.register(Constructor);
+    this.stop = ComponentChanges.for(drawing).discover({
+      added: (node) => this.inspect(node),
+      identityChanged: (node) => this.warn(node),
+    });
+    drawing.onDispose(() => this.destroy());
+    this.inspect(drawing);
+  }
+  private inspect(node: AnyNode): void {
+    if (this.seen.has(node) || node.isDestroyed) return;
+    this.seen.add(node);
+    this.warn(node);
+    if (Guards.isParent(node)) for (const child of node.children) this.inspect(child);
+  }
+  private warn(node: AnyNode): void {
+    const type = node.getAttributeValue('data-rasam-component');
+    if (type !== undefined && !(node instanceof Component) && !this.warned.has(String(type))) {
+      this.warned.add(String(type));
+      console.warn(`Unknown rasam component type: ${type}; loaded as a plain group`);
+    }
+  }
+  register(Constructor: ComponentClass): this {
+    const metadata = definition(Constructor),
+      previous = this.types.get(metadata.type);
+    if (previous && previous !== Constructor)
+      throw new Error(`Component type already registered: ${metadata.type}`);
+    this.drawing.context.registry.register(Constructor as ElementClass);
+    this.types.set(metadata.type, Constructor);
+    return this;
+  }
+  list(category?: string): readonly ComponentDefinition[] {
+    return Object.freeze(
+      [...this.types.values()]
+        .map((Constructor) => definition(Constructor))
+        .filter((metadata) => category === undefined || metadata.category === category)
+        .sort((a, b) => a.category.localeCompare(b.category) || a.name.localeCompare(b.name)),
+    );
+  }
+  get(type: string): ComponentClass | undefined {
+    return this.types.get(type);
+  }
+  icon(type: string, parent: ParentNode): Component {
+    const Constructor = this.get(type);
+    if (!Constructor) throw new TypeError(`Unknown component type: ${type}`);
+    return parent.create(Constructor as ElementClass<{}, Component>, {});
+  }
+  resetState(): void {
+    for (const node of this.drawing.descendants()) if (node instanceof Component) node.resetState();
+  }
+  destroy(): void {
+    this.stop();
+  }
+}
+
+/** Compose with selection's existing filter to keep rendered children closed. */
+export function isComponentChild(node: AnyNode): boolean {
+  for (let parent = node.parent; parent; parent = parent.parent)
+    if (parent instanceof Component) return true;
+  return false;
+}

package/src/components/types.ts

@@ -0,0 +1,66 @@
+import type { EditRules } from '../types/common.js';
+import type { Component } from './component.js';
+import type { DrawingContext } from '../services/context.js';
+import type { ElementClass } from '../services/types.js';
+
+export type PropValue = string | number | boolean | null;
+export type ComponentProps = Readonly<Record<string, PropValue>>;
+
+/** Standard decorators cannot distinguish props from other fields in the TS type system. */
+export type ComponentFields<Instance extends Component> = {
+  [
+    Key in Exclude<keyof Instance, keyof Component> as Instance[Key] extends PropValue ? Key : never
+  ]?: Instance[Key];
+} & {
+  /** The saved size of a `resize: 'props'` component; other components reject it. */
+  readonly width?: number;
+  readonly height?: number;
+};
+
+export interface PropOptions {
+  readonly label?: string;
+  readonly unit?: string;
+  readonly min?: number;
+  readonly max?: number;
+  readonly step?: number;
+  readonly options?: readonly PropValue[];
+  readonly type?: 'color';
+  readonly notation?: 'si';
+}
+
+export interface ComponentOptions extends EditRules {
+  readonly type: string;
+  readonly name: string;
+  readonly category?: string;
+  readonly version?: number;
+  readonly migrate?: (props: ComponentProps, version: number) => ComponentProps;
+  /** Default size for `resize: 'props'`, in user units. Defaults to 100. */
+  readonly width?: number;
+  readonly height?: number;
+}
+
+export interface ComponentDefinition extends ComponentOptions {
+  readonly category: string;
+  readonly version: number;
+  readonly rotate: NonNullable<EditRules['rotate']>;
+  readonly flip: boolean;
+  readonly resize: NonNullable<EditRules['resize']>;
+}
+
+export interface ComponentClass<Instance extends Component = Component> extends ElementClass<
+  ComponentProps,
+  Instance
+> {
+  new (context: DrawingContext, props?: ComponentProps, existing?: SVGGElement): Instance;
+}
+
+/** An `@action` method: its name and undo label. */
+export interface ActionDefinition {
+  readonly name: string;
+  readonly label: string;
+}
+
+export interface PropDefinition extends PropOptions {
+  readonly name: string;
+  readonly initial: PropValue;
+}

package/src/components/view.ts

@@ -0,0 +1,123 @@
+import type { AnyNode } from '../core/types.js';
+import { Group } from '../elements/group.js';
+import { Renderer, type TemplateInstance } from '../template/render.js';
+import {
+  BindingPart,
+  TemplateCompiler,
+  type ContentItem,
+  type TemplateDescription,
+} from '../template/parts.js';
+import type { SvgTemplate } from '../template/svg-tag.js';
+import { Guards } from '../mixins/guards.js';
+import type { Component } from './component.js';
+import { destroySubtrees } from '../core/destruction.js';
+import { Attributes } from '../dom/attributes.js';
+
+/** Reuses saved wrappers when their structure matches the class's current template. */
+export class ComponentView {
+  #instance?: TemplateInstance;
+  #host?: AnyNode;
+  #strings?: TemplateStringsArray;
+  #parts: BindingPart[] = [];
+  readonly #owner: Component;
+  constructor(owner: Component) {
+    this.#owner = owner;
+  }
+
+  render(template: SvgTemplate): void {
+    if (
+      this.#instance &&
+      !this.#instance.isDestroyed &&
+      this.#instance.host.parent === this.#owner &&
+      this.#instance.template.strings === template.strings
+    ) {
+      this.#instance.update(template);
+      return;
+    }
+    if (
+      this.#host &&
+      !this.#host.isDestroyed &&
+      this.#host.parent === this.#owner &&
+      this.#strings === template.strings
+    ) {
+      this.#update(template);
+      return;
+    }
+    this.#parts = [];
+    // The first template-power phase owns structural holes; rebuild saved dynamic trees
+    // through its renderer instead of trying to infer their binding layout here.
+    const content = TemplateCompiler.content(this.#owner.context.dom, template.strings);
+    TemplateCompiler.validate(content, this.#owner.context.registry);
+    const descriptions = this.#hasChildHoles(content)
+      ? undefined
+      : content.filter((item): item is TemplateDescription => 'tag' in item);
+    const host = this.#owner.children.length === 1 ? this.#owner.children[0] : undefined;
+    if (
+      descriptions &&
+      host instanceof Group &&
+      this.#attributesMatch(host, {}) &&
+      this.#matches(host.children, descriptions)
+    ) {
+      this.#bind(host.children, descriptions);
+      this.#host = host;
+      this.#strings = template.strings;
+      this.#instance = undefined;
+      this.#update(template);
+      return;
+    }
+    const previous = [...this.#owner.children];
+    this.#instance = new Renderer(this.#owner).render(template);
+    if (previous.length) this.#owner[destroySubtrees](previous);
+    this.#host = undefined;
+    this.#strings = undefined;
+  }
+
+  #attributesMatch(node: AnyNode, attributes: Readonly<Record<string, unknown>>): boolean {
+    const names = node.attributes.entries().map(([name]) => name);
+    names.push(...node.el.getAttributeNames().map(Attributes.normalizeName));
+    return names.every((name) => Object.hasOwn(attributes, name));
+  }
+
+  #hasChildHoles(content: readonly ContentItem[]): boolean {
+    return content.some((item) => {
+      if (!('tag' in item)) return item.parts.some((part) => typeof part === 'number');
+      const Constructor = this.#owner.context.registry.get(item.tag);
+      return this.#hasChildHoles(Constructor?.isText ? item.children : item.content);
+    });
+  }
+
+  #matches(nodes: readonly AnyNode[], descriptions: readonly TemplateDescription[]): boolean {
+    return (
+      nodes.length === descriptions.length &&
+      nodes.every((node, index) => {
+        const description = descriptions[index];
+        return (
+          !(Guards.isTextual(node) && description.text.length && description.children.length) &&
+          node.el.localName === description.tag &&
+          this.#attributesMatch(node, description.attributes) &&
+          (Guards.isParent(node)
+            ? this.#matches(node.children, description.children)
+            : description.children.length === 0)
+        );
+      })
+    );
+  }
+
+  #bind(nodes: readonly AnyNode[], descriptions: readonly TemplateDescription[]): void {
+    nodes.forEach((node, index) => {
+      const description = descriptions[index];
+      for (const [name, parts] of Object.entries(description.attributes))
+        this.#parts.push(new BindingPart(node, name, parts));
+      if (description.text.length && Guards.isTextual(node)) {
+        this.#parts.push(new BindingPart(node, null, description.text));
+      }
+      if (Guards.isParent(node)) this.#bind(node.children, description.children);
+    });
+  }
+
+  #update(template: SvgTemplate): void {
+    const changes = this.#parts.map((part) => ({ part, value: part.evaluate(template.values) }));
+    for (const { part, value } of changes) part.validate(value);
+    for (const { part, value } of changes) part.commit(value);
+  }
+}

package/src/components.ts

@@ -0,0 +1,15 @@
+/** Opt-in class component rendering, saved props and temporary live state. */
+export { Component } from './components/component.js';
+export { component, prop, state, action } from './components/decorators.js';
+export { ComponentTypes, isComponentChild } from './components/registry.js';
+export type {
+  ActionDefinition,
+  ComponentClass,
+  ComponentDefinition,
+  ComponentFields,
+  ComponentOptions,
+  ComponentProps,
+  PropValue,
+  PropOptions,
+  PropDefinition,
+} from './components/types.js';

package/src/core/node.ts

@@ -4,7 +4,8 @@ import { Attributes } from '../dom/attributes.js';
 import { Emitter } from '../events/emitter.js';
 import { Matrix } from '../math/matrix.js';
 import type { DrawingContext } from '../services/context.js';
-import type { ElementClass } from '../services/types.js';
+import type { ElementClass, ElementVariant } from '../services/types.js';
+import { assertChildrenEditable, withOwnedChildren } from '../mixins/parent-internals.js';
 import type { ParentNode } from '../mixins/types.js';
 import type { AttributeValue, Bounds, CommonAttributes } from '../types/common.js';
 import type { AnyNode, NodeEvents } from './types.js';
@@ -28,6 +29,10 @@ export class Node<
   static readonly isText: boolean = false;
   static readonly childTags: readonly string[] | undefined = undefined;
   declare static readonly forbiddenDescendantTags: readonly string[] | undefined;
+  /** See `ElementVariant`: one `data-*` attribute value selects this class for its tag. */
+  static readonly variant: ElementVariant | undefined = undefined;
+  /** When true, only the class itself changes its children, through `withOwnChildren()`. */
+  static readonly ownsChildren: boolean = false;
 
   readonly el: Element;
   readonly attributes: Attributes;
@@ -61,6 +66,8 @@ export class Node<
     this.allowedAttributes = schema;
     for (const [name, value] of this.attributes.entries()) this.validateAttribute(name, value);
     if (!existing) {
+      const variant = Constructor.variant;
+      if (variant) this.setAttributeValue(variant.attribute, variant.value);
       this.attrs(options);
       for (const { attribute, initial } of fields)
         if (initial !== undefined && this.attributes.getNormalized(attribute) === undefined)
@@ -111,6 +118,19 @@ export class Node<
     name = Attributes.normalizeName(name);
     if (!this.allowedAttributes.has(name) && !/^(?:data|aria)-[\w-]+$/.test(name))
       throw new TypeError(`Unsupported attribute: ${name}`);
+    if (name.startsWith('data-')) {
+      // A variant's identifying attribute is fixed, and other classes can't claim its value.
+      const Constructor = this.constructor as ElementClass;
+      const variant = Constructor.variant;
+      if (
+        variant?.attribute === name
+          ? value !== variant.value
+          : value != null &&
+            (this.context.registry.variant(Constructor.tag, name, String(value)) ?? Constructor) !==
+              Constructor
+      )
+        throw new TypeError(`${name} selects the element class`);
+    }
     if (value != null) Attributes.normalize(name, value);
     if (name === 'transform' && value != null) Matrix.parse(String(value));
     if (
@@ -123,6 +143,12 @@ export class Node<
     (this.constructor as ElementClass)[validateAttributeValue]?.(name, value);
   }
 
+  /** For classes with `static ownsChildren`: change this node's own children. */
+  protected withOwnChildren<Result>(callback: () => Result): Result {
+    this.assertLive();
+    return withOwnedChildren(this, callback);
+  }
+
   getAttributeValue(name: string): string | number | undefined {
     this.assertLive();
     return this.attributes.get(name);
@@ -305,6 +331,7 @@ export class Node<
   remove(): this {
     return mutation(this, () => {
       this.assertLive();
+      assertChildrenEditable(this.parent);
       for (const node of this.descendants()) node.releaseCapturedPointers();
       this.detachNativeElement();
       this.context.bounds.invalidate();
@@ -316,6 +343,7 @@ export class Node<
   destroy(): void {
     if (this.isDestroyed) return;
     this.assertLive();
+    assertChildrenEditable(this.parent);
     this.context.defs.assertCanDestroy(
       new Set(this === this.context.root ? this.context.registry.nodes : this.descendants()),
     );
@@ -339,6 +367,9 @@ export class Node<
         disposalOrder.push(node);
       }
     }
+    // Preflight ownership before any disposal side effect; owners destroyed together pass.
+    for (const root of roots)
+      if (root.parent && !ownedNodes.has(root.parent)) assertChildrenEditable(root.parent);
     this.context.defs.assertCanDestroy(ownedNodes);
     this.context.changes.beforeDisposal([...ownedNodes]);
     for (const root of roots) this.context.changes.touchTree(root);

package/src/interchange/clone.ts

@@ -24,8 +24,9 @@ export function cloneNode<Node extends AnyNode>(source: Node, options: CloneOpti
     const originals = [source, ...dependencies];
     const copies = new Map<AnyNode, SVGElement>();
     const roots = originals.map((node) => snapshot(node, copies));
-    for (const original of copies.keys())
-      if (source.context.registry.get(original.el.localName) !== original.constructor)
+    // Copies are rebuilt by adoption, so each must resolve back to its original's class.
+    for (const [original, element] of copies)
+      if (source.context.registry.resolve(element) !== original.constructor)
         throw new TypeError('Clone requires the exact registered constructor for each managed tag');
     for (const original of copies.keys())
       if (Guards.isTransformable(original) && !original.geometryMatrix().inverse())

package/src/interchange/reconstruct.ts

@@ -8,6 +8,8 @@ import { validateNativeElement } from '../core/native-validation.js';
 import { destroySubtrees } from '../core/destruction.js';
 import { InterchangeDom } from './dom.js';
 import type { AttributeBindings } from '../catalog/namespaces.js';
+import { withInternalStructure } from '../mixins/parent-internals.js';
+import { withInitialization } from '../services/initialization.js';
 
 /** Pure validation for the complete forest, before Registry can claim a wrapper. */
 export function preflight(
@@ -16,7 +18,7 @@ export function preflight(
   schemas: ReadonlyMap<SVGElement, ReadonlySet<string>> = new Map(),
 ): void {
   function visit(element: SVGElement, forbidden: ReadonlySet<string>): void {
-    const Constructor = context.registry.get(element.localName) as ElementClass & {
+    const Constructor = context.registry.resolve(element) as ElementClass & {
       attributeBindings?: AttributeBindings;
     };
     if (
@@ -90,22 +92,24 @@ export function reconstruct<Result>(
 ): Result {
   const before = new Set(owner.context.registry.nodes);
   try {
-    const nodes = roots.map((element) => owner.context.registry.adopt(element));
-    for (const node of owner.context.registry.nodes)
-      if (!before.has(node))
-        for (const name of ['tabindex', 'role']) {
-          const value = node.el.getAttribute(name);
-          if (value !== null) {
-            node.defineAttribute(name);
-            node.setAttributeValue(name, value);
+    return withInitialization(() => {
+      const nodes = roots.map((element) => owner.context.registry.adopt(element));
+      for (const node of owner.context.registry.nodes)
+        if (!before.has(node))
+          for (const name of ['tabindex', 'role']) {
+            const value = node.el.getAttribute(name);
+            if (value !== null) {
+              node.defineAttribute(name);
+              node.setAttributeValue(name, value);
+            }
           }
-        }
-    return finish(nodes);
+      return finish(nodes);
+    });
   } catch (error) {
     const created = owner.context.registry.nodes.filter((node) => !before.has(node));
     if (created.length) {
       try {
-        owner[destroySubtrees](created);
+        withInternalStructure(() => owner[destroySubtrees](created));
       } catch (cleanupError) {
         throw new AggregateError(
           [error, cleanupError],