From 1a226e5c76854d735afeb059cfcb3c0724416561 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Wed, 30 Aug 2023 03:58:13 +0800 Subject: [PATCH 1/2] fix(plugin-vue): re-create filters after updating options --- packages/plugin-vue/src/index.ts | 47 +++++++++++++++----------------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts index ff213fd7..2d558131 100644 --- a/packages/plugin-vue/src/index.ts +++ b/packages/plugin-vue/src/index.ts @@ -101,41 +101,37 @@ export interface ResolvedOptions extends Options { } export default function vuePlugin(rawOptions: Options = {}): Plugin { - const { - include = /\.vue$/, - exclude, - customElement = /\.ce\.vue$/, - reactivityTransform = false, - } = rawOptions - - const filter = createFilter(include, exclude) - - const customElementFilter = - typeof customElement === 'boolean' - ? () => customElement - : createFilter(customElement) - - const refTransformFilter = - reactivityTransform === false - ? () => false - : reactivityTransform === true - ? createFilter(/\.(j|t)sx?$/, /node_modules/) - : createFilter(reactivityTransform) - let options: ResolvedOptions = { isProduction: process.env.NODE_ENV === 'production', compiler: null as any, // to be set in buildStart + include: /\.vue$/, + customElement: /\.ce\.vue$/, + reactivityTransform: false, ...rawOptions, - include, - exclude, - customElement, - reactivityTransform, root: process.cwd(), sourceMap: true, cssDevSourcemap: false, devToolsEnabled: process.env.NODE_ENV !== 'production', } + function buildFilter() { + return { + filter: createFilter(options.include, options.exclude), + customElementFilter: + typeof options.customElement === 'boolean' + ? () => options.customElement as boolean + : createFilter(options.customElement), + refTransformFilter: + options.reactivityTransform === false + ? () => false + : options.reactivityTransform === true + ? createFilter(/\.(j|t)sx?$/, /node_modules/) + : createFilter(options.reactivityTransform), + } + } + + let { filter, customElementFilter, refTransformFilter } = buildFilter() + return { name: 'vite:vue', @@ -145,6 +141,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin { }, set options(value) { options = value + ;({ filter, customElementFilter, refTransformFilter } = buildFilter()) }, version, }, From 0b9bc6f211671524278d6f3931b4a004c99b0aa6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Sat, 30 Sep 2023 20:41:17 +0800 Subject: [PATCH 2/2] refactor: reactify --- packages/plugin-vue/src/index.ts | 88 +++++++++++++++++--------------- 1 file changed, 46 insertions(+), 42 deletions(-) diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts index 2d558131..14cd33ca 100644 --- a/packages/plugin-vue/src/index.ts +++ b/packages/plugin-vue/src/index.ts @@ -10,6 +10,7 @@ import type { } from 'vue/compiler-sfc' import type * as _compiler from 'vue/compiler-sfc' /* eslint-enable import/no-duplicates */ +import { computed, shallowRef } from 'vue' import { version } from '../package.json' import { resolveCompiler } from './compiler' import { parseVueRequest } from './utils/query' @@ -101,7 +102,7 @@ export interface ResolvedOptions extends Options { } export default function vuePlugin(rawOptions: Options = {}): Plugin { - let options: ResolvedOptions = { + const options = shallowRef({ isProduction: process.env.NODE_ENV === 'production', compiler: null as any, // to be set in buildStart include: /\.vue$/, @@ -112,49 +113,46 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin { sourceMap: true, cssDevSourcemap: false, devToolsEnabled: process.env.NODE_ENV !== 'production', - } - - function buildFilter() { - return { - filter: createFilter(options.include, options.exclude), - customElementFilter: - typeof options.customElement === 'boolean' - ? () => options.customElement as boolean - : createFilter(options.customElement), - refTransformFilter: - options.reactivityTransform === false - ? () => false - : options.reactivityTransform === true - ? createFilter(/\.(j|t)sx?$/, /node_modules/) - : createFilter(options.reactivityTransform), - } - } + }) - let { filter, customElementFilter, refTransformFilter } = buildFilter() + const filter = computed(() => + createFilter(options.value.include, options.value.exclude), + ) + const customElementFilter = computed(() => + typeof options.value.customElement === 'boolean' + ? () => options.value.customElement as boolean + : createFilter(options.value.customElement), + ) + const refTransformFilter = computed(() => + options.value.reactivityTransform === false + ? () => false + : options.value.reactivityTransform === true + ? createFilter(/\.(j|t)sx?$/, /node_modules/) + : createFilter(options.value.reactivityTransform), + ) return { name: 'vite:vue', api: { get options() { - return options + return options.value }, set options(value) { - options = value - ;({ filter, customElementFilter, refTransformFilter } = buildFilter()) + options.value = value }, version, }, handleHotUpdate(ctx) { - if (options.compiler.invalidateTypeCache) { - options.compiler.invalidateTypeCache(ctx.file) + if (options.value.compiler.invalidateTypeCache) { + options.value.compiler.invalidateTypeCache(ctx.file) } if (typeDepToSFCMap.has(ctx.file)) { return handleTypeDepChange(typeDepToSFCMap.get(ctx.file)!, ctx) } - if (filter(ctx.file)) { - return handleHotUpdate(ctx, options) + if (filter.value(ctx.file)) { + return handleHotUpdate(ctx, options.value) } }, @@ -177,8 +175,8 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin { }, configResolved(config) { - options = { - ...options, + options.value = { + ...options.value, root: config.root, sourceMap: config.command === 'build' ? !!config.build.sourcemap : true, cssDevSourcemap: config.css?.devSourcemap ?? false, @@ -189,14 +187,14 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin { }, configureServer(server) { - options.devServer = server + options.value.devServer = server }, buildStart() { - const compiler = (options.compiler = - options.compiler || resolveCompiler(options.root)) + const compiler = (options.value.compiler = + options.value.compiler || resolveCompiler(options.value.root)) if (compiler.invalidateTypeCache) { - options.devServer?.watcher.on('unlink', (file) => { + options.value.devServer?.watcher.on('unlink', (file) => { compiler.invalidateTypeCache(file) }) } @@ -226,7 +224,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin { if (query.src) { return fs.readFileSync(filename, 'utf-8') } - const descriptor = getDescriptor(filename, options)! + const descriptor = getDescriptor(filename, options.value)! let block: SFCBlock | null | undefined if (query.type === 'script') { // handle