@dooboostore/dom-render 1.0.109 → 1.0.111

package/src/rawsets/RawSet.ts

@@ -1,6 +1,6 @@
 import { RandomUtils } from '@dooboostore/core/random/RandomUtils';
 import { StringUtils } from '@dooboostore/core/string/StringUtils';
-import { EventManager } from '../events/EventManager';
+import { EventManager, NormalAttrDataType } from '../events/EventManager';
 import type { DomRenderConfig } from '../configs/DomRenderConfig';
 import { Range } from '../iterators/Range';
 import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';
@@ -40,7 +40,7 @@ import { isOnDestroyRender, OnDestroyRenderParams } from '../lifecycle/OnDestroy
 import { DrTargetElementIsElement } from '../operators/DrTargetElementIsElement';
 import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
 import { NodeUtils } from '@dooboostore/core-web/node/NodeUtils';
-
+import { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';
 
 export type RenderResult = { raws: RawSet[]; executedOperators: OperatorExecuter[] };
 
@@ -82,11 +82,14 @@ export class RawSet {
   public static readonly DR_DESTROY_OPTIONNAME = 'dr-option-destroy';
 
   public static readonly DR_THIS_NAME_OPTIONNAME = 'dr-option-this-name';
-  /**
-   * @deprecated
-   */
-  public static readonly DR_COMPONENT_NAME_OPTIONNAME = 'dr-option-component-name';
-  public static readonly DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME = 'dr-option-component-inner-html-name';
+
+  public static readonly DR_VARIABLE_NAME_OPTIONNAME = 'dr-option-variable-name';
+  public static readonly DR_ITEM_VARIABLE_NAME_OPTIONNAME = 'dr-option-item-variable-name';
+  public static readonly DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME = 'dr-option-item-index-variable-name';
+  public static readonly DR_INNER_HTML_NAME_OPTIONNAME = 'dr-option-inner-html-name';
+  public static readonly DR_INNER_TEXT_NAME_OPTIONNAME = 'dr-option-inner-text-name';
+  public static readonly DR_INNER_HTML_ESCAPED_NAME_OPTIONNAME = 'dr-option-inner-html-escaped-name';
+
   public static readonly DR_KEY_OPTIONNAME = 'dr-option-key';
   public static readonly DR_HAS_KEYS_OPTIONNAME = 'dr-option-has-keys';
 
@@ -176,7 +179,9 @@ export class RawSet {
 
   get isConnected() {
     // console.log('isConnect???', this, this.point.start.isConnected, this.point.end.isConnected);
-    return this.point && this.point.start && this.point.end && this.point.start.isConnected && this.point.end.isConnected;
+    return (
+      this.point && this.point.start && this.point.end && this.point.start.isConnected && this.point.end.isConnected
+    );
   }
 
   // 중요
@@ -209,8 +214,17 @@ export class RawSet {
         const targetAttrMap = element.getAttribute(EventManager.normalAttrMapAttrName);
         // console.log('targetAttrMap-->', targetAttrMap)
         if (targetAttrMap) {
-          new Map<string, string>(JSON.parse(targetAttrMap)).forEach((v, k) => {
-            targetScripts.push(`(${v})`);
+          new Map<string, NormalAttrDataType>(JSON.parse(targetAttrMap)).forEach((v, k) => {
+            const variablePaths = v.variablePaths;
+            // let targetScript = v.originalAttrValue;
+            // variablePaths.forEach(it => {
+            //   let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
+            //   targetScript = targetScript.replaceAll(it.origin,`\${${r}}`);
+            // })
+            // targetScripts.push(`(${targetScript})`);
+            // 변수 체크만 하는거니깐 이렇게
+            variablePaths.forEach(it => targetScripts.push(`(${it.inner})`));
+            // console.log('targetScripts', targetScripts);
           });
         }
         // console.log('targetScriptstargetScripts', targetScripts)
@@ -317,12 +331,18 @@ export class RawSet {
         // console.log('--->', RawSet.exporesionGrouops(textContent), textContent,runText, runText[0][1])
         let newNode: Node;
         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') as HTMLTemplateElement;
           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);
@@ -365,23 +385,140 @@ export 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) {
@@ -436,7 +573,7 @@ export class RawSet {
     // RawSet.generateStyleSheetsLocal(config);
     for (const it of onThisComponentSetCallBacks) {
       if (isOnInitRender(it.obj)) {
-        it.obj?.onInitRender?.({}, this);
+        await it.obj?.onInitRender?.({}, this);
       }
     }
     for (const it of onElementInitCallBacks) {
@@ -465,7 +602,7 @@ export class RawSet {
         //     it.targetElement.__render.component.onInitRender?.(...param);
         //   }
         // }
-        this.dataSet.render.currentThis.onInitRender({}, this);
+        await this.dataSet.render.currentThis.onInitRender({}, this);
       }
 
       config?.onElementInit?.(it.name, obj, this, it.targetElement);
@@ -606,7 +743,10 @@ export class RawSet {
     let data = element.getAttribute(RawSet.DR_APPENDER_NAME);
     // if (data && !/\[[0-9]+\]/g.test(data)) {
     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
+      );
       // console.log('------?', currentIndex)
       // if (currentIndex === undefined || isNaN(currentIndex)) {
       //     return undefined;
@@ -644,106 +784,119 @@ export class RawSet {
     const Node = (config.window as any).Node;
     const processedNodes = new Set<Node>();
 
+    const findNodes = NodeUtils.findNodes(element, node => {
+      // console.log('nodeType', node.nodeType, node, (node as any).tagName, (node as any).data);
+      // for (const processedNode of processedNodes) {
+      //   console.log('pre check!!', Array.from(processedNodes),processedNode !== node , processedNode.contains(node));
+      //   // if(processedNode.contains(node)){
+      //   console.log('---prechecker--html', (processedNode as HTMLElement).outerHTML,'------', (node as HTMLElement).outerHTML);
+      //   // }
+      //   if (processedNode !== node && processedNode.contains(node)) {
+      //     console.log('acceptNodeReturn contain', NodeFilter.FILTER_REJECT);
+      //     return NodeFilter.FILTER_REJECT;
+      //   }
+      // }
 
-
-    const findNodes  = NodeUtils.findNodes(element, (node) => {
-        // console.log('nodeType', node.nodeType, node, (node as any).tagName, (node as any).data);
-        // for (const processedNode of processedNodes) {
-        //   console.log('pre check!!', Array.from(processedNodes),processedNode !== node , processedNode.contains(node));
-        //   // if(processedNode.contains(node)){
-        //   console.log('---prechecker--html', (processedNode as HTMLElement).outerHTML,'------', (node as HTMLElement).outerHTML);
-        //   // }
-        //   if (processedNode !== node && processedNode.contains(node)) {
-        //     console.log('acceptNodeReturn contain', NodeFilter.FILTER_REJECT);
-        //     return NodeFilter.FILTER_REJECT;
-        //   }
+      if (node.nodeType === Node.TEXT_NODE) {
+        // console.log('nodeText--->', node.textContent)
+        // console.log('????????', node.parentElement, node.parentElement?.getAttribute('dr-pre'));
+        // console.log('???????/',node.textContent, node.parentElement?.getAttribute('dr-pre'))
+        // TODO: 나중에
+        // const between = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', StringUtils.deleteEnter((node as Text).data ?? ''))
+        const between = RawSet.expressionGroups(StringUtils.deleteEnter((node as Text).data ?? ''));
+        // console.log('bbbb', between)
+        const r =
+          between?.length > 0
+            ? NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN
+            : NodeUtils.FindNodesFilterResult.NO_MATCH_AND_SKIP_CHILDREN;
+        // console.log('acceptNodeReturn node', r);
+        return r;
+        // return /\$\{.*?\}/g.test(StringUtils.deleteEnter((node as Text).data ?? '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+        // return /[$#]\{.*?\}/g.test(StringUtils.deleteEnter((node as Text).data ?? '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node as Element;
+        // if (typeof Window === 'undefined' && element.getAttribute('ttt') === 'visual') {
+        //   return NodeFilter.FILTER_REJECT;
         // }
-
-        if (node.nodeType === Node.TEXT_NODE) {
-          // console.log('nodeText--->', node.textContent)
-          // console.log('????????', node.parentElement, node.parentElement?.getAttribute('dr-pre'));
-          // console.log('???????/',node.textContent, node.parentElement?.getAttribute('dr-pre'))
-          // TODO: 나중에
-          // const between = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', StringUtils.deleteEnter((node as Text).data ?? ''))
-          const between = RawSet.expressionGroups(StringUtils.deleteEnter((node as Text).data ?? ''));
-          // console.log('bbbb', between)
-          const r = between?.length > 0 ? NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : NodeUtils.FindNodesFilterResult.NO_MATCH_AND_SKIP_CHILDREN;
-          // console.log('acceptNodeReturn node', r);
+        // console.log('nodeHTML-->', element.outerHTML);
+        if (element.hasAttribute(RawSet.DR_PRE_NAME)) {
+          let r = NodeUtils.FindNodesFilterResult.NO_MATCH_AND_SKIP_CHILDREN;
+          // console.log('acceptNodeReturn', r);
           return r;
-          // return /\$\{.*?\}/g.test(StringUtils.deleteEnter((node as Text).data ?? '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-          // return /[$#]\{.*?\}/g.test(StringUtils.deleteEnter((node as Text).data ?? '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-        } else if (node.nodeType === Node.ELEMENT_NODE) {
-          const element = node as Element;
-          // if (typeof Window === 'undefined' && element.getAttribute('ttt') === 'visual') {
-          //   return NodeFilter.FILTER_REJECT;
-          // }
-          // console.log('nodeHTML-->', element.outerHTML);
-          if (element.hasAttribute(RawSet.DR_PRE_NAME)) {
-            let r = NodeUtils.FindNodesFilterResult.NO_MATCH_AND_SKIP_CHILDREN;
-            // console.log('acceptNodeReturn', r);
-            return r;
-          }
-          if (element.hasAttribute(EventManager.attrAttrName)) {
-            const script = element.getAttribute(EventManager.attrAttrName) ?? '';
-            // console.log('scriptscriptscriptscriptscriptscript,', script)
-            const keyValuePairs = Array.from(script.matchAll(/(\w+):\s*([^,}]+)/g)).map(match => ({
-              key: match[1],
-              value: match[2]
-            }));
-            (keyValuePairs ?? []).forEach(it => {
-              element.setAttribute(it.key, '${' + it.value + '}$');
-            });
-          }
-          // element.setAttribute('dr-event-click', 'console.log(11)');
-          const targetElementIs = element.getAttribute(RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME);
-          const targetElementNames = config.targetElements?.map(it => it.name.toLowerCase()) ?? [];
-          const isElement =
-            targetElementNames.includes(element.tagName.toLowerCase()) ||
-            targetElementNames.includes(targetElementIs?.toLowerCase() as any);
-          // if (isElement) {
-          //   (element as HTMLElement).style.display = 'none';
-          //   (element as HTMLElement).style.width = '100px';
-          //   (element as HTMLElement).style.height = '100px';
-          //   console.log((element as HTMLElement).outerHTML)
-          // }
-          // console.log('------targetElementIstargetElementIs>', targetElementNames, '---', isElement, targetElementIs);
-          // const targetAttrNames = (config.targetAttrs?.map(it => it.name) ?? []).concat([...RawSet.DR_ATTRIBUTES,...EventManager.RAWSET_CHECK_ATTRIBUTE]);
-          const targetAttrNames = (config.targetAttrs?.map(it => it.name) ?? []).concat([...RawSet.DR_ATTRIBUTES]);
-          const normalAttrs = new Map<string, string>();
-          const linkVariables = new Map<string, string>();
-          const linkNames = EventManager.linkAttrs.map(it => it.name);
-          const isAttr =
-            element.getAttributeNames().filter(it => {
-              const value = element.getAttribute(it);
-
-              // link일때
-              if (value && linkNames.includes(it)) {
-                linkVariables.set(it, value);
-              } else if (value && RawSet.isExpression(value)) {
-                // 표현식있을떄
-                let variablePath: string = RawSet.expressionGroups(value)[0][1];
-                // console.log('0-----',variablePath, node);
-                // normal Attribute 초반에 셋팅해주기.
-                // TODO: 이거 하긴했는데 사이드 이팩트?
-                const originVariable = variablePath;
-                variablePath = variablePath.replace(/#[^#]*#/g, '({})');
-                // console.log('1-----',variablePath, node);
-                const optionalChainPath = ObjectUtils.Path.toOptionalChainPath(variablePath);
-                // console.log('2-----',optionalChainPath);
-                const cval = ObjectUtils.Script.evaluateReturn(optionalChainPath, Object.assign(obj));
-                // const cval = ScriptUtils.evalReturn(variablePath, Object.assign(obj));
-                if (cval === null) {
-                  element.removeAttribute(it);
-                } else {
-                  element.setAttribute(it, cval);
-                }
-                normalAttrs.set(it, originVariable);
-                // console.log('normalAttribute', it, variablePath);
+        }
+        if (element.hasAttribute(EventManager.attrAttrName)) {
+        // console.log('elementAttrAttrName-->', element.outerHTML);
+          const script = element.getAttribute(EventManager.attrAttrName) ?? '';
+          // console.log('scriptscriptscriptscriptscriptscript,', script)
+          const keyValuePairs = Array.from(script.matchAll(/['"]?(\w+)['"]?:\s*([^,}]+)/g)).map(match => ({
+            key: match[1],
+            value: match[2]
+          }));
+          (keyValuePairs ?? []).forEach(it => {
+            element.setAttribute(it.key, '${' + it.value + '}$');
+          });
+        }
+        // element.setAttribute('dr-event-click', 'console.log(11)');
+        const targetElementIs = element.getAttribute(RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME);
+        const targetElementNames = config.targetElements?.map(it => it.name.toLowerCase()) ?? [];
+        const isElement =
+          targetElementNames.includes(element.tagName.toLowerCase()) ||
+          targetElementNames.includes(targetElementIs?.toLowerCase() as any);
+        // if (isElement) {
+        //   (element as HTMLElement).style.display = 'none';
+        //   (element as HTMLElement).style.width = '100px';
+        //   (element as HTMLElement).style.height = '100px';
+        //   console.log((element as HTMLElement).outerHTML)
+        // }
+        // console.log('------targetElementIstargetElementIs>', targetElementNames, '---', isElement, targetElementIs);
+        // const targetAttrNames = (config.targetAttrs?.map(it => it.name) ?? []).concat([...RawSet.DR_ATTRIBUTES,...EventManager.RAWSET_CHECK_ATTRIBUTE]);
+        const targetAttrNames = (config.targetAttrs?.map(it => it.name) ?? []).concat([...RawSet.DR_ATTRIBUTES]);
+        const normalAttrs = new Map<string, NormalAttrDataType>();
+        const linkVariables = new Map<string, string>();
+        const linkNames = EventManager.linkAttrs.map(it => it.name);
+        const isAttr =
+          element.getAttributeNames().filter(it=>!EventManager.noDetectAttr.includes(it)).filter(it => {
+            const value = element.getAttribute(it)?.trim();
+
+            // link일때
+            if (value && linkNames.includes(it)) {
+              linkVariables.set(it, value);
+            } else if (value && RawSet.isExpression(value)) {
+              // 표현식있을떄
+              const variablePaths: { origin: string; inner: string }[] = RawSet.expressionGroups(value).map(it => ({
+                origin: it[0].trim(),
+                inner: it[1].trim()
+              }));
+              const isStringTemplate = variablePaths.length > 1 || (variablePaths[0] && variablePaths[0].origin !== value);
+              // normal Attribute 초반에 셋팅해주기.
+              // TODO: 이거 하긴했는데 사이드 이팩트?
+              // let variablePath: string = 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));
+
+              let targetScript = value;
+              variablePaths.forEach(it => {
+                let r = it.inner.replace(/#[^#]*#/g, '({})');
+                r = ObjectUtils.Path.toOptionalChainPath(r);
+                targetScript = targetScript.replaceAll(it.origin, `\${${r}}`);
+              });
+              const cval = ObjectUtils.Script.evaluateReturn('`' + targetScript + '`', Object.assign(obj));
+
+              if (cval === null) {
+                element.removeAttribute(it);
+              } else {
+                element.setAttribute(it, cval);
               }
-              // console.log(element.getAttribute(it), attrExpresion);
-              const isTargetAttr = targetAttrNames.includes(it.toLowerCase());
-              return isTargetAttr;
-            }).length > 0;
+              normalAttrs.set(it, { originalAttrValue: value, variablePaths: variablePaths, isStringTemplate });
+              // normalAttrs.set(it, originVariable);
+              // console.log('normalAttribute', it, variablePath);
+            }
+            // console.log(element.getAttribute(it), attrExpresion);
+            const isTargetAttr = targetAttrNames.includes(it.toLowerCase());
+            return isTargetAttr;
+          }).length > 0;
 
           if (linkVariables.size) {
             element.setAttribute(
@@ -768,151 +921,6 @@ export class RawSet {
       }
     )
 
-
-    /**
-     nodeIterator.nextNode()  할때 그때 호출시점에 아래 로직에서 다음 노드를 찾는다.
-      브라우저는 nodeIterator.nextNode() 해서 동기로 dom을 조작하거나 옮기면  다음 nextNode할때  그 옮겨진 대상은 제외된다
-     하지만 jsdom은 그대로 남아있어 아주 예기치못한 사건이 발생된다   5시간은 삽질..했다..  따라서 중복방지 처리하였다
-     */
-    // const nodeIterator = config.window.document?.createNodeIterator(element, NodeFilter.SHOW_ALL, {
-    //   acceptNode(node) {
-    //     console.log('nodeType', node.nodeType, node, (node as any).tagName, (node as any).data);
-    //     for (const processedNode of processedNodes) {
-    //       console.log('pre check!!', Array.from(processedNodes),processedNode !== node , processedNode.contains(node));
-    //       // if(processedNode.contains(node)){
-    //         console.log('---prechecker--html', (processedNode as HTMLElement).outerHTML,'------', (node as HTMLElement).outerHTML);
-    //       // }
-    //         if (processedNode !== node && processedNode.contains(node)) {
-    //           console.log('acceptNodeReturn contain', NodeFilter.FILTER_REJECT);
-    //             return NodeFilter.FILTER_REJECT;
-    //         }
-    //     }
-    //
-    //     if (node.nodeType === Node.TEXT_NODE) {
-    //       console.log('nodeText--->', node.textContent)
-    //       // console.log('????????', node.parentElement, node.parentElement?.getAttribute('dr-pre'));
-    //       // console.log('???????/',node.textContent, node.parentElement?.getAttribute('dr-pre'))
-    //       // TODO: 나중에
-    //       // const between = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', StringUtils.deleteEnter((node as Text).data ?? ''))
-    //       const between = RawSet.expressionGroups(StringUtils.deleteEnter((node as Text).data ?? ''));
-    //       // console.log('bbbb', between)
-    //       const r = between?.length > 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-    //       console.log('acceptNodeReturn node', r);
-    //       return r;
-    //       // return /\$\{.*?\}/g.test(StringUtils.deleteEnter((node as Text).data ?? '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-    //       // return /[$#]\{.*?\}/g.test(StringUtils.deleteEnter((node as Text).data ?? '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-    //     } else if (node.nodeType === Node.ELEMENT_NODE) {
-    //       const element = node as Element;
-    //       // if (typeof Window === 'undefined' && element.getAttribute('ttt') === 'visual') {
-    //       //   return NodeFilter.FILTER_REJECT;
-    //       // }
-    //       console.log('nodeHTML-->', element.outerHTML);
-    //       if (element.hasAttribute(RawSet.DR_PRE_NAME)) {
-    //         console.log('acceptNodeReturn', NodeFilter.FILTER_REJECT);
-    //         return NodeFilter.FILTER_REJECT;
-    //       }
-    //       if (element.hasAttribute(EventManager.attrAttrName)) {
-    //         const script = element.getAttribute(EventManager.attrAttrName) ?? '';
-    //         // console.log('scriptscriptscriptscriptscriptscript,', script)
-    //         const keyValuePairs = Array.from(script.matchAll(/(\w+):\s*([^,}]+)/g)).map(match => ({
-    //           key: match[1],
-    //           value: match[2]
-    //         }));
-    //         (keyValuePairs ?? []).forEach(it => {
-    //           element.setAttribute(it.key, '${' + it.value + '}$');
-    //         });
-    //         // console.log('-------k', keyValuePairs)
-    //
-    //         // const drAttr = ScriptUtils.evalReturn(script, obj)
-    //         // Object.entries(drAttr).forEach(([key, value]) => {
-    //         //   const keyValuePairs = Array.from(a.matchAll(/(\w+):\s*([^,}]+)/g)).map(match => ({ key: match[1], value: match[2] }));
-    //         //   console.log(keyValuePairs);
-    //         //   // 출력: [{ key: 'value', value: 'this.child.obj.name' }, { key: 'wow', value: 'this.ww' }, { key: 'zz', value: '22' }, { key: 'v', value: '"ee"' }]
-    //         //
-    //         //   console.log('-----------------', key,value)
-    //         //   element.setAttribute(key, '${'+(value)+'}$');
-    //         // })
-    //         // EventManager.attrNames.filter(it => it in drAttr).forEach(it => {
-    //         //   if (drAttr[it] === null) {
-    //         //     element.removeAttribute(it);
-    //         //   } else {
-    //         //     element.setAttribute(it, drAttr[it]);
-    //         //   }
-    //         // })
-    //         // console.log('-------->', Array.from(element.attributes), element.getAttribute('dr-attr'), obj)
-    //       }
-    //       // element.setAttribute('dr-event-click', 'console.log(11)');
-    //       const targetElementIs = element.getAttribute(RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME);
-    //       const targetElementNames = config.targetElements?.map(it => it.name.toLowerCase()) ?? [];
-    //       const isElement =
-    //         targetElementNames.includes(element.tagName.toLowerCase()) ||
-    //         targetElementNames.includes(targetElementIs?.toLowerCase() as any);
-    //       // if (isElement) {
-    //       //   (element as HTMLElement).style.display = 'none';
-    //       //   (element as HTMLElement).style.width = '100px';
-    //       //   (element as HTMLElement).style.height = '100px';
-    //       //   console.log((element as HTMLElement).outerHTML)
-    //       // }
-    //       // console.log('------targetElementIstargetElementIs>', targetElementNames, '---', isElement, targetElementIs);
-    //       // const targetAttrNames = (config.targetAttrs?.map(it => it.name) ?? []).concat([...RawSet.DR_ATTRIBUTES,...EventManager.RAWSET_CHECK_ATTRIBUTE]);
-    //       const targetAttrNames = (config.targetAttrs?.map(it => it.name) ?? []).concat([...RawSet.DR_ATTRIBUTES]);
-    //       const normalAttrs = new Map<string, string>();
-    //       const linkVariables = new Map<string, string>();
-    //       const linkNames = EventManager.linkAttrs.map(it => it.name);
-    //       const isAttr =
-    //         element.getAttributeNames().filter(it => {
-    //           const value = element.getAttribute(it);
-    //
-    //           // link일때
-    //           if (value && linkNames.includes(it)) {
-    //             linkVariables.set(it, value);
-    //           } else if (value && RawSet.isExpression(value)) {
-    //             // 표현식있을떄
-    //             let variablePath: string = RawSet.expressionGroups(value)[0][1];
-    //             // console.log('0-----',variablePath, node);
-    //             // normal Attribute 초반에 셋팅해주기.
-    //             // TODO: 이거 하긴했는데 사이드 이팩트?
-    //             const originVariable = variablePath;
-    //             variablePath = variablePath.replace(/#[^#]*#/g, '({})');
-    //             // console.log('1-----',variablePath, node);
-    //             const optionalChainPath = ObjectUtils.Path.toOptionalChainPath(variablePath);
-    //             // console.log('2-----',optionalChainPath);
-    //             const cval = ObjectUtils.Script.evaluateReturn(optionalChainPath, Object.assign(obj));
-    //             // const cval = ScriptUtils.evalReturn(variablePath, Object.assign(obj));
-    //             if (cval === null) {
-    //               element.removeAttribute(it);
-    //             } else {
-    //               element.setAttribute(it, cval);
-    //             }
-    //             normalAttrs.set(it, originVariable);
-    //             // console.log('normalAttribute', it, variablePath);
-    //           }
-    //           // console.log(element.getAttribute(it), attrExpresion);
-    //           const isTargetAttr = targetAttrNames.includes(it.toLowerCase());
-    //           return isTargetAttr;
-    //         }).length > 0;
-    //
-    //       if (linkVariables.size) {
-    //         element.setAttribute(
-    //           EventManager.linkTargetMapAttrName,
-    //           JSON.stringify(Array.from(linkVariables.entries()))
-    //         );
-    //       }
-    //       // 기본 attribute를 처리하기위해
-    //       if (normalAttrs.size) {
-    //         element.setAttribute(EventManager.normalAttrMapAttrName, JSON.stringify(Array.from(normalAttrs.entries())));
-    //       }
-    //       // if (isElement)  {
-    //       //   element.setAttribute('www', '@this@');
-    //       // }
-    //       const r = isAttr || isElement ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-    //       console.log('acceptNodeReturn element', r);
-    //       return r;
-    //     }
-    //     console.log('acceptNodeReturn  nothing', NodeFilter.FILTER_REJECT);
-    //     return NodeFilter.FILTER_REJECT;
-    //   }
-    // });
     const pars: RawSet[] = [];
     let currentNode: Node | null;
     const name = RandomUtils.uuid();
@@ -985,7 +993,8 @@ export class RawSet {
           lasterIndex = regexArr.index + it.content.length;
         }
         template.content.append(config.window.document.createTextNode(text.substring(lasterIndex, text.length)));
-        currentNode?.parentNode?.replaceChild(template.content, currentNode); // <-- 여기서 text를 fragment로 replace했기때문에 추적 변경이 가능하다.
+        const p = currentNode?.parentNode;
+        p?.replaceChild(template.content, currentNode); // <-- 여기서 text를 fragment로 replace했기때문에 추적 변경이 가능하다.
       } else if (currentNode.nodeType === Node.ELEMENT_NODE) {
         // const uuid = `${RandomUtils.alphabet(40)}___${obj?.constructor?.name}`;
         const uuid = `${RandomUtils.alphabet(40)}`;
@@ -1180,6 +1189,7 @@ export class RawSet {
 
   public static drThisEncoding(element: Element, drThis: string, config: { asIs: RegExp; toBe?: string }): string {
     const thisRandom = (config.toBe = config?.toBe ?? RandomUtils.uuid());
+    // console.log('rrrrrrrrrrrrr', thisRandom);
     // const thisRegex = /(?<!(dr-|\.))this(?=.?)/g;
     // const thisRegex = /[^(dr\-)]this(?=.?)/g;
     // const thisRegex = /[^(dr\-)]this\./g;
@@ -1236,6 +1246,7 @@ export class RawSet {
       .map(it => it.name.replaceAll('.', '\\.').replaceAll(':', '\\:'))
       .join(',');
     const thisRandom = RandomUtils.uuid();
+    // console.log('thisRandom', thisRandom, variable);
     element.querySelectorAll(targetElementNames).forEach(it => {
       it.innerHTML = it.innerHTML.replace(variable, thisRandom);
     });
@@ -1470,7 +1481,7 @@ export class RawSet {
     // console.log('targetElement',targetElement);
     // attribute
     // const componentName = element.getAttribute(RawSet.DR_COMPONENT_NAME_OPTIONNAME) ?? 'component';
-    const componentNameReplaceKey = RandomUtils.uuid();
+    // const componentNameReplaceKey = RandomUtils.uuid();
     // if (componentName) {
     //   RawSet.replaceInnerHTML(element, {asIs: `#${componentName}#`, toBe: 'this'})
     // }
@@ -1481,11 +1492,34 @@ export class RawSet {
     // }
 
     rawSet.point.innerHTML = element.innerHTML;
+    const innerText = element.textContent?.trim() ?? '';
+    const escapedInnerHTML = ConvertUtils.escapeHTML(element.innerHTML);
     // 이걸 왜 뺐었지... 다시넣었음  그런데 조금 로직이.. 검증이..
-    const innerHTMLName = targetElement.getAttribute(RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME) ?? '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: StringUtils.SequentialReplacement[] = [];
     if (innerHTMLName) {
-      // console.log('---------', element.innerHTML);
-      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);
     }
 
     // console.log('aa-asIs', targetElement.innerHTML);
@@ -1495,7 +1529,7 @@ export class RawSet {
       .getAttributeNames()
       .forEach(it => targetElement.setAttribute(it, targetElement.getAttribute(it)!.replace(/#this#/g, drThis)));
     const thisRandom = this.drThisEncoding(targetElement, drThis, { asIs: /@this@/g });
-    // console.log('@@@@@@@@@@@@@0', targetElement.innerHTML);
+    // console.log('@@@@@@@@@@@@@0', thisRandom);
     // let thisNameRandom: string | undefined = undefined;
     if (optionThisName) {
       // console.log('-----0', element.innerHTML, '\n', targetElement.innerHTML)
@@ -1629,7 +1663,6 @@ export class RawSet {
         const domrenderComponents = obj.__domrender_components;
         // debugger;
         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; 
@@ -1691,72 +1724,53 @@ export class RawSet {
         // 추적 및 destroy 위해.
         instance.__rawSet = rawSet;
 
-        //
-        // const i = instance.__domrender_component_new = (instance.__domrender_component_new ?? new Proxy({}, new DomRenderFinalProxy())) as CreatorMetaData;
-        // i.thisVariableName = rawSet.point.thisVariableName;
-        // i.thisFullVariableName = `this.__domrender_components.${componentKey}`;
-        // i.componentKey = componentKey;
-        // i.rawSet = rawSet;
-        // i.attribute = attribute;
-        // i.router = config.router;
-        // i.scripts = render.scripts;
-        // i.drAttrs = attrs;
-        // i.innerHTML = element.innerHTML;
-        // i.rootCreator = new Proxy(obj, new DomRenderFinalProxy());
-        // i.creator = new Proxy(rawSet.point.thisVariableName ? ObjectUtils.Script.evalReturn(rawSet.point.thisVariableName, obj) : obj, new DomRenderFinalProxy());
-        // this.__creatorMetaData = i;
-        // render = {
-        //   component: instance,
-        //   creatorMetaData: i,
-        //   ...render
-        // };
-        //
-        // // 중요 dr-normal-attr-map
-        // const normalAttrMap = element.getAttribute(EventManager.normalAttrMapAttrName);
-        // if (isOnChangeAttrRender(instance) && normalAttrMap) {
-        //   new Map<string, string>(JSON.parse(normalAttrMap)).forEach((value, key) => {
-        //     const script = `${renderScript} return ${value} `;
-        //     const cval = ObjectUtils.Script.eval(script, Object.assign(obj, { __render: render }));
-        //     // element.setAttribute(key, cval);
-        //     instance.onChangeAttrRender(key, cval);
-        //   });
-        // }
-        //
-        // // dr-on-create data
-        // const onCreateDataScript = `return {rootParent: this, render: this.__render}`;
-        // const onCreateDataParam = ObjectUtils.Script.eval(onCreateDataScript, Object.assign(obj, { __render: render }));
-        // if (isOnCreateRenderData(instance)) {
-        //   instance?.onCreateRenderData(onCreateDataParam);
-        // }
-        //
-        // // dr-on-create onCreateRender
-        // const onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
-        // this.__render = render;
-        // let createParam = [];
-        // if (onCreate) {
-        //   const script = `${renderScript} return ${onCreate} `;
-        //   createParam = ObjectUtils.Script.eval(script, Object.assign(obj, { __render: render }));
-        //   if (!Array.isArray(createParam)) {
-        //     createParam = [createParam];
-        //   }
-        // }
-        // if (isOnCreateRender(instance)) {
-        //   instance?.onCreateRender?.(...createParam);
-        // }
         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 (element.getAttribute(RawSet.DR_COMPONENT_VARIABLE_NAME_OPTIONNAME)) {
+        //   console.log('vvvvvvv', element.getAttribute(RawSet.DR_COMPONENT_VARIABLE_NAME_OPTIONNAME));
+        // }
         if (applayTemplate) {
           // if (rawSet.point.thisVariableName) {
           // 넘어온 innerHTML에 this가 있으면 해당안되게 우선 치환.
           innerHTMLThisRandom = RandomUtils.uuid();
-          applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
+          applayTemplate = StringUtils.replaceSequentially(applayTemplate, [
+            {
+              regex: /this\./g,
+              callback: () => innerHTMLThisRandom
+            },
+            {
+              regex: new RegExp(`#${componentName}#`, 'g'),
+              callback: () => nearThisPath
+            }
+          ]);
           // }
-          applayTemplate = applayTemplate.replace(RegExp(`#${componentName}#`, 'g'), 'this');
+          // applayTemplate = applayTemplate.replace(RegExp(`#${componentName}#`, 'g'), 'this');
         }
         // applayTemplate = template.replace(RegExp(`#${innerHTMLName}#`, 'g'), applayTemplate);
-        applayTemplate = (this.template ?? '').replace(RegExp(`#${innerHTMLName}#`, 'g'), applayTemplate);
+        // RawSet.replaceInnerHTML(
+        // applayTemplate = StringUtils.regexExecArrayReplace(this.template, RegExp(`#${innerHTMLName}#`, 'g'), applayTemplate)
+        // applayTemplate = StringUtils.regexExecArrayReplace(this.template, [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
+          }
+        ]);
         // dr-on-component-init
         // const oninit = element.getAttribute(`${EventManager.attrPrefix}on-component-init`); // dr-on-component-init
         // const oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME); // dr-on-component-init
@@ -1787,10 +1801,22 @@ export class RawSet {
         // let data = await RawSet.drThisCreate(rawSet, element, `this.__domrender_components.${componentKey}`, '', false, obj, config);
 
         // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다. 부모에서의 this면 부모껄로 작동되게
+        // console.log('!!!!!@', (data && innerHTMLThisRandom) ,innerHTMLThisRandom);
         if (data && innerHTMLThisRandom) {
           const template = config.window.document.createElement('template') as HTMLTemplateElement;
-          template.content.append(data);
-          template.innerHTML = template.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
+
+          // console.log('------->', template.content);
+          // 브라우저에서는 이게되는데 linkedom 에서는 안된다. 그래서 innerhtml로 처리함
+          // template.content.append(data);
+          // console.log('-------', template.innerHTML);
+          // const d = config.window.document.createElement('div')
+          // d.innerHTML='<a></a>'
+          // console.log('-----XX', ElementUtils.toInnerHTML(data, {document: config.window.document}));
+          // template.innerHTML = template.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
+            let s = ElementUtils.toInnerHTML(data, {document: config.window.document});
+            template.innerHTML = s.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');;
+          // console.log('ccc?', template.innerHTML);
+          // template.innerHTML = '<div>zzzzzzz</div>'
           data = template.content;
         }
         // (data as any).render = render;
@@ -1866,7 +1892,11 @@ export class RawSet {
     const findPath = (rawSet: RawSet) => {
       if (rawSet && rawSet.point) {
         // jsDom에서 instranceof HTMLMetaElement가 안먹히는것같아? 간혈적으로?
-        if (rawSet.point?.start && ('getAttribute' in rawSet.point.start) && rawSet.point.start.getAttribute('this-path')) {
+        if (
+          rawSet.point?.start &&
+          'getAttribute' in rawSet.point.start &&
+          rawSet.point.start.getAttribute('this-path')
+        ) {
           paths.push(rawSet.point.start.getAttribute('this-path')!);
         }
         if (rawSet.point.parentRawSet) findPath(rawSet.point.parentRawSet);
@@ -1884,14 +1914,28 @@ export class RawSet {
     const attribute = ElementUtils.getAttributeToObject(element);
     const normalAttribute = attribute[EventManager.normalAttrMapAttrName];
     if (normalAttribute) {
-      new Map<string, string>(JSON.parse(normalAttribute)).forEach((v, k) => {
+      new Map<string, NormalAttrDataType>(JSON.parse(normalAttribute)).forEach((v, k) => {
+        const variablePaths = v.variablePaths;
+        let targetScript = v.originalAttrValue.trim();
+
+        //중요!! expression 하나만 존재 및 그외것들이 없을때  그자체가 값이다 그외 여러개 있으면 문자열 합치는걸로 간주한다.
+          if (v.isStringTemplate) {
+              variablePaths.forEach(it => {
+                  let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
+                  targetScript = targetScript.replaceAll(it.origin, `\${${r}}`);
+              });
+          } else {
+              let r = ObjectUtils.Path.toOptionalChainPath(variablePaths[0].inner);
+              targetScript = targetScript.replaceAll(variablePaths[0].origin, r);
+          }
         const cval = ObjectUtils.Script.evaluateReturn(
-          { bodyScript: config.script, returnScript: v },
+          { bodyScript: config.script, returnScript: v.isStringTemplate ? '`' + targetScript + '`' : targetScript },
           Object.assign(config.obj, config.renderData ? { __render: config.renderData } : undefined)
         );
         attribute[k] = cval;
       });
     }
+      // console.log('attribute', attribute);
     return attribute;
   }
 }