@dooboostore/dom-render 1.0.111 → 1.0.113

package/dist/esm/operators/DrAppender.js

@@ -1,57 +1,120 @@
 import { OperatorExecuterAttrRequire } from "./OperatorExecuterAttrRequire.js";
-import { ScriptUtils } from "@dooboostore/core-web/script/ScriptUtils";
 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);
+    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");
-    ScriptUtils.evaluate(`
+    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 ifWrap = document.createElement('div');
-                        // ifWrap.setAttribute('${RawSet.DR_STRIP_OPTIONNAME}', 'true');
-                        // ifWrap.setAttribute('${RawSet.DR_IF_NAME}', '${this.elementSource.attrs.drAppender} && ${this.elementSource.attrs.drAppender}.length > 0');
-                        const n = this.__render.element.cloneNode(true);
-                        Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drAppender' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));
-                        const length = ${this.elementSource.attrs.drAppender}.length;
-                        if (length > 0) {
-                            n.setAttribute('${RawSet.DR_FOR_OF_NAME}', '${this.elementSource.attrs.drAppender}[' + (length-1) + ']');
-                            n.setAttribute('${RawSet.DR_NEXT_OPTIONNAME}', '${this.elementSource.attrs.drAppender},' + length);
-                        } else {
-                            n.setAttribute('${RawSet.DR_FOR_OF_NAME}', '${this.elementSource.attrs.drAppender}[0]');
-                            n.setAttribute('${RawSet.DR_NEXT_OPTIONNAME}', '${this.elementSource.attrs.drAppender},' + 1);
+                        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);
                         }
-                        // console.log('appender--->', Array.from(n.getAttributeNames()).map(it=>({name:it,attr: n.getAttribute(it)})));
-                        // const drOptionThis = n.getAttribute('${RawSet.DR_THIS_OPTIONNAME}');
-                        // if (drOptionThis) {
-                        // }
-                        // ifWrap.append(n);
-                        // this.__render.fag.append(ifWrap);
-                        this.__render.fag.append(n);
                     ${this.elementSource.attrs.drAfterOption ?? ""}
-                    }catch(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
-        // eslint-disable-next-line no-use-before-define
+                    }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 tempalte = this.source.config.window.document.createElement("template");
-    tempalte.innerHTML = newTemp.innerHTML;
-    this.returnContainer.fag.append(tempalte.content);
+    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);

package/dist/esm/operators/DrAppender.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/operators/DrAppender.ts"],
-  "sourcesContent": ["import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';\nimport {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';\nimport {RawSet} from '../rawsets/RawSet';\nimport {Render} from '../rawsets/Render';\nimport {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';\n\nexport class DrAppender extends OperatorExecuterAttrRequire<string> {\n    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {\n        source.operatorAround = undefined;\n        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);\n    }\n\n    async executeAttrRequire(attr: string): Promise<ExecuteState> {\n        const itRandom = RawSet.drItOtherEncoding(this.elementSource.element);\n        const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');\n        const newTemp = this.source.config.window.document.createElement('temp');\n        ScriptUtils.evaluate(`\n                    try{\n                    ${this.render.bindScript}\n                    ${this.elementSource.attrs.drBeforeOption ?? ''}\n                        const ifWrap = document.createElement('div');\n                        // ifWrap.setAttribute('${RawSet.DR_STRIP_OPTIONNAME}', 'true');\n                        // ifWrap.setAttribute('${RawSet.DR_IF_NAME}', '${this.elementSource.attrs.drAppender} && ${this.elementSource.attrs.drAppender}.length > 0');\n                        const n = this.__render.element.cloneNode(true);\n                        Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drAppender' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                        const length = ${this.elementSource.attrs.drAppender}.length;\n                        if (length > 0) {\n                            n.setAttribute('${RawSet.DR_FOR_OF_NAME}', '${this.elementSource.attrs.drAppender}[' + (length-1) + ']');\n                            n.setAttribute('${RawSet.DR_NEXT_OPTIONNAME}', '${this.elementSource.attrs.drAppender},' + length);\n                        } else {\n                            n.setAttribute('${RawSet.DR_FOR_OF_NAME}', '${this.elementSource.attrs.drAppender}[0]');\n                            n.setAttribute('${RawSet.DR_NEXT_OPTIONNAME}', '${this.elementSource.attrs.drAppender},' + 1);\n                        }\n                        // console.log('appender--->', Array.from(n.getAttributeNames()).map(it=>({name:it,attr: n.getAttribute(it)})));\n                        // const drOptionThis = n.getAttribute('${RawSet.DR_THIS_OPTIONNAME}');\n                        // if (drOptionThis) {\n                        // }\n                        // ifWrap.append(n);\n                        // this.__render.fag.append(ifWrap);\n                        this.__render.fag.append(n);\n                    ${this.elementSource.attrs.drAfterOption ?? ''}\n                    }catch(e){}\n                    `, Object.assign(this.source.obj, {\n            __render: Object.freeze({\n                drStripOption: this.elementSource.attrs.drStripOption,\n                drAttr: this.elementSource.attrs,\n                drAttrsOriginName: RawSet.drAttrsOriginName,\n                fag: newTemp,\n                ...this.render\n                // eslint-disable-next-line no-use-before-define\n            } as Render)\n        }));\n        RawSet.drVarDecoding(newTemp, vars);\n        RawSet.drItOtherDecoding(newTemp, itRandom);\n        const tempalte = this.source.config.window.document.createElement('template');\n        tempalte.innerHTML = newTemp.innerHTML;\n        this.returnContainer.fag.append(tempalte.content)\n        const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);\n        this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);\n        // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();\n        this.returnContainer.raws.push(...rr)\n        return ExecuteState.EXECUTE;\n    }\n}\n"],
-  "mappings": "AAAA,SAAQ,mCAAkC;AAC1C,SAAQ,mBAAkB;AAC1B,SAAQ,cAAa;AAErB,SAAsC,oBAA4C;AAE3E,MAAM,mBAAmB,4BAAoC;AAAA,EAChE,YAAY,QAAgB,QAAgB,iBAAkC,eAA8B,QAAgB,eAA8B;AACtJ,WAAO,iBAAiB;AACxB,UAAM,QAAQ,QAAQ,iBAAiB,eAAe,QAAQ,eAAe,KAAK;AAAA,EACtF;AAAA,EAEA,MAAM,mBAAmB,MAAqC;AAC1D,UAAM,WAAW,OAAO,kBAAkB,KAAK,cAAc,OAAO;AACpE,UAAM,OAAO,OAAO,cAAc,KAAK,cAAc,SAAS,KAAK,cAAc,MAAM,eAAe,EAAE;AACxG,UAAM,UAAU,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,MAAM;AACvE,gBAAY,SAAS;AAAA;AAAA,sBAEP,KAAK,OAAO,UAAU;AAAA,sBACtB,KAAK,cAAc,MAAM,kBAAkB,EAAE;AAAA;AAAA,kDAEjB,OAAO,mBAAmB;AAAA,kDAC1B,OAAO,UAAU,OAAO,KAAK,cAAc,MAAM,UAAU,OAAO,KAAK,cAAc,MAAM,UAAU;AAAA;AAAA;AAAA,yCAG9G,KAAK,cAAc,MAAM,UAAU;AAAA;AAAA,8CAE9B,OAAO,cAAc,OAAO,KAAK,cAAc,MAAM,UAAU;AAAA,8CAC/D,OAAO,kBAAkB,OAAO,KAAK,cAAc,MAAM,UAAU;AAAA;AAAA,8CAEnE,OAAO,cAAc,OAAO,KAAK,cAAc,MAAM,UAAU;AAAA,8CAC/D,OAAO,kBAAkB,OAAO,KAAK,cAAc,MAAM,UAAU;AAAA;AAAA;AAAA,kEAG/C,OAAO,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMrE,KAAK,cAAc,MAAM,iBAAiB,EAAE;AAAA;AAAA,uBAE3C,OAAO,OAAO,KAAK,OAAO,KAAK;AAAA,MAC1C,UAAU,OAAO,OAAO;AAAA,QACpB,eAAe,KAAK,cAAc,MAAM;AAAA,QACxC,QAAQ,KAAK,cAAc;AAAA,QAC3B,mBAAmB,OAAO;AAAA,QAC1B,KAAK;AAAA,QACL,GAAG,KAAK;AAAA;AAAA,MAEZ,CAAW;AAAA,IACf,CAAC,CAAC;AACF,WAAO,cAAc,SAAS,IAAI;AAClC,WAAO,kBAAkB,SAAS,QAAQ;AAC1C,UAAM,WAAW,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,UAAU;AAC5E,aAAS,YAAY,QAAQ;AAC7B,SAAK,gBAAgB,IAAI,OAAO,SAAS,OAAO;AAChD,UAAM,KAAK,OAAO,kBAAkB,KAAK,gBAAgB,KAAK,KAAK,OAAO,KAAK,KAAK,OAAO,MAAM;AACjG,SAAK,cAAc,QAAQ,YAAY,aAAa,KAAK,gBAAgB,KAAK,KAAK,cAAc,OAAO;AAExG,SAAK,gBAAgB,KAAK,KAAK,GAAG,EAAE;AACpC,WAAO,aAAa;AAAA,EACxB;AACJ;",
+  "sourcesContent": ["import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';\nimport { RawSet } from '../rawsets/RawSet';\nimport { Render } from '../rawsets/Render';\nimport { AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source } from './OperatorExecuter';\nimport { ObjectUtils } from '@dooboostore/core';\n\nexport class DrAppender extends OperatorExecuterAttrRequire<string> {\n  constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {\n    source.operatorAround = undefined;\n    super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);\n  }\n\n  async executeAttrRequire(attr: string): Promise<ExecuteState> {\n    const itRandom = RawSet.drItOtherEncoding(this.elementSource.element, 'DrAppender');\n    const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');\n    const newTemp = this.source.config.window.document.createElement('temp');\n\n    const variableName = this.elementSource.attrs.drVariableNameOption;\n    const itemVariableName = this.elementSource.attrs.drItemVariableNameOption;\n    const itemIndexVariableName = this.elementSource.attrs.drItemIndexVariableNameOption;\n    const itemOffsetIndexVariableName = this.elementSource.attrs.drItemOffsetIndexVariableNameOption;\n\n    const hasVariableName = !!variableName;\n    const hasItemVariableName = !!itemVariableName;\n    const hasItemIndexVariableName = !!itemIndexVariableName;\n    const hasItemOffsetIndexVariableName = !!itemOffsetIndexVariableName;\n\n    const indexOffsetOption = this.elementSource.attrs.drItemIndexOffsetOption;\n    const hasIndexOffsetOption = !!indexOffsetOption;\n\n    ObjectUtils.Script.evaluate(\n      `\n                    try{\n                    ${this.render.bindScript}\n                    ${this.elementSource.attrs.drBeforeOption ?? ''}\n                        const offset = ${hasIndexOffsetOption ? Number(indexOffsetOption) : 0};\n                        const data = ${ObjectUtils.Path.toOptionalChainPath(attr)};\n                        const attrStr = \\`${attr}\\`.trim();\n                        const isChunkPath = /\\\\[\\\\d+\\\\]$/.test(attrStr);\n                        \n                        if (data !== undefined && data !== null) {\n                            // SSR \uD638\uD658\uC131\uC744 \uC704\uD574 Array.from \uC0AC\uC6A9\n                            const items = isChunkPath ? (Array.isArray(data) ? data : [data]) : (typeof data.getAll === 'function' ? data.getAll().slice(offset) : Array.from(data).slice(offset));\n                            var i = -1;\n                            \n                            for(const it of items) {\n                                i++;\n                                const userIdx = i + offset;\n                                \n                                // \uC544\uC774\uD15C \uC811\uADFC \uACBD\uB85C \uC0DD\uC131\n                                let destItStr = attrStr + '[' + (isChunkPath ? i : userIdx) + ']';\n                                if (!isChunkPath && typeof data.getAll === 'function') {\n                                   destItStr = '(' + attrStr + '.getAll()[' + userIdx + '])';\n                                } else {\n                                   destItStr = '(' + destItStr + ')';\n                                }\n                                \n                                const n = this.__render.element.cloneNode(true);\n                                // \uC635\uC158 \uBCF5\uC6D0 \uBC0F \uC815\uC81C\n                                Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drAppender' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                                \n                                // \uC815\uAD50\uD55C \uCE58\uD658 \uB85C\uC9C1 (\uC18D\uC131)\n                                n.getAttributeNames().forEach(itName => {\n                                    let attrVal = n.getAttribute(itName);\n                                    attrVal = attrVal.replace(/\\\\#it\\\\#/g, destItStr)\n                                                     .replace(/\\\\#nearForOfIt\\\\#/g, destItStr)\n                                                     .replace(/\\\\#index\\\\#/g, String(i))\n                                                     .replace(/\\\\#offsetIndex\\\\#/g, String(userIdx))\n                                                     .replace(/\\\\#nearForOfIndex\\\\#/g, String(i));\n                                    \n                                    if (${hasVariableName} && '${variableName}') attrVal = attrVal.replaceAll('#${variableName}#', attrStr);\n                                    if (${hasItemVariableName} && '${itemVariableName}') attrVal = attrVal.replaceAll('#${itemVariableName}#', destItStr);\n                                    if (${hasItemIndexVariableName} && '${itemIndexVariableName}') attrVal = attrVal.replaceAll('#${itemIndexVariableName}#', String(i));\n                                    if (${hasItemOffsetIndexVariableName} && '${itemOffsetIndexVariableName}') attrVal = attrVal.replaceAll('#${itemOffsetIndexVariableName}#', String(userIdx));\n                                    n.setAttribute(itName, attrVal);\n                                });\n\n                                // \uC815\uAD50\uD55C \uCE58\uD658 \uB85C\uC9C1 (InnerHTML)\n                                n.innerHTML = n.innerHTML.replace(/\\\\#it\\\\#/g, destItStr)\n                                                         .replace(/\\\\#index\\\\#/g, String(i))\n                                                         .replace(/\\\\#offsetIndex\\\\#/g, String(userIdx));\n                                                         \n                                if (${hasVariableName} && '${variableName}') n.innerHTML = n.innerHTML.replaceAll('#${variableName}#', attrStr);\n                                if (${hasItemVariableName} && '${itemVariableName}') n.innerHTML = n.innerHTML.replaceAll('#${itemVariableName}#', destItStr);\n                                if (${hasItemIndexVariableName} && '${itemIndexVariableName}') n.innerHTML = n.innerHTML.replaceAll('#${itemIndexVariableName}#', String(i));\n                                if (${hasItemOffsetIndexVariableName} && '${itemOffsetIndexVariableName}') n.innerHTML = n.innerHTML.replaceAll('#${itemOffsetIndexVariableName}#', String(userIdx));\n                       \n                                if (this.__render.drStripOption === 'true') {\n                                    Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                                } else {\n                                    this.__render.fag.append(n);\n                                }\n                            }\n                            \n                            // \uB2E4\uC74C \uC138\uB300 \uC13C\uD2F0\uB12C \uC0DD\uC131 (\uC815\uC11D \uCCB4\uC774\uB2DD)\n                            const nextN = this.__render.element.cloneNode(true);\n                            Object.entries(this.__render.drAttr).filter(([k,v]) => v).forEach(([k, v]) => nextN.setAttribute(this.__render.drAttrsOriginName[k], v));\n                            \n                            const basePath = attrStr.replace(/\\\\[\\\\d+\\\\]$/, '');\n                            const appenderObj = ${ObjectUtils.Path.toOptionalChainPath(attr.replace(/\\\\[\\\\d+\\\\]$/, ''))};\n                            const nextChunkIdx = isChunkPath ? Number(attrStr.match(/\\\\[(\\\\d+)\\\\]$/)[1]) + 1 : (appenderObj?.length ?? 0);\n                            \n                            nextN.setAttribute('${RawSet.DR_APPENDER_NAME}', basePath + '[' + nextChunkIdx + ']');\n                            nextN.setAttribute('${RawSet.DR_ITEM_INDEX_OFFSET_OPTIONNAME}', (offset + items.length));\n                            this.__render.fag.append(nextN);\n                        }\n                    ${this.elementSource.attrs.drAfterOption ?? ''}\n                    }catch(e){console.error('DrAppender Error:', e);}\n                    `,\n      Object.assign(this.source.obj, {\n        __render: Object.freeze({\n          drStripOption: this.elementSource.attrs.drStripOption,\n          drAttr: this.elementSource.attrs,\n          drAttrsOriginName: RawSet.drAttrsOriginName,\n          fag: newTemp,\n          ...this.render\n        } as Render)\n      })\n    );\n    RawSet.drVarDecoding(newTemp, vars);\n    RawSet.drItOtherDecoding(newTemp, itRandom);\n    const template = this.source.config.window.document.createElement('template');\n    template.innerHTML = newTemp.innerHTML;\n    this.returnContainer.fag.append(template.content);\n    const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);\n    this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);\n    this.returnContainer.raws.push(...rr);\n    return ExecuteState.EXECUTE;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,mCAAmC;AAC5C,SAAS,cAAc;AAEvB,SAAuC,oBAA6C;AACpF,SAAS,mBAAmB;AAErB,MAAM,mBAAmB,4BAAoC;AAAA,EAClE,YAAY,QAAgB,QAAgB,iBAAkC,eAA8B,QAAgB,eAA8B;AACxJ,WAAO,iBAAiB;AACxB,UAAM,QAAQ,QAAQ,iBAAiB,eAAe,QAAQ,eAAe,KAAK;AAAA,EACpF;AAAA,EAEA,MAAM,mBAAmB,MAAqC;AAC5D,UAAM,WAAW,OAAO,kBAAkB,KAAK,cAAc,SAAS,YAAY;AAClF,UAAM,OAAO,OAAO,cAAc,KAAK,cAAc,SAAS,KAAK,cAAc,MAAM,eAAe,EAAE;AACxG,UAAM,UAAU,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,MAAM;AAEvE,UAAM,eAAe,KAAK,cAAc,MAAM;AAC9C,UAAM,mBAAmB,KAAK,cAAc,MAAM;AAClD,UAAM,wBAAwB,KAAK,cAAc,MAAM;AACvD,UAAM,8BAA8B,KAAK,cAAc,MAAM;AAE7D,UAAM,kBAAkB,CAAC,CAAC;AAC1B,UAAM,sBAAsB,CAAC,CAAC;AAC9B,UAAM,2BAA2B,CAAC,CAAC;AACnC,UAAM,iCAAiC,CAAC,CAAC;AAEzC,UAAM,oBAAoB,KAAK,cAAc,MAAM;AACnD,UAAM,uBAAuB,CAAC,CAAC;AAE/B,gBAAY,OAAO;AAAA,MACjB;AAAA;AAAA,sBAEgB,KAAK,OAAO,UAAU;AAAA,sBACtB,KAAK,cAAc,MAAM,kBAAkB,EAAE;AAAA,yCAC1B,uBAAuB,OAAO,iBAAiB,IAAI,CAAC;AAAA,uCACtD,YAAY,KAAK,oBAAoB,IAAI,CAAC;AAAA,4CACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAiCN,eAAe,QAAQ,YAAY,qCAAqC,YAAY;AAAA,0CACpF,mBAAmB,QAAQ,gBAAgB,qCAAqC,gBAAgB;AAAA,0CAChG,wBAAwB,QAAQ,qBAAqB,qCAAqC,qBAAqB;AAAA,0CAC/G,8BAA8B,QAAQ,2BAA2B,qCAAqC,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCASrI,eAAe,QAAQ,YAAY,6CAA6C,YAAY;AAAA,sCAC5F,mBAAmB,QAAQ,gBAAgB,6CAA6C,gBAAgB;AAAA,sCACxG,wBAAwB,QAAQ,qBAAqB,6CAA6C,qBAAqB;AAAA,sCACvH,8BAA8B,QAAQ,2BAA2B,6CAA6C,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kDAc7H,YAAY,KAAK,oBAAoB,KAAK,QAAQ,eAAe,EAAE,CAAC,CAAC;AAAA;AAAA;AAAA,kDAGrE,OAAO,gBAAgB;AAAA,kDACvB,OAAO,+BAA+B;AAAA;AAAA;AAAA,sBAGlE,KAAK,cAAc,MAAM,iBAAiB,EAAE;AAAA;AAAA;AAAA,MAG5D,OAAO,OAAO,KAAK,OAAO,KAAK;AAAA,QAC7B,UAAU,OAAO,OAAO;AAAA,UACtB,eAAe,KAAK,cAAc,MAAM;AAAA,UACxC,QAAQ,KAAK,cAAc;AAAA,UAC3B,mBAAmB,OAAO;AAAA,UAC1B,KAAK;AAAA,UACL,GAAG,KAAK;AAAA,QACV,CAAW;AAAA,MACb,CAAC;AAAA,IACH;AACA,WAAO,cAAc,SAAS,IAAI;AAClC,WAAO,kBAAkB,SAAS,QAAQ;AAC1C,UAAM,WAAW,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,UAAU;AAC5E,aAAS,YAAY,QAAQ;AAC7B,SAAK,gBAAgB,IAAI,OAAO,SAAS,OAAO;AAChD,UAAM,KAAK,OAAO,kBAAkB,KAAK,gBAAgB,KAAK,KAAK,OAAO,KAAK,KAAK,OAAO,MAAM;AACjG,SAAK,cAAc,QAAQ,YAAY,aAAa,KAAK,gBAAgB,KAAK,KAAK,cAAc,OAAO;AACxG,SAAK,gBAAgB,KAAK,KAAK,GAAG,EAAE;AACpC,WAAO,aAAa;AAAA,EACtB;AACF;",
   "names": []
 }

package/dist/esm/operators/DrFor.js

@@ -1,7 +1,7 @@
 import { OperatorExecuterAttrRequire } from "./OperatorExecuterAttrRequire.js";
-import { ScriptUtils } from "@dooboostore/core-web/script/ScriptUtils";
 import { RawSet } from "../rawsets/RawSet.js";
 import { ExecuteState } from "./OperatorExecuter.js";
+import { ObjectUtils } from "@dooboostore/core";
 class DrFor extends OperatorExecuterAttrRequire {
   constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
     source.operatorAround = void 0;
@@ -11,7 +11,7 @@ class DrFor extends OperatorExecuterAttrRequire {
     const itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
     const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? "");
     const newTemp = this.source.config.window.document.createElement("temp");
-    ScriptUtils.evaluate(`
+    ObjectUtils.Script.evaluate(`
                     ${this.render.bindScript}
                     ${this.elementSource.attrs.drBeforeOption ?? ""}
                     for(${attr}) {

package/dist/esm/operators/DrFor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/operators/DrFor.ts"],
-  "sourcesContent": ["import { OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';\nimport {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';\nimport {RawSet} from '../rawsets/RawSet';\nimport {Render} from '../rawsets/Render';\nimport {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';\n\nexport class DrFor extends OperatorExecuterAttrRequire<string> {\n    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {\n        source.operatorAround = undefined;\n        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);\n    }\n\n    async executeAttrRequire(attr: string): Promise<ExecuteState> {\n        const itRandom = RawSet.drItOtherEncoding(this.elementSource.element);\n        const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');\n        const newTemp = this.source.config.window.document.createElement('temp');\n        // console.log('-----asdad',attr , this.elementSource.attrs.drItOption);\n        ScriptUtils.evaluate(`\n                    ${this.render.bindScript}\n                    ${this.elementSource.attrs.drBeforeOption ?? ''}\n                    for(${attr}) {\n                        const n = this.__render.element.cloneNode(true);\n                        var destIt = ${this.elementSource.attrs.drItOption};\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\\\#it\\\\#/g, destIt).replace(/\\\\#nearForIt\\\\#/g, destIt).replace(/\\\\#nearForIndex\\\\#/g, destIt))) \n                            n.innerHTML = n.innerHTML.replace(/\\\\#it\\\\#/g, destIt).replace(/\\\\#index\\\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    ${this.elementSource.attrs.drAfterOption ?? ''}\n                    `, Object.assign(this.source.obj, {\n            __render: Object.freeze({\n                fag: newTemp,\n                drStripOption: this.elementSource.attrs.drStripOption,\n                ...this.render\n            })\n        }));\n        RawSet.drVarDecoding(newTemp, vars);\n        RawSet.drItOtherDecoding(newTemp, itRandom);\n        const tempalte = this.source.config.window.document.createElement('template');\n        tempalte.innerHTML = newTemp.innerHTML;\n        this.returnContainer.fag.append(tempalte.content)\n        const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config)\n        this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);\n        this.returnContainer.raws.push(...rr)\n        return ExecuteState.EXECUTE;\n    }\n}\n"],
-  "mappings": "AAAA,SAAS,mCAAkC;AAC3C,SAAQ,mBAAkB;AAC1B,SAAQ,cAAa;AAErB,SAAsC,oBAA4C;AAE3E,MAAM,cAAc,4BAAoC;AAAA,EAC3D,YAAY,QAAgB,QAAgB,iBAAkC,eAA8B,QAAgB,eAA8B;AACtJ,WAAO,iBAAiB;AACxB,UAAM,QAAQ,QAAQ,iBAAiB,eAAe,QAAQ,eAAe,KAAK;AAAA,EACtF;AAAA,EAEA,MAAM,mBAAmB,MAAqC;AAC1D,UAAM,WAAW,OAAO,kBAAkB,KAAK,cAAc,OAAO;AACpE,UAAM,OAAO,OAAO,cAAc,KAAK,cAAc,SAAS,KAAK,cAAc,MAAM,eAAe,EAAE;AACxG,UAAM,UAAU,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,MAAM;AAEvE,gBAAY,SAAS;AAAA,sBACP,KAAK,OAAO,UAAU;AAAA,sBACtB,KAAK,cAAc,MAAM,kBAAkB,EAAE;AAAA,0BACzC,IAAI;AAAA;AAAA,uCAES,KAAK,cAAc,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAWpD,KAAK,cAAc,MAAM,iBAAiB,EAAE;AAAA,uBAC3C,OAAO,OAAO,KAAK,OAAO,KAAK;AAAA,MAC1C,UAAU,OAAO,OAAO;AAAA,QACpB,KAAK;AAAA,QACL,eAAe,KAAK,cAAc,MAAM;AAAA,QACxC,GAAG,KAAK;AAAA,MACZ,CAAC;AAAA,IACL,CAAC,CAAC;AACF,WAAO,cAAc,SAAS,IAAI;AAClC,WAAO,kBAAkB,SAAS,QAAQ;AAC1C,UAAM,WAAW,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,UAAU;AAC5E,aAAS,YAAY,QAAQ;AAC7B,SAAK,gBAAgB,IAAI,OAAO,SAAS,OAAO;AAChD,UAAM,KAAK,OAAO,kBAAkB,KAAK,gBAAgB,KAAK,KAAK,OAAO,KAAK,KAAK,OAAO,MAAM;AACjG,SAAK,cAAc,QAAQ,YAAY,aAAa,KAAK,gBAAgB,KAAK,KAAK,cAAc,OAAO;AACxG,SAAK,gBAAgB,KAAK,KAAK,GAAG,EAAE;AACpC,WAAO,aAAa;AAAA,EACxB;AACJ;",
+  "sourcesContent": ["import { OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';\nimport {RawSet} from '../rawsets/RawSet';\nimport {Render} from '../rawsets/Render';\nimport {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';\nimport {ObjectUtils} from \"@dooboostore/core\";\n\nexport class DrFor extends OperatorExecuterAttrRequire<string> {\n    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {\n        source.operatorAround = undefined;\n        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);\n    }\n\n    async executeAttrRequire(attr: string): Promise<ExecuteState> {\n        const itRandom = RawSet.drItOtherEncoding(this.elementSource.element);\n        const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');\n        const newTemp = this.source.config.window.document.createElement('temp');\n        // console.log('-----asdad',attr , this.elementSource.attrs.drItOption);\n      ObjectUtils.Script.evaluate(`\n                    ${this.render.bindScript}\n                    ${this.elementSource.attrs.drBeforeOption ?? ''}\n                    for(${attr}) {\n                        const n = this.__render.element.cloneNode(true);\n                        var destIt = ${this.elementSource.attrs.drItOption};\n                        if (destIt !== undefined) {\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\\\#it\\\\#/g, destIt).replace(/\\\\#nearForIt\\\\#/g, destIt).replace(/\\\\#nearForIndex\\\\#/g, destIt))) \n                            n.innerHTML = n.innerHTML.replace(/\\\\#it\\\\#/g, destIt).replace(/\\\\#index\\\\#/g, destIt);\n                        }\n                        if (this.__render.drStripOption === 'true') {\n                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                        } else {\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    ${this.elementSource.attrs.drAfterOption ?? ''}\n                    `, Object.assign(this.source.obj, {\n            __render: Object.freeze({\n                fag: newTemp,\n                drStripOption: this.elementSource.attrs.drStripOption,\n                ...this.render\n            })\n        }));\n        RawSet.drVarDecoding(newTemp, vars);\n        RawSet.drItOtherDecoding(newTemp, itRandom);\n        const tempalte = this.source.config.window.document.createElement('template');\n        tempalte.innerHTML = newTemp.innerHTML;\n        this.returnContainer.fag.append(tempalte.content)\n        const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config)\n        this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);\n        this.returnContainer.raws.push(...rr)\n        return ExecuteState.EXECUTE;\n    }\n}\n"],
+  "mappings": "AAAA,SAAS,mCAAkC;AAC3C,SAAQ,cAAa;AAErB,SAAsC,oBAA4C;AAClF,SAAQ,mBAAkB;AAEnB,MAAM,cAAc,4BAAoC;AAAA,EAC3D,YAAY,QAAgB,QAAgB,iBAAkC,eAA8B,QAAgB,eAA8B;AACtJ,WAAO,iBAAiB;AACxB,UAAM,QAAQ,QAAQ,iBAAiB,eAAe,QAAQ,eAAe,KAAK;AAAA,EACtF;AAAA,EAEA,MAAM,mBAAmB,MAAqC;AAC1D,UAAM,WAAW,OAAO,kBAAkB,KAAK,cAAc,OAAO;AACpE,UAAM,OAAO,OAAO,cAAc,KAAK,cAAc,SAAS,KAAK,cAAc,MAAM,eAAe,EAAE;AACxG,UAAM,UAAU,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,MAAM;AAEzE,gBAAY,OAAO,SAAS;AAAA,sBACZ,KAAK,OAAO,UAAU;AAAA,sBACtB,KAAK,cAAc,MAAM,kBAAkB,EAAE;AAAA,0BACzC,IAAI;AAAA;AAAA,uCAES,KAAK,cAAc,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAWpD,KAAK,cAAc,MAAM,iBAAiB,EAAE;AAAA,uBAC3C,OAAO,OAAO,KAAK,OAAO,KAAK;AAAA,MAC1C,UAAU,OAAO,OAAO;AAAA,QACpB,KAAK;AAAA,QACL,eAAe,KAAK,cAAc,MAAM;AAAA,QACxC,GAAG,KAAK;AAAA,MACZ,CAAC;AAAA,IACL,CAAC,CAAC;AACF,WAAO,cAAc,SAAS,IAAI;AAClC,WAAO,kBAAkB,SAAS,QAAQ;AAC1C,UAAM,WAAW,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,UAAU;AAC5E,aAAS,YAAY,QAAQ;AAC7B,SAAK,gBAAgB,IAAI,OAAO,SAAS,OAAO;AAChD,UAAM,KAAK,OAAO,kBAAkB,KAAK,gBAAgB,KAAK,KAAK,OAAO,KAAK,KAAK,OAAO,MAAM;AACjG,SAAK,cAAc,QAAQ,YAAY,aAAa,KAAK,gBAAgB,KAAK,KAAK,cAAc,OAAO;AACxG,SAAK,gBAAgB,KAAK,KAAK,GAAG,EAAE;AACpC,WAAO,aAAa;AAAA,EACxB;AACJ;",
   "names": []
 }

package/dist/esm/operators/DrForOf.js

@@ -1,7 +1,7 @@
 import { OperatorExecuterAttrRequire } from "./OperatorExecuterAttrRequire.js";
 import { RawSet } from "../rawsets/RawSet.js";
 import { ExecuteState } from "./OperatorExecuter.js";
-import { ObjectUtils } from "@dooboostore/core/object/ObjectUtils";
+import { ObjectUtils } from "@dooboostore/core";
 class DrForOf extends OperatorExecuterAttrRequire {
   constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
     source.operatorAround = void 0;
@@ -11,109 +11,116 @@ class DrForOf extends OperatorExecuterAttrRequire {
     const itRandom = RawSet.drItOtherEncoding(this.elementSource.element, "DrForOf");
     const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? "");
     const newTemp = this.source.config.window.document.createElement("temp");
-    const variableName = this.elementSource.element.getAttribute(RawSet.DR_VARIABLE_NAME_OPTIONNAME);
-    const itemVariableName = this.elementSource.element.getAttribute(RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME);
-    const itemIndexVariableName = this.elementSource.element.getAttribute(RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME);
-    ObjectUtils.Script.evaluate(`
+    const variableName = this.elementSource.attrs.drVariableNameOption;
+    const itemVariableName = this.elementSource.attrs.drItemVariableNameOption || RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME_DEFAULT;
+    const itemIndexVariableName = this.elementSource.attrs.drItemIndexVariableNameOption || RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME_DEFAULT;
+    const hasVariableName = !!variableName;
+    const hasItemVariableName = !!itemVariableName;
+    const hasItemIndexVariableName = !!itemIndexVariableName;
+    ObjectUtils.Script.evaluate(
+      `
+                    try {
                     ${this.render.bindScript}
                     ${this.elementSource.attrs.drBeforeOption ?? ""}
-                    var i = -1; 
-                    const forOf = ${ObjectUtils.Path.toOptionalChainPath(attr)};
-                    const forOfStr = \`${attr}\`.trim();
-                    // console.log('forOf---',forOf);
-                    if (forOf) {
-                        for(const it of forOf) {
-                            i++;
-                            var destIt = it;
-                            if (/\\[(.*,?)\\],/g.test(forOfStr)) {
-                                if (typeof it === 'string') {
-                                    destIt = it;
+                        var i = -1;
+                        const forOf = ${ObjectUtils.Path.toOptionalChainPath(attr)};
+                        const forOfStr = '('+\`${attr}\`.trim() + ')';
+                        if (forOf) {
+                            for(const it of forOf) {
+                                i++;
+                                var destIt = it;
+                                if (/\\[(.*,?)\\],/g.test(forOfStr)) {
+                                    if (typeof it === 'string') {
+                                        destIt = it;
+                                    } else {
+                                        destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];
+                                    }
+                                } else if (forOf.isRange) {
+                                        destIt = it;
                                 } else {
-                                    destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];
+                                    destIt = forOfStr + '[' + i +']'
                                 }
-                            } else if (forOf.isRange) {
-                                    destIt = it;
-                            } else {
-                                destIt = forOfStr + '[' + i +']'
-                            }
-                            const n = this.__render.element.cloneNode(true);
-                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));
-                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIt\\#/g, destIt).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIndex\\#/g, i)))
-                            if ('${variableName}') {
-                              n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replaceAll('#${variableName}#', forOfStr)));
-                            }
-                            if ('${itemVariableName}') {
-                              n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replaceAll('#${itemVariableName}#', destIt)));
-                            }
-                            if ('${itemIndexVariableName}') {
-                              n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replaceAll('#${itemIndexVariableName}#', i)));
-                            }
-                            
-                            const drOptionAttr = n.getAttribute('${RawSet.DR_DETECT_ATTR_OPTIONNAME}');
-                            if (drOptionAttr) {
-                              const drOptionAttrResult = $scriptUtils.evaluateReturn(drOptionAttr, this);
-                              Array.from(Object.entries(drOptionAttrResult??{})).forEach(([k,v])=>{
-                                if (v === null) {
-                                  n.removeAttribute(k);
+                                destIt = '(' + destIt + ')';
+                                
+                                const n = this.__render.element.cloneNode(true);
+                                // dr-for-of \uBC0F \uAD00\uB828 \uC635\uC158 \uC81C\uAC70 \uD6C4 \uB098\uBA38\uC9C0 \uC18D\uC131 \uC720\uC9C0
+                                Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));
+                                
+                                // \uC815\uAD50\uD55C \uCE58\uD658 \uD568\uC218 (Regex \uAE30\uBC18\uC73C\uB85C \uD638\uD658\uC131 \uD655\uBCF4)
+                                const replaceAllVars = (text) => {
+                                    if (!text) return text;
+                                    let result = text.replace(/\\#it\\#/g, destIt)
+                                                     .replace(/\\#nearForOfIt\\#/g, destIt)
+                                                     .replace(/\\#index\\#/g, String(i))
+                                                     .replace(/\\#nearForOfIndex\\#/g, String(i));
+                                    
+                                    if (${hasVariableName} && '${variableName}') result = result.replace(new RegExp('#${variableName}#', 'g'), forOfStr);
+                                    if (${hasItemVariableName} && '${itemVariableName}') result = result.replace(new RegExp('#${itemVariableName}#', 'g'), destIt);
+                                    if (${hasItemIndexVariableName} && '${itemIndexVariableName}') result = result.replace(new RegExp('#${itemIndexVariableName}#', 'g'), String(i));
+                                    return result;
+                                };
+
+                                // \uC18D\uC131 \uCE58\uD658
+                                n.getAttributeNames().forEach(itName => {
+                                    n.setAttribute(itName, replaceAllVars(n.getAttribute(itName)));
+                                });
+
+                                const hasDrOptionAttr = n.hasAttribute('${RawSet.DR_ATTR_OPTIONNAME}');
+                                if (hasDrOptionAttr) {
+                                  const drOptionAttr = n.getAttribute('${RawSet.DR_ATTR_OPTIONNAME}');
+                                  const drOptionAttrResult = $scriptUtils.evaluateReturn(drOptionAttr, this);
+                                  Array.from(Object.entries(drOptionAttrResult??{})).forEach(([k,v])=>{
+                                    if (v === null) n.removeAttribute(k); else n.setAttribute(k,v);
+                                  });
+                                }
+                                
+                                const hasDrOptionIf = n.hasAttribute('${RawSet.DR_IF_OPTIONNAME}');
+                                if (hasDrOptionIf) {
+                                  const drOptionIf = n.getAttribute('${RawSet.DR_IF_OPTIONNAME}');
+                                  if(!$scriptUtils.evaluateReturn(drOptionIf, this)) continue;
+                                }
+                                
+                                const drOptionAttrDetect = n.getAttribute('${RawSet.DR_DETECT_ATTR_OPTIONNAME}');
+                                if (drOptionAttrDetect) {
+                                  const drOptionAttrResult = $scriptUtils.evaluateReturn(drOptionAttrDetect, this);
+                                  Array.from(Object.entries(drOptionAttrResult??{})).forEach(([k,v])=>{
+                                    if (v === null) n.removeAttribute(k); else n.setAttribute(k,v);
+                                  });
+                                }
+                                
+                                const drOptionFilter = n.getAttribute('${RawSet.DR_DETECT_FILTER_OPTIONNAME}');
+                                if (drOptionFilter) {
+                                  if (!$scriptUtils.evaluateReturn(drOptionFilter, this)) continue;
+                                }
+     
+                                // InnerHTML \uCE58\uD658
+                                n.innerHTML = replaceAllVars(n.innerHTML);
+                       
+                                if (this.__render.drStripOption === 'true') {
+                                    Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));
                                 } else {
-                                  n.setAttribute(k,v);
+                                    this.__render.fag.append(n);
                                 }
-                              })
-                            }
-                            
-                            const drOptionFilter = n.getAttribute('${RawSet.DR_DETECT_FILTER_OPTIONNAME}');
-                            if (drOptionFilter) {
-                              const drOptionFilterResult = $scriptUtils.evaluateReturn(drOptionFilter, this);
-                              // console.log('---drforof----', drOptionFilter, drOptionFilterResult)
-                              if (!drOptionFilterResult) {
-                                continue;
-                              }
-                            }
-
-                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, i);
-                            if ('${variableName}') {
-                              n.innerHTML = n.innerHTML.replaceAll('#${variableName}#', forOfStr);
                             }
-                            if ('${itemVariableName}') {
-                              n.innerHTML = n.innerHTML.replaceAll('#${itemVariableName}#', destIt);
-                            }
-                            if ('${itemIndexVariableName}') {
-                              n.innerHTML = n.innerHTML.replaceAll('#${itemIndexVariableName}#', i);
-                            }
-                   
-                            if (this.__render.drStripOption === 'true') {
-                                Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));
-                            } else {
-                                this.__render.fag.append(n);
-                            }
-                           
-                        }
-                        
-                        if('${this.elementSource.attrs.drNextOption}' !== 'null') {
-                            const n = this.__render.element.cloneNode(true);
-                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));
-                            const [name, idx] = '${this.elementSource.attrs.drNextOption}'.split(',');
-                            n.setAttribute('${RawSet.DR_FOR_OF_NAME}', name + '[' + idx + ']');
-                            n.setAttribute('${RawSet.DR_NEXT_OPTIONNAME}', name + ',' +  (Number(idx) + 1));
-                            this.__render.fag.append(n);
                         }
-                    }
                     ${this.elementSource.attrs.drAfterOption ?? ""}
-                    `, Object.assign(this.source.obj, {
-      __render: Object.freeze({
-        drStripOption: this.elementSource.attrs.drStripOption,
-        drAttr: this.elementSource.attrs,
-        drAttrsOriginName: RawSet.drAttrsOriginName,
-        fag: newTemp,
-        ...this.render
-        // eslint-disable-next-line no-use-before-define
+                    } catch(e) { console.error('DrForOf 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 tempalte = this.source.config.window.document.createElement("template");
-    tempalte.innerHTML = newTemp.innerHTML;
-    this.returnContainer.fag.append(tempalte.content);
+    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);

package/dist/esm/operators/DrForOf.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/operators/DrForOf.ts"],
-  "sourcesContent": ["import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';\nimport { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';\nimport { RawSet } from '../rawsets/RawSet';\nimport { Render } from '../rawsets/Render';\nimport { AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source } from './OperatorExecuter';\nimport { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';\n\nexport class DrForOf extends OperatorExecuterAttrRequire<string> {\n  constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {\n    source.operatorAround = undefined;\n    super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);\n  }\n\n  async executeAttrRequire(attr: string): Promise<ExecuteState> {\n    // console.log('\uD0C0\uC9C0\uB3C4\uC54A\uB0D0?')\n    const itRandom = RawSet.drItOtherEncoding(this.elementSource.element, 'DrForOf');\n    const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');\n    const newTemp = this.source.config.window.document.createElement('temp');\n\n    const variableName = this.elementSource.element.getAttribute(RawSet.DR_VARIABLE_NAME_OPTIONNAME);\n    const itemVariableName = this.elementSource.element.getAttribute(RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME);\n    const itemIndexVariableName = this.elementSource.element.getAttribute(RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME);\n    // console.log('----!', this.elementSource.attrs)\n    // ScriptUtils.evalReturn()\n    ObjectUtils.Script.evaluate(`\n                    ${this.render.bindScript}\n                    ${this.elementSource.attrs.drBeforeOption ?? ''}\n                    var i = -1; \n                    const forOf = ${ObjectUtils.Path.toOptionalChainPath(attr)};\n                    const forOfStr = \\`${attr}\\`.trim();\n                    // console.log('forOf---',forOf);\n                    if (forOf) {\n                        for(const it of forOf) {\n                            i++;\n                            var destIt = it;\n                            if (/\\\\[(.*,?)\\\\],/g.test(forOfStr)) {\n                                if (typeof it === 'string') {\n                                    destIt = it;\n                                } else {\n                                    destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];\n                                }\n                            } else if (forOf.isRange) {\n                                    destIt = it;\n                            } else {\n                                destIt = forOfStr + '[' + i +']'\n                            }\n                            const n = this.__render.element.cloneNode(true);\n                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\\\#it\\\\#/g, destIt).replace(/\\\\#nearForOfIt\\\\#/g, destIt).replace(/\\\\#it\\\\#/g, destIt).replace(/\\\\#nearForOfIndex\\\\#/g, i)))\n                            if ('${variableName}') {\n                              n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replaceAll('#${variableName}#', forOfStr)));\n                            }\n                            if ('${itemVariableName}') {\n                              n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replaceAll('#${itemVariableName}#', destIt)));\n                            }\n                            if ('${itemIndexVariableName}') {\n                              n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replaceAll('#${itemIndexVariableName}#', i)));\n                            }\n                            \n                            const drOptionAttr = n.getAttribute('${RawSet.DR_DETECT_ATTR_OPTIONNAME}');\n                            if (drOptionAttr) {\n                              const drOptionAttrResult = $scriptUtils.evaluateReturn(drOptionAttr, this);\n                              Array.from(Object.entries(drOptionAttrResult??{})).forEach(([k,v])=>{\n                                if (v === null) {\n                                  n.removeAttribute(k);\n                                } else {\n                                  n.setAttribute(k,v);\n                                }\n                              })\n                            }\n                            \n                            const drOptionFilter = n.getAttribute('${RawSet.DR_DETECT_FILTER_OPTIONNAME}');\n                            if (drOptionFilter) {\n                              const drOptionFilterResult = $scriptUtils.evaluateReturn(drOptionFilter, this);\n                              // console.log('---drforof----', drOptionFilter, drOptionFilterResult)\n                              if (!drOptionFilterResult) {\n                                continue;\n                              }\n                            }\n\n                            n.innerHTML = n.innerHTML.replace(/\\\\#it\\\\#/g, destIt).replace(/\\\\#index\\\\#/g, i);\n                            if ('${variableName}') {\n                              n.innerHTML = n.innerHTML.replaceAll('#${variableName}#', forOfStr);\n                            }\n                            if ('${itemVariableName}') {\n                              n.innerHTML = n.innerHTML.replaceAll('#${itemVariableName}#', destIt);\n                            }\n                            if ('${itemIndexVariableName}') {\n                              n.innerHTML = n.innerHTML.replaceAll('#${itemIndexVariableName}#', i);\n                            }\n                   \n                            if (this.__render.drStripOption === 'true') {\n                                Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                            } else {\n                                this.__render.fag.append(n);\n                            }\n                           \n                        }\n                        \n                        if('${this.elementSource.attrs.drNextOption}' !== 'null') {\n                            const n = this.__render.element.cloneNode(true);\n                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                            const [name, idx] = '${this.elementSource.attrs.drNextOption}'.split(',');\n                            n.setAttribute('${RawSet.DR_FOR_OF_NAME}', name + '[' + idx + ']');\n                            n.setAttribute('${RawSet.DR_NEXT_OPTIONNAME}', name + ',' +  (Number(idx) + 1));\n                            this.__render.fag.append(n);\n                        }\n                    }\n                    ${this.elementSource.attrs.drAfterOption ?? ''}\n                    `, Object.assign(this.source.obj, {\n      __render: Object.freeze({\n        drStripOption: this.elementSource.attrs.drStripOption,\n        drAttr: this.elementSource.attrs,\n        drAttrsOriginName: RawSet.drAttrsOriginName,\n        fag: newTemp,\n        ...this.render\n        // eslint-disable-next-line no-use-before-define\n      } as Render)\n    }));\n    RawSet.drVarDecoding(newTemp, vars);\n    RawSet.drItOtherDecoding(newTemp, itRandom);\n    const tempalte = this.source.config.window.document.createElement('template');\n    tempalte.innerHTML = newTemp.innerHTML;\n    this.returnContainer.fag.append(tempalte.content)\n    const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);\n    this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);\n    // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();\n    this.returnContainer.raws.push(...rr)\n    return ExecuteState.EXECUTE;\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';\nimport { RawSet } from '../rawsets/RawSet';\nimport { Render } from '../rawsets/Render';\nimport { AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source } from './OperatorExecuter';\nimport { ObjectUtils } from '@dooboostore/core';\n\nexport class DrForOf extends OperatorExecuterAttrRequire<string> {\n  constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {\n    source.operatorAround = undefined;\n    super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);\n  }\n\n  async executeAttrRequire(attr: string): Promise<ExecuteState> {\n    const itRandom = RawSet.drItOtherEncoding(this.elementSource.element, 'DrForOf');\n    const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');\n    const newTemp = this.source.config.window.document.createElement('temp');\n\n    const variableName = this.elementSource.attrs.drVariableNameOption;\n    const itemVariableName = this.elementSource.attrs.drItemVariableNameOption || RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME_DEFAULT;\n    const itemIndexVariableName = this.elementSource.attrs.drItemIndexVariableNameOption || RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME_DEFAULT;\n\n    const hasVariableName = !!variableName;\n    const hasItemVariableName = !!itemVariableName;\n    const hasItemIndexVariableName = !!itemIndexVariableName;\n\n    ObjectUtils.Script.evaluate(\n      `\n                    try {\n                    ${this.render.bindScript}\n                    ${this.elementSource.attrs.drBeforeOption ?? ''}\n                        var i = -1;\n                        const forOf = ${ObjectUtils.Path.toOptionalChainPath(attr)};\n                        const forOfStr = '('+\\`${attr}\\`.trim() + ')';\n                        if (forOf) {\n                            for(const it of forOf) {\n                                i++;\n                                var destIt = it;\n                                if (/\\\\[(.*,?)\\\\],/g.test(forOfStr)) {\n                                    if (typeof it === 'string') {\n                                        destIt = it;\n                                    } else {\n                                        destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];\n                                    }\n                                } else if (forOf.isRange) {\n                                        destIt = it;\n                                } else {\n                                    destIt = forOfStr + '[' + i +']'\n                                }\n                                destIt = '(' + destIt + ')';\n                                \n                                const n = this.__render.element.cloneNode(true);\n                                // dr-for-of \uBC0F \uAD00\uB828 \uC635\uC158 \uC81C\uAC70 \uD6C4 \uB098\uBA38\uC9C0 \uC18D\uC131 \uC720\uC9C0\n                                Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                                \n                                // \uC815\uAD50\uD55C \uCE58\uD658 \uD568\uC218 (Regex \uAE30\uBC18\uC73C\uB85C \uD638\uD658\uC131 \uD655\uBCF4)\n                                const replaceAllVars = (text) => {\n                                    if (!text) return text;\n                                    let result = text.replace(/\\\\#it\\\\#/g, destIt)\n                                                     .replace(/\\\\#nearForOfIt\\\\#/g, destIt)\n                                                     .replace(/\\\\#index\\\\#/g, String(i))\n                                                     .replace(/\\\\#nearForOfIndex\\\\#/g, String(i));\n                                    \n                                    if (${hasVariableName} && '${variableName}') result = result.replace(new RegExp('#${variableName}#', 'g'), forOfStr);\n                                    if (${hasItemVariableName} && '${itemVariableName}') result = result.replace(new RegExp('#${itemVariableName}#', 'g'), destIt);\n                                    if (${hasItemIndexVariableName} && '${itemIndexVariableName}') result = result.replace(new RegExp('#${itemIndexVariableName}#', 'g'), String(i));\n                                    return result;\n                                };\n\n                                // \uC18D\uC131 \uCE58\uD658\n                                n.getAttributeNames().forEach(itName => {\n                                    n.setAttribute(itName, replaceAllVars(n.getAttribute(itName)));\n                                });\n\n                                const hasDrOptionAttr = n.hasAttribute('${RawSet.DR_ATTR_OPTIONNAME}');\n                                if (hasDrOptionAttr) {\n                                  const drOptionAttr = n.getAttribute('${RawSet.DR_ATTR_OPTIONNAME}');\n                                  const drOptionAttrResult = $scriptUtils.evaluateReturn(drOptionAttr, this);\n                                  Array.from(Object.entries(drOptionAttrResult??{})).forEach(([k,v])=>{\n                                    if (v === null) n.removeAttribute(k); else n.setAttribute(k,v);\n                                  });\n                                }\n                                \n                                const hasDrOptionIf = n.hasAttribute('${RawSet.DR_IF_OPTIONNAME}');\n                                if (hasDrOptionIf) {\n                                  const drOptionIf = n.getAttribute('${RawSet.DR_IF_OPTIONNAME}');\n                                  if(!$scriptUtils.evaluateReturn(drOptionIf, this)) continue;\n                                }\n                                \n                                const drOptionAttrDetect = n.getAttribute('${RawSet.DR_DETECT_ATTR_OPTIONNAME}');\n                                if (drOptionAttrDetect) {\n                                  const drOptionAttrResult = $scriptUtils.evaluateReturn(drOptionAttrDetect, this);\n                                  Array.from(Object.entries(drOptionAttrResult??{})).forEach(([k,v])=>{\n                                    if (v === null) n.removeAttribute(k); else n.setAttribute(k,v);\n                                  });\n                                }\n                                \n                                const drOptionFilter = n.getAttribute('${RawSet.DR_DETECT_FILTER_OPTIONNAME}');\n                                if (drOptionFilter) {\n                                  if (!$scriptUtils.evaluateReturn(drOptionFilter, this)) continue;\n                                }\n     \n                                // InnerHTML \uCE58\uD658\n                                n.innerHTML = replaceAllVars(n.innerHTML);\n                       \n                                if (this.__render.drStripOption === 'true') {\n                                    Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));\n                                } else {\n                                    this.__render.fag.append(n);\n                                }\n                            }\n                        }\n                    ${this.elementSource.attrs.drAfterOption ?? ''}\n                    } catch(e) { console.error('DrForOf Error:', e); }\n                    `,\n      Object.assign(this.source.obj, {\n        __render: Object.freeze({\n          drStripOption: this.elementSource.attrs.drStripOption,\n          drAttr: this.elementSource.attrs,\n          drAttrsOriginName: RawSet.drAttrsOriginName,\n          fag: newTemp,\n          ...this.render\n        } as Render)\n      })\n    );\n    RawSet.drVarDecoding(newTemp, vars);\n    RawSet.drItOtherDecoding(newTemp, itRandom);\n    const template = this.source.config.window.document.createElement('template');\n    template.innerHTML = newTemp.innerHTML;\n    this.returnContainer.fag.append(template.content);\n    const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);\n    this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);\n    this.returnContainer.raws.push(...rr);\n    return ExecuteState.EXECUTE;\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }