@dooboostore/dom-render 1.0.111 → 1.0.113

package/src/index.ts

@@ -1,17 +1,32 @@
-//
-// export * from './components';
-// export * from './configs';
-// export * from './decorators';
-// export * from './events';
-// export * from './iterators';
-// export * from './lifecycle';
-// export * from './messenger';
-// // export * from './operators';
-// export { Appender as AppenderArray, Dr, DrAppender, DrFor, DrForOf, DrForm, DrIf, DrInnerHTML, DrInnerText, DrPre, DrRepeat, DrStripElement, DrTargetAttr, DrTargetElement, DrTargetElementIsElement, DrThis, DrThisProperty, OperatorExecuter, OperatorExecuterAttrRequire } from './operators';
-// export * from './rawsets';
-// export * from './routers';
-// export * from './types';
-// export * from './validators';
-// export * from './DomRender';
-// export * from './DomRenderProxy';
-export default {}
+export {
+	drComponent,
+	If,
+	This,
+	Appender as AppenderComponent,
+	PromiseSwitch,
+	Choose,
+	CheckBox,
+	Radio,
+	Select,
+	Timer,
+	Details,
+	Input,
+	Route,
+	RouterOutlet,
+	A,
+	ComponentSet,
+	ComponentRouterBase,
+	ComponentBase
+} from './components';
+export type { ComponentBaseConfig, ChildrenSet, ComponentRouterBaseConfig } from './components';
+export * from './configs';
+export * from './decorators';
+export * from './events';
+export * from './lifecycle';
+export * from './messenger';
+export * from './operators';
+export * from './rawsets';
+export * from './types';
+export * from './DomRender';
+export * from './DomRenderProxy';
+export default {};

package/src/lifecycle/OnChangeAttrRender.ts

@@ -4,7 +4,7 @@ export type OtherData = {
     rawSet?: RawSet
 }
 export interface OnChangeAttrRender {
-    onChangeAttrRender(name: string, value: any, other: OtherData): void;
+    onChangeAttrRender(name: string, value: any, other?: OtherData): void;
 }
 
 export const isOnChangeAttrRender = (obj: any): obj is OnChangeAttrRender => {

package/src/lifecycle/OnChildRawSetRendered.ts

@@ -0,0 +1,13 @@
+import { RawSet, RenderResult } from '../rawsets/RawSet';
+
+export type OnRawSetRenderedOtherData = {
+  renderResult?: RenderResult
+  //     rawSet?: RawSet
+}
+export interface OnChildRawSetRendered {
+    onChildRawSetRendered (): Promise<void>;
+}
+
+export const isOnChildRawSetRendered= (obj: any): obj is OnChildRawSetRendered => {
+    return typeof obj?.onChildRawSetRendered === 'function';
+}

package/src/lifecycle/OnRawSetRendered.ts

@@ -1,7 +1,9 @@
 import { RawSet, RenderResult } from '../rawsets/RawSet';
 
 export type OnRawSetRenderedOtherData = {
-  path?: string
+  path?: string;
+  value?: any;
+  root: any;
   renderResult?: RenderResult
   //     rawSet?: RawSet
 }

package/src/messenger/Messenger.ts

@@ -1,4 +1,4 @@
-import { ConstructorType } from '@dooboostore/core/types';
+import { ConstructorType } from '@dooboostore/core';
 import {DomRenderFinalProxy} from '../types/Types';
 import {DomRenderConfig} from '../configs/DomRenderConfig';
 

package/src/operators/Appender.ts

@@ -28,6 +28,13 @@ export class Appender<T = any> implements Iterable<T> {
     }
   }
 
+  get(key: string): T[] | undefined {
+    const o = this.keyMap.get(key);
+    if (o !== undefined) {
+      return this[o];
+    }
+    return undefined;
+  }
   set(key: string, ...v:T[]) {
     const o = this.keyMap.get(key);
     // console.log('set!!', o);
@@ -43,7 +50,7 @@ export class Appender<T = any> implements Iterable<T> {
   delete(key: string) {
     const o = this.keyMap.get(key);
     if (o !== undefined) {
-      this[o] = [];
+      this[o] = this[o].map(it=> undefined);
       this.keyMap.delete(key);
       // this.length--;
     }

package/src/operators/Dr.ts

@@ -1,8 +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";
 
 export class Dr extends OperatorExecuterAttrRequire<null> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
@@ -13,7 +13,7 @@ export class Dr extends OperatorExecuterAttrRequire<null> {
         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}
                     const n = $element.cloneNode(true);
                     var destIt = ${this.elementSource.attrs.drItOption};

package/src/operators/DrAppender.ts

@@ -1,64 +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 { 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');
-        ScriptUtils.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,8 +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";
 
 export class DrFor extends OperatorExecuterAttrRequire<string> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
@@ -15,7 +15,7 @@ export class DrFor extends OperatorExecuterAttrRequire<string> {
         const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');
         const newTemp = this.source.config.window.document.createElement('temp');
         // console.log('-----asdad',attr , this.elementSource.attrs.drItOption);
-        ScriptUtils.evaluate(`
+      ObjectUtils.Script.evaluate(`
                     ${this.render.bindScript}
                     ${this.elementSource.attrs.drBeforeOption ?? ''}
                     for(${attr}) {

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,120 +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 itemIndexVariableName = this.elementSource.element.getAttribute(RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME);
-    // console.log('----!', this.elementSource.attrs)
-    // ScriptUtils.evalReturn()
-    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 및 관련 옵션 제거 후 나머지 속성 유지
+                                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}');
+                                  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 ('${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
-      } 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)
+    this.returnContainer.raws.push(...rr);
     return ExecuteState.EXECUTE;
   }
 }