workflow: support ssr repros in sfc playground

Author: yyx990803

package.json

@@ -20,12 +20,12 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "dev-esm": "node scripts/dev.js -if esm-bundler-runtime",
     "dev-compiler": "run-p \"dev template-explorer\" serve",
-    "dev-sfc": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime \" serve-sfc-playground",
+    "dev-sfc": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev server-renderer -if esm-bundler\" serve-sfc-playground",
     "serve-sfc-playground": "vite packages/sfc-playground --host",
     "serve": "serve",
     "open": "open http://localhost:5000/packages/template-explorer/local.html",
     "preinstall": "node ./scripts/preinstall.js",
-    "prebuild-sfc-playground": "node scripts/build.js compiler reactivity-transform shared -af cjs && node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime && node scripts/build.js compiler-sfc -f esm-browser",
+    "prebuild-sfc-playground": "node scripts/build.js compiler reactivity-transform shared -af cjs && node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime && node scripts/build.js compiler-sfc server-renderer -f esm-browser",
     "build-sfc-playground": "cd packages/sfc-playground && npm run build"
   },
   "types": "test-dts/index.d.ts",

packages/sfc-playground/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "vue": "3.2.36",
-    "@vue/repl": "^1.1.2",
+    "@vue/repl": "^1.2.4",
     "file-saver": "^2.0.5",
     "jszip": "^3.6.0"
   }

packages/sfc-playground/src/App.vue

@@ -9,14 +9,27 @@ const setVH = () => {
 window.addEventListener('resize', setVH)
 setVH()
 
-const hash = location.hash.slice(1)
-const useDevMode = ref(hash.startsWith('__DEV__'))
+const useDevMode = ref(false)
+const useSSRMode = ref(false)
+
+let hash = location.hash.slice(1)
+if (hash.startsWith('__DEV__')) {
+  hash = hash.slice(7)
+  useDevMode.value = true
+}
+if (hash.startsWith('__SSR__')) {
+  hash = hash.slice(7)
+  useSSRMode.value = true
+}
 
 const store = new ReplStore({
-  serializedState: useDevMode.value ? hash.slice(7) : hash,
+  serializedState: hash,
   defaultVueRuntimeURL: import.meta.env.PROD
     ? `${location.origin}/vue.runtime.esm-browser.js`
-    : `${location.origin}/src/vue-dev-proxy`
+    : `${location.origin}/src/vue-dev-proxy`,
+  defaultVueServerRendererURL: import.meta.env.PROD
+    ? `${location.origin}/server-renderer.esm-browser.js`
+    : `${location.origin}/src/vue-server-renderer-dev-proxy`
 })
 
 // enable experimental features
@@ -31,6 +44,7 @@ const sfcOptions = {
 watchEffect(() => {
   const newHash = store
     .serialize()
+    .replace(/^#/, useSSRMode.value ? `#__SSR__` : `#`)
     .replace(/^#/, useDevMode.value ? `#__DEV__` : `#`)
   history.replaceState({}, '', newHash)
 })
@@ -40,13 +54,25 @@ function toggleDevMode() {
   sfcOptions.script.inlineTemplate = !dev
   store.setFiles(store.getFiles())
 }
+
+function toggleSSR() {
+  useSSRMode.value = !useSSRMode.value
+  store.setFiles(store.getFiles())
+}
 </script>
 
 <template>
-  <Header :store="store" :dev="useDevMode" @toggle-dev="toggleDevMode" />
+  <Header
+    :store="store"
+    :dev="useDevMode"
+    :ssr="useSSRMode"
+    @toggle-dev="toggleDevMode"
+    @toggle-ssr="toggleSSR"
+  />
   <Repl
     @keydown.ctrl.s.prevent
     @keydown.meta.s.prevent
+    :ssr="useSSRMode"
     :store="store"
     :showCompileOutput="true"
     :autoResize="true"

packages/sfc-playground/src/Header.vue

@@ -8,7 +8,7 @@ import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
 
 // @ts-ignore
-const props = defineProps(['store', 'dev'])
+const props = defineProps(['store', 'dev', 'ssr'])
 const { store } = props
 
 const currentCommit = __COMMIT__
@@ -122,6 +122,14 @@ async function fetchVersions(): Promise<string[]> {
       >
         <span>{{ dev ? 'DEV' : 'PROD' }}</span>
       </button>
+      <button
+        title="Toggle server rendering mode"
+        class="toggle-ssr"
+        :class="{ enabled: ssr }"
+        @click="$emit('toggle-ssr')"
+      >
+        <span>{{ ssr ? 'SSR ON' : 'SSR OFF' }}</span>
+      </button>
       <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
         <Sun class="light" />
         <Moon class="dark" />
@@ -156,7 +164,7 @@ nav {
   --btn: #666;
   --highlight: #333;
   --green: #3ca877;
-  --red: #f07178;
+  --purple: #904cbc;
 
   color: var(--base);
   height: var(--nav-height);
@@ -235,18 +243,31 @@ h1 img {
   margin-left: 8px;
 }
 
-.toggle-dev span {
+.toggle-dev span,
+.toggle-ssr span {
   font-size: 12px;
-  background: var(--red);
-  color: #fff;
   border-radius: 4px;
   padding: 4px 6px;
 }
 
+.toggle-dev span {
+  background: var(--purple);
+  color: #fff;
+}
+
 .toggle-dev.dev span {
   background: var(--green);
 }
 
+.toggle-ssr span {
+  background-color: #333;
+}
+
+.toggle-ssr.enabled span {
+  color: #fff;
+  background-color: var(--green);
+}
+
 .toggle-dark svg {
   width: 18px;
   height: 18px;

packages/sfc-playground/src/vue-server-renderer-dev-proxy.ts

@@ -0,0 +1,2 @@
+// serve vue/server-renderer to the iframe sandbox during dev.
+export * from 'vue/server-renderer'