@dooboostore/dom-render 1.0.109 → 1.0.110

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    // console.log('----!', this.elementSource.attrs)\n    // ScriptUtils.evalReturn()\n    ScriptUtils.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                            // console.log('zzzzzzzzzzz', n.getAttribute('${RawSet.DR_DETECT_ATTR_OPTIONNAME}'));\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                            // console.log('---------'+destIt,n, Array.from(n.getAttributeNames()).map(it=>({name:it,attr: n.getAttribute(it)})));\n                            // console.log('---------destItdestIt',destIt);\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                            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                            // console.log('!@@@@', n.innerHTML);\n                            // DR_THIS_OPTIONNAME \uB294 \uC81C\uAC70\uD55C\uB2E4 \uAF2C\uC778\uB2E4. strip \uD560\uB54C \uB9C9 \uAF2C\uC5EC\uBC84\uB9B0\uB2E4.\n                            // const drOptionThis = n.getAttribute('${RawSet.DR_THIS_OPTIONNAME}');\n                            // if (drOptionThis) {\n                            //  n.setAttribute('${RawSet.DR_THIS_NAME}', drOptionThis)\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": "AAAA,SAAS,mCAAmC;AAC5C,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAEvB,SAAuC,oBAA6C;AACpF,SAAS,mBAAmB;AAErB,MAAM,gBAAgB,4BAAoC;AAAA,EAC/D,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;AAE5D,UAAM,WAAW,OAAO,kBAAkB,KAAK,cAAc,SAAS,SAAS;AAC/E,UAAM,OAAO,OAAO,cAAc,KAAK,cAAc,SAAS,KAAK,cAAc,MAAM,eAAe,EAAE;AACxG,UAAM,UAAU,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,MAAM;AAGvE,gBAAY,SAAS;AAAA,sBACH,KAAK,OAAO,UAAU;AAAA,sBACtB,KAAK,cAAc,MAAM,kBAAkB,EAAE;AAAA;AAAA,oCAE/B,YAAY,KAAK,oBAAoB,IAAI,CAAC;AAAA,yCACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4EAkB+B,OAAO,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA,mEAKzC,OAAO,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qEAY9B,OAAO,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sEAYjC,OAAO,kBAAkB;AAAA;AAAA,kDAE7C,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAUvC,KAAK,cAAc,MAAM,YAAY;AAAA;AAAA;AAAA,mDAGhB,KAAK,cAAc,MAAM,YAAY;AAAA,8CAC1C,OAAO,cAAc;AAAA,8CACrB,OAAO,kBAAkB;AAAA;AAAA;AAAA;AAAA,sBAIjD,KAAK,cAAc,MAAM,iBAAiB,EAAE;AAAA,uBAC3C,OAAO,OAAO,KAAK,OAAO,KAAK;AAAA,MAChD,UAAU,OAAO,OAAO;AAAA,QACtB,eAAe,KAAK,cAAc,MAAM;AAAA,QACxC,QAAQ,KAAK,cAAc;AAAA,QAC3B,mBAAmB,OAAO;AAAA,QAC1B,KAAK;AAAA,QACL,GAAG,KAAK;AAAA;AAAA,MAEV,CAAW;AAAA,IACb,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,EACtB;AACF;",
+  "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": "AAAA,SAAS,mCAAmC;AAE5C,SAAS,cAAc;AAEvB,SAAuC,oBAA6C;AACpF,SAAS,mBAAmB;AAErB,MAAM,gBAAgB,4BAAoC;AAAA,EAC/D,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;AAE5D,UAAM,WAAW,OAAO,kBAAkB,KAAK,cAAc,SAAS,SAAS;AAC/E,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,QAAQ,aAAa,OAAO,2BAA2B;AAC/F,UAAM,mBAAmB,KAAK,cAAc,QAAQ,aAAa,OAAO,gCAAgC;AACxG,UAAM,wBAAwB,KAAK,cAAc,QAAQ,aAAa,OAAO,sCAAsC;AAGnH,gBAAY,OAAO,SAAS;AAAA,sBACV,KAAK,OAAO,UAAU;AAAA,sBACtB,KAAK,cAAc,MAAM,kBAAkB,EAAE;AAAA;AAAA,oCAE/B,YAAY,KAAK,oBAAoB,IAAI,CAAC;AAAA,yCACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAoBV,YAAY;AAAA,uHACwE,YAAY;AAAA;AAAA,mCAEhG,gBAAgB;AAAA,uHACoE,gBAAgB;AAAA;AAAA,mCAEpG,qBAAqB;AAAA,uHAC+D,qBAAqB;AAAA;AAAA;AAAA,mEAGzE,OAAO,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qEAY9B,OAAO,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAUpE,YAAY;AAAA,uEACwB,YAAY;AAAA;AAAA,mCAEhD,gBAAgB;AAAA,uEACoB,gBAAgB;AAAA;AAAA,mCAEpD,qBAAqB;AAAA,uEACe,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAW9D,KAAK,cAAc,MAAM,YAAY;AAAA;AAAA;AAAA,mDAGhB,KAAK,cAAc,MAAM,YAAY;AAAA,8CAC1C,OAAO,cAAc;AAAA,8CACrB,OAAO,kBAAkB;AAAA;AAAA;AAAA;AAAA,sBAIjD,KAAK,cAAc,MAAM,iBAAiB,EAAE;AAAA,uBAC3C,OAAO,OAAO,KAAK,OAAO,KAAK;AAAA,MAChD,UAAU,OAAO,OAAO;AAAA,QACtB,eAAe,KAAK,cAAc,MAAM;AAAA,QACxC,QAAQ,KAAK,cAAc;AAAA,QAC3B,mBAAmB,OAAO;AAAA,QAC1B,KAAK;AAAA,QACL,GAAG,KAAK;AAAA;AAAA,MAEV,CAAW;AAAA,IACb,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,EACtB;AACF;",
   "names": []
 }

package/dist/esm/operators/DrIf.js

@@ -1,5 +1,4 @@
 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/object/ObjectUtils";
@@ -12,7 +11,7 @@ class DrIf extends OperatorExecuterAttrRequire {
     const itRandom = RawSet.drItOtherEncoding(this.elementSource.element, "DrIf");
     const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? "");
     const newTemp = this.source.config.window.document.createElement("temp");
-    const keepgoing = ScriptUtils.evaluate(`
+    const keepgoing = ObjectUtils.Script.evaluate(`
                 ${this.render.bindScript}
                 ${this.elementSource.attrs.drBeforeOption ?? ""}
                 if ($rawSet.data === (${ObjectUtils.Path.toOptionalChainPath(attr)})) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/operators/DrIf.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 DrIf 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, 'DrIf');\n    const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');\n    const newTemp = this.source.config.window.document.createElement('temp');\n    // Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v)); <-- \uC774\uBD80\uBD84\uC740 \uB2E4\uB978 attr\uC5D0\uB3C4 \uC801\uC6A9\uC744 \uD560\uC9C0\uB9D0\uC9C0 \uC0DD\uAC01\uD574\uC57C\uB428  \uC5D8\uB9AC\uBA3C\uD2B8 \uC874\uC7AC\uC720\uBB34\uC5D0 \uB530\uB77C\uC11C \uC801\uC6A9\uC744 \uD560\uC9C0\uB9D0\uC9C0 \uACB0\uC815\uD574\uC57C\uB428\n    const keepgoing = ScriptUtils.evaluate(`\n                ${this.render.bindScript}\n                ${this.elementSource.attrs.drBeforeOption ?? ''}\n                if ($rawSet.data === (${ObjectUtils.Path.toOptionalChainPath(attr)})) {\n                    return false;\n                }\n                $rawSet.data = ${ObjectUtils.Path.toOptionalChainPath(attr)};\n                if($rawSet.data) {\n                    const n = $element.cloneNode(true);\n                    Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                    var destIt = ${this.elementSource.attrs.drItOption};\n                    if (destIt !== undefined) {\n                     // \uC5EC\uAE30\uAC00 ..\uC544\uC8FC \uD5DB\uAC08\uB9AC\uB294\uB370...\n                        Array.from(n.getAttributeNames()).forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\\\#DrIFIt\\\\#/g, destIt)))\n                        n.innerHTML = n.innerHTML.replace(/\\\\#DrIFIt\\\\#/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                return true;\n                `, Object.assign(this.source.obj,\n      {\n        __render: Object.freeze({\n          fag: newTemp,\n          drAttr: this.elementSource.attrs,\n          drAttrsOriginName: RawSet.drAttrsOriginName,\n          drStripOption: this.elementSource.attrs.drStripOption,\n          ...this.render\n        } as Render)\n      }\n    ));\n    // TODO: \uBB50\uC9C0?? \uC9C0\uC6CC\uC57C\uB418\uB294\uAC70 \uC544\uB2CC\uAC00?\n    if (keepgoing === false) {\n      return ExecuteState.STOP;\n    }\n    RawSet.drVarDecoding(newTemp, vars);\n    RawSet.drItOtherDecoding(newTemp, itRandom);\n    // const bypass = (newTemp.innerHTML ?? '').trim().length <= 0;\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,mCAAmC;AAC5C,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAEvB,SAAuC,oBAA6C;AACpF,SAAS,mBAAmB;AAErB,MAAM,aAAa,4BAAoC;AAAA,EAC5D,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,MAAM;AAC5E,UAAM,OAAO,OAAO,cAAc,KAAK,cAAc,SAAS,KAAK,cAAc,MAAM,eAAe,EAAE;AACxG,UAAM,UAAU,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,MAAM;AAEvE,UAAM,YAAY,YAAY,SAAS;AAAA,kBACzB,KAAK,OAAO,UAAU;AAAA,kBACtB,KAAK,cAAc,MAAM,kBAAkB,EAAE;AAAA,wCACvB,YAAY,KAAK,oBAAoB,IAAI,CAAC;AAAA;AAAA;AAAA,iCAGjD,YAAY,KAAK,oBAAoB,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,mCAIxC,KAAK,cAAc,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAYpD,KAAK,cAAc,MAAM,iBAAiB,EAAE;AAAA;AAAA,mBAE3C,OAAO;AAAA,MAAO,KAAK,OAAO;AAAA,MACvC;AAAA,QACE,UAAU,OAAO,OAAO;AAAA,UACtB,KAAK;AAAA,UACL,QAAQ,KAAK,cAAc;AAAA,UAC3B,mBAAmB,OAAO;AAAA,UAC1B,eAAe,KAAK,cAAc,MAAM;AAAA,UACxC,GAAG,KAAK;AAAA,QACV,CAAW;AAAA,MACb;AAAA,IACF,CAAC;AAED,QAAI,cAAc,OAAO;AACvB,aAAO,aAAa;AAAA,IACtB;AACA,WAAO,cAAc,SAAS,IAAI;AAClC,WAAO,kBAAkB,SAAS,QAAQ;AAE1C,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;",
