@dooboostore/dom-render 1.0.111 → 1.0.112

package/dist/cjs/operators/DrThisProperty.js

@@ -24,6 +24,7 @@ var import_OperatorExecuterAttrRequire = require("./OperatorExecuterAttrRequire"
 var import_ScriptUtils = require("@dooboostore/core-web/script/ScriptUtils");
 var import_RawSet = require("../rawsets/RawSet");
 var import_OperatorExecuter = require("./OperatorExecuter");
+var import_ObjectUtils = require("@dooboostore/core/object/ObjectUtils");
 class DrThisProperty extends import_OperatorExecuterAttrRequire.OperatorExecuterAttrRequire {
   constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
     source.operatorAround = void 0;
@@ -35,7 +36,7 @@ class DrThisProperty extends import_OperatorExecuterAttrRequire.OperatorExecuter
     const newTemp = this.source.config.window.document.createElement("temp");
     const dictioanry = import_ScriptUtils.ScriptUtils.evaluateReturn(attr, this.source.obj);
     const dictionaryKey = this.elementSource.attrs.drKeyOption ?? "";
-    import_ScriptUtils.ScriptUtils.evaluate(`
+    import_ObjectUtils.ObjectUtils.Script.evaluate(`
                     ${this.render.bindScript}
                     ${this.elementSource.attrs.drBeforeOption ?? ""}
                     var i = 0; 

package/dist/cjs/operators/DrThisProperty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/operators/DrThisProperty.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 {DomRenderConfig} from '../configs/DomRenderConfig';\n\nexport class DrThisProperty 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, 'DrThisProperty');\n        const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');\n        const newTemp = this.source.config.window.document.createElement('temp');\n        const dictioanry = ScriptUtils.evaluateReturn(attr, this.source.obj)\n        const dictionaryKey = this.elementSource.attrs.drKeyOption ?? '';\n        // console.log('--->', attr, dictionaryKey)\n        // if (!(dictioanry instanceof Dictionary)) {\n        //     return ExecuteState.STOP;\n        // }\n        // await new Promise(resolve => setTimeout(resolve, 1000));\n        // console.log('!!!!!!!!!!!!!!', this.rawSet);\n        ScriptUtils.evaluate(`\n                    ${this.render.bindScript}\n                    ${this.elementSource.attrs.drBeforeOption ?? ''}\n                    var i = 0; \n                    const dictionary = ${attr};\n                    const dictionaryKey = '${dictionaryKey}';\n                    const dictionaryStr = \\`${attr}\\`.trim();\n                    // console.log('----@#!@#@!#', this.__render.oldChild);\n                    if (dictionary) {\n                        for(const it in dictionary) {\n                            var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            const n = this.__render.element.cloneNode(true);\n                            n.setAttribute('dr-this', destIt);\n                            n.setAttribute('${RawSet.DR_KEY_OPTIONNAME}', it);\n                            // n.setAttribute('dr-dictionary-key', it);\n                            this.__render.fag.append(n);\n                            i++;\n                        }\n                         this.__render.rawset.point.start.setAttribute('${RawSet.DR_HAS_KEYS_OPTIONNAME}',Object.keys(dictionary).join(','));\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            } 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\n    public static append(obj: any, fullPath: string, key: string, rawSet: RawSet, config: DomRenderConfig) {\n        const genNode = config.window.document.importNode(rawSet.dataSet.fragment, true);\n        // console.log('---> append', rawSet, genNode);\n        const rawSets: RawSet[] = [];\n        for (const cNode of Array.from(genNode.childNodes.values())) {\n            const element = cNode.cloneNode(true) as Element;\n            element.removeAttribute(RawSet.DR_THIS_PROPERTY_NAME);\n            element.setAttribute(RawSet.DR_THIS_NAME, `this.${fullPath}`);\n            element.setAttribute(RawSet.DR_KEY_OPTIONNAME, key);\n            // rawSet.point.end.after(element);\n            const fg = config.window.document.createDocumentFragment()\n            fg.append(element);\n            rawSets.push(...RawSet.checkPointCreates(fg, obj, config));\n            rawSet.point.end.before(fg);\n            const start = (rawSet.point.start as Element);\n            const keys = start.getAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME)?.split(',') ?? [];\n            keys.push(key);\n            start.setAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME, keys.join(','));\n            rawSets.forEach(async (it) => await it.render(obj, config));\n        }\n        return rawSets;\n    }\n}\n"],
-  "mappings": "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",
+  "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 {DomRenderConfig} from '../configs/DomRenderConfig';\nimport {ObjectUtils} from \"@dooboostore/core/object/ObjectUtils\";\n\nexport class DrThisProperty 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, 'DrThisProperty');\n        const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');\n        const newTemp = this.source.config.window.document.createElement('temp');\n        const dictioanry = ScriptUtils.evaluateReturn(attr, this.source.obj)\n        const dictionaryKey = this.elementSource.attrs.drKeyOption ?? '';\n        // console.log('--->', attr, dictionaryKey)\n        // if (!(dictioanry instanceof Dictionary)) {\n        //     return ExecuteState.STOP;\n        // }\n        // await new Promise(resolve => setTimeout(resolve, 1000));\n        // console.log('!!!!!!!!!!!!!!', this.rawSet);\n      ObjectUtils.Script.evaluate(`\n                    ${this.render.bindScript}\n                    ${this.elementSource.attrs.drBeforeOption ?? ''}\n                    var i = 0; \n                    const dictionary = ${attr};\n                    const dictionaryKey = '${dictionaryKey}';\n                    const dictionaryStr = \\`${attr}\\`.trim();\n                    // console.log('----@#!@#@!#', this.__render.oldChild);\n                    if (dictionary) {\n                        for(const it in dictionary) {\n                            var destIt = dictionaryStr + '[\"' + it + '\"]';\n                            const n = this.__render.element.cloneNode(true);\n                            n.setAttribute('dr-this', destIt);\n                            n.setAttribute('${RawSet.DR_KEY_OPTIONNAME}', it);\n                            // n.setAttribute('dr-dictionary-key', it);\n                            this.__render.fag.append(n);\n                            i++;\n                        }\n                         this.__render.rawset.point.start.setAttribute('${RawSet.DR_HAS_KEYS_OPTIONNAME}',Object.keys(dictionary).join(','));\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            } 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\n    public static append(obj: any, fullPath: string, key: string, rawSet: RawSet, config: DomRenderConfig) {\n        const genNode = config.window.document.importNode(rawSet.dataSet.fragment, true);\n        // console.log('---> append', rawSet, genNode);\n        const rawSets: RawSet[] = [];\n        for (const cNode of Array.from(genNode.childNodes.values())) {\n            const element = cNode.cloneNode(true) as Element;\n            element.removeAttribute(RawSet.DR_THIS_PROPERTY_NAME);\n            element.setAttribute(RawSet.DR_THIS_NAME, `this.${fullPath}`);\n            element.setAttribute(RawSet.DR_KEY_OPTIONNAME, key);\n            // rawSet.point.end.after(element);\n            const fg = config.window.document.createDocumentFragment()\n            fg.append(element);\n            rawSets.push(...RawSet.checkPointCreates(fg, obj, config));\n            rawSet.point.end.before(fg);\n            const start = (rawSet.point.start as Element);\n            const keys = start.getAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME)?.split(',') ?? [];\n            keys.push(key);\n            start.setAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME, keys.join(','));\n            rawSets.forEach(async (it) => await it.render(obj, config));\n        }\n        return rawSets;\n    }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/rawsets/RawSet.js

@@ -141,10 +141,49 @@ const _RawSet = class _RawSet {
     });
     return usingTriggerVariables;
   }
