feat: support compile windicss as style

README.md

@@ -16,16 +16,19 @@
 * 🧪 Transpiled SFC File to ES Modules.
 * 🔌 Support Externals CDN, like [unpkg](https://unpkg.com/)、[jsdelivr](https://www.jsdelivr.com/) etc.
 * 🧩 Load [Import Maps](https://github.com/WICG/import-maps) as ES Modules.
+* 💨 Compile `windicss` built in.
 
 ### ✏️ Editor Panel
 
-* 🎨 Themeable Editor based on [codemirror 6](https://codemirror.net/6/)
-* 🧑‍💻 Developer Friendly, built-in syntax highlighting, REPL Sandbox with Split Panes
+* 🎨 Themeable Editor based on [Monaco Editor](https://github.com/microsoft/monaco-editor)
+* 🧑‍💻 Developer Friendly, built-in syntax highlighting
+* ↕️ REPL Sandbox with Split Panes, Split `<template>` & `<script>` tag
 
 ### 👓 Preview Panel
 
 * ⚡️ Runtime Compile SFC File
 * 🔍 Fullscreen View
+* 🌛 Darkmode
 
 ## 💡 Inspiration
 

app/App.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="wrapper">
     <!-- [ESM] default case -->
-    <!-- <sfc-sandbox v-bind="defaultAttrs" /> -->
+    <sfc-sandbox v-bind="defaultAttrs" />
 
     <!-- [CDN] echarts case -->
-    <sfc-sandbox v-bind="echartsAttrs" />
+    <!-- <sfc-sandbox v-bind="echartsAttrs" /> -->
 
     <!-- [ESM] Vue3 component case -->
     <!-- <sfc-sandbox v-bind="digitAnimationAttrs" /> -->

app/constants/default.demo.js

@@ -1,8 +1,16 @@
 export const SFC_CODE_ESM = `<template>
-  <h1>{{ msg }}</h1>
+  <h1 class="text-5xl text-green-500">{{ msg }}</h1>
 </template>
 
-<script setup>
-const msg = 'Hello World!'
+<script>
+export default {
+  setup () {
+    const msg = 'Hello World!'
+
+    return {
+      msg
+    }
+  }
+}
 </script>
 `

app/constants/echarts.demo.js

@@ -1,5 +1,8 @@
 export const SFC_CODE_CDN = `<template>
-  <div id="demo" ref="container"></div>
+<div
+  ref="container"
+  style="width: auto;height: 400px;"
+/>
 </template>
 
 <script>

app/shims-vue.d.ts

@@ -6,3 +6,8 @@ declare module '*.vue' {
 }
 
 declare module '*.html'
+
+declare module '*.types' {
+  const content: any;
+  export default content;
+}

package.json

@@ -1,41 +1,30 @@
 {
   "name": "vue-sfc-sandbox",
-  "description": "Vue SFC Sandbox built on top of `@vue/compiler-sfc`, Sandbox as a Vue 3 component.",
   "version": "0.1.4",
+  "description": "Vue SFC Sandbox built on top of `@vue/compiler-sfc`, Sandbox as a Vue 3 component.",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build:lib": "vue-cli-service build --lib",
     "lint": "vue-cli-service lint",
+    "build:lib": "vue-cli-service build --lib",
     "bundle": "rollup -c rollup.config.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
   },
   "main": "lib/vue-sfc-sandbox.cjs.js",
   "module": "lib/vue-sfc-sandbox.esm.js",
   "unpkg": "lib/vue-sfc-sandbox.umd.min.js",
-  "jsdelivr": "lib/vue-sfc-sandbox.umd.min.js",
-  "types": "lib/vue-sfc-sandbox.d.ts",
-  "exports": {
-    "require": "./lib/vue-sfc-sandbox.cjs.js",
-    "import": "./lib/vue-sfc-sandbox.esm.js",
-    "default": "./lib/vue-sfc-sandbox.esm.js"
-  },
   "files": [
     "lib",
     "vetur",
     "README.md"
   ],
-  "vetur": {
-    "tags": "vetur/tags.json",
-    "attributes": "vetur/attributes.json"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/xiaoluoboding/vue-sfc-sandbox.git"
+  "exports": {
+    "require": "./lib/vue-sfc-sandbox.cjs.js",
+    "import": "./lib/vue-sfc-sandbox.esm.js",
+    "default": "./lib/vue-sfc-sandbox.esm.js"
   },
   "homepage": "https://github.com/xiaoluoboding/vue-sfc-sandbox",
-  "license": "MIT",
-  "sideEffects": false,
+  "jsdelivr": "lib/vue-sfc-sandbox.umd.min.js",
   "keywords": [
     "vue3",
     "sfc",
@@ -45,17 +34,23 @@
     "sandbox",
     "playground"
   ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xiaoluoboding/vue-sfc-sandbox.git"
+  },
+  "sideEffects": false,
+  "types": "lib/vue-sfc-sandbox.d.ts",
+  "vetur": {
+    "tags": "vetur/tags.json",
+    "attributes": "vetur/attributes.json"
+  },
   "dependencies": {
-    "@codemirror/basic-setup": "^0.18.0",
-    "@codemirror/commands": "^0.18.1",
-    "@codemirror/lang-html": "^0.18.0",
-    "@codemirror/lang-javascript": "^0.18.0",
-    "@codemirror/theme-one-dark": "^0.18.0",
-    "@codemirror/view": "^0.18.10",
     "monaco-editor": "^0.24.0",
     "splitpanes": "^3.0.4",
     "vue": "^3.0.0",
-    "vue-sfc2esm": "^0.1.5"
+    "vue-sfc2esm": "^0.1.5",
+    "windicss": "^3.0.12"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^18.0.0",

packages/components/monaco/editor.ts

@@ -1,26 +1,29 @@
-import { getCurrentInstance, onMounted, watch } from 'vue'
 import * as monaco from 'monaco-editor'
-import { store } from 'vue-sfc2esm'
 /* __imports__ */
+import vueTypes from './vue-runtime.types'
 
-import vueTypes from '@vue/runtime-core/dist/runtime-core.d.ts'
-
-const setup = async () => {
+const setup = () => {
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
     noUnusedLocals: false,
     noUnusedParameters: false,
     allowUnreachableCode: true,
     allowUnusedLabels: true,
     strict: false,
-    allowJs: true,
+    allowJs: true
   })
 
-  const registered: string[] = ['vue']
+  monaco.languages.typescript.javascriptDefaults.addExtraLib(`
+      declare module 'vue' { ${vueTypes} }
+    `, 'js:vue'
+  )
 
   monaco.languages.typescript.typescriptDefaults.addExtraLib(`
-    declare module 'vue' { ${vueTypes} }
-  `, 'ts:vue')
+      declare module 'vue' { ${vueTypes} }
+    `, 'ts:vue'
+  )
+
+  // const registered: string[] = ['vue']
 
   // watch(() => store.packages, () => {
   //   store.packages.forEach((pack) => {
@@ -37,51 +40,7 @@ const setup = async () => {
   //   })
   // }, { immediate: true })
 
-  await Promise.all([
-    // load workers
-    (async() => {
-      const [
-        { default: EditorWorker },
-        { default: JsonWorker },
-        { default: CssWorker },
-        { default: HtmlWorker },
-        { default: TsWorker },
-      ] = await Promise.all([
-        import('monaco-editor/esm/vs/editor/editor.worker'),
-        import('monaco-editor/esm/vs/language/json/json.worker'),
-        import('monaco-editor/esm/vs/language/css/css.worker'),
-        import('monaco-editor/esm/vs/language/html/html.worker'),
-        import('monaco-editor/esm/vs/language/typescript/ts.worker'),
-      ])
-
-      // @ts-expect-error
-      window.MonacoEnvironment = {
-        getWorker(_: any, label: string) {
-          if (label === 'json')
-            return new JsonWorker()
-          if (label === 'css' || label === 'scss' || label === 'less')
-            return new CssWorker()
-          if (label === 'html' || label === 'handlebars' || label === 'razor')
-            return new HtmlWorker()
-          if (label === 'typescript' || label === 'javascript')
-            return new TsWorker()
-          return new EditorWorker()
-        },
-      }
-    })(),
-  ])
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const injection_arg = monaco
-
-  /* __async_injections__ */
-
-  if (getCurrentInstance())
-    await new Promise<void>(resolve => onMounted(resolve))
-
   return { monaco }
 }
 
 export default setup
-
-setup()

packages/components/monaco/index.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, toRef, inject, watch, Ref } from 'vue'
-import * as monaco from 'monaco-editor'
+import setupMonaco from './editor'
 
 import { IS_DARKMODE } from '../../sandbox/types'
 
@@ -24,7 +24,8 @@ export default defineComponent({
 
     const isDarkmode = inject(IS_DARKMODE) as Ref<boolean>
 
-    const init = () => {
+    const init = async () => {
+      const { monaco } = await setupMonaco()
       const editorInstance = monaco.editor.create(
         editorRef.value,
         {
@@ -47,7 +48,8 @@ export default defineComponent({
         () => isDarkmode.value,
         (val) => {
           monaco.editor.setTheme(val ? 'vs-dark' : 'vs-light')
-        }
+        },
+        { immediate: true }
       )
 
       editorInstance.onDidChangeModelContent(() => {