@dooboostore/dom-render 1.0.112 → 1.0.114

package/src/operators/DrAppender.ts

@@ -1,65 +1,130 @@
-import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
-import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
-import {RawSet} from '../rawsets/RawSet';
-import {Render} from '../rawsets/Render';
-import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
-import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
+import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
+import { RawSet } from '../rawsets/RawSet';
+import { Render } from '../rawsets/Render';
+import { AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source } from './OperatorExecuter';
+import { ObjectUtils } from '@dooboostore/core';
 
 export class DrAppender extends OperatorExecuterAttrRequire<string> {
-    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
-        source.operatorAround = undefined;
-        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
-    }
+  constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+    source.operatorAround = undefined;
+    super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+  }
 
-    async executeAttrRequire(attr: string): Promise<ExecuteState> {
-        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');
-        ObjectUtils.Script.evaluate(`
+  async executeAttrRequire(attr: string): Promise<ExecuteState> {
+    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 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 호환성을 위해 Array.from 사용
+                            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;
+                                
+                                // 아이템 접근 경로 생성
+                                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);
+                                // 옵션 복원 및 정제
+                                Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drAppender' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));
+                                
+                                // 정교한 치환 로직 (속성)
+                                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);
+                                });
+
+                                // 정교한 치환 로직 (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);
+                                }
+                            }
+                            
+                            // 다음 세대 센티넬 생성 (정석 체이닝)
+                            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
-            } as 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 rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
-        this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);
-        // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
-        this.returnContainer.raws.push(...rr)
-        return ExecuteState.EXECUTE;
-    }
+                    }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
+        } as 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;
+  }
 }

package/src/operators/DrFor.ts

@@ -1,9 +1,8 @@
 import { OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
-import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
 import {RawSet} from '../rawsets/RawSet';
 import {Render} from '../rawsets/Render';
 import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
-import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
+import {ObjectUtils} from "@dooboostore/core";
 
 export class DrFor extends OperatorExecuterAttrRequire<string> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {

package/src/operators/DrForOf.ts

@@ -1,9 +1,8 @@
 import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
-import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
 import { RawSet } from '../rawsets/RawSet';
 import { Render } from '../rawsets/Render';
 import { AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source } from './OperatorExecuter';
-import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
+import { ObjectUtils } from '@dooboostore/core';
 
 export class DrForOf extends OperatorExecuterAttrRequire<string> {
   constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
@@ -12,150 +11,125 @@ export class DrForOf extends OperatorExecuterAttrRequire<string> {
   }
 
   async executeAttrRequire(attr: string): Promise<ExecuteState> {
-    // console.log('타지도않냐?')
     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 drAttrOption = this.elementSource.element.getAttribute(RawSet.DR_ATTR_OPTIONNAME);
-    const itemIndexVariableName = this.elementSource.element.getAttribute(RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME);
-    const hasVariableName = this.elementSource.element.hasAttribute(RawSet.DR_VARIABLE_NAME_OPTIONNAME);
-    const hasItemVariableName = this.elementSource.element.hasAttribute(RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME);
-    const hasItemIndexVariableName = this.elementSource.element.hasAttribute(RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME);
-    // console.log('----!', this.elementSource.attrs)
-    // ScriptUtils.evalReturn()
-    const t0 = performance.now();
-    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);
-                    // debugger;
-                    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 (${hasVariableName} && '${variableName}') {
-                              n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replaceAll('#${variableName}#', forOfStr)));
-                            }
-                            if (${hasItemVariableName} && '${itemVariableName}') {
-                              n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replaceAll('#${itemVariableName}#', destIt)));
-                            }
-                            if (${hasItemIndexVariableName} && '${itemIndexVariableName}') {
-                              n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replaceAll('#${itemIndexVariableName}#', i)));
-                            }
-                            
-                            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);
+                                destIt = '(' + destIt + ')';
+                                
+                                const n = this.__render.element.cloneNode(true);
+                                // dr-for-of 및 관련 옵션 제거 후 나머지 속성 유지
+                                Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));
+                                
+                                // 정교한 치환 함수 (Regex 기반으로 호환성 확보)
+                                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;
+                                };
+
+                                // 속성 치환
+                                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}');
-                              const e = $scriptUtils.evaluateReturn(drOptionIf, this);
-                              if(!e) {
-                                continue;
-                              }
-                            
-                            }
-                            
-                            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);
+                                
+                                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 치환
+                                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 (${hasVariableName} && '${variableName}') {
-                              n.innerHTML = n.innerHTML.replaceAll('#${variableName}#', forOfStr);
-                            }
-                            if (${hasItemVariableName} && '${itemVariableName}') {
-                              n.innerHTML = n.innerHTML.replaceAll('#${itemVariableName}#', destIt);
-                            }
-                            if (${hasItemIndexVariableName} && '${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
-      } as Render)
-    }));
+                    } 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
+        } as 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);
-    // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
-    this.returnContainer.raws.push(...rr)
-    // console.log(`drForOf 호출에 걸린 시간은 ${performance.now() - t0} 밀리초.`);
+    this.returnContainer.raws.push(...rr);
     return ExecuteState.EXECUTE;
   }
 }

package/src/operators/DrForm.ts

@@ -1,12 +1,11 @@
-import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
 import {RawSet} from '../rawsets/RawSet';
-import {Validator} from '../validators/Validator';
+import {Validator} from '@dooboostore/core';
 import {EventManager} from '../events/EventManager';
-import {ValidatorArray} from '../validators/ValidatorArray';
+import {ValidatorArray} from '@dooboostore/core';
 import {Render} from '../rawsets/Render';
 import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
 import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
-import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
+import {ObjectUtils} from "@dooboostore/core";
 
 export class DrForm extends OperatorExecuterAttrRequire<string> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {

package/src/operators/DrIf.ts

@@ -1,9 +1,8 @@
 import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
-import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
 import { RawSet } from '../rawsets/RawSet';
 import { Render } from '../rawsets/Render';
 import { AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source } from './OperatorExecuter';
-import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
+import { ObjectUtils } from '@dooboostore/core';
 
 export class DrIf extends OperatorExecuterAttrRequire<string> {
   constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {

package/src/operators/DrInnerHTML.ts

@@ -1,9 +1,8 @@
 import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
-import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
 import {RawSet} from '../rawsets/RawSet';
 import {Render} from '../rawsets/Render';
 import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
-import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
+import {ObjectUtils} from "@dooboostore/core";
 
 export class DrInnerHTML extends OperatorExecuterAttrRequire<string> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {

package/src/operators/DrInnerText.ts

@@ -1,9 +1,8 @@
 import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
-import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
 import {RawSet} from '../rawsets/RawSet';
 import {Render} from '../rawsets/Render';
 import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
-import {ObjectUtils} from '@dooboostore/core/object/ObjectUtils';
+import {ObjectUtils} from '@dooboostore/core';
 
 export class DrInnerText extends OperatorExecuterAttrRequire<string> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {

package/src/operators/DrRepeat.ts

@@ -1,10 +1,9 @@
 import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
-import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
 import {RawSet} from '../rawsets/RawSet';
 import {EventManager} from '../events/EventManager';
 import {Render} from '../rawsets/Render';
 import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
-import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
+import {ObjectUtils} from "@dooboostore/core";
 
 export class DrRepeat extends OperatorExecuterAttrRequire<string> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {

package/src/operators/DrStripElement.ts

@@ -1,9 +1,8 @@
 import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
-import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
 import { RawSet } from '../rawsets/RawSet';
 import { Render } from '../rawsets/Render';
 import { AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source } from './OperatorExecuter';
-import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
+import {ObjectUtils} from "@dooboostore/core";
 
 export class DrStripElement extends OperatorExecuterAttrRequire<string> {
   constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {

package/src/operators/DrTargetElement.ts

@@ -1,4 +1,4 @@
-import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
+import { ObjectUtils } from '@dooboostore/core';
 import { RawSet } from '../rawsets/RawSet';
 import { CreatorMetaData } from '../rawsets/CreatorMetaData';
 import {
@@ -10,8 +10,8 @@ import {
   Source
 } from './OperatorExecuter';
 import { Render } from '../rawsets/Render';
-import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';
 import { TargetElement } from '../configs';
+import { DomRenderComponentMetaKey } from '../rawsets';
 
 declare global {
   interface Window {
@@ -53,8 +53,8 @@ export class DrTargetElement extends OperatorExecuter<void> {
         this.rawSet.point.start instanceof this.source.config.window.HTMLMetaElement &&
         this.rawSet.point.end instanceof this.source.config.window.HTMLMetaElement
       ) {
-        this.rawSet.point.start.setAttribute('this-path', `this.__domrender_components.${this.rawSet.uuid}`);
-        this.rawSet.point.end.setAttribute('this-path', `this.__domrender_components.${this.rawSet.uuid}`);
+        this.rawSet.point.start.setAttribute('this-path', `this.${DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY}.${this.rawSet.uuid}`);
+        this.rawSet.point.end.setAttribute('this-path', `this.${DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY}.${this.rawSet.uuid}`);
       }
 
       const documentFragment = await targetElement.callBack(

package/src/operators/DrTargetElementIsElement.ts

@@ -2,7 +2,8 @@ import { RawSet } from '../rawsets/RawSet';
 import { CreatorMetaData } from '../rawsets/CreatorMetaData';
 import { AfterCallBack, ElementSource, ExecuteState, OperatorExecuter, ReturnContainer, Source } from './OperatorExecuter';
 import { Render } from '../rawsets/Render';
-import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
+import { ObjectUtils } from '@dooboostore/core';
+import { DomRenderComponentMetaKey } from '../rawsets';
 
 
 // 여기서 사용자가 등록한 TargetElement가 들어간다.
@@ -20,8 +21,8 @@ export class DrTargetElementIsElement extends OperatorExecuter<string | null> {
     // console.log('--------------tar', targetElement)
     if (targetElement) {
       if (this.rawSet.point.start instanceof this.source.config.window.HTMLMetaElement && this.rawSet.point.end instanceof this.source.config.window.HTMLMetaElement) {
-        this.rawSet.point.start.setAttribute('this-path', `this.__domrender_components.${this.rawSet.uuid}`)
-        this.rawSet.point.end.setAttribute('this-path', `this.__domrender_components.${this.rawSet.uuid}`)
+        this.rawSet.point.start.setAttribute('this-path', `this.${DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY}.${this.rawSet.uuid}`)
+        this.rawSet.point.end.setAttribute('this-path', `this.${DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY}.${this.rawSet.uuid}`)
       }
 
 

package/src/operators/DrThis.ts

@@ -4,7 +4,7 @@ import { ComponentSet } from '../components/ComponentSet';
 import { ExecuteState } from './OperatorExecuter';
 import { isOnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';
 import { isOnDrThisBind } from '../lifecycle/dr-this/OnDrThisBind';
-import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
+import { ObjectUtils } from '@dooboostore/core';
 import { Render } from '../rawsets/Render';
 
 export class DrThis extends OperatorExecuterAttrRequire<string> {