From e8f14edcdb09ecf7fbd0c88037a98440beb92331 Mon Sep 17 00:00:00 2001
From: qiang <guoshengqiang@live.com>
Date: Fri, 12 Jun 2020 10:46:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=B0=8F=E7=A8=8B=E5=BA=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=94=AF=E6=8C=81=20import=E3=80=81template=20?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/uni-migration/__tests__/wxml.spec.js | 59 ++++++++++++++-----
 .../mp-weixin/transform/file-transformer.js   |  4 +-
 .../mp-weixin/transform/import-template.js    | 22 +++++++
 .../mp-weixin/transform/script-transformer.js | 34 ++++++++++-
 .../transform/generate.js                     |  2 +-
 .../template-transformer/transform/index.js   | 10 +++-
 .../transform/traverse.js                     | 48 +++++++++++++--
 packages/uni-migration/package.json           |  3 +-
 8 files changed, 154 insertions(+), 28 deletions(-)
 create mode 100644 packages/uni-migration/lib/mp-weixin/transform/import-template.js

diff --git a/packages/uni-migration/__tests__/wxml.spec.js b/packages/uni-migration/__tests__/wxml.spec.js
index aad6f6191..c49d5fe9f 100644
--- a/packages/uni-migration/__tests__/wxml.spec.js
+++ b/packages/uni-migration/__tests__/wxml.spec.js
@@ -10,17 +10,22 @@ describe('wxml:compiler', () => {
     assertCodegen(
       `<view bindtouchstart="startDrag" catchtouchmove="{{ catchMove ? 'noop' : '' }}"/>`,
       `<uni-shadow-root><view @touchstart="startDrag" @touchmove.stop.prevent="_$self[(catchMove ? 'noop' : '')||'_$noop']($event)"></view></uni-shadow-root>`
-    )
-    assertCodegen(
-      `<uni-transition bind:click="click" bindtouchstart="startDrag" catchtouchmove="{{ catchMove ? 'noop' : '' }}"/>`,
-      `<uni-shadow-root><uni-transition @click="click" @touchstart.native="startDrag" @touchmove.native.stop.prevent="_$self[(catchMove ? 'noop' : '')||'_$noop']($event)"></uni-transition></uni-shadow-root>`
-    )
-  })
-  it('generate class', () => {
-    assertCodegen(
-      `<view class="van-notice-bar__content {{ !scrollable && !wrapable ? 'van-ellipsis' : '' }}"></view>`,
-      `<uni-shadow-root><view :class="'van-notice-bar__content '+(!scrollable && !wrapable ? 'van-ellipsis' : '')"></view></uni-shadow-root>`
-    )
+    )
+    assertCodegen(
+      `<uni-transition bind:click="click" bindtouchstart="startDrag" catchtouchmove="{{ catchMove ? 'noop' : '' }}"/>`,
+      `<uni-shadow-root><uni-transition @click="click" @touchstart.native="startDrag" @touchmove.native.stop.prevent="_$self[(catchMove ? 'noop' : '')||'_$noop']($event)"></uni-transition></uni-shadow-root>`
+    )
+    assertCodegen(
+      '<template name="toolbar"><view bindtap="emit"></view></template>',
+      // `<view @click="_$self.$parent[(emit)||'_$noop']($event)"></view>`
+      `<uni-shadow-root><template v-if="wxTemplateName === 'toolbar'"><view @click="_$self.$parent[('emit')]($event)"></view></template></uni-shadow-root>`
+    )
+  })
+  it('generate class', () => {
+    assertCodegen(
+      `<view class="van-notice-bar__content {{ !scrollable && !wrapable ? 'van-ellipsis' : '' }}"></view>`,
+      `<uni-shadow-root><view :class="'van-notice-bar__content '+(!scrollable && !wrapable ? 'van-ellipsis' : '')"></view></uni-shadow-root>`
+    )
   })
   it('generate v-if', () => {
     assertCodegen(
@@ -40,10 +45,10 @@ describe('wxml:compiler', () => {
     assertCodegen(
       '<view wx:for="{{ columns }}" wx:for-item="index" wx:key="*this"/>',
       `<uni-shadow-root><view v-for="(index,___i___) in (columns)" :key="index"></view></uni-shadow-root>`
-    )
-    assertCodegen(
-      '<view wx:for="{{ columns }}" wx:for-item="item" wx:key="{{item.value}}"/>',
-      `<uni-shadow-root><view v-for="(item,index) in (columns)" :key="item.value"></view></uni-shadow-root>`
+    )
+    assertCodegen(
+      '<view wx:for="{{ columns }}" wx:for-item="item" wx:key="{{item.value}}"/>',
+      `<uni-shadow-root><view v-for="(item,index) in (columns)" :key="item.value"></view></uni-shadow-root>`
     )
   })
   it('generate root element', () => {
@@ -63,5 +68,27 @@ describe('wxml:compiler', () => {
       '<slot></slot>',
       `<uni-shadow-root><slot></slot></uni-shadow-root>`
     )
+
+    assertCodegen(
+      `<import src="./toolbar.wxml" /><view></view>
+<wxs></wxs>`,
+      `<uni-shadow-root><view></view></uni-shadow-root>`
+    )
+
+    assertCodegen(
+      '<view><template is="toolbar" data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template></view>',
+      `<uni-shadow-root><view><toolbar v-bind="{showToolbar, cancelButtonText, title, confirmButtonText}" wx-template-name="toolbar"></toolbar></view></uni-shadow-root>`
+    )
+
+    assertCodegen(
+      '<template name="toolbar"><view></view></template>',
+      // `<view></view>`
+      `<uni-shadow-root><template v-if="wxTemplateName === 'toolbar'"><view></view></template></uni-shadow-root>`
+    )
+
+    assertCodegen(
+      '<template name="toolbar1"><view></view></template><template name="toolbar2"><view></view></template>',
+      `<uni-shadow-root><template v-if="wxTemplateName === 'toolbar1'"><view></view></template><template v-if="wxTemplateName === 'toolbar2'"><view></view></template></uni-shadow-root>`
+    )
   })
-})
+})
diff --git a/packages/uni-migration/lib/mp-weixin/transform/file-transformer.js b/packages/uni-migration/lib/mp-weixin/transform/file-transformer.js
index 45dd0df5e..3e2952761 100644
--- a/packages/uni-migration/lib/mp-weixin/transform/file-transformer.js
+++ b/packages/uni-migration/lib/mp-weixin/transform/file-transformer.js
@@ -50,7 +50,7 @@ module.exports = function transformFile(input, options) {
 
   const commentsCode = options.silent ? '' :
     `<!-- @dcloudio/uni-migration@${pkg.version} -->
-<!-- ${new Date().toLocaleString()} -->
+<!-- ${new Date().toLocaleString()} -->
 `
   return [
     `${commentsCode}<template>
@@ -66,4 +66,4 @@ ${styleCode}
     deps,
     wxsFiles
   ]
-}
+}
diff --git a/packages/uni-migration/lib/mp-weixin/transform/import-template.js b/packages/uni-migration/lib/mp-weixin/transform/import-template.js
new file mode 100644
index 000000000..ed81df567
--- /dev/null
+++ b/packages/uni-migration/lib/mp-weixin/transform/import-template.js
@@ -0,0 +1,22 @@
+const fs = require('fs')
+const path = require('path')
+const parse = require('./template-transformer/parser')
+
+function getTemplate (content) {
+  const template = []
+  const node = parse(content)
+  node.children.forEach(node => {
+    if (node.name === 'template') {
+      const name = node.attribs.name
+      if (name) {
+        template.push(name)
+      }
+    }
+  })
+  return template
+}
+
+module.exports = function (filepath, options) {
+  filepath = path.join(path.dirname(options.filepath), filepath)
+  return getTemplate(fs.readFileSync(filepath, 'utf8').toString().trim())
+}
\ No newline at end of file
diff --git a/packages/uni-migration/lib/mp-weixin/transform/script-transformer.js b/packages/uni-migration/lib/mp-weixin/transform/script-transformer.js
index 27be87673..37ae0f54c 100644
--- a/packages/uni-migration/lib/mp-weixin/transform/script-transformer.js
+++ b/packages/uni-migration/lib/mp-weixin/transform/script-transformer.js
@@ -1,16 +1,46 @@
 const fs = require('fs')
+const importTemplate = require('./import-template')
 
-function transformScript(content, route, code) {
+function transformScript (content, route, code) {
   return `${code}
 global['__wxRoute'] = '${route}'
 ${content}
 export default global['__wxComponents']['${route}']`
 }
 
+function genJsCode(components, code, state) {
+  const wxTemplateComponentProps = '__wxTemplateComponentProps'
+  const props = state.props
+  const importCode = []
+  const propsCode = []
+  const componentsCode = []
+  components.forEach((node, index) => {
+    const src = node.attribs.src
+    const templates = importTemplate(src, state)
+    const identifier = `__wxTemplateComponent${index}`
+    importCode.push(`import ${identifier} from '${src.replace(/.wxml$/, '.vue')}'`)
+    templates.forEach(template => {
+      // TODO 改为在 template 编译时静态分析
+      propsCode.push(`${wxTemplateComponentProps}['${template}'] && ${wxTemplateComponentProps}['${template}'].forEach(prop => ${identifier}.props[prop] = {type: null})`)
+      componentsCode.push(`'${template}' : ${identifier}`)
+    })
+  })
+
+  return components.length ? `
+const ${wxTemplateComponentProps} = ${JSON.stringify(props)}
+${importCode.join('\n')}
+${propsCode.join('\n')}
+${code.trim().replace(/\}\}$/, '')},${componentsCode.join(',')}}}
+`: code
+}
+
 module.exports = {
   transformScript,
   transformScriptFile(filepath, code, options, deps) {
     let content = ''
+    if (options.components.length) {
+      code = genJsCode(options.components, code, options)
+    }
     if (!fs.existsSync(filepath)) {
       content = `
 Component({})
