transformImport() {
  // 獲取所有import標籤
  const imports = this.$('import')
  for (let i = 0; i < imports.length; i++) {
    const node = imports.eq(i)
    if (!node.is('import')) return
    const importPath = node.attr('src')
    // 收集引入的路徑資訊
    this.importPath.push(importPath)
    // 將檔名統一轉換成短橫線風格
    let compName = TransformTemplate.toLine(
      path.basename(importPath, path.extname(importPath))
    )
    let template = node.next('template')
    while (template.is('template')) {
      const next = template.next('template')
      if (template.attr('is')) {
        const children = template.children()
        // 生成新的元件標籤例如
        // <import src="components/list.wxml" />
        // <template is="subList" />                => <list is="subList" />
        const comp = this.$(`<${compName} />`)
        .attr(template.attr())
        .append(children)
        comp.attr(TransformTemplate.toLine(this.compName), comp.attr('is'))
        comp.removeAttr('is')
        // 將當前標籤替換為新生成的元件標籤
        template.replaceWith(comp)
      }
      template = next
    }
    node.remove()
  }
}

< view wx:for="{{list}}" > {{item}} < /view >、< template is="objectCombine" data="{{for: a, bar: b}}" >< /template >

/**
 *
 * @param value 需要轉換的屬性值
 */
private transformValue(value: string): string {
  const exp = value.match(TransformTemplate.dbbraceRe)[1]
  try {
    let seq = false
    traverse(parseSync(`(${exp})`), {
      enter(path) {
        // 由於WXS支援物件鍵值相等的縮寫{{a,b,c}}，故此處需要額外處理
        if (path.isSequenceExpression()) {
          seq = true
        }
      },
    })
    if (!seq) {
      return exp
    }
    return `{${exp}}`
  } catch (e) {
    return `{${exp}}`
  }
}

import wepy from 'wepy'
 
// 在 page 中，通過 this.$parent 來存取 app 範例
export default class MyAPP extends wepy.app {
  customData = {}
 
  customFunction() {}
 
  onLaunch() {}
 
  onShow() {}
 
  // 對應 app.json 檔案
  // build 編譯時會根據 config 屬性自動生成 app.json 檔案
  config = {}
 
  globalData = {}
}

<script>
    export default {
        globalData: { 
            text: 'text' 
        }
        onLaunch: function() {
            console.log('App Launch，app啟動')
        },
        onShow: function() {
            console.log('App Show，app展現在前臺')
        },
        onHide: function() {
            console.log('App Hide，app不再展現在前臺')
        },
        methods: {
          // .....
        }
    }
<script>

let APP_EVENT = ['onLaunch', 'onShow', 'onHide', 'onError', 'onPageNotFound']
 
//....
 
// 實現wepy app到uniapp App.vue的轉換
 
t.program([
   ...body.filter((node: t.Node) => !t.isExportDeclaration(node)),
   // 插入appClass
   ...appClass,
   ...body
   .filter((node: t.Node) => t.isExportDeclaration(node))
   .map((node: object) => {
     // 對匯出的app進行處理
     if (t.isExportDeclaration(node)) {
       // 提前config屬性
       const { appEvents, methods, props } = this.clzProperty
       // 重新匯出vue style的物件
       return t.exportDefaultDeclaration(
         t.objectExpression([
           // mixins
           ...mixins,
           // props
           ...Object.keys(props)
           .filter((elem) => elem !== 'config')
           .map((elem) =>
                this.transformClassPropertyToObjectProperty(props[elem])
               ),
 
           // app events
           ...appEvents.map((elem) =>
                            this.transformClassMethodToObjectMethod(elem)
                           ),
 
           // methods
           t.objectProperty(
             t.identifier('methods'),
             t.objectExpression([
               ...methods.map((elem) =>
                              this.transformClassMethodToObjectMethod(elem)
                             ),
             ])
           ),
         ])
       )
     }
     return node
   }),
 ])
 
// .....　

import { NodePath, traverse, types } from '@babel/core'
 
this.clzProperty = {
  props: {},
  notCompatibleMethods: [],
  appEvents: [],
  listenEvents: []
}
 
