fix: playgrounds work in build output

Author: justin-schroeder

docs/nuxt.config.ts

@@ -24,4 +24,9 @@ export default defineNuxtConfig({
   },
   css: ["~/assets/css/main.css"],
   devtools: { enabled: false },
+  vite: {
+    worker: {
+      format: "es",
+    },
+  },
 })

docs/src/__tests__/processPlaygroundCode.spec.ts

@@ -102,7 +102,7 @@ for (let i; i<5; i++) {
 
   it("wrap a console.log", () => {
     expect(processPlaygroundCode("const x = 123\nconsole.log(x)")).toBe(
-      `(async () => { try {const x = 123\nlogOut(1, console.log(x)) } catch (e) { logError(e) } })()`
+      `(async () => { try {const x = 123\nlogOut(1, consoleOut('log',x)) } catch (e) { logError(e) } })()`
     )
   })
 })

docs/src/playground.worker.ts

@@ -1,3 +1,4 @@
+const noop = Symbol()
 async function loadTempo() {
   return await import("@formkit/tempo")
 }
@@ -11,6 +12,27 @@ function logError(error: Error) {
   self.postMessage({ error: error.message })
 }
 
-self.onmessage = function (event) {
-  eval(event.data)
+function consoleOut(
+  type: "log" | "error" | "warn" | "info" | symbol,
+  ...args: unknown[]
+) {
+  if (typeof type !== "string") return
+  console[type](...args)
+  return args.join(", ")
 }
+
+class Playground {
+  init() {
+    self.onmessage = async (event) => {
+      eval(event.data)
+    }
+  }
+  dummy() {
+    loadTempo()
+    logOut(0, "")
+    logError(new Error(""))
+    consoleOut(noop)
+  }
+}
+
+new Playground().init()

docs/src/processPlaygroundCode.ts

@@ -37,8 +37,8 @@ export function processPlaygroundCode(rawSource: string): string {
       return `const ${p1.trim()} = await loadTempo()`
     }
   )
-
-  code = wrapFunctions(code, [...fns, "console.log"], "logOut")
+  code = code.replace(/console\.(log|error|warn|info)\(/, "consoleOut('$1',")
+  code = wrapFunctions(code, [...fns, "consoleOut"], "logOut")
 
   // Replace any api statements with a wrapped log statement with the line
   // number explicitly added in.