@@ -21,4 +51,4 @@ Component({})
     }
     return transformScript(content, options.route, code, options)
   }
-}
+}
diff --git a/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/generate.js b/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/generate.js
index 2d0247df3..bb6d0217e 100644
--- a/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/generate.js
+++ b/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/generate.js
@@ -62,4 +62,4 @@ module.exports = function generate(node, state) {
     `<uni-shadow-root${state.shadowRootHost?(` class="${state.shadowRootHost}"`):''}>${genChildren(node).trim()}</uni-shadow-root>`,
     ...genWxs(state.wxs, state)
   ]
-}
+}
diff --git a/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/index.js b/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/index.js
index 3ada8a2a2..f38e828bf 100644
--- a/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/index.js
+++ b/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/index.js
@@ -3,6 +3,12 @@ const generate = require('./generate')
 
 module.exports = function transform(ast, options) {
   options.wxs = []
-  options.shouldWrapper = options.shouldWrapper || function noop() {}
+  // wxml 中使用 import 导入的组件
+  options.components = []
+  // wxml 中使用 <template name> 声明的模板
+  options.templates = []
+  // wxml 中 <template is> 分析得到的 props
+  options.props = {}
+  options.shouldWrapper = options.shouldWrapper || function noop () { }
   return generate(traverse(ast, options), options)
-}
+}
diff --git a/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js b/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js
index fc1a5b0d4..cd89c4f04 100644
--- a/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js
+++ b/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js
@@ -1,6 +1,7 @@
 const {
   parse
 } = require('mustache')
