cloudflare · jculvey · Jan 25, 2023 · Jan 26, 2023 · Jan 26, 2023 · Jan 25, 2023
diff --git a/productivity-suite/app/fragments/todos/src/components/Header.tsx b/productivity-suite/app/fragments/todos/src/components/Header.tsx
@@ -26,6 +26,8 @@ export function Header({
         }`}
         placeholder="What needs to be done?"
         autoFocus
+        autoComplete="off"
+        spellCheck={false}
         value={newTodoDetails.text}
         onInput={(event: ChangeEvent<HTMLInputElement>) => {
           const text = event.target.value;

diff --git a/productivity-suite/app/legacy-app/index.html b/productivity-suite/app/legacy-app/index.html
@@ -155,7 +155,7 @@
       }
 
       body.show-seams #root > .layout,
-      body.show-seams piercing-fragment-host {
+      body.show-seams piercing-fragment-host:has( div.fragment-end) {
         outline: 2px dashed var(--seams-color);
         border-radius: 1px;
       }

diff --git a/productivity-suite/piercing-library/src/message-bus/message-bus.ts b/productivity-suite/piercing-library/src/message-bus/message-bus.ts
@@ -60,6 +60,7 @@ export class GenericMessageBus implements MessageBus {
   }
 
   dispatch(eventName: string, value: JSONValue) {
+    value = JSON.parse(JSON.stringify(value));
     this._state[eventName] = value;
     const callbacksForEvent = this._callbacksMap.get(eventName) ?? [];
     setTimeout(

diff --git a/productivity-suite/piercing-library/src/piercing-fragment-outlet.ts b/productivity-suite/piercing-library/src/piercing-fragment-outlet.ts
@@ -80,7 +80,28 @@ export class PiercingFragmentOutlet extends HTMLElement {
 
   disconnectedCallback() {
     if (this.fragmentHost) {
-      unmountedFragmentIds.add(this.fragmentHost.fragmentId);
+      const fragmentId = this.fragmentHost.fragmentId;
+      unmountedFragmentIds.add(fragmentId);
+
+      const fragmentFunctionConstructor =
+        fragmentRegistrationMap.get(fragmentId)!;
+      if (fragmentFunctionConstructor) {
+        fragmentRegistrationMap.delete(fragmentId);
+
+        const listenerRegistrations = fragmentListenerMap.get(
+          fragmentFunctionConstructor
+        )!;
+        fragmentListenerMap.delete(fragmentFunctionConstructor);
+
+        for (const listenerRegistration of listenerRegistrations) {
+          listenerRegistration.target.removeEventListener(
+            listenerRegistration.name,
+            listenerRegistration.listener,
+            listenerRegistration.options
+          );
+        }
+      }
+
       this.fragmentHost = null;
     }
   }

diff --git a/productivity-suite/piercing-library/src/piercing-gateway.ts b/productivity-suite/piercing-library/src/piercing-gateway.ts
@@ -10,6 +10,7 @@ import {
 // for debugging replace `qwikloader.js` with `qwikloader.debug.js` to have the code non-minified
 import qwikloader from "@builder.io/qwik/qwikloader.js?raw";
 import reframedClient from "./reframed-client?raw";
+import reframedHost from "./reframed-host?raw";
 import { MessageBusState } from "./message-bus/message-bus";
 import { getMessageBusState } from "./message-bus/server-side-message-bus";
 
@@ -327,6 +328,7 @@ export class PiercingGateway<Env> {
         "</head>",
         `${getMessageBusInlineScript(stateHeaderStr ?? "{}")}\n` +
           `${piercingFragmentHostInlineScript}\n` +
+          `${getReframedHostCode()}\n` +
           "</head>"
       );
 
@@ -366,18 +368,21 @@ export class PiercingGateway<Env> {
       <piercing-fragment-host fragment-id=${fragmentConfig.fragmentId}>
         ${prePiercingStyles}
         --FRAGMENT_CONTENT--
+        <div class="fragment-end"></div>
       </piercing-fragment-host>
     `;
 
     if (this.config.isolateFragments?.(env)) {
       // Quotes must be escaped from srcdoc contents
       template = `
+        ${prePiercingStyles}
         <piercing-fragment-host fragment-id=${fragmentConfig.fragmentId}>
         </piercing-fragment-host>
-        ${prePiercingStyles}
         <iframe id="iframe_${fragmentId}" style="display: none" srcdoc="
           <body>
             --FRAGMENT_CONTENT--
+            <div class="fragment-end"></div>
+            ${getEmbeddedStyleScript(fragmentId)}
             ${getEscapedReframedClientCode(fragmentId)}
             ${(framework === "qwik" && escapeQuotes(qwikloaderScript)) || ""}
           </body>
@@ -463,6 +468,35 @@ function getEscapedReframedClientCode(fragmentId: string) {
   </script>`;
 }
 
+function getEmbeddedStyleScript(fragmentId: string) {
+  return `<script>
+    ${escapeQuotes(
+      `
+        const stylesheets = document.querySelectorAll(
+          'link[href][rel="stylesheet"]'
+        );
+
+        stylesheets.forEach((styleLink) => {
+          if (styleLink.sheet) {
+            let rulesText = "";
+            for (const { cssText } of styleLink.sheet.cssRules) {
+              rulesText += cssText + "\\n";
+            }
+
+            const styleElement = document.createElement("style");
+            styleElement.textContent = rulesText;
+            styleLink.replaceWith(styleElement);
+          }
+        });
+      `
+    )}
+  </script>`;
+}
+
+function getReframedHostCode() {
+  return `<script> ${reframedHost}</script>`;
+}
+
 const escapeQuotes = (str: string) => str.replaceAll('"', `&quot;`);
 
 const qwikloaderScript = `<script id="qwikloader">${qwikloader}</script>`;
diff --git a/productivity-suite/piercing-library/src/reframed-client.js b/productivity-suite/piercing-library/src/reframed-client.js
@@ -1,12 +1,21 @@
 const reframedContainer = window.parent.document.querySelector(
   __FRAGMENT_SELECTOR__
 );
+
 if (!reframedContainer) {
   console.error("Container element couldn't be found");
 }
 
+const fragmentId = reframedContainer.getAttribute("fragment-id");
+
 const reframedDocument = reframedContainer.ownerDocument;
 const reframedWindow = reframedDocument.defaultView;
+const reframedRegistrationSymbol = Symbol.for("reframedRegistration");
+const reframedRegistration = Reflect.get(
+  reframedWindow,
+  reframedRegistrationSymbol
+);
+reframedRegistration(fragmentId, Function);
 
 const htmlToReframe = [];
 const nodesToRemove = [];
@@ -42,6 +51,8 @@ document.body.childNodes.forEach((node) => {
 });
 
 nodesToRemove.forEach((node) => node.remove());
+
+console.log("reframing iframe nodes");
 reframedContainer.innerHTML = htmlToReframe.join("");
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -111,8 +122,8 @@ for (const listenerProperty of domListenerProperties) {
     );
   };
 
