Merge pull request #1538 from DanielXMoore/comptime-playground

Playground `comptime` restarts playground worker and resets toggle after editing

civet.dev/.vitepress/components/Playground.vue

@@ -26,7 +26,7 @@ const textareaEl = ref<HTMLTextAreaElement>();
 
 // Compile on input
 onMounted(fixTextareaSize);
-watch(userCode, compile);
+watch(userCode, codeChanged);
 
 // Clear
 watch(
@@ -55,14 +55,17 @@ const comptime = ref(false);
 watch(comptime, compile);
 const hasComptime = ref(false);
 
+async function codeChanged() {
+  if (showComptime && comptime.value) {
+    comptime.value = false; // this triggers compile()
+  } else {
+    await compile();
+  }
+}
+
 async function compile() {
   if (showComptime) {
     hasComptime.value = /\bcomptime\b/.test(userCode.value);
-    if (comptime.value && !hasComptime.value) {
-      // If we remove comptime code, reset the checkbox to off
-      // to avoid accidental comptime in the future
-      comptime.value = userCode.value.includes('comptime');
-    }
   }
 
   const snippet = await compileCivetToHtml({

civet.dev/.vitepress/utils/compileCivetToHtml.ts

@@ -1,15 +1,35 @@
-let playgroundWorker: Worker = {} as Worker;
+let playgroundWorker: Worker;
+
+interface WorkerResult {
+  inputHtml: string;
+  outputHtml?: string;
+  error?: string;
+  jsCode?: string;
+}
+
+const msgMap: Record<string, {
+  resolve: (r: WorkerResult) => void
+  restart: boolean
+}> = {};
 
 // @ts-ignore
 if (!import.meta.env.SSR) {
-  playgroundWorker = new Worker('/playground.worker.js');
-}
+  function startWorker() {
+    playgroundWorker = new Worker('/playground.worker.js')
+
+    playgroundWorker.onmessage = ({ data }) => {
+      const { resolve, restart } = msgMap[data.uid]
+      resolve(data)
+      delete msgMap[data.uid]
+      if (restart) {
+        playgroundWorker.terminate()
+        startWorker()
+      }
+    };
+  }
 
-const msgMap: Record<string, any> = {};
-playgroundWorker.onmessage = ({ data }) => {
-  msgMap[data.uid].resolve(data);
-  msgMap[data.uid] = null;
-};
+  startWorker()
+}
 
 let uid = 0;
 
@@ -18,15 +38,14 @@ export function compileCivetToHtml({
   prettierOutput = true,
   jsOutput = false,
   parseOptions = {},
-}): Promise<{
-  inputHtml: string;
-  outputHtml?: string;
-  error?: string;
-  jsCode?: string;
-}> {
+}): Promise<WorkerResult> {
   uid++;
   playgroundWorker.postMessage({ uid, code, prettierOutput, jsOutput, parseOptions });
   return new Promise((resolve) => {
-    msgMap[uid] = { resolve };
+    msgMap[uid] = {
+      resolve,
+      // Restart the worker whenever we run it with comptime: true
+      restart: Boolean((parseOptions as any).comptime),
+    };
   });
 }