Merge pull request NervJS#13524 from xuanzebin/perf/mini-template-clip

perf(template): 去除 template 中的 container 模版，提升模版运行速度

package.json

@@ -1,6 +1,6 @@
 {
   "name": "taro",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "description": "开放式跨端跨框架开发解决方案",
   "homepage": "https://github.com/NervJS/taro#readme",
   "author": "O2Team",

packages/babel-plugin-transform-react-jsx-to-rn-stylesheet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-transform-react-jsx-to-rn-stylesheet",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "description": "Transform stylesheet selector to style in JSX Elements.",
   "license": "MIT",
   "main": "dist/index.js",

packages/babel-plugin-transform-taroapi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-transform-taroapi",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "main": "dist/index.js",
   "scripts": {
     "build": "tsc",

packages/babel-preset-taro/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-taro",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "description": "Taro babel preset",
   "author": "yuche <[email protected]>",
   "homepage": "https://github.com/nervjs/taro/tree/master/packages/babel-preset-taro#readme",

packages/create-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/create-app",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "description": "create taro app with one command",
   "author": "VincentW <[email protected]>",
   "homepage": "https://github.com/nervjs/taro/tree/master/packages/create-app#readme",

packages/css-to-react-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "taro-css-to-react-native",
   "description": "Convert CSS text to a React Native stylesheet object",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [

packages/eslint-config-taro/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-taro",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "description": "Taro specific linting rules for ESLint",
   "main": "index.js",
   "files": [

packages/postcss-html-transform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-html-transform",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "description": "transform html tag name selector",
   "main": "index.js",
   "author": "drchan",

packages/postcss-plugin-constparse/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-plugin-constparse",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "description": "parse constants defined in config",
   "main": "index.js",
   "author": "Simba",

packages/postcss-pxtransform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-pxtransform",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "description": "PostCSS plugin px 转小程序 rpx及h5 rem 单位",
   "main": "index.js",
   "keywords": [

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/shared",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "description": "Taro utils internal use.",
   "author": "yuche <[email protected]>",
   "homepage": "https://github.com/nervjs/taro/tree/master/packages/shared#readme",

packages/shared/src/template.ts

@@ -76,6 +76,7 @@ const weixinAdapter: IAdapter = {
 }
 
 export class BaseTemplate {
+  protected _baseLevel = 0
   protected exportExpr = 'module.exports ='
   protected isSupportRecursive: boolean
   protected miniComponents: Components
@@ -97,6 +98,14 @@ export class BaseTemplate {
   public nestElements: Map<string, number> = nestElements
   public componentsAlias
 
+  set baseLevel (lv) {
+    this._baseLevel = lv
+  }
+
+  get baseLevel () {
+    return this._baseLevel
+  }
+
   private buildAttribute (attrs: Attributes, nodeName: string): string {
     return Object.keys(attrs)
       .map(k => `${k}="${k.startsWith('bind') || k.startsWith('on') || k.startsWith('catch') ? attrs[k] : `{${this.getAttrValue(attrs[k], k, nodeName)}}`}" `)
@@ -211,15 +220,16 @@ export class BaseTemplate {
 
   protected buildBaseTemplate () {
     const Adapter = this.Adapter
-
     const data = !this.isSupportRecursive && this.supportXS
       ? `${this.dataKeymap('i:item,l:\'\'')}`
       : this.dataKeymap('i:item')
-
+    const xs = this.supportXS
+      ? `xs.a(0, item.${Shortcuts.NodeName})`
+      : "'tmpl_0_' + item.nn"
     return `${this.buildXsTemplate()}
 <template name="taro_tmpl">
   <block ${Adapter.for}="{{root.cn}}" ${Adapter.key}="sid">
-    <template is="tmpl_0_${Shortcuts.Container}" data="{{${data}}}" />
+    <template is="{{${xs}}}" data="{{${data}}}" />
   </block>
 </template>
 `
@@ -267,18 +277,41 @@ export class BaseTemplate {
       : this.buildStandardComponentTemplate(comp, level)
   }
 
-  private getChildren (comp: Component, level: number): string {
-    const { isSupportRecursive, Adapter, supportXS } = this
-    const nextLevel = isSupportRecursive ? 0 : level + 1
+  private getChildrenTemplate (level: number) {
+    const { isSupportRecursive, supportXS } = this
+    const isLastRecursiveComp = !isSupportRecursive && level + 1 === this.baseLevel
+    const isUseXs = !this.isSupportRecursive && this.supportXS
+
+    if (isLastRecursiveComp) {
+      const data = isUseXs
+        ? `${this.dataKeymap('i:item,l:l')}`
+        : this.dataKeymap('i:item')
 
-    const data = !this.isSupportRecursive && supportXS
-      ? `${this.dataKeymap('i:item,l:l')}`
-      : this.dataKeymap('i:item')
+      return supportXS
+        ? `<template is="{{xs.e(${level})}}" data="{{${data}}}" />`
+        : `<template is="tmpl_${level}_${Shortcuts.Container}" data="{{${data}}}" />`
+    } else {
+      const data = isUseXs
+        ? `${this.dataKeymap(`i:item,l:xs.f(l,item.${Shortcuts.NodeName})`)}`
+        : `${this.dataKeymap('i:item')}`
+
+      const xs = !this.isSupportRecursive
+        ? `xs.a(${level}, item.${Shortcuts.NodeName}, l)`
+        : `xs.a(${level}, item.${Shortcuts.NodeName})`
 
-    let child = supportXS
-      ? `<template is="{{xs.e(${isSupportRecursive ? 0 : 'cid+1'})}}" data="{{${data}}}" />`
-      : `<template is="tmpl_${nextLevel}_${Shortcuts.Container}" data="{{${data}}}" />`
+      return supportXS
+        ? `<template is="{{${xs}}}" data="{{${data}}}" />`
+        : `<template is="{{'tmpl_' + ${level} + '_' + item.nn}}" data="{{${data}}}" />`
+    }
+
+  }
 
+  private getChildren (comp: Component, level: number): string {
+    const { isSupportRecursive, Adapter } = this
+    const nextLevel = isSupportRecursive ? 0 : level + 1
+
+    let child = this.getChildrenTemplate(nextLevel)
+
     if (isFunction(this.modifyLoopBody)) {
       child = this.modifyLoopBody(child, comp.nodeName)
     }
@@ -310,7 +343,7 @@ export class BaseTemplate {
 
     let res = `
 <template name="tmpl_${level}_${nodeAlias}">
-  <template is="{{${templateName}}}" data="{{${this.dataKeymap('i:i')}${children ? ',cid:cid' : ''}}}" />
+  <template is="{{${templateName}}}" data="{{${this.dataKeymap('i:i')}}}" />
 </template>
 
 <template name="tmpl_${level}_${nodeAlias}_focus">
@@ -381,10 +414,6 @@ export class BaseTemplate {
     const nextLevel = isSupportRecursive ? 0 : level + 1
     let template = ''
 
-    const data = !isSupportRecursive && supportXS
-      ? `${this.dataKeymap('i:item,l:l')}`
-      : this.dataKeymap('i:item')
-
     componentConfig.thirdPartyComponents.forEach((attrs, compName) => {
       if (compName === 'custom-wrapper') {
         template += `
@@ -396,9 +425,7 @@ export class BaseTemplate {
       } else {
         if (!isSupportRecursive && supportXS && nestElements.has(compName) && level + 1 > nestElements.get(compName)!) return
 
-        let child = supportXS
-          ? `<template is="{{xs.e(${isSupportRecursive ? 0 : 'cid+1'})}}" data="{{${data}}}" />`
-          : `<template is="tmpl_${nextLevel}_${Shortcuts.Container}" data="{{${data}}}" />`
+        let child = this.getChildrenTemplate(nextLevel)
 
         if (isFunction(this.modifyThirdPartyLoopBody)) {
           child = this.modifyThirdPartyLoopBody(child, compName)
@@ -419,28 +446,15 @@ export class BaseTemplate {
     return template
   }
 
-  protected buildContainerTemplate (level: number, restart = false) {
-    let tmpl = ''
-    if (restart) {
-      tmpl = `<block ${this.Adapter.if}="{{i.nn === '#text'}}">
-    <template is="tmpl_0_#text" data="{{i:i}}" />
+  // 最后一层的 comp 需要引用 container 进行重新的模版循环，其他情况不需要 container
+  protected buildContainerTemplate (level: number) {
+    const tmpl = `<block ${this.Adapter.if}="{{i.nn === '#text'}}">
+    <template is="tmpl_0_#text" data="{{${this.dataKeymap('i:i')}}}" />
   </block>
   <block ${this.Adapter.else}>
     ${!this.isSupportRecursive && this.supportXS ? '<comp i="{{i}}" l="{{l}}" />' : '<comp i="{{i}}" />'}
   </block>`
-    } else {
-      const xs = !this.isSupportRecursive
-        ? `xs.a(${level}, i.${Shortcuts.NodeName}, l)`
-        : `xs.a(${level}, i.${Shortcuts.NodeName})`
 
-      const data = !this.isSupportRecursive
-        ? `${this.dataKeymap(`i:i,cid:${level},l:xs.f(l,i.${Shortcuts.NodeName})`)}`
-        : `${this.dataKeymap('i:i')}`
-
-      tmpl = this.supportXS
-        ? `<template is="{{${xs}}}" data="{{${data}}}" />`
-        : `<template is="{{'tmpl_${level}_' + i.${Shortcuts.NodeName}}}" data="{{${this.dataKeymap('i:i')}}}" />`
-    }
     return `
 <template name="tmpl_${level}_${Shortcuts.Container}">
   ${tmpl}
@@ -472,22 +486,23 @@ export class BaseTemplate {
   }
 
   public buildBaseComponentTemplate = (ext: string) => {
-    const data = !this.isSupportRecursive && this.supportXS
+    const data = this.supportXS
       ? this.dataKeymap('i:i,l:l')
       : this.dataKeymap('i:i')
 
     return `<import src="./base${ext}" />
-<template is="tmpl_0_${Shortcuts.Container}" data="{{${data}}}" />`
+<template is="{{'tmpl_0_' + i.nn}}" data="{{${data}}}" />`
   }
 
   public buildCustomComponentTemplate = (ext: string) => {
     const Adapter = this.Adapter
     const data = !this.isSupportRecursive && this.supportXS
       ? `${this.dataKeymap('i:item,l:\'\'')}`
       : this.dataKeymap('i:item')
+
     return `<import src="./base${ext}" />
   <block ${Adapter.for}="{{i.${Shortcuts.Childnodes}}}" ${Adapter.key}="sid">
-    <template is="tmpl_0_container" data="{{${data}}}" />
+    <template is="{{'tmpl_0_' + item.nn}}" data="{{${data}}}" />
   </block>`
   }
 
@@ -498,9 +513,6 @@ export class BaseTemplate {
     return a === undefined ? b : a
   },
   c: ${this.buildXSTepFocus(Shortcuts.NodeName)},
-  d: function (i, v) {
-    return i === undefined ? v : i
-  },
   e: function (n) {
     return 'tmpl_' + n + '_${Shortcuts.Container}'
   },
@@ -555,25 +567,16 @@ export class RecursiveTemplate extends BaseTemplate {
 
     template += this.buildPlainTextTemplate(ZERO_FLOOR)
     template += this.buildThirdPartyTemplate(ZERO_FLOOR, componentConfig)
-    template += this.buildContainerTemplate(ZERO_FLOOR)
 
     return template
   }
 }
 
 export class UnRecursiveTemplate extends BaseTemplate {
   isSupportRecursive = false
-  private _baseLevel = 16
+  protected _baseLevel = 16
   private componentConfig: ComponentConfig
 
-  set baseLevel (lv) {
-    this._baseLevel = lv
-  }
-
-  get baseLevel () {
-    return this._baseLevel
-  }
-
   public buildTemplate = (componentConfig: ComponentConfig) => {
     this.componentConfig = componentConfig
     if (!this.miniComponents) {
@@ -594,7 +597,7 @@ export class UnRecursiveTemplate extends BaseTemplate {
   }
 
   protected buildFloor (level: number, components: string[], restart = false) {
-    if (restart) return this.buildContainerTemplate(level, restart)
+    if (restart) return this.buildContainerTemplate(level)
 
     let template = components.reduce((current, nodeName) => {
       const attributes: Attributes = this.miniComponents[nodeName]
@@ -604,13 +607,12 @@ export class UnRecursiveTemplate extends BaseTemplate {
 
     template += this.buildPlainTextTemplate(level)
     template += this.buildThirdPartyTemplate(level, this.componentConfig)
-    template += this.buildContainerTemplate(level, restart)
 
     return template
   }
 
   protected buildOptimizeFloor (level: number, components: string[], restart = false) {
-    if (restart) return this.buildContainerTemplate(level, restart)
+    if (restart) return this.buildContainerTemplate(level)
 
     let template = components.reduce((current, nodeName) => {
       if (level !== 0) {
@@ -632,7 +634,6 @@ export class UnRecursiveTemplate extends BaseTemplate {
 
     if (level === 0) template += this.buildPlainTextTemplate(level)
     template += this.buildThirdPartyTemplate(level, this.componentConfig)
-    template += this.buildContainerTemplate(level)
 
     return template
   }

packages/stylelint-config-taro-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-config-taro-rn",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "description": "Shareable stylelint config for React Native CSS modules",
   "main": "index.js",
   "files": [

packages/stylelint-taro-rn/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stylelint-taro-rn",
   "description": "A collection of React Native specific rules for stylelint",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "main": "dist/index.js",
   "files": [
     "dist",

packages/taro-alipay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-alipay",
-  "version": "3.6.9-alpha.7",
+  "version": "3.6.9-alpha.9",
   "description": "支付宝小程序平台插件",
   "author": "Chen-jj",
   "homepage": "https://github.com/nervjs/taro/tree/master/packages/taro-alipay#readme",

packages/taro-alipay/src/template.ts

@@ -1,4 +1,4 @@
-import { capitalize, toCamelCase } from '@tarojs/shared'
+import { capitalize, Shortcuts, toCamelCase } from '@tarojs/shared'
 import { RecursiveTemplate } from '@tarojs/shared/dist/template'
 
 export class Template extends RecursiveTemplate {
@@ -90,7 +90,7 @@ export class Template extends RecursiveTemplate {
     <block a:for="{{xs.f(i.cn)}}" a:key="sid">
       <swiper-item class="{{item.cl}}" style="{{item.st}}" id="{{item.uid||item.sid}}" data-sid="{{item.sid}}">
         <block a:for="{{item.cn}}" a:key="sid">
-          <template is="{{xs.e(0)}}" data="{{i:item}}" />
+          <template is="{{xs.a(0, item.${Shortcuts.NodeName})}}" data="{{i:item}}" />
         </block>
       </swiper-item>
     </block>
@@ -112,10 +112,10 @@ export class Template extends RecursiveTemplate {
 
     return `<view a:if="{{item.nn==='${slotAlias}'}}" slot="{{item.${slotNamePropAlias}}}" id="{{item.uid||item.sid}}" data-sid="{{item.sid}}">
         <block a:for="{{item.cn}}" a:key="sid">
-          <template is="{{xs.e(0)}}" data="{{i:item}}" />
+          <template is="{{xs.a(0, item.${Shortcuts.NodeName})}}" data="{{i:item}}" />
         </block>
       </view>
-      <template a:else is="{{xs.e(0)}}" data="{{i:item}}" />`
+      <template a:else is="{{xs.a(0, item.${Shortcuts.NodeName})}}" data="{{i:item}}" />`
   }
 
   buildXSTmpExtra () {