Skip to content

Commit

Permalink
feat(core): support swan lifecycle-2-0 (#169)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: swan lifecycle-2-0 is a breaking change
  • Loading branch information
@allen-zh
allen-zh committed Aug 30, 2019
1 parent 9e548f5 commit fe655f0
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 69 deletions.
33 changes: 25 additions & 8 deletions packages/mars-core/src/base/createComponent.js
View file
Expand Up @@ -5,6 +5,7 @@

import {normalizeProps} from '../helper/props';
import {getPageInstance} from '../helper/instance';
import config from '../config';

export function makeVueCompCreator(getCompMixin) {
return function vueCompCreator(options) {
Expand All @@ -16,6 +17,12 @@ export function makeVueCompCreator(getCompMixin) {
export function makeMarkComponent(setData) {
return function markComponent(callback) {
const page = getPageInstance(this);

if (!page.$vue && page.$$__createVue__) {
page.$$__createVue__.call(page);
delete page.$$__createVue__;
}

const vms = page.$vue.__vms__;
const vmData = vms[this.data.compId];
if (vmData) {
Expand All @@ -40,7 +47,7 @@ export function makeMarkComponent(setData) {
}
}

console.warn('[swan instance mismatch]', this.data.compId, this, vms);
// console.warn('[swan instance mismatch]', this.data.compId, this, vms);
callback();
};
}
Expand All @@ -57,7 +64,10 @@ export function makeCreateComponent(handleProxy, handleModel, callHook, hooks =
props = Object.assign(props, {
compId: String,
rootComputed: Object,
rootUID: Number
rootUID: {
type: Number,
value: -1
}
});

return {
Expand All @@ -80,7 +90,9 @@ export function makeCreateComponent(handleProxy, handleModel, callHook, hooks =
},
lifetimes: {
created(...args) {
// console.log('===swan created', this.data.compId);
if (process.env.NODE_ENV !== 'production' && config.debug && config.debug.lifetimes) {
console.log('[debug: mp lifetimes] created', this.data.compId);
}
if (hooks.created) {
hooks.created.call(this, () => {
this.__created__ = true;
Expand All @@ -89,7 +101,6 @@ export function makeCreateComponent(handleProxy, handleModel, callHook, hooks =
this.$vue[handleName] && this.$vue[handleName].apply(this.$vue, args);
});
}

callHook.call(this, this.$vue, 'comp', 'created', args);
});
}
Expand All @@ -98,11 +109,15 @@ export function makeCreateComponent(handleProxy, handleModel, callHook, hooks =
}
},
attached(...args) {
// console.log('===swan attached', this, this.data.compId);
if (process.env.NODE_ENV !== 'production' && config.debug && config.debug.lifetimes) {
console.log('[debug: mp lifetimes] attached', this.data.compId);
}
callHook.call(this, this.$vue, 'comp', 'attached', args);
},
ready(...args) {
// console.log('===swan ready', this, this.data.compId);
if (process.env.NODE_ENV !== 'production' && config.debug && config.debug.lifetimes) {
console.log('[debug: mp lifetimes] ready', this.data.compId);
}
if (hooks.ready) {
hooks.ready.call(this, () => {
callHook.call(this, this.$vue, 'comp', 'ready', args);
Expand All @@ -113,8 +128,10 @@ export function makeCreateComponent(handleProxy, handleModel, callHook, hooks =
}
},
detached(...args) {
// console.log('===swan detached', this.data.compId);
callHook.call(this, this.$vue, 'comp', 'dettached', args);
if (process.env.NODE_ENV !== 'production' && config.debug && config.debug.lifetimes) {
console.log('[debug: mp lifetimes] detached', this.data.compId);
}
callHook.call(this, this.$vue, 'comp', 'detached', args);
this.$vue && this.$vue.$destroy();
// remove swan binded vue instance from root __vms__
const page = getPageInstance(this);
Expand Down
143 changes: 91 additions & 52 deletions packages/mars-core/src/base/createPage.js
View file
Expand Up @@ -3,78 +3,107 @@
* @author zhangwentao <winty2013@gmail.com>
*/

/* global Page */

/* global getApp */

/* global Page, getApp */
/* eslint-disable babel/new-cap */
/* eslint-disable fecs-camelcase */

import Vue from './vue/index';
import {mark, measure} from '../helper/perf';
import config from '../config';
import {state} from './state';

export function createVue(options, args, {setData}) {
const pages = getApp().__pages__;
const uid = this.__uid__ !== undefined ? this.__uid__ : ++pages.uid;
pages[uid] = this;
this.__uid__ = uid;

if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
const perfTagStart = `${this.route}-start`;
// const perfTagEnd = `${this.route}-end`;
mark(perfTagStart);
}

if (state.store && !options.store) {
options.store = state.store;
}

const vm = new Vue(options);
vm.__vms__ = {};
this.$vue = vm;
vm.$mp = {
scope: this,
query: args[0],
options: args[0]
};

vm.$on('vm.mounted', _ => {
setData(vm, this, true);
});

vm.$on('vm.updated', _ => {
setData(vm, this, true);
});

if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
const perfTagStart = `${this.route}-start`;
const perfTagEnd = `${this.route}-end`;
mark(perfTagEnd);
measure(`${this.route}:new`, perfTagStart, perfTagEnd);
}

return vm;
}

export function mountVue(vm) {
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
const perfTagStart = `${this.route}-start`;
const perfTagEnd = `${this.route}-end`;
mark(perfTagStart);
vm.$mount();
mark(perfTagEnd);
measure(`${this.route}:mount`, perfTagStart, perfTagEnd);
}
else {
vm.$mount();
}
}

export function makeCreatePage(pageMixin, {handleProxy, handleModel}, setData, callHook) {
return function (options) {
options.mixins = [pageMixin];

return {
$$__createVue__() {
const vm = createVue.call(this, options, [], {setData});
mountVue.call(this, vm);
},
data: {},
handleProxy,
handleModel,
onLoad(...args) {
const pages = getApp().__pages__;
const uid = this.__uid__ !== undefined ? this.__uid__ : ++pages.uid;
pages[uid] = this;
this.__uid__ = uid;

if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
const perfTagStart = `${this.route}-start`;
// const perfTagEnd = `${this.route}-end`;
mark(perfTagStart);
}

if (state.store && !options.store) {
options.store = state.store;
}

const vm = new Vue(options);
vm.__vms__ = {};
this.$vue = vm;
vm.$mp = {
scope: this,
query: args[0],
options: args[0]
};
vm.$on('vm.updated', _ => {
setData(vm, this, true);
});
vm.$on('vm.mounted', _ => {
setData(vm, this, true);
});

if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
const perfTagStart = `${this.route}-start`;
const perfTagEnd = `${this.route}-end`;
mark(perfTagEnd);
measure(`${this.route}:new`, perfTagStart, perfTagEnd);
}

// 先 callHook 保证数据可以初始化
const ret = callHook.call(this, this.$vue, 'page', 'onLoad', args);
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
const perfTagStart = `${this.route}-start`;
const perfTagEnd = `${this.route}-end`;
mark(perfTagStart);
vm.$mount();
mark(perfTagEnd);
measure(`${this.route}:mount`, perfTagStart, perfTagEnd);
let vm = this.$vue;
let ret;
if (!vm) {
vm = createVue.call(this, options, args, {setData});
ret = callHook.call(this, this.$vue, 'page', 'onLoad', args);
mountVue.call(this, vm);
}
else {
vm.$mount();
const query = args[0];
vm.$mp.query = query;
vm.$mp.options = query;
ret = callHook.call(this, this.$vue, 'page', 'onLoad', args);
}
if (process.env.NODE_ENV !== 'production' && config.debug && config.debug.lifetimes) {
console.log('[debug: mp pageHooks] onLoad', this.__uid__);
}
return ret;
},
onUnload(...args) {
if (process.env.NODE_ENV !== 'production' && config.debug && config.debug.lifetimes) {
console.log('[debug: mp pageHooks] onUnload', this.__uid__);
}
const ret = callHook.call(this, this.$vue, 'page', 'onUnload', args);
if (this.$vue) {
this.$vue.$destroy();
Expand All @@ -90,16 +119,26 @@ export function makeCreatePage(pageMixin, {handleProxy, handleModel}, setData, c
}

});
delete this.$vue;
delete this.$$__createVue__;
return ret;
},
onReady(...args) {
// console.log('[pref] onReady');
if (process.env.NODE_ENV !== 'production' && config.debug && config.debug.lifetimes) {
console.log('[debug: mp pageHooks] onReady', this.__uid__);
}
return callHook.call(this, this.$vue, 'page', 'onReady', args);
},
onShow(...args) {
if (process.env.NODE_ENV !== 'production' && config.debug && config.debug.lifetimes) {
console.log('[debug: mp pageHooks] onShow', this.__uid__);
}
return callHook.call(this, this.$vue, 'page', 'onShow', args);
},
onHide(...args) {
if (process.env.NODE_ENV !== 'production' && config.debug && config.debug.lifetimes) {
console.log('[debug: mp pageHooks] onHide', this.__uid__);
}
return callHook.call(this, this.$vue, 'page', 'onHide', args);
},
onPullDownRefresh(...args) {
Expand Down
10 changes: 7 additions & 3 deletions packages/mars-core/src/base/mixins.js
View file
Expand Up @@ -5,6 +5,7 @@

import {getPageInstance} from '../helper/instance';
import {setObjectData} from '../helper/util';
import config from '../config';

export function makePageMixin($api) {
return {
Expand Down Expand Up @@ -55,6 +56,9 @@ export function makeGetCompMixin($api) {
});
},
created() {
if (process.env.NODE_ENV !== 'production' && config.debug && config.debug.lifetimes) {
console.log('[debug: Vue] created', this.compId);
}
// console.log('===vue created', this.compId);
// markComponentInVue.call(this, pms, vms);
const vms = this.$root.__vms__;
Expand All @@ -70,8 +74,10 @@ export function makeGetCompMixin($api) {
}

export function handleProxy(event) {
if (process.env.NODE_ENV !== 'production' && config.debug && config.debug.events) {
console.log('[debug: handleProxy]', this.data.compId, event);
}
// get event dataSet
// console.log('===handleProxy:', this.data.compId, event);
const data = event.currentTarget.dataset;
const eventType = event.type;

Expand Down Expand Up @@ -130,6 +136,4 @@ export function handleModel(event) {
else if (type === 'change' && tag === 'switch') {
setObjectData(this.$vue, model, event.detail.checked);
}


}
9 changes: 6 additions & 3 deletions packages/mars-core/src/config.js
View file
Expand Up @@ -4,7 +4,10 @@
*/

export default {
performance: false,
debug: false,
performance: true,
debug: {
lifetimes: true,
events: false
},
framework: process.env.MARS_CONFIG_FRAMEWORK
};
};
13 changes: 10 additions & 3 deletions packages/mars-core/src/helper/instance.js
View file
Expand Up @@ -2,12 +2,19 @@
* @file props helper
* @author zhangwentao
*/
/* global getApp */
/* global getApp, getCurrentPages */

export function getPageInstance($mp) {
const uid = $mp.data.rootUID;
const pages = getApp().__pages__;
const page = pages[uid];
let page;
if (uid === -1) {
const pages = getCurrentPages();
page = pages[pages.length - 1];
}
else {
page = getApp().__pages__[uid];
}

if (!page) {
throw new Error(`cannot find page instance for $mp ${$mp.data.compId}`, $mp);
}
Expand Down

0 comments on commit fe655f0

Please sign in to comment.