Address #213 by update how iframes created by CodeFrame make use of p5.min.js.

howard-e · howard-e · commit 1ada9cf7331e · 2024-04-23T14:11:23.000-05:00
Avoids requiring a cached version of script by passing the text content of the script directly to the iframe.
diff --git a/src/components/CodeEmbed/frame.tsx b/src/components/CodeEmbed/frame.tsx
@@ -1,4 +1,4 @@
-import { useRef, useLayoutEffect } from 'preact/hooks';
+import { useRef, useLayoutEffect, useEffect } from "preact/hooks";
 import { p5VersionForEmbeds } from "@/src/globals/globals";
 
 /*
@@ -33,7 +33,20 @@ ${code.css || ""}
 </style>
 <body>${code.htmlBody || ""}</body>
 <script id="code" type="text/javascript">${code.js || ""}</script>
-<script src="${p5LibraryUrl}"></script>
+<script type="text/javascript">
+  // Listen for p5.min.js text content and include in iframe's head as script
+  window.addEventListener("message", event => {
+    // Include check to prevent p5.min.js from being loaded twice
+    const scriptExists = !!document.getElementById("p5ScriptTagInIframe");
+    if (!scriptExists && event.data?.sender === '${p5LibraryUrl}') {
+      const p5ScriptElement = document.createElement('script');
+      p5ScriptElement.id = "p5ScriptTagInIframe";
+      p5ScriptElement.type = 'text/javascript';
+      p5ScriptElement.textContent = event.data.message;
+      document.head.appendChild(p5ScriptElement);
+    }
+  })
+</script>
 `.replace(/\u00A0/g, " ");
 
 export interface CodeFrameProps {
@@ -52,6 +65,7 @@ export interface CodeFrameProps {
 export const CodeFrame = (props: CodeFrameProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const p5ScriptTag = document.getElementById('p5ScriptTag') as HTMLScriptElement;
 
   // For performance, set the iframe to display:none when
   // not visible on the page. This will stop the browser
@@ -78,6 +92,31 @@ export const CodeFrame = (props: CodeFrameProps) => {
     return () => observer.disconnect();
   }, []);
 
+  useEffect(() => {
+    (async () => {
+      if (!p5ScriptTag || !iframeRef.current) return;
+
+      /*
+       * Uses postMessage to receive the text content of p5.min.js, to be included
+       * in a script so p5.js functions can be called.
+       *
+       * Rather than including the script with <script src=p5LibraryUrl>, this had
+       * to be done because caching this resource with the service worker or browser
+       * cache, so the cached version could be used by an iframe isn't currently
+       * supported on all major browsers.
+       * It would instead, cause multiple downloads of p5.min.js on page load for
+       * each example, and on re-running a CodeFrame.
+       *
+       * See https://github.com/w3c/ServiceWorker/issues/765.
+       */
+      const p5ScriptText = await fetch(p5ScriptTag.src).then((res) => res.text());
+      iframeRef.current.contentWindow?.postMessage({
+        sender: p5LibraryUrl,
+        message: p5ScriptText
+      }, '*');
+    })()
+  }, [props.jsCode])
+
   return (
     <div ref={containerRef} style={{ width: props.width, height: props.height }}>
       <iframe
diff --git a/src/components/CodeEmbed/index.jsx b/src/components/CodeEmbed/index.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from "preact/hooks";
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
+import { p5VersionForEmbeds } from "@/src/globals/globals";
 
 import { CodeFrame } from "./frame";
 import { CopyCodeButton } from "../CopyCodeButton";
@@ -44,8 +45,19 @@ export const CodeEmbed = (props) => {
 
   const [previewCodeString, setPreviewCodeString] = useState(codeString);
 
+  /*
+   * Url to fetch the p5.js library from
+   */
+  const p5LibraryUrl = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${p5VersionForEmbeds}/p5.min.js`;
+
   useEffect(() => {
     setRendered(true);
+
+    // Includes p5.min.js script to be used by `CodeFrame` iframe(s)
+    const p5ScriptElement = document.createElement('script');
+    p5ScriptElement.id = "p5ScriptTag";
+    p5ScriptElement.src = p5LibraryUrl;
+    document.head.appendChild(p5ScriptElement);
   }, []);
 
   if (!rendered) return <div className="code-placeholder" />;
