From 4b954484bfa7e89d105caba6bd9a8b556f09ec6b Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Sun, 24 May 2020 11:33:04 +0800 Subject: [PATCH] Rename babel-preset-jsx to babel-plugin-jsx --- .babelrc | 4 +- README.md | 10 +-- package.json | 4 +- src/babel-sugar-fragment.js | 28 -------- src/index.js | 19 ++--- src/sugar-fragment.js | 23 ++++++ ...abel-sugar-v-model.js => sugar-v-model.js} | 71 +++++++++---------- ...nsform-vue-jsx.js => transform-vue-jsx.js} | 61 ++++++++-------- 8 files changed, 105 insertions(+), 115 deletions(-) delete mode 100644 src/babel-sugar-fragment.js create mode 100644 src/sugar-fragment.js rename src/{babel-sugar-v-model.js => sugar-v-model.js} (75%) rename src/{babel-plugin-transform-vue-jsx.js => transform-vue-jsx.js} (87%) diff --git a/.babelrc b/.babelrc index 8725d37..87db373 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,8 @@ { "presets": [ - "@babel/env", + "@babel/env" + ], + "plugins": [ "./src/index.js" ] } diff --git a/README.md b/README.md index 0b11e21..c6b781a 100644 --- a/README.md +++ b/README.md @@ -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"] } ``` diff --git a/package.json b/package.json index 965da48..2e30113 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/babel-sugar-fragment.js b/src/babel-sugar-fragment.js deleted file mode 100644 index 2edba01..0000000 --- a/src/babel-sugar-fragment.js +++ /dev/null @@ -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)); - }, - }, - }, -}); diff --git a/src/index.js b/src/index.js index a0cdc5f..8be41be 100644 --- a/src/index.js +++ b/src/index.js @@ -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, + }, }); diff --git a/src/sugar-fragment.js b/src/sugar-fragment.js new file mode 100644 index 0000000..41bc627 --- /dev/null +++ b/src/sugar-fragment.js @@ -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)); + }, + }, +}; diff --git a/src/babel-sugar-v-model.js b/src/sugar-v-model.js similarity index 75% rename from src/babel-sugar-v-model.js rename to src/sugar-v-model.js index 22b6ebf..a439f5f 100644 --- a/src/babel-sugar-v-model.js +++ b/src/sugar-v-model.js @@ -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(); + } }, }, -}); +}; diff --git a/src/babel-plugin-transform-vue-jsx.js b/src/transform-vue-jsx.js similarity index 87% rename from src/babel-plugin-transform-vue-jsx.js rename to src/transform-vue-jsx.js index dc08595..32dabef 100644 --- a/src/babel-plugin-transform-vue-jsx.js +++ b/src/transform-vue-jsx.js @@ -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, + }), + ); }, }, -}); +};