From 7b4ac054cab80603a8550021cb58ed9a31891cb9 Mon Sep 17 00:00:00 2001 From: zjxxxxxxxxx <954270063@qq.com> Date: Mon, 11 Dec 2023 18:24:41 +0800 Subject: [PATCH] feat: Add option `babelParserPlugins` --- README.md | 17 +++++++---- examples/rollup/src/components/Github.vue | 16 +++++++++++ examples/rollup/src/components/HelloWorld.tsx | 8 ++---- examples/vite/src/components/Github.vue | 16 +++++++++++ examples/vite/src/components/HelloWorld.tsx | 9 ++---- examples/vite/vite.config.ts | 3 ++ examples/webpack/src/components/Github.vue | 16 +++++++++++ .../webpack/src/components/HelloWorld.tsx | 9 ++---- examples/webpack/vue.config.js | 9 ++++-- src/core/index.ts | 23 ++++----------- src/core/parse_ID.ts | 12 ++------ src/core/transform.ts | 12 +++++--- src/core/transform_JSX.ts | 11 +++++--- src/core/transform_SFC.ts | 28 +++++++++++-------- src/types.ts | 17 ++++++++--- 15 files changed, 129 insertions(+), 77 deletions(-) create mode 100644 examples/rollup/src/components/Github.vue create mode 100644 examples/vite/src/components/Github.vue create mode 100644 examples/webpack/src/components/Github.vue diff --git a/README.md b/README.md index 4bbefd4..6fe6fc9 100644 --- a/README.md +++ b/README.md @@ -212,7 +212,12 @@ build({ The following show the default values of the configuration ```ts -interface Options { +export interface Options { + /** @default '**\/*.{vue,jsx,tsx}' */ + include?: string | RegExp | (string | RegExp)[]; + /** @default 'node_modules/**' */ + exclude?: string | RegExp | (string | RegExp)[]; + /** * source root path * @@ -226,10 +231,12 @@ interface Options { */ sourceMap?: boolean; - /** @default '**\/*.{vue,jsx,tsx}' */ - include?: string | RegExp | (string | RegExp)[]; - /** @default 'node_modules/**' */ - exclude?: string | RegExp | (string | RegExp)[]; + /** + * Array containing the plugins that you want to enable. + * + * @default ['jsx', 'typescript'] + */ + babelParserPlugins?: ParserPlugin[]; } ``` diff --git a/examples/rollup/src/components/Github.vue b/examples/rollup/src/components/Github.vue new file mode 100644 index 0000000..b7787c9 --- /dev/null +++ b/examples/rollup/src/components/Github.vue @@ -0,0 +1,16 @@ + diff --git a/examples/rollup/src/components/HelloWorld.tsx b/examples/rollup/src/components/HelloWorld.tsx index 9902618..2ee292d 100644 --- a/examples/rollup/src/components/HelloWorld.tsx +++ b/examples/rollup/src/components/HelloWorld.tsx @@ -1,4 +1,5 @@ import { defineComponent } from 'vue'; +import Github from './Github.vue'; export default defineComponent({ props: { msg: String }, @@ -10,12 +11,7 @@ export default defineComponent({ Inspect the element to see the __source

- - Github - +

); diff --git a/examples/vite/src/components/Github.vue b/examples/vite/src/components/Github.vue new file mode 100644 index 0000000..b7787c9 --- /dev/null +++ b/examples/vite/src/components/Github.vue @@ -0,0 +1,16 @@ + diff --git a/examples/vite/src/components/HelloWorld.tsx b/examples/vite/src/components/HelloWorld.tsx index 5f6c5e6..b09dbcc 100644 --- a/examples/vite/src/components/HelloWorld.tsx +++ b/examples/vite/src/components/HelloWorld.tsx @@ -1,3 +1,5 @@ +import Github from './Github.vue'; + export default function HelloWorld({ msg }: { msg: string }) { return ( <> @@ -6,12 +8,7 @@ export default function HelloWorld({ msg }: { msg: string }) { Inspect the element to see the __source

- - Github - +

); diff --git a/examples/vite/vite.config.ts b/examples/vite/vite.config.ts index 106ea9f..79778ce 100644 --- a/examples/vite/vite.config.ts +++ b/examples/vite/vite.config.ts @@ -11,4 +11,7 @@ export default defineConfig({ jsxFragment: 'Fragment', jsxInject: "import { h, Fragment } from 'vue';", }, + server: { + port: 3000, + }, }); diff --git a/examples/webpack/src/components/Github.vue b/examples/webpack/src/components/Github.vue new file mode 100644 index 0000000..b7787c9 --- /dev/null +++ b/examples/webpack/src/components/Github.vue @@ -0,0 +1,16 @@ + diff --git a/examples/webpack/src/components/HelloWorld.tsx b/examples/webpack/src/components/HelloWorld.tsx index 5f6c5e6..b09dbcc 100644 --- a/examples/webpack/src/components/HelloWorld.tsx +++ b/examples/webpack/src/components/HelloWorld.tsx @@ -1,3 +1,5 @@ +import Github from './Github.vue'; + export default function HelloWorld({ msg }: { msg: string }) { return ( <> @@ -6,12 +8,7 @@ export default function HelloWorld({ msg }: { msg: string }) { Inspect the element to see the __source

- - Github - +

); diff --git a/examples/webpack/vue.config.js b/examples/webpack/vue.config.js index 108b8ab..3d2c4a3 100644 --- a/examples/webpack/vue.config.js +++ b/examples/webpack/vue.config.js @@ -1,9 +1,12 @@ -const { defineConfig } = require("@vue/cli-service"); +const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ configureWebpack: { plugins: [ - require("unplugin-vue-source/webpack")(), - require("unplugin-vue-jsx/webpack")(), + require('unplugin-vue-source/webpack')(), + require('unplugin-vue-jsx/webpack')(), ], }, + devServer: { + port: 3000, + }, }); diff --git a/src/core/index.ts b/src/core/index.ts index 379fecb..648a0fc 100644 --- a/src/core/index.ts +++ b/src/core/index.ts @@ -1,7 +1,6 @@ import { type UnpluginFactory, createUnplugin } from 'unplugin'; import { createFilter } from '@rollup/pluginutils'; import { type ResolvedOptions, type Options } from '../types'; -import { TRACE_ID } from './constants'; import { isDev } from './isDev'; import { parse_ID } from './parse_ID'; import { transform } from './transform'; @@ -21,21 +20,8 @@ export const unpluginFactory: UnpluginFactory = (options = {}) => { enforce: 'pre', transformInclude(id) { - const { file, isSfc, query } = parse_ID(id); - - if (query.raw == null && filter(file)) { - if (isSfc && query.type !== 'template') { - return ( - // vite-plugin-vue - !query[TRACE_ID] && - // rollup-plugin-vue - !query['rollup-plugin-vue'] - ); - } - - // vue cli | vue-loader | tsx | jsx - return true; - } + const { file, query } = parse_ID(id); + return query.raw == null && filter(file); }, transform(code, id) { return transform(code, id, opts); @@ -45,10 +31,11 @@ export const unpluginFactory: UnpluginFactory = (options = {}) => { function resolveOptions(opts: Options): ResolvedOptions { return { - root: opts.root ?? process.cwd(), - sourceMap: opts.sourceMap ?? false, include: opts.include ?? '**/*.{vue,jsx,tsx}', exclude: opts.exclude ?? 'node_modules/**', + root: opts.root ?? process.cwd(), + sourceMap: opts.sourceMap ?? false, + babelParserPlugins: opts.babelParserPlugins ?? [], }; } diff --git a/src/core/parse_ID.ts b/src/core/parse_ID.ts index fc5039c..befb97c 100644 --- a/src/core/parse_ID.ts +++ b/src/core/parse_ID.ts @@ -12,18 +12,10 @@ export function parse_ID(id: string, root = '') { const ext = extname(file).slice(1); const query = Object.fromEntries(new URLSearchParams(rawQuery)) as VueQuery; - if (ext === 'vue') { - return { - file: file.replace(root, ''), - isSfc: true, - query, - }; - } - return { file: file.replace(root, ''), - isJsx: true, - isTsx: ext.includes('ts'), + isSfc: ext === 'vue', + isTsx: ext.startsWith('ts'), query, }; } diff --git a/src/core/transform.ts b/src/core/transform.ts index f1cc962..1142272 100644 --- a/src/core/transform.ts +++ b/src/core/transform.ts @@ -6,16 +6,20 @@ import { parse_ID } from './parse_ID'; import { transform_SFC } from './transform_SFC'; import { transform_JSX } from './transform_JSX'; -export function transform(code: string, id: string, options: ResolvedOptions) { - const { root, sourceMap } = options; +const skipRE = new RegExp(` ${TRACE_ID}=['"].+:[0-9]+:[0-9]+['"]`); + +export function transform(code: string, id: string, opts: ResolvedOptions) { + if (skipRE.test(code)) return; + + const { root, sourceMap } = opts; const s = new MagicString(code); const parsed = parse_ID(id, root); if (parsed.isSfc) { - transform_SFC(code, replace); + transform_SFC(code, replace, opts); } else { - transform_JSX(code, replace, parsed); + transform_JSX(code, replace, parsed, opts); } function replace(pos: Position) { diff --git a/src/core/transform_JSX.ts b/src/core/transform_JSX.ts index bbbba1e..0c66c47 100644 --- a/src/core/transform_JSX.ts +++ b/src/core/transform_JSX.ts @@ -1,6 +1,7 @@ -import type { Position } from '@vue/compiler-dom'; +import { type Position } from '@vue/compiler-dom'; import { traverse, types as t } from '@babel/core'; import { parse, ParserPlugin } from '@babel/parser'; +import { type ResolvedOptions } from '../types'; export function transform_JSX( code: string, @@ -11,17 +12,19 @@ export function transform_JSX( startLine?: number; startColumn?: number; }, + opts: ResolvedOptions, ) { const { isTsx, startIndex = 0, startLine = 1, startColumn = 1 } = options; - const plugins: ParserPlugin[] = ['jsx']; + const pluginSet = new Set(opts.babelParserPlugins); + pluginSet.add('jsx'); if (isTsx) { - plugins.push('typescript'); + pluginSet.add('typescript'); } const ast = parse(code, { sourceType: 'unambiguous', - plugins, + plugins: [...pluginSet] as ParserPlugin[], startLine, // babel start at 0 startColumn: startColumn - 1, diff --git a/src/core/transform_SFC.ts b/src/core/transform_SFC.ts index 4518657..5e2b6ae 100644 --- a/src/core/transform_SFC.ts +++ b/src/core/transform_SFC.ts @@ -1,15 +1,21 @@ -import type { - ElementNode, - AttributeNode, - Position, - RootNode, - TextNode, +import { + type ElementNode, + type AttributeNode, + type Position, + type RootNode, + type TextNode, + parse, + transform, } from '@vue/compiler-dom'; -import { parse, transform } from '@vue/compiler-dom'; +import { type ResolvedOptions } from '../types'; import { NodeTypes, TagTypes } from './constants'; import { transform_JSX } from './transform_JSX'; -export function transform_SFC(code: string, cb: (pos: Position) => void) { +export function transform_SFC( + code: string, + cb: (pos: Position) => void, + opts: ResolvedOptions, +) { const ast = parse(code); transform(ast, { nodeTransforms: [ @@ -27,13 +33,13 @@ export function transform_SFC(code: string, cb: (pos: Position) => void) { ], }); - const jsxOpts = resolveJsxOptions(ast); + const jsxOpts = resolveJsxOptsByScript(ast); if (jsxOpts) { - transform_JSX(jsxOpts.code, cb, jsxOpts); + transform_JSX(jsxOpts.code, cb, jsxOpts, opts); } } -function resolveJsxOptions(ast: RootNode) { +function resolveJsxOptsByScript(ast: RootNode) { const scriptNode = (ast.children as ElementNode[]).find( (node) => node.tag === 'script', ); diff --git a/src/types.ts b/src/types.ts index 5371bc9..9bc3dda 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,11 @@ +import { ParserPlugin } from '@babel/parser'; + export interface Options { + /** @default '**\/*.{vue,jsx,tsx}' */ + include?: string | RegExp | (string | RegExp)[]; + /** @default 'node_modules/**' */ + exclude?: string | RegExp | (string | RegExp)[]; + /** * source root path * @@ -12,10 +19,12 @@ export interface Options { */ sourceMap?: boolean; - /** @default '**\/*.{vue,jsx,tsx}' */ - include?: string | RegExp | (string | RegExp)[]; - /** @default 'node_modules/**' */ - exclude?: string | RegExp | (string | RegExp)[]; + /** + * Array containing the plugins that you want to enable. + * + * @default ['jsx', 'typescript'] + */ + babelParserPlugins?: ParserPlugin[]; } export type ResolvedOptions = Required;