Merge pull request Meituan-Dianping#143 from Meituan-Dianping/develop

Develop

packages/mpvue-template-compiler/build.js

@@ -4094,10 +4094,10 @@ function getWxEleId (index, arr) {
 }
 
 // 检查不允许在 v-for 的时候出现2个及其以上相同 iterator1
-function checkRepeatIterator (arr) {
+function checkRepeatIterator (arr, options) {
   var len = arr.length;
   if (len > 1 && len !== new Set(arr).size) {
-    console.log('\n', '\x1b[31m', 'error: ', '嵌套的 v-for 不能连续使用相同的 iterator:', arr);
+    options.warn(("同一组件内嵌套的 v-for 不能连续使用相同的索引，目前为: " + arr), false);
   }
 }
 
@@ -4128,7 +4128,7 @@ function addAttr$1 (path, key, value, inVdom) {
   path.attrs.push({ name: key, value: value });
 }
 
-function mark (path, deps, iteratorArr) {
+function mark (path, options, deps, iteratorArr) {
   if ( iteratorArr === void 0 ) iteratorArr = [];
 
   fixDefaultIterator(path);
@@ -4146,21 +4146,20 @@ function mark (path, deps, iteratorArr) {
     currentArr.push(iterator1);
   }
 
-  checkRepeatIterator(currentArr);
+  checkRepeatIterator(currentArr, options);
 
   // 递归子节点
   if (children && children.length) {
     children.forEach(function (v, i) {
       // const counterIterator = children.slice(0, i).filter(v => v.for).map(v => v.for + '.length').join(`+'-'+`)
-      mark(v, deps, currentArr);
+      mark(v, options, deps, currentArr);
     });
   }
 
   // fix: v-else events
-  if (ifConditions && ifConditions.length && !ifConditions._handled) {
-    ifConditions._handled = true;
-    ifConditions.forEach(function (v, i) {
-      mark(v.block, deps, currentArr);
+  if (ifConditions && ifConditions.length > 1) {
+    ifConditions.slice(1).forEach(function (v, i) {
+      mark(v.block, options, deps, currentArr);
     });
   }
 
@@ -4192,9 +4191,9 @@ function mark (path, deps, iteratorArr) {
 
 // 全局的事件触发器 ID
 // let eIndex = 0
-function markComponent (ast) {
+function markComponent (ast, options) {
   var deps = { comIndex: 0, eventIndex: 0 };
-  mark(ast, deps);
+  mark(ast, options, deps);
 
   return ast
 }
@@ -4210,7 +4209,7 @@ var createCompiler = createCompilerCreator(function baseCompile (
   options
 ) {
   var originAst = parse(template$$1.trim(), options);
-  var ast = markComponent(originAst);
+  var ast = markComponent(originAst, options);
   optimize(ast, options);
   var code = generate$1(ast, options);
   return {

packages/mpvue-template-compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mpvue-template-compiler",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "mpvue template compiler for Vue",
   "main": "index.js",
   "repository": {

packages/mpvue/index.js

@@ -4145,7 +4145,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.5';
+Vue$3.mpvueVersion = '1.0.6';
 
 /* globals renderer */
 
@@ -4924,6 +4924,9 @@ function patch () {
 
 function callHook$1 (vm, hook, params) {
   var handlers = vm.$options[hook];
+  if (hook === 'onError') {
+    handlers = [handlers];
+  }
 
   var ret;
   if (handlers) {
@@ -4999,8 +5002,7 @@ function initMP (mpType, next) {
         mp.app = this;
         mp.status = 'launch';
         this.globalData.appOptions = mp.appOptions = options;
-
-        callHook$1(rootVueVM, 'onLaunch');
+        callHook$1(rootVueVM, 'onLaunch', options);
         next();
       },
 
@@ -5010,7 +5012,7 @@ function initMP (mpType, next) {
 
         mp.status = 'show';
         this.globalData.appOptions = mp.appOptions = options;
-        callHook$1(rootVueVM, 'onShow');
+        callHook$1(rootVueVM, 'onShow', options);
       },
 
       // Do something when app hide.
@@ -5086,7 +5088,7 @@ function initMP (mpType, next) {
         mp.query = query;
         mp.status = 'load';
         getGlobalData(app, rootVueVM);
-        callHook$1(rootVueVM, 'onLoad');
+        callHook$1(rootVueVM, 'onLoad', query);
       },
 
       // 生命周期函数--监听页面显示

packages/mpvue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mpvue",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Vue Runtime for mini program",
   "main": "index.js",
   "repository": {

src/platforms/mp/compiler/create-compiler.js

@@ -16,7 +16,7 @@ export const createCompiler = createCompilerCreator(function baseCompile (
   options: CompilerOptions
 ): CompiledResult {
   const originAst = parse(template.trim(), options)
-  const ast = markComponent(originAst)
+  const ast = markComponent(originAst, options)
   optimize(ast, options)
   const code = generate(ast, options)
   return {

src/platforms/mp/compiler/mark-component.js

@@ -14,10 +14,10 @@ function getWxEleId (index, arr) {
 }
 
 // 检查不允许在 v-for 的时候出现2个及其以上相同 iterator1
-function checkRepeatIterator (arr) {
+function checkRepeatIterator (arr, options) {
   const len = arr.length
   if (len > 1 && len !== new Set(arr).size) {
-    console.log('\n', '\x1b[31m', 'error: ', '嵌套的 v-for 不能连续使用相同的 iterator:', arr)
+    options.warn(`同一组件内嵌套的 v-for 不能连续使用相同的索引，目前为: ${arr}`, false)
   }
 }
 
@@ -47,7 +47,7 @@ function addAttr (path, key, value, inVdom) {
   path.attrs.push({ name: key, value })
 }
 
-function mark (path, deps, iteratorArr = []) {
+function mark (path, options, deps, iteratorArr = []) {
   fixDefaultIterator(path)
 
   const { tag, children, iterator1, events, directives, ifConditions } = path
@@ -58,21 +58,20 @@ function mark (path, deps, iteratorArr = []) {
     currentArr.push(iterator1)
   }
 
-  checkRepeatIterator(currentArr)
+  checkRepeatIterator(currentArr, options)
 
   // 递归子节点
   if (children && children.length) {
     children.forEach((v, i) => {
       // const counterIterator = children.slice(0, i).filter(v => v.for).map(v => v.for + '.length').join(`+'-'+`)
-      mark(v, deps, currentArr)
+      mark(v, options, deps, currentArr)
     })
   }
 
   // fix: v-else events
-  if (ifConditions && ifConditions.length && !ifConditions._handled) {
-    ifConditions._handled = true
-    ifConditions.forEach((v, i) => {
-      mark(v.block, deps, currentArr)
+  if (ifConditions && ifConditions.length > 1) {
+    ifConditions.slice(1).forEach((v, i) => {
+      mark(v.block, options, deps, currentArr)
     })
   }
 
@@ -104,9 +103,9 @@ function mark (path, deps, iteratorArr = []) {
 
 // 全局的事件触发器 ID
 // let eIndex = 0
-export function markComponent (ast) {
+export function markComponent (ast, options) {
   const deps = { comIndex: 0, eventIndex: 0 }
-  mark(ast, deps)
+  mark(ast, options, deps)
 
   return ast
 }

src/platforms/mp/runtime/lifecycle.js

@@ -1,7 +1,10 @@
 import { handleError } from '../../../core/util/index'
 
 export function callHook (vm, hook, params) {
-  const handlers = vm.$options[hook]
+  let handlers = vm.$options[hook]
+  if (hook === 'onError') {
+    handlers = [handlers]
+  }
 
   let ret
   if (handlers) {
@@ -75,16 +78,15 @@ export function initMP (mpType, next) {
         mp.app = this
         mp.status = 'launch'
         this.globalData.appOptions = mp.appOptions = options
-
-        callHook(rootVueVM, 'onLaunch')
+        callHook(rootVueVM, 'onLaunch', options)
         next()
       },
 
       // Do something when app show.
       onShow (options = {}) {
         mp.status = 'show'
         this.globalData.appOptions = mp.appOptions = options
-        callHook(rootVueVM, 'onShow')
+        callHook(rootVueVM, 'onShow', options)
       },
 
       // Do something when app hide.
@@ -160,7 +162,7 @@ export function initMP (mpType, next) {
         mp.query = query
         mp.status = 'load'
         getGlobalData(app, rootVueVM)
-        callHook(rootVueVM, 'onLoad')
+        callHook(rootVueVM, 'onLoad', query)
       },
 
       // 生命周期函数--监听页面显示

test/mp/compiler/index.spec.js

@@ -88,6 +88,38 @@ describe('指令', () => {
     )
   })
 
+  it('v-if && v-for', () => {
+    assertCodegen(
+      `<div><p v-if="item.length" v-for="item in list"></p></div>`,
+      `<template name="a"><view class="_div"><view wx:if="{{item.length}}" wx:for="{{list}}" wx:for-index="index" wx:for-item="item" class="_p"></view></view></template>`,
+      { name: 'a' }
+    )
+  })
+
+  it('v-if && event', () => {
+    assertCodegen(
+      `<div v-if="item.length" @click="clickHandle"></div>`,
+      `<template name="a"><view wx:if="{{item.length}}" bindtap="handleProxy" data-eventid="{{'0'}}" data-comkey="{{$k}}" class="_div"></view></template>`,
+      { name: 'a' }
+    )
+  })
+
+  it('v-if && v-for && event', () => {
+    assertCodegen(
+      `<div><p v-if="item.length" v-for="item in list" @click="clickHandle"></p></div>`,
+      `<template name="a"><view class="_div"><view wx:if="{{item.length}}" bindtap="handleProxy" data-eventid="{{'0-'+index}}" data-comkey="{{$k}}" wx:for="{{list}}" wx:for-index="index" wx:for-item="item" class="_p"></view></view></template>`,
+      { name: 'a' }
+    )
+  })
+
+  it('v-for && event', () => {
+    assertCodegen(
+      `<div><p v-for="item in list" @click="clickHandle"></p></div>`,
+      `<template name="a"><view class="_div"><view bindtap="handleProxy" data-eventid="{{'0-'+index}}" data-comkey="{{$k}}" wx:for="{{list}}" wx:for-index="index" wx:for-item="item" class="_p"></view></view></template>`,
+      { name: 'a' }
+    )
+  })
+
   it('v-bind', () => {
     assertCodegen(
       `<div :a="s"></div>`,
@@ -327,7 +359,7 @@ describe('事件', () => {
   it('v-else', () => {
     assertCodegen(
       `<div><div v-if="type === 'A'" @click="logger('A')">A</div><div v-else-if="type === 'B'" @click="logger('B')">B</div><div v-else-if="type === 'C'" @click="logger('C')">C</div><div v-else @click="logger('Not A/B/C')">Not A/B/C</div></div>`,
-      `<template name="a"><view class="_div"><view wx:if="{{type === 'A'}}" bindtap="handleProxy" data-eventid="{{'4'}}" data-comkey="{{$k}}" class="_div">A</view><view wx:elif="{{type === 'B'}}" bindtap="handleProxy" data-eventid="{{'1'}}" data-comkey="{{$k}}" class="_div">B</view><view wx:elif="{{type === 'C'}}" bindtap="handleProxy" data-eventid="{{'2'}}" data-comkey="{{$k}}" class="_div">C</view><view wx:else bindtap="handleProxy" data-eventid="{{'3'}}" data-comkey="{{$k}}" class="_div">Not A/B/C</view></view></template>`,
+      `<template name="a"><view class="_div"><view wx:if="{{type === 'A'}}" bindtap="handleProxy" data-eventid="{{'3'}}" data-comkey="{{$k}}" class="_div">A</view><view wx:elif="{{type === 'B'}}" bindtap="handleProxy" data-eventid="{{'0'}}" data-comkey="{{$k}}" class="_div">B</view><view wx:elif="{{type === 'C'}}" bindtap="handleProxy" data-eventid="{{'1'}}" data-comkey="{{$k}}" class="_div">C</view><view wx:else bindtap="handleProxy" data-eventid="{{'2'}}" data-comkey="{{$k}}" class="_div">Not A/B/C</view></view></template>`,
       { name: 'a' }
     )
   })

test/mp/runtime/lifecycle.spec.js

@@ -3,6 +3,7 @@ const { createInstance } = require('../helpers/index')
 // 生命周期
 describe('init mpvue with lifecycle', function () {
   const onLifecycle = []
+  const getOptions = {}
 
   function getComponentOptions (key = '') {
     return {
@@ -38,13 +39,16 @@ describe('init mpvue with lifecycle', function () {
         onLifecycle.push(`destroyed${key}`)
       },
       // lifycycle for wxmp
-      onLaunch () {
+      onLaunch (opt) {
+        getOptions.onLaunch = opt
         onLifecycle.push(`onLaunch${key}`)
       },
-      onLoad () {
+      onLoad (opt) {
+        getOptions.onLoad = opt
         onLifecycle.push(`onLoad${key}`)
       },
-      onShow () {
+      onShow (opt) {
+        getOptions.onShow = opt
         onLifecycle.push(`onShow${key}`)
       },
       onReady () {
@@ -83,11 +87,14 @@ describe('init mpvue with lifecycle', function () {
     app.$mount()
     expect(onLifecycle).toEqual(['beforeCreate', 'created', 'onLaunch', 'beforeMount', 'mounted', 'onShow'])
     expect(!!app.$mp.app).toEqual(true)
-    expect(app.$mp.appOptions).toEqual({
+    const opt = {
       path: 'pages/index/index',
       scene: 1001,
       query: {}
-    })
+    }
+    expect(app.$mp.appOptions).toEqual(opt)
+    expect(getOptions.onLaunch).toEqual(opt)
+    expect(getOptions.onShow).toEqual(opt)
     expect(app.$mp.mpType).toEqual('app')
     expect(app.$mp.status).toEqual('show')
   })
@@ -108,6 +115,7 @@ describe('init mpvue with lifecycle', function () {
     expect(onLifecycle).toEqual(['beforeCreate', 'created', 'onLoad', 'onShow', 'onReady', 'beforeMount', 'mounted'])
     expect(!!app.$mp.page).toEqual(true)
     expect(app.$mp.query).toEqual({})
+    expect(getOptions.onLoad).toEqual({})
     expect(app.$mp.appOptions).toEqual({
       path: 'pages/index/index',
       scene: 1001,