mirror of
https://github.com/vuejs/babel-plugin-jsx.git
synced 2025-03-15 15:05:18 +08:00
feat: integrate with JSX plugin
This commit is contained in:
parent
3a3c4f85c0
commit
6760d0b459
@ -15,6 +15,7 @@
|
|||||||
"jsx"
|
"jsx"
|
||||||
],
|
],
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@babel/plugin-syntax-typescript": "^7.22.5",
|
||||||
"@rollup/plugin-babel": "^6.0.3",
|
"@rollup/plugin-babel": "^6.0.3",
|
||||||
"@types/babel__core": "^7.20.2",
|
"@types/babel__core": "^7.20.2",
|
||||||
"@types/node": "^20.6.5",
|
"@types/node": "^20.6.5",
|
||||||
|
@ -24,11 +24,13 @@
|
|||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/helper-module-imports": "^7.22.15",
|
"@babel/helper-module-imports": "^7.22.15",
|
||||||
|
"@babel/helper-plugin-utils": "^7.22.5",
|
||||||
"@babel/plugin-syntax-jsx": "^7.22.5",
|
"@babel/plugin-syntax-jsx": "^7.22.5",
|
||||||
"@babel/template": "^7.22.15",
|
"@babel/template": "^7.22.15",
|
||||||
"@babel/traverse": "^7.22.20",
|
"@babel/traverse": "^7.22.20",
|
||||||
"@babel/types": "^7.22.19",
|
"@babel/types": "^7.22.19",
|
||||||
"@vue/babel-helper-vue-transform-on": "workspace:^",
|
"@vue/babel-helper-vue-transform-on": "workspace:^",
|
||||||
|
"@vue/babel-plugin-resolve-type": "workspace:^",
|
||||||
"camelcase": "^6.3.0",
|
"camelcase": "^6.3.0",
|
||||||
"html-tags": "^3.3.1",
|
"html-tags": "^3.3.1",
|
||||||
"svg-tags": "^1.0.0"
|
"svg-tags": "^1.0.0"
|
||||||
@ -36,6 +38,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.22.20",
|
"@babel/core": "^7.22.20",
|
||||||
"@babel/preset-env": "^7.22.20",
|
"@babel/preset-env": "^7.22.20",
|
||||||
|
"@types/babel__helper-plugin-utils": "^7.10.1",
|
||||||
"@types/babel__template": "^7.4.2",
|
"@types/babel__template": "^7.4.2",
|
||||||
"@types/babel__traverse": "^7.20.2",
|
"@types/babel__traverse": "^7.20.2",
|
||||||
"@types/svg-tags": "^1.0.0",
|
"@types/svg-tags": "^1.0.0",
|
||||||
|
@ -5,7 +5,9 @@ import template from '@babel/template';
|
|||||||
import syntaxJsx from '@babel/plugin-syntax-jsx';
|
import syntaxJsx from '@babel/plugin-syntax-jsx';
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
import { addNamed, addNamespace, isModule } from '@babel/helper-module-imports';
|
import { addNamed, addNamespace, isModule } from '@babel/helper-module-imports';
|
||||||
import { type NodePath } from '@babel/traverse';
|
import { type NodePath, type Visitor } from '@babel/traverse';
|
||||||
|
import ResolveType from '@vue/babel-plugin-resolve-type';
|
||||||
|
import { declare } from '@babel/helper-plugin-utils';
|
||||||
import transformVueJSX from './transform-vue-jsx';
|
import transformVueJSX from './transform-vue-jsx';
|
||||||
import sugarFragment from './sugar-fragment';
|
import sugarFragment from './sugar-fragment';
|
||||||
import type { State, VueJSXPluginOptions } from './interface';
|
import type { State, VueJSXPluginOptions } from './interface';
|
||||||
@ -31,10 +33,20 @@ const hasJSX = (parentPath: NodePath<t.Program>) => {
|
|||||||
|
|
||||||
const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
|
const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
|
||||||
|
|
||||||
export default ({ types }: typeof BabelCore): BabelCore.PluginObj<State> => ({
|
export default declare<VueJSXPluginOptions, BabelCore.PluginObj<State>>(
|
||||||
|
(api, opt, dirname) => {
|
||||||
|
const { types } = api;
|
||||||
|
let resolveType: BabelCore.PluginObj<BabelCore.PluginPass> | undefined;
|
||||||
|
if (opt.resolveType !== false) {
|
||||||
|
if (typeof opt.resolveType === 'boolean') opt.resolveType = {};
|
||||||
|
resolveType = ResolveType(api, opt.resolveType, dirname);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...(resolveType || {}),
|
||||||
name: 'babel-plugin-jsx',
|
name: 'babel-plugin-jsx',
|
||||||
inherits: syntaxJsx,
|
inherits: syntaxJsx,
|
||||||
visitor: {
|
visitor: {
|
||||||
|
...(resolveType?.visitor as Visitor<State>),
|
||||||
...transformVueJSX,
|
...transformVueJSX,
|
||||||
...sugarFragment,
|
...sugarFragment,
|
||||||
Program: {
|
Program: {
|
||||||
@ -137,7 +149,8 @@ export default ({ types }: typeof BabelCore): BabelCore.PluginObj<State> => ({
|
|||||||
(p) =>
|
(p) =>
|
||||||
p.isVariableDeclaration() &&
|
p.isVariableDeclaration() &&
|
||||||
p.node.declarations.some(
|
p.node.declarations.some(
|
||||||
(d) => (d.id as t.Identifier)?.name === sourceName.name
|
(d) =>
|
||||||
|
(d.id as t.Identifier)?.name === sourceName.name
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
.pop();
|
.pop();
|
||||||
@ -208,4 +221,6 @@ export default ({ types }: typeof BabelCore): BabelCore.PluginObj<State> => ({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import type * as t from '@babel/types';
|
import type * as t from '@babel/types';
|
||||||
import type * as BabelCore from '@babel/core';
|
import type * as BabelCore from '@babel/core';
|
||||||
|
import { type Options } from '@vue/babel-plugin-resolve-type';
|
||||||
|
|
||||||
export type Slots = t.Identifier | t.ObjectExpression | null;
|
export type Slots = t.Identifier | t.ObjectExpression | null;
|
||||||
|
|
||||||
@ -23,4 +24,8 @@ export interface VueJSXPluginOptions {
|
|||||||
enableObjectSlots?: boolean;
|
enableObjectSlots?: boolean;
|
||||||
/** Replace the function used when compiling JSX expressions */
|
/** Replace the function used when compiling JSX expressions */
|
||||||
pragma?: string;
|
pragma?: string;
|
||||||
|
/**
|
||||||
|
* enabled by default
|
||||||
|
*/
|
||||||
|
resolveType?: Options | boolean;
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,17 @@
|
|||||||
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||||
|
|
||||||
|
exports[`resolve type > runtime props > basic 1`] = `
|
||||||
|
"import { createVNode as _createVNode } from \\"vue\\";
|
||||||
|
interface Props {
|
||||||
|
foo?: string;
|
||||||
|
}
|
||||||
|
const App = defineComponent((props: Props) => _createVNode(\\"div\\", null, null), {
|
||||||
|
props: {
|
||||||
|
foo: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
name: \\"App\\"
|
||||||
|
});"
|
||||||
|
`;
|
@ -188,6 +188,8 @@ const A = defineComponent({
|
|||||||
}) {
|
}) {
|
||||||
return () => _createVNode(\\"span\\", null, [slots.default()]);
|
return () => _createVNode(\\"span\\", null, [slots.default()]);
|
||||||
}
|
}
|
||||||
|
}, {
|
||||||
|
name: \\"A\\"
|
||||||
});
|
});
|
||||||
const _a2 = 2;
|
const _a2 = 2;
|
||||||
a = _a2;
|
a = _a2;
|
||||||
|
21
packages/babel-plugin-jsx/test/resolve-type.test.tsx
Normal file
21
packages/babel-plugin-jsx/test/resolve-type.test.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { transformAsync } from '@babel/core';
|
||||||
|
// @ts-expect-error missing types
|
||||||
|
import typescript from '@babel/plugin-syntax-typescript';
|
||||||
|
import VueJsx from '../src';
|
||||||
|
|
||||||
|
describe('resolve type', () => {
|
||||||
|
describe('runtime props', () => {
|
||||||
|
test('basic', async () => {
|
||||||
|
const result = await transformAsync(
|
||||||
|
`
|
||||||
|
interface Props { foo?: string }
|
||||||
|
const App = defineComponent((props: Props) => <div />)
|
||||||
|
`,
|
||||||
|
{
|
||||||
|
plugins: [[typescript, { isTSX: true }], VueJsx],
|
||||||
|
}
|
||||||
|
);
|
||||||
|
expect(result!.code).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
@ -35,14 +35,15 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/code-frame": "^7.22.10",
|
"@babel/code-frame": "^7.22.10",
|
||||||
"@babel/helper-module-imports": "^7.22.5",
|
"@babel/helper-module-imports": "^7.22.5",
|
||||||
|
"@babel/helper-plugin-utils": "^7.22.5",
|
||||||
"@babel/parser": "^7.22.11",
|
"@babel/parser": "^7.22.11",
|
||||||
"@vue/compiler-sfc": "npm:@vue/compiler-sfc-canary@minor"
|
"@vue/compiler-sfc": "npm:@vue/compiler-sfc-canary@minor"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.22.11",
|
"@babel/core": "^7.22.11",
|
||||||
"@babel/plugin-syntax-typescript": "^7.22.5",
|
|
||||||
"@types/babel__code-frame": "^7.0.3",
|
"@types/babel__code-frame": "^7.0.3",
|
||||||
"@types/babel__helper-module-imports": "^7.18.0",
|
"@types/babel__helper-module-imports": "^7.18.0",
|
||||||
|
"@types/babel__helper-plugin-utils": "^7.10.1",
|
||||||
"vue": "^3.3.4"
|
"vue": "^3.3.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -8,10 +8,11 @@ import {
|
|||||||
} from '@vue/compiler-sfc';
|
} from '@vue/compiler-sfc';
|
||||||
import { codeFrameColumns } from '@babel/code-frame';
|
import { codeFrameColumns } from '@babel/code-frame';
|
||||||
import { addNamed } from '@babel/helper-module-imports';
|
import { addNamed } from '@babel/helper-module-imports';
|
||||||
|
import { declare } from '@babel/helper-plugin-utils';
|
||||||
|
|
||||||
export default ({
|
export { SimpleTypeResolveOptions as Options };
|
||||||
types: t,
|
|
||||||
}: typeof BabelCore): BabelCore.PluginObj<SimpleTypeResolveOptions> => {
|
export default declare<SimpleTypeResolveOptions>(({ types: t }, options) => {
|
||||||
let ctx: SimpleTypeResolveContext | undefined;
|
let ctx: SimpleTypeResolveContext | undefined;
|
||||||
let helpers: Set<string> | undefined;
|
let helpers: Set<string> | undefined;
|
||||||
|
|
||||||
@ -23,7 +24,7 @@ export default ({
|
|||||||
ctx = {
|
ctx = {
|
||||||
filename: filename,
|
filename: filename,
|
||||||
source: file.code,
|
source: file.code,
|
||||||
options: this || {},
|
options,
|
||||||
ast: file.ast.program.body,
|
ast: file.ast.program.body,
|
||||||
error(msg, node) {
|
error(msg, node) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
@ -178,7 +179,7 @@ export default ({
|
|||||||
t.objectProperty(t.identifier('emits'), ast)
|
t.objectProperty(t.identifier('emits'), ast)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
|
|
||||||
function getTypeAnnotation(node: BabelCore.types.Node) {
|
function getTypeAnnotation(node: BabelCore.types.Node) {
|
||||||
if (
|
if (
|
||||||
|
27
pnpm-lock.yaml
generated
27
pnpm-lock.yaml
generated
@ -8,6 +8,9 @@ importers:
|
|||||||
|
|
||||||
.:
|
.:
|
||||||
devDependencies:
|
devDependencies:
|
||||||
|
'@babel/plugin-syntax-typescript':
|
||||||
|
specifier: ^7.22.5
|
||||||
|
version: 7.22.5(@babel/core@7.22.20)
|
||||||
'@rollup/plugin-babel':
|
'@rollup/plugin-babel':
|
||||||
specifier: ^6.0.3
|
specifier: ^6.0.3
|
||||||
version: 6.0.3(@babel/core@7.22.20)(@types/babel__core@7.20.2)
|
version: 6.0.3(@babel/core@7.22.20)(@types/babel__core@7.20.2)
|
||||||
@ -61,6 +64,9 @@ importers:
|
|||||||
'@babel/helper-module-imports':
|
'@babel/helper-module-imports':
|
||||||
specifier: ^7.22.15
|
specifier: ^7.22.15
|
||||||
version: 7.22.15
|
version: 7.22.15
|
||||||
|
'@babel/helper-plugin-utils':
|
||||||
|
specifier: ^7.22.5
|
||||||
|
version: 7.22.5
|
||||||
'@babel/plugin-syntax-jsx':
|
'@babel/plugin-syntax-jsx':
|
||||||
specifier: ^7.22.5
|
specifier: ^7.22.5
|
||||||
version: 7.22.5(@babel/core@7.22.20)
|
version: 7.22.5(@babel/core@7.22.20)
|
||||||
@ -76,6 +82,9 @@ importers:
|
|||||||
'@vue/babel-helper-vue-transform-on':
|
'@vue/babel-helper-vue-transform-on':
|
||||||
specifier: workspace:^
|
specifier: workspace:^
|
||||||
version: link:../babel-helper-vue-transform-on
|
version: link:../babel-helper-vue-transform-on
|
||||||
|
'@vue/babel-plugin-resolve-type':
|
||||||
|
specifier: workspace:^
|
||||||
|
version: link:../babel-plugin-resolve-type
|
||||||
camelcase:
|
camelcase:
|
||||||
specifier: ^6.3.0
|
specifier: ^6.3.0
|
||||||
version: 6.3.0
|
version: 6.3.0
|
||||||
@ -92,6 +101,9 @@ importers:
|
|||||||
'@babel/preset-env':
|
'@babel/preset-env':
|
||||||
specifier: ^7.22.20
|
specifier: ^7.22.20
|
||||||
version: 7.22.20(@babel/core@7.22.20)
|
version: 7.22.20(@babel/core@7.22.20)
|
||||||
|
'@types/babel__helper-plugin-utils':
|
||||||
|
specifier: ^7.10.1
|
||||||
|
version: 7.10.1
|
||||||
'@types/babel__template':
|
'@types/babel__template':
|
||||||
specifier: ^7.4.2
|
specifier: ^7.4.2
|
||||||
version: 7.4.2
|
version: 7.4.2
|
||||||
@ -122,6 +134,9 @@ importers:
|
|||||||
'@babel/helper-module-imports':
|
'@babel/helper-module-imports':
|
||||||
specifier: ^7.22.5
|
specifier: ^7.22.5
|
||||||
version: 7.22.15
|
version: 7.22.15
|
||||||
|
'@babel/helper-plugin-utils':
|
||||||
|
specifier: ^7.22.5
|
||||||
|
version: 7.22.5
|
||||||
'@babel/parser':
|
'@babel/parser':
|
||||||
specifier: ^7.22.11
|
specifier: ^7.22.11
|
||||||
version: 7.22.16
|
version: 7.22.16
|
||||||
@ -132,15 +147,15 @@ importers:
|
|||||||
'@babel/core':
|
'@babel/core':
|
||||||
specifier: ^7.22.11
|
specifier: ^7.22.11
|
||||||
version: 7.22.20
|
version: 7.22.20
|
||||||
'@babel/plugin-syntax-typescript':
|
|
||||||
specifier: ^7.22.5
|
|
||||||
version: 7.22.5(@babel/core@7.22.20)
|
|
||||||
'@types/babel__code-frame':
|
'@types/babel__code-frame':
|
||||||
specifier: ^7.0.3
|
specifier: ^7.0.3
|
||||||
version: 7.0.3
|
version: 7.0.3
|
||||||
'@types/babel__helper-module-imports':
|
'@types/babel__helper-module-imports':
|
||||||
specifier: ^7.18.0
|
specifier: ^7.18.0
|
||||||
version: 7.18.0
|
version: 7.18.0
|
||||||
|
'@types/babel__helper-plugin-utils':
|
||||||
|
specifier: ^7.10.1
|
||||||
|
version: 7.10.1
|
||||||
vue:
|
vue:
|
||||||
specifier: ^3.3.4
|
specifier: ^3.3.4
|
||||||
version: 3.3.4
|
version: 3.3.4
|
||||||
@ -1797,6 +1812,12 @@ packages:
|
|||||||
'@types/babel__traverse': 7.20.2
|
'@types/babel__traverse': 7.20.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/@types/babel__helper-plugin-utils@7.10.1:
|
||||||
|
resolution: {integrity: sha512-6RaT7i6r2rT6ouIDZ2Cd6dPkq4wn1F8pLyDO+7wPVsL1dodvORiZORImaD6j9FBcHjPGuERE0hhtwkuPNXsO0A==}
|
||||||
|
dependencies:
|
||||||
|
'@types/babel__core': 7.20.2
|
||||||
|
dev: true
|
||||||
|
|
||||||
/@types/babel__template@7.4.2:
|
/@types/babel__template@7.4.2:
|
||||||
resolution: {integrity: sha512-/AVzPICMhMOMYoSx9MoKpGDKdBRsIXMNByh1PXSZoa+v6ZoLa8xxtsT/uLQ/NJm0XVAWl/BvId4MlDeXJaeIZQ==}
|
resolution: {integrity: sha512-/AVzPICMhMOMYoSx9MoKpGDKdBRsIXMNByh1PXSZoa+v6ZoLa8xxtsT/uLQ/NJm0XVAWl/BvId4MlDeXJaeIZQ==}
|
||||||
dependencies:
|
dependencies:
|
||||||
|
Loading…
x
Reference in New Issue
Block a user