workflow: upgrade repl, use monaco + volar for sfc playground (#8625)

Author: yyx990803

packages/sfc-playground/index.html

@@ -8,14 +8,14 @@
     <title>Vue SFC Playground</title>
     <script>
       // process shim for old versions of @vue/compiler-sfc dependency
-      window.process = { env: {} }
-      const savedPreferDark = localStorage.getItem('vue-sfc-playground-prefer-dark')
-      if (
-        savedPreferDark === 'true' ||
-        (!savedPreferDark && window.matchMedia('(prefers-color-scheme: dark)').matches)
-      ) {
+      // window.process = { env: {} }
+      // const savedPreferDark = localStorage.getItem('vue-sfc-playground-prefer-dark')
+      // if (
+      //   savedPreferDark === 'true' ||
+      //   (!savedPreferDark && window.matchMedia('(prefers-color-scheme: dark)').matches)
+      // ) {
         document.documentElement.classList.add('dark')
-      }
+      // }
     </script>
     <script type="module" src="/src/main.ts"></script>
   </head>

packages/sfc-playground/package.json

@@ -12,7 +12,7 @@
     "vite": "^4.3.0"
   },
   "dependencies": {
-    "@vue/repl": "^1.5.0",
+    "@vue/repl": "^2.1.3",
     "file-saver": "^2.0.5",
     "jszip": "^3.6.0",
     "vue": "workspace:*"

packages/sfc-playground/src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Header from './Header.vue'
 import { Repl, ReplStore, SFCOptions } from '@vue/repl'
+import Monaco from '@vue/repl/monaco-editor'
 import { ref, watchEffect } from 'vue'
 
 const setVH = () => {
@@ -82,6 +83,7 @@ function toggleSSR() {
     @toggle-ssr="toggleSSR"
   />
   <Repl
+    :editor="Monaco"
     @keydown.ctrl.s.prevent
     @keydown.meta.s.prevent
     :ssr="useSSRMode"

packages/sfc-playground/src/Header.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { downloadProject } from './download/download'
 import { ref, onMounted } from 'vue'
-import Sun from './icons/Sun.vue'
-import Moon from './icons/Moon.vue'
+// import Sun from './icons/Sun.vue'
+// import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
@@ -51,14 +51,14 @@ async function copyLink(e: MouseEvent) {
   alert('Sharable URL has been copied to clipboard.')
 }
 
-function toggleDark() {
-  const cls = document.documentElement.classList
-  cls.toggle('dark')
-  localStorage.setItem(
-    'vue-sfc-playground-prefer-dark',
-    String(cls.contains('dark'))
-  )
-}
+// function toggleDark() {
+//   const cls = document.documentElement.classList
+//   cls.toggle('dark')
+//   localStorage.setItem(
+//     'vue-sfc-playground-prefer-dark',
+//     String(cls.contains('dark'))
+//   )
+// }
 
 onMounted(async () => {
   window.addEventListener('click', () => {
@@ -145,10 +145,10 @@ async function fetchVersions(): Promise<string[]> {
       >
         <span>{{ ssr ? 'SSR ON' : 'SSR OFF' }}</span>
       </button>
-      <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
+      <!-- <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
         <Sun class="light" />
         <Moon class="dark" />
-      </button>
+      </button> -->
       <button title="Copy sharable URL" class="share" @click="copyLink">
         <Share />
       </button>

packages/sfc-playground/src/download/download.ts

@@ -27,7 +27,11 @@ export async function downloadProject(store: ReplStore) {
 
   const files = store.getFiles()
   for (const file in files) {
-    src.file(file, files[file])
+    if (file !== 'import-map.json') {
+      src.file(file, files[file])
+    } else {
+      zip.file(file, files[file])
+    }
   }
 
   const blob = await zip.generateAsync({ type: 'blob' })