traverse() {
    ClassProperty: (path) => {
        const name = path.node.key.name
        this.clzPropertyprops[name] = path.node
      },
    ClassMethod: (path) => {
      const methodName = path.node.key.name
      // 判斷是否存在於生命週期白名單內
      const isCompEvent = TOTAL_EVENT.includes(methodName)
      if (isCompEvent) {
        this.clzProperty.appEvents.push(path.node)
      } else {
        this.clzProperty.notCompatibleMethods.push(path.node)
      }
    },
    ObjectMethod: (path: any) => {
      if (path.parentPath?.container?.key?.name === 'events') {
        this.clzProperty.listenEvents.push(path.node)
      }
    }
  }

const body = this.ast.program.body
const { appEvents, notCompatibleMethods, props, listenEvents } =
      this.clzProperty
 
// 處理多個 created 生命週期重疊問題
const createIndexs: number[] = []
const sameList = ['created', 'attached', 'onLoad', 'onReady']
appEvents.forEach((node, index) => {
  const name: string = node.key.name
  if (sameList.includes(name)) {
    createIndexs.push(index)
  }
})
 
if (createIndexs.length > 1) {
  // 取出源節點內程式碼塊
  const originIndex = createIndexs[0]
  const originNode = appEvents[originIndex]
  const originBodyNode = originNode.body.body
  // 留下的剩餘節點需要取出其程式碼塊並塞入源節點中
  // 塞入完成後刪除剩餘節點
  createIndexs.splice(0, 1)
  createIndexs.forEach((index) => {
    const targetNode = appEvents[index]
    const targetBodyNode = targetNode.body.body
    // 將源節點內程式碼塊塞入目標節點中
    originBodyNode.push(...targetBodyNode)
    // 刪除源節點
    appEvents.splice(index, 1)
  })
}　

buildCompVueAst() {
    const body = this.ast.program.body
 
    return t.program([
      ...body.map((node) => {
          return t.exportDefaultDeclaration(
            t.objectExpression([
              ...Object.keys(props)
                .map((elem) => {
                  if (elem === 'methods') {
                    const node = props[elem]
                    // 1.events 內函數插入 methods 中
                    // 2.與生命週期平級的函數抽離出來插入 methods 中
                    node.value.properties.push(
                      ...listenEvents,
                      ...notCompatibleMethods
                    )
                  }
                  return props[elem]
                })
            ])
          )
        })
    ])
  }

buildCompVueAst() {
  const obp = [] as types.ObjectMethod[]
  // 獲取class屬性和方法
  const body = node.declaration.body.body
  const targetNodeArray = body.filter(child =>
    child.key.name === 'created'
  )
 
  if (targetNodeArray.length > 0) {
    let createdNode = targetNodeArray[0]
    this.forEachListenEvents(createdNode)
  } else {
    const targetNode = t.objectMethod(
      'method',
      t.identifier('created'),
      [],
      t.blockStatement([])
    )
    this.forEachListenEvents(targetNode)
    if (targetNode.body && targetNode.body.body.length > 0) {
      obp.push(targetNode)
    }
  }
  return obp
}

// 根據 events 中的 methods 構建事件監聽的呼叫
// 並塞入 created 中
forEachListenEvents(targetNode: types.ObjectMethod) {
  this.clzProperty.listenEvents.forEach((item) => {
    const methodsNode: any = item
    // 形如 this.$on('test', ()=>{})
    if (methodsNode?.key?.name) {
      // 建立 this 表示式
      const thisEx = t.thisExpression()
      // 建立 $on 表示式
      const ide = t.identifier('$eventBus.$on')
      // 合併 this.$on 表示式
      const om = t.memberExpression(thisEx, ide)
       
      // 建立事件名稱引數節點
      const eventNameIde = t.stringLiteral(
        methodsNode.key.name.toString().trim()
      )
       
      // 獲取方法體內程式碼內容節點
      const meNode = t.memberExpression(
        t.thisExpression(),
        t.identifier(methodsNode.key.name.toString().trim())
      )
      const ceNode = t.callExpression(om, [eventNameIde, meNode])
      const esNode = t.expressionStatement(ceNode)
      // 將合成後的程式碼插入到 created 中
      targetNode.body.body.push(esNode)
    }
  })
 }

