feat: implement .sync modifiers in v-bind to v-model transformation (vuejs#12)

Author: ygj6

Diff for: src/operationUtils.ts

@@ -128,3 +128,15 @@ export function removeRange(range: number[]): Operation {
     text: ''
   }
 }
+
+/**
+ * Get text of Node
+ * @param {Node} node The node to get text
+ * @param {string} source The full text of the source code
+ * @returns {string} The text of the node
+ */
+export function getText(node: Node, source: string): string {
+  const start = node.range[0]
+  const end = node.range[1]
+  return source.slice(start, end)
+}

Diff for: vue-transformations/__test__/v-bind-sync.spec.ts

@@ -0,0 +1,9 @@
+import { runTest } from '../../src/testUtils'
+
+runTest(
+  'Convert usage of slot-scope before vue 2.6',
+  'v-bind-sync',
+  'v-bind-sync',
+  'vue',
+  'vue'
+)

Diff for: vue-transformations/__testfixtures__/v-bind-sync/v-bind-sync.input.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="hello">
+    <ChildComponent :title.sync="pageTitle" />
+  </div>
+</template>

Diff for: vue-transformations/__testfixtures__/v-bind-sync/v-bind-sync.output.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="hello">
+    <ChildComponent v-model:title="pageTitle" />
+  </div>
+</template>

Diff for: vue-transformations/index.ts

@@ -15,7 +15,8 @@ const transformationMap: {
   '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'),
-  'remove-listeners': require('./remove-listeners')
+  'remove-listeners': require('./remove-listeners'),
+  'v-bind-sync': require('./v-bind-sync')
 }
 
 export const excludedVueTransformations = ['v-bind-order-sensitive']

Diff for: vue-transformations/slot-scope-attribute.ts

@@ -51,12 +51,8 @@ function findNodes(context: any): Node[] {
 function fix(node: Node, source: string): Operation[] {
   let fixOperations: Operation[] = []
   const element: any = node!.parent!.parent
-  const scopeValue: string = source.slice(
-    // @ts-ignore
-    node.value.range[0],
-    // @ts-ignore
-    node.value.range[1]
-  )
+  // @ts-ignore
+  const scopeValue: string = OperationUtils.getText(node.value, source)
 
   if (!!element && element.type == 'VElement' && element.name == 'template') {
     // template element replace slot-scope="xxx" to v-slot="xxx"

Diff for: vue-transformations/v-bind-sync.ts

@@ -0,0 +1,71 @@
+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(context)
+  toFixNodes.forEach(node => {
+    fixOperations = fixOperations.concat(fix(node, source))
+  })
+  return fixOperations
+}
+
+export default wrap(transformAST)
+/**
+ * search slot attribute nodes
+ *
+ * @param context
+ * @returns slot attribute nodes
+ */
+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.directive &&
+        node.key.name.name === 'bind'
+      ) {
+        toFixNodes.push(node)
+      }
+    },
+    leaveNode(node: Node) {}
+  })
+  return toFixNodes
+}
+/**
+ * fix logic
+ * @param node
+ */
+function fix(node: Node, source: string): Operation[] {
+  let fixOperations: Operation[] = []
+  // @ts-ignore
+  const keyNode = node.key
+  const argument = keyNode.argument
+  const modifiers = keyNode.modifiers
+  const bindArgument = OperationUtils.getText(argument, source)
+
+  if (
+    argument !== null &&
+    modifiers.length === 1 &&
+    modifiers[0].name === 'sync'
+  ) {
+    // .sync modifiers in v-bind should be replaced with v-model
+    fixOperations.push(
+      OperationUtils.replaceText(keyNode, `v-model:${bindArgument}`)
+    )
+  }
+
+  return fixOperations
+}