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

.babelrc

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

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"]
 }
 ```
 

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",

src/babel-sugar-fragment.js

@@ -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));
-      },
-    },
-  },
-});

src/index.js

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

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));
+    },
+  },
+};

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,10 +162,7 @@ const parseVModel = (path) => {
   };
 };
 
-module.exports = () => ({
+module.exports = {
-  name: 'babel-sugar-v-model',
-  inherits: syntaxJsx,
-  visitor: {
   JSXAttribute: {
     exit(path, state) {
       const parsed = parseVModel(path);
@@ -205,5 +201,4 @@ module.exports = () => ({
       }
     },
   },
-  },
+};
-});

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,10 +309,7 @@ const transformJSXElement = (path, injected) => {
   ]);
 };
 
-module.exports = () => ({
+module.exports = {
-  name: 'babel-plugin-transform-vue-jsx',
-  inherits: syntaxJsx,
-  visitor: {
   JSXElement: {
     exit(path, state) {
       if (!state.vueCreateElementInjected) {
@@ -342,5 +338,4 @@ module.exports = () => ({
       );
     },
   },
-  },
+};
-});