perf(site): lazy loads export URI construction

- removes construction of these URI's from the regular "render" function (which should make it a bit more snappy)
- lazy loads the conversion code (as it's only necessary when the user opens the context meny)

Author: sverweij

Makefile

@@ -70,9 +70,9 @@ docs/interpreter/smcat-online-interpreter.js: $(ONLINE_INTERPRETER_SOURCES)
 		--minify \
 		--sourcemap \
 		--legal-comments=external \
+		--outdir=docs/interpreter/ \
 		--drop:debugger \
-		--drop:console \
-		--outdir=docs/interpreter/
+		--drop:console
 
 docs/grammar.html: src/parse/smcat/smcat-parser.peggy
 	$(GRAMMKIT) --output-format html --output $@ $<

docs/index.html

@@ -62,7 +62,7 @@
   <meta property="og:image:type" content="image/png" />
   <link rel="canonical" href="https://state-machine-cat.js.org">
   <script nonce="known-inline-script">let LOG = false;</script>
-  <script src="interpreter/smcat-online-interpreter.js" type="module" defer integrity="sha512-XjrKKONx+efGqsQQdnrpnNMJSMHa3CfZdJxfWMxcymB9axyHYGWHf+cjkACB7o3MtjS8smZyFDRey1PGccShFw=="></script>
+  <script src="interpreter/smcat-online-interpreter.js" type="module" defer integrity="sha512-9uVqUABZX39lSTVoklrl+ihqooSXO2OevhAUMyTpm7+50rwk+r3TKo1ROi7APG78pECbZvoLbfRwyBNkP1vcwg=="></script>
   <script defer src="./vendor/material.min.js" integrity="sha512-9p3qCAKlef9K+szKNCvO5wULH5EF1+RVMEYUVl9mTeWBZX4cO4w4yUi5k2g/40R7VU/IZI99b8qZjJEZKyUTAQ==" async></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="purple">

docs/interpreter/smcat-online-interpreter.js

@@ -1,6 +1,6 @@
 const MAX_SIGNED_SHORT = 32767;
 
-export const toRasterURI = (pSVG, pCallback) => {
+export function toRasterURI(pSVG, pCallback) {
   const lImg = document.createElement("img");
 
   lImg.src =
@@ -30,3 +30,12 @@ export const toRasterURI = (pSVG, pCallback) => {
     }
   });
 };
+
+export function toVectorURI(pSVGSource) {
+  return (
+    "data:image/svg+xml;charset=utf-8," +
+    encodeURIComponent(
+      '<!DOCTYPE svg [<!ENTITY nbsp "&#160;">]>'.concat(pSVGSource),
+    )
+  );
+}

docs/interpreter/smcat-online-interpreter.js.map

@@ -1,7 +1,8 @@
 import { version, render as renderSmCat } from "../src/index.mjs";
-import { toRasterURI } from "./sitesrc/to-raster-uri";
+// import { toRasterURI } from "./sitesrc/to-raster-uri";
 import { themeAttributeMap } from "./sitesrc/theme-attribute-map";
 
+let gSVGToURI = null;
 const LOCALSTORAGE_KEY = `state-machine-cat-${version.split(".")[0]}`;
 const DEFAULT_INPUTSCRIPT = `initial,
 "media player off",
@@ -58,15 +59,6 @@ function getState(pKey, pDefault) {
   return lRetval;
 }
 
-function toVectorURI(pSVGSource) {
-  return (
-    "data:image/svg+xml;charset=utf-8," +
-    encodeURIComponent(
-      '<!DOCTYPE svg [<!ENTITY nbsp "&#160;">]>'.concat(pSVGSource),
-    )
-  );
-}
-
 function updateViewModel(pTarget) {
   return async (pEvent) => {
     gModel[pTarget || pEvent.target.id] =
@@ -101,19 +93,6 @@ async function showModel(pModel) {
   } else {
     document.getElementById("render").style = "";
   }
-
-  if (outputIsSaveable()) {
-    const lSVGs = window.output.getElementsByTagName("svg");
-    const lUniqueIshPostfix = new Date().toISOString();
-    document.getElementById("save-svg").href = toVectorURI(lSVGs[0].outerHTML);
-    document.getElementById("save-svg").download =
-      `state-machine-${lUniqueIshPostfix}.svg`;
-    toRasterURI(lSVGs[0].outerHTML, (pRasterURI) => {
-      document.getElementById("save-png").href = pRasterURI;
-      document.getElementById("save-png").download =
-        `state-machine-${lUniqueIshPostfix}.png`;
-    });
-  }
 }
 
 function getAttrFromQueryParams(pQueryParams) {
@@ -225,7 +204,23 @@ function setTextAreaToWindowHeight() {
   );
 }
 
-function showContextMenu(pX, pY) {
+async function showContextMenu(pX, pY) {
+  const lSVGs = window.output.getElementsByTagName("svg");
+  const lUniqueIshPostfix = new Date().toISOString();
+
+  gSVGToURI ??= await import("./sitesrc/svg-to-uri.js");
+
+  document.getElementById("save-svg").href = gSVGToURI.toVectorURI(
+    lSVGs[0].outerHTML,
+  );
+  document.getElementById("save-svg").download =
+    `state-machine-${lUniqueIshPostfix}.svg`;
+  gSVGToURI.toRasterURI(lSVGs[0].outerHTML, (pRasterURI) => {
+    document.getElementById("save-png").href = pRasterURI;
+    document.getElementById("save-png").download =
+      `state-machine-${lUniqueIshPostfix}.png`;
+  });
+
   window.contextmenu.style = `display: block; position: absolute; z-index: 2; left: ${pX}px; top: ${
     pY - 70
   }px`;
@@ -300,11 +295,11 @@ window.autoRender.addEventListener("click", await updateViewModel(), false);
 window.desugar.addEventListener("click", await updateViewModel(), false);
 window.render.addEventListener("click", async () => await render(), false);
 window.addEventListener("resize", setTextAreaToWindowHeight);
-window.output.addEventListener("contextmenu", (pEvent) => {
+window.output.addEventListener("contextmenu", async (pEvent) => {
   if (outputIsSaveable()) {
     pEvent.preventDefault();
 
-    showContextMenu(pEvent.clientX, pEvent.clientY);
+    await showContextMenu(pEvent.clientX, pEvent.clientY);
   }
 });