.

docs/js/custom-element/graphics-element.js

@@ -6,7 +6,14 @@ import performCodeSurgery from "./lib/perform-code-surgery.js";
 const MODULE_URL = import.meta.url;
 const MODULE_PATH = MODULE_URL.slice(0, MODULE_URL.lastIndexOf(`/`));
 
-// Really wish this was baked into the DOM API...
+// Until global `await` gets added to JS, we need to declare this "constant"
+// using the `let` keyword instead, and then boostrap its value during the
+// `loadSource` call (using the standard if(undefined){assignvalue} pattern).
+let IMPORT_GLOBALS_FROM_GRAPHICS_API = undefined;
+
+// Really wish this was baked into the DOM API. Having to use an
+// IntersectionObserver with bounding box fallback is super dumb
+// from an authoring perspective.
 function isInViewport(e) {
   if (typeof window === `undefined`) return true;
   if (typeof document === `undefined`) return true;
@@ -110,6 +117,15 @@ class GraphicsElement extends CustomElement {
   async loadSource() {
     debugLog(`loading ${this.getAttribute(`src`)}`);
 
+    if (!IMPORT_GLOBALS_FROM_GRAPHICS_API) {
+      const importStatement = (
+        await fetch(`${MODULE_PATH}/api/graphics-api.js`).then((r) => r.text())
+      )
+        .match(/(export { [^}]+ })/)[0]
+        .replace(`export`, `import`);
+      IMPORT_GLOBALS_FROM_GRAPHICS_API = `${importStatement} from "${MODULE_PATH}/api/graphics-api.js"`;
+    }
+
     let src = false;
     let codeElement = this.querySelector(`program-code`);
 
@@ -207,7 +223,7 @@ class GraphicsElement extends CustomElement {
        * Program source: ${src}
        * Data attributes: ${JSON.stringify(this.dataset)}
        */
-      import { GraphicsAPI, Bezier, BSpline, Vector, Matrix, Shape } from "${MODULE_PATH}/api/graphics-api.js";
+      ${IMPORT_GLOBALS_FROM_GRAPHICS_API};
 
       ${globalCode}