workflow(playground): prod/dev toggle should apply to runtime behavior 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.

diff --git a/package.json b/package.json
index 2d8633b76b24d3ee3aa423731e738664dd3fa945..a75ce9ecb14df69087753dbc903f5bf33c071658 100644 (file)
--- a/package.json
+++ b/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",

diff --git a/packages/sfc-playground/package.json b/packages/sfc-playground/package.json
index b685a549ee0d2cecefe66ec4b59fc542488f562f..039b9c2ed90c723e78134b64c3a1c5c8f3bc4a91 100644 (file)
--- a/packages/sfc-playground/package.json
+++ b/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:*"

diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index 744cfd4d9c0749fc3c0a770da7230edbcb30504e..d3b1dfa5965164f700bb8508ab5ff41da13f40b2 100644 (file)
--- a/packages/sfc-playground/src/App.vue
+++ b/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() {

diff --git a/packages/sfc-playground/src/vue-dev-proxy-prod.ts b/packages/sfc-playground/src/vue-dev-proxy-prod.ts
new file mode 100644 (file)
index 0000000..ad796ca
--- /dev/null
+++ b/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'

diff --git a/packages/sfc-playground/vite.config.ts b/packages/sfc-playground/vite.config.ts
index 0a5bfa6af0a1e8e36462d7d5d1db31ce82e5c8e4..d4546da99c0829ee3c47958463acad160ffa11cc 100644 (file)
--- a/packages/sfc-playground/vite.config.ts
+++ b/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`)
     }
   }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cb5f70e2cc7803654871e79627bee1f298c6caad..724b68d2f355da05c42bfd4cbd846ea9832fdc18 100644 (file)
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -354,8 +354,8 @@ importers:
   packages/sfc-playground:
     dependencies:
       '@vue/repl':
-        specifier: ^2.6.3
-        version: 2.6.3
+        specifier: ^2.7.0
+        version: 2.7.0
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -1669,8 +1669,8 @@ packages:
     engines: {node: '>= 0.12.0'}
     dev: true
 
-  /@vue/repl@2.6.3:
-    resolution: {integrity: sha512-iUlgIMJtZ3+HUqkZhYw8WH0MTfElCEVu5Inr/LyqnpkoSDkZJk8nMFR3AV+xrDC6+HDwiRYnnTmDux84GJUP7A==}
+  /@vue/repl@2.7.0:
+    resolution: {integrity: sha512-zzyb+tVvzmOePv8Gp4sefP/7CKidx4WiJDfKPP698b9bN5jSFtmSOg4nvPoJEE1ICKeAEgdRKVneYJ8Mp7C/WA==}
     dev: false
 
   /@zeit/schemas@2.29.0:

diff --git a/scripts/dev.js b/scripts/dev.js
index 8342f5237b72763d792d994eb4ca219aaa4286da..4949cb90234a69d78831c09ca52d85e8a8fa6164 100644 (file)
--- a/scripts/dev.js
+++ b/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