Clone-replace for alfa-dom Nodes

docs/review/api/alfa-dom.api.md

@@ -774,6 +774,7 @@ export namespace Node {
     const fullTree: Traversal;
     const composedNested: Traversal;
     export function clone(node: Fragment, options?: ElementReplacementOptions, device?: Device): Fragment;
+    export function clone(node: Shadow, options?: ElementReplacementOptions, device?: Device): Shadow;
     export function clone(node: Node, options?: ElementReplacementOptions, device?: Device): Node;
     // @internal (undocumented)
     export function cloneNode(node: Node, options?: ElementReplacementOptions, device?: Device): Trampoline<Node>;
@@ -983,11 +984,11 @@ export class Shadow extends Node<"shadow"> {
     // (undocumented)
     get mode(): Shadow.Mode;
     // (undocumented)
-    static of(children: Iterable<Node>, style?: Iterable<Sheet>, mode?: Shadow.Mode, externalId?: string, extraData?: any): Shadow;
+    static of(children: Iterable_2<Node>, style?: Iterable_2<Sheet>, mode?: Shadow.Mode, externalId?: string, extraData?: any): Shadow;
     // (undocumented)
     parent(options?: Node.Traversal): Option<Node>;
     // (undocumented)
-    get style(): Iterable<Sheet>;
+    get style(): Iterable_2<Sheet>;
     // (undocumented)
     toJSON(): Shadow.JSON;
     // (undocumented)
@@ -996,6 +997,8 @@ export class Shadow extends Node<"shadow"> {
 
 // @public (undocumented)
 export namespace Shadow {
+    // @internal (undocumented)
+    export function cloneShadow(options: Node.ElementReplacementOptions, device?: Device): (shadow: Shadow) => Trampoline<Shadow>;
     // @internal (undocumented)
     export function fromShadow(json: JSON, device?: Device): Trampoline<Shadow>;
     // (undocumented)

packages/alfa-dom/src/node.ts

@@ -20,6 +20,7 @@ import {
   Document,
   Element,
   Fragment,
+  Shadow,
   Slot,
   Text,
   Type,
@@ -480,6 +481,20 @@ export namespace Node {
     device?: Device,
   ): Fragment;
 
+  /**
+   * Creates a new `Shadow` instance with the same value as the original and deeply referentially non-equal.
+   * Optionally replaces child elements based on a predicate.
+   *
+   * @remarks
+   * The clone will have the same `externalId` as the original.
+   * The clone will *not* get `extraData` from the original, instead it will be `undefined`.
+   */
+  export function clone(
+    node: Shadow,
+    options?: ElementReplacementOptions,
+    device?: Device,
+  ): Shadow;
+
   /**
    * Creates a new `Node` instance with the same value as the original and deeply referentially non-equal.
    * Optionally replaces child elements based on a predicate.
@@ -521,6 +536,7 @@ export namespace Node {
       .if(Document.isDocument, Document.cloneDocument(options, device))
       .if(Type.isType, Type.cloneType)
       .if(Fragment.isFragment, Fragment.cloneFragment(options, device))
+      .if(Shadow.isShadow, Shadow.cloneShadow(options, device))
       .else(() => {
         throw new Error(`Unexpected node of type: ${node.type}`);
       })

packages/alfa-dom/src/node/element.ts

@@ -468,7 +468,9 @@ export namespace Element {
           element.namespace,
           element.prefix,
           element.name,
-          element.attributes.map((attribute) => Attribute.clone(attribute)),
+          element.attributes.map((attribute) =>
+            Attribute.clone(attribute, options, device),
+          ),
           Iterable.flatten(children),
           element.style.map((block) => {
             return Block.of(
@@ -488,21 +490,13 @@ export namespace Element {
 
         if (element.shadow.isSome()) {
           const shadow = element.shadow.get();
-          clonedElement._attachShadow(
-            Shadow.of(
-              shadow
-                .children()
-                .map((child) => Node.clone(child, options, device)),
-              shadow.style,
-              shadow.mode,
-              shadow.externalId,
-              shadow.extraData,
-            ),
-          );
+          clonedElement._attachShadow(Shadow.clone(shadow, options, device));
         }
 
         if (element.content.isSome()) {
-          clonedElement._attachContent(Document.clone(element.content.get()));
+          clonedElement._attachContent(
+            Document.clone(element.content.get(), options, device),
+          );
         }
 
         return clonedElement;

packages/alfa-dom/src/node/shadow.ts

@@ -2,6 +2,7 @@ import { None, Option } from "@siteimprove/alfa-option";
 import { Trampoline } from "@siteimprove/alfa-trampoline";
 
 import { Device } from "@siteimprove/alfa-device";
+import { Iterable } from "@siteimprove/alfa-iterable";
 import { Node } from "../node";
 import { Sheet } from "../style/sheet";
 import { Element } from "./element";
@@ -156,6 +157,30 @@ export namespace Shadow {
       Shadow.of(children, json.style.map(Sheet.from), json.mode as Mode),
     );
   }
+
+  /**
+   * @internal
+   */
+  export function cloneShadow(
+    options: Node.ElementReplacementOptions,
+    device?: Device,
+  ): (shadow: Shadow) => Trampoline<Shadow> {
+    return (shadow) =>
+      Trampoline.traverse(shadow.children(), (child) => {
+        if (Element.isElement(child) && options.predicate(child)) {
+          return Trampoline.done(Array.from(options.newElements));
+        }
+
+        return Node.cloneNode(child, options, device).map((node) => [node]);
+      }).map((children) => {
+        return Shadow.of(
+          Iterable.flatten(children),
+          shadow.style,
+          shadow.mode,
+          shadow.externalId,
+        );
+      });
+  }
 }
 
 function indent(input: string): string {

packages/alfa-dom/test/node.spec.tsx

@@ -85,10 +85,8 @@ test(`Node.clone() creates new instance with same value`, (t) => {
 });
 
 test(`Node.clone() clones shadow`, (t) => {
-  const div = <div>hello</div>;
   const shadow = h.shadow([<div>foo</div>]);
-
-  div._attachShadow(shadow);
+  const div = <div>{shadow}</div>;
 
   const clonedDiv = Node.clone(div);
 
@@ -101,8 +99,8 @@ test(`Node.clone() clones shadow`, (t) => {
 });
 
 test(`Node.clone() clones content`, (t) => {
-  const div = <div>hello</div>;
   const content = h.document([<div>foo</div>]);
+  const div = <div>{content}</div>;
 
   div._attachContent(content);