fix: reset sandbox when changing files for safari compat

ref vuejs/docs#1973

Author: yyx990803

src/output/Preview.vue

@@ -49,7 +49,7 @@ watch(
 )
 
 // reset sandbox when version changes
-watch(() => store.state.vueRuntimeURL, createSandbox)
+watch(() => store.state.resetFlip, createSandbox)
 
 onUnmounted(() => {
   proxy.destroy()
@@ -202,11 +202,15 @@ async function updatePreview() {
 
     // compile code to simulated module system
     const modules = compileModulesForPreview(store)
-    console.log(`[@vue/repl] successfully compiled ${modules.length} modules.`)
+    console.log(
+      `[@vue/repl] successfully compiled ${modules.length} module${
+        modules.length > 1 ? `s` : ``
+      }.`
+    )
 
     const codeToEval = [
-      `window.__modules__ = {};window.__css__ = '';` +
-        `if (window.__app__) window.__app__.unmount();` +
+      `window.__modules__ = {}\nwindow.__css__ = ''\n` +
+        `if (window.__app__) window.__app__.unmount()\n` +
         (isSSR ? `` : `document.body.innerHTML = '<div id="app"></div>'`),
       ...modules,
       `document.getElementById('__sfc-styles').innerHTML = window.__css__`

src/store.ts

@@ -48,6 +48,8 @@ export interface StoreState {
   errors: (string | Error)[]
   vueRuntimeURL: string
   vueServerRendererURL: string
+  // used to force reset the sandbox
+  resetFlip: boolean
 }
 
 export interface SFCOptions {
@@ -126,7 +128,8 @@ export class ReplStore implements Store {
       activeFile: files[mainFile],
       errors: [],
       vueRuntimeURL: this.defaultVueRuntimeURL,
-      vueServerRendererURL: this.defaultVueServerRendererURL
+      vueServerRendererURL: this.defaultVueServerRendererURL,
+      resetFlip: true
     })
 
     this.initImportMap()
@@ -191,6 +194,11 @@ export class ReplStore implements Store {
     this.state.files = files
     this.initImportMap()
     this.setActive(mainFile)
+    this.forceSandboxReset()
+  }
+
+  private forceSandboxReset() {
+    this.state.resetFlip = !this.state.resetFlip
   }
 
   private initImportMap() {
@@ -256,6 +264,7 @@ export class ReplStore implements Store {
     imports.vue = runtimeUrl
     imports['vue/server-renderer'] = ssrUrl
     this.setImportMap(importMap)
+    this.forceSandboxReset()
     console.info(`[@vue/repl] Now using Vue version: ${version}`)
   }
 
@@ -269,6 +278,7 @@ export class ReplStore implements Store {
     imports.vue = this.defaultVueRuntimeURL
     imports['vue/server-renderer'] = this.defaultVueServerRendererURL
     this.setImportMap(importMap)
+    this.forceSandboxReset()
     console.info(`[@vue/repl] Now using default Vue version`)
   }
 }