reorganize files [WIP] template refs

src/index.ts

@@ -2,7 +2,7 @@ import chalk from 'chalk'
 import fs from 'fs'
 import glob from 'glob'
 import path from 'path'
-import { MigrationHelper } from './MigrationHelper'
+import { MigrationHelper } from './lib/MigrationHelper'
 
 type Options = {
   source: string

src/lib/MigrationHelper.ts

@@ -0,0 +1,139 @@
+import { types } from '@babel/core'
+import { prepareimportSpecifiers } from './generators/imports'
+import { addComponents } from './transformers/components'
+import { addComputed } from './transformers/computed'
+import { addData } from './transformers/data'
+import { addHooks } from './transformers/hooks'
+import { addMethods } from './transformers/methods'
+import { addProps } from './transformers/props'
+import { addWatch } from './transformers/watch'
+import { getAst, getCode, getExportDefaultDeclaration } from './utilities/ast'
+import { replaceReferences } from './utilities/references'
+import {
+  ContentTemplate,
+  readTemplate,
+  updateTemplate
+} from './utilities/template'
+import { vue2Hooks, vue2HooksDeprecated } from './vue2'
+
+export class MigrationHelper {
+  template: ContentTemplate
+  templateOriginal: ContentTemplate
+  ast: types.File
+  astOriginal: types.File
+  setupMethod: types.ObjectMethod
+  returnStatement: types.ReturnStatement
+  exportDefaultDeclaration: types.ExportDefaultDeclaration
+  exportDefaultDeclarationOriginal: types.ExportDefaultDeclaration
+
+  constructor(source: string) {
+    this.template = readTemplate(source)
+    this.templateOriginal = JSON.parse(JSON.stringify(this.template))
+    this.ast = getAst(this.template.script)
+    this.astOriginal = types.cloneDeep(this.ast)
+    this.exportDefaultDeclaration = getExportDefaultDeclaration(this.ast)
+    this.exportDefaultDeclarationOriginal = getExportDefaultDeclaration(
+      this.astOriginal
+    )
+    this.returnStatement = types.returnStatement(types.objectExpression([]))
+    this.setupMethod = types.objectMethod(
+      'method',
+      types.identifier('setup'),
+      [types.identifier('props'), types.identifier('context')],
+      types.blockStatement([this.returnStatement])
+    )
+
+    this.addImports()
+    this.addSetupMethod()
+    this.updateBody()
+  }
+
+  getCode() {
+    console.log(getCode(this.ast))
+    return updateTemplate(this.template, getCode(this.ast))
+  }
+
+  private addImports() {
+    const importStatement = types.importDeclaration(
+      prepareimportSpecifiers(this.exportDefaultDeclarationOriginal),
+      types.stringLiteral('vue')
+    )
+
+    this.ast.program.body.unshift(importStatement)
+  }
+
+  private addSetupMethod() {
+    const declaration = this.exportDefaultDeclaration
+      ?.declaration as types.ObjectExpression
+
+    declaration.properties = [this.setupMethod]
+  }
+
+  private updateBody() {
+    const declaration = this.exportDefaultDeclarationOriginal
+      .declaration as types.ObjectExpression
+    const properties = declaration.properties
+
+    let dataPropsList: string[] = []
+    let methodsList: string[] = []
+    let computedPropsList: string[] = []
+
+    for (let i = 0; i < properties.length; i += 1) {
+      const property = properties[i]
+
+      if (types.isObjectMethod(property)) {
+        const key = property.key as types.Identifier
+
+        if (
+          vue2Hooks.includes(key.name) ||
+          vue2HooksDeprecated.includes(key.name)
+        ) {
+          // hooks
+          addHooks(this, property)
+          continue
+        }
+
+        if (key.name === 'data') {
+          // reactive properties
+          dataPropsList = addData(this, property)
+          continue
+        }
+
+        continue
+      }
+
+      if (types.isObjectProperty(property)) {
+        const key = property.key as types.Identifier
+
+        switch (key.name) {
+          case 'components':
+            addComponents(this, property)
+            break
+          case 'props':
+            addProps(this, property)
+            break
+          case 'methods':
+            methodsList = addMethods(this, property)
+            break
+          case 'computed':
+            computedPropsList = addComputed(this, property)
+            break
+          case 'watch':
+            addWatch(this, property)
+            break
+        }
+
+        continue
+      }
+
+      // not required
+      // if (property.type === 'SpreadElement') {}
+    }
+
+    // TODO: replacing ast breaks setupMethod, returnStatement references
+    // update ast instad of replace
+    this.ast = replaceReferences(this.ast, dataPropsList, 'this.', '', 'data.')
+    this.ast = replaceReferences(this.ast, computedPropsList, 'this.')
+    this.ast = replaceReferences(this.ast, methodsList, 'this.')
+  }
+}

src/lib/transformers/components.ts

@@ -0,0 +1,12 @@
+import { types } from '@babel/core'
+import { MigrationHelper } from '../MigrationHelper'
+
+export function addComponents(
+  migrationHelper: MigrationHelper,
+  property: types.ObjectProperty
+) {
+  const declaration = migrationHelper.exportDefaultDeclaration
+    .declaration as types.ObjectExpression
+
+  declaration.properties.splice(0, 0, property)
+}

src/lib/transformers/computed.ts

@@ -0,0 +1,84 @@
+import { types } from '@babel/core'
+import { MigrationHelper } from '../MigrationHelper'
+
+export function addComputed(
+  migrationHelper: MigrationHelper,
+  section: types.ObjectProperty
+) {
+  const setupMethodBody = migrationHelper.setupMethod.body.body
+  const computedProps = section.value as types.ObjectExpression
+  const properties = computedProps.properties
+  const computedPropsList = []
+
+  for (let i = 0; i < properties.length; i += 1) {
+    const property = properties[i]
+
+    if (types.isObjectMethod(property)) {
+      const key = property.key as types.Identifier
+
+      const computedStatement = types.variableDeclaration('const', [
+        types.variableDeclarator(
+          types.identifier(key.name),
+          types.callExpression(types.identifier('computed'), [
+            types.arrowFunctionExpression([], property.body)
+          ])
+        )
+      ])
+
+      computedPropsList.push(key.name)
+      setupMethodBody.splice(-1, 0, computedStatement)
+
+      continue
+    }
+
+    if (types.isObjectProperty(property)) {
+      const key = property.key as types.Identifier
+      const value = property.value
+
+      if (types.isArrowFunctionExpression(value)) {
+        const computedStatement = types.variableDeclaration('const', [
+          types.variableDeclarator(
+            types.identifier(key.name),
+            types.callExpression(types.identifier('computed'), [value])
+          )
+        ])
+
+        computedPropsList.push(key.name)
+        setupMethodBody.splice(-1, 0, computedStatement)
+      }
+
+      if (types.isFunctionExpression(value)) {
+        const computedStatement = types.variableDeclaration('const', [
+          types.variableDeclarator(
+            types.identifier(key.name),
+            types.callExpression(types.identifier('computed'), [
+              types.arrowFunctionExpression([], value.body)
+            ])
+          )
+        ])
+
+        computedPropsList.push(key.name)
+        setupMethodBody.splice(-1, 0, computedStatement)
+      }
+    }
+
+    // if (types.isSpreadElement(property)) {}
+  }
+
+  // export computed properties
+  const returnArguments = migrationHelper.returnStatement
+    .argument as types.ObjectExpression
+
+  computedPropsList.forEach(exportItem => {
+    returnArguments.properties.push(
+      types.objectProperty(
+        types.identifier(exportItem),
+        types.identifier(exportItem),
+        undefined,
+        true
+      )
+    )
+  })
+
+  return computedPropsList
+}

src/lib/transformers/data.ts

@@ -0,0 +1,42 @@
+import { types } from '@babel/core'
+import { MigrationHelper } from '../MigrationHelper'
+
+export function addData(
+  migrationHelper: MigrationHelper,
+  section: types.ObjectMethod
+) {
+  const setupMethodBody = migrationHelper.setupMethod.body.body
+  const dataReturnStatement = section.body.body[0] as types.ReturnStatement
+  const argument = dataReturnStatement.argument as types.ObjectExpression
+  const dataPropsList: string[] = []
+
+  const reactiveStatement = types.variableDeclaration('const', [
+    types.variableDeclarator(
+      types.identifier('data'),
+      types.callExpression(types.identifier('reactive'), [argument])
+    )
+  ])
+  setupMethodBody.unshift(reactiveStatement)
+
+  const returnArguments = migrationHelper.returnStatement
+    .argument as types.ObjectExpression
+
+  returnArguments.properties.unshift(
+    types.spreadElement(
+      types.callExpression(types.identifier('ref'), [types.identifier('data')])
+    )
+  )
+
+  // collect identifiers
+  const properties = argument.properties
+  for (let i = 0; i < properties.length; i += 1) {
+    const property = properties[i]
+
+    if (types.isObjectProperty(property)) {
+      const key = property.key as types.Identifier
+      dataPropsList.push(key.name)
+    }
+  }
+
+  return dataPropsList
+}