From c3e522af731525ea17006dfd529a7939c37bc767 Mon Sep 17 00:00:00 2001 From: ygj6 Date: Thu, 10 Jun 2021 20:01:59 +0800 Subject: [PATCH] feat: implement v-model change --- transformations/__tests__/v-model.spec.ts | 107 ++++++++++++++++++++++ transformations/index.ts | 1 + transformations/v-model.ts | 106 +++++++++++++++++++++ 3 files changed, 214 insertions(+) create mode 100644 transformations/__tests__/v-model.spec.ts create mode 100644 transformations/v-model.ts diff --git a/transformations/__tests__/v-model.spec.ts b/transformations/__tests__/v-model.spec.ts new file mode 100644 index 0000000..5f0d483 --- /dev/null +++ b/transformations/__tests__/v-model.spec.ts @@ -0,0 +1,107 @@ +import { defineInlineTest } from 'jscodeshift/src/testUtils' + +const transform = require('../v-model') + +defineInlineTest( + transform, + {}, + `export default { + props: { + value: String + }, + model: { + prop: 'title', + event: 'update' + }, + emits: ['update:modelValue'], + methods: { + changePageTitle(title) { + this.$emit('update:modelValue', title) + } + } +}`, + `export default { + props: { + modelValue: String + }, + + emits: ['update:modelValue'], + + methods: { + changePageTitle(title) { + this.$emit('update:modelValue', title) + }, + + updateTitle (title){ + this.$emit('update:modelValue', title) + } + } +};`, + 'transformation v-mode' +) + + +defineInlineTest( + transform, + {}, + `export default { + props: { + value: String + }, + model: { + prop: 'title', + event: 'change' + }, + emits: ['update:modelValue'] +}`, + `export default { + props: { + modelValue: String + }, + emits: ['update:modelValue'], + methods: { + changeTitle (title){ + this.$emit('update:modelValue', title) + } + } +}`, + 'transformation v-mode no methods option' +) + +defineInlineTest( + transform, + {}, + `export default { + props: { + value: String + }, + model: { + prop: 'title', + event: 'change' + }, + emits: ['update:modelValue'], + methods: { + change(param){ + this.$emit('change',param) + } + } +}`, + `export default { + props: { + modelValue: String + }, + + emits: ['update:modelValue'], + + methods: { + change(param){ + changeTitle(param); + }, + + changeTitle (title){ + this.$emit('update:modelValue', title) + } + } +};`, + 'transformation v-mode with a method call' +) diff --git a/transformations/index.ts b/transformations/index.ts index 8ec4e18..3ef7741 100644 --- a/transformations/index.ts +++ b/transformations/index.ts @@ -17,6 +17,7 @@ const transformationMap: { 'scoped-slots-to-slots': require('./scoped-slots-to-slots'), 'new-directive-api': require('./new-directive-api'), 'remove-vue-set-and-delete': require('./remove-vue-set-and-delete'), + 'v-model': require('./v-model'), // atomic ones 'remove-contextual-h-from-render': require('./remove-contextual-h-from-render'), diff --git a/transformations/v-model.ts b/transformations/v-model.ts new file mode 100644 index 0000000..995db53 --- /dev/null +++ b/transformations/v-model.ts @@ -0,0 +1,106 @@ +import wrap from '../src/wrapAstTransformation' +import type { ASTTransformation } from '../src/wrapAstTransformation' +import type { ObjectProperty } from 'jscodeshift' + +export const transformAST: ASTTransformation = ({ j, root }) => { + // find model option + const modelCollection = root + .find(j.ObjectProperty, node => node.key.name === 'model') + .filter(path => path.parent.parent.node.type == 'ExportDefaultDeclaration') + if (!modelCollection.length) return + + // find prop option which is in model + const propPath = modelCollection.find(j.ObjectProperty, (node: ObjectProperty) => { + // @ts-ignore + return node.key.name === 'prop' + }).get(0) + + // find event option which is in model + const eventPath = modelCollection.find(j.ObjectProperty, (node: ObjectProperty) => { + // @ts-ignore + return node.key.name === 'event' + }).get(0) + + const propName = propPath.node.value.value + const propEvent = eventPath.node.value.value + + // find the props option + const propsCollections = root + .find(j.ObjectProperty, node => node.key.name === 'props') + .filter(path => path.parent.parent.node.type === 'ExportDefaultDeclaration') + if (!propsCollections.length) return + + // find the value which is in props + const valueNode: ObjectProperty = propsCollections + .find(j.ObjectProperty, node => node.key.name === 'value') + .filter(path => path.parent.parent.node.key.name === 'props') + .get(0) + .node + + // replace the value with modelValue + // @ts-ignore + valueNode?.key.name = 'modelValue' + + // remove model option + modelCollection.remove() + + // find the methods option + const methodsCollections = root + .find(j.ObjectProperty, node => node.key.name === 'methods') + .filter(nodePath => nodePath.parent.parent.node.type === 'ExportDefaultDeclaration') + + const methodName = `${propEvent}${propName[0].toUpperCase().concat(propName.slice(1))}` + const methodBodyNode = j(` + export default { + ${methodName} (${propName}){ + this.$emit('update:modelValue', ${propName}) + }}`).find(j.ObjectMethod).get(0).node + + if (!methodsCollections.length) { + // method option dont exists ,push a method option + propsCollections.get(0) + .parent + .value + .properties + .push(j.objectProperty(j.identifier('methods'), j.objectExpression([methodBodyNode]))) + } else { + // method option existed ,push method body + methodsCollections.get(0) + .node + .value + .properties + .push(methodBodyNode) + } + + // replace all this.emit(eventName , prop) with ${methodName}(prop) + const callMethods = root.find(j.CallExpression, { + callee: { + type: 'MemberExpression', + object: { + type: 'ThisExpression' + }, + property: { + type: 'Identifier', + name: '$emit' + } + } + }).filter(nodePath => { + const methodArgs = nodePath.node.arguments + return methodArgs.length === 2 + && methodArgs[0].type === 'StringLiteral' + && methodArgs[0].value === propEvent + && methodArgs[1].type === 'Identifier' + }) + + if (callMethods.length) { + // get the second param name + callMethods.forEach(nodePath => { + // @ts-ignore + const paramName = nodePath.node.arguments[1].name + nodePath.parentPath.replace(j.expressionStatement(j.callExpression(j.identifier(methodName), [j.identifier(paramName)]))) + }) + } +} + +export default wrap(transformAST) +export const parser = 'babylon'