fix(v3): allow root elements with v-if, v-else-if and v-else

packages/uni-template-compiler/__tests__/compiler-app-plus-extra.service.spec.js

@@ -136,6 +136,12 @@ describe('codegen', () => {
       '<view data-a="1" :data-b="b"></view>',
       `with(this){return _c('view',{attrs:{"data-b":_$s(0,'a-data-b',b),"_i":0}})}`
     )
+  })
+  it('generate v-if directive', () => {
+    assertCodegen(
+      '<text v-if="a">1</text><text v-else-if="b">2</text><text v-else-if="c">3</text><text v-else>d</text>',
+      `with(this){return (_$s(0,'i',a))?_c('text'):(_$s(1,'e',b))?_c('text'):(_$s(2,'e',c))?_c('text'):_c('text')}`
+    )
   })
 })
 /* eslint-enable quotes */

packages/uni-template-compiler/__tests__/compiler-app-plus-extra.view.spec.js

@@ -75,6 +75,12 @@ describe('codegen', () => {
       '<view data-a="1" :data-b="b"></view>',
       `with(this){return _c('v-uni-view',{attrs:{"data-a":"1","data-b":_$g(0,'a-data-b'),"_i":0}})}`
     )
+  })
+  it('generate v-if directive', () => {
+    assertCodegen(
+      '<text v-if="a">1</text><text v-else-if="b">2</text><text v-else-if="c">3</text><text v-else>d</text>',
+      `with(this){return (_$g(0,'i'))?_c('v-uni-text',{attrs:{"_i":0}},[_v("1")]):(_$g(1,'e'))?_c('v-uni-text',{attrs:{"_i":1}},[_v("2")]):(_$g(2,'e'))?_c('v-uni-text',{attrs:{"_i":2}},[_v("3")]):_c('v-uni-text',{attrs:{"_i":3}},[_v("d")])}`
+    )
   })
 })
 /* eslint-enable quotes */

packages/uni-template-compiler/__tests__/demo.js

@@ -18,13 +18,8 @@ const scopedPath = path.resolve(__dirname, '../../')
 
 const compiler = require('../lib')
 const res = compiler.compile(
-  `
-<view class="h-page">
-    <slot></slot>
-    <h-dialog></h-dialog>
-    <h-navbar></h-navbar>
-    <h-toast></h-toast>
-  </view>
+  `
+<text v-if="a">1</text><text v-else-if="b">2</text><text v-else-if="c">3</text><text v-else>d</text>
 `, {
     miniprogram: true,
     resourcePath: '/User/fxy/Documents/test.wxml',
@@ -37,9 +32,9 @@ const res = compiler.compile(
     mp: {
       platform: 'mp-weixin'
     },
-    filterModules: ['swipe']
+    filterModules: ['swipe'],
     // service: true,
-    // view: true
+    view: true
 
   })
 console.log(require('util').inspect(res, {

packages/uni-template-compiler/lib/app/parser/base-parser.js

@@ -18,6 +18,10 @@ function parseIs (el, genVar) {
   }
 }
 
+function isProcessed (exp) {
+  return String(exp).indexOf('_$') === 0
+}
+// 当根节点是由if,elseif,else组成，会调用多次parseIf来解析root
 function parseIf (el, createGenVar, isScopedSlot) {
   if (!el.if) {
     return
@@ -26,11 +30,13 @@ function parseIf (el, createGenVar, isScopedSlot) {
     isScopedSlot = false
   }
   el.ifConditions.forEach(con => {
-    if (isVar(con.exp)) {
+    if (!isProcessed(con.exp) && isVar(con.exp)) {
       con.exp = createGenVar(con.block.attrsMap[ID], isScopedSlot)(con.block.elseif ? V_ELSE_IF : V_IF, con.exp)
     }
   })
-  el.if = createGenVar(el.attrsMap[ID], isScopedSlot)(V_IF, el.if)
+  if (!isProcessed(el.if)) {
+    el.if = createGenVar(el.attrsMap[ID], isScopedSlot)(V_IF, el.if)
+  }
 }
 
 function parseFor (el, createGenVar, isScopedSlot, fill = false) {

packages/uni-template-compiler/lib/app/service.js

@@ -156,6 +156,11 @@ function transformNode (el, parent, state, isScopedSlot) {
 
 function postTransformNode (el, options) {
   if (!el.parent) { // 从根节点开始递归处理
+    if (options.root) { // 当根节点是由if,elseif,else组成
+      parseIf(options.root, createGenVar)
+    } else {
+      options.root = el
+    }
     traverseNode(el, false, {
       forIteratorId: 0,
       transformNode,

packages/uni-template-compiler/lib/app/view.js

@@ -155,6 +155,11 @@ function transformNode (el, parent, state, isScopedSlot) {
 
 function postTransformNode (el, options) {
   if (!el.parent) { // 从根节点开始递归处理
+    if (options.root) { // 当根节点是由if,elseif,else组成
+      parseIf(options.root, createGenVar)
+    } else {
+      options.root = el
+    }
     traverseNode(el, false, {
       forIteratorId: 0,
       transformNode,
@@ -235,4 +240,4 @@ module.exports = {
   },
   postTransformNode,
   genData
-}
+}