From: Evan You Date: Wed, 25 May 2022 04:50:34 +0000 (+0800) Subject: workflow: support ssr repros in sfc playground X-Git-Tag: v3.2.37~11 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ec2856c2baa297bd0cc4f257ab3e3bd846799b39;p=thirdparty%2Fvuejs%2Fcore.git workflow: support ssr repros in sfc playground --- diff --git a/package.json b/package.json index 00887995a7..e91e7d46a8 100644 --- a/package.json +++ b/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", diff --git a/packages/sfc-playground/package.json b/packages/sfc-playground/package.json index afe5a79aa1..fa6a16ba2d 100644 --- a/packages/sfc-playground/package.json +++ b/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" } diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue index 95a1d9552d..2e123531b4 100644 --- a/packages/sfc-playground/src/App.vue +++ b/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()) +}