Merge pull request #508 from Meituan-Dianping/develop

Develop
Meituan-Dianping · May 19, 2018 · 29cee1a · 29cee1a
2 parents e8ae625 + ee07244
commit 29cee1a
Show file tree

Hide file tree

Showing 16 changed files with 111 additions and 16 deletions.
diff --git a/dist/vue.common.js b/dist/vue.common.js
@@ -4629,7 +4629,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.8';
+Vue$3.mpvueVersion = '1.0.11';
 
 /* */
 

diff --git a/dist/vue.esm.js b/dist/vue.esm.js
@@ -4627,7 +4627,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.8';
+Vue$3.mpvueVersion = '1.0.11';
 
 /* */
 

diff --git a/dist/vue.js b/dist/vue.js
@@ -4618,7 +4618,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.8';
+Vue$3.mpvueVersion = '1.0.11';
 
 /* */
 

diff --git a/dist/vue.min.js b/dist/vue.min.js
diff --git a/dist/vue.runtime.common.js b/dist/vue.runtime.common.js
@@ -4625,7 +4625,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.8';
+Vue$3.mpvueVersion = '1.0.11';
 
 /* */
 

diff --git a/dist/vue.runtime.esm.js b/dist/vue.runtime.esm.js
@@ -4623,7 +4623,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.8';
+Vue$3.mpvueVersion = '1.0.11';
 
 /* */
 

diff --git a/dist/vue.runtime.js b/dist/vue.runtime.js
@@ -4614,7 +4614,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.8';
+Vue$3.mpvueVersion = '1.0.11';
 
 /* */
 