+  "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 DrIf 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, 'DrIf');\n    const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');\n    const newTemp = this.source.config.window.document.createElement('temp');\n    // Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v)); <-- \uC774\uBD80\uBD84\uC740 \uB2E4\uB978 attr\uC5D0\uB3C4 \uC801\uC6A9\uC744 \uD560\uC9C0\uB9D0\uC9C0 \uC0DD\uAC01\uD574\uC57C\uB428  \uC5D8\uB9AC\uBA3C\uD2B8 \uC874\uC7AC\uC720\uBB34\uC5D0 \uB530\uB77C\uC11C \uC801\uC6A9\uC744 \uD560\uC9C0\uB9D0\uC9C0 \uACB0\uC815\uD574\uC57C\uB428\n    const keepgoing = ObjectUtils.Script.evaluate(`\n                ${this.render.bindScript}\n                ${this.elementSource.attrs.drBeforeOption ?? ''}\n                if ($rawSet.data === (${ObjectUtils.Path.toOptionalChainPath(attr)})) {\n                    return false;\n                }\n                $rawSet.data = ${ObjectUtils.Path.toOptionalChainPath(attr)};\n                if($rawSet.data) {\n                    const n = $element.cloneNode(true);\n                    Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));\n                    var destIt = ${this.elementSource.attrs.drItOption};\n                    if (destIt !== undefined) {\n                     // \uC5EC\uAE30\uAC00 ..\uC544\uC8FC \uD5DB\uAC08\uB9AC\uB294\uB370...\n                        Array.from(n.getAttributeNames()).forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\\\#DrIFIt\\\\#/g, destIt)))\n                        n.innerHTML = n.innerHTML.replace(/\\\\#DrIFIt\\\\#/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                return true;\n                `, Object.assign(this.source.obj,\n      {\n        __render: Object.freeze({\n          fag: newTemp,\n          drAttr: this.elementSource.attrs,\n          drAttrsOriginName: RawSet.drAttrsOriginName,\n          drStripOption: this.elementSource.attrs.drStripOption,\n          ...this.render\n        } as Render)\n      }\n    ));\n    // TODO: \uBB50\uC9C0?? \uC9C0\uC6CC\uC57C\uB418\uB294\uAC70 \uC544\uB2CC\uAC00?\n    if (keepgoing === false) {\n      return ExecuteState.STOP;\n    }\n    RawSet.drVarDecoding(newTemp, vars);\n    RawSet.drItOtherDecoding(newTemp, itRandom);\n    // const bypass = (newTemp.innerHTML ?? '').trim().length <= 0;\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,mCAAmC;AAE5C,SAAS,cAAc;AAEvB,SAAuC,oBAA6C;AACpF,SAAS,mBAAmB;AAErB,MAAM,aAAa,4BAAoC;AAAA,EAC5D,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,MAAM;AAC5E,UAAM,OAAO,OAAO,cAAc,KAAK,cAAc,SAAS,KAAK,cAAc,MAAM,eAAe,EAAE;AACxG,UAAM,UAAU,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,MAAM;AAEvE,UAAM,YAAY,YAAY,OAAO,SAAS;AAAA,kBAChC,KAAK,OAAO,UAAU;AAAA,kBACtB,KAAK,cAAc,MAAM,kBAAkB,EAAE;AAAA,wCACvB,YAAY,KAAK,oBAAoB,IAAI,CAAC;AAAA;AAAA;AAAA,iCAGjD,YAAY,KAAK,oBAAoB,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,mCAIxC,KAAK,cAAc,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAYpD,KAAK,cAAc,MAAM,iBAAiB,EAAE;AAAA;AAAA,mBAE3C,OAAO;AAAA,MAAO,KAAK,OAAO;AAAA,MACvC;AAAA,QACE,UAAU,OAAO,OAAO;AAAA,UACtB,KAAK;AAAA,UACL,QAAQ,KAAK,cAAc;AAAA,UAC3B,mBAAmB,OAAO;AAAA,UAC1B,eAAe,KAAK,cAAc,MAAM;AAAA,UACxC,GAAG,KAAK;AAAA,QACV,CAAW;AAAA,MACb;AAAA,IACF,CAAC;AAED,QAAI,cAAc,OAAO;AACvB,aAAO,aAAa;AAAA,IACtB;AACA,WAAO,cAAc,SAAS,IAAI;AAClC,WAAO,kBAAkB,SAAS,QAAQ;AAE1C,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/DrInnerText.js

