feat: implement v-for and v-if precedence changed transformation

Author: ygj6

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'
+)
+

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>

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>

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>

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>

vue-transformations/index.ts

@@ -12,7 +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.spec')
+  'v-bind-order-sensitive': require('./v-bind-order-sensitive.spec'),
+  'v-for-v-if-precedence-changed': require('./v-for-v-if-precedence-changed')
 }
 
 export default transformationMap

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
+}