chore: improve sfc-playground typing + bump repl for 3.3 external type resolve support

close #8051

packages/global.d.ts

@@ -33,13 +33,6 @@ declare module 'file-saver' {
   export function saveAs(blob: any, name: any): void
 }
 
-declare module '@vue/repl' {
-  import { ComponentOptions } from '@vue/runtime-core'
-  const Repl: ComponentOptions
-  const ReplStore: any
-  export { Repl, ReplStore }
-}
-
 declare interface String {
   /**
    * @deprecated Please use String.prototype.slice instead of String.prototype.substring in the repository.

packages/sfc-playground/package.json

@@ -12,7 +12,7 @@
     "vite": "^4.2.0"
   },
   "dependencies": {
-    "@vue/repl": "^1.3.5",
+    "@vue/repl": "^1.4.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.6.0",
     "vue": "workspace:*"

packages/sfc-playground/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Header from './Header.vue'
-import { Repl, ReplStore } from '@vue/repl'
+import { Repl, ReplStore, SFCOptions } from '@vue/repl'
 import { ref, watchEffect } from 'vue'
 
 const setVH = () => {
@@ -33,7 +33,7 @@ const store = new ReplStore({
 })
 
 // enable experimental features
-const sfcOptions = {
+const sfcOptions: SFCOptions = {
   script: {
     inlineTemplate: !useDevMode.value,
     isProd: !useDevMode.value,
@@ -59,10 +59,10 @@ watchEffect(() => {
 
 function toggleDevMode() {
   const dev = (useDevMode.value = !useDevMode.value)
-  sfcOptions.script.inlineTemplate =
+  sfcOptions.script!.inlineTemplate =
-    sfcOptions.script.isProd =
+    sfcOptions.script!.isProd =
-    sfcOptions.template.isProd =
+    sfcOptions.template!.isProd =
-    sfcOptions.style.isProd =
+    sfcOptions.style!.isProd =
       !dev
   store.setFiles(store.getFiles())
 }

packages/sfc-playground/src/Header.vue

@@ -6,9 +6,14 @@ import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
+import { ReplStore } from '@vue/repl'
+
+const props = defineProps<{
+  store: ReplStore
+  dev: boolean
+  ssr: boolean
+}>()
 
-// @ts-ignore
-const props = defineProps(['store', 'dev', 'ssr'])
 const { store } = props
 
 const currentCommit = __COMMIT__

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

@@ -5,8 +5,9 @@ import main from './template/main.js?raw'
 import pkg from './template/package.json?raw'
 import config from './template/vite.config.js?raw'
 import readme from './template/README.md?raw'
+import { ReplStore } from '@vue/repl'
 
-export async function downloadProject(store: any) {
+export async function downloadProject(store: ReplStore) {
   if (!confirm('Download project files?')) {
     return
   }

pnpm-lock.yaml

@@ -242,13 +242,13 @@ importers:
   packages/sfc-playground:
     specifiers:
       '@vitejs/plugin-vue': ^4.1.0
-      '@vue/repl': ^1.3.5
+      '@vue/repl': ^1.4.0
       file-saver: ^2.0.5
       jszip: ^3.6.0
       vite: ^4.2.0
       vue: workspace:*
     dependencies:
-      '@vue/repl': 1.3.5_vue@packages+vue
+      '@vue/repl': 1.4.0_vue@packages+vue
       file-saver: 2.0.5
       jszip: 3.10.1
       vue: link:../vue
@@ -1193,8 +1193,8 @@ packages:
     engines: {node: '>= 0.12.0'}
     dev: true
 
-  /@vue/repl/1.3.5_vue@packages+vue:
+  /@vue/repl/1.4.0_vue@packages+vue:
-    resolution: {integrity: sha512-O2Z8JKE15v14pE/wgw93Aw4+L0HjhsLc68ivuj1N09WXS9oyU33NTlh7PQhb75P43fadnypBDb4djD3pUWpjBQ==}
+    resolution: {integrity: sha512-W/OdABvbP5WCVJ6OoGG+/ULicKTpMFhhvpN2EjCsdV8bvEBHqLSCvJmDRiMkuLOm8lYw+MSOgyTKrxnhe5TH5g==}
     peerDependencies:
       vue: ^3.2.13
     dependencies: