From 9e68255ef4e104884f5fd57b0bebdd8f0e5b2a79 Mon Sep 17 00:00:00 2001 From: zhouyujie Date: Sun, 19 Sep 2021 18:31:49 +0800 Subject: [PATCH 1/4] fix(plugin-vue): respect __VUE_PROD_DEVTOOLS__ setting --- packages/plugin-vue/src/index.ts | 8 ++++++-- packages/plugin-vue/src/main.ts | 5 +++-- packages/plugin-vue/src/script.ts | 2 +- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts index c1504cc781d17a..931f61115bf0be 100644 --- a/packages/plugin-vue/src/index.ts +++ b/packages/plugin-vue/src/index.ts @@ -82,6 +82,7 @@ export interface ResolvedOptions extends Options { root: string sourceMap: boolean devServer?: ViteDevServer + devToolsEnabled?: boolean } export default function vuePlugin(rawOptions: Options = {}): Plugin { @@ -117,7 +118,8 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin { customElement, refTransform, root: process.cwd(), - sourceMap: true + sourceMap: true, + devToolsEnabled: process.env.NODE_ENV !== 'production' } return { @@ -148,7 +150,9 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin { ...options, root: config.root, sourceMap: config.command === 'build' ? !!config.build.sourcemap : true, - isProduction: config.isProduction + isProduction: config.isProduction, + devToolsEnabled: + !!config.define!.__VUE_PROD_DEVTOOLS__ || !config.isProduction } }, diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts index f8e4b622fc4c6d..aeda5382cf9f92 100644 --- a/packages/plugin-vue/src/main.ts +++ b/packages/plugin-vue/src/main.ts @@ -25,7 +25,7 @@ export async function transformMain( ssr: boolean, asCustomElement: boolean ) { - const { devServer, isProduction } = options + const { devServer, isProduction, devToolsEnabled } = options // prev descriptor is only set and used for hmr const prevDescriptor = getPrevDescriptor(filename) @@ -55,6 +55,7 @@ export async function transformMain( // inlined template cannot be individually hot updated. const useInlineTemplate = !devServer && + !devToolsEnabled && descriptor.scriptSetup && !(descriptor.template && descriptor.template.src) const hasTemplateImport = descriptor.template && !useInlineTemplate @@ -110,7 +111,7 @@ export async function transformMain( `_sfc_main.__scopeId = ${JSON.stringify(`data-v-${descriptor.id}`)}` ) } - if (devServer && !isProduction) { + if (devToolsEnabled || (devServer && !isProduction)) { // expose filename during serve for devtools to pickup output.push(`_sfc_main.__file = ${JSON.stringify(filename)}`) } diff --git a/packages/plugin-vue/src/script.ts b/packages/plugin-vue/src/script.ts index cba63b5c58e7a7..d75322ac676c32 100644 --- a/packages/plugin-vue/src/script.ts +++ b/packages/plugin-vue/src/script.ts @@ -42,7 +42,7 @@ export function resolveScript( ...options.script, id: descriptor.id, isProd: options.isProduction, - inlineTemplate: !options.devServer, + inlineTemplate: !options.devServer && !options.devToolsEnabled, refTransform: options.refTransform !== false, templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr), // @ts-ignore TODO remove ignore when we support this in @vue/compiler-sfc From f2c2715a8ba5456d9c090be816ebe794976cf926 Mon Sep 17 00:00:00 2001 From: zhouyujie Date: Sun, 26 Sep 2021 22:31:21 +0800 Subject: [PATCH 2/4] chore: reset --- packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts | 4 +--- .../example-external-component/ExampleExternalComponent.vue | 2 +- packages/plugin-legacy/index.js | 4 ++-- packages/vite/src/node/preview.ts | 4 +--- packages/vite/src/node/server/index.ts | 4 +--- 5 files changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts b/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts index b92da5fc22bd63..6dc327d479713f 100644 --- a/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts +++ b/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts @@ -34,9 +34,7 @@ test('/about', async () => { test('/external', async () => { await page.goto(url + '/external') - expect(await page.textContent('div')).toMatch( - 'Example external component content' - ) + expect(await page.textContent('div')).toMatch('Example external component content') // should not have hydration mismatch browserLogs.forEach((msg) => { expect(msg).not.toMatch('mismatch') diff --git a/packages/playground/ssr-vue/example-external-component/ExampleExternalComponent.vue b/packages/playground/ssr-vue/example-external-component/ExampleExternalComponent.vue index 55f3cea40e0399..58d45c82b4ab1b 100644 --- a/packages/playground/ssr-vue/example-external-component/ExampleExternalComponent.vue +++ b/packages/playground/ssr-vue/example-external-component/ExampleExternalComponent.vue @@ -1,3 +1,3 @@ + \ No newline at end of file diff --git a/packages/plugin-legacy/index.js b/packages/plugin-legacy/index.js index 60f7f4a227ff03..a0a44499e34822 100644 --- a/packages/plugin-legacy/index.js +++ b/packages/plugin-legacy/index.js @@ -125,7 +125,7 @@ function viteLegacyPlugin(options = {}) { bundle, facadeToModernPolyfillMap, config.build, - options.externalSystemJS + options.externalSystemJS, ) return } @@ -156,7 +156,7 @@ function viteLegacyPlugin(options = {}) { // force using terser for legacy polyfill minification, since esbuild // isn't legacy-safe config.build, - options.externalSystemJS + options.externalSystemJS, ) } } diff --git a/packages/vite/src/node/preview.ts b/packages/vite/src/node/preview.ts index f1c019572c2410..d4061d6b9a7bbd 100644 --- a/packages/vite/src/node/preview.ts +++ b/packages/vite/src/node/preview.ts @@ -72,9 +72,7 @@ export async function preview( if (options.open) { const path = typeof options.open === 'string' ? options.open : base openBrowser( - path.startsWith('http') - ? path - : `${protocol}://${hostname.name}:${serverPort}${path}`, + path.startsWith('http') ? path : `${protocol}://${hostname.name}:${serverPort}${path}`, true, logger ) diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts index 296ccbd79c9a2e..577bca9ab633f0 100644 --- a/packages/vite/src/node/server/index.ts +++ b/packages/vite/src/node/server/index.ts @@ -617,9 +617,7 @@ async function startServer( if (options.open && !isRestart) { const path = typeof options.open === 'string' ? options.open : base openBrowser( - path.startsWith('http') - ? path - : `${protocol}://${hostname.name}:${serverPort}${path}`, + path.startsWith('http') ? path : `${protocol}://${hostname.name}:${serverPort}${path}`, true, server.config.logger ) From c1f5c68e5f0cf4d0508fbfcf31dee6aad90d0e51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=91=A8=E6=AF=93=E6=9D=B0?= Date: Mon, 27 Sep 2021 18:36:32 +0800 Subject: [PATCH 3/4] fix: doesn't expose full file path when production --- packages/plugin-vue/src/main.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts index d7c0948a3a1245..b842ec17ef464b 100644 --- a/packages/plugin-vue/src/main.ts +++ b/packages/plugin-vue/src/main.ts @@ -111,7 +111,10 @@ export async function transformMain( } if (devToolsEnabled || (devServer && !isProduction)) { // expose filename during serve for devtools to pickup - attachedProps.push([`__file`, JSON.stringify(filename)]) + attachedProps.push([ + `__file`, + JSON.stringify(isProduction ? path.basename(filename) : filename) + ]) } // HMR From fd4c146012fd4a476b3fec78797295c4843d8e3c Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 24 Mar 2022 16:34:23 +0800 Subject: [PATCH 4/4] fix: apply review suggestions, always use `inlineTemplate` in production --- packages/plugin-vue/src/main.ts | 1 - packages/plugin-vue/src/script.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts index b842ec17ef464b..fe6b6e56e03502 100644 --- a/packages/plugin-vue/src/main.ts +++ b/packages/plugin-vue/src/main.ts @@ -58,7 +58,6 @@ export async function transformMain( // inlined template cannot be individually hot updated. const useInlineTemplate = !devServer && - !devToolsEnabled && descriptor.scriptSetup && !(descriptor.template && descriptor.template.src) const hasTemplateImport = descriptor.template && !useInlineTemplate diff --git a/packages/plugin-vue/src/script.ts b/packages/plugin-vue/src/script.ts index a5cda42ecf9dff..f851327ff9c492 100644 --- a/packages/plugin-vue/src/script.ts +++ b/packages/plugin-vue/src/script.ts @@ -43,7 +43,7 @@ export function resolveScript( ...options.script, id: descriptor.id, isProd: options.isProduction, - inlineTemplate: !options.devServer && !options.devToolsEnabled, + inlineTemplate: !options.devServer, refTransform: options.refTransform !== false, templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr), // @ts-ignore TODO remove ignore when we support this in @vue/compiler-sfc