+const recast = require('recast')
 
 const TAGS = [
   'ad',
@@ -163,8 +164,12 @@ function transformEvent(name, value, attribs, state) {
     event = transformEventName(name.replace(captureCatchRE, ''), state) + '.stop.prevent.capture'
   }
   if (event !== name) {
-    let newValue = parseMustache(value, true)
-    if (newValue !== value) {
+    // 模板 <template name> 中用到的方法在其父组件
+    let newValue = parseMustache(value, !state.isTemplate)
+    if (state.isTemplate) {
+      // TODO 改为运行时判断
+      newValue = `_$self.$parent${process.env.UNI_PLATFORM === 'h5' ? '.$parent' : ''}[(${newValue})]($event)`
+    } else if (newValue !== value) {
       newValue = `_$self[(${newValue})||'_$noop']($event)`
     }
     attribs[event] = newValue
@@ -201,9 +206,11 @@ function transformAttrs(node, state) {
   }
   transformFor(attribs)
   const isComponent = !TAGS.includes(node.name)
+  const isTemplate = state.templates.length
   Object.keys(attribs).forEach(name => {
     transformAttr(name, attribs[name], attribs, {
-      isComponent
+      isComponent,
+      isTemplate
     })
   })
 }
@@ -212,7 +219,40 @@ function transformChildren(node, state) {
   node.children = node.children.filter(childNode => transformNode(childNode, state))
 }
 
+function transformTemplate(node, state) {
+  const attribs = node.attribs
+  if (attribs.name) {
+    const name = attribs.name
+    // 用于处理一个 wxml 文件内包含多个 template
+    attribs['v-if'] = `wxTemplateName === '${name}'`
+    delete attribs.name
+    state.templates.push(name)
+  } else if (attribs.is) {
+    const name = attribs.is
+    delete attribs.is
+    node.name = name
+    attribs['wx-template-name'] = name
+    const data = attribs.data
+    if (data && data.indexOf('{{') !== -1) {
+      const object = `{${parseMustache(data)}}`
+      attribs['v-bind'] = object
+      const ast = recast.parse(`const object = ${object}`)
+      const props = state.props[name] || ['wxTemplateName']
+      ast.program.body[0].declarations[0].init.properties.forEach(property => props.push(property.key.name))
+      state.props[name] = [...new Set(props)]
+      delete attribs.data
+    }
+  }
+}
+
 function transformNode(node, state) {
+  if (node.name === 'import') {
+    state.components.push(node)
+    return false
+  }
+  if (node.name === 'template') {
+    transformTemplate(node, state)
+  }
   if (node.name === 'wxs') {
     state.wxs.push(node)
     return false
@@ -227,4 +267,4 @@ function transformNode(node, state) {
 module.exports = function traverse(node, state) {
   transformNode(node, state)
   return node
-}
+}
diff --git a/packages/uni-migration/package.json b/packages/uni-migration/package.json
index 0f38e5438..9448ff0dd 100644
--- a/packages/uni-migration/package.json
+++ b/packages/uni-migration/package.json
@@ -25,6 +25,7 @@
     "commander": "^4.0.1",
     "fs-extra": "^8.1.0",
     "mustache": "^3.1.0",
-    "stricter-htmlparser2": "^3.9.6"
+    "stricter-htmlparser2": "^3.9.6",
+    "recast": "*"
   }
 }
-- 
GitLab