@dooboostore/dom-render
Version:
html view template engine
128 lines (115 loc) • 8.85 kB
JavaScript
import { OperatorExecuterAttrRequire } from "./OperatorExecuterAttrRequire.js";
import { RawSet } from "../rawsets/RawSet.js";
import { ExecuteState } from "./OperatorExecuter.js";
import { ObjectUtils } from "@dooboostore/core";
class DrAppender extends OperatorExecuterAttrRequire {
constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
source.operatorAround = void 0;
super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
}
async executeAttrRequire(attr) {
const itRandom = RawSet.drItOtherEncoding(this.elementSource.element, "DrAppender");
const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? "");
const newTemp = this.source.config.window.document.createElement("temp");
const variableName = this.elementSource.attrs.drVariableNameOption;
const itemVariableName = this.elementSource.attrs.drItemVariableNameOption;
const itemIndexVariableName = this.elementSource.attrs.drItemIndexVariableNameOption;
const itemOffsetIndexVariableName = this.elementSource.attrs.drItemOffsetIndexVariableNameOption;
const hasVariableName = !!variableName;
const hasItemVariableName = !!itemVariableName;
const hasItemIndexVariableName = !!itemIndexVariableName;
const hasItemOffsetIndexVariableName = !!itemOffsetIndexVariableName;
const indexOffsetOption = this.elementSource.attrs.drItemIndexOffsetOption;
const hasIndexOffsetOption = !!indexOffsetOption;
ObjectUtils.Script.evaluate(
`
try{
${this.render.bindScript}
${this.elementSource.attrs.drBeforeOption ?? ""}
const offset = ${hasIndexOffsetOption ? Number(indexOffsetOption) : 0};
const data = ${ObjectUtils.Path.toOptionalChainPath(attr)};
const attrStr = \`${attr}\`.trim();
const isChunkPath = /\\[\\d+\\]$/.test(attrStr);
if (data !== undefined && data !== null) {
// SSR \uD638\uD658\uC131\uC744 \uC704\uD574 Array.from \uC0AC\uC6A9
const items = isChunkPath ? (Array.isArray(data) ? data : [data]) : (typeof data.getAll === 'function' ? data.getAll().slice(offset) : Array.from(data).slice(offset));
var i = -1;
for(const it of items) {
i++;
const userIdx = i + offset;
// \uC544\uC774\uD15C \uC811\uADFC \uACBD\uB85C \uC0DD\uC131
let destItStr = attrStr + '[' + (isChunkPath ? i : userIdx) + ']';
if (!isChunkPath && typeof data.getAll === 'function') {
destItStr = '(' + attrStr + '.getAll()[' + userIdx + '])';
} else {
destItStr = '(' + destItStr + ')';
}
const n = this.__render.element.cloneNode(true);
// \uC635\uC158 \uBCF5\uC6D0 \uBC0F \uC815\uC81C
Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drAppender' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));
// \uC815\uAD50\uD55C \uCE58\uD658 \uB85C\uC9C1 (\uC18D\uC131)
n.getAttributeNames().forEach(itName => {
let attrVal = n.getAttribute(itName);
attrVal = attrVal.replace(/\\#it\\#/g, destItStr)
.replace(/\\#nearForOfIt\\#/g, destItStr)
.replace(/\\#index\\#/g, String(i))
.replace(/\\#offsetIndex\\#/g, String(userIdx))
.replace(/\\#nearForOfIndex\\#/g, String(i));
if (${hasVariableName} && '${variableName}') attrVal = attrVal.replaceAll('#${variableName}#', attrStr);
if (${hasItemVariableName} && '${itemVariableName}') attrVal = attrVal.replaceAll('#${itemVariableName}#', destItStr);
if (${hasItemIndexVariableName} && '${itemIndexVariableName}') attrVal = attrVal.replaceAll('#${itemIndexVariableName}#', String(i));
if (${hasItemOffsetIndexVariableName} && '${itemOffsetIndexVariableName}') attrVal = attrVal.replaceAll('#${itemOffsetIndexVariableName}#', String(userIdx));
n.setAttribute(itName, attrVal);
});
// \uC815\uAD50\uD55C \uCE58\uD658 \uB85C\uC9C1 (InnerHTML)
n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destItStr)
.replace(/\\#index\\#/g, String(i))
.replace(/\\#offsetIndex\\#/g, String(userIdx));
if (${hasVariableName} && '${variableName}') n.innerHTML = n.innerHTML.replaceAll('#${variableName}#', attrStr);
if (${hasItemVariableName} && '${itemVariableName}') n.innerHTML = n.innerHTML.replaceAll('#${itemVariableName}#', destItStr);
if (${hasItemIndexVariableName} && '${itemIndexVariableName}') n.innerHTML = n.innerHTML.replaceAll('#${itemIndexVariableName}#', String(i));
if (${hasItemOffsetIndexVariableName} && '${itemOffsetIndexVariableName}') n.innerHTML = n.innerHTML.replaceAll('#${itemOffsetIndexVariableName}#', String(userIdx));
if (this.__render.drStripOption === 'true') {
Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));
} else {
this.__render.fag.append(n);
}
}
// \uB2E4\uC74C \uC138\uB300 \uC13C\uD2F0\uB12C \uC0DD\uC131 (\uC815\uC11D \uCCB4\uC774\uB2DD)
const nextN = this.__render.element.cloneNode(true);
Object.entries(this.__render.drAttr).filter(([k,v]) => v).forEach(([k, v]) => nextN.setAttribute(this.__render.drAttrsOriginName[k], v));
const basePath = attrStr.replace(/\\[\\d+\\]$/, '');
const appenderObj = ${ObjectUtils.Path.toOptionalChainPath(attr.replace(/\\[\\d+\\]$/, ""))};
const nextChunkIdx = isChunkPath ? Number(attrStr.match(/\\[(\\d+)\\]$/)[1]) + 1 : (appenderObj?.length ?? 0);
nextN.setAttribute('${RawSet.DR_APPENDER_NAME}', basePath + '[' + nextChunkIdx + ']');
nextN.setAttribute('${RawSet.DR_ITEM_INDEX_OFFSET_OPTIONNAME}', (offset + items.length));
this.__render.fag.append(nextN);
}
${this.elementSource.attrs.drAfterOption ?? ""}
}catch(e){console.error('DrAppender Error:', e);}
`,
Object.assign(this.source.obj, {
__render: Object.freeze({
drStripOption: this.elementSource.attrs.drStripOption,
drAttr: this.elementSource.attrs,
drAttrsOriginName: RawSet.drAttrsOriginName,
fag: newTemp,
...this.render
})
})
);
RawSet.drVarDecoding(newTemp, vars);
RawSet.drItOtherDecoding(newTemp, itRandom);
const template = this.source.config.window.document.createElement("template");
template.innerHTML = newTemp.innerHTML;
this.returnContainer.fag.append(template.content);
const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);
this.returnContainer.raws.push(...rr);
return ExecuteState.EXECUTE;
}
}
export {
DrAppender
};
//# sourceMappingURL=DrAppender.js.map