diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts index ff213fd7..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,63 +102,57 @@ 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 = { + const options = shallowRef({ 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', - } + }) + + 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 + 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) } }, @@ -180,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, @@ -192,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) }) } @@ -229,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