@dooboostore/dom-render 1.0.110 → 1.0.112

package/src/rawsets/RawSet.ts

@@ -44,6 +44,7 @@ import { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';
 
 export type RenderResult = { raws: RawSet[]; executedOperators: OperatorExecuter[] };
 
+// let renderCnt = 0;
 export class RawSet {
   public static readonly DR_NAME = 'dr';
   public static readonly DR_IF_NAME = 'dr-if';
@@ -61,6 +62,8 @@ export class RawSet {
   public static readonly DR_STRIP_NAME = 'dr-strip';
   public static readonly DR_REPLACE_TARGET_ELEMENT_IS_NAME = 'dr-replace-target-element-is';
 
+  // elementName
+  public static readonly DR_TARGET_ELEMENT_ELEMENTNAME = 'dr-target-element';
   // 감지처리되는 옵션
   public static readonly DR_DETECT_IF_OPTIONNAME = 'dr-detect-option-if';
   public static readonly DR_DETECT_FILTER_OPTIONNAME = 'dr-detect-option-filter';
@@ -101,6 +104,7 @@ export class RawSet {
   public static readonly DR_ON_INIT_ARGUMENTS_OPTIONNAME = 'dr-on-init:arguments';
   public static readonly DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME = 'dr-on-constructor:arguments';
 
+
   public static readonly drAttrsOriginName: Attrs = {
     dr: RawSet.DR_NAME,
     drIf: RawSet.DR_IF_NAME,
@@ -136,6 +140,10 @@ export class RawSet {
   //   RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME
   // ]
 
+  public static readonly DR_ELEMENTS = [
+    RawSet.DR_TARGET_ELEMENT_ELEMENTNAME
+  ];
+
   public static readonly DR_ATTRIBUTES = [
     RawSet.DR_NAME,
     RawSet.DR_APPENDER_NAME,
@@ -149,7 +157,7 @@ export class RawSet {
     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
   ] as const;
 
@@ -271,8 +279,64 @@ export class RawSet {
   // 중요 render 처리 부분
   // public async render(obj: any, config: DomRenderConfig): Promise<RawSet[]> {
   // }
+  private lastRenderedValue: string | undefined;
   public async render(obj: any, config: DomRenderConfig): Promise<RenderResult> {
     // console.log('render!!!!!!!!!!!!!!')
+    // renderCnt++;
+    // const t0 = performance.now();
+    // console.group('RawSet render', this);
+    // Dirty Checking Optimization for Text Nodes
+    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: EventManager.setBindProperty(config?.scripts, obj),
+          router: config?.router,
+          range: Range.range,
+          element: this.dataSet.fragment.childNodes[0],
+          attribute: {},
+          rootObject: obj,
+          scriptUtils: ObjectUtils.Script,
+          nearThis: this.findNearThis(obj),
+          parentThis: this.findParentThis(obj),
+          bindScript: ` /** render **/
+                      const ${EventManager.SCRIPTS_VARNAME} = this.__render.scripts;
+                      const ${EventManager.RAWSET_VARNAME} = this.__render.rawSet;
+                      const ${EventManager.ELEMENT_VARNAME} = this.__render.element;
+                      const ${EventManager.ATTRIBUTE_VARNAME} = this.__render.attribute;
+                      const ${EventManager.RANGE_VARNAME} = this.__render.range;
+                      const ${EventManager.ROUTER_VARNAME} = this.__render.router;
+                      const ${EventManager.NEAR_THIS_VARNAME} = this.__render.nearThis;
+                      const ${EventManager.PARENT_THIS_VARNAME} = this.__render.parentThis;
+                      const ${EventManager.SCRIPT_UTILS_VARNAME} = this.__render.scriptUtils;
+                      const ${EventManager.ROOT_OBJECT_VARNAME} = this.__render.rootObject;
+              `
+        };
+
+        try {
+          const newValue = ObjectUtils.Script.evaluateReturn({
+            bodyScript: __render.bindScript,
+            returnScript: runText
+          }, Object.assign(obj, { __render }));
+
+          const newValueStr = String(newValue);
+          if (this.lastRenderedValue === newValueStr) {
+            // console.log('✓ Skipping render: Value unchanged', newValue);
+            return { raws: [], executedOperators: [] };
+          }
+          // console.log('✗ Rendering: Value changed', this.lastRenderedValue, '->', newValue);
+          // Update lastRenderedValue BEFORE proceeding with render
+          // This ensures the value is cached even if render fails partway through
+          this.lastRenderedValue = newValueStr;
+        } catch (e) {
+          // Evaluation failed, proceed with normal render
+          // console.log('⚠ Dirty check failed, proceeding with render', e);
+        }
+      }
+    }
+
     const genNode = config.window.document.importNode(this.dataSet.fragment, true);
     const raws: RawSet[] = [];
     const onAttrInitCallBacks: AttrInitCallBack[] = [];
@@ -331,18 +395,13 @@ 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.evaluateReturn({ bodyScript: __render.bindScript, returnScript: 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.evaluateReturn({ bodyScript: __render.bindScript, returnScript: runText }, Object.assign(obj, { __render }));
           newNode = config.window.document.createTextNode(r);
         }
         cNode.parentNode?.replaceChild(newNode, cNode);
@@ -385,140 +444,23 @@ 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) {
@@ -538,17 +480,21 @@ export class RawSet {
       it.point.parentRawSet = this;
     });
 
+
     // console.log('pppppppppppppp', this);
 
     // replaceBody와 applyEvent 순서를 바꿨다 20250511
     const childrenNodes = Array.from(genNode.childNodes);
+    // console.log(`RawSet aa took ${performance.now() - t0} milliseconds. children`, childrenNodes);
     this.applyEvent(obj, genNode, config);
+    // console.log(`RawSet xxxxxxxxxx took ${performance.now() - t0} milliseconds.`);
     this.replaceBody(genNode); // 중요 여기서 마지막에 연션된 값을 그려준다.
+    // console.log(`RawSet replaceBody took ${performance.now() - t0} milliseconds.`);
     // console.log('rawSEt!!!!!!!', obj, this.near)
     // console.log('rawSEt!!!!!!!', obj, this.findNearThis(obj),childrenNodes,config)
     // console.log('rawSEt!!!!!!!', obj, drAttrs)
     this.onRenderedEvent(obj, childrenNodes, config);
-
+    // console.log(`RawSet onRenderedEvent took ${performance.now() - t0} milliseconds.`);
     drAttrs.forEach(it => {
       if (it.drCompleteOption) {
         // genNode.childNodes
@@ -567,6 +513,7 @@ export class RawSet {
         );
       }
     });
+    // console.log(`RawSet drAttrs.forEach took ${performance.now() - t0} milliseconds.`);
 
     // 중요 style isolation 나중에 :scope로 대체 가능할듯.
     // 2023.9.4일 없앰  style 처음들어올때 처리하는걸로 바꿈
@@ -576,6 +523,9 @@ export class RawSet {
         await it.obj?.onInitRender?.({}, this);
       }
     }
+    // console.log(`RawSet const it of onThisComponentSetCallBacks took ${performance.now() - t0} milliseconds.`);
+
+
     for (const it of onElementInitCallBacks) {
       if (isOnInitRender(this.dataSet.render?.currentThis)) {
         // TODO: 나중에 파라미터 들어가야될듯. 지금은 리팩토링하느라 빠짐
@@ -607,11 +557,13 @@ export class RawSet {
 
       config?.onElementInit?.(it.name, obj, this, it.targetElement);
     }
+    // console.log(`RawSet for (const it of onElementInitCallBacks) { took ${performance.now() - t0} milliseconds.`);
 
     // TODO: 이부분도 위에 targetElement 처럼 해야될까?
     for (const it of onAttrInitCallBacks) {
       config?.onAttrInit?.(it.attrName, it.attrValue, obj, this);
     }
+    // console.log(`RawSet  for (const it of onAttrInitCallBacks) { took ${performance.now() - t0} milliseconds.`);
 
     // component destroy
     if (obj.__domrender_components) {
@@ -625,7 +577,10 @@ export class RawSet {
         }
       });
     }
+    // console.log(`RawSet  if (obj.__domrender_components) { took ${performance.now() - t0} milliseconds.`);
     // console.log('-------raws',raws)
+    // console.log(`RawSet render took ${performance.now() - t0} milliseconds. END!!`, renderCnt);
+    console.groupEnd();
     return { raws: raws, executedOperators: executedOperators };
   }
 
@@ -714,11 +669,13 @@ export class RawSet {
   }
 
   public applyEvent(obj: any, fragment = this.dataSet.fragment, config?: DomRenderConfig) {
+    // const t0 = performance.now();
     this.dataSet.config.eventManager.applyEvent(
       obj,
       this.dataSet.config.eventManager.findAttrElements(fragment, config),
       config
     );
+    // console.log(`RawSet applyEvent took ${performance.now() - t0} milliseconds.`);
   }
 
   public onRenderedEvent(obj: any, nodes: Node[], config?: DomRenderConfig) {
@@ -825,12 +782,16 @@ export class RawSet {
           return r;
         }
         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]
-          }));
+          // const keyValuePairs = Array.from(script.matchAll(/['"]?(\w+)['"]?:\s*([^,}]+)/g))
+          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 + '}$');
           });
