web: Use Proxy instead of fake HTMLCollection for document.embeds

Author: danielhjacobs

web/packages/core/src/internal/register-element.ts

@@ -92,31 +92,117 @@ export function registerElement(
                         Document.prototype,
                         "embeds",
                     );
-
-                    if (orig && orig.get) {
+                    if (orig?.get) {
+                        const CACHE_SYM: unique symbol = Symbol(
+                            "ruffle_embeds_cache",
+                        );
+                        interface CachedCollection extends HTMLCollection {
+                            [CACHE_SYM]?: true;
+                        }
                         Object.defineProperty(Document.prototype, "embeds", {
-                            get() {
-                                const nodes = this.querySelectorAll(
-                                    "embed, ruffle-embed",
-                                );
-
-                                const list = Array.from(nodes) as Element[];
-                                (list as unknown as HTMLCollection).item = (
-                                    i: number,
-                                ): Element | null => list[i] ?? null;
-
-                                (list as unknown as HTMLCollection).namedItem =
-                                    (name: string): Element | null =>
-                                        list.find((el) => {
-                                            const htmlEl = el as HTMLElement;
-                                            return (
-                                                htmlEl.getAttribute("name") ===
-                                                    name || htmlEl.id === name
-                                            );
-                                        }) ?? null;
-
-                                return list;
+                            get(this: Document): CachedCollection {
+                                const existing = (
+                                    this as unknown as Record<
+                                        symbol,
+                                        HTMLCollection
+                                    >
+                                )[CACHE_SYM];
+                                if (existing) {
+                                    return existing;
+                                }
+
+                                const nodes = (): NodeListOf<Element> =>
+                                    this.querySelectorAll(
+                                        "embed, ruffle-embed",
+                                    );
+
+                                const base = Object.create(
+                                    HTMLCollection.prototype,
+                                ) as HTMLCollection;
+
+                                Object.defineProperty(base, "length", {
+                                    enumerable: true,
+                                    configurable: true,
+                                    get() {
+                                        return nodes().length;
+                                    },
+                                });
+
+                                base.item = function (
+                                    index: number,
+                                ): Element | null {
+                                    return nodes()[index] ?? null;
+                                };
+
+                                base.namedItem = function (
+                                    name: string,
+                                ): Element | null {
+                                    const list = nodes();
+                                    for (const el of list) {
+                                        const htmlEl = el as HTMLElement;
+                                        if (
+                                            name &&
+                                            (htmlEl.getAttribute("name") ===
+                                                name ||
+                                                htmlEl.id === name)
+                                        ) {
+                                            return htmlEl;
+                                        }
+                                    }
+                                    return null;
+                                };
+
+                                (base as Iterable<Element>)[Symbol.iterator] =
+                                    function* (): Iterator<Element> {
+                                        for (const el of nodes()) {
+                                            yield el;
+                                        }
+                                    };
+
+                                const proxy = new Proxy(base, {
+                                    get(target, prop, receiver) {
+                                        if (typeof prop === "string") {
+                                            const index = Number(prop);
+                                            if (
+                                                !Number.isNaN(index) &&
+                                                index >= 0
+                                            ) {
+                                                return nodes()[index];
+                                            }
+                                        }
+                                        return Reflect.get(
+                                            target,
+                                            prop,
+                                            receiver,
+                                        );
+                                    },
+                                    has(target, prop) {
+                                        if (typeof prop === "string") {
+                                            const index = Number(prop);
+                                            if (
+                                                !Number.isNaN(index) &&
+                                                index >= 0
+                                            ) {
+                                                return index < nodes().length;
+                                            }
+                                        }
+                                        return Reflect.has(target, prop);
+                                    },
+                                }) as CachedCollection;
+
+                                proxy[CACHE_SYM] = true;
+
+                                (
+                                    this as unknown as Record<
+                                        symbol,
+                                        CachedCollection
+                                    >
+                                )[CACHE_SYM] = proxy;
+
+                                return proxy;
                             },
+                            configurable: true,
+                            enumerable: true,
                         });
                     }
                 }

web/packages/selfhosted/test/polyfill/document_embeds/test.ts

@@ -13,6 +13,12 @@ describe("Document embeds", () => {
             });
         }
 
+        async function documentEmbedsSelfIdentity() {
+            return await browser.execute(() => {
+                return document.embeds === document.embeds;
+            });
+        }
+
         async function removeEl(selector: string) {
             const el = await $(selector);
             await browser.execute((element) => {
@@ -33,6 +39,8 @@ describe("Document embeds", () => {
             browser,
             await browser.$("#test-container").$("ruffle-embed#emb3"),
         );
+		const documentEmbedsIdentity = await documentEmbedsSelfIdentity();
+        expect(documentEmbedsIdentity).to.equal(true);
         const embeds1 = await countDocumentEmbeds();
         expect(embeds1).to.equal(3);
         await removeEl("#emb1");