refactor(sfc-playground): default to dev mode

Author: yyx990803

packages/sfc-playground/src/App.vue

@@ -26,13 +26,17 @@ const setVH = () => {
 window.addEventListener('resize', setVH)
 setVH()
 
-const useDevMode = ref(true)
+const useProdMode = ref(false)
 const useSSRMode = ref(false)
 
 let hash = location.hash.slice(1)
 if (hash.startsWith('__DEV__')) {
   hash = hash.slice(7)
-  useDevMode.value = true
+  useProdMode.value = false
+}
+if (hash.startsWith('__PROD__')) {
+  hash = hash.slice(8)
+  useProdMode.value = true
 }
 if (hash.startsWith('__SSR__')) {
   hash = hash.slice(7)
@@ -41,7 +45,7 @@ if (hash.startsWith('__SSR__')) {
 
 const store = new ReplStore({
   serializedState: hash,
-  productionMode: !useDevMode.value,
+  productionMode: useProdMode.value,
   defaultVueRuntimeURL: import.meta.env.PROD
     ? `${location.origin}/vue.runtime.esm-browser.js`
     : `${location.origin}/src/vue-dev-proxy`,
@@ -56,15 +60,15 @@ const store = new ReplStore({
 // enable experimental features
 const sfcOptions: SFCOptions = {
   script: {
-    inlineTemplate: !useDevMode.value,
-    isProd: !useDevMode.value,
+    inlineTemplate: useProdMode.value,
+    isProd: useProdMode.value,
     propsDestructure: true
   },
   style: {
-    isProd: !useDevMode.value
+    isProd: useProdMode.value
   },
   template: {
-    isProd: !useDevMode.value
+    isProd: useProdMode.value
   }
 }
 
@@ -73,18 +77,19 @@ watchEffect(() => {
   const newHash = store
     .serialize()
     .replace(/^#/, useSSRMode.value ? `#__SSR__` : `#`)
-    .replace(/^#/, useDevMode.value ? `#__DEV__` : `#`)
+    .replace(/^#/, useProdMode.value ? `#__PROD__` : `#`)
   history.replaceState({}, '', newHash)
 })
 
-function toggleDevMode() {
-  const dev = (useDevMode.value = !useDevMode.value)
+function toggleProdMode() {
+  const isProd = (useProdMode.value = !useProdMode.value)
   sfcOptions.script!.inlineTemplate =
     sfcOptions.script!.isProd =
     sfcOptions.template!.isProd =
     sfcOptions.style!.isProd =
-      !dev
+      isProd
   store.toggleProduction()
+  store.setFiles(store.getFiles())
 }
 
 function toggleSSR() {
@@ -109,10 +114,10 @@ onMounted(() => {
 <template>
   <Header
     :store="store"
-    :dev="useDevMode"
+    :prod="useProdMode"
     :ssr="useSSRMode"
     @toggle-theme="toggleTheme"
-    @toggle-dev="toggleDevMode"
+    @toggle-prod="toggleProdMode"
     @toggle-ssr="toggleSSR"
     @reload-page="reloadPage"
   />

packages/sfc-playground/src/Header.vue

@@ -12,13 +12,13 @@ import VersionSelect from './VersionSelect.vue'
 
 const props = defineProps<{
   store: ReplStore
-  dev: boolean
+  prod: boolean
   ssr: boolean
 }>()
 const emit = defineEmits([
   'toggle-theme',
   'toggle-ssr',
-  'toggle-dev',
+  'toggle-prod',
   'reload-page'
 ])
 
@@ -90,11 +90,11 @@ function toggleDark() {
       </VersionSelect>
       <button
         title="Toggle development production mode"
-        class="toggle-dev"
-        :class="{ dev }"
-        @click="$emit('toggle-dev')"
+        class="toggle-prod"
+        :class="{ prod }"
+        @click="$emit('toggle-prod')"
       >
-        <span>{{ dev ? 'DEV' : 'PROD' }}</span>
+        <span>{{ prod ? 'PROD' : 'DEV' }}</span>
       </button>
       <button
         title="Toggle server rendering mode"
@@ -195,20 +195,20 @@ h1 img {
   display: flex;
 }
 
-.toggle-dev span,
+.toggle-prod span,
 .toggle-ssr span {
   font-size: 12px;
   border-radius: 4px;
   padding: 4px 6px;
 }
 
-.toggle-dev span {
-  background: var(--purple);
+.toggle-prod span {
+  background: var(--green);
   color: #fff;
 }
 
-.toggle-dev.dev span {
-  background: var(--green);
+.toggle-prod.prod span {
+  background: var(--purple);
 }
 
 .toggle-ssr span {