workflow: add prod/dev toggle to sfc playground

Author: yyx990803

packages/sfc-playground/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "vue": "3.2.33",
-    "@vue/repl": "^1.0.0",
+    "@vue/repl": "^1.1.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.6.0"
   }

packages/sfc-playground/src/App.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import Header from './Header.vue'
 import { Repl, ReplStore } from '@vue/repl'
-import { watchEffect } from 'vue'
+import { ref, watchEffect } from 'vue'
 
 const setVH = () => {
   document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
 }
 window.addEventListener('resize', setVH)
 setVH()
 
+const hash = location.hash.slice(1)
+const useDevMode = ref(hash.startsWith('__DEV__'))
+
 const store = new ReplStore({
-  serializedState: location.hash.slice(1),
+  serializedState: useDevMode.value ? hash.slice(7) : hash,
   defaultVueRuntimeURL: import.meta.env.PROD
     ? `${location.origin}/vue.runtime.esm-browser.js`
     : `${location.origin}/src/vue-dev-proxy`
@@ -19,16 +22,28 @@ const store = new ReplStore({
 // enable experimental features
 const sfcOptions = {
   script: {
+    inlineTemplate: !useDevMode.value,
     reactivityTransform: true
   }
 }
 
 // persist state
-watchEffect(() => history.replaceState({}, '', store.serialize()))
+watchEffect(() => {
+  const newHash = store
+    .serialize()
+    .replace(/^#/, useDevMode.value ? `#__DEV__` : `#`)
+  history.replaceState({}, '', newHash)
+})
+
+function toggleDevMode() {
+  const dev = (useDevMode.value = !useDevMode.value)
+  sfcOptions.script.inlineTemplate = !dev
+  store.setFiles(store.getFiles())
+}
 </script>
 
 <template>
-  <Header :store="store" />
+  <Header :store="store" :dev="useDevMode" @toggle-dev="toggleDevMode" />
   <Repl
     @keydown.ctrl.s.prevent
     @keydown.meta.s.prevent

packages/sfc-playground/src/Header.vue

@@ -8,7 +8,8 @@ import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
 
 // @ts-ignore
-const { store } = defineProps(['store'])
+const props = defineProps(['store', 'dev'])
+const { store } = props
 
 const currentCommit = __COMMIT__
 const activeVersion = ref(`@${currentCommit}`)
@@ -112,6 +113,14 @@ async function fetchVersions(): Promise<string[]> {
           </li>
         </ul>
       </div>
+      <button
+        title="Toggle development production mode"
+        class="toggle-dev"
+        :class="{ dev }"
+        @click="$emit('toggle-dev')"
+      >
+        {{ dev ? 'DEV' : 'PROD' }}
+      </button>
       <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
         <Sun class="light" />
         <Moon class="dark" />
@@ -126,13 +135,10 @@ async function fetchVersions(): Promise<string[]> {
       >
         <Download />
       </button>
-      <button
-          title="View on GitHub"
-          class="github"
-      >
+      <button title="View on GitHub" class="github">
         <a
-            href="https://github.com/vuejs/core/tree/main/packages/sfc-playground"
-            target="_blank"
+          href="https://github.com/vuejs/core/tree/main/packages/sfc-playground"
+          target="_blank"
         >
           <GitHub />
         </a>
@@ -228,6 +234,16 @@ h1 img {
   top: 22px;
 }
 
+.toggle-dev {
+  color: #f07178;
+  font-size: 12px;
+  line-height: var(--nav-height);
+}
+
+.toggle-dev.dev {
+  color: #c3e88d;
+}
+
 .toggle-dark svg {
   width: 18px;
   height: 18px;