From 1afd294df6ebae002a4b173514f63388b8d3dcbc Mon Sep 17 00:00:00 2001
From: William Wagner <44823142+williamw2@users.noreply.github.com>
Date: Mon, 7 Mar 2022 10:08:34 -0800
Subject: [PATCH] Add fast command buffer (#5708)

---
 .../web-components/fast-ssr/server/server.ts  |  89 ++---
 .../fast-command-buffer/index.fixture.html    | 306 ++++++++++++++++++
 .../fast-ssr/src/fast-command-buffer/index.ts | 149 +++++++++
 3 files changed, 502 insertions(+), 42 deletions(-)
 create mode 100644 packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html
 create mode 100644 packages/web-components/fast-ssr/src/fast-command-buffer/index.ts

diff --git a/packages/web-components/fast-ssr/server/server.ts b/packages/web-components/fast-ssr/server/server.ts
index 0507d622326..b83fdc77a57 100644
--- a/packages/web-components/fast-ssr/server/server.ts
+++ b/packages/web-components/fast-ssr/server/server.ts
@@ -23,50 +23,55 @@ function handleRequest(req: Request, res: Response) {
     });
 }
 
-function handleStyleRequest(req: Request, res: Response) {
-    res.set("Content-Type", "text/html");
-    fs.readFile(
-        path.resolve(__dirname, "./src/fast-style/index.fixture.html"),
-        { encoding: "utf8" },
-        (err, data) => {
-            const stream = (Readable as any).from(data);
-            stream.on("readable", function (this: any) {
-                while ((data = this.read())) {
-                    res.write(data);
-                }
-            });
-            stream.on("close", () => res.end());
-            stream.on("error", (e: Error) => {
-                console.error(e);
-                process.exit(1);
-            });
-        }
-    );
-}
-
-function handleStyleScriptRequest(req: Request, res: Response) {
-    res.set("Content-Type", "application/javascript");
-    fs.readFile(
-        path.resolve(__dirname, "./dist/esm/fast-style/index.js"),
-        { encoding: "utf8" },
-        (err, data) => {
-            const stream = (Readable as any).from(data);
-            stream.on("readable", function (this: any) {
-                while ((data = this.read())) {
-                    res.write(data);
-                }
-            });
-            stream.on("close", () => res.end());
-            stream.on("error", (e: Error) => {
-                console.error(e);
-                process.exit(1);
-            });
-        }
-    );
+function handlePathRequest(
+    mapPath: string,
+    contentType: string,
+    req: Request,
+    res: Response
+) {
+    res.set("Content-Type", contentType);
+    fs.readFile(path.resolve(__dirname, mapPath), { encoding: "utf8" }, (err, data) => {
+        const stream = (Readable as any).from(data);
+        stream.on("readable", function (this: any) {
+            while ((data = this.read())) {
+                res.write(data);
+            }
+        });
+        stream.on("close", () => res.end());
+        stream.on("error", (e: Error) => {
+            console.error(e);
+            process.exit(1);
+        });
+    });
 }
 
 const app = express();
 app.get("/", handleRequest);
-app.get("/fast-style", handleStyleRequest);
-app.get("/fast-style.js", handleStyleScriptRequest);
+app.get("/fast-style", (req: Request, res: Response) =>
+    handlePathRequest("./src/fast-style/index.fixture.html", "text/html", req, res)
+);
+app.get("/fast-style.js", (req: Request, res: Response) =>
+    handlePathRequest(
+        "./dist/esm/fast-style/index.js",
+        "application/javascript",
+        req,
+        res
+    )
+);
+app.get("/fast-command-buffer", (req: Request, res: Response) =>
+    handlePathRequest(
+        "./src/fast-command-buffer/index.fixture.html",
+        "text/html",
+        req,
+        res
+    )
+);
+app.get("/fast-command-buffer.js", (req: Request, res: Response) =>
+    handlePathRequest(
+        "./dist/esm/fast-command-buffer/index.js",
+        "application/javascript",
+        req,
+        res
+    )
+);
 app.listen(PORT);
diff --git a/packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html b/packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html
new file mode 100644
index 00000000000..641b897e4db
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/fast-command-buffer/index.fixture.html
@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8" />
+        <title></title>
+    </head>
+
+    <body
+        style="
+            background-color: var(--fill-color);
+            --body-font: aktiv-grotesk, 'Segoe UI', Arial, Helvetica, sans-serif;
+            --base-height-multiplier: 10;
+            --base-horizontal-spacing-multiplier: 3;
+            --control-corner-radius: 4;
+            --density: 0;
+            --design-unit: 4;
+            --direction: ltr;
+            --disabled-opacity: 0.3;
+            --stroke-width: 1;
+            --focus-stroke-width: 2;
+            --type-ramp-base-font-size: 14px;
+            --type-ramp-base-line-height: 20px;
+            --type-ramp-minus-1-font-size: 12px;
+            --type-ramp-minus-1-line-height: 16px;
+            --type-ramp-minus-2-font-size: 10px;
+            --type-ramp-minus-2-line-height: 16px;
+            --type-ramp-plus-1-font-size: 16px;
+            --type-ramp-plus-1-line-height: 24px;
+            --type-ramp-plus-2-font-size: 20px;
+            --type-ramp-plus-2-line-height: 28px;
+            --type-ramp-plus-3-font-size: 28px;
+            --type-ramp-plus-3-line-height: 36px;
+            --type-ramp-plus-4-font-size: 34px;
+            --type-ramp-plus-4-line-height: 44px;
+            --type-ramp-plus-5-font-size: 46px;
+            --type-ramp-plus-5-line-height: 56px;
+            --type-ramp-plus-6-font-size: 60px;
+            --type-ramp-plus-6-line-height: 72px;
+            --accent-fill-rest-delta: 0;
+            --accent-fill-hover-delta: 4;
+            --accent-fill-active-delta: -5;
+            --accent-fill-focus-delta: 0;
+            --accent-foreground-rest-delta: 0;
+            --accent-foreground-hover-delta: 6;
+            --accent-foreground-active-delta: -4;
+            --accent-foreground-focus-delta: 0;
+            --neutral-fill-rest-delta: 7;
+            --neutral-fill-hover-delta: 10;
+            --neutral-fill-active-delta: 5;
+            --neutral-fill-focus-delta: 0;
+            --neutral-fill-input-rest-delta: 0;
+            --neutral-fill-input-hover-delta: 0;
+            --neutral-fill-input-active-delta: 0;
+            --neutral-fill-input-focus-delta: 0;
+            --neutral-fill-stealth-rest-delta: 0;
+            --neutral-fill-stealth-hover-delta: 5;
+            --neutral-fill-stealth-active-delta: 3;
+            --neutral-fill-stealth-focus-delta: 0;
+            --neutral-fill-strong-rest-delta: 0;
+            --neutral-fill-strong-hover-delta: 8;
+            --neutral-fill-strong-active-delta: -5;
+            --neutral-fill-strong-focus-delta: 0;
+            --neutral-fill-layer-rest-delta: 3;
+            --neutral-stroke-rest-delta: 25;
+            --neutral-stroke-hover-delta: 40;
+            --neutral-stroke-active-delta: 16;
+            --neutral-stroke-focus-delta: 25;
+            --neutral-stroke-divider-rest-delta: 8;
+            --base-layer-luminance: 0.1;
+            --neutral-layer-card-container: #101010;
+            --neutral-layer-floating: #292929;
+            --neutral-layer-1: #181818;
+            --neutral-layer-2: #101010;
+            --neutral-layer-3: #000000;
+            --neutral-layer-4: #000000;
+            --fill-color: #1a1a1a;
+            --accent-fill-rest: #c01754;
+            --accent-fill-hover: #da1a5f;
+            --accent-fill-active: #a01346;
+            --accent-fill-focus: #c01754;
+            --accent-foreground-rest: #e1477e;
+            --accent-foreground-hover: #e55e8e;
+            --accent-foreground-active: #df3874;
+            --accent-foreground-focus: #e1477e;
+            --neutral-fill-rest: #2b2b2b;
+            --neutral-fill-hover: #333333;
+            --neutral-fill-active: #262626;
+            --neutral-fill-focus: #181818;
+            --neutral-fill-input-rest: #181818;
+            --neutral-fill-input-hover: #181818;
+            --neutral-fill-input-active: #181818;
+            --neutral-fill-input-focus: #181818;
+            --neutral-fill-stealth-rest: #181818;
+            --neutral-fill-stealth-hover: #262626;
+            --neutral-fill-stealth-active: #212121;
+            --neutral-fill-stealth-focus: #181818;
+            --neutral-fill-strong-rest: #828282;
+            --neutral-fill-strong-hover: #979797;
+            --neutral-fill-strong-active: #757575;
+            --neutral-fill-strong-focus: #828282;
+            --neutral-fill-layer-rest: #212121;
+            --focus-stroke-outer: #707070;
+            --focus-stroke-inner: #350617;
+            --neutral-foreground-hint: #828282;
+            --neutral-foreground-rest: #e8e8e8;
+            --neutral-stroke-rest: #595959;
+            --neutral-stroke-hover: #808080;
+            --neutral-stroke-active: #424242;
+            --neutral-stroke-focus: #595959;
+            --neutral-stroke-divider-rest: #2e2e2e;
+            --tree-item-expand-collapse-hover: #333333;
+            --tree-item-expand-collapse-selected-hover: #383838;
+            --foreground-on-accent-rest: #ffffff;
+            --foreground-on-accent-rest-large: #000000;
+            --foreground-on-accent-hover: #ffffff;
+            --foreground-on-accent-hover-large: #000000;
+            --foreground-on-accent-active: #ffffff;
+            --foreground-on-accent-active-large: #ffffff;
+            --foreground-on-accent-focus: #ffffff;
+            --foreground-on-accent-focus-large: #000000;
+        "
+    >
+        <script type="module" src="/fast-style.js"></script>
+        <script type="module" src="/fast-command-buffer.js"></script>
+
+        <div style="display: flex;">
+            <fast-card style="width: 300px;">
+                <!-- shadowroots must remain open for testing contained elements -->
+                <template shadowroot="open">
+                    <fast-command-buffer></fast-command-buffer>
+                    <fast-style
+                        data-style-id="fast-card"
+                        css=":host {
+                    --elevation: 4;
+                    display: block;
+                    contain: content;
+                    height: var(--card-height, 100%);
+                    width: var(--card-width, 100%);
+                    box-sizing: border-box;
+                    background: var(--fill-color);
+                    border-radius: calc(var(--control-corner-radius) * 1px);
+                    box-shadow: 0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(0.11 * (2 - var(--background-luminance, 1)))), 0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(0.13 * (2 - var(--background-luminance, 1))));}"
+                    ></fast-style>
+                    <img src="https://via.placeholder.com/300x200/414141" />
+                    <div
+                        style="
+                            padding: 0 10px 10px;
+                            color: var(--neutral-foreground-rest);
+                        "
+                    >
+                        <h2>Heading</h2>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                            scelerisque.Maecenas in velit vehicula, aliquet orci et,
+                            consequat purus. Donec egetsodales lectus, vel sollicitudin
+                            ligula. Suspendisse volutpat auctor diam,vel mattis lorem
+                            venenatis in.
+                        </p>
+                        <fast-button>
+                            <template shadowroot="open">
+                                <fast-command-buffer></fast-command-buffer>
+                                <fast-style
+                                    data-style-id="fast-button"
+                                    css=":host {
+                                font-family: var(--body-font);
+                                outline: none;
+                                font-size: var(--type-ramp-base-font-size);
+                                line-height: var(--type-ramp-base-line-height);
+                                height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
+                                min-width: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
+                                background-color: var(--neutral-fill-rest);
+                                color: var(--neutral-foreground-rest);
+                                border-radius: calc(var(--control-corner-radius) * 1px);
+                                fill: currentcolor;
+                                cursor: pointer;
+                            }
+                            .control {
+                                background: transparent;
+                                background: red;
+                                height: inherit;
+                                flex-grow: 1;
+                                box-sizing: border-box;
+                                display: inline-flex;
+                                justify-content: center;
+                                align-items: center;
+                                padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
+                                white-space: nowrap;
+                                outline: none;
+                                text-decoration: none;
+                                border: calc(var(--stroke-width) * 1px) solid transparent;
+                                color: inherit;
+                                border-radius: inherit;
+                                fill: inherit;
+                                cursor: inherit;
+                                font-family: inherit;
+                                font-size: inherit;
+                                line-height: inherit;
+                            }"
+                                ></fast-style>
+                                <button
+                                    class="control"
+                                    fast-id="button1"
+                                    data-fast-buffer-events="click"
+                                >
+                                    <span>
+                                        Button
+                                    </span>
+                                </button>
+                                <fake-hydrate-button class="fakeHydrateBtn">
+                                    Fake hydrate
+                                </fake-hydrate-button>
+                            </template>
+                        </fast-button>
+                    </div>
+                </template>
+            </fast-card>
+            <fast-card style="width: 300px;">
+                <template shadowroot="open">
+                    <fast-command-buffer></fast-command-buffer>
+                    <fast-style data-style-id="fast-card"></fast-style>
+                    <img src="https://via.placeholder.com/300x200/414141" />
+                    <div
+                        style="
+                            padding: 0 10px 10px;
+                            color: var(--neutral-foreground-rest);
+                        "
+                    >
+                        <h2>Heading</h2>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            Maurisscelerisque varius ornare. Etiam convallis sollicitudin
+                            scelerisque.Maecenas in velit vehicula, aliquet orci et,
+                            consequat purus. Donec egetsodales lectus, vel sollicitudin
+                            ligula. Suspendisse volutpat auctor diam,vel mattis lorem
+                            venenatis in.
+                        </p>
+                        <fast-button>
+                            <template shadowroot="open">
+                                <fast-command-buffer></fast-command-buffer>
+                                <fast-style data-style-id="fast-button"></fast-style>
+                                <button
+                                    class="control"
+                                    fast-id="button2"
+                                    data-fast-buffer-events="click,mouseover"
+                                >
+                                    <span>
+                                        Button
+                                    </span>
+                                </button>
+                                <fake-hydrate-button class="fakeHydrateBtn">
+                                    Fake hydrate
+                                </fake-hydrate-button>
+                            </template>
+                        </fast-button>
+                    </div>
+                </template>
+            </fast-card>
+        </div>
+        <br />
+        <button id="replayBtn">Replay</button>
+        <textarea id="ReplayReadout"></textarea>
+        <script type="module">
+            import {
+                FASTCommandBuffer,
+                FASTCommandBufferAttributeName,
+            } from "/fast-command-buffer.js";
+            document.getElementById("replayBtn").addEventListener("click", ev => {
+                FASTCommandBuffer.replayAll();
+            });
+
+            class FakeHydrateButton extends HTMLElement {
+                connectedCallback() {
+                    this.addEventListener("click", this.fakeHydrate);
+                }
+
+                fakeHydrate() {
+                    var commandbuffer = this.parentNode.querySelectorAll(
+                        "fast-command-buffer"
+                    )[0];
+                    commandbuffer.stopRecording();
+                    var elements = this.parentNode.querySelectorAll(
+                        `[${FASTCommandBufferAttributeName}]`
+                    );
+                    elements.forEach(el => {
+                        var fastId = el.getAttribute("fast-id") || "";
+                        if (fastId !== "") {
+                            var eventlist = el
+                                .getAttribute(FASTCommandBufferAttributeName)
+                                .split(",");
+                            eventlist.forEach(ev => {
+                                el.addEventListener(ev, ev => {
+                                    var id = ev.currentTarget.getAttribute("fast-id");
+                                    document.getElementById("ReplayReadout").value +=
+                                        id + " " + ev.type + "\n";
+                                });
+                            });
+                            FASTCommandBuffer.attachElementToEvents(el, el);
+                        }
+                    });
+                }
+            }
+            customElements.define("fake-hydrate-button", FakeHydrateButton);
+        </script>
+    </body>
+</html>
diff --git a/packages/web-components/fast-ssr/src/fast-command-buffer/index.ts b/packages/web-components/fast-ssr/src/fast-command-buffer/index.ts
new file mode 100644
index 00000000000..a44beeb69f1
--- /dev/null
+++ b/packages/web-components/fast-ssr/src/fast-command-buffer/index.ts
@@ -0,0 +1,149 @@
+const FASTCommandBufferAttributeName: string = "data-fast-buffer-events";
+
+interface CommandCache {
+    originalNode: HTMLElement;
+    event: Event;
+    attachedNode: HTMLElement | null;
+}
+
+/**
+ * Component for recording user events on SSR rendered FAST components which have not yet hydrated and replaying those
+ * events when they have.
+ * During SSR an instance of the <fast-command-buffer/> component should be placed as a direct child within every template
+ * that contains children with behaviors bound to user generated events (click, mouseover, focus, etc). When those child element
+ * tags are rendered FASTCommandBufferAttributeName attribute must be included that lists the events which the element needs to
+ * have recorded as a comma delimited list (i.e. <button data-fast-buffer-events="click,mousedown,mouseup"/>).
+ * Once the page loads the FASTCommandBuffer instances will automatically attach event listeners to the elements with the
+ * FASTCommandBufferAttributeName for the events listed and will record any user generated events to a global static cache.
+ * During hydration of the components FAST-Element will need to stop event recording by removing the FASTCommandBuffer element from
+ * the template or by calling the stopRecording() method. FAST-Element must then identify any elements with behaviors and depending on how the
+ * hydration occurs either map the old element to a new replacing element or confirm to the FASTCommandCache that the element is
+ * the same by calling the FASTCommandBuffer.attachElementToEvents() static method. Once all elements that have recorded events are
+ * matched up then they will be automatically replayed.
+ */
+class FASTCommandBuffer extends HTMLElement {
+    // Global static cache of recorded events
+    private static globalCommandCache: CommandCache[] = [];
+
+    /**
+     * During hydration the original elements with recordable events must be matched up to
+     * the new element, in the case the template is replaced, or simply to the same element
+     * when not being replaced. The hydration process should call this method passing the
+     * original element instance along with the element that is replacing it. All recorded
+     * events will be automatically replayed once all recorded events have had elements
+     * attached.
+     * @param origNode The original element that recorded events.
+     * @param attachNode The new element replacing it or the same element.
+     */
+    public static attachElementToEvents(origNode: HTMLElement, attachNode: HTMLElement) {
+        let unattachedNodes: boolean = false;
+        // Loop through the command cache matching up the elements.
+        FASTCommandBuffer.globalCommandCache.forEach((item: CommandCache) => {
+            if (item.originalNode.isSameNode(origNode)) {
+                item.attachedNode = attachNode;
+            } else if (item.attachedNode === null) {
+                unattachedNodes = true;
+            }
+        });
+        // if all recorded events have been matched then replay the events.
+        if (!unattachedNodes) {
+            FASTCommandBuffer.replayAll();
+        }
+    }
+
+    // Static method for manually replaying events
+    public static replayAll(): void {
+        /**
+         * Loop through cache, replay the event and remove it from the cache.
+         * Loop until we reach the end or there is an event without an attachedNode since there
+         * is a chance that more events could be recorded while we are looping.
+         */
+        while (
+            this.globalCommandCache.length > 0 &&
+            this.globalCommandCache[0].attachedNode !== null
+        ) {
+            this.globalCommandCache[0].attachedNode.dispatchEvent(
+                this.globalCommandCache[0].event
+            );
+            this.globalCommandCache.splice(0, 1);
+        }
+    }
+
+    /**
+     * Cache for the Template element containing the FASTCommandCache instance. Needed when removing event recorders
+     * during disconnectedCallback.
+     */
+    private templateRoot: ShadowRoot | undefined;
+
+    /**
+     * @internal
+     */
+    public connectedCallback(): void {
+        this.templateRoot = this.parentNode as ShadowRoot;
+        this.addEventRecorders();
+    }
+
+    public disconnectedCallback(): void {
+        // Remove recording event listeners
+        this.removeEventRecorders();
+    }
+
+    /**
+     * Records an event to the globalCommandCache.
+     * @param ev The event to be recorded.
+     */
+    public recordEvent(ev: Event) {
+        FASTCommandBuffer.globalCommandCache.push({
+            originalNode: ev.currentTarget as HTMLElement,
+            event: ev,
+            attachedNode: null,
+        });
+    }
+
+    /**
+     * Remove recording event listeners from the template containing this FASTCommandBuffer instance.
+     * Events will no longer be recorded within this template after this is called.
+     */
+    public stopRecording(): void {
+        this.removeEventRecorders();
+    }
+
+    /**
+     * Find all instances of elements with the FASTCommandBufferAttributeName attribute and attach the
+     * recording event listeners for the specified events.
+     */
+    private addEventRecorders() {
+        const elements: NodeListOf<Element> = this.templateRoot!.querySelectorAll(
+            `[${FASTCommandBufferAttributeName}]`
+        );
+        elements.forEach((el: Element) => {
+            const eventlist: string[] = el
+                .getAttribute(FASTCommandBufferAttributeName)!
+                .split(",");
+            eventlist.forEach((ev: string) => {
+                el.addEventListener(ev.trim(), this.recordEvent);
+            });
+        });
+    }
+
+    /**
+     * Find all instances of elements with the FASTCommandBufferAttributeName attribute and remove the
+     * recording event listeners for the specified events.
+     */
+    private removeEventRecorders() {
+        const elements: NodeListOf<Element> = this.templateRoot!.querySelectorAll(
+            `[${FASTCommandBufferAttributeName}]`
+        );
+        elements.forEach((el: Element) => {
+            const eventlist: string[] = el
+                .getAttribute(FASTCommandBufferAttributeName)!
+                .split(",");
+            eventlist.forEach(ev => {
+                el.removeEventListener(ev.trim(), this.recordEvent);
+            });
+        });
+    }
+}
+
+customElements.define("fast-command-buffer", FASTCommandBuffer);
+export { FASTCommandBuffer, FASTCommandBufferAttributeName };