fix:
* Remove globalData and updateAll * Fix m-stores bug
This commit is contained in:
dntzhang
parent
1417060690
commit
2412f4f6f2
|
|
@ -20,7 +20,8 @@
|
|||
var options = {
|
||||
store: null,
|
||||
root: getGlobal(),
|
||||
mapping: {}
|
||||
mapping: {},
|
||||
isMultiStore: false
|
||||
};
|
||||
|
||||
var stack = [];
|
||||
|
|
@ -142,7 +143,7 @@
|
|||
return Object.prototype.toString.call(obj) === '[object Array]';
|
||||
}
|
||||
|
||||
function getUse(data, paths) {
|
||||
function getUse(data, paths, out, name) {
|
||||
var obj = [];
|
||||
paths.forEach(function (path, index) {
|
||||
var isPath = typeof path === 'string';
|
||||
|
|
@ -169,6 +170,7 @@
|
|||
obj[key] = obj[index];
|
||||
}
|
||||
});
|
||||
if (out) out[name] = obj;
|
||||
return obj;
|
||||
}
|
||||
|
||||
|
|
@ -200,6 +202,30 @@
|
|||
return current;
|
||||
}
|
||||
|
||||
function getPath(obj, out, name) {
|
||||
var result = {};
|
||||
obj.forEach(function (item) {
|
||||
if (typeof item === 'string') {
|
||||
result[item] = true;
|
||||
} else {
|
||||
var tempPath = item[Object.keys(item)[0]];
|
||||
if (typeof tempPath === 'string') {
|
||||
result[tempPath] = true;
|
||||
} else {
|
||||
if (typeof tempPath[0] === 'string') {
|
||||
result[tempPath[0]] = true;
|
||||
} else {
|
||||
tempPath[0].forEach(function (path) {
|
||||
return result[path] = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
if (out) out[name] = result;
|
||||
return result;
|
||||
}
|
||||
|
||||
// render modes
|
||||
|
||||
var ATTR_KEY = 'prevProps';
|
||||
|
|
@ -759,188 +785,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
var _class, _temp;
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var getType = function getType(obj) {
|
||||
return Object.prototype.toString.call(obj).slice(8, -1);
|
||||
};
|
||||
|
||||
function define(name, ctor) {
|
||||
if (options.mapping[name]) {
|
||||
return;
|
||||
}
|
||||
if (ctor.is === 'WeElement') {
|
||||
customElements.define(name, ctor);
|
||||
options.mapping[name] = ctor;
|
||||
if (ctor.use) {
|
||||
ctor.updatePath = getPath(ctor.use);
|
||||
}
|
||||
} else {
|
||||
var _class, _temp;
|
||||
|
||||
var depPaths = void 0;
|
||||
var config = {};
|
||||
var len = arguments.length;
|
||||
if (len === 3) {
|
||||
if (typeof arguments[1] === 'function') {
|
||||
ctor = arguments[1];
|
||||
config = arguments[2];
|
||||
} else {
|
||||
depPaths = arguments[1];
|
||||
ctor = arguments[2];
|
||||
}
|
||||
} else if (len === 4) {
|
||||
depPaths = arguments[1];
|
||||
ctor = arguments[2];
|
||||
config = arguments[3];
|
||||
}
|
||||
if (typeof config === 'string') {
|
||||
config = { css: config };
|
||||
}
|
||||
|
||||
var Ele = (_temp = _class = function (_WeElement) {
|
||||
_inherits(Ele, _WeElement);
|
||||
|
||||
function Ele() {
|
||||
_classCallCheck(this, Ele);
|
||||
|
||||
return _possibleConstructorReturn(this, _WeElement.apply(this, arguments));
|
||||
}
|
||||
|
||||
Ele.prototype.render = function render() {
|
||||
return ctor.call(this, this);
|
||||
};
|
||||
|
||||
Ele.prototype.receiveProps = function receiveProps() {
|
||||
if (config.receiveProps) {
|
||||
return config.receiveProps.apply(this, arguments);
|
||||
}
|
||||
};
|
||||
|
||||
return Ele;
|
||||
}(WeElement), _class.use = depPaths, _class.css = config.css, _class.propTypes = config.propTypes, _class.defaultProps = config.defaultProps, _temp);
|
||||
|
||||
|
||||
var eleHooks = ['install', 'installed', 'uninstall', 'beforeUpdate', 'updated', 'beforeRender', 'rendered'],
|
||||
storeHelpers = ['use', 'useSelf'];
|
||||
|
||||
eleHooks.forEach(function (hook) {
|
||||
if (config[hook]) {
|
||||
Ele.prototype[hook] = function () {
|
||||
config[hook].apply(this, arguments);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
storeHelpers.forEach(function (func) {
|
||||
if (config[func]) {
|
||||
Ele.prototype[func] = function () {
|
||||
return typeof config[func] === 'function' ? config[func].apply(this, arguments) : config[func];
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
if (Ele.use) {
|
||||
Ele.updatePath = getPath(Ele.use);
|
||||
}
|
||||
|
||||
customElements.define(name, Ele);
|
||||
options.mapping[name] = Ele;
|
||||
}
|
||||
}
|
||||
|
||||
function getPath(obj) {
|
||||
if (getType(obj) === 'Array') {
|
||||
var result = {};
|
||||
obj.forEach(function (item) {
|
||||
if (typeof item === 'string') {
|
||||
result[item] = true;
|
||||
} else {
|
||||
var tempPath = item[Object.keys(item)[0]];
|
||||
if (typeof tempPath === 'string') {
|
||||
result[tempPath] = true;
|
||||
} else {
|
||||
if (typeof tempPath[0] === 'string') {
|
||||
result[tempPath[0]] = true;
|
||||
} else {
|
||||
tempPath[0].forEach(function (path) {
|
||||
return result[path] = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return result;
|
||||
} else {
|
||||
return getUpdatePath(obj);
|
||||
}
|
||||
}
|
||||
|
||||
function getUpdatePath(data) {
|
||||
var result = {};
|
||||
dataToPath(data, result);
|
||||
return result;
|
||||
}
|
||||
|
||||
function dataToPath(data, result) {
|
||||
Object.keys(data).forEach(function (key) {
|
||||
result[key] = true;
|
||||
var type = getType(data[key]);
|
||||
if (type === 'Object') {
|
||||
_objToPath(data[key], key, result);
|
||||
} else if (type === 'Array') {
|
||||
_arrayToPath(data[key], key, result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function _objToPath(data, path, result) {
|
||||
Object.keys(data).forEach(function (key) {
|
||||
result[path + '.' + key] = true;
|
||||
delete result[path];
|
||||
var type = getType(data[key]);
|
||||
if (type === 'Object') {
|
||||
_objToPath(data[key], path + '.' + key, result);
|
||||
} else if (type === 'Array') {
|
||||
_arrayToPath(data[key], path + '.' + key, result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function _arrayToPath(data, path, result) {
|
||||
data.forEach(function (item, index) {
|
||||
result[path + '[' + index + ']'] = true;
|
||||
delete result[path];
|
||||
var type = getType(item);
|
||||
if (type === 'Object') {
|
||||
_objToPath(item, path + '[' + index + ']', result);
|
||||
} else if (type === 'Array') {
|
||||
_arrayToPath(item, path + '[' + index + ']', result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var _class, _temp;
|
||||
|
||||
function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var id = 0;
|
||||
|
||||
var WeElement = (_temp = _class = function (_HTMLElement) {
|
||||
_inherits$1(WeElement, _HTMLElement);
|
||||
_inherits(WeElement, _HTMLElement);
|
||||
|
||||
function WeElement() {
|
||||
_classCallCheck$1(this, WeElement);
|
||||
_classCallCheck(this, WeElement);
|
||||
|
||||
var _this = _possibleConstructorReturn$1(this, _HTMLElement.call(this));
|
||||
var _this = _possibleConstructorReturn(this, _HTMLElement.call(this));
|
||||
|
||||
_this.props = Object.assign({}, _this.constructor.defaultProps);
|
||||
_this.elementId = id++;
|
||||
|
|
@ -953,9 +814,6 @@
|
|||
this.store = p.store;
|
||||
p = p.parentNode || p.host;
|
||||
}
|
||||
if (this.store) {
|
||||
this.store.instances.push(this);
|
||||
}
|
||||
|
||||
if (this.use) {
|
||||
var use = void 0;
|
||||
|
|
@ -965,15 +823,41 @@
|
|||
use = this.use;
|
||||
}
|
||||
|
||||
this._updatePath = getPath(use);
|
||||
this.using = getUse(this.store.data, use);
|
||||
} else {
|
||||
this.constructor.use && (this.using = getUse(this.store.data, this.constructor.use));
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath = {};
|
||||
var using = {};
|
||||
for (var storeName in use) {
|
||||
_updatePath[storeName] = {};
|
||||
using[storeName] = {};
|
||||
getPath(use[storeName], _updatePath, storeName);
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName);
|
||||
this.store[storeName].instances.push(this);
|
||||
}
|
||||
this.using = using;
|
||||
this._updatePath = _updatePath;
|
||||
} else {
|
||||
this._updatePath = getPath(use);
|
||||
this.using = getUse(this.store.data, use);
|
||||
this.store.instances.push(this);
|
||||
}
|
||||
}
|
||||
if (this.useSelf) {
|
||||
var _use = typeof this.useSelf === 'function' ? this.useSelf() : this.useSelf;
|
||||
this._updateSelfPath = getPath(_use);
|
||||
this.usingSelf = getUse(this.store.data, _use);
|
||||
if (options.isMultiStore) {
|
||||
var _updatePath2 = {};
|
||||
var _using = {};
|
||||
for (var _storeName in _use) {
|
||||
getPath(_use[_storeName], _updatePath2, _storeName);
|
||||
getUse(this.store[_storeName].data, _use[_storeName], _using, _storeName);
|
||||
this.store[_storeName].updateSelfInstances.push(this);
|
||||
}
|
||||
this.usingSelf = _using;
|
||||
this._updateSelfPath = _updatePath2;
|
||||
} else {
|
||||
this._updateSelfPath = getPath(_use);
|
||||
this.usingSelf = getUse(this.store.data, _use);
|
||||
this.store.updateSelfInstances.push(this);
|
||||
}
|
||||
}
|
||||
this.attrsToProps();
|
||||
this.beforeInstall();
|
||||
|
|
@ -1516,58 +1400,83 @@
|
|||
function render(vnode, parent, store) {
|
||||
parent = typeof parent === 'string' ? document.querySelector(parent) : parent;
|
||||
if (store) {
|
||||
store.instances = [];
|
||||
extendStoreUpate(store);
|
||||
console.log(store.data);
|
||||
store.data = new JSONPatcherProxy(store.data).observe(false, function (patch) {
|
||||
console.log(55);
|
||||
var patchs = {};
|
||||
if (patch.op === 'remove') {
|
||||
// fix arr splice
|
||||
var kv = getArrayPatch(patch.path, store);
|
||||
patchs[kv.k] = kv.v;
|
||||
|
||||
update(patchs, store);
|
||||
} else {
|
||||
var key = fixPath(patch.path);
|
||||
patchs[key] = patch.value;
|
||||
console.log(44);
|
||||
update(patchs, store);
|
||||
if (store.data) {
|
||||
observeStore(store);
|
||||
} else {
|
||||
options.isMultiStore = true;
|
||||
//Multi-store injection
|
||||
for (var key in store) {
|
||||
observeStore(store[key], key);
|
||||
}
|
||||
});
|
||||
}
|
||||
parent.store = store;
|
||||
}
|
||||
return diff(null, vnode, parent, false);
|
||||
}
|
||||
|
||||
function observeStore(store, key) {
|
||||
store.instances = [];
|
||||
store.updateSelfInstances = [];
|
||||
extendStoreUpate(store, key);
|
||||
|
||||
store.data = new JSONPatcherProxy(store.data).observe(false, function (patch) {
|
||||
var patchs = {};
|
||||
if (patch.op === 'remove') {
|
||||
// fix arr splice
|
||||
var kv = getArrayPatch(patch.path, store);
|
||||
patchs[kv.k] = kv.v;
|
||||
|
||||
update(patchs, store);
|
||||
} else {
|
||||
var _key = fixPath(patch.path);
|
||||
patchs[_key] = patch.value;
|
||||
|
||||
update(patchs, store);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function update(patch, store) {
|
||||
store.update(patch);
|
||||
}
|
||||
|
||||
function extendStoreUpate(store) {
|
||||
console.log(333);
|
||||
function extendStoreUpate(store, key) {
|
||||
store.update = function (patch) {
|
||||
var _this = this;
|
||||
|
||||
var updateAll = matchGlobalData(this.globalData, patch);
|
||||
console.log(22);
|
||||
if (Object.keys(patch).length > 0) {
|
||||
this.instances.forEach(function (instance) {
|
||||
if (updateAll || _this.updateAll || instance.constructor.updatePath && needUpdate(patch, instance.constructor.updatePath) || instance._updatePath && needUpdate(patch, instance._updatePath)) {
|
||||
//update this.using
|
||||
if (instance.constructor.use) {
|
||||
console.log(11);
|
||||
instance.using = getUse(store.data, instance.constructor.use);
|
||||
} else if (instance.use) {
|
||||
instance.using = getUse(store.data, typeof instance.use === 'function' ? instance.use() : instance.use);
|
||||
if (key) {
|
||||
if (instance._updatePath && instance._updatePath[key] && needUpdate(patch, instance._updatePath[key])) {
|
||||
if (instance.use) {
|
||||
getUse(store.data, (typeof instance.use === 'function' ? instance.use() : instance.use)[key], instance.using, key);
|
||||
}
|
||||
|
||||
instance.update();
|
||||
}
|
||||
} else {
|
||||
if (instance._updatePath && needUpdate(patch, instance._updatePath)) {
|
||||
if (instance.use) {
|
||||
instance.using = getUse(store.data, typeof instance.use === 'function' ? instance.use() : instance.use);
|
||||
}
|
||||
|
||||
instance.update();
|
||||
instance.update();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (instance._updateSelfPath && needUpdate(patch, instance._updateSelfPath)) {
|
||||
instance.usingSelf = getUse(store.data, typeof instance.useSelf === 'function' ? instance.useSelf() : instance.useSelf);
|
||||
instance.updateSelf();
|
||||
this.updateSelfInstances.forEach(function (instance) {
|
||||
if (key) {
|
||||
if (instance._updateSelfPath && instance._updateSelfPath[key] && needUpdate(patch, instance._updateSelfPath[key])) {
|
||||
if (instance.useSelf) {
|
||||
getUse(store.data, (typeof instance.useSelf === 'function' ? instance.useSelf() : instance.useSelf)[key], instance.usingSelf, key);
|
||||
}
|
||||
|
||||
instance.updateSelf();
|
||||
}
|
||||
} else {
|
||||
if (instance._updateSelfPath && needUpdate(patch, instance._updateSelfPath)) {
|
||||
instance.usingSelf = getUse(store.data, typeof instance.useSelf === 'function' ? instance.useSelf() : instance.useSelf);
|
||||
instance.updateSelf();
|
||||
}
|
||||
}
|
||||
});
|
||||
this.onChange && this.onChange(patch);
|
||||
|
|
@ -1575,21 +1484,6 @@
|
|||
};
|
||||
}
|
||||
|
||||
function matchGlobalData(globalData, diffResult) {
|
||||
if (!globalData) return false;
|
||||
for (var keyA in diffResult) {
|
||||
if (globalData.indexOf(keyA) > -1) {
|
||||
return true;
|
||||
}
|
||||
for (var i = 0, len = globalData.length; i < len; i++) {
|
||||
if (includePath(keyA, globalData[i])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function needUpdate(diffResult, updatePath) {
|
||||
for (var keyA in diffResult) {
|
||||
if (updatePath[keyA]) {
|
||||
|
|
@ -1637,7 +1531,10 @@
|
|||
for (var i = 1, len = arr.length; i < len - 1; i++) {
|
||||
current = current[arr[i]];
|
||||
}
|
||||
return { k: fixArrPath(path), v: current };
|
||||
return {
|
||||
k: fixArrPath(path),
|
||||
v: current
|
||||
};
|
||||
}
|
||||
|
||||
function fixArrPath(path) {
|
||||
|
|
@ -1660,6 +1557,85 @@
|
|||
return mpPath;
|
||||
}
|
||||
|
||||
function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
function define(name, ctor) {
|
||||
if (options.mapping[name]) {
|
||||
return;
|
||||
}
|
||||
if (ctor.is === 'WeElement') {
|
||||
customElements.define(name, ctor);
|
||||
options.mapping[name] = ctor;
|
||||
} else {
|
||||
var _class, _temp;
|
||||
var config = {};
|
||||
var len = arguments.length;
|
||||
if (len === 3) {
|
||||
if (typeof arguments[1] === 'function') {
|
||||
ctor = arguments[1];
|
||||
config = arguments[2];
|
||||
} else {
|
||||
ctor = arguments[2];
|
||||
}
|
||||
} else if (len === 4) {
|
||||
ctor = arguments[2];
|
||||
config = arguments[3];
|
||||
}
|
||||
if (typeof config === 'string') {
|
||||
config = { css: config };
|
||||
}
|
||||
|
||||
var Ele = (_temp = _class = function (_WeElement) {
|
||||
_inherits$1(Ele, _WeElement);
|
||||
|
||||
function Ele() {
|
||||
_classCallCheck$1(this, Ele);
|
||||
|
||||
return _possibleConstructorReturn$1(this, _WeElement.apply(this, arguments));
|
||||
}
|
||||
|
||||
Ele.prototype.render = function render() {
|
||||
return ctor.call(this, this);
|
||||
};
|
||||
|
||||
Ele.prototype.receiveProps = function receiveProps() {
|
||||
if (config.receiveProps) {
|
||||
return config.receiveProps.apply(this, arguments);
|
||||
}
|
||||
};
|
||||
|
||||
return Ele;
|
||||
}(WeElement), _class.css = config.css, _class.propTypes = config.propTypes, _class.defaultProps = config.defaultProps, _temp);
|
||||
|
||||
|
||||
var eleHooks = ['install', 'installed', 'uninstall', 'beforeUpdate', 'updated', 'beforeRender', 'rendered'],
|
||||
storeHelpers = ['use', 'useSelf'];
|
||||
|
||||
eleHooks.forEach(function (hook) {
|
||||
if (config[hook]) {
|
||||
Ele.prototype[hook] = function () {
|
||||
config[hook].apply(this, arguments);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
storeHelpers.forEach(function (func) {
|
||||
if (config[func]) {
|
||||
Ele.prototype[func] = function () {
|
||||
return typeof config[func] === 'function' ? config[func].apply(this, arguments) : config[func];
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
customElements.define(name, Ele);
|
||||
options.mapping[name] = Ele;
|
||||
}
|
||||
}
|
||||
|
||||
function tag(name, pure) {
|
||||
return function (target) {
|
||||
target.pure = pure;
|
||||
|
|
@ -1819,21 +1795,23 @@
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, _WeElement.call.apply(_WeElement, [this].concat(args))), _this), _this.use = ['storeA'], _this.addIfOdd = function () {
|
||||
if (_this.store.data.storeA.count % 2 !== 0) {
|
||||
_this.store.add();
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, _WeElement.call.apply(_WeElement, [this].concat(args))), _this), _this.useSelf = {
|
||||
storeA: ['count', 'adding']
|
||||
}, _this.addIfOdd = function () {
|
||||
if (_this.store.storeA.data.count % 2 !== 0) {
|
||||
_this.store.storeA.add();
|
||||
}
|
||||
}, _this.addAsync = function () {
|
||||
_this.store.data.adding = true;
|
||||
_this.store.storeA.data.adding = true;
|
||||
setTimeout(function () {
|
||||
_this.store.storeA.data.adding = false;
|
||||
_this.store.add();
|
||||
_this.store.storeA.add();
|
||||
}, 1000);
|
||||
}, _temp), _possibleConstructorReturn$2(_this, _ret);
|
||||
}
|
||||
|
||||
_class2.prototype.render = function render$$1() {
|
||||
var store = this.store;
|
||||
var store = this.store.storeA;
|
||||
var data = store.data,
|
||||
add = store.add,
|
||||
sub = store.sub;
|
||||
|
|
@ -1842,7 +1820,7 @@
|
|||
'p',
|
||||
null,
|
||||
'Clicked: ',
|
||||
data.storeA.count,
|
||||
data.count,
|
||||
' times',
|
||||
' ',
|
||||
Omi.h(
|
||||
|
|
@ -1865,7 +1843,7 @@
|
|||
' ',
|
||||
Omi.h(
|
||||
'button',
|
||||
{ disabled: data.storeA.adding, onClick: this.addAsync },
|
||||
{ disabled: data.adding, onClick: this.addAsync },
|
||||
'Add async'
|
||||
)
|
||||
);
|
||||
|
|
@ -1885,12 +1863,10 @@
|
|||
};
|
||||
|
||||
this.sub = function () {
|
||||
console.log(_this2);
|
||||
_this2.data.count--;
|
||||
};
|
||||
|
||||
this.add = function () {
|
||||
console.log(_this2);
|
||||
_this2.data.count++;
|
||||
};
|
||||
}();
|
||||
|
|
@ -1909,9 +1885,7 @@
|
|||
};
|
||||
}();
|
||||
|
||||
function combine(options$$1) {}
|
||||
|
||||
render(Omi.h('my-counter', null), 'body', combine({ storeA: storeA, storeB: storeB }));
|
||||
render(Omi.h('my-counter', null), 'body', { storeA: storeA, storeB: storeB });
|
||||
|
||||
}());
|
||||
//# sourceMappingURL=b.js.map
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
|||
import { render, WeElement, define } from '../../src/omi'
|
||||
|
||||
define('my-counter', class extends WeElement {
|
||||
use = {
|
||||
useSelf = {
|
||||
storeA: ['count', 'adding']
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
import WeElement from './we-element'
|
||||
import options from './options'
|
||||
|
||||
const getType = function (obj) {
|
||||
return Object.prototype.toString.call(obj).slice(8, -1)
|
||||
}
|
||||
|
||||
export function define(name, ctor) {
|
||||
if (options.mapping[name]) {
|
||||
return
|
||||
|
|
@ -12,9 +8,7 @@ export function define(name, ctor) {
|
|||
if (ctor.is === 'WeElement') {
|
||||
customElements.define(name, ctor)
|
||||
options.mapping[name] = ctor
|
||||
if (ctor.use) {
|
||||
ctor.updatePath = getPath(ctor.use)
|
||||
}
|
||||
|
||||
} else {
|
||||
let depPaths
|
||||
let config = {}
|
||||
|
|
@ -37,7 +31,6 @@ export function define(name, ctor) {
|
|||
}
|
||||
|
||||
class Ele extends WeElement {
|
||||
static use = depPaths
|
||||
|
||||
static css = config.css
|
||||
|
||||
|
|
@ -77,37 +70,10 @@ export function define(name, ctor) {
|
|||
}
|
||||
})
|
||||
|
||||
|
||||
if (Ele.use) {
|
||||
Ele.updatePath = getPath(Ele.use)
|
||||
}
|
||||
|
||||
customElements.define(name, Ele)
|
||||
options.mapping[name] = Ele
|
||||
}
|
||||
}
|
||||
|
||||
export function getPath(obj, out, name) {
|
||||
const result = {}
|
||||
obj.forEach(item => {
|
||||
if (typeof item === 'string') {
|
||||
result[item] = true
|
||||
} else {
|
||||
const tempPath = item[Object.keys(item)[0]]
|
||||
if (typeof tempPath === 'string') {
|
||||
result[tempPath] = true
|
||||
} else {
|
||||
if (typeof tempPath[0] === 'string') {
|
||||
result[tempPath[0]] = true
|
||||
} else {
|
||||
tempPath[0].forEach(path => (result[path] = true))
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
if(out) out[name] = result
|
||||
return result
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,21 +9,21 @@ export function render(vnode, parent, store) {
|
|||
if (store.data) {
|
||||
observeStore(store)
|
||||
} else {
|
||||
options.isMultiStore = true
|
||||
//Multi-store injection
|
||||
for (let key in store) {
|
||||
observeStore(store[key])
|
||||
observeStore(store[key], key)
|
||||
}
|
||||
options.isMultiStore = true
|
||||
}
|
||||
parent.store = store
|
||||
}
|
||||
return diff(null, vnode, parent, false)
|
||||
}
|
||||
|
||||
function observeStore(store) {
|
||||
function observeStore(store, key) {
|
||||
store.instances = []
|
||||
store.updateSelfInstances = []
|
||||
extendStoreUpate(store)
|
||||
extendStoreUpate(store, key)
|
||||
|
||||
store.data = new JSONProxy(store.data).observe(false, function (patch) {
|
||||
const patchs = {}
|
||||
|
|
@ -48,35 +48,48 @@ function update(patch, store) {
|
|||
store.update(patch)
|
||||
}
|
||||
|
||||
function extendStoreUpate(store) {
|
||||
function extendStoreUpate(store, key) {
|
||||
store.update = function (patch) {
|
||||
const updateAll = matchGlobalData(this.globalData, patch)
|
||||
|
||||
if (Object.keys(patch).length > 0) {
|
||||
this.instances.forEach(instance => {
|
||||
if (
|
||||
updateAll ||
|
||||
this.updateAll ||
|
||||
(instance.constructor.updatePath &&
|
||||
needUpdate(patch, instance.constructor.updatePath)) || (
|
||||
instance._updatePath && needUpdate(patch, instance._updatePath))
|
||||
) {
|
||||
//update this.using
|
||||
if (instance.constructor.use) {
|
||||
instance.using = getUse(store.data, instance.constructor.use)
|
||||
} else if (instance.use) {
|
||||
instance.using = getUse(store.data, typeof instance.use === 'function' ? instance.use() : instance.use)
|
||||
}
|
||||
if (key) {
|
||||
if ((
|
||||
instance._updatePath && instance._updatePath[key] && needUpdate(patch, instance._updatePath[key]))) {
|
||||
if (instance.use) {
|
||||
getUse(store.data, (typeof instance.use === 'function' ? instance.use() : instance.use)[key], instance.using, key)
|
||||
}
|
||||
|
||||
instance.update()
|
||||
instance.update()
|
||||
}
|
||||
} else {
|
||||
if ((
|
||||
instance._updatePath && needUpdate(patch, instance._updatePath))) {
|
||||
if (instance.use) {
|
||||
instance.using = getUse(store.data, typeof instance.use === 'function' ? instance.use() : instance.use)
|
||||
}
|
||||
|
||||
instance.update()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
this.updateSelfInstances.forEach(instance => {
|
||||
if (instance._updateSelfPath && needUpdate(patch, instance._updateSelfPath)) {
|
||||
instance.usingSelf = getUse(store.data, typeof instance.useSelf === 'function' ? instance.useSelf() : instance.useSelf)
|
||||
instance.updateSelf()
|
||||
if (key) {
|
||||
if ((
|
||||
instance._updateSelfPath && instance._updateSelfPath[key] && needUpdate(patch, instance._updateSelfPath[key]))) {
|
||||
if (instance.useSelf) {
|
||||
getUse(store.data, (typeof instance.useSelf === 'function' ? instance.useSelf() : instance.useSelf)[key], instance.usingSelf, key)
|
||||
}
|
||||
|
||||
instance.updateSelf()
|
||||
}
|
||||
} else {
|
||||
if (instance._updateSelfPath && needUpdate(patch, instance._updateSelfPath)) {
|
||||
instance.usingSelf = getUse(store.data, typeof instance.useSelf === 'function' ? instance.useSelf() : instance.useSelf)
|
||||
instance.updateSelf()
|
||||
}
|
||||
}
|
||||
})
|
||||
this.onChange && this.onChange(patch)
|
||||
|
|
@ -84,20 +97,6 @@ function extendStoreUpate(store) {
|
|||
}
|
||||
}
|
||||
|
||||
export function matchGlobalData(globalData, diffResult) {
|
||||
if (!globalData) return false
|
||||
for (let keyA in diffResult) {
|
||||
if (globalData.indexOf(keyA) > -1) {
|
||||
return true
|
||||
}
|
||||
for (let i = 0, len = globalData.length; i < len; i++) {
|
||||
if (includePath(keyA, globalData[i])) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
export function needUpdate(diffResult, updatePath) {
|
||||
for (let keyA in diffResult) {
|
||||
|
|
@ -146,7 +145,10 @@ function getArrayPatch(path, store) {
|
|||
for (let i = 1, len = arr.length; i < len - 1; i++) {
|
||||
current = current[arr[i]]
|
||||
}
|
||||
return { k: fixArrPath(path), v: current }
|
||||
return {
|
||||
k: fixArrPath(path),
|
||||
v: current
|
||||
}
|
||||
}
|
||||
|
||||
function fixArrPath(path) {
|
||||
|
|
|
|||
|
|
@ -137,3 +137,25 @@ export function getValByPath(path, current) {
|
|||
})
|
||||
return current
|
||||
}
|
||||
|
||||
export function getPath(obj, out, name) {
|
||||
const result = {}
|
||||
obj.forEach(item => {
|
||||
if (typeof item === 'string') {
|
||||
result[item] = true
|
||||
} else {
|
||||
const tempPath = item[Object.keys(item)[0]]
|
||||
if (typeof tempPath === 'string') {
|
||||
result[tempPath] = true
|
||||
} else {
|
||||
if (typeof tempPath[0] === 'string') {
|
||||
result[tempPath[0]] = true
|
||||
} else {
|
||||
tempPath[0].forEach(path => (result[path] = true))
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
if(out) out[name] = result
|
||||
return result
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,276 +1,274 @@
|
|||
import { cssToDom, isArray, getUse, hyphenate, getValByPath } from './util'
|
||||
import {
|
||||
cssToDom,
|
||||
isArray,
|
||||
getUse,
|
||||
hyphenate,
|
||||
getValByPath
|
||||
} from './util'
|
||||
import { diff } from './vdom/diff'
|
||||
import options from './options'
|
||||
import { getPath } from './define'
|
||||
import { getPath } from './util'
|
||||
|
||||
let id = 0
|
||||
|
||||
export default class WeElement extends HTMLElement {
|
||||
static is = 'WeElement'
|
||||
static is = 'WeElement'
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.props = Object.assign({},
|
||||
this.constructor.defaultProps
|
||||
)
|
||||
this.elementId = id++
|
||||
}
|
||||
constructor() {
|
||||
super()
|
||||
this.props = Object.assign({},
|
||||
this.constructor.defaultProps
|
||||
)
|
||||
this.elementId = id++
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
let p = this.parentNode
|
||||
while (p && !this.store) {
|
||||
this.store = p.store
|
||||
p = p.parentNode || p.host
|
||||
}
|
||||
connectedCallback() {
|
||||
let p = this.parentNode
|
||||
while (p && !this.store) {
|
||||
this.store = p.store
|
||||
p = p.parentNode || p.host
|
||||
}
|
||||
|
||||
if (this.use) {
|
||||
let use
|
||||
if(typeof this.use === 'function'){
|
||||
use = this.use()
|
||||
}else{
|
||||
use = this.use
|
||||
}
|
||||
if (this.use) {
|
||||
let use
|
||||
if (typeof this.use === 'function') {
|
||||
use = this.use()
|
||||
} else {
|
||||
use = this.use
|
||||
}
|
||||
|
||||
|
||||
if(options.isMultiStore){
|
||||
if (options.isMultiStore) {
|
||||
let _updatePath = {}
|
||||
let using = {}
|
||||
for(let storeName in use){
|
||||
for (let storeName in use) {
|
||||
_updatePath[storeName] = {}
|
||||
using[storeName] = {}
|
||||
getPath(use[storeName], _updatePath, storeName)
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName)
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName)
|
||||
this.store[storeName].instances.push(this)
|
||||
}
|
||||
this.using = using
|
||||
this._updatePath = _updatePath
|
||||
}else{
|
||||
} else {
|
||||
this._updatePath = getPath(use)
|
||||
this.using = getUse(this.store.data, use)
|
||||
this.store.instances.push(this)
|
||||
}
|
||||
} else {
|
||||
if(this.constructor.use ){
|
||||
if(options.isMultiStore){
|
||||
this._updatePath = getPath(use[storeName], storeName)
|
||||
this.using = getUse(this.store[storeName].data, use[storeName], storeName)
|
||||
this.store[storeName].instances.push(this)
|
||||
|
||||
}else{
|
||||
this.using = getUse(this.store.data, this.constructor.use)
|
||||
this.store.instances.push(this)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
if(this.useSelf){
|
||||
if (this.useSelf) {
|
||||
const use = typeof this.useSelf === 'function' ? this.useSelf() : this.useSelf
|
||||
if(options.isMultiStore){
|
||||
for(let storeName in use){
|
||||
this._updateSelfPath = getPath(use[storeName], storeName)
|
||||
this.usingSelf = getUse(this.store[storeName].data, use[storeName], storeName)
|
||||
if (options.isMultiStore) {
|
||||
let _updatePath = {}
|
||||
let using = {}
|
||||
for (let storeName in use) {
|
||||
getPath(use[storeName], _updatePath, storeName)
|
||||
getUse(this.store[storeName].data, use[storeName], using, storeName)
|
||||
this.store[storeName].updateSelfInstances.push(this)
|
||||
}
|
||||
}else{
|
||||
this.usingSelf = using
|
||||
this._updateSelfPath = _updatePath
|
||||
} else {
|
||||
this._updateSelfPath = getPath(use)
|
||||
this.usingSelf = getUse(this.store.data, use)
|
||||
this.store.updateSelfInstances.push(this)
|
||||
}
|
||||
}
|
||||
this.attrsToProps()
|
||||
this.beforeInstall()
|
||||
this.install()
|
||||
this.afterInstall()
|
||||
this.attrsToProps()
|
||||
this.beforeInstall()
|
||||
this.install()
|
||||
this.afterInstall()
|
||||
|
||||
let shadowRoot
|
||||
if (!this.shadowRoot) {
|
||||
shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
})
|
||||
} else {
|
||||
shadowRoot = this.shadowRoot
|
||||
let fc
|
||||
while ((fc = shadowRoot.firstChild)) {
|
||||
shadowRoot.removeChild(fc)
|
||||
}
|
||||
}
|
||||
let shadowRoot
|
||||
if (!this.shadowRoot) {
|
||||
shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
})
|
||||
} else {
|
||||
shadowRoot = this.shadowRoot
|
||||
let fc
|
||||
while ((fc = shadowRoot.firstChild)) {
|
||||
shadowRoot.removeChild(fc)
|
||||
}
|
||||
}
|
||||
|
||||
if (this.constructor.css) {
|
||||
shadowRoot.appendChild(cssToDom(this.constructor.css))
|
||||
} else if (this.css) {
|
||||
shadowRoot.appendChild(cssToDom(typeof this.css === 'function' ? this.css() : this.css))
|
||||
}
|
||||
this.beforeRender()
|
||||
options.afterInstall && options.afterInstall(this)
|
||||
if (this.constructor.css) {
|
||||
shadowRoot.appendChild(cssToDom(this.constructor.css))
|
||||
} else if (this.css) {
|
||||
shadowRoot.appendChild(cssToDom(typeof this.css === 'function' ? this.css() : this.css))
|
||||
}
|
||||
this.beforeRender()
|
||||
options.afterInstall && options.afterInstall(this)
|
||||
|
||||
|
||||
const rendered = this.render(this.props, this.store)
|
||||
this.__hasChildren = Object.prototype.toString.call(rendered) === '[object Array]' && rendered.length > 0
|
||||
const rendered = this.render(this.props, this.store)
|
||||
this.__hasChildren = Object.prototype.toString.call(rendered) === '[object Array]' && rendered.length > 0
|
||||
|
||||
this.rootNode = diff(
|
||||
null,
|
||||
rendered,
|
||||
null,
|
||||
this
|
||||
)
|
||||
this.rendered()
|
||||
this.rootNode = diff(
|
||||
null,
|
||||
rendered,
|
||||
null,
|
||||
this
|
||||
)
|
||||
this.rendered()
|
||||
|
||||
if (this.props.css) {
|
||||
this._customStyleElement = cssToDom(this.props.css)
|
||||
this._customStyleContent = this.props.css
|
||||
shadowRoot.appendChild(this._customStyleElement)
|
||||
}
|
||||
if (this.props.css) {
|
||||
this._customStyleElement = cssToDom(this.props.css)
|
||||
this._customStyleContent = this.props.css
|
||||
shadowRoot.appendChild(this._customStyleElement)
|
||||
}
|
||||
|
||||
if (isArray(this.rootNode)) {
|
||||
this.rootNode.forEach(function (item) {
|
||||
shadowRoot.appendChild(item)
|
||||
})
|
||||
} else {
|
||||
shadowRoot.appendChild(this.rootNode)
|
||||
}
|
||||
this.installed()
|
||||
if (isArray(this.rootNode)) {
|
||||
this.rootNode.forEach(function (item) {
|
||||
shadowRoot.appendChild(item)
|
||||
})
|
||||
} else {
|
||||
shadowRoot.appendChild(this.rootNode)
|
||||
}
|
||||
this.installed()
|
||||
this._isInstalled = true
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.uninstall()
|
||||
this._isInstalled = false
|
||||
if (this.store) {
|
||||
for (let i = 0, len = this.store.instances.length; i < len; i++) {
|
||||
if (this.store.instances[i] === this) {
|
||||
this.store.instances.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
disconnectedCallback() {
|
||||
this.uninstall()
|
||||
this._isInstalled = false
|
||||
if (this.store) {
|
||||
for (let i = 0, len = this.store.instances.length; i < len; i++) {
|
||||
if (this.store.instances[i] === this) {
|
||||
this.store.instances.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
update(ignoreAttrs, updateSelf) {
|
||||
this._willUpdate = true
|
||||
this.beforeUpdate()
|
||||
this.beforeRender()
|
||||
//fix null !== undefined
|
||||
if (this._customStyleContent != this.props.css) {
|
||||
this._customStyleContent = this.props.css
|
||||
this._customStyleElement.textContent = this._customStyleContent
|
||||
}
|
||||
this.attrsToProps(ignoreAttrs)
|
||||
update(ignoreAttrs, updateSelf) {
|
||||
this._willUpdate = true
|
||||
this.beforeUpdate()
|
||||
this.beforeRender()
|
||||
//fix null !== undefined
|
||||
if (this._customStyleContent != this.props.css) {
|
||||
this._customStyleContent = this.props.css
|
||||
this._customStyleElement.textContent = this._customStyleContent
|
||||
}
|
||||
this.attrsToProps(ignoreAttrs)
|
||||
|
||||
const rendered = this.render(this.props, this.store)
|
||||
this.rendered()
|
||||
this.__hasChildren = this.__hasChildren || (Object.prototype.toString.call(rendered) === '[object Array]' && rendered.length > 0)
|
||||
const rendered = this.render(this.props, this.store)
|
||||
this.rendered()
|
||||
this.__hasChildren = this.__hasChildren || (Object.prototype.toString.call(rendered) === '[object Array]' && rendered.length > 0)
|
||||
|
||||
this.rootNode = diff(
|
||||
this.rootNode,
|
||||
rendered,
|
||||
this.shadowRoot,
|
||||
this,
|
||||
updateSelf
|
||||
)
|
||||
this._willUpdate = false
|
||||
this.rootNode = diff(
|
||||
this.rootNode,
|
||||
rendered,
|
||||
this.shadowRoot,
|
||||
this,
|
||||
updateSelf
|
||||
)
|
||||
this._willUpdate = false
|
||||
this.updated()
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
updateSelf(ignoreAttrs) {
|
||||
this.update(ignoreAttrs, true)
|
||||
}
|
||||
updateSelf(ignoreAttrs) {
|
||||
this.update(ignoreAttrs, true)
|
||||
}
|
||||
|
||||
removeAttribute(key) {
|
||||
super.removeAttribute(key)
|
||||
//Avoid executing removeAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update()
|
||||
}
|
||||
removeAttribute(key) {
|
||||
super.removeAttribute(key)
|
||||
//Avoid executing removeAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update()
|
||||
}
|
||||
|
||||
setAttribute(key, val) {
|
||||
if (val && typeof val === 'object') {
|
||||
super.setAttribute(key, JSON.stringify(val))
|
||||
} else {
|
||||
super.setAttribute(key, val)
|
||||
}
|
||||
//Avoid executing setAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update()
|
||||
}
|
||||
setAttribute(key, val) {
|
||||
if (val && typeof val === 'object') {
|
||||
super.setAttribute(key, JSON.stringify(val))
|
||||
} else {
|
||||
super.setAttribute(key, val)
|
||||
}
|
||||
//Avoid executing setAttribute methods before connectedCallback
|
||||
this._isInstalled && this.update()
|
||||
}
|
||||
|
||||
pureRemoveAttribute(key) {
|
||||
super.removeAttribute(key)
|
||||
}
|
||||
pureRemoveAttribute(key) {
|
||||
super.removeAttribute(key)
|
||||
}
|
||||
|
||||
pureSetAttribute(key, val) {
|
||||
super.setAttribute(key, val)
|
||||
}
|
||||
pureSetAttribute(key, val) {
|
||||
super.setAttribute(key, val)
|
||||
}
|
||||
|
||||
attrsToProps(ignoreAttrs) {
|
||||
const ele = this
|
||||
if (ele.normalizedNodeName || ignoreAttrs) return
|
||||
ele.props['css'] = ele.getAttribute('css')
|
||||
const attrs = this.constructor.propTypes
|
||||
if (!attrs) return
|
||||
Object.keys(attrs).forEach(key => {
|
||||
const type = attrs[key]
|
||||
const val = ele.getAttribute(hyphenate(key))
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
ele.props[key] = val
|
||||
break
|
||||
case Number:
|
||||
ele.props[key] = Number(val)
|
||||
break
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
ele.props[key] = false
|
||||
} else {
|
||||
ele.props[key] = true
|
||||
}
|
||||
break
|
||||
case Array:
|
||||
case Object:
|
||||
if (val[0] === ':') {
|
||||
ele.props[key] = getValByPath(val.substr(1), Omi.$)
|
||||
} else {
|
||||
ele.props[key] = JSON.parse(val
|
||||
.replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4')
|
||||
.replace(/'([\s\S]*?)'/g, '"$1"')
|
||||
.replace(/,(\s*})/g, '$1')
|
||||
)
|
||||
}
|
||||
break
|
||||
}
|
||||
} else {
|
||||
if (ele.constructor.defaultProps && ele.constructor.defaultProps.hasOwnProperty(key)) {
|
||||
ele.props[key] = ele.constructor.defaultProps[key]
|
||||
} else {
|
||||
ele.props[key] = null
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
attrsToProps(ignoreAttrs) {
|
||||
const ele = this
|
||||
if (ele.normalizedNodeName || ignoreAttrs) return
|
||||
ele.props['css'] = ele.getAttribute('css')
|
||||
const attrs = this.constructor.propTypes
|
||||
if (!attrs) return
|
||||
Object.keys(attrs).forEach(key => {
|
||||
const type = attrs[key]
|
||||
const val = ele.getAttribute(hyphenate(key))
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
ele.props[key] = val
|
||||
break
|
||||
case Number:
|
||||
ele.props[key] = Number(val)
|
||||
break
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
ele.props[key] = false
|
||||
} else {
|
||||
ele.props[key] = true
|
||||
}
|
||||
break
|
||||
case Array:
|
||||
case Object:
|
||||
if (val[0] === ':') {
|
||||
ele.props[key] = getValByPath(val.substr(1), Omi.$)
|
||||
} else {
|
||||
ele.props[key] = JSON.parse(val
|
||||
.replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4')
|
||||
.replace(/'([\s\S]*?)'/g, '"$1"')
|
||||
.replace(/,(\s*})/g, '$1')
|
||||
)
|
||||
}
|
||||
break
|
||||
}
|
||||
} else {
|
||||
if (ele.constructor.defaultProps && ele.constructor.defaultProps.hasOwnProperty(key)) {
|
||||
ele.props[key] = ele.constructor.defaultProps[key]
|
||||
} else {
|
||||
ele.props[key] = null
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
fire(name, data) {
|
||||
this.dispatchEvent(new CustomEvent(name, { detail: data }))
|
||||
}
|
||||
fire(name, data) {
|
||||
this.dispatchEvent(new CustomEvent(name, {
|
||||
detail: data
|
||||
}))
|
||||
}
|
||||
|
||||
beforeInstall() { }
|
||||
beforeInstall() {}
|
||||
|
||||
install() { }
|
||||
install() {}
|
||||
|
||||
afterInstall() { }
|
||||
afterInstall() {}
|
||||
|
||||
installed() { }
|
||||
installed() {}
|
||||
|
||||
uninstall() { }
|
||||
uninstall() {}
|
||||
|
||||
beforeUpdate() { }
|
||||
beforeUpdate() {}
|
||||
|
||||
updated() { }
|
||||
updated() {}
|
||||
|
||||
beforeRender() { }
|
||||
beforeRender() {}
|
||||
|
||||
rendered() { }
|
||||
rendered() {}
|
||||
|
||||
receiveProps() { }
|
||||
receiveProps() {}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ describe('store', () => {
|
|||
|
||||
class Ele extends WeElement {
|
||||
use = ['a']
|
||||
|
||||
|
||||
installed(){
|
||||
this.store.data.a = 2
|
||||
}
|
||||
|
|
@ -94,10 +94,10 @@ describe('store', () => {
|
|||
})
|
||||
|
||||
|
||||
it('test static use', () => {
|
||||
it('test use', () => {
|
||||
|
||||
class Ele extends WeElement {
|
||||
static use = ['a']
|
||||
use = ['a']
|
||||
|
||||
installed(){
|
||||
this.store.data.a = 2
|
||||
|
|
@ -167,7 +167,7 @@ describe('store', () => {
|
|||
|
||||
expect(scratch.firstChild.shadowRoot.innerHTML).to.equal('<div>2</div>')
|
||||
})
|
||||
|
||||
|
||||
|
||||
it('test auto updata a', () => {
|
||||
|
||||
|
|
@ -191,7 +191,7 @@ describe('store', () => {
|
|||
|
||||
expect(scratch.firstChild.shadowRoot.innerHTML).to.equal('<div>2</div>')
|
||||
})
|
||||
|
||||
|
||||
it('test auto updata b', () => {
|
||||
|
||||
class Ele extends WeElement {
|
||||
|
|
@ -214,11 +214,11 @@ describe('store', () => {
|
|||
|
||||
expect(scratch.firstChild.shadowRoot.innerHTML).to.equal('<div>2</div>')
|
||||
})
|
||||
|
||||
|
||||
it('test auto updata c', () => {
|
||||
|
||||
class Ele extends WeElement {
|
||||
|
||||
|
||||
|
||||
installed(){
|
||||
this.store.data.a.b = 2
|
||||
|
|
@ -237,7 +237,7 @@ describe('store', () => {
|
|||
|
||||
expect(scratch.firstChild.shadowRoot.innerHTML).to.equal('<div>1</div>')
|
||||
})
|
||||
|
||||
|
||||
|
||||
it('test auto updata with array path a', () => {
|
||||
|
||||
|
|
@ -261,7 +261,7 @@ describe('store', () => {
|
|||
|
||||
expect(scratch.firstChild.shadowRoot.innerHTML).to.equal('<div>2</div>')
|
||||
})
|
||||
|
||||
|
||||
|
||||
it('test auto updata with array path b', () => {
|
||||
|
||||
|
|
@ -285,7 +285,7 @@ describe('store', () => {
|
|||
|
||||
expect(scratch.firstChild.shadowRoot.innerHTML).to.equal('<div>2</div>')
|
||||
})
|
||||
|
||||
|
||||
it('test auto updata with array path c', () => {
|
||||
|
||||
class Ele extends WeElement {
|
||||
|
|
@ -308,7 +308,7 @@ describe('store', () => {
|
|||
|
||||
expect(scratch.firstChild.shadowRoot.innerHTML).to.equal('<div>2</div>')
|
||||
})
|
||||
|
||||
|
||||
it('test auto updata with array path c', () => {
|
||||
|
||||
class Ele extends WeElement {
|
||||
|
|
|
|||
Loading…
Reference in New Issue