workflow(playground): prod/dev toggle should apply to runtime behavio…

…r as well

Previously, the prod/dev toggle in the SFC playground only affects the
SFC compiation behavior, but not the actual runtime. This can make it
confusing when users are trying to reproduce prod/dev behavior
inconsistency in the runtime code instead of the compiler.

package.json

@@ -29,7 +29,7 @@
     "dev-sfc": "run-s dev-sfc-prepare dev-sfc-run",
     "dev-sfc-prepare": "node scripts/pre-dev-sfc.js || npm run build-all-cjs",
     "dev-sfc-serve": "vite packages/sfc-playground --host",
-    "dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve",
+    "dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev vue -ipf esm-browser-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve",
     "serve": "serve",
     "open": "open http://localhost:3000/packages/template-explorer/local.html",
     "build-sfc-playground": "run-s build-all-cjs build-runtime-esm build-ssr-esm build-sfc-playground-self",

packages/sfc-playground/package.json

@@ -13,7 +13,7 @@
     "vite": "^4.5.0"
   },
   "dependencies": {
-    "@vue/repl": "^2.6.3",
+    "@vue/repl": "^2.7.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "vue": "workspace:*"

packages/sfc-playground/src/App.vue

@@ -25,9 +25,13 @@ if (hash.startsWith('__SSR__')) {
 
 const store = new ReplStore({
   serializedState: hash,
+  productionMode: !useDevMode.value,
   defaultVueRuntimeURL: import.meta.env.PROD
     ? `${location.origin}/vue.runtime.esm-browser.js`
     : `${location.origin}/src/vue-dev-proxy`,
+  defaultVueRuntimeProdURL: import.meta.env.PROD
+    ? `${location.origin}/vue.runtime.esm-browser.prod.js`
+    : `${location.origin}/src/vue-dev-proxy-prod`,
   defaultVueServerRendererURL: import.meta.env.PROD
     ? `${location.origin}/server-renderer.esm-browser.js`
     : `${location.origin}/src/vue-server-renderer-dev-proxy`
@@ -65,7 +69,7 @@ function toggleDevMode() {
     sfcOptions.template!.isProd =
     sfcOptions.style!.isProd =
       !dev
-  store.setFiles(store.getFiles())
+  store.toggleProduction()
 }
 
 function toggleSSR() {

packages/sfc-playground/src/vue-dev-proxy-prod.ts

@@ -0,0 +1,3 @@
+// serve vue to the iframe sandbox during dev.
+// @ts-ignore
+export * from 'vue/dist/vue.runtime.esm-browser.prod.js'

packages/sfc-playground/vite.config.ts

@@ -49,6 +49,7 @@ function copyVuePlugin(): Plugin {
       }
 
       copyFile(`../vue/dist/vue.runtime.esm-browser.js`)
+      copyFile(`../vue/dist/vue.runtime.esm-browser.prod.js`)
       copyFile(`../server-renderer/dist/server-renderer.esm-browser.js`)
     }
   }

scripts/dev.js

@@ -16,6 +16,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 const args = minimist(process.argv.slice(2))
 const target = args._[0] || 'vue'
 const format = args.f || 'global'
+const prod = args.p || false
 const inlineDeps = args.i || args.inline
 const pkg = require(`../packages/${target}/package.json`)
 
@@ -34,7 +35,7 @@ const outfile = resolve(
   __dirname,
   `../packages/${target}/dist/${
     target === 'vue-compat' ? `vue` : target
-  }.${postfix}.js`
+  }.${postfix}.${prod ? `prod.` : ``}js`
 )
 const relativeOutfile = relative(process.cwd(), outfile)
 
@@ -109,7 +110,7 @@ esbuild
     define: {
       __COMMIT__: `"dev"`,
       __VERSION__: `"${pkg.version}"`,
-      __DEV__: `true`,
+      __DEV__: prod ? `false` : `true`,
       __TEST__: `false`,
       __BROWSER__: String(
         format !== 'cjs' && !pkg.buildOptions?.enableNonBrowserBranches