elmer-ui-core
Version:
web app framework
948 lines • 70.6 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ElmerRender = void 0;
var elmer_common_1 = require("elmer-common");
var elmer_redux_1 = require("elmer-redux");
var elmer_virtual_dom_1 = require("elmer-virtual-dom");
var SvgConfig_1 = require("../configuration/SvgConfig");
var inject_1 = require("../inject");
var globalClassFactory_1 = require("../inject/globalClassFactory");
var middleware_1 = require("../middleware");
var InjectComponent_1 = require("../middleware/InjectComponent");
var RenderMiddleware_1 = require("../middleware/RenderMiddleware");
var ElmerDom_1 = require("./ElmerDom");
var ElmerUI_1 = require("./ElmerUI");
var ElmerVirtualRender_1 = require("./ElmerVirtualRender");
var ElmerRender = (function (_super) {
__extends(ElmerRender, _super);
function ElmerRender(props) {
var _this = _super.call(this) || this;
_this.domList = {};
_this.contentChildren = [];
_this.eventListeners = [];
_this.resizeID = [];
_this.virtualDomList = {};
_this.isPropsChagneRefreshed = false;
_this.isNeedParse = true;
_this.virtualTarget = props.virtualTarget;
_this.renderComponent = props.component;
_this.htmlCode = props.htmlCode;
_this.renderComponent.parent = props.target || props.virtualTarget;
_this.contentDOM = props.contentDom;
_this.previousSibling = props.previousSibling;
_this.contextStore = props.context;
_this.uiOptions = props.uiRenderOptions;
_this.virtualId = _this.isEmpty(props.virtualId) ? _this.guid() : props.virtualId;
_this.path = props.path;
_this.extend(_this.renderComponent, {
addEvent: _this.bindDomEvent.bind(_this),
setData: _this.setComponentData.bind(_this),
setState: _this.setComponentState.bind(_this)
}, true);
typeof _this.renderComponent.$init === "function" && _this.renderComponent.$init();
return _this;
}
ElmerRender.prototype.render = function (isFirstRender) {
var _this = this;
try {
if (!isFirstRender) {
var getChildContext = this.renderComponent.getChildContext;
var contextData = typeof getChildContext === "function" ? getChildContext.call(this.renderComponent) : null;
if (contextData) {
var storeData = JSON.parse(JSON.stringify(this.contextStore));
this.extend(this.renderComponent.context, contextData);
this.extend(storeData, contextData);
this.contextStore = storeData;
}
getChildContext = null;
contextData = null;
}
if (this.isFunction((this.renderComponent)["$before"])) {
var isUpdate = this.renderComponent["$before"]();
if (isUpdate !== undefined && !isUpdate) {
return;
}
}
if (!this.renderComponent.template ||
this.isEmpty(this.renderComponent.template.url) ||
(this.renderComponent.template && !this.isEmpty(this.renderComponent.template.url) && this.renderComponent.template.fromLoader)) {
var htmlCode = this.renderComponent.render();
this.setHtmlCode(htmlCode);
this.renderHtml();
this.afterRender(isFirstRender);
}
else {
var ajaxHtmlCode_1 = "";
var ajaxHtmlCodeLoadCompleted_1 = false;
var beginTime = (new Date()).getTime();
var endTime = beginTime;
var timeout = this.renderComponent.template.timeout || 3000;
this.renderComponent.loadTemplate(this.renderComponent.template.url, this.renderComponent.template.isEndPoint, this.renderComponent.template.ajaxType).then(function (resp) {
ajaxHtmlCodeLoadCompleted_1 = true;
ajaxHtmlCode_1 = resp;
_this.setHtmlCode(ajaxHtmlCode_1);
_this.renderHtml();
_this.afterRender(isFirstRender);
}).catch(function (err) {
ajaxHtmlCodeLoadCompleted_1 = true;
ajaxHtmlCode_1 = err.statusText || err.message || "<h6>Load Template fail.</h6>";
});
while (!ajaxHtmlCodeLoadCompleted_1) {
endTime = (new Date()).getTime();
var effTime = (endTime - beginTime);
if (effTime > timeout) {
break;
}
}
beginTime = null;
endTime = null;
timeout = null;
this.setHtmlCode(ajaxHtmlCode_1);
this.renderHtml();
this.afterRender(isFirstRender);
}
}
catch (e) {
var pathStr = this.path ? this.path.join("->") + "->" : "";
console.error(e, pathStr + this.getValue(this, "renderComponent.selector"));
}
};
ElmerRender.prototype.afterRender = function (isFirstRender) {
var myComponents = this.virtualDomList || {};
if (!this.renderComponent["firstRender"]) {
Object.keys(myComponents).map(function (myKey) {
var tmpComponent = myComponents[myKey];
var curComponent = tmpComponent.component;
var tmpRender = tmpComponent.render;
if (curComponent["firstRender"]) {
delete (curComponent["firstRender"]);
tmpRender.afterRender();
}
});
if (this.isFunction(this.renderComponent.$after)) {
this.renderComponent.$after();
console.warn("Life cycle function $after will be removed in the new version. Please use didmount and didupdate instead");
}
}
if (this.uiOptions && this.uiOptions.isRSV && !this.rsvAttachDom) {
this.rsvAttachDom = true;
}
!isFirstRender && typeof this.renderComponent.$didUpdate === "function" && typeof this.renderComponent.$didUpdate();
};
ElmerRender.prototype.dispose = function () {
var _this = this;
this.releaseAllEvents();
typeof this.renderComponent.$willMount === "function" && this.renderComponent.$willMount();
if (this.nodeData && this.nodeData.children && this.nodeData.children.length > 0) {
this.nodeData.children.map(function (tmpChild, index) {
if (_this.isDOM(tmpChild.dom)) {
if (tmpChild.dom.parentElement) {
tmpChild.dom.parentElement.removeChild(tmpChild.dom);
}
}
delete _this.nodeData.children[index];
});
}
this.nodeData = {};
if (this.resizeID && this.resizeID.length > 0) {
this.resizeID.map(function (id) {
ElmerUI_1.removeResize(id);
});
this.resizeID = [];
}
this.renderComponent && this.renderComponent.dom && Object.keys(this.renderComponent.dom).map(function (dKey) {
_this.renderComponent.dom[dKey] = null;
delete _this.renderComponent.dom[dKey];
});
this.renderComponent && this.renderComponent.domList && Object.keys(this.renderComponent.domList).map(function (dKey) {
_this.renderComponent.domList[dKey];
delete _this.renderComponent.domList[dKey];
});
this.nodeData.virtualID = this.virtualId;
this.injectComponent.releaseComponent(this.renderComponent, this.nodeData);
this.eventListeners = [];
Object.keys(this.virtualDomList).map(function (tmpID) {
_this.virtualDomList[tmpID].render.dispose();
_this.virtualDomList[tmpID].render = null;
_this.virtualDomList[tmpID].component = null;
_this.virtualDomList[tmpID] = null;
delete _this.virtualDomList[tmpID];
});
this.isFunction(this.renderComponent["$dispose"]) && this.renderComponent["$dispose"]();
for (var key in this.renderComponent) {
delete this.renderComponent[key];
}
this.virtualDomList = {};
this.renderComponent.dom = {};
this.renderComponent = null;
this.virtualTarget = null;
delete this.renderComponent;
delete this.virtualDiff;
delete this.nodeData;
delete this.htmlParse;
delete this.htmlCode;
delete this.injectComponent;
delete this.injectModel;
};
ElmerRender.prototype.bindDomEvent = function (handler, dom, eventName, eventAction, options, dataSet) {
var _this = this;
if (typeof eventAction === "function") {
if (this.eventListeners && this.isArray(this.eventListeners)) {
(function (eventListeners, evtDom, evtHandler, evtName, evtAction, evtOptions, dataSetValue) {
var bindAction = function (event) {
if (typeof evtAction === "function") {
return evtAction.apply(evtHandler, [
{
data: evtHandler.data,
dataSet: dataSetValue,
nativeEvent: event,
target: evtDom
},
evtHandler.data,
evtDom
]);
}
};
_this.dom.on(evtDom, evtName, bindAction, evtOptions);
eventListeners.push({
callBack: bindAction,
eventName: eventName,
obj: dom,
options: evtOptions
});
})(this.eventListeners, dom, handler, eventName, eventAction, options, dataSet);
}
else {
console.warn("The render object was disposed, Please check the bindEvent logic.", eventName);
}
}
};
ElmerRender.prototype.renderHtml = function () {
var _this = this;
var sourceDom = this.virtualDom.create("VirtualRoot");
var oldDom = this.nodeData || this.virtualDom.create("VirtualRoot");
if (!this.htmlParseData || this.isNeedParse) {
if (!this.isEmpty(this.htmlCode)) {
if (this.isString(this.htmlCode)) {
this.htmlParseData = this.htmlParse.parse(this.htmlCode, this.renderComponent.selector);
sourceDom = JSON.parse(JSON.stringify(this.htmlParseData));
}
else {
console.error(this.htmlCode, "----This Component don't need to parse code");
}
}
else {
this.htmlParseData = sourceDom;
}
}
else {
sourceDom = JSON.parse(JSON.stringify(this.htmlParseData));
}
typeof this.renderComponent.$beforeVirtualRender === "function" && this.renderComponent.$beforeVirtualRender(sourceDom);
this.virtualRender.setComponentData(this.renderComponent, sourceDom);
this.virtualRender.render();
if (this.renderComponent.props && (!this.isEmpty(this.renderComponent.props.if) || !this.isEmpty(this.renderComponent.props.show))) {
sourceDom.children.map(function (tmpSource, index) {
if (!_this.isEmpty(_this.renderComponent.props.if)) {
tmpSource.props.if = _this.renderComponent.props.if;
}
if (!_this.isEmpty(_this.renderComponent.props.show)) {
tmpSource.props.show = _this.renderComponent.props.show;
}
});
}
typeof this.renderComponent.$afterVirtualRender === "function" && this.renderComponent.$afterVirtualRender(sourceDom);
var updateChildren = this.renderComponent.props ? this.renderComponent.props.children : [];
this.replaceContent(sourceDom, updateChildren);
typeof this.renderComponent.$beforeDiff === "function" && this.renderComponent.$beforeDiff(sourceDom);
this.virtualDiff.diff(sourceDom, oldDom, this.renderComponent.selector);
typeof this.renderComponent.$afterDiff === "function" && this.renderComponent.$afterDiff(sourceDom);
var beforeRenderResult = this.isFunction(this.renderComponent["$beforeRender"]) ? this.renderComponent["$beforeRender"](sourceDom, oldDom) : null;
if (beforeRenderResult === null || beforeRenderResult === undefined || beforeRenderResult) {
this.nodeData = sourceDom;
this.releaseAllEvents();
this.renderNodeDataToDOM(sourceDom, this.virtualTarget, true);
}
this.deleteElements(sourceDom);
this.virtualDom.releaseDom(this.oldData);
this.virtualDom.clear();
this.oldData = null;
oldDom = null;
};
ElmerRender.prototype.setDomToParent = function (id, dom) {
throw new Error("Can not user this function before bind to User Component");
};
ElmerRender.prototype.setHtmlCode = function (nHtmlCode) {
var htmlCodeData = null;
if (this.getType(nHtmlCode) === "[object Module]") {
htmlCodeData = nHtmlCode.default;
if (this.isString(htmlCodeData)) {
this.isNeedParse = this.htmlCode !== htmlCodeData;
}
else {
this.isNeedParse = false;
this.htmlParseData = htmlCodeData;
}
}
else {
htmlCodeData = nHtmlCode;
if (this.isString(htmlCodeData)) {
this.isNeedParse = this.htmlCode !== htmlCodeData;
}
else {
this.htmlParseData = htmlCodeData;
this.isNeedParse = false;
}
}
this.htmlCode = htmlCodeData || "";
};
ElmerRender.prototype.renderDomEvents = function (dom, events, domData, dataSet) {
var _this = this;
if (events && this.isArray(events) && events.length > 0) {
events.map(function (evt) {
var isBinded = false;
if (/transitionEnd/.test(evt.eventName)) {
var transitions = {
MozTransition: "transitionend",
MsTransition: "msTransitionEnd",
OTransition: "oTransitionEnd",
WebkitTransition: "webkitTransitionEnd",
transition: "transitionend"
};
if (dom) {
for (var t in transitions) {
if (dom.style[t] !== undefined) {
evt.eventName = transitions[t];
break;
}
}
}
}
if (/animationEnd/.test(evt.eventName)) {
var animations = {
MozAnimation: "animationend",
MsAnimation: "msAnimationEnd",
OAnimation: "oAnimationEnd",
WebkitAnimation: "webkitAnimationEnd",
animation: "animationend"
};
if (dom) {
for (var t in animations) {
if (dom.style[t] !== undefined) {
evt.eventName = animations[t];
break;
}
}
}
}
for (var _i = 0, _a = _this.eventListeners; _i < _a.length; _i++) {
var tmpListen = _a[_i];
if (tmpListen["eventName"] === evt.eventName && tmpListen["obj"] === dom) {
isBinded = true;
break;
}
}
if (!isBinded) {
var passive = domData.props.passive !== undefined && domData.props.passive !== null ? domData.props.passive : true;
_this.bindDomEvent(evt.handler, dom, evt.eventName, evt.callBack, {
capture: !_this.isEmpty(dom.getAttribute("capture")),
passive: passive
}, dataSet);
}
});
}
};
ElmerRender.prototype.releaseAllEvents = function () {
var _this = this;
if (this.isArray(this.eventListeners)) {
this.eventListeners.map(function (tmpListener, index) {
_this.dom.removeEvent(tmpListener.obj, tmpListener.eventName, tmpListener.callBack, tmpListener.options);
_this.eventListeners[index] = null;
delete (_this.eventListeners[index]);
});
}
this.eventListeners = [];
};
ElmerRender.prototype.renderNodeDataToDOM = function (nodeData, parent, isFirstLevel, isSVG) {
var _this = this;
nodeData.children.map(function (itemNode, index) {
if (nodeData.isContent) {
itemNode.isContent = nodeData.isContent;
}
_this.nodeDataToDOM(itemNode, parent, isFirstLevel, index, isSVG);
});
};
ElmerRender.prototype.nodeDataToDOM = function (nodeData, parent, isFirstLevel, position, isSVG) {
if (nodeData.tagName !== undefined && nodeData.tagName !== null && !/^content$/i.test(nodeData.tagName)) {
var defineComponent = elmerData.components[nodeData.tagName];
if ((defineComponent === undefined || defineComponent === null) && this.isArray(this.renderComponent.components)) {
var components = this.renderComponent.components;
for (var key in components) {
if (components[key].selector === nodeData.tagName) {
defineComponent = components[key].component;
break;
}
}
components = null;
}
if (!this.isFunction(defineComponent)) {
if (!this.isEmpty(nodeData.tagName) && !/^\<\!--/i.test(nodeData.tagName) && !/^text$/i.test(nodeData.tagName) && !/^content$/i.test(nodeData.tagName)) {
var nextParent = null;
var dataProps = nodeData.props || {};
if (nodeData.tagName !== "svg" && !isSVG) {
if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.APPEND) {
var defineDom = this.getAppendDom(nodeData, parent, isSVG);
this.renderDomEvents(defineDom, nodeData.events, nodeData, nodeData.dataSet);
this.renderDomAttribute(defineDom, nodeData, isFirstLevel);
this.appendVirtualToDom(parent, defineDom, nodeData, isFirstLevel, position);
nextParent = defineDom;
if (nodeData.props && nodeData.props.id) {
if (!nodeData.isContent || nodeData.props.attach) {
this.renderComponent.dom[nodeData.props.id] = defineDom;
}
if (nodeData.isContent) {
this.setDomToParent(nodeData.props.id, defineDom);
}
}
}
else if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.DELETE) {
if (nodeData.dom) {
this.dom.unbind(nodeData.dom);
nodeData.dom.parentElement && nodeData.dom.parentElement.removeChild(nodeData.dom);
nodeData.dom = null;
}
this.releaseNodeDataChildren(nodeData);
}
else if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.UPDATE) {
this.renderDomEvents(nodeData.dom, nodeData.events, nodeData, nodeData.dataSet);
this.renderDomAttribute(nodeData.dom, nodeData, isFirstLevel);
nextParent = nodeData.dom;
}
else if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.NORMAL) {
this.renderDomEvents(nodeData.dom, nodeData.events, nodeData, nodeData.dataSet);
nextParent = nodeData.dom;
}
else {
nextParent = nodeData.dom;
}
if (/style/i.test(nodeData.tagName) && nextParent) {
if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.UPDATE || nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.APPEND) {
nextParent.innerHTML = nodeData.innerHTML;
}
}
else if (/script/i.test(nodeData.tagName)) {
nextParent.innerHTML = "// Unsafe code: Script code is not allowed to appear in template.";
console.error("Unsafe code: Script code is not allowed to appear in template.");
}
if (/^html$/i.test(dataProps.dataType) || /^html$/i.test(dataProps["data-type"])) {
if (nodeData.status !== "DELETE") {
var codeResult_1 = "";
nodeData.children.map(function (codeChild) {
var attrList = [];
if (codeChild.props) {
for (var key in codeChild.props) {
attrList.push(key + "=" + JSON.stringify(codeChild.props[key]));
}
}
if (codeChild.tagName !== "text") {
codeResult_1 += "<" + codeChild.tagName + " " + attrList.join(" ") + ">";
}
codeResult_1 += codeChild.innerHTML;
if (codeChild.tagName !== "text") {
codeResult_1 += "</" + codeChild.tagName + ">";
}
});
if (nextParent) {
nextParent.innerHTML = codeResult_1;
}
else {
if (nodeData.dom) {
nodeData.dom.innerHTML = codeResult_1;
}
}
}
}
else {
if (nodeData.children && nodeData.children.length > 0 && nextParent) {
this.renderNodeDataToDOM(nodeData, nextParent, false);
}
}
}
else {
if (nodeData.status === "APPEND") {
var svgParent = this.getAppendDom(nodeData, parent, true);
this.renderSVGAttribute(svgParent, nodeData, isFirstLevel);
if (parent) {
var svgHtmlCode_1 = "";
nodeData.children.map(function (tmpItem) {
svgHtmlCode_1 += tmpItem.innerHTML || "";
});
svgParent.innerHTML = svgHtmlCode_1;
nodeData.dom = svgParent;
parent.appendChild(svgParent);
if (nodeData.children.length > 0) {
this.renderNodeDataToDOM(nodeData, nodeData.dom, false, true);
}
}
}
else if (nodeData.status === "UPDATE") {
this.renderDomEvents(nodeData.dom, nodeData.events, nodeData, nodeData.dataSet);
this.renderDomAttribute(nodeData.dom, nodeData, isFirstLevel);
if (nodeData.children.length > 0) {
this.renderNodeDataToDOM(nodeData, nodeData.dom, false, true);
}
}
else if (nodeData.status === "DELETE") {
if (nodeData.dom && nodeData.dom.parentElement) {
nodeData.dom.parentElement.removeChild(nodeData.dom);
}
this.releaseNodeDataChildren(nodeData);
}
}
dataProps = null;
nextParent = null;
}
else if (/^text$/i.test(nodeData.tagName)) {
if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.APPEND) {
var textData = this.getAppendDom(nodeData, parent, isSVG);
this.appendVirtualToDom(parent, textData, nodeData, isFirstLevel, position);
if (nodeData.props && nodeData.props.id) {
if (!nodeData.isContent) {
this.renderComponent.dom[nodeData.props.id] = textData;
}
else {
this.setDomToParent(nodeData.props.id, textData);
}
}
}
else if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.DELETE) {
if (nodeData.dom) {
this.dom.unbind(nodeData.dom);
nodeData.dom.parentElement && nodeData.dom.parentElement.removeChild(nodeData.dom);
nodeData.dom = null;
delete nodeData.dom;
}
}
else if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.UPDATE) {
if (nodeData.dom) {
nodeData.dom.data = nodeData.innerHTML;
}
}
this.deleteElements(nodeData);
}
else if (/^\<\!--/i.test(nodeData.tagName)) {
if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.APPEND) {
var cmtDom = this.getAppendDom(nodeData, parent, isSVG);
this.appendVirtualToDom(parent, cmtDom, nodeData, isFirstLevel, position);
if (nodeData.props && nodeData.props.id) {
this.renderComponent.dom[nodeData.props.id] = cmtDom;
}
}
else if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.DELETE) {
if (nodeData.dom) {
this.dom.unbind(nodeData.dom);
nodeData.dom.parentElement.removeChild(nodeData.dom);
nodeData.dom = null;
delete nodeData.dom;
}
}
else if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.UPDATE) {
if (nodeData.dom) {
nodeData.dom.data = nodeData.innerHTML;
}
}
this.deleteElements(nodeData);
}
}
else {
nodeData.tagAttrs = __assign(__assign({}, (nodeData.tagAttrs || {})), { isComponent: true });
var hasChildrenChanged = this.isNodeHasChange(nodeData);
if (hasChildrenChanged) {
var prevSibling = this.getPrevDom(nodeData);
this.renderUserComponent(defineComponent, nodeData, parent, prevSibling, isFirstLevel, hasChildrenChanged);
}
else {
if (defineComponent["contextType"]) {
var oldVirtualDom = this.virtualDomList[nodeData.virtualID];
if (oldVirtualDom) {
var contextData = elmer_redux_1.getContext(this, defineComponent["contextType"]);
var isContextChange = JSON.stringify(oldVirtualDom.component.context) !== JSON.stringify(contextData);
if (isContextChange) {
typeof oldVirtualDom.component["$contextChange"] === "function" && oldVirtualDom.component["$contextChange"](contextData, JSON.parse(JSON.stringify(oldVirtualDom.component.context)));
}
delete oldVirtualDom.component.context;
this.defineReadOnlyProperty(oldVirtualDom.component, "context", contextData);
}
}
}
}
}
this.deleteElements(nodeData);
};
ElmerRender.prototype.renderUserComponent = function (componentClass, nodeData, targetParent, previousSibling, isFirstLevel, contentChangeOnly) {
var _this = this;
if (nodeData.status !== elmer_virtual_dom_1.VirtualElementOperate.DELETE) {
if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.UPDATE) {
var oldVirtualDom = this.virtualDomList[nodeData.virtualID];
if (oldVirtualDom && oldVirtualDom.component) {
var dataProps = nodeData.props || {};
var props = {};
if (componentClass["contextType"]) {
var contextData = elmer_redux_1.getContext(this, componentClass["contextType"]);
var isContextChange = JSON.stringify(oldVirtualDom.component.context) !== JSON.stringify(contextData);
if (isContextChange) {
typeof oldVirtualDom.component["$contextChange"] === "function" && oldVirtualDom.component["$contextChange"](contextData, JSON.parse(JSON.stringify(oldVirtualDom.component.context)));
}
delete oldVirtualDom.component.context;
this.defineReadOnlyProperty(oldVirtualDom.component, "context", contextData);
}
this.defineReadOnlyProperty(props, "children", this.getComponentChildren(nodeData));
this.extend(props, dataProps, true);
this.extend(props, this.getUserComponentEvents(nodeData), true);
this.injectComponent.beforeUpdateComponent(oldVirtualDom.component, componentClass, props, nodeData);
if (!this.isEqual(oldVirtualDom.component.props, props)) {
var oldProps = oldVirtualDom.component.props;
delete oldVirtualDom.component.props;
this.defineReadOnlyProperty(oldVirtualDom.component, "props", props);
this.injectComponent.run(oldVirtualDom.component, componentClass, nodeData);
this.isPropsChagneRefreshed = false;
if (typeof oldVirtualDom.component["$willReceiveProps"] === "function") {
typeof oldVirtualDom.component["$willReceiveProps"] === "function" && oldVirtualDom.component["$willReceiveProps"](props, oldProps);
}
else {
typeof oldVirtualDom.component["$onPropsChanged"] === "function" && oldVirtualDom.component["$onPropsChanged"](props, oldProps);
}
if (!this.isPropsChagneRefreshed && contentChangeOnly) {
oldVirtualDom.render.renderHtml();
}
}
}
}
else if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.APPEND) {
var dataProps = nodeData.props || {};
var domID = this.getRandomID();
nodeData.virtualID = domID;
var props = {};
this.defineReadOnlyProperty(props, "children", this.getComponentChildren(nodeData));
this.extend(props, dataProps, true);
this.extend(props, this.getUserComponentEvents(nodeData), true);
this.injectComponent.beforeInitComponent(componentClass, props, nodeData);
var component = new componentClass(props, elmer_redux_1.getContext(this, componentClass.contextType), "contextStore");
var getChildrenContext = component.getChildContext;
var mapContextData = typeof getChildrenContext === "function" ? getChildrenContext.call(component) : null;
var childContextData = mapContextData ? elmer_redux_1.defineContext(this, {
contextData: mapContextData,
saveAttrKey: "contextStore"
}) : this.contextStore;
var UserDefineComponents = this.renderComponent.components;
if (UserDefineComponents && UserDefineComponents.length > 0) {
var myComponents = component.components || [];
myComponents.push.apply(myComponents, UserDefineComponents);
delete component.components;
this.defineReadOnlyProperty(component, "components", myComponents);
UserDefineComponents = null;
myComponents = null;
}
var render = new ElmerRender({
component: component,
contentDom: null,
context: JSON.parse(JSON.stringify(childContextData)),
htmlCode: "",
path: !this.isEmpty(this.renderComponent.selector) ? (this.path && this.path.length > 0 ? __spreadArray(__spreadArray([], this.path), [this.renderComponent.selector]) : [this.renderComponent.selector]) : [],
previousSibling: previousSibling,
uiRenderOptions: this.uiOptions,
virtualId: domID,
virtualTarget: targetParent
});
this.injectComponent.initComponent(component, componentClass, nodeData);
this.injectComponent.run(component, componentClass, nodeData);
this.injectModel.inject(component, component["injectModel"], "model", false);
this.injectModel.inject(component, component["injectService"], "service", true);
if ((component["model"] && Object.keys(component["model"]).length > 0) || (component["service"] && Object.keys(component["service"]).length > 0)) {
this.isFunction(component["$inject"]) && component["$inject"]();
}
if (this.isFunction(component["$resize"])) {
var resizeID = this.getRandomID();
var resizeFn = component["$resize"]();
if (typeof resizeFn === "function") {
component["ResizeID"] = resizeID;
this.resizeID.push(resizeID);
ElmerUI_1.addResize(resizeID, resizeFn.bind(component));
}
}
render.setDomToParent = function (id, domObj) {
if (!_this.isEmpty(id) && domObj) {
_this.renderComponent.dom[id] = domObj;
}
};
component["firstRender"] = true;
render.render(true);
this.defineReadOnlyProperty(component, "firstLevel", isFirstLevel);
this.defineReadOnlyProperty(component, "domData", render.nodeData);
if (!this.isEmpty(props["id"])) {
if (this.renderComponent.dom === undefined || this.renderComponent.dom === null) {
this.renderComponent.dom = {};
}
if (!nodeData.isContent || nodeData.props.attach) {
this.renderComponent.dom[props["id"]] = component;
}
if (nodeData.isContent) {
this.setDomToParent(nodeData.props.id, component);
}
}
if (props["help"]) {
var propTypeRules_1 = componentClass.propType || {};
var contextTypeRules_1 = componentClass.contextType || {};
var isLog_1 = typeof console.table === "function";
var properties_1 = [];
console.log("------------>");
console.log("Component: ", nodeData.tagName);
Object.keys(propTypeRules_1).map(function (propKey) {
var rule = propTypeRules_1[propKey];
var typeName = rule.rule ? rule.rule.type || "Undefine TypeName" : "Undefine TypeName";
if (isLog_1) {
properties_1.push({
defaultValue: rule.defaultValue,
description: "[props属性]" + rule.description,
propertyName: propKey,
type: typeName
});
}
else {
console.log("propertyName: " + propKey, "type: " + typeName, "description: [props\u5C5E\u6027]" + rule.description, "defaultValue: ", rule.defaultValue);
}
rule = null;
typeName = null;
});
Object.keys(contextTypeRules_1).map(function (propKey) {
var rule = contextTypeRules_1[propKey];
var typeName = rule.rule ? rule.rule.type || "Undefine TypeName" : "Undefine TypeName";
if (isLog_1) {
properties_1.push({
defaultValue: rule.defaultValue,
description: "[context属性]" + rule.description,
propertyName: propKey,
type: typeName
});
}
else {
console.log("propertyName: " + propKey, "type: " + typeName, "description: [context\u5C5E\u6027]" + rule.description, "defaultValue: ", rule.defaultValue);
}
rule = null;
typeName = null;
});
if (typeof console.table === "function") {
console.table(properties_1);
}
properties_1 = null;
}
typeof component.$didMount === "function" && component.$didMount();
this.virtualDomList[domID] = {
component: component,
render: render
};
nodeData.tagAttrs["lastChild"] = this.getLastDom(render.nodeData);
getChildrenContext = null;
mapContextData = null;
childContextData = null;
}
else if (nodeData.status === elmer_virtual_dom_1.VirtualElementOperate.NORMAL) {
if (contentChangeOnly) {
var oldVirtualDom = this.virtualDomList[nodeData.virtualID];
if (oldVirtualDom && oldVirtualDom.component) {
delete oldVirtualDom.component.props.children;
this.defineReadOnlyProperty(oldVirtualDom.component.props, "children", nodeData.children);
oldVirtualDom.render.renderHtml();
}
}
}
}
else {
var oldVirtualDom = this.virtualDomList[nodeData.virtualID];
nodeData.tagAttrs = __assign(__assign({}, (nodeData.tagAttrs || {})), { isDelete: true });
if (oldVirtualDom) {
oldVirtualDom.render.dispose();
delete this.virtualDomList[nodeData.virtualID];
if (!this.isEmpty(nodeData.props.id)) {
delete this.renderComponent.dom[nodeData.props.id];
}
}
}
};
ElmerRender.prototype.isNodeHasChange = function (nodeData) {
var _this = this;
var result = false;
if (nodeData.status === "DELETE" || nodeData.status === "APPEND" || nodeData.status === "UPDATE") {
result = true;
}
else {
if (nodeData.children.length > 0) {
var checkChangeTask = [];
for (var _i = 0, _a = nodeData.children; _i < _a.length; _i++) {
var item = _a[_i];
if (item.status === "DELETE" || item.status === "APPEND" || item.status === "UPDATE") {
result = true;
break;
}
else {
checkChangeTask.push((function (checkItem) {
return function () {
return _this.isNodeHasChange(checkItem);
};
})(item));
}
}
if (!result) {
for (var _b = 0, checkChangeTask_1 = checkChangeTask; _b < checkChangeTask_1.length; _b++) {
var runTask = checkChangeTask_1[_b];
if (runTask()) {
result = true;
break;
}
}
}
}
}
return result;
};
ElmerRender.prototype.getComponentChildren = function (nodeData) {
var _this = this;
var children = [];
nodeData.children && nodeData.children.map(function (tmpItem) {
if ((tmpItem.tagName === "text" && !_this.isEmpty(tmpItem.innerHTML)) || tmpItem.tagName !== "text") {
children.push(tmpItem);
}
});
return children;
};
ElmerRender.prototype.getUserComponentEvents = function (nodeData) {
var _this = this;
var result = {};
nodeData.events.map(function (tmpEvent) {
if (_this.isFunction(tmpEvent.callBack)) {
result[tmpEvent.eventName] = tmpEvent.callBack.bind(tmpEvent.handler.owner);
}
});
return result;
};
ElmerRender.prototype.setComponentData = function (value, refresh) {
var render = this;
var myComponent = this.renderComponent;
if (this.isObject(value)) {
var dataChanged_1 = refresh;
if (!refresh) {
myComponent && Object.keys(value).map(function (cKey) {
if (/props/i.test(cKey)) {
Object.keys(value[cKey]).map(function (propKey) {
if (JSON.stringify(value[cKey][propKey]) !== JSON.stringify(myComponent[cKey][propKey])) {
dataChanged_1 = true;
}
});
}
else {
if (JSON.stringify(value[cKey]) !== JSON.stringify(myComponent[cKey])) {
dataChanged_1 = true;
}
}
});
}
if (dataChanged_1 && myComponent) {
this.extend(myComponent, value);
if (typeof render["render"] === "function") {
render["render"]();
}
this.isPropsChagneRefreshed = true;
}
}
else {
throw new Error("setData action get an wrong data,it\"s must be an object!");
}
};
ElmerRender.prototype.setComponentState = function (data, refresh) {
var render = this;
var myComponent = this.renderComponent;
if (this.isObject(data)) {
var dataChanged = refresh;
if (!refresh && myComponent) {
var oldState = myComponent.state || {};
for (var _i = 0, _a = Object.keys(data); _i < _a.length; _i++) {
var cKey = _a[_i];
if (JSON.stringify(data[cKey]) !== JSON.stringify(oldState[cKey])) {
dataChanged = true;
break;
}
}
oldState = null;
}
if (dataChanged && myComponent) {
this.extend(myComponent.state, data);
if (typeof render["render"] === "function") {
render["render"]();
}
this.isPropsChagneRefreshed = true;
}
dataChanged = null;
}
else {
throw new Error("setState action get an wrong data,it\"s must be an object!");
}
};
ElmerRender.prototype.renderSVGAttribute = function (dom, domData, firstLevel) {
if (domData.status === elmer_virtual_dom_1.VirtualElementOperate.APPEND || domData.status === elmer_virtual_dom_1.VirtualElementOperate.UPDATE) {
this.renderDomAttribute(dom, domData, firstLevel);
}
};
ElmerRender.prototype.renderDomAttribute = function (dom, domData, firstLevel) {
var _this = this;
try {
if (dom && this.isFunction(dom.getAttribute)) {
var isSVG_1 = /^\[object\sSVG([a-zA-Z]*)Element\]$/.test(this.getType(dom));
if (domData.props && (domData.status === elmer_virtual_dom_1.VirtualElementOperate.APPEND || domData.status === elmer_virtual_dom_1.VirtualElementOperate.UPDATE)) {
var hasVisibleCheck_1 = false;
var hasVisibleCheckValue_1 = null;
var lastCheckProps_1 = {};
var hasClassValue_1 = false;
var changeProps_1 = domData.status === elmer_virtual_dom_1.VirtualElementOperate.UPDATE ? domData.changeAttrs : domData.props;
if (this.uiOptions && this.uiOptions.isRSV) {
changeProps_1["data-rsv-class"] = this.renderComponent["selector"] || "Root";
changeProps_1["data-rsv-path"] = domD