babel-plugin-transform-react-to-vue - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

index.js

@@ -0,1 +1,3 @@
+const eventRE = /^on/
+
 const isSpecialMethod = (() => {
@@ -89,3 +91,3 @@ const specialMethods = new Set(['render', 'componentDidMount', 'componentWillMount', 'componentWillUnmount'])
   path.traverse({
-    // this.state.* => this.$data.* and this.props.* => this.$attrs.*
+    // this.state.*, this.props.* => this.$attrs.*, this.props.children
     MemberExpression(path) {
@@ -95,3 +97,12 @@ const object = path.get('object')
 
-      if (t.isThisExpression(object) && t.isIdentifier(property) && property.node.name === 'state') {
+      if (
+        t.isMemberExpression(object) &&
+        t.isThisExpression(object.get('object')) &&
+        t.isIdentifier(object.get('property')) &&
+        (object.get('property').node.name === 'props' || object.get('property').node.name === '$attrs') &&
+        t.isIdentifier(property) &&
+        property.node.name === 'children'
+      ) {
+        path.replaceWith(t.memberExpression(t.thisExpression(), t.identifier('$children')))
+      } else if (t.isThisExpression(object) && t.isIdentifier(property) && property.node.name === 'state') {
         property.replaceWith(t.identifier('$data'))
@@ -102,2 +113,41 @@ } else if (t.isThisExpression(object) && t.isIdentifier(property) && property.node.name === 'props') {
     },
+    // children
+    VariableDeclaration(path) {
+      const declarators = path.get('declarations')
+      declarators.forEach(declaratorPath => {
+        const id = declaratorPath.get('id')
+        const init = declaratorPath.get('init')
+        if (
+          !t.isObjectPattern(id) ||
+          !t.isMemberExpression(init) ||
+          !t.isThisExpression(init.get('object')) ||
+          !t.isIdentifier(init.get('property')) ||
+          init.get('property').node.name !== 'props'
+        ) {
+          return
+        }
+        const properties = id.get('properties')
+        properties.forEach(propertyPath => {
+          if (!t.isObjectProperty(propertyPath)) {
+            return
+          }
+          const key = propertyPath.get('key')
+          if (!t.isIdentifier(key) || key.node.name !== 'children') {
+            return
+          }
+          const childrenIdentifier = propertyPath.get('value').node
+
+          const declarator = t.variableDeclarator(
+            childrenIdentifier,
+            t.memberExpression(t.thisExpression(), t.identifier('$children'))
+          )
+          if (properties.length === 1) {
+            declaratorPath.replaceWith(declarator)
+          } else {
+            propertyPath.remove()
+            declaratorPath.insertAfter(declarator)
+          }
+        })
+      })
+    },
     // className => class
@@ -159,2 +209,90 @@ JSXAttribute(path) {
 
+  // events
+  path.traverse({
+    BlockStatement(path) {
+      const body = path.get('body')
+      const eventMap = {}
+      body.forEach(statementPath => {
+        if (!t.isVariableDeclaration(statementPath)) {
+          return
+        }
+
+        const declarations = statementPath.get('declarations')
+
+        declarations.forEach(declarationPath => {
+          const id = declarationPath.get('id')
+          const init = declarationPath.get('init')
+          if (
+            !t.isObjectPattern(id) ||
+            !t.isMemberExpression(init) ||
+            !t.isThisExpression(init.get('object')) ||
+            !t.isIdentifier(init.get('property')) ||
+            init.get('property').node.name !== 'props'
+          ) {
+            return
+          }
+          const properties = id.get('properties')
+
+          properties.forEach(propertyPath => {
+            if (!t.isObjectProperty(propertyPath)) {
+              return
+            }
+            const key = propertyPath.get('key')
+            const value = propertyPath.get('value')
+            if (!eventRE.test(key.node.name)) {
+              return
+            }
+            eventMap[value.node.name] = key.node.name
+            propertyPath.remove()
+          })
+          if (id.get('properties').length === 0) {
+            declarationPath.remove()
+          }
+        })
+      })
+
+      path.traverse({
+        CallExpression(path) {
+          const callee = path.get('callee')
+          if (!t.isIdentifier(callee) || eventMap[callee.node.name] === undefined) {
+            return
+          }
+          callee.replaceWith(
+            t.memberExpression(
+              t.memberExpression(t.thisExpression(), t.identifier('props')),
+              t.identifier(eventMap[callee.node.name])
+            )
+          )
+        }
+      })
+
+      path.traverse({
+        CallExpression(path) {
+          const callee = path.get('callee')
+          if (
+            !t.isMemberExpression(callee) ||
+            !t.isMemberExpression(callee.get('object')) ||
+            !t.isThisExpression(callee.get('object').get('object')) ||
+            !t.isIdentifier(callee.get('object').get('property')) ||
+            callee.get('object').get('property').node.name !== 'props' ||
+            !t.isIdentifier(callee.get('property')) ||
+            !eventRE.test(callee.get('property').node.name)
+          ) {
+            return
+          }
+          const eventNameUppercased = callee.get('property').node.name.replace(eventRE, '')
+          const eventName = `${eventNameUppercased[0].toLowerCase()}${eventNameUppercased.slice(1)}`
+
+          const args = path.get('arguments').map(path => path.node)
+          path.replaceWith(
+            t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('$emit')), [
+              t.stringLiteral(eventName),
+              ...args
+            ])
+          )
+        }
+      })
+    }
+  })
+
   reactBody.get('body').forEach(reactProperty => {
@@ -161,0 +299,0 @@ const key = reactProperty.get('key')

package.json

 {
   "name": "babel-plugin-transform-react-to-vue",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "my impeccable project",
@@ -5,0 +5,0 @@ "repository": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

17739

increased by35.94%

Lines of code

378

increased by51.81%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes