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

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

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