elmer-ui-core
Version:
web app framework
600 lines (599 loc) • 30.1 kB
JavaScript
;
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.ElmerVirtualRender = void 0;
var elmer_common_1 = require("elmer-common");
var elmer_virtual_dom_1 = require("elmer-virtual-dom");
var inject_1 = require("../inject");
var RenderMiddleware_1 = require("../middleware/RenderMiddleware");
var ElmerVirtualRender = (function (_super) {
__extends(ElmerVirtualRender, _super);
function ElmerVirtualRender() {
var _this = _super.call(this) || this;
_this.debug = false;
return _this;
}
ElmerVirtualRender.prototype.setComponentData = function (component, virtualDomData) {
this.renderComponent = component;
this.nodeData = virtualDomData;
};
ElmerVirtualRender.prototype.render = function () {
if (this.nodeData && this.nodeData.children && this.nodeData.children.length > 0) {
this.renderRepeat(this.nodeData);
this.renderAttribute(this.nodeData);
this.debug = false;
}
return this.nodeData;
};
ElmerVirtualRender.prototype.renderRepeat = function (nodeData) {
var _a;
if (nodeData) {
var index = 0;
var maxIndex = nodeData.children.length;
while (index < maxIndex) {
var checkNode = nodeData.children[index];
var repResult = this.renderRepeatAction(checkNode);
if (repResult.isRepeat) {
var forItems = repResult.data || [];
if (forItems.length > 0) {
(_a = nodeData.children).splice.apply(_a, __spreadArray([index, 1], forItems));
for (var i = index; i < nodeData.children.length; i++) {
this.virtualDom.init(nodeData);
this.virtualDom.updatePath(nodeData.children[i], nodeData.path, i);
this.virtualDom.clear();
this.renderRepeat(nodeData.children[i]);
}
index += forItems.length - 1;
}
else {
nodeData.children[index].status = "DELETE";
index += 1;
}
}
else {
index += 1;
this.renderRepeat(checkNode);
}
}
maxIndex = null;
}
};
ElmerVirtualRender.prototype.renderRepeatAction = function (nodeData) {
var _this = this;
var result = new Array();
var attr = nodeData.props || {};
var attrKeys = Object.keys(attr);
var isRepeat = false;
for (var j = 0; j < attrKeys.length; j++) {
var subKey = attrKeys[j];
var reg = /^\s*(em|act):for\s*$/i;
if (reg.test(subKey)) {
var repeateValue = attr[subKey];
var valueReg = /^\s*let\s+([a-z0-9.]*)\s+in\s+([a-z0-9._]*)\s*$/i;
var noLetReg = /^\s*([a-z0-9.]*)\s+in\s+([a-z0-9._]*)\s*$/i;
var isMatch = valueReg.test(repeateValue) || noLetReg.test(repeateValue);
if (isMatch) {
var matchData = repeateValue.match(valueReg) || repeateValue.match(noLetReg);
isRepeat = true;
if (matchData) {
var key = matchData[1], valueKey = matchData[2];
var repeatSource = null;
var propsData = nodeData.data || {};
if (/^this./i.test(valueKey)) {
repeatSource = this.getValue(this.renderComponent, valueKey.replace(/^this./i, ""));
}
else {
repeatSource = this.getValue(propsData, valueKey);
}
if (this.isArray(repeatSource) || this.isObject(repeatSource)) {
delete nodeData.props[subKey];
var sourceKeys = Object.keys(repeatSource);
if (sourceKeys.length > 0) {
this.virtualDom.clear();
this.virtualDom.init(nodeData);
var _loop_1 = function (i) {
var updateValue = {};
var sourceKey = sourceKeys[i];
updateValue[key] = repeatSource[sourceKey];
if (this_1.isObject(updateValue[key])) {
updateValue[key].key = i;
}
(function (currentData, delAttrKey) {
var newNode = _this.virtualDom.clone();
delete newNode.props[delAttrKey];
newNode.data["index"] = i;
_this.updateElementDataToAllChild(newNode, currentData);
result.push(newNode);
})(updateValue, subKey);
};
var this_1 = this;
for (var i = 0; i < sourceKeys.length; i++) {
_loop_1(i);
}
}
sourceKeys = null;
}
else {
nodeData.status = "DELETE";
nodeData.props.if = false;
delete nodeData.props[subKey];
}
}
}
break;
}
}
return {
data: result,
isRepeat: isRepeat
};
};
ElmerVirtualRender.prototype.updateElementDataToAllChild = function (updateDom, updateValue) {
var _this = this;
if (updateValue) {
updateDom.data = __assign(__assign({}, (updateDom.data || {})), updateValue);
}
updateDom.children.map(function (subDom) {
_this.updateElementDataToAllChild(subDom, updateValue);
});
};
ElmerVirtualRender.prototype.updateElementPath = function (updateDom, level, value) {
var _this = this;
if (updateDom) {
updateDom.path[level] = value;
updateDom.children.map(function (tmpItem) {
_this.updateElementPath(tmpItem, level, value);
});
}
};
ElmerVirtualRender.prototype.decodeLogicWards = function (logicCode) {
var logicResult = logicCode || "";
logicResult = logicResult.replace(/\seq\s/i, "===")
.replace(/\sneq\s/i, "!==")
.replace(/\sgt\s/i, ">")
.replace(/\sgteq\s/i, ">=")
.replace(/\slt\s/i, "<")
.replace(/\slteq\s/i, "<=");
return logicResult;
};
ElmerVirtualRender.prototype.getBindAction = function (valueCode, optionData) {
var resultAction = null;
var bindTargetReg = /^\s*([a-z0-9\-._]*)(.bind\(([a-z0-9]*)\))\s*$/i;
var bindTarget = {};
if (/^\s*[a-z0-9\-._]*\s*$/i.test(valueCode)) {
var action1 = this.getValue(this.renderComponent, valueCode);
resultAction = this.isFunction(action1) ? action1 : this.getValue(optionData, valueCode);
if (typeof resultAction === "function") {
bindTarget = {
data: optionData,
owner: this.renderComponent
};
resultAction = resultAction.bind(this.renderComponent);
}
}
else if (bindTargetReg.test(valueCode)) {
var bindTargetValueMatch = valueCode.match(bindTargetReg);
if (bindTargetValueMatch) {
var actionValueKey = bindTargetValueMatch[1], actionBindTargetKey = bindTargetValueMatch[3];
var actionValue = this.getValue(this.renderComponent, actionValueKey);
var actionBindTarget = actionBindTargetKey === "this" ? this.renderComponent : this.getValue(this.renderComponent, actionBindTargetKey);
actionValue = actionValue !== undefined ? actionValue : this.getValue(optionData, actionValueKey);
actionBindTarget = actionBindTarget !== undefined ? actionBindTarget : this.getValue(optionData, actionBindTargetKey);
if (this.isFunction(actionValue)) {
bindTarget = {
data: optionData,
owner: actionBindTarget
};
resultAction = actionValue.bind(actionBindTarget);
}
}
}
return {
callBack: resultAction,
handler: bindTarget
};
};
ElmerVirtualRender.prototype.getBindText = function (text, optionData) {
var staticReg = /\s*\{\{\s*([\!a-zA-Z0-9\-_.\s\|\'\"]*)\s*\}\}\s*/i;
var trueReg = /\s*\{\{\s*(true)\s*\}\}\s*/i;
var falseReg = /\s*\{\{\s*(false)\s*\}\}\s*/i;
var numReg = /\s*\{\{\s*([0-9\.]*)\s*\}\}\s*/i;
var resultText = text;
var middleRenderResult = this.renderMiddelware.virtualRenderBindText(this.renderComponent, text, optionData);
if (middleRenderResult !== undefined) {
resultText = middleRenderResult;
}
middleRenderResult = null;
if (!this.isEmpty(resultText)) {
if (staticReg.test(resultText) && !trueReg.test(resultText) && !falseReg.test(resultText)) {
var sigleReg = /\s*\{\{\s*([\!a-z0-9\-_.]*)\s*\}\}\s*/i;
var staticRegEx = /\s*(\{\{\s*(([a-z\s\d\w\|\'\"\.]*)([^\x00-\xff]*))*\s*\}\})\s*/img;
var staticMatchs = text.match(staticRegEx) || [];
if (staticMatchs.length > 0) {
var setDefaultReg1 = /\s*\{\{\s*([\!a-z0-9\-_.]*)\s*\|\s*([\!a-z0-9\-_.]*)\s*\}\}\s*/i;
var setDefaultReg2 = /\s*\{\{\s*([\!a-z0-9\-_.]*)\s*\|\s*\'\s*(.*)\s*\'\s*\}\}\s*/i;
var setDefaultReg3 = /\s*\{\{\s*([\!a-z0-9\-_.]*)\s*\|\s*\"\s*(.*)\s*\"\s*\}\}\s*/i;
for (var i = 0; i < staticMatchs.length; i++) {
var staticMatch = staticMatchs[i];
var staticMatchValue = staticMatch.match(/^\s*\{\{\s*([\!a-zA-Z0-9\-_.]*)\s*\}\}\s*$/i);
var setDefaultReg1Value = staticMatch.match(setDefaultReg1), setDefaultReg2Value = staticMatch.match(setDefaultReg2), setDefaultReg3Value = staticMatch.match(setDefaultReg3);
var staticValueKey = staticMatchValue ? staticMatchValue[1] : "";
var defaultValueKey = "", defaultValueIsText = true;
if (setDefaultReg1Value) {
staticValueKey = setDefaultReg1Value[1];
defaultValueKey = setDefaultReg1Value[2];
defaultValueIsText = false;
}
else if (setDefaultReg2Value) {
staticValueKey = setDefaultReg2Value[1];
defaultValueKey = setDefaultReg2Value[2];
}
else if (setDefaultReg3Value) {
staticValueKey = setDefaultReg3Value[1];
defaultValueKey = setDefaultReg3Value[2];
}
var isValueXor = /^\s*\!/.test(staticValueKey);
staticValueKey = staticValueKey.replace(/^(\s*\!)/, "").replace(/^(\s*this\.)/, "");
var staticValue = this.getValue(this.renderComponent, staticValueKey);
staticValue = staticValue !== undefined ? staticValue : (optionData ? this.getValue(optionData, staticValueKey) : undefined);
if (staticValue === undefined || staticValue === null) {
if (defaultValueIsText) {
staticValue = defaultValueKey;
}
else {
var isXorValue = /^\s*\!/.test(defaultValueKey);
var defaultValue = null;
defaultValueKey = defaultValueKey.replace(/^\s*\!/, "").replace(/^(\s*this\.)/, "");
defaultValue = this.getValue(this.renderComponent, defaultValueKey);
if (defaultValue === undefined) {
defaultValue = this.getValue(optionData, defaultValueKey);
}
if (isXorValue) {
defaultValue = !defaultValue;
}
staticValue = defaultValue;
isXorValue = null;
}
}
if (isValueXor) {
staticValue = !staticValue;
}
var singleStr = resultText.replace(sigleReg, "");
if (!this.isEmpty(singleStr)) {
if (this.isString(resultText)) {
while (resultText.indexOf(staticMatch) >= 0) {
var replaceMatch = staticMatch.match(/(\{\{.*\}\})/);
var replaceValue = replaceMatch ? replaceMatch[0] : staticMatch;
resultText = resultText.replace(replaceValue, staticValue);
replaceMatch = null;
replaceValue = null;
}
}
}
else {
resultText = staticValue;
}
singleStr = null;
isValueXor = null;
staticMatch = null;
staticMatchValue = null;
setDefaultReg1Value = null;
setDefaultReg2Value = null;
setDefaultReg3Value = null;
}
setDefaultReg1 = null;
setDefaultReg2 = null;
setDefaultReg3 = null;
}
if (this.isEmpty(resultText) && numReg.test(text)) {
var numMatch = text.match(numReg);
var num = numMatch[1];
resultText = /\./.test(num) ? parseFloat(num) : parseInt(num, 10);
}
sigleReg = null;
staticRegEx = null;
staticMatchs = null;
}
else {
if (trueReg.test(text)) {
resultText = true;
}
else if (falseReg.test(text)) {
resultText = false;
}
}
staticReg = null;
trueReg = null;
falseReg = null;
numReg = null;
return this.isObject(resultText) ? JSON.parse(JSON.stringify(resultText)) : resultText;
}
else {
staticReg = null;
trueReg = null;
falseReg = null;
return "";
}
};
ElmerVirtualRender.prototype.getBindAttrAndEvents = function (nodeData) {
var _this = this;
var attr = nodeData.props || {}, attrKeys = Object.keys(attr);
var bindReg = /\s*\{\{.*\}\}\s*/, eventReg = /^(evt|et):([a-zA-Z\-_]*)/i, logicReg = /^(act|em):([a-z0-9\-_]*)$/i, attrLogicReg = /^[a-z]+\.[a-z0-9\-_]+$/i;
var result = {};
var events = [];
var optionData = nodeData.data || {};
var dataSet = {};
try {
attrKeys.map(function (attrKey) {
if (eventReg.test(attrKey)) {
var eventArgs = attrKey.match(eventReg) || {};
var eventName = eventArgs[2];
var eventActionData = _this.getBindAction(attr[attrKey], nodeData.data || {});
events.push({
callBack: eventActionData.callBack,
eventName: eventName,
handler: eventActionData.handler
});
}
else if (bindReg.test(attr[attrKey]) || attrKey === "...") {
var bindAttrValue = _this.getBindText(attr[attrKey], nodeData.data || {});
if (attrKey === "...") {
if (_this.isObject(bindAttrValue)) {
result = __assign(__assign({}, result), bindAttrValue);
}
else {
result[bindAttrValue] = bindAttrValue;
}
}
else {
result[attrKey] = bindAttrValue;
if (/^data\-/i.test(attrKey)) {
dataSet[attrKey.replace(/^data\-/i, "")] = bindAttrValue;
}
}
}
else if ((logicReg.test(attrKey) || attrLogicReg.test(attrKey)) && !/^em\:for/i.test(attrKey)) {
var checkCode = attr[attrKey];
if (!_this.isEmpty(checkCode) && _this.isString(checkCode)) {
if (!_this.renderMiddelware.virtualRenderLogic(_this.renderComponent, {
attrKey: attrKey,
attrValue: checkCode,
optionData: nodeData.data || {}
}, result)) {
var nThisReg = /^\s*(\!this.[a-z0-9\-_.]*)\s*$/img;
var thisReg = /^\s*(this.[a-z0-9\-_.]*)\s*$/img;
var thisMatch = checkCode.match(nThisReg) ||
checkCode.match(/^[!a-z\-_]*\.(([a-z\-_.]*)|([a-z\-_]*\.bind\([a-z\-_]*\)))\s*$/ig) ||
checkCode.match(thisReg);
var checkResult = void 0;
if (thisMatch) {
for (var j = 0; j < thisMatch.length; j++) {
var bindKeyValue = thisMatch[j];
var isXorValue = /^\s*\!/.test(bindKeyValue);
var checkBindKeyValue = bindKeyValue.replace(/^\s*\!/, "");
var isBindThis = /^\s*this\./i.test(checkBindKeyValue);
var bindValue = void 0;
if (isBindThis) {
checkBindKeyValue = checkBindKeyValue.replace(/^\s*this\./, "");
bindValue = _this.getValue(_this.renderComponent, checkBindKeyValue);
}
else {
bindValue = _this.getValue(_this.renderComponent, checkBindKeyValue);
if (bindValue === undefined) {
bindValue = _this.getValue(optionData, checkBindKeyValue);
}
}
if (_this.isString(bindValue)) {
checkCode = checkCode.replace(bindKeyValue, bindValue);
checkResult = checkCode;
}
else {
if (_this.isFunction(bindValue)) {
checkResult = bindValue.call(_this.renderComponent, optionData);
}
else {
checkResult = bindValue;
}
}
if (isXorValue) {
checkResult = !checkResult;
}
isBindThis = null;
bindValue = null;
bindKeyValue = null;
isXorValue = null;
}
}
else {
if (/^\s*this\s*$/.test(checkCode)) {
checkResult = _this.renderComponent;
}
else {
checkResult = optionData[checkCode] ? optionData[checkCode] : "";
}
}
var resultAttrKey = attrKey.replace(/^[a-z]*:/i, "");
result[resultAttrKey] = checkResult;
if (/^data\-/i.test(resultAttrKey)) {
dataSet[resultAttrKey.replace(/^data\-/i, "")] = checkResult;
}
}
}
else {
result[attrKey] = checkCode;
}
}
else if (/^ex\:/i.test(attrKey) || /^\.\.\./i.test(attrKey)) {
var attrValueKey = attr[attrKey];
var attrValue = _this.getValue(_this.renderComponent, attrValueKey);
if (attrValue === undefined) {
attrValue = _this.getValue(optionData, attrValueKey);
}
if (_this.isObject(attrValue)) {
_this.extend(result, attrValue);
}
else {
result[attrKey] = attrValue;
}
}
else if (/^bind$/.test(attrKey)) {
events.push({
callBack: _this.renderBindAttribute(attr[attrKey], _this.renderComponent),
eventName: "change",
handler: { bindKey: attr[attrKey], target: _this.renderComponent }
});
events.push({
callBack: _this.renderBindAttribute(attr[attrKey], _this.renderComponent),
eventName: "keyup",
handler: { bindKey: attr[attrKey], target: _this.renderComponent }
});
}
else {
result[attrKey] = attr[attrKey];
if (/^data\-/i.test(attrKey)) {
dataSet[attrKey.replace(/^data\-/i, "")] = attr[attrKey];
}
}
});
if (result["ex:props"]) {
var exProps = result["ex:props"];
this.merge(result, exProps);
delete result["ex:props"];
}
}
catch (e) {
console.error(e, nodeData, this.renderComponent);
}
return {
attrs: result,
dataSet: dataSet,
events: events
};
};
ElmerVirtualRender.prototype.renderBindAttribute = function (attrValue, targetComponent) {
return (function (evt) {
var bindAttrValue = this.bindKey;
var bindArr = bindAttrValue.split("|");
var callBackKey = bindArr.length > 1 ? bindArr[1] : null;
var bindKey = bindArr[0] || "";
var callBack = this.target.getValue(this.target, callBackKey) || this.target.getValue(evt.data, callBackKey);
var value = evt.target.value;
var onChangeKey = bindArr.length > 2 ? bindArr[2] : null;
var onChange = this.target.getValue(this.target, onChangeKey);
if (typeof callBack === "function") {
var newValue = callBack.call(this.target, __assign(__assign({}, evt), { value: value }));
if (newValue !== undefined) {
this.target.setValue(this.target, bindKey, newValue);
}
}
else {
this.target.setValue(this.target, bindKey, value);
}
typeof onChange === "function" && onChange.call(this.target, evt);
}).bind({ bindKey: attrValue, target: targetComponent });
};
ElmerVirtualRender.prototype.renderAttribute = function (nodeItem) {
var _this = this;
var bindData = this.getBindAttrAndEvents(nodeItem);
nodeItem.props = bindData.attrs;
nodeItem.events = bindData.events;
nodeItem.dataSet = bindData.dataSet;
if (nodeItem.tagName === "text") {
nodeItem.innerHTML = this.getBindText(nodeItem.innerHTML, nodeItem.data || {});
}
else {
var childrenChanged_1 = false;
var newChildren_1 = [];
var saveKeyAttrValue_1 = [];
nodeItem.children.map(function (checkItem, index) {
var isRender = _this.renderAttribute(checkItem);
if (!isRender) {
childrenChanged_1 = true;
}
else {
if (checkItem.props && !_this.isEmpty(checkItem.props.key)) {
if (saveKeyAttrValue_1.indexOf(checkItem.props.key + "") < 0) {
saveKeyAttrValue_1.push(checkItem.props.key + "");
}
else {
console.error("Child elements under the same parent element cannot have the same key set. [" + checkItem.props.key + "]");
}
}
}
delete checkItem.props["if"];
newChildren_1.push(checkItem);
});
saveKeyAttrValue_1 = null;
if (childrenChanged_1) {
nodeItem.children = newChildren_1;
}
newChildren_1 = null;
}
var isRender = true;
if (Object.keys(bindData.attrs).indexOf("if") >= 0) {
isRender = bindData.attrs.if;
if (!isRender || isRender === undefined) {
isRender = false;
nodeItem.status = "DELETE";
}
else {
isRender = true;
}
}
return isRender;
};
var _a;
__decorate([
inject_1.autowired(elmer_virtual_dom_1.VirtualElement),
__metadata("design:type", typeof (_a = typeof elmer_virtual_dom_1.VirtualElement !== "undefined" && elmer_virtual_dom_1.VirtualElement) === "function" ? _a : Object)
], ElmerVirtualRender.prototype, "virtualDom", void 0);
__decorate([
inject_1.autowired(RenderMiddleware_1.RenderMiddleware),
__metadata("design:type", RenderMiddleware_1.RenderMiddleware)
], ElmerVirtualRender.prototype, "renderMiddelware", void 0);
ElmerVirtualRender = __decorate([
inject_1.Injectable("ElmerVirtualRender"),
__metadata("design:paramtypes", [])
], ElmerVirtualRender);
return ElmerVirtualRender;
}(elmer_common_1.Common));
exports.ElmerVirtualRender = ElmerVirtualRender;