-  // 중요 render 처리 부분
-  // public async render(obj: any, config: DomRenderConfig): Promise<RawSet[]> {
-  // }
   async render(obj, config) {
+    if (this.dataSet.fragment.childNodes.length === 1 && this.dataSet.fragment.childNodes[0].nodeType === Node.TEXT_NODE) {
+      const textContent = this.dataSet.fragment.childNodes[0].textContent;
+      if (textContent) {
+        const runText = _RawSet.expressionGroups(textContent)[0][1];
+        const __render = {
+          rawSet: this,
+          scripts: import_EventManager.EventManager.setBindProperty(config?.scripts, obj),
+          router: config?.router,
+          range: import_Range.Range.range,
+          element: this.dataSet.fragment.childNodes[0],
+          attribute: {},
+          rootObject: obj,
+          scriptUtils: import_ObjectUtils.ObjectUtils.Script,
+          nearThis: this.findNearThis(obj),
+          parentThis: this.findParentThis(obj),
+          bindScript: ` /** render **/
+                      const ${import_EventManager.EventManager.SCRIPTS_VARNAME} = this.__render.scripts;
+                      const ${import_EventManager.EventManager.RAWSET_VARNAME} = this.__render.rawSet;
+                      const ${import_EventManager.EventManager.ELEMENT_VARNAME} = this.__render.element;
+                      const ${import_EventManager.EventManager.ATTRIBUTE_VARNAME} = this.__render.attribute;
+                      const ${import_EventManager.EventManager.RANGE_VARNAME} = this.__render.range;
+                      const ${import_EventManager.EventManager.ROUTER_VARNAME} = this.__render.router;
+                      const ${import_EventManager.EventManager.NEAR_THIS_VARNAME} = this.__render.nearThis;
+                      const ${import_EventManager.EventManager.PARENT_THIS_VARNAME} = this.__render.parentThis;
+                      const ${import_EventManager.EventManager.SCRIPT_UTILS_VARNAME} = this.__render.scriptUtils;
+                      const ${import_EventManager.EventManager.ROOT_OBJECT_VARNAME} = this.__render.rootObject;
+              `
+        };
+        try {
+          const newValue = import_ObjectUtils.ObjectUtils.Script.evaluateReturn({
+            bodyScript: __render.bindScript,
+            returnScript: runText
+          }, Object.assign(obj, { __render }));
+          const newValueStr = String(newValue);
+          if (this.lastRenderedValue === newValueStr) {
+            return { raws: [], executedOperators: [] };
+          }
+          this.lastRenderedValue = newValueStr;
+        } catch (e) {
+        }
+      }
+    }
     const genNode = config.window.document.importNode(this.dataSet.fragment, true);
     const raws = [];
     const onAttrInitCallBacks = [];
@@ -187,18 +226,15 @@ const _RawSet = class _RawSet {
         const runText = _RawSet.expressionGroups(textContent)[0][1];
         let newNode;
         if (textContent?.startsWith("#")) {
-          const r = import_ObjectUtils.ObjectUtils.Script.evaluate(
-            `${__render.bindScript} return ${runText}`,
+          const r = import_ObjectUtils.ObjectUtils.Script.evaluateReturn(
+            { bodyScript: __render.bindScript, returnScript: runText },
             Object.assign(obj, { __render })
           );
           const template = config.window.document.createElement("template");
           template.innerHTML = r;
           newNode = template.content;
         } else {
-          const r = import_ObjectUtils.ObjectUtils.Script.evaluate(
-            `${__render.bindScript}  return ${runText}`,
-            Object.assign(obj, { __render })
-          );
+          const r = import_ObjectUtils.ObjectUtils.Script.evaluateReturn({ bodyScript: __render.bindScript, returnScript: runText }, Object.assign(obj, { __render }));
           newNode = config.window.document.createTextNode(r);
         }
         cNode.parentNode?.replaceChild(newNode, cNode);
@@ -237,140 +273,23 @@ const _RawSet = class _RawSet {
         };
         drAttrs.push(drAttr);
         const operators = [
-          new import_DrPre.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 import_Dr.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 import_DrPre.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 import_Dr.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 import_DrIf.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 import_DrStripElement.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 import_DrThis.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 import_DrForm.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 import_DrInnerText.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 import_DrInnerHTML.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 import_DrFor.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 import_DrForOf.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 import_DrThisProperty.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 import_DrAppender.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 import_DrRepeat.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 import_DrTargetElementIsElement.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 import_DrTargetElement.DrTargetElement(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrs: drAttr },
-            { config, obj },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrTargetAttr.DrTargetAttr(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrs: drAttr },
-            { config, obj },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          )
+          new import_DrIf.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 import_DrStripElement.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 import_DrThis.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 import_DrForm.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 import_DrInnerText.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 import_DrInnerHTML.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 import_DrFor.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 import_DrForOf.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 import_DrThisProperty.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 import_DrAppender.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 import_DrRepeat.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 import_DrTargetElementIsElement.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 import_DrTargetElement.DrTargetElement(this, __render, { raws, fag }, { element, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrTargetAttr.DrTargetAttr(this, __render, { raws, fag }, { element, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks })
         ];
         for (const operator of operators) {
           const state = await operator.start();
@@ -433,6 +352,7 @@ const _RawSet = class _RawSet {
         }
       });
     }
+    console.groupEnd();
     return { raws, executedOperators };
   }
   // 중요 스타일 적용 부분
@@ -551,7 +471,7 @@ const _RawSet = class _RawSet {
           }
           if (element2.hasAttribute(import_EventManager.EventManager.attrAttrName)) {
             const script = element2.getAttribute(import_EventManager.EventManager.attrAttrName) ?? "";
-            const keyValuePairs = Array.from(script.matchAll(/['"]?(\w+)['"]?:\s*([^,}]+)/g)).map((match) => ({
+            const keyValuePairs = Array.from(script.matchAll(/['"]?([\w-_]+)['"]?:\s*([^,}]+)/g)).map((match) => ({
               key: match[1],
               value: match[2]
             }));
@@ -561,6 +481,7 @@ const _RawSet = class _RawSet {
           }
           const targetElementIs = element2.getAttribute(_RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME);
           const targetElementNames = config.targetElements?.map((it) => it.name.toLowerCase()) ?? [];
+          targetElementNames.push(..._RawSet.DR_ELEMENTS);
           const isElement = targetElementNames.includes(element2.tagName.toLowerCase()) || targetElementNames.includes(targetElementIs?.toLowerCase());
           const targetAttrNames = (config.targetAttrs?.map((it) => it.name) ?? []).concat([..._RawSet.DR_ATTRIBUTES]);
           const normalAttrs = /* @__PURE__ */ new Map();
@@ -669,6 +590,7 @@ const _RawSet = class _RawSet {
         const startEndPoint = _RawSet.createStartEndPoint({ node: element2, id: uuid, type: elementType }, config);
         const targetElementIs = element2.getAttribute(_RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME);
         const targetElementNames = config.targetElements?.map((it) => it.name.toLowerCase()) ?? [];
+        targetElementNames.push(..._RawSet.DR_ELEMENTS);
         const isElement = targetElementNames.includes(element2.tagName.toLowerCase()) || targetElementNames.includes(targetElementIs?.toLowerCase());
         const targetAttrNames = (config.targetAttrs?.map((it) => it.name) ?? []).concat(_RawSet.DR_ATTRIBUTES);
         const isAttr = element2.getAttributeNames().filter((it) => targetAttrNames.includes(it.toLowerCase())).length > 0;
@@ -1031,9 +953,11 @@ const _RawSet = class _RawSet {
     if (templateReplacements.length > 0) {
       targetElement.innerHTML = import_StringUtils.StringUtils.replaceSequentially(targetElement.innerHTML, templateReplacements);
     }
+    const componentName = targetElement.getAttribute(_RawSet.DR_VARIABLE_NAME_OPTIONNAME) ?? "component";
     const optionThisName = targetElement.getAttribute(_RawSet.DR_THIS_NAME_OPTIONNAME);
     targetElement.getAttributeNames().forEach((it) => targetElement.setAttribute(it, targetElement.getAttribute(it).replace(/#this#/g, drThis)));
     const thisRandom = this.drThisEncoding(targetElement, drThis, { asIs: /@this@/g });
+    targetElement.innerHTML = targetElement.innerHTML.replaceAll(`#${componentName}#`, drThis);
     if (optionThisName) {
       targetElement.innerHTML = targetElement.innerHTML.replaceAll(`@${optionThisName}@`, drThis);
     }
@@ -1282,6 +1206,8 @@ _RawSet.DR_INNERTEXT_NAME = "dr-inner-text";
 _RawSet.DR_DETECT_NAME = "dr-detect";
 _RawSet.DR_STRIP_NAME = "dr-strip";
 _RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME = "dr-replace-target-element-is";
+// elementName
+_RawSet.DR_TARGET_ELEMENT_ELEMENTNAME = "dr-target-element";
 // 감지처리되는 옵션
 _RawSet.DR_DETECT_IF_OPTIONNAME = "dr-detect-option-if";
 _RawSet.DR_DETECT_FILTER_OPTIONNAME = "dr-detect-option-filter";
@@ -1348,6 +1274,9 @@ _RawSet.DR_TAGS = [];
 // public static readonly DR_REPLACE_ACTION_ATTRIBUTES = [
 //   RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME
 // ]
+_RawSet.DR_ELEMENTS = [
+  _RawSet.DR_TARGET_ELEMENT_ELEMENTNAME
+];
 _RawSet.DR_ATTRIBUTES = [
   _RawSet.DR_NAME,
   _RawSet.DR_APPENDER_NAME,
@@ -1361,7 +1290,7 @@ _RawSet.DR_ATTRIBUTES = [
   _RawSet.DR_INNERHTML_NAME,
   _RawSet.DR_INNERTEXT_NAME,
   _RawSet.DR_REPEAT_NAME,
-  _RawSet.DR_DETECT_NAME,
+  // RawSet.DR_DETECT_NAME, // TODO: DrDetect 오퍼레이터 구현 필요
   _RawSet.DR_STRIP_NAME
 ];
 let RawSet = _RawSet;