transform() {
  const ast = this.buildCompVueAst()
  const compVue = this.genCode(ast)
 
  return { compVue, wxs: this.buildWxs() }
}

<script>
  import wepy from 'wepy';
  import Counter from '../components/counter';
   
  export default class Page extends wepy.page {
    config = {};
    components = {counter1: Counter};
     
    data = {};
    methods = {};
     
    events = {};
    onLoad() {};
    // Other properties
  }
</script>
 
<template lang="wxml">
<view>
  </view>
<counter1></counter1>
</template>
 
<style lang="less">
  /** less **/
</style>

// merge pageConfig to app config
const rawPagesJson = fs.readFileSync(path.join(dest, 'src/pages.json'))
// 資料操作
fs.writeFileSync(
  path.join(dest, 'src', 'pages.json'),
  prettJson(pagesJson)
)

<template name="foo">
  <view class="foo-content">
    <text class="text1">{{item.text1}}</text>
    <image class="pic" src="{{pic.url}}" mode="aspectFill"></image>
  </view>
</template>
 
<template name="bar">
  <view class="bar-content">
    <image class="bar" src="{{pic.url}}" mode="aspectFill"></image>
    <text class="text2">{{item.text2}}</text>
  </view>
</template>
 
<view class="footer">
  this is footer
</view>
              
<!-- index.wepy -->
<!-- 引入檔案 -->
<import src="somePath/fooBar.wxml" />
<!-- 確定展示的template及傳入屬性 -->
<script is="foo" data="{{item, pic}}" />
 
<!-- or, 此時僅會展示<template/>以外的內容即footer -->
<include src="somePath/fooBar.wxml">

searchVars() {
    const self = this
    const domList = this.$('template *')
    // 獲取wxml檔案中template節點下的所有text節點
    const text = domList.text()
    const dbbraceRe = new RegExp(TransformTemplate.dbbraceRe, 'g')
    let ivar
    // 拿到所有被{{}}包裹的動態表示式
    while ((ivar = dbbraceRe.exec(text))) {
      addVar(ivar[1])
    }
    // 遍歷所有節點的屬性，獲取所有的動態屬性
    for (let i = 0; i < domList.length; i++) {
      const dom = domList.eq(i)
      const attrs = Object.keys(dom.attr())
      for (let attr of attrs) {
        const value = dom.attr(attr)
        if (!TransformTemplate.dbbraceRe.test(value)) continue
        const exp = value.match(TransformTemplate.dbbraceRe)[1]
        try {
          addVar(exp)
        } catch (e) {
          addVar(`{${exp}}`)
        }
      }
    }
 
    function addVar(exp: string) {
      traverse(parseSync(`(${exp})`), { // 利用babel分析表示式中的所有變數
        Identifier(path) {
          if (
            path.parentPath.isMemberExpression() &&
            !path.parentPath.node.computed &&
            path.parentPath.node.property === path.node
          )
            return
          self.vars.add(path.node.name) // 收集變數
        },
      })
    }
  }

<template>
  <!--...-->
</template>
<script>
  export default {
    props: ['data', 'compName'],
    computed: {
      item() {
        return data.item
      },
      pic() {
        return data.pic
      }
    }
  }
</script>

<!--TItem.vue-->
<template>
  <view>
    <template v-if="compName == 'foo'">
      <view class="foo">
        <!--...-->
      </view>
    </template>
   
    <template v-if="compName == 'bar'">
      <view class="bar">
        <!--...-->
      </view>
    </template>
  </view>
</template>
 
<script>
export default {
  props: ['compName', 'data'],
  computed: {
     item() {
       return this.data.item
     },
     pic() {
       return this.data.pic
     }
  }
}
</script>
 
<!--TItem-incl.vue-->
<template>
  <view>
    <view class="footer">
      this is footer
    </view>
  </view>
</template>