feat: implement v-bind-order-sensitive transformation

Author: ygj6

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

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>

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>

vue-transformations/index.ts

@@ -12,6 +12,7 @@ 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')
 }
 
 export default transformationMap

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