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

close #8051

Author: yyx990803

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.isProd =
-    sfcOptions.template.isProd =
-    sfcOptions.style.isProd =
+  sfcOptions.script!.inlineTemplate =
+    sfcOptions.script!.isProd =
+    sfcOptions.template!.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
   }