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

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' })

pnpm-lock.yaml

@@ -333,8 +333,8 @@ importers:
   packages/sfc-playground:
     dependencies:
       '@vue/repl':
-        specifier: ^1.5.0
-        version: 1.5.0(vue@packages+vue)
+        specifier: ^2.1.3
+        version: 2.1.3
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -1303,12 +1303,8 @@ packages:
     engines: {node: '>= 0.12.0'}
     dev: true
 
-  /@vue/repl@1.5.0(vue@packages+vue):
-    resolution: {integrity: sha512-qFqKtvA2FM9viYXzbWrpGrL8mDGswsqDsEjfaibr/YOqeza7i49VmO0AKPrOdQDOS2qmq9uV+G6OPX1rGhUSIQ==}
-    peerDependencies:
-      vue: ^3.2.13
-    dependencies:
-      vue: link:packages/vue
+  /@vue/repl@2.1.3:
+    resolution: {integrity: sha512-W6BiDOrDH3dsWYs5StVRdl1exXjVgXZYuKu1uG2FJdm3O7+yWWFPYXLdNneB9eOCaF1wbfQVaj4ZP46N0nPSpw==}
     dev: false
 
   /@zeit/schemas@2.6.0:
@@ -3286,7 +3282,7 @@ packages:
   /is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
     dependencies:
-      '@types/estree': 1.0.0
+      '@types/estree': 0.0.48
     dev: true
 
   /is-regex@1.1.4: