[WIP] template refs

README.md

@@ -12,8 +12,8 @@ Features:
 - [x] update `computed` syntax
 - [x] update `watch` syntax
 - [x] integrate `methods` directly into setup
-- [ ] replace `this` usage with new `context` parameter
 - [ ] update template `ref` usage
+- [ ] replace `this` usage with new `context` parameter
 - [ ] convert `props` syntax
 - [ ] `component` registration
 - [ ] update `lifecycle` hooks and remove deperecated lifecycle hooks

__tests__/data/text.vue

@@ -63,10 +63,12 @@ export default {
     ],
 
     oneMethod() {
+      const html = this.$refs.templateRef.innerHTML
       console.log('oneMethod')
     },
 
     twoMethod: function() {
+      this.$refs.templateRef.innerHTML = '<span>html</span>'
       console.log('twoMethod')
     },
 

src/index.ts

@@ -4,6 +4,8 @@ import { addBody } from './lib/generators/body'
 import { addImports } from './lib/generators/imports'
 import { addSetupMethod } from './lib/generators/setupMethod'
 import { getTemplate } from './lib/template-utilities'
+import { updateTemplateRefs } from './lib/transformers/template-refs'
+import { updateThisCalls } from './lib/transformers/thisCalls'
 
 export async function vue2MigrationHelper(options: {
   path: string
@@ -22,6 +24,12 @@ export async function vue2MigrationHelper(options: {
   // add body
   addBody(outputAst, exportDefault)
 
+  // update template refs
+  updateTemplateRefs(outputAst)
+
+  // replace "this" calls
+  updateThisCalls(outputAst)
+
   // update component body
   console.log('\r\n\r\nTCL: code \r\n\r\n', getCode(outputAst))
 }

src/lib/generators/sections/computed.ts

@@ -5,6 +5,7 @@ export function addComputed(ast: types.File, section: types.ObjectProperty) {
   const setupMethodBody = getSetupMethod(ast).body.body
   const computedProps = section.value as types.ObjectExpression
   const properties = computedProps.properties
+  const toExportList = []
 
   for (let i = 0; i < properties.length; i += 1) {
     const property = properties[i]
@@ -21,6 +22,7 @@ export function addComputed(ast: types.File, section: types.ObjectProperty) {
         )
       ])
 
+      toExportList.push(key.name)
       setupMethodBody.splice(1, 0, computedStatement)
 
       continue
@@ -38,6 +40,7 @@ export function addComputed(ast: types.File, section: types.ObjectProperty) {
           )
         ])
 
+        toExportList.push(key.name)
         setupMethodBody.splice(1, 0, computedStatement)
       }
 
@@ -51,10 +54,26 @@ export function addComputed(ast: types.File, section: types.ObjectProperty) {
           )
         ])
 
+        toExportList.push(key.name)
         setupMethodBody.splice(1, 0, computedStatement)
       }
     }
 
     // if (types.isSpreadElement(property)) {}
   }
+
+  // export computed properties
+  const returnStatement = setupMethodBody.slice(-1)[0] as types.ReturnStatement
+  const argument = returnStatement.argument as types.ObjectExpression
+
+  toExportList.forEach(exportItem => {
+    argument.properties.push(
+      types.objectProperty(
+        types.identifier(exportItem),
+        types.identifier(exportItem)
+      )
+    )
+  })
+
+  // TODO: update computed prop usage
 }

src/lib/generators/sections/data.ts

@@ -25,4 +25,6 @@ export function addData(ast: types.File, section: types.ObjectMethod) {
 
   setupMethodBody.push(reactiveStatement)
   setupMethodBody.push(returnStatement)
+
+  //TODO: update data variable usage
 }

src/lib/generators/sections/methods.ts

@@ -5,6 +5,7 @@ export function addMethods(ast: types.File, section: types.ObjectProperty) {
   const setupMethodBody = getSetupMethod(ast).body.body
   const MethodsProps = section.value as types.ObjectExpression
   const properties = MethodsProps.properties
+  const toExportList = []
 
   for (let i = 0; i < properties.length; i += 1) {
     const property = properties[i]
@@ -19,6 +20,7 @@ export function addMethods(ast: types.File, section: types.ObjectProperty) {
         )
       ])
 
+      toExportList.push(key.name)
       setupMethodBody.splice(-1, 0, MethodsStatement)
 
       continue
@@ -33,6 +35,7 @@ export function addMethods(ast: types.File, section: types.ObjectProperty) {
           types.variableDeclarator(types.identifier(key.name), value)
         ])
 
+        toExportList.push(key.name)
         setupMethodBody.splice(-1, 0, MethodsStatement)
       }
 
@@ -44,6 +47,7 @@ export function addMethods(ast: types.File, section: types.ObjectProperty) {
           )
         ])
 
+        toExportList.push(key.name)
         setupMethodBody.splice(-1, 0, MethodsStatement)
       }
     }
@@ -62,8 +66,24 @@ export function addMethods(ast: types.File, section: types.ObjectProperty) {
           )
         ])
 
+        toExportList.push(key.name)
         setupMethodBody.splice(-1, 0, MethodsStatement)
       })
     }
   }
+
+  // export computed properties
+  const returnStatement = setupMethodBody.slice(-1)[0] as types.ReturnStatement
+  const argument = returnStatement.argument as types.ObjectExpression
+
+  toExportList.forEach(exportItem => {
+    argument.properties.push(
+      types.objectProperty(
+        types.identifier(exportItem),
+        types.identifier(exportItem)
+      )
+    )
+  })
+
+  // TODO: update method calls
 }

src/lib/generators/setupMethod.ts

@@ -4,19 +4,17 @@ export function addSetupMethod(ast: types.File) {
   for (let i = 0; i < ast.program.body.length; i += 1) {
     const statement = ast.program.body[i]
 
-    if (types.isExportDefaultDeclaration(statement)) {
-      ast.program.body[i] = types.exportDefaultDeclaration(
-        types.objectExpression([
-          types.objectMethod(
-            'method',
-            types.identifier('setup'),
-            [types.identifier('props'), types.identifier('context')],
-            types.blockStatement([])
-          )
-        ])
-      )
+    if (!types.isExportDefaultDeclaration(statement)) continue
 
-      break
-    }
+    ast.program.body[i] = types.exportDefaultDeclaration(
+      types.objectExpression([
+        types.objectMethod(
+          'method',
+          types.identifier('setup'),
+          [types.identifier('props'), types.identifier('context')],
+          types.blockStatement([])
+        )
+      ])
+    )
   }
 }

src/lib/transformers/template-refs.ts

@@ -0,0 +1,31 @@
+import { types } from '@babel/core'
+import traverse from '@babel/traverse'
+import { getSetupMethod } from '../ast-utilities'
+
+export function updateTemplateRefs(ast: types.File) {
+  const setupMethodBody = getSetupMethod(ast).body.body
+
+  traverse(ast, {
+    enter(nodePath) {
+      const node = nodePath.node
+
+      // if(path.node)
+      // console.log(node)
+    },
+    AssignmentExpression(nodePath) {
+      const node = nodePath.node
+
+      console.log(node.left)
+    }
+    // MemberExpression(nodePath) {
+    //   const property = nodePath.node.property as types.Identifier
+    //   const object = nodePath.node.object as types.Node
+
+    //   if (!property.name.includes('$refs')) return
+
+    //   console.log(property.name, object)
+
+    //   // nodePath.node = types.identifier(name.substr(0, 10))
+    // }
+  })
+}

src/lib/transformers/thisCalls.ts

@@ -0,0 +1,6 @@
+import { types } from '@babel/core'
+import { getSetupMethod } from '../ast-utilities'
+
+export function updateThisCalls(ast: types.File) {
+  const setupMethodBody = getSetupMethod(ast).body.body
+}