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

ygj6 · ygj6 · commit 4c8e1c6de2d3 · 2021-06-17T11:55:40.000+08:00
diff --git a/bin/vue-codemod.ts b/bin/vue-codemod.ts
@@ -126,7 +126,7 @@ function loadTransformationModule(nameOrPath: string) {
   if (jsTransformation) {
     return jsTransformation
   }
-  if (vueTransformations) {
+  if (vueTransformation) {
     return vueTransformation
   }
 
diff --git a/vue-transformations/__test__/transition-group-root.spec.ts b/vue-transformations/__test__/transition-group-root.spec.ts
@@ -0,0 +1,9 @@
+import { runTest } from '../../src/testUtils'
+
+runTest(
+  'Add tag attribute for default transition-group',
+  'transition-group-root',
+  'transition-group-root',
+  'vue',
+  'vue'
+)
diff --git a/vue-transformations/__test__/v-else-if-key.spec.ts b/vue-transformations/__test__/v-else-if-key.spec.ts
@@ -0,0 +1,9 @@
+import { runTest } from '../../src/testUtils'
+
+runTest(
+  'Delete the key attribute at the same level as if/else/else-if ',
+  'v-else-if-key',
+  'v-else-if-key',
+  'vue',
+  'vue'
+)
diff --git a/vue-transformations/__test__/v-for-template-key.spec.ts b/vue-transformations/__test__/v-for-template-key.spec.ts
@@ -0,0 +1,9 @@
+import { runTest } from '../../src/testUtils'
+
+runTest(
+  'Moves the key from the Template child node to Template',
+  'v-for-template-key',
+  'v-for-template-key',
+  'vue',
+  'vue'
+)
diff --git a/vue-transformations/__testfixtures__/transition-group-root/transition-group-root.input.vue b/vue-transformations/__testfixtures__/transition-group-root/transition-group-root.input.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="hello">
+    <transition-group tag="ul">
+      <li v-for="item in items" :key="item">
+        {{ item }}
+      </li>
+    </transition-group>
+    <transition-group>
+      <span v-for="item in items" v-bind:key="item" class="list-item">
+        {{ item }}
+      </span>
+    </transition-group>
+  </div>
+</template>
diff --git a/vue-transformations/__testfixtures__/transition-group-root/transition-group-root.output.vue b/vue-transformations/__testfixtures__/transition-group-root/transition-group-root.output.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="hello">
+    <transition-group tag="ul">
+      <li v-for="item in items" :key="item">
+        {{ item }}
+      </li>
+    </transition-group>
+    <transition-group tag="span">
+      <span v-for="item in items" v-bind:key="item" class="list-item">
+        {{ item }}
+      </span>
+    </transition-group>
+  </div>
+</template>
diff --git a/vue-transformations/__testfixtures__/v-else-if-key/v-else-if-key.input.vue b/vue-transformations/__testfixtures__/v-else-if-key/v-else-if-key.input.vue
@@ -0,0 +1,7 @@
+<template>
+  <div id="app">
+    <div v-if="condition" key="yes">Yes</div>
+    <div v-else-if="condition1" key="no">No</div>
+    <div v-else key="no">No</div>
+  </div>
+</template>
diff --git a/vue-transformations/__testfixtures__/v-else-if-key/v-else-if-key.output.vue b/vue-transformations/__testfixtures__/v-else-if-key/v-else-if-key.output.vue
@@ -0,0 +1,7 @@
+<template>
+  <div id="app">
+    <div v-if="condition" >Yes</div>
+    <div v-else-if="condition1" >No</div>
+    <div v-else >No</div>
+  </div>
+</template>
diff --git a/vue-transformations/__testfixtures__/v-for-template-key/v-for-template-key.input.vue b/vue-transformations/__testfixtures__/v-for-template-key/v-for-template-key.input.vue
@@ -0,0 +1,23 @@
+<template>
+  <div id="app">
+    <template v-for="item in items">
+      <ul id="v-for-object" class="demo">
+        <li class="example-1" v-for="value in object" v-bind:key="value.id">
+          {{ value }}
+        </li>
+      </ul>
+      <li
+        class="example-2"
+        :key="'bodying-id' + item.game.id + 'bodying-name'"
+        role="presentation"
+      ></li>
+      <div>
+        <li
+          class="example-1"
+          :key="'bottom-' + item.id"
+          role="presentation"
+        ></li>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue-transformations/__testfixtures__/v-for-template-key/v-for-template-key.output.vue b/vue-transformations/__testfixtures__/v-for-template-key/v-for-template-key.output.vue
@@ -0,0 +1,23 @@
+<template>
+  <div id="app">
+    <template v-for="item in items" :key="'bodying-id' + item.game.id + 'bodying-name'">
+      <ul id="v-for-object" class="demo">
+        <li class="example-1" v-for="value in object" v-bind:key="value.id">
+          {{ value }}
+        </li>
+      </ul>
+      <li
+        class="example-2"
+        
+        role="presentation"
+      ></li>
+      <div>
+        <li
+          class="example-1"
+          
+          role="presentation"
+        ></li>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/vue-transformations/index.ts b/vue-transformations/index.ts
@@ -9,6 +9,9 @@ const transformationMap: {
 } = {
   'slot-attribute': require('./slot-attribute'),
   'slot-default': require('./slot-default'),
+  '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'),
 }
 
 export default transformationMap
diff --git a/vue-transformations/transition-group-root.ts b/vue-transformations/transition-group-root.ts
@@ -0,0 +1,78 @@
+import * as OperationUtils from '../src/operationUtils'
+import * as parser from 'vue-eslint-parser'
+import type { Node } from 'vue-eslint-parser/ast/nodes'
+import type { Operation } from '../src/operationUtils'
+import type { VueASTTransformation } from '../src/wrapVueTransformation'
+import wrap from '../src/wrapVueTransformation'
+
+/**
+ * 每一个实际的规则，需要做以下几件事：
+ * 1、findNodes(fileInfo, ast): 寻找匹配规则的节点
+ * 2、fix(nodes): 完善匹配节点的增删改逻辑
+ * 3、applyFix(fileInfo, tempFixes): 执行fixer，对源码进行增删改，并返回转换后的代码
+ * @param context
+ */
+
+export const transformAST: VueASTTransformation = (context) => {
+  let fixOperations: Operation[] = []
+  const toFixNodes: Node[] = findNodes(context)
+  toFixNodes.forEach((node) => {
+    // fix(node) 返回的为 Operation 数组，因此用 concat 合并多个数组
+    fixOperations = fixOperations.concat(fix(node))
+  })
+  return fixOperations
+}
+
+export default wrap(transformAST)
+/**
+ * 定位 slot attribute 节点
+ *
+ * @param context { file: FileInfo, api: API }
+ * @param templateBody
+ * @returns 所有的 slot attribute 节点
+ */
+function findNodes(context: any): Node[] {
+  const { file } = context
+  const source = file.source
+  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 === 'VElement' && node.name === 'transition-group') {
+        toFixNodes.push(node)
+      }
+    },
+    leaveNode(node: Node) {},
+  })
+  return toFixNodes
+}
+/**
+ * The repair logic for
+ * @param node The Target Node
+ */
+function fix(node: any): Operation[] {
+  let fixOperations: Operation[] = []
+
+  // The current node has no attribute that is v-for
+  let havaTagAttr: boolean = false
+  node.startTag.attributes
+    .filter(
+      (attr: any) =>
+        attr.type === 'VAttribute' &&
+        attr.key.type === 'VIdentifier' &&
+        attr.key.name === 'tag'
+    )
+    .forEach((element: any) => {
+      havaTagAttr = true
+    })
+  if (havaTagAttr) {
+    return fixOperations
+  }
+
+  fixOperations.push(
+    OperationUtils.insertTextAt(node.startTag.range[1] - 1, ' tag="span"')
+  )
+  return fixOperations
+}
diff --git a/vue-transformations/v-else-if-key.ts b/vue-transformations/v-else-if-key.ts
@@ -0,0 +1,84 @@
+import * as OperationUtils from '../src/operationUtils'
+import * as parser from 'vue-eslint-parser'
+import type { Node } from 'vue-eslint-parser/ast/nodes'
+import type { Operation } from '../src/operationUtils'
+import type { VueASTTransformation } from '../src/wrapVueTransformation'
+import wrap from '../src/wrapVueTransformation'
+
+/**
+ * 每一个实际的规则，需要做以下几件事：
+ * 1、findNodes(fileInfo, ast): 寻找匹配规则的节点
+ * 2、fix(nodes): 完善匹配节点的增删改逻辑
+ * 3、applyFix(fileInfo, tempFixes): 执行fixer，对源码进行增删改，并返回转换后的代码
+ * @param context
+ */
+
+export const transformAST: VueASTTransformation = (context) => {
+  let fixOperations: Operation[] = []
+  const toFixNodes: Node[] = findNodes(context)
+  toFixNodes.forEach((node) => {
+    // fix(node) 返回的为 Operation 数组，因此用 concat 合并多个数组
+    fixOperations = fixOperations.concat(fix(node))
+  })
+  return fixOperations
+}
+
+export default wrap(transformAST)
+/**
+ * 定位 slot attribute 节点
+ *
+ * @param context { file: FileInfo, api: API }
+ * @param templateBody
+ * @returns 所有的 slot attribute 节点
+ */
+function findNodes(context: any): Node[] {
+  const { file } = context
+  const source = file.source
+  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.key.type === 'VIdentifier' &&
+        node.key.name === 'key'
+      ) {
+        toFixNodes.push(node)
+      }
+    },
+    leaveNode(node: Node) {},
+  })
+  return toFixNodes
+}
+/**
+ * The repair logic for
+ * @param node The Target Node
+ */
+function fix(node: any): Operation[] {
+  let fixOperations: Operation[] = []
+  const target: any = node!.parent!.parent
+
+  // The current node has no attribute that is v-for
+  let havaBrotherAttr: boolean = false
+  target.startTag.attributes
+    .filter(
+      (attr: any) =>
+        attr.type === 'VAttribute' &&
+        attr.key.type === 'VDirectiveKey' &&
+        (attr.key.name.name === 'if' ||
+          attr.key.name.name === 'else-if' ||
+          attr.key.name.name === 'else')
+    )
+    .forEach((element: any) => {
+      havaBrotherAttr = true
+    })
+  if (!havaBrotherAttr) {
+    return fixOperations
+  }
+
+  fixOperations.push(OperationUtils.remove(node))
+
+  return fixOperations
+}
diff --git a/vue-transformations/v-for-template-key.ts b/vue-transformations/v-for-template-key.ts

Original file line number	Diff line number	Diff line change
`@@ -126,7 +126,7 @@ function loadTransformationModule(nameOrPath: string) {`
`126`	`126`	`if (jsTransformation) {`
`127`	`127`	`return jsTransformation`
`128`	`128`	`}`
`129`		`- if (vueTransformations) {`
	`129`	`+ if (vueTransformation) {`
`130`	`130`	`return vueTransformation`
`131`	`131`	`}`
`132`	`132`