Merge branch 'dev' of https://hub.fastgit.org/originjs/vue-codemod into dev

ygj6 · ygj6 · commit 3e116efec25d · 2021-06-18T15:05:48.000+08:00
diff --git a/bin/vue-codemod.ts b/bin/vue-codemod.ts
@@ -10,6 +10,7 @@ import * as globby from 'globby'
 import createDebug from 'debug'
 
 import builtInTransformations from '../transformations'
+import { excludedTransformations } from "../transformations"
 import vueTransformations from '../vue-transformations'
 import runTransformation from '../src/runTransformation'
 
@@ -67,7 +68,9 @@ async function main() {
 
   if (runAllTransformation) {
     for (let key in builtInTransformations) {
-      processTransformation(resolvedPaths, key, builtInTransformations[key])
+      if (!excludedTransformations.includes(key)) {
+        processTransformation(resolvedPaths, key, builtInTransformations[key])
+      }
     }
 
     for (let key in vueTransformations) {
diff --git a/transformations/add-emit-declaration.ts b/transformations/add-emit-declaration.ts
@@ -39,7 +39,7 @@ export const transformAST: ASTTransformation = ({ root, j }) => {
 
     if(!hasEmitsProperty){
     //  no emits property then create emits:[...]  AST
-      defaultExportBody.get(0).node.declaration.properties.unshift(j.objectProperty(j.identifier('emits'),j.arrayExpression(elements)));
+      defaultExportBody.get(0).node.declaration.properties?.unshift(j.objectProperty(j.identifier('emits'),j.arrayExpression(elements)));
     }
   }
 }
diff --git a/transformations/index.ts b/transformations/index.ts
@@ -37,4 +37,17 @@ const transformationMap: {
   'remove-extraneous-import': require('./remove-extraneous-import'),
 }
 
+export const excludedTransformations = [
+  'define-component',
+  'new-vue-to-create-app',
+  'remove-contextual-h-from-render',
+  'remove-production-tip',
+  'remove-trivial-root',
+  'remove-vue-use',
+  'root-prop-to-use',
+  'vue-as-namespace-import',
+  'add-import',
+  'remove-extraneous-import'
+]
+
 export default transformationMap
diff --git a/transformations/remove-vue-use.ts b/transformations/remove-vue-use.ts
@@ -36,7 +36,7 @@ export const transformAST: ASTTransformation<Params> = (
   const removableUseCalls = vueUseCalls.filter(({ node }) => {
     if (j.Identifier.check(node.arguments[0])) {
       const plugin = node.arguments[0].name
-      if (removablePlugins.includes(plugin)) {
+      if (removablePlugins?.includes(plugin)) {
         removedPlugins.push(plugin)
         return true
       }
diff --git a/transformations/render-to-resolveComponent.ts b/transformations/render-to-resolveComponent.ts
@@ -11,7 +11,7 @@ export const transformAST: ASTTransformation = (context) => {
       && node.params.length === 1
   })
     .filter(nodePath => nodePath.parent.parent.node.type === 'ExportDefaultDeclaration')
-  if (!renderCollections) return
+  if (!renderCollections.length) return
 
   // add import
   addImport(context, {
diff --git a/vue-transformations/__test__/v-bind-order-sensitive.spec.ts b/vue-transformations/__test__/v-bind-order-sensitive.spec.ts
@@ -0,0 +1,9 @@
+import { runTest } from '../../src/testUtils'
+
+runTest(
+  'Fix v-bind Merge Behavior',
+  'v-bind-order-sensitive',
+  'v-bind-object',
+  'vue',
+  'vue'
+)
diff --git a/vue-transformations/__test__/v-for-v-if-precedence-changed.spec.ts b/vue-transformations/__test__/v-for-v-if-precedence-changed.spec.ts
@@ -0,0 +1,18 @@
+import { runTest } from '../../src/testUtils'
+
+runTest(
+  'Fix the precedence problem of v-for and v-if before vue 2.6',
+  'v-for-v-if-precedence-changed',
+  'v-for-if-with-key',
+  'vue',
+  'vue'
+)
+
+runTest(
+  'Fix the precedence problem of v-for and v-if before vue 2.6',
+  'v-for-v-if-precedence-changed',
+  'v-for-if-without-key',
+  'vue',
+  'vue'
+)
+
diff --git a/vue-transformations/__testfixtures__/v-bind-order-sensitive/v-bind-object.input.vue b/vue-transformations/__testfixtures__/v-bind-order-sensitive/v-bind-object.input.vue
@@ -0,0 +1,3 @@
+<template>
+<div id='red' v-bind="{id:'blue'}"></div>
+</template>
diff --git a/vue-transformations/__testfixtures__/v-bind-order-sensitive/v-bind-object.output.vue b/vue-transformations/__testfixtures__/v-bind-order-sensitive/v-bind-object.output.vue
@@ -0,0 +1,3 @@
+<template>
+<div v-bind="{id:'blue'}" id='red' ></div>
+</template>
diff --git a/vue-transformations/__testfixtures__/v-for-v-if-precedence-changed/v-for-if-with-key.input.vue b/vue-transformations/__testfixtures__/v-for-v-if-precedence-changed/v-for-if-with-key.input.vue
@@ -0,0 +1,11 @@
+<template>
+<ul>
+<li
+v-for='user in users'
+v-if='user.isActive'
+:key='user.id'
+>
+{{user.name}}
+</li>
+</ul>
+</template>
diff --git a/vue-transformations/__testfixtures__/v-for-v-if-precedence-changed/v-for-if-with-key.output.vue b/vue-transformations/__testfixtures__/v-for-v-if-precedence-changed/v-for-if-with-key.output.vue
@@ -0,0 +1,13 @@
+<template>
+<ul>
+<template v-for='user in users' :key='user.id'>
+<li
+
+v-if='user.isActive'
+
+>
+{{user.name}}
+</li>
+</template>
+</ul>
+</template>
diff --git a/vue-transformations/__testfixtures__/v-for-v-if-precedence-changed/v-for-if-without-key.input.vue b/vue-transformations/__testfixtures__/v-for-v-if-precedence-changed/v-for-if-without-key.input.vue
@@ -0,0 +1,10 @@
+<template>
+<ul>
+<li
+v-for='user in users'
+v-if='user.isActive'
+>
+{{user.name}}
+</li>
+</ul>
+</template>
diff --git a/vue-transformations/__testfixtures__/v-for-v-if-precedence-changed/v-for-if-without-key.output.vue b/vue-transformations/__testfixtures__/v-for-v-if-precedence-changed/v-for-if-without-key.output.vue
@@ -0,0 +1,12 @@
+<template>
+<ul>
+<template v-for='user in users'>
+<li
+
+v-if='user.isActive'
+>
+{{user.name}}
+</li>
+</template>
+</ul>
+</template>
diff --git a/vue-transformations/index.ts b/vue-transformations/index.ts
@@ -12,6 +12,8 @@ const transformationMap: {
   'v-for-template-key': require('./v-for-template-key'),
   'v-else-if-key': require('./v-else-if-key'),
   'transition-group-root': require('./transition-group-root'),
+  'v-bind-order-sensitive': require('./v-bind-order-sensitive'),
+  'v-for-v-if-precedence-changed': require('./v-for-v-if-precedence-changed')
 }
 
 export default transformationMap
diff --git a/vue-transformations/v-bind-order-sensitive.ts b/vue-transformations/v-bind-order-sensitive.ts
@@ -0,0 +1,53 @@
+import { Node } from 'vue-eslint-parser/ast/nodes'
+import * as OperationUtils from '../src/operationUtils'
+import type { Operation } from '../src/operationUtils'
+import type { VueASTTransformation } from '../src/wrapVueTransformation'
+import * as parser from 'vue-eslint-parser'
+import wrap from '../src/wrapVueTransformation'
+
+export const transformAST: VueASTTransformation = (context) => {
+  let fixOperations: Operation[] = []
+  const { file } = context
+  const source = file.source
+  const toFixNodes: Node[] = findNodes(source)
+  toFixNodes.forEach((node) => {
+    fixOperations = fixOperations.concat(fix(node, source))
+  })
+  return fixOperations
+}
+
+export default wrap(transformAST)
+
+function findNodes(source: string): Node[] {
+  const options = { sourceType: 'module' }
+  const ast = parser.parse(source, options)
+  let toFixNodes: Node[] = []
+  let root: Node = <Node>ast.templateBody
+  parser.AST.traverseNodes(root, {
+    enterNode(node: Node) {
+      if (
+        node.type === 'VAttribute' &&
+        node.directive &&
+        node.key.name.name === 'bind' &&
+        node.parent.attributes.length > 1
+      ) {
+        toFixNodes.push(node)
+      }
+    },
+    leaveNode(node: Node) {},
+  })
+  return toFixNodes
+}
+
+function fix(node: Node, source: string): Operation[] {
+  let fixOperations: Operation[] = []
+  // get parent node
+  const target: any = node!.parent;
+  // get the value of v-bind according to the range
+  const bindValue:string = source.slice(node.range[0], node.range[1]) + ' ';
+  // remove node
+  fixOperations.push(OperationUtils.remove(node));
+  // add node to the first
+  fixOperations.push(OperationUtils.insertTextBefore(target.attributes[0],bindValue));
+  return fixOperations
+}
diff --git a/vue-transformations/v-for-v-if-precedence-changed.ts b/vue-transformations/v-for-v-if-precedence-changed.ts
@@ -0,0 +1,63 @@
+import { Node } from 'vue-eslint-parser/ast/nodes'
+import * as OperationUtils from '../src/operationUtils'
+import type { Operation } from '../src/operationUtils'
+import type { VueASTTransformation } from '../src/wrapVueTransformation'
+import * as parser from 'vue-eslint-parser'
+import wrap from '../src/wrapVueTransformation'
+
+export const transformAST: VueASTTransformation = (context) => {
+  let fixOperations: Operation[] = []
+  const { file } = context
+  const source = file.source
+  const toFixNodes: Node[] = findNodes(source)
+  toFixNodes.forEach((node) => {
+    fixOperations = fixOperations.concat(fix(node, source))
+  })
+  return fixOperations
+}
+
+export default wrap(transformAST)
+
+function findNodes(source: string): Node[] {
+  const options = { sourceType: 'module' };
+  const ast = parser.parse(source, options);
+  let toFixNodes: Node[] = [];
+  let root: Node = <Node>ast.templateBody;
+  parser.AST.traverseNodes(root, {
+    enterNode(node: Node) {
+      if (
+        node.type === 'VAttribute' &&
+        node.directive &&
+        node.key.name.name === 'for' &&
+        node.parent.attributes.length > 1
+      ) {
+        for (let ifNode of node.parent.attributes) {
+          // @ts-ignore
+          if (ifNode?.key?.name?.name === 'if') toFixNodes.push(node);
+        }
+      }
+    },
+    leaveNode(node: Node) {},
+  })
+  return toFixNodes
+}
+
+function fix(node: Node, source: string): Operation[] {
+  let fixOperations: Operation[] = [];
+  const target: any = node!.parent;
+  let forValue: string = source.slice(node.range[0], node.range[1]);
+  let keyNode: any = false;
+  for (let findKeyNode of target?.attributes) {
+    // @ts-ignore
+    if (findKeyNode?.key?.argument?.name === 'key') keyNode = findKeyNode;
+  }
+  if (keyNode) {
+    let keyValue: string = source.slice(keyNode.range[0],keyNode.range[1]);
+    forValue += ' ' + keyValue;
+    fixOperations.push (OperationUtils.remove(keyNode));
+  }
+  fixOperations.push(OperationUtils.remove(node));
+  fixOperations.push(OperationUtils.insertTextBefore(target!.parent, `<template ${forValue}>\n`));
+  fixOperations.push(OperationUtils.insertTextAfter(target!.parent, `\n</template>`))
+  return fixOperations
+}

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ export const transformAST: ASTTransformation = ({ root, j }) => {`
`39`	`39`
`40`	`40`	`if(!hasEmitsProperty){`
`41`	`41`	`// no emits property then create emits:[...] AST`
`42`		`- defaultExportBody.get(0).node.declaration.properties.unshift(j.objectProperty(j.identifier('emits'),j.arrayExpression(elements)));`
	`42`	`+ defaultExportBody.get(0).node.declaration.properties?.unshift(j.objectProperty(j.identifier('emits'),j.arrayExpression(elements)));`
`43`	`43`	`}`
`44`	`44`	`}`
`45`	`45`	`}`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ export const transformAST: ASTTransformation<Params> = (`
`36`	`36`	`const removableUseCalls = vueUseCalls.filter(({ node }) => {`
`37`	`37`	`if (j.Identifier.check(node.arguments[0])) {`
`38`	`38`	`const plugin = node.arguments[0].name`
`39`		`- if (removablePlugins.includes(plugin)) {`
	`39`	`+ if (removablePlugins?.includes(plugin)) {`
`40`	`40`	`removedPlugins.push(plugin)`
`41`	`41`	`return true`
`42`	`42`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+<div id='red' v-bind="{id:'blue'}"></div>`
	`3`	`+</template>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template>`
	`2`	`+<div v-bind="{id:'blue'}" id='red' ></div>`
	`3`	`+</template>`