diff --git a/dist/vue.runtime.min.js b/dist/vue.runtime.min.js
diff --git a/packages/mpvue-template-compiler/build.js b/packages/mpvue-template-compiler/build.js
@@ -4580,7 +4580,7 @@ var component = {
  var mpcomid = ast.mpcomid;
  var slots = ast.slots;
  if (slotName) {
- attrsMap['data'] = "{{...$root[$p], $root}}";
+ attrsMap['data'] = "{{...$root[$k], $root}}";
  attrsMap['is'] = "{{" + slotName + "}}";
  } else {
  var slotsName = getSlotsName(slots);

diff --git a/packages/mpvue-template-compiler/package.json b/packages/mpvue-template-compiler/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mpvue-template-compiler",
- "version": "1.0.11",
+ "version": "1.0.12",
  "description": "mpvue template compiler for Vue",
  "main": "index.js",
  "repository": {

diff --git a/packages/mpvue/index.js b/packages/mpvue/index.js
@@ -4144,7 +4144,7 @@ Object.defineProperty(Vue$3.prototype, '$ssrContext', {
 });
 
 Vue$3.version = '2.4.1';
-Vue$3.mpvueVersion = '1.0.9';
+Vue$3.mpvueVersion = '1.0.11';
 
 /* globals renderer */
 
@@ -4974,6 +4974,48 @@ function getGlobalData (app, rootVueVM) {
  }
 }
 
+/**
+ * 格式化 properties 属性，并给每个属性加上 observer 方法
+ */
+function normalizeProperties (vm) {
+ var properties = vm.$options.properties || {};
+ var res = {};
+ var val;
+ var loop = function ( key ) {
+ val = isPlainObject(properties[key])
+ ? properties[key]
+ : { type: properties[key] };
+ res[key] = {
+ type: val.type,
+ value: val.value,
+ observer: function observer (newVal, oldVal) {
+ vm[key] = newVal; // 先修改值再触发原始的 observer，跟 watch 行为保持一致
+ if (typeof val.observer === 'function') {
+ val.observer.call(vm, newVal, oldVal);
+ }
+ }
+ };
+ };
+
+ for (var key in properties) loop( key );
+ return res
+}
+
+/**
+ * 把 properties 中的属性 proxy 到 vm 上
+ */
+function initMpProps (vm) {
+ var mpProps = vm._mpProps = {};
+ var keys = Object.keys(vm.$options.properties || {});
+ keys.forEach(function (key) {
+ if (!(key in vm)) {
+ proxy(vm, '_mpProps', key);
+ mpProps[key] = undefined; // for observe
+ }
+ });
+ observe(mpProps, true);
+}
+
 function initMP (mpType, next) {
  var rootVueVM = this.$root;
  if (!rootVueVM.$mp) {
@@ -5041,7 +5083,11 @@ function initMP (mpType, next) {
  }
  });
  } else if (mpType === 'component') {
+ initMpProps(rootVueVM);
+
  global.Component({
+ // 小程序原生的组件属性
+ properties: normalizeProperties(rootVueVM),
  // 页面的初始数据
  data: {
  $root: {}
@@ -5192,6 +5238,7 @@ function getVmData (vm) {
  var dataKeys = [].concat(
  Object.keys(vm._data || {}),
  Object.keys(vm._props || {}),
+ Object.keys(vm._mpProps || {}),
  Object.keys(vm._computedWatchers || {})
  );
  return dataKeys.reduce(function (res, key) {

diff --git a/packages/mpvue/package.json b/packages/mpvue/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mpvue",
- "version": "1.0.11",
+ "version": "1.0.12",
  "description": "Vue Runtime for mini program",
  "main": "index.js",
  "repository": {

diff --git a/src/platforms/mp/compiler/codegen/convert/component.js b/src/platforms/mp/compiler/codegen/convert/component.js
@@ -14,7 +14,7 @@ export default {
  convertComponent (ast, components, slotName) {
  const { attrsMap, tag, mpcomid, slots } = ast
  if (slotName) {
- attrsMap['data'] = `{{...$root[$p], $root}}`
+ attrsMap['data'] = `{{...$root[$k], $root}}`
  attrsMap['is'] = `{{${slotName}}}`
  } else {
  const slotsName = getSlotsName(slots)

diff --git a/src/platforms/mp/runtime/lifecycle.js b/src/platforms/mp/runtime/lifecycle.js
@@ -1,4 +1,7 @@
-import { handleError } from '../../../core/util/index'
+import { isPlainObject } from 'shared/util'
+import { handleError } from 'core/util/index'
+import { observe } from 'core/observer/index'
+import { proxy } from 'core/instance/state'
 
 export function callHook (vm, hook, params) {
  let handlers = vm.$options[hook]
@@ -37,6 +40,46 @@ function getGlobalData (app, rootVueVM) {
  }
 }
 
+/**
+ * 格式化 properties 属性，并给每个属性加上 observer 方法
+ */
+function normalizeProperties (vm) {
+ const properties = vm.$options.properties || {}
+ const res = {}
+ let val
+ for (const key in properties) {
+ val = isPlainObject(properties[key])
+ ? properties[key]
+ : { type: properties[key] }
+ res[key] = {
+ type: val.type,
+ value: val.value,
+ observer (newVal, oldVal) {
+ vm[key] = newVal // 先修改值再触发原始的 observer，跟 watch 行为保持一致
+ if (typeof val.observer === 'function') {
+ val.observer.call(vm, newVal, oldVal)
+ }
+ }
+ }
+ }
+ return res
+}
+
+/**
+ * 把 properties 中的属性 proxy 到 vm 上
+ */
+function initMpProps (vm) {
+ const mpProps = vm._mpProps = {}
+ const keys = Object.keys(vm.$options.properties || {})
+ keys.forEach(key => {
+ if (!(key in vm)) {
+ proxy(vm, '_mpProps', key)
+ mpProps[key] = undefined // for observe
+ }
+ })
+ observe(mpProps, true)
+}
+
 export function initMP (mpType, next) {
  const rootVueVM = this.$root
  if (!rootVueVM.$mp) {
@@ -100,7 +143,11 @@ export function initMP (mpType, next) {
  }
  })
  } else if (mpType === 'component') {
+ initMpProps(rootVueVM)
+
  global.Component({
+ // 小程序原生的组件属性
+ properties: normalizeProperties(rootVueVM),
  // 页面的初始数据
  data: {
  $root: {}

diff --git a/src/platforms/mp/runtime/render.js b/src/platforms/mp/runtime/render.js
@@ -25,6 +25,7 @@ function getVmData (vm) {
  const dataKeys = [].concat(
  Object.keys(vm._data || {}),
  Object.keys(vm._props || {}),
+ Object.keys(vm._mpProps || {}),
  Object.keys(vm._computedWatchers || {})
  )
  return dataKeys.reduce((res, key) => {

diff --git a/test/mp/compiler/index.spec.js b/test/mp/compiler/index.spec.js
@@ -528,7 +528,7 @@ describe('slot', () => {
  it('插槽', () => {
  assertCodegen(
  `<div><slot>test</slot></div>`,
- `<template name="a"><view class="_div testModuleId"><template name="default">test</template><template data="{{...$root[$p], $root}}" is="{{$slotdefault || 'default'}}"></template></view></template>`,
+ `<template name="a"><view class="_div testModuleId"><template name="default">test</template><template data="{{...$root[$k], $root}}" is="{{$slotdefault || 'default'}}"></template></view></template>`,
  {
  name: 'a',
  moduleId: 'testModuleId'
@@ -539,7 +539,7 @@ describe('slot', () => {
  it('使用', () => {
  assertCodegen(
  `<div><slot name="w">test</slot></div>`,
- `<template name="a"><view class="_div"><template name="w">test</template><template data="{{...$root[$p], $root}}" is="{{$slotw || 'w'}}"></template></view></template>`,
+ `<template name="a"><view class="_div"><template name="w">test</template><template data="{{...$root[$k], $root}}" is="{{$slotw || 'w'}}"></template></view></template>`,
  {
  name: 'a'
  }