@@ -838,6 +799,7 @@ export class RawSet {
         // 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()) ?? [];
+        targetElementNames.push(...RawSet.DR_ELEMENTS)
         const isElement =
           targetElementNames.includes(element.tagName.toLowerCase()) ||
           targetElementNames.includes(targetElementIs?.toLowerCase() as any);
@@ -854,8 +816,8 @@ export class RawSet {
         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);
+          element.getAttributeNames().filter(it => !EventManager.noDetectAttr.includes(it)).filter(it => {
+            const value = element.getAttribute(it)?.trim();
 
             // link일때
             if (value && linkNames.includes(it)) {
@@ -863,9 +825,10 @@ export class RawSet {
             } else if (value && RawSet.isExpression(value)) {
               // 표현식있을떄
               const variablePaths: { origin: string; inner: string }[] = RawSet.expressionGroups(value).map(it => ({
-                origin: it[0],
-                inner: it[1]
+                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];
@@ -884,10 +847,24 @@ export class RawSet {
 
               if (cval === null) {
                 element.removeAttribute(it);
+                /* TODO: 여기 더 추가되어야될듯
+                 TODO: 훔..... 없어도될듯?
+                *
+    <select dr-event-change="@this@.onMarketChange($event)" class="market-select">
+        <option>마켓 선택 (${@this@.markets?.length??0}$개)</option>
+        <option dr-for-of="@this@.markets" dr-option-item-variable-name="market" value="${#market#.uuid}$" dr-attr="{selected: #market#.uuid === @this@.marketUUID ? 'selected' : null}">
+          ${#market#.name}$
+        </option>
+      </select>
+                 */
+                // } else if (
+                //   !(element.hasAttribute(RawSet.DR_VARIABLE_NAME_OPTIONNAME) || element.hasAttribute(RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME) || element.hasAttribute(RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME))
+                // ) {
+                //     element.setAttribute(it, cval);
               } else {
                 element.setAttribute(it, cval);
               }
-              normalAttrs.set(it, { originalAttrValue: value, variablePaths: variablePaths });
+              normalAttrs.set(it, { originalAttrValue: value, variablePaths: variablePaths, isStringTemplate });
               // normalAttrs.set(it, originVariable);
               // console.log('normalAttribute', it, variablePath);
             }
@@ -896,27 +873,27 @@ export class RawSet {
             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 ? NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
-          // console.log('acceptNodeReturn element', r);
-          return r;
+        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())));
         }
-        const r = NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
-        // console.log('acceptNodeReturn  nothing', r);
+        // if (isElement)  {
+        //   element.setAttribute('www', '@this@');
+        // }
+        const r = isAttr || isElement ? NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
+        // console.log('acceptNodeReturn element', r);
         return r;
       }
+      const r = NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
+      // console.log('acceptNodeReturn  nothing', r);
+      return r;
+    }
     )
 
     const pars: RawSet[] = [];
@@ -991,7 +968,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)}`;
@@ -1003,6 +981,7 @@ export class RawSet {
         // 여기서 등록한 component 추가한다.
         const targetElementIs = element.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(element.tagName.toLowerCase()) ||
           targetElementNames.includes(targetElementIs?.toLowerCase() as any);
@@ -1520,6 +1499,7 @@ export class RawSet {
     }
 
     // console.log('aa-asIs', targetElement.innerHTML);
+    const componentName = targetElement.getAttribute(RawSet.DR_VARIABLE_NAME_OPTIONNAME) ?? 'component';
     const optionThisName = targetElement.getAttribute(RawSet.DR_THIS_NAME_OPTIONNAME);
     // console.log('11111111111111', optionThisName)
     targetElement
@@ -1528,6 +1508,8 @@ export class RawSet {
     const thisRandom = this.drThisEncoding(targetElement, drThis, { asIs: /@this@/g });
     // console.log('@@@@@@@@@@@@@0', thisRandom);
     // let thisNameRandom: string | undefined = undefined;
+    targetElement.innerHTML = targetElement.innerHTML.replaceAll(`#${componentName}#`, drThis);
+
     if (optionThisName) {
       // console.log('-----0', element.innerHTML, '\n', targetElement.innerHTML)
       targetElement.innerHTML = targetElement.innerHTML.replaceAll(`@${optionThisName}@`, drThis);
@@ -1721,61 +1703,9 @@ 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 applayTemplateEscape = ConvertUtils.escapeHTML(element.innerHTML);
         let innerHTMLThisRandom;
         const componentName = element.getAttribute(RawSet.DR_VARIABLE_NAME_OPTIONNAME) ?? 'component';
         const innerHTMLName = element.getAttribute(RawSet.DR_INNER_HTML_NAME_OPTIONNAME) ?? 'innerHTML';
@@ -1862,7 +1792,8 @@ export class RawSet {
           // d.innerHTML='<a></a>'
           // console.log('-----XX', ElementUtils.toInnerHTML(data, {document: config.window.document}));
           // template.innerHTML = template.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
-          template.innerHTML = ElementUtils.toInnerHTML(data, {document: config.window.document}).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;
@@ -1966,31 +1897,24 @@ export class RawSet {
         const variablePaths = v.variablePaths;
         let targetScript = v.originalAttrValue.trim();
 
-        let checktargetScript = v.originalAttrValue.trim();
-        variablePaths.forEach(it => {
-          checktargetScript = targetScript.replaceAll(it.origin, '');
-        })
-
-
         //중요!! expression 하나만 존재 및 그외것들이 없을때  그자체가 값이다 그외 여러개 있으면 문자열 합치는걸로 간주한다.
-        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 {
+        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: isScriptValue ? targetScript : '`' + targetScript + '`' },
+          { 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;
   }
 }

package/src/routers/HashRouter.ts

@@ -89,6 +89,10 @@ export class HashRouter extends Router {
     return LocationUtils.hashPath(this.config.window) || '/';
   }
 
+  getSearch(): string {
+    return LocationUtils.hashSearch(this.config.window);
+  }
+
   getHashSearchParams(data?:{delete?:string[], append?:[[string, string]]}): URLSearchParams {
     const hash = this.config.window.location.hash;
     const queryIndex = hash.indexOf('?');

package/src/routers/PathRouter.ts

@@ -66,6 +66,7 @@ export class PathRouter extends Router {
 
   getUrl(): string {
     if (!this.config.window.document?.location?.href) {
+      //if ((!this.config.window.document?.location?.href) || (this.config.window.document?.location?.href === 'about:blank')) {
       return '/';
     }
     const url = new URL(this.config.window.document.location?.href);
@@ -80,6 +81,10 @@ export class PathRouter extends Router {
     return this.config.window.location?.pathname??'/';
   }
 
+  getSearch(): string {
+    return this.config.window.location?.search??'';
+  }
+
   getHashSearchParams(data?:{delete?:string[], append?:[[string, string]]}): URLSearchParams {
     // http://local.com/#wow=222&wow=bb&z=2
     const searchParams =  new URLSearchParams(this.config.window.location?.hash.slice(1)??'');