chore: code transformer for playground

docs/components/CodeExample.client.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api"
 import "../monaco-config"
+import { processPlaygroundCode } from "~/src/processPlaygroundCode"
 const props = defineProps<{ file: string }>()
 const code = ref("")
 const el = ref<null | HTMLDivElement>(null)
 const value = await import(`../examples/${props.file}.ts?raw`)
 code.value = value.default
+const result = ref()
+const error = ref("")
+
 const stopWatch = watch(el, () => {
   if (!(el.value instanceof HTMLElement)) return
   const container = el.value
@@ -14,6 +18,7 @@ const stopWatch = watch(el, () => {
       top: 16,
       bottom: 16,
     },
+    fontSize: 16,
     scrollbar: {
       vertical: "hidden",
       alwaysConsumeMouseWheel: false,
@@ -44,34 +49,53 @@ const stopWatch = watch(el, () => {
 
   new ResizeObserver(updateSize).observe(el.value)
 
+  let worker: Worker | null = null
+
+  function runInsideWorker(code: string) {
+    if (code === "") return
+    code = processPlaygroundCode(code)
+    if (worker) worker.terminate()
+    result.value = ""
+    error.value = ""
+
+    worker = new Worker(
+      new URL("../src/playground.worker.ts", import.meta.url),
+      {
+        type: "module",
+      }
+    )
+    worker.postMessage(code)
+    worker.onmessage = (e) => {
+      result.value = e.data
+    }
+    worker.onerror = (e) => {
+      result.value = ""
+      error.value = "Your code contains errors."
+    }
+  }
+
   editor.onDidChangeModelContent(() => {
     code.value = editor.getValue()
     updateSize()
     runInsideWorker(code.value)
   })
-  function runInsideWorker(code: string) {
-    const blob = new Blob([`self.postMessage(${code})`], {
-      type: "text/javascript",
-    })
-    const url = URL.createObjectURL(blob)
-    const worker = new Worker(url)
-    worker.onmessage = (e) => {
-      console.log(e.data)
-    }
-  }
   updateSize()
+
+  // Run the initial code
+  runInsideWorker(editor.getValue())
 })
 </script>
 
 <template>
-  <div class="rounded-md bg-slate-100 dark:bg-slate-800">
-    <div class="chrome" ref="el"></div>
+  <div class="rounded-md bg-slate-100 dark:bg-slate-800 flex">
+    <div class="w-1/2" ref="el"></div>
+    <div class="w-1/2 bg-slate-200 font-mono whitespace-pre p-4">
+      <div v-if="result">{{ result }}</div>
+      <div class="bg-red-500 font-mono p-4" v-else-if="error">
+        {{ error }}
+      </div>
+    </div>
   </div>
 </template>
 
-<style scoped>
-.chrome {
-  width: 100%;
-  height: 200px;
-}
-</style>
+<style scoped></style>

docs/components/TheHeader.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="hero">
-    <h1>TempoJS</h1>
+  <header>
+    <img src="~/assets/logo-light.svg" alt="Tempo" />
     <p>The easiest way to work with dates in JavaScript.</p>
-  </div>
+  </header>
 </template>

docs/examples/example1.ts

@@ -1,3 +1,5 @@
 import { format } from "@formkit/tempo"
 
-format(new Date(), "MM/DD/YYYY")
+const x = format(new Date(), "MM/DD/YYYY")
+
+console.log(x)

docs/nuxt.config.ts

@@ -1,21 +1,26 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  modules: ["@nuxtjs/tailwindcss"],
   app: {
     head: {
       htmlAttrs: {
         class: "dark:bg-slate-900 dark:text-white",
       },
     },
   },
+  tailwindcss: {
+    config: {
+      darkMode: "class",
+      theme: {
+        fontFamily: {
+          mono: ["Menlo", "Monaco", "Courier New", "monospace"],
+        },
+      },
+    },
+  },
   experimental: {
     componentIslands: true,
   },
   css: ["~/assets/css/main.css"],
-  postcss: {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  },
   devtools: { enabled: false },
 })

docs/package.json

@@ -6,17 +6,18 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "test": "vitest"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
+    "@nuxtjs/tailwindcss": "^6.11.2",
     "@types/node": "^18.17.0",
-    "autoprefixer": "^10.4.16",
-    "nuxt": "^3.6.5",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5"
+    "nuxt": "^3.10.0",
+    "vitest": "^1.2.2"
   },
   "dependencies": {
+    "@formkit/tempo": "workspace:../",
     "monaco-editor": "^0.40.0"
   }
 }