images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2024-11-10 09:39:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

Rename babel-preset-jsx to babel-plugin-jsx

Browse Source
This commit is contained in:
Amour1688 2020-05-24 11:33:04 +08:00
parent a118fb1df4
commit 4b954484bf
8 changed files with 105 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.babelrc
View File

@ -1,6 +1,8 @@
{
"presets": [
"@babel/env",
"@babel/env"
],
"plugins": [
"./src/index.js"
]
}

10
README.md
View File

@ -1,20 +1,20 @@
# Babel Preset JSX for Vue 3.0
# Babel Plugin JSX for Vue 3.0
To add Vue JSX support.
## Installation
Install the preset with:
Install the plugin with:
```
npm install @ant-design-vue/babel-preset-jsx
npm install @ant-design-vue/babel-plugin-jsx
```
Then add the preset to .babelrc:
Then add the plugin to .babelrc:
```
{
"presets": ["@ant-design-vue/babel-preset-jsx"]
"plugins": ["@ant-design-vue/babel-plugin-jsx"]
}
```

4
package.json
View File

@ -1,7 +1,7 @@
{
"name": "@ant-design-vue/babel-preset-jsx",
"name": "@ant-design-vue/babel-plugin-jsx",
"version": "1.0.0-alpha.0",
"description": "Babel preset for Vue 3.0 JSX",
"description": "Babel plugin for Vue 3.0 JSX",
"main": "src/index.js",
"scripts": {
"dev": "webpack-dev-server",

28
src/babel-sugar-fragment.js
View File

@ -1,28 +0,0 @@
const syntaxJsx = require('@babel/plugin-syntax-jsx').default;
const t = require('@babel/types');
const helperModuleImports = require('@babel/helper-module-imports');
const transformFragment = (path, { name }) => {
const children = path.get('children') || [];
return t.jsxElement(
t.jsxOpeningElement(t.jsxIdentifier(name), []),
t.jsxClosingElement(t.jsxIdentifier(name)),
children.map(({ node }) => node),
false,
);
};
module.exports = () => ({
name: 'babel-sugar-fragment',
inherits: syntaxJsx,
visitor: {
JSXFragment: {
enter(path, state) {
if (!state.vueFragment) {
state.vueFragment = helperModuleImports.addNamed(path, 'Fragment', 'vue');
}
path.replaceWith(transformFragment(path, state.vueFragment));
},
},
},
});

19
src/index.js
View File

@ -1,11 +1,14 @@
const babelSugarVModel = require('./babel-sugar-v-model');
const babelPluginTransformVueJsx = require('./babel-plugin-transform-vue-jsx');
const babelSugarFragment = require('./babel-sugar-fragment');
const syntaxJsx = require('@babel/plugin-syntax-jsx').default;
const tranformVueJSX = require('./transform-vue-jsx');
const sugarVModel = require('./sugar-v-model');
const sugarFragment = require('./sugar-fragment');
module.exports = () => ({
plugins: [
babelSugarVModel,
babelPluginTransformVueJsx,
babelSugarFragment,
],
name: 'babel-plugin-jsx',
inherits: syntaxJsx,
visitor: {
...sugarVModel,
...tranformVueJSX,
...sugarFragment,
},
});

23
src/sugar-fragment.js Normal file
View File

@ -0,0 +1,23 @@
const t = require('@babel/types');
const helperModuleImports = require('@babel/helper-module-imports');
const transformFragment = (path, { name }) => {
const children = path.get('children') || [];
return t.jsxElement(
t.jsxOpeningElement(t.jsxIdentifier(name), []),
t.jsxClosingElement(t.jsxIdentifier(name)),
children.map(({ node }) => node),
false,
);
};
module.exports = {
JSXFragment: {
enter(path, state) {
if (!state.vueFragment) {
state.vueFragment = helperModuleImports.addNamed(path, 'Fragment', 'vue');
}
path.replaceWith(transformFragment(path, state.vueFragment));
},
},
};

71
src/babel-sugar-v-model.js → src/sugar-v-model.js
View File

@ -1,4 +1,3 @@
const syntaxJsx = require('@babel/plugin-syntax-jsx').default;
const t = require('@babel/types');
const htmlTags = require('html-tags');
const svgTags = require('svg-tags');
@ -163,47 +162,43 @@ const parseVModel = (path) => {
};
};
module.exports = () => ({
name: 'babel-sugar-v-model',
inherits: syntaxJsx,
visitor: {
JSXAttribute: {
exit(path, state) {
const parsed = parseVModel(path);
if (!parsed) {
return;
}
module.exports = {
JSXAttribute: {
exit(path, state) {
const parsed = parseVModel(path);
if (!parsed) {
return;
}
const { modifiers, value } = parsed;
const { modifiers, value } = parsed;
const parent = path.parentPath;
// v-model={xx} --> v-_model={[directive, xx, void 0, { a: true, b: true }]}
const directive = getModelDirective(parent, state, value);
if (directive) {
path.replaceWith(
t.jsxAttribute(
t.jsxIdentifier('v-_model'), // TODO
t.jsxExpressionContainer(
t.arrayExpression([
directive,
value,
modifiers.size && t.unaryExpression('void', t.numericLiteral(0), true),
modifiers.size && t.objectExpression(
[...modifiers].map(
(modifier) => t.objectProperty(
t.identifier(modifier),
t.booleanLiteral(true),
),
const parent = path.parentPath;
// v-model={xx} --> v-_model={[directive, xx, void 0, { a: true, b: true }]}
const directive = getModelDirective(parent, state, value);
if (directive) {
path.replaceWith(
t.jsxAttribute(
t.jsxIdentifier('v-_model'), // TODO
t.jsxExpressionContainer(
t.arrayExpression([
directive,
value,
modifiers.size && t.unaryExpression('void', t.numericLiteral(0), true),
modifiers.size && t.objectExpression(
[...modifiers].map(
(modifier) => t.objectProperty(
t.identifier(modifier),
t.booleanLiteral(true),
),
),
].filter(Boolean)),
),
),
].filter(Boolean)),
),
);
} else {
path.remove();
}
},
),
);
} else {
path.remove();
}
},
},
});
};

61
src/babel-plugin-transform-vue-jsx.js → src/transform-vue-jsx.js
View File

@ -1,4 +1,3 @@
const syntaxJsx = require('@babel/plugin-syntax-jsx').default;
const t = require('@babel/types');
const htmlTags = require('html-tags');
const svgTags = require('svg-tags');
@ -310,37 +309,33 @@ const transformJSXElement = (path, injected) => {
]);
};
module.exports = () => ({
name: 'babel-plugin-transform-vue-jsx',
inherits: syntaxJsx,
visitor: {
JSXElement: {
exit(path, state) {
if (!state.vueCreateElementInjected) {
state.vueCreateElementInjected = addNamed(path, 'h', 'vue');
}
if (!state.vueMergePropsInjected) {
state.vueMergePropsInjected = addNamed(path, 'mergeProps', 'vue');
}
if (!state.vueWithDirectivesInjected) {
state.vueWithDirectivesInjected = addNamed(path, 'withDirectives', 'vue');
}
if (!state.vueResolveDirectiveInjected) {
state.vueResolveDirectiveInjected = addNamed(path, 'resolveDirective', 'vue');
}
if (!state.vueVShowInjected) {
state.vueVShowInjected = addNamed(path, 'vShow', 'vue');
}
path.replaceWith(
transformJSXElement(path, {
h: state.vueCreateElementInjected,
mergeProps: state.vueMergePropsInjected,
withDirectives: state.vueWithDirectivesInjected,
resolveDirective: state.vueResolveDirectiveInjected,
vShow: state.vueVShowInjected,
}),
);
},
module.exports = {
JSXElement: {
exit(path, state) {
if (!state.vueCreateElementInjected) {
state.vueCreateElementInjected = addNamed(path, 'h', 'vue');
}
if (!state.vueMergePropsInjected) {
state.vueMergePropsInjected = addNamed(path, 'mergeProps', 'vue');
}
if (!state.vueWithDirectivesInjected) {
state.vueWithDirectivesInjected = addNamed(path, 'withDirectives', 'vue');
}
if (!state.vueResolveDirectiveInjected) {
state.vueResolveDirectiveInjected = addNamed(path, 'resolveDirective', 'vue');
}
if (!state.vueVShowInjected) {
state.vueVShowInjected = addNamed(path, 'vShow', 'vue');
}
path.replaceWith(
transformJSXElement(path, {
h: state.vueCreateElementInjected,
mergeProps: state.vueMergePropsInjected,
withDirectives: state.vueWithDirectivesInjected,
resolveDirective: state.vueResolveDirectiveInjected,
vShow: state.vueVShowInjected,
}),
);
},
},
});
};