-  window[listenerProperty] = function reframedListenerFn(...args) {
-    return reframedWindow[listenerProperty].apply(reframedWindow, args);
+  window[listenerProperty] = function reframedListenerFn() {
+    return reframedWindow[listenerProperty].apply(reframedWindow, arguments);
   };
 }
 

diff --git a/productivity-suite/piercing-library/src/reframed-host.js b/productivity-suite/piercing-library/src/reframed-host.js
@@ -0,0 +1,54 @@
+// Maps that allow us to keep track of registered fragments and their listeners.
+// We use FunctionConstructor as a way to identify the origin of a registered listener and map it back to its fragment.
+const fragmentRegistrationMap = new Map();
+const fragmentListenerMap = new Map();
+
+// monkey patch global addEventListner on window and document so that we can automatically unregister
+// any listeners created from within a registered fragment.
+const addEventListenerTargets = [window, document];
+// const addEventListenerTargets = [Node.prototype];
+for (const addEventListenerTarget of addEventListenerTargets) {
+  const originalDocumentAddEventListener =
+    addEventListenerTarget.addEventListener;
+  addEventListenerTarget.addEventListener =
+    function reframedHostAddEventListener(name, listener, options) {
+      let listenerFnConstructor;
+      if (listener.handleEvent) {
+        listenerFnConstructor = listener.handleEvent.constructor;
+      } else {
+        listenerFnConstructor = listener.constructor;
+      }
+
+      const listenerFns = fragmentListenerMap.get(listenerFnConstructor);
+
+      // if this listener comes from a registered fragment, then keep track of it so that we can unregister it
+      if (listenerFns) {
+        listenerFns.push({
+          target: addEventListenerTarget,
+          // target: this,
+          name,
+          listener,
+          options,
+        });
+      }
+
+      return originalDocumentAddEventListener.call(
+        addEventListenerTarget,
+        // this,
+        name,
+        listener,
+        options
+      );
+    };
+}
+
+const reframedRegistrationSymbol = Symbol.for("reframedRegistration");
+
+Reflect.set(
+  window,
+  reframedRegistrationSymbol,
+  function reframedRegistration(fragmentId, clientFunctionConstructor) {
+    fragmentRegistrationMap.set(fragmentId, clientFunctionConstructor);
+    fragmentListenerMap.set(clientFunctionConstructor, []);
+  }
+);