@@ -1,14 +1,14 @@
 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/object/ObjectUtils";
 class DrInnerText extends OperatorExecuterAttrRequire {
   constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
     super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
   }
   async executeAttrRequire(attr) {
     const newTemp = this.source.config.window.document.createElement("temp");
-    ScriptUtils.evaluate(` 
+    ObjectUtils.Script.evaluate(` 
                         ${this.render.bindScript}
                         const n = $element.cloneNode(true);  
                         ${this.elementSource.attrs.drBeforeOption ?? ""}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/operators/DrInnerText.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 DrInnerText extends OperatorExecuterAttrRequire<string> {\n    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {\n        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);\n    }\n\n    async executeAttrRequire(attr: string): Promise<ExecuteState> {\n        const newTemp = this.source.config.window.document.createElement('temp');\n        ScriptUtils.evaluate(` \n                        ${this.render.bindScript}\n                        const n = $element.cloneNode(true);  \n                        ${this.elementSource.attrs.drBeforeOption ?? ''}\n                        n.innerText = ${attr};\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                        ${this.elementSource.attrs.drAfterOption ?? ''}\n                    `, Object.assign(this.source.obj, {\n            __render: Object.freeze({\n                drStripOption: this.elementSource.attrs.drStripOption,\n                fag: newTemp,\n                ...this.render\n            } as Render)\n        }));\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,SAAQ,mCAAkC;AAC1C,SAAQ,mBAAkB;AAC1B,SAAQ,cAAa;AAErB,SAAsC,oBAA4C;AAE3E,MAAM,oBAAoB,4BAAoC;AAAA,EACjE,YAAY,QAAgB,QAAgB,iBAAkC,eAA8B,QAAgB,eAA8B;AACtJ,UAAM,QAAQ,QAAQ,iBAAiB,eAAe,QAAQ,eAAe,KAAK;AAAA,EACtF;AAAA,EAEA,MAAM,mBAAmB,MAAqC;AAC1D,UAAM,UAAU,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,MAAM;AACvE,gBAAY,SAAS;AAAA,0BACH,KAAK,OAAO,UAAU;AAAA;AAAA,0BAEtB,KAAK,cAAc,MAAM,kBAAkB,EAAE;AAAA,wCAC/B,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMlB,KAAK,cAAc,MAAM,iBAAiB,EAAE;AAAA,uBAC/C,OAAO,OAAO,KAAK,OAAO,KAAK;AAAA,MAC1C,UAAU,OAAO,OAAO;AAAA,QACpB,eAAe,KAAK,cAAc,MAAM;AAAA,QACxC,KAAK;AAAA,QACL,GAAG,KAAK;AAAA,MACZ,CAAW;AAAA,IACf,CAAC,CAAC;AACF,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 {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 DrInnerText extends OperatorExecuterAttrRequire<string> {\n    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {\n        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);\n    }\n\n    async executeAttrRequire(attr: string): Promise<ExecuteState> {\n        const newTemp = this.source.config.window.document.createElement('temp');\n        ObjectUtils.Script.evaluate(` \n                        ${this.render.bindScript}\n                        const n = $element.cloneNode(true);  \n                        ${this.elementSource.attrs.drBeforeOption ?? ''}\n                        n.innerText = ${attr};\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                        ${this.elementSource.attrs.drAfterOption ?? ''}\n                    `, Object.assign(this.source.obj, {\n            __render: Object.freeze({\n                drStripOption: this.elementSource.attrs.drStripOption,\n                fag: newTemp,\n                ...this.render\n            } as Render)\n        }));\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,SAAQ,mCAAkC;AAE1C,SAAQ,cAAa;AAErB,SAAsC,oBAA4C;AAClF,SAAQ,mBAAkB;AAEnB,MAAM,oBAAoB,4BAAoC;AAAA,EACjE,YAAY,QAAgB,QAAgB,iBAAkC,eAA8B,QAAgB,eAA8B;AACtJ,UAAM,QAAQ,QAAQ,iBAAiB,eAAe,QAAQ,eAAe,KAAK;AAAA,EACtF;AAAA,EAEA,MAAM,mBAAmB,MAAqC;AAC1D,UAAM,UAAU,KAAK,OAAO,OAAO,OAAO,SAAS,cAAc,MAAM;AACvE,gBAAY,OAAO,SAAS;AAAA,0BACV,KAAK,OAAO,UAAU;AAAA;AAAA,0BAEtB,KAAK,cAAc,MAAM,kBAAkB,EAAE;AAAA,wCAC/B,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMlB,KAAK,cAAc,MAAM,iBAAiB,EAAE;AAAA,uBAC/C,OAAO,OAAO,KAAK,OAAO,KAAK;AAAA,MAC1C,UAAU,OAAO,OAAO;AAAA,QACpB,eAAe,KAAK,cAAc,MAAM;AAAA,QACxC,KAAK;AAAA,QACL,GAAG,KAAK;AAAA,MACZ,CAAW;AAAA,IACf,CAAC,CAAC;AACF,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/rawsets/RawSet.js

@@ -32,6 +32,7 @@ import { isOnDestroyRender } from "../lifecycle/OnDestroyRender.js";
 import { DrTargetElementIsElement } from "../operators/DrTargetElementIsElement.js";
 import { ObjectUtils } from "@dooboostore/core/object/ObjectUtils";
 import { NodeUtils } from "@dooboostore/core-web/node/NodeUtils";
+import { ConvertUtils } from "@dooboostore/core/convert/ConvertUtils";
 const _RawSet = class _RawSet {
   constructor(uuid, type, point, dataSet, detect) {
     this.uuid = uuid;
@@ -102,7 +103,8 @@ const _RawSet = class _RawSet {
         const targetAttrMap = element.getAttribute(EventManager.normalAttrMapAttrName);
         if (targetAttrMap) {
           new Map(JSON.parse(targetAttrMap)).forEach((v, k) => {
-            targetScripts.push(`(${v})`);
+            const variablePaths = v.variablePaths;
+            variablePaths.forEach((it) => targetScripts.push(`(${it.inner})`));
           });
         }
         script = targetScripts.join(";");
@@ -163,12 +165,18 @@ const _RawSet = class _RawSet {
         const runText = _RawSet.expressionGroups(textContent)[0][1];
         let newNode;
         if (textContent?.startsWith("#")) {
-          const r = ObjectUtils.Script.evaluate(`${__render.bindScript} return ${runText}`, Object.assign(obj, { __render }));
+          const r = ObjectUtils.Script.evaluate(
+            `${__render.bindScript} return ${runText}`,
+            Object.assign(obj, { __render })
+          );
           const template = config.window.document.createElement("template");
           template.innerHTML = r;
           newNode = template.content;
         } else {
-          const r = ObjectUtils.Script.evaluate(`${__render.bindScript}  return ${runText}`, Object.assign(obj, { __render }));
+          const r = ObjectUtils.Script.evaluate(
+            `${__render.bindScript}  return ${runText}`,
+            Object.assign(obj, { __render })
+          );
           newNode = config.window.document.createTextNode(r);
         }
         cNode.parentNode?.replaceChild(newNode, cNode);
@@ -207,23 +215,140 @@ const _RawSet = class _RawSet {
         };
         drAttrs.push(drAttr);
         const operators = [
-          new DrPre(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_PRE_NAME, attr: drAttr.drPre, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drPre }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new Dr(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_NAME, attr: drAttr.dr, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.dr }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new DrPre(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_PRE_NAME, attr: drAttr.drPre, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drPre },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new Dr(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_NAME, attr: drAttr.dr, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.dr },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
           // new Dr(this, __render, {raws, fag}, {element, attrName: EventManager.onRenderedInitAttrName, attr: drAttr.dr, attrs: drAttr}, {config, obj, operatorAround: config.operatorAround?.dr}, {onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks}),
-          new DrIf(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_IF_NAME, attr: drAttr.drIf, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drIf }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrStripElement(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_STRIP_NAME, attr: drAttr.drStripElement, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drThis }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrThis(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_THIS_NAME, attr: drAttr.drThis, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drThis }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrForm(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_FOR_NAME, attr: drAttr.drForm, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drForm }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrInnerText(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_INNERTEXT_NAME, attr: drAttr.drInnerText, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drInnerText }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrInnerHTML(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_INNERHTML_NAME, attr: drAttr.drInnerHTML, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drInnerHTML }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrFor(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_FOR_NAME, attr: drAttr.drFor, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drFor }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrForOf(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_FOR_OF_NAME, attr: drAttr.drForOf, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drForOf }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrThisProperty(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_THIS_PROPERTY_NAME, attr: drAttr.drThisProperty, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drThisProperty }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrAppender(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drAppender }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrRepeat(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drRepeat }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrTargetElementIsElement(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME, attr: drAttr.drReplaceTargetElementIs, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrTargetElement(this, __render, { raws, fag }, { element, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrTargetAttr(this, __render, { raws, fag }, { element, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks })
+          new DrIf(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_IF_NAME, attr: drAttr.drIf, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drIf },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrStripElement(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_STRIP_NAME, attr: drAttr.drStripElement, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drThis },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrThis(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_THIS_NAME, attr: drAttr.drThis, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drThis },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrForm(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_FOR_NAME, attr: drAttr.drForm, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drForm },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrInnerText(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_INNERTEXT_NAME, attr: drAttr.drInnerText, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drInnerText },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrInnerHTML(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_INNERHTML_NAME, attr: drAttr.drInnerHTML, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drInnerHTML },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrFor(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_FOR_NAME, attr: drAttr.drFor, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drFor },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrForOf(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_FOR_OF_NAME, attr: drAttr.drForOf, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drForOf },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrThisProperty(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_THIS_PROPERTY_NAME, attr: drAttr.drThisProperty, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drThisProperty },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrAppender(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drAppender },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrRepeat(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drRepeat },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrTargetElementIsElement(
+            this,
+            __render,
+            { raws, fag },
+            {
+              element,
+              attrName: _RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME,
+              attr: drAttr.drReplaceTargetElementIs,
+              attrs: drAttr
+            },
+            { config, obj },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrTargetElement(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrs: drAttr },
+            { config, obj },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrTargetAttr(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrs: drAttr },
+            { config, obj },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          )
         ];
         for (const operator of operators) {
           const state = await operator.start();
@@ -263,12 +388,12 @@ const _RawSet = class _RawSet {
     });
     for (const it of onThisComponentSetCallBacks) {
       if (isOnInitRender(it.obj)) {
-        it.obj?.onInitRender?.({}, this);
+        await it.obj?.onInitRender?.({}, this);
       }
     }
     for (const it of onElementInitCallBacks) {
       if (isOnInitRender(this.dataSet.render?.currentThis)) {
-        this.dataSet.render.currentThis.onInitRender({}, this);
+        await this.dataSet.render.currentThis.onInitRender({}, this);
       }
       config?.onElementInit?.(it.name, obj, this, it.targetElement);
     }
@@ -370,7 +495,10 @@ const _RawSet = class _RawSet {
   getDrAppendAttributeAndDelete(element, obj) {
     let data = element.getAttribute(_RawSet.DR_APPENDER_NAME);
     if (data && !/\[.+\]/g.test(data)) {
-      const currentIndex = ObjectUtils.Script.evaluateReturn(`${ObjectUtils.Path.toOptionalChainPath(data)}?.length -1`, obj);
+      const currentIndex = ObjectUtils.Script.evaluateReturn(
+        `${ObjectUtils.Path.toOptionalChainPath(data)}?.length -1`,
+        obj
+      );
       data = `${data}[${currentIndex}]`;
       element.setAttribute(_RawSet.DR_APPENDER_NAME, data);
     }
@@ -416,22 +544,28 @@ const _RawSet = class _RawSet {
           const normalAttrs = /* @__PURE__ */ new Map();
           const linkVariables = /* @__PURE__ */ new Map();
           const linkNames = EventManager.linkAttrs.map((it) => it.name);
-          const isAttr = element2.getAttributeNames().filter((it) => {
+          const isAttr = element2.getAttributeNames().filter((it) => !EventManager.noDetectAttr.includes(it)).filter((it) => {
             const value = element2.getAttribute(it);
             if (value && linkNames.includes(it)) {
               linkVariables.set(it, value);
             } else if (value && _RawSet.isExpression(value)) {
-              let variablePath = _RawSet.expressionGroups(value)[0][1];
-              const originVariable = variablePath;
-              variablePath = variablePath.replace(/#[^#]*#/g, "({})");
-              const optionalChainPath = ObjectUtils.Path.toOptionalChainPath(variablePath);
-              const cval = ObjectUtils.Script.evaluateReturn(optionalChainPath, Object.assign(obj));
+              const variablePaths = _RawSet.expressionGroups(value).map((it2) => ({
+                origin: it2[0],
+                inner: it2[1]
+              }));
+              let targetScript = value;
+              variablePaths.forEach((it2) => {
+                let r3 = it2.inner.replace(/#[^#]*#/g, "({})");
+                r3 = ObjectUtils.Path.toOptionalChainPath(r3);
+                targetScript = targetScript.replaceAll(it2.origin, `\${${r3}}`);
+              });
+              const cval = ObjectUtils.Script.evaluateReturn("`" + targetScript + "`", Object.assign(obj));
               if (cval === null) {
                 element2.removeAttribute(it);
               } else {
                 element2.setAttribute(it, cval);
               }
-              normalAttrs.set(it, originVariable);
+              normalAttrs.set(it, { originalAttrValue: value, variablePaths });
             }
             const isTargetAttr = targetAttrNames.includes(it.toLowerCase());
             return isTargetAttr;
@@ -845,11 +979,33 @@ const _RawSet = class _RawSet {
     targetElement.querySelectorAll(EventManager.attrNames.map((it) => `[${it}]`).join(",")).forEach((it) => {
       it.setAttribute(EventManager.ownerVariablePathAttrName, "this");
     });
-    const componentNameReplaceKey = RandomUtils.uuid();
     rawSet.point.innerHTML = element.innerHTML;
-    const innerHTMLName = targetElement.getAttribute(_RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME) ?? "innerHTML";
+    const innerText = element.textContent?.trim() ?? "";
+    const escapedInnerHTML = ConvertUtils.escapeHTML(element.innerHTML);
+    const innerHTMLName = targetElement.getAttribute(_RawSet.DR_INNER_HTML_NAME_OPTIONNAME) ?? "innerHTML";
+    const innerTEXTName = targetElement.getAttribute(_RawSet.DR_INNER_TEXT_NAME_OPTIONNAME) ?? "innerTEXT";
+    const innerHTMLEscapedName = targetElement.getAttribute(_RawSet.DR_INNER_HTML_ESCAPED_NAME_OPTIONNAME) ?? "innerHTMLEscaped";
+    const templateReplacements = [];
     if (innerHTMLName) {
-      _RawSet.replaceInnerHTML(targetElement, { asIs: `#${innerHTMLName}#`, toBe: element.innerHTML });
+      templateReplacements.push({
+        regex: new RegExp(`#${innerHTMLName}#`, "g"),
+        callback: () => element.innerHTML
+      });
+    }
+    if (innerTEXTName) {
+      templateReplacements.push({
+        regex: new RegExp(`#${innerTEXTName}#`, "g"),
+        callback: () => innerText
+      });
+    }
+    if (innerHTMLEscapedName) {
+      templateReplacements.push({
+        regex: new RegExp(`#${innerHTMLEscapedName}#`, "g"),
+        callback: () => escapedInnerHTML
+      });
+    }
+    if (templateReplacements.length > 0) {
+      targetElement.innerHTML = StringUtils.replaceSequentially(targetElement.innerHTML, templateReplacements);
     }
     const optionThisName = targetElement.getAttribute(_RawSet.DR_THIS_NAME_OPTIONNAME);
     targetElement.getAttributeNames().forEach((it) => targetElement.setAttribute(it, targetElement.getAttribute(it).replace(/#this#/g, drThis)));
@@ -926,7 +1082,6 @@ const _RawSet = class _RawSet {
         obj.__domrender_components ?? (obj.__domrender_components = {});
         const domrenderComponents = obj.__domrender_components;
         const renderScript = ` /*createComponentTargetElement*/
-            // console.log('-------------------',this.__render);
             var ${EventManager.RAWSET_VARNAME} = this.__render.rawSet; 
             var ${EventManager.COMPONENT_VARNAME} = this.__render.component; 
             var ${EventManager.ELEMENT_VARNAME} = this.__render.element; 
@@ -981,15 +1136,40 @@ const _RawSet = class _RawSet {
         rawSet.dataSet.render = render;
         instance.__rawSet = rawSet;
         let applayTemplate = element.innerHTML;
+        let applayTemplateText = element.textContent?.trim() ?? "";
+        let applayTemplateEscape = ConvertUtils.escapeHTML(element.innerHTML);
         let innerHTMLThisRandom;
-        const componentName = element.getAttribute(_RawSet.DR_COMPONENT_NAME_OPTIONNAME) ?? "component";
-        const innerHTMLName = element.getAttribute(_RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME) ?? "innerHTML";
+        const componentName = element.getAttribute(_RawSet.DR_VARIABLE_NAME_OPTIONNAME) ?? "component";
+        const innerHTMLName = element.getAttribute(_RawSet.DR_INNER_HTML_NAME_OPTIONNAME) ?? "innerHTML";
+        const innerTEXTName = element.getAttribute(_RawSet.DR_INNER_TEXT_NAME_OPTIONNAME) ?? "innerTEXT";
+        const innerHTMLEscapedName = element.getAttribute(_RawSet.DR_INNER_HTML_ESCAPED_NAME_OPTIONNAME) ?? "innerHTMLEscaped";
         if (applayTemplate) {
           innerHTMLThisRandom = RandomUtils.uuid();
-          applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
-          applayTemplate = applayTemplate.replace(RegExp(`#${componentName}#`, "g"), "this");
+          applayTemplate = StringUtils.replaceSequentially(applayTemplate, [
+            {
+              regex: /this\./g,
+              callback: () => innerHTMLThisRandom
+            },
+            {
+              regex: new RegExp(`#${componentName}#`, "g"),
+              callback: () => nearThisPath
+            }
+          ]);
         }
-        applayTemplate = (this.template ?? "").replace(RegExp(`#${innerHTMLName}#`, "g"), applayTemplate);
+        applayTemplate = StringUtils.replaceSequentially(this.template ?? "", [
+          {
+            regex: new RegExp(`#${innerHTMLName}#`, "g"),
+            callback: () => applayTemplate
+          },
+          {
+            regex: new RegExp(`#${innerTEXTName}#`, "g"),
+            callback: () => applayTemplateText
+          },
+          {
+            regex: new RegExp(`#${innerHTMLEscapedName}#`, "g"),
+            callback: () => applayTemplateEscape
+          }
+        ]);
         const style = _RawSet.generateStyleTransform(this.styles, rawSet.uuid, true);
         element.innerHTML = style + (applayTemplate ?? "");
         let data = await _RawSet.drThisCreate(
@@ -1003,8 +1183,8 @@ const _RawSet = class _RawSet {
         );
         if (data && innerHTMLThisRandom) {
           const template2 = config.window.document.createElement("template");
-          template2.content.append(data);
-          template2.innerHTML = template2.innerHTML.replace(RegExp(innerHTMLThisRandom, "g"), "this.");
+          template2.innerHTML = ElementUtils.toInnerHTML(data, { document: config.window.document }).replace(RegExp(innerHTMLThisRandom, "g"), "this.");
+          ;
           data = template2.content;
         }
         return data;
@@ -1041,8 +1221,24 @@ const _RawSet = class _RawSet {
     const normalAttribute = attribute[EventManager.normalAttrMapAttrName];
     if (normalAttribute) {
       new Map(JSON.parse(normalAttribute)).forEach((v, k) => {
+        const variablePaths = v.variablePaths;
+        let targetScript = v.originalAttrValue.trim();
+        let checktargetScript = v.originalAttrValue.trim();
+        variablePaths.forEach((it) => {
+          checktargetScript = targetScript.replaceAll(it.origin, "");
+        });
+        let isScriptValue = checktargetScript.length === 0 && variablePaths.length === 1;
+        if (isScriptValue) {
+          let r = ObjectUtils.Path.toOptionalChainPath(variablePaths[0].inner);
+          targetScript = targetScript.replaceAll(variablePaths[0].origin, r);
+        } else {
+          variablePaths.forEach((it) => {
+            let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
+            targetScript = targetScript.replaceAll(it.origin, `\${${r}}`);
+          });
+        }
         const cval = ObjectUtils.Script.evaluateReturn(
-          { bodyScript: config.script, returnScript: v },
+          { bodyScript: config.script, returnScript: isScriptValue ? targetScript : "`" + targetScript + "`" },
           Object.assign(config.obj, config.renderData ? { __render: config.renderData } : void 0)
         );
         attribute[k] = cval;
@@ -1085,11 +1281,12 @@ _RawSet.DR_COMPLETE_OPTIONNAME = "dr-option-complete";
 _RawSet.DR_STRIP_OPTIONNAME = "dr-option-strip";
 _RawSet.DR_DESTROY_OPTIONNAME = "dr-option-destroy";
 _RawSet.DR_THIS_NAME_OPTIONNAME = "dr-option-this-name";
-/**
- * @deprecated
- */
-_RawSet.DR_COMPONENT_NAME_OPTIONNAME = "dr-option-component-name";
-_RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME = "dr-option-component-inner-html-name";
+_RawSet.DR_VARIABLE_NAME_OPTIONNAME = "dr-option-variable-name";
+_RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME = "dr-option-item-variable-name";
+_RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME = "dr-option-item-index-variable-name";
+_RawSet.DR_INNER_HTML_NAME_OPTIONNAME = "dr-option-inner-html-name";
+_RawSet.DR_INNER_TEXT_NAME_OPTIONNAME = "dr-option-inner-text-name";
+_RawSet.DR_INNER_HTML_ESCAPED_NAME_OPTIONNAME = "dr-option-inner-html-escaped-name";
 _RawSet.DR_KEY_OPTIONNAME = "dr-option-key";
 _RawSet.DR_HAS_KEYS_OPTIONNAME = "dr-option-has-keys";
 _RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME = "dr-on-create:arguments";