@ant-design-vue/babel-plugin-jsx - npm Package Compare versions

Comparing version 1.0.0-alpha.1 to 1.0.0-alpha.2

package.json

 {
   "name": "@ant-design-vue/babel-plugin-jsx",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "Babel plugin for Vue 3.0 JSX",
@@ -26,5 +26,4 @@ "main": "src/index.js",
   "dependencies": {
-    "@babel/helper-module-imports": "^7.8.3",
-    "@babel/plugin-syntax-jsx": "^7.8.3",
-    "@babel/types": "^7.9.6",
+    "@babel/helper-module-imports": "^7.0.0",
+    "@babel/plugin-syntax-jsx": "^7.0.0",
     "camelcase": "^6.0.0",
@@ -31,0 +30,0 @@ "html-tags": "^3.1.0",

src/index.js

@@ -6,10 +6,10 @@ const syntaxJsx = require('@babel/plugin-syntax-jsx').default;
 
-module.exports = () => ({
+module.exports = ({ types: t }) => ({
   name: 'babel-plugin-jsx',
   inherits: syntaxJsx,
   visitor: {
-    ...sugarVModel,
-    ...tranformVueJSX,
-    ...sugarFragment,
+    ...sugarVModel(t),
+    ...tranformVueJSX(t),
+    ...sugarFragment(t),
   },
 });

src/sugar-fragment.js

@@ -1,5 +0,4 @@
-const t = require('@babel/types');
 const helperModuleImports = require('@babel/helper-module-imports');
 
-const transformFragment = (path, { name }) => {
+const transformFragment = (t, path, { name }) => {
   const children = path.get('children') || [];
@@ -14,11 +13,11 @@ return t.jsxElement(
 
-module.exports = {
+module.exports = (t) => ({
   JSXFragment: {
-    enter(path, state) {
-      if (!state.vueFragment) {
-        state.vueFragment = helperModuleImports.addNamed(path, 'Fragment', 'vue');
+    enter(path) {
+      if (!path.vueFragment) {
+        path.vueFragment = helperModuleImports.addNamed(path, 'Fragment', 'vue');
       }
-      path.replaceWith(transformFragment(path, state.vueFragment));
+      path.replaceWith(transformFragment(t, path, path.vueFragment));
     },
   },
-};
+});

src/sugar-v-model.js

@@ -1,2 +0,1 @@
-const t = require('@babel/types');
 const htmlTags = require('html-tags');
@@ -36,3 +35,2 @@ const svgTags = require('svg-tags');
  *
- * @param t
  * @param path Path<JSXOpeningElement>
@@ -48,3 +46,3 @@ */
  */
-const getType = (path) => {
+const getType = (t, path) => {
   const typePath = path
@@ -69,3 +67,3 @@ .get('attributes')
  */
-const isComponent = (path) => {
+const isComponent = (t, path) => {
   const name = path.get('name');
@@ -83,7 +81,8 @@
 /**
+ * @param t
  * Transform vModel
 */
-const getModelDirective = (path, state, value) => {
+const getModelDirective = (t, path, value) => {
   const tag = getTagName(path);
-  const type = getType(path);
+  const type = getType(t, path);
 
@@ -102,3 +101,3 @@ addProp(path, t.jsxSpreadAttribute(
 
-  if (isComponent(path)) {
+  if (isComponent(t, path)) {
     addProp(path, t.jsxAttribute(t.jsxIdentifier('modelValue'), t.jsxExpressionContainer(value)));
@@ -111,10 +110,10 @@ return null;
     case 'select':
-      if (!state.vueVModelSelect) {
-        state.vueVModelSelect = addNamed(path, 'vModelSelect', 'vue');
+      if (!path.vueVModelSelect) {
+        path.vueVModelSelect = addNamed(path, 'vModelSelect', 'vue');
       }
-      modelToUse = state.vueVModelSelect;
+      modelToUse = path.vueVModelSelect;
       break;
     case 'textarea':
-      if (!state.vueVModelText) {
-        state.vueVModelText = addNamed(path, 'vModelText', 'vue');
+      if (!path.vueVModelText) {
+        path.vueVModelText = addNamed(path, 'vModelText', 'vue');
       }
@@ -125,18 +124,18 @@ break;
         case 'checkbox':
-          if (!state.vueVModelCheckbox) {
-            state.vueVModelCheckbox = addNamed(path, 'vModelCheckbox', 'vue');
+          if (!path.vueVModelCheckbox) {
+            path.vueVModelCheckbox = addNamed(path, 'vModelCheckbox', 'vue');
           }
-          modelToUse = state.vueVModelCheckbox;
+          modelToUse = path.vueVModelCheckbox;
           break;
         case 'radio':
-          if (!state.vueVModelRadio) {
-            state.vueVModelRadio = addNamed(path, 'vModelRadio', 'vue');
+          if (!path.vueVModelRadio) {
+            path.vueVModelRadio = addNamed(path, 'vModelRadio', 'vue');
           }
-          modelToUse = state.vueVModelRadio;
+          modelToUse = path.vueVModelRadio;
           break;
         default:
-          if (!state.vueVModelText) {
-            state.vueVModelText = addNamed(path, 'vModelText', 'vue');
+          if (!path.vueVModelText) {
+            path.vueVModelText = addNamed(path, 'vModelText', 'vue');
           }
-          modelToUse = state.vueVModelText;
+          modelToUse = path.vueVModelText;
       }
@@ -152,6 +151,7 @@ }
  *
+ * @param t
  * @param  path JSXAttribute
  * @returns null | Object<{ modifiers: Set<string>, valuePath: Path<Expression>}>
  */
-const parseVModel = (path) => {
+const parseVModel = (t, path) => {
   if (t.isJSXNamespacedName(path.get('name')) || !startsWithCamel(path.get('name.name').node, 'v-model')) {
@@ -173,6 +173,6 @@ return null;
 
-module.exports = {
+module.exports = (t) => ({
   JSXAttribute: {
-    exit(path, state) {
-      const parsed = parseVModel(path);
+    exit(path) {
+      const parsed = parseVModel(t, path);
       if (!parsed) {
@@ -186,3 +186,3 @@ return;
       // v-model={xx} --> v-_model={[directive, xx, void 0, { a: true, b: true }]}
-      const directive = getModelDirective(parent, state, value);
+      const directive = getModelDirective(t, parent, value);
       if (directive) {
@@ -214,2 +214,2 @@ path.replaceWith(
   },
-};
+});

src/transform-vue-jsx.js

@@ -1,2 +0,1 @@
-const t = require('@babel/types');
 const htmlTags = require('html-tags');
@@ -16,8 +15,2 @@ const svgTags = require('svg-tags');
 
-const filterEmpty = (value) => (
-  value !== undefined
-    && value !== null
-    && !t.isJSXEmptyExpression(value)
-);
-
 /**
@@ -32,6 +25,7 @@ * Checks if string is describing a directive
  * Transform JSXMemberExpression to MemberExpression
+ * @param t
  * @param path JSXMemberExpression
  * @returns MemberExpression
  */
-const transformJSXMemberExpression = (path) => {
+const transformJSXMemberExpression = (t, path) => {
   const objectPath = path.get('object');
@@ -41,3 +35,3 @@ const propertyPath = path.get('property');
   const transformedObject = objectPath.isJSXMemberExpression()
-    ? transformJSXMemberExpression(objectPath)
+    ? transformJSXMemberExpression(t, objectPath)
     : objectPath.isJSXIdentifier()
@@ -52,6 +46,7 @@ ? t.identifier(objectPath.node.name)
  * Get tag (first attribute for h) from JSXOpeningElement
+ * @param t
  * @param path JSXOpeningElement
  * @returns Identifier | StringLiteral | MemberExpression
  */
-const getTag = (path) => {
+const getTag = (t, path) => {
   const namePath = path.get('openingElement').get('name');
@@ -68,3 +63,3 @@ if (namePath.isJSXIdentifier()) {
   if (namePath.isJSXMemberExpression()) {
-    return transformJSXMemberExpression(namePath);
+    return transformJSXMemberExpression(t, namePath);
   }
@@ -74,3 +69,3 @@ throw new Error(`getTag: ${namePath.type} is not supported`);
 
-const getJSXAttributeName = (path) => {
+const getJSXAttributeName = (t, path) => {
   const nameNode = path.node.name;
@@ -84,6 +79,6 @@ if (t.isJSXIdentifier(nameNode)) {
 
-const getJSXAttributeValue = (path, injected) => {
+const getJSXAttributeValue = (t, path, injected) => {
   const valuePath = path.get('value');
   if (valuePath.isJSXElement()) {
-    return transformJSXElement(valuePath, injected);
+    return transformJSXElement(t, valuePath, injected);
   }
@@ -100,6 +95,6 @@ if (valuePath.isStringLiteral()) {
 
-const transformJSXAttribute = (path, attributesToMerge, directives, injected) => {
-  let name = getJSXAttributeName(path);
+const transformJSXAttribute = (t, path, attributesToMerge, directives, injected) => {
+  let name = getJSXAttributeName(t, path);
   if (name === 'on') {
-    const { properties = [] } = getJSXAttributeValue(path);
+    const { properties = [] } = getJSXAttributeValue(t, path);
     properties.forEach((property) => {
@@ -120,7 +115,7 @@ attributesToMerge.push(t.objectExpression([
     if (directiveName === '_model') {
-      directives.push(getJSXAttributeValue(path));
+      directives.push(getJSXAttributeValue(t, path));
     } else if (directiveName === 'show') {
       directives.push(t.arrayExpression([
         injected.vShow,
-        getJSXAttributeValue(path),
+        getJSXAttributeValue(t, path),
       ]));
@@ -132,3 +127,3 @@ } else {
         ]),
-        getJSXAttributeValue(path),
+        getJSXAttributeValue(t, path),
       ]));
@@ -145,3 +140,3 @@ }
           ),
-          getJSXAttributeValue(path, injected),
+          getJSXAttributeValue(t, path, injected),
         ),
@@ -160,7 +155,7 @@ ]),
     ),
-    getJSXAttributeValue(path, injected) || t.booleanLiteral(true),
+    getJSXAttributeValue(t, path, injected) || t.booleanLiteral(true),
   );
 };
 
-const transformJSXSpreadAttribute = (path, attributesToMerge) => {
+const transformJSXSpreadAttribute = (t, path, attributesToMerge) => {
   const argument = path.get('argument').node;
@@ -189,7 +184,8 @@ const { properties } = argument;
 
-const transformAttribute = (path, attributesToMerge, directives, injected) => (path.isJSXAttribute()
-  ? transformJSXAttribute(path, attributesToMerge, directives, injected)
-  : transformJSXSpreadAttribute(path, attributesToMerge));
+const transformAttribute = (t, path, attributesToMerge, directives, injected) => (
+  path.isJSXAttribute()
+    ? transformJSXAttribute(t, path, attributesToMerge, directives, injected)
+    : transformJSXSpreadAttribute(t, path, attributesToMerge));
 
-const getAttributes = (path, directives, injected) => {
+const getAttributes = (t, path, directives, injected) => {
   const attributes = path.get('openingElement').get('attributes');
@@ -204,3 +200,3 @@ if (attributes.length === 0) {
     .forEach((attribute) => {
-      const attr = transformAttribute(attribute, attributesToMerge, directives, injected);
+      const attr = transformAttribute(t, attribute, attributesToMerge, directives, injected);
       if (attr) {
@@ -221,6 +217,7 @@ attributeArray.push(attr);
  * Transform JSXText to StringLiteral
+ * @param t
  * @param path JSXText
  * @returns StringLiteral
  */
-const transformJSXText = (path) => {
+const transformJSXText = (t, path) => {
   const { node } = path;
@@ -280,9 +277,11 @@ const lines = node.value.split(/\r\n|\n|\r/);
  * Transform JSXSpreadChild
+ * @param t
  * @param path JSXSpreadChild
  * @returns SpreadElement
  */
-const transformJSXSpreadChild = (path) => t.spreadElement(path.get('expression').node);
+const transformJSXSpreadChild = (t, path) => t.spreadElement(path.get('expression').node);
 
 /**
  * Get children from Array of JSX children
+ * @param t
  * @param paths Array<JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement>
@@ -292,6 +291,6 @@ * @param injected {}
  */
-const getChildren = (paths, injected) => paths
+const getChildren = (t, paths, injected) => paths
   .map((path) => {
     if (path.isJSXText()) {
-      return transformJSXText(path);
+      return transformJSXText(t, path);
     }
@@ -302,3 +301,3 @@ if (path.isJSXExpressionContainer()) {
     if (path.isJSXSpreadChild()) {
-      return transformJSXSpreadChild(path);
+      return transformJSXSpreadChild(t, path);
     }
@@ -309,13 +308,17 @@ if (path.isCallExpression()) {
     if (path.isJSXElement()) {
-      return transformJSXElement(path, injected);
+      return transformJSXElement(t, path, injected);
     }
     throw new Error(`getChildren: ${path.type} is not supported`);
-  }).filter(filterEmpty);
+  }).filter((value) => (
+    value !== undefined
+      && value !== null
+      && !t.isJSXEmptyExpression(value)
+  ));
 
-const transformJSXElement = (path, injected) => {
+const transformJSXElement = (t, path, injected) => {
   const directives = [];
   const h = t.callExpression(injected.h, [
-    getTag(path),
-    getAttributes(path, directives, injected),
-    t.arrayExpression(getChildren(path.get('children'), injected)),
+    getTag(t, path),
+    getAttributes(t, path, directives, injected),
+    t.arrayExpression(getChildren(t, path.get('children'), injected)),
   ]);
@@ -331,27 +334,27 @@ if (!directives.length) {
 
-module.exports = {
+module.exports = (t) => ({
   JSXElement: {
-    exit(path, state) {
-      if (!state.vueCreateElementInjected) {
-        state.vueCreateElementInjected = addNamed(path, 'h', 'vue');
+    exit(path) {
+      if (!path.vueCreateElementInjected) {
+        path.vueCreateElementInjected = addNamed(path, 'h', 'vue');
       }
-      if (!state.vueMergePropsInjected) {
-        state.vueMergePropsInjected = addNamed(path, 'mergeProps', 'vue');
+      if (!path.vueMergePropsInjected) {
+        path.vueMergePropsInjected = addNamed(path, 'mergeProps', 'vue');
       }
-      if (!state.vueWithDirectivesInjected) {
-        state.vueWithDirectivesInjected = addNamed(path, 'withDirectives', 'vue');
+      if (!path.vueWithDirectivesInjected) {
+        path.vueWithDirectivesInjected = addNamed(path, 'withDirectives', 'vue');
       }
-      if (!state.vueResolveDirectiveInjected) {
-        state.vueResolveDirectiveInjected = addNamed(path, 'resolveDirective', 'vue');
+      if (!path.vueResolveDirectiveInjected) {
+        path.vueResolveDirectiveInjected = addNamed(path, 'resolveDirective', 'vue');
       }
-      if (!state.vueVShowInjected) {
-        state.vueVShowInjected = addNamed(path, 'vShow', 'vue');
+      if (!path.vueVShowInjected) {
+        path.vueVShowInjected = addNamed(path, 'vShow', 'vue');
       }
       path.replaceWith(
-        transformJSXElement(path, {
-          h: state.vueCreateElementInjected,
-          mergeProps: state.vueMergePropsInjected,
-          withDirectives: state.vueWithDirectivesInjected,
-          resolveDirective: state.vueResolveDirectiveInjected,
-          vShow: state.vueVShowInjected,
+        transformJSXElement(t, path, {
+          h: path.vueCreateElementInjected,
+          mergeProps: path.vueMergePropsInjected,
+          withDirectives: path.vueWithDirectivesInjected,
+          resolveDirective: path.vueResolveDirectiveInjected,
+          vShow: path.vueVShowInjected,
         }),
@@ -361,2 +364,2 @@ );
   },
-};
+});

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

944697

increased by4547.27%

Dependency count

5

decreased by-16.67%

Number of package files

12

increased by9.09%

Lines of code

3871

increased by635.93%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removed@babel/types@^7.9.6

• Updated@babel/helper-module-imports@^7.0.0

• Updated@babel/plugin-syntax-jsx@^7.0.0