@dooboostore/dom-render 1.0.111 → 1.0.113

package/src/rawsets/RawSet.ts

@@ -1,9 +1,9 @@
-import { RandomUtils } from '@dooboostore/core/random/RandomUtils';
-import { StringUtils } from '@dooboostore/core/string/StringUtils';
+import { RandomUtils } from '@dooboostore/core';
+import { StringUtils } from '@dooboostore/core';
 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';
+import { Range } from '@dooboostore/core';
+import { ElementUtils } from '@dooboostore/core-web';
 import { ComponentSet } from '../components/ComponentSet';
 import { DrPre } from '../operators/DrPre';
 import { Dr } from '../operators/Dr';
@@ -30,7 +30,7 @@ import { RawSetType } from './RawSetType';
 import { Render } from './Render';
 import { DrThisProperty } from '../operators/DrThisProperty';
 import { RawSetOperatorType } from './RawSetOperatorType';
-import { CssParser, CssRule, isStyleRule, isAtRule } from '@dooboostore/core/parser/css/CssParser';
+import { CssParser, CssRule, isStyleRule, isAtRule } from '@dooboostore/core';
 import { isOnCreateRenderData, OnCreateRenderDataParams } from '../lifecycle/OnCreateRenderData';
 import { isOnCreateRender } from '../lifecycle/OnCreateRender';
 import { isOnChangeAttrRender } from '../lifecycle/OnChangeAttrRender';
@@ -38,12 +38,14 @@ import { isOnInitRender } from '../lifecycle/OnInitRender';
 import { isOnCreatedThisChild } from '../lifecycle/OnCreatedThisChild';
 import { isOnDestroyRender, OnDestroyRenderParams } from '../lifecycle/OnDestroyRender';
 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';
+import { ObjectUtils } from '@dooboostore/core';
+import { NodeUtils } from '@dooboostore/core-web';
+import { ConvertUtils } from '@dooboostore/core';
+import { DomRenderComponentMetaKey } from './index';
 
 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 +63,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';
@@ -85,7 +89,13 @@ export class RawSet {
 
   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_VARIABLE_NAME_OPTIONNAME_DEFAULT = 'it';
   public static readonly DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME = 'dr-option-item-index-variable-name';
+  public static readonly DR_ITEM_OFFSET_INDEX_VARIABLE_NAME_OPTIONNAME = 'dr-option-item-offset-index-variable-name';
+  public static readonly DR_ITEM_INDEX_OFFSET_OPTIONNAME = 'dr-option-item-index-offset';
+  public static readonly DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME_DEFAULT = 'index';
+  public static readonly DR_ITEM_OFFSET_INDEX_VARIABLE_NAME_OPTIONNAME_DEFAULT = 'offsetIndex';
+
   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';
@@ -95,10 +105,6 @@ export class RawSet {
 
   public static readonly DR_ON_CREATE_ARGUMENTS_OPTIONNAME = 'dr-on-create:arguments';
   public static readonly DR_ON_CREATED_CALLBACK_OPTIONNAME = 'dr-on-create:callback';
-  /**  우선 쓰는곳이 없어서 deprecated를 걸어놨음
-  @deprecated
-  */
-  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 = {
@@ -127,7 +133,12 @@ export class RawSet {
     drDetectIfOption: RawSet.DR_DETECT_IF_OPTIONNAME,
     drDestroyOption: RawSet.DR_DESTROY_OPTIONNAME,
     drHasKeysOption: RawSet.DR_HAS_KEYS_OPTIONNAME,
-    drKeyOption: RawSet.DR_KEY_OPTIONNAME
+    drKeyOption: RawSet.DR_KEY_OPTIONNAME,
+    drItemIndexOffsetOption: RawSet.DR_ITEM_INDEX_OFFSET_OPTIONNAME,
+    drVariableNameOption: RawSet.DR_VARIABLE_NAME_OPTIONNAME,
+    drItemVariableNameOption: RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME,
+    drItemIndexVariableNameOption: RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME,
+    drItemOffsetIndexVariableNameOption: RawSet.DR_ITEM_OFFSET_INDEX_VARIABLE_NAME_OPTIONNAME
   };
 
   public static readonly DR_TAGS = [];
@@ -136,6 +147,8 @@ 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 +162,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;
 
@@ -179,9 +192,7 @@ 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;
   }
 
   // 중요
@@ -201,12 +212,7 @@ export class RawSet {
         // console.log('--', expressionGroups, script)
       } else if (cNode.nodeType === Node.ELEMENT_NODE) {
         const element = cNode as Element;
-        const targetAttrNames = (config?.targetAttrs?.map(it => it.name) ?? []).concat(
-          RawSet.DR_ATTRIBUTES,
-          RawSet.DR_DETECT_FILTER_OPTIONNAME,
-          RawSet.DR_DETECT_IF_OPTIONNAME,
-          RawSet.DR_DETECT_ATTR_OPTIONNAME
-        ); // .concat(EventManager.normalAttrMapAttrName);
+        const targetAttrNames = (config?.targetAttrs?.map(it => it.name) ?? []).concat(RawSet.DR_ATTRIBUTES, RawSet.DR_DETECT_FILTER_OPTIONNAME, RawSet.DR_DETECT_IF_OPTIONNAME, RawSet.DR_DETECT_ATTR_OPTIONNAME); // .concat(EventManager.normalAttrMapAttrName);
         const targetScripts = targetAttrNames
           .map(it => element.getAttribute(it))
           .filter(it => it)
@@ -271,8 +277,67 @@ 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 +396,12 @@ 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);
@@ -380,145 +439,33 @@ export class RawSet {
           drDestroyOption: this.getAttributeAndDelete(element, RawSet.DR_DESTROY_OPTIONNAME),
           drKeyOption: this.getAttributeAndDelete(element, RawSet.DR_KEY_OPTIONNAME),
           drDetectIfOption: this.getAttribute(element, RawSet.DR_DETECT_IF_OPTIONNAME),
-          drHasKeysOption: this.getAttribute(element, RawSet.DR_HAS_KEYS_OPTIONNAME)
+          drHasKeysOption: this.getAttribute(element, RawSet.DR_HAS_KEYS_OPTIONNAME),
+          drItemIndexOffsetOption: this.getAttributeAndDelete(element, RawSet.DR_ITEM_INDEX_OFFSET_OPTIONNAME),
+          drVariableNameOption: this.getAttributeAndDelete(element, RawSet.DR_VARIABLE_NAME_OPTIONNAME),
+          drItemVariableNameOption: this.getAttributeAndDelete(element, RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME),
+          drItemIndexVariableNameOption: this.getAttributeAndDelete(element, RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME),
+          drItemOffsetIndexVariableNameOption: this.getAttributeAndDelete(element, RawSet.DR_ITEM_OFFSET_INDEX_VARIABLE_NAME_OPTIONNAME)
         };
         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) {
@@ -542,13 +489,16 @@ export class RawSet {
 
     // 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 +517,7 @@ export class RawSet {
         );
       }
     });
+    // console.log(`RawSet drAttrs.forEach took ${performance.now() - t0} milliseconds.`);
 
     // 중요 style isolation 나중에 :scope로 대체 가능할듯.
     // 2023.9.4일 없앰  style 처음들어올때 처리하는걸로 바꿈
@@ -576,6 +527,8 @@ 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,25 +560,30 @@ 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) {
-      Object.entries(obj.__domrender_components).forEach(([key, value]) => {
+    if (obj[DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY]) {
+      Object.entries(obj[DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY]).forEach(([key, value]) => {
         const rawSet = (value as any).__rawSet as RawSet;
         const drAttrs: Attrs | undefined = rawSet?.dataSet.render?.attribute;
         if (rawSet && !rawSet.isConnected) {
           const destroyOptions = drAttrs?.drDestroyOption?.split(',') ?? [];
-          RawSet.destroy(obj.__domrender_components[key], { rawSet: rawSet }, config, destroyOptions);
-          delete obj.__domrender_components[key];
+          RawSet.destroy(obj[DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY][key], { rawSet: rawSet }, config, destroyOptions);
+          delete obj[DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY][key];
         }
       });
     }
+    // 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 };
   }
 
@@ -654,6 +612,8 @@ export class RawSet {
       styleBody = styleBody.join('\n');
     }
     styleBody = styleBody.replaceAll('#uuid#', componentKey);
+    const { cleanedCss, importRules } = RawSet.extractCssImports(styleBody);
+    styleBody = cleanedCss;
     const start = `#${componentKey}-start`;
     const end = `#${componentKey}-end`;
     // 이거뭐하는지 까먹었네 뭐였지??..
@@ -677,9 +637,7 @@ export class RawSet {
         }
       } else if (isAtRule(rule)) {
         if (rule.name === 'media') {
-          const hasRoot = rule.children.some(
-            childRule => isStyleRule(childRule) && childRule.selector.includes(':root')
-          );
+          const hasRoot = rule.children.some(childRule => isStyleRule(childRule) && childRule.selector.includes(':root'));
           if (!hasRoot) {
             rule.children.forEach(childRule => {
               if (isStyleRule(childRule)) {
@@ -705,6 +663,10 @@ export class RawSet {
     after = after.replaceAll('/*$', '${');
     after = after.replaceAll('$*/', '}$');
 
+    if (importRules.length) {
+      after = `${importRules.join('\n')}\n${after}`;
+    }
+
     if (styleTagWrap) {
       styleBody = `<style id='${componentKey}-style' domstyle>${after}</style>`;
     }
@@ -713,12 +675,57 @@ export class RawSet {
     return styleBody;
   }
 
+  private static extractCssImports(styleBody: string) {
+    const importRules: string[] = [];
+    let result = '';
+    let i = 0;
+    while (i < styleBody.length) {
+      const importIndex = styleBody.indexOf('@import', i);
+      if (importIndex === -1) {
+        result += styleBody.slice(i);
+        break;
+      }
+      result += styleBody.slice(i, importIndex);
+
+      let j = importIndex + '@import'.length;
+      let inSingleQuote = false;
+      let inDoubleQuote = false;
+      let parenDepth = 0;
+      while (j < styleBody.length) {
+        const ch = styleBody[j];
+        if (ch === '\\') {
+          j += 2;
+          continue;
+        }
+        if (!inDoubleQuote && ch === "'") {
+          inSingleQuote = !inSingleQuote;
+        } else if (!inSingleQuote && ch === '"') {
+          inDoubleQuote = !inDoubleQuote;
+        } else if (!inSingleQuote && !inDoubleQuote) {
+          if (ch === '(') {
+            parenDepth += 1;
+          } else if (ch === ')' && parenDepth > 0) {
+            parenDepth -= 1;
+          } else if (ch === ';' && parenDepth === 0) {
+            j += 1;
+            break;
+          }
+        }
+        j += 1;
+      }
+      const importRule = styleBody.slice(importIndex, j).trim();
+      if (importRule) {
+        importRules.push(importRule);
+      }
+      i = j;
+    }
+    return { cleanedCss: result, importRules };
+  }
+
   public applyEvent(obj: any, fragment = this.dataSet.fragment, config?: DomRenderConfig) {
-    this.dataSet.config.eventManager.applyEvent(
-      obj,
-      this.dataSet.config.eventManager.findAttrElements(fragment, config),
-      config
-    );
+    // 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) {
@@ -743,10 +750,7 @@ 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;
@@ -805,10 +809,7 @@ export class RawSet {
         // 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;
+        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;
@@ -825,13 +826,15 @@ export class RawSet {
           return r;
         }
         if (element.hasAttribute(EventManager.attrAttrName)) {
-        // console.log('elementAttrAttrName-->', element.outerHTML);
+          // 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 => ({
+          // 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 + '}$');
           });
@@ -839,9 +842,8 @@ 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()) ?? [];
-        const isElement =
-          targetElementNames.includes(element.tagName.toLowerCase()) ||
-          targetElementNames.includes(targetElementIs?.toLowerCase() as any);
+        targetElementNames.push(...RawSet.DR_ELEMENTS);
+        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';
@@ -855,71 +857,84 @@ 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)?.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);
+          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);
+                  /* 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, isStringTemplate });
+                // normalAttrs.set(it, originVariable);
+                // console.log('normalAttribute', it, variablePath);
               }
-              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(
-              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;
+              // 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())));
         }
-        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[] = [];
     let currentNode: Node | null;
@@ -1006,9 +1021,8 @@ export class RawSet {
         // 여기서 등록한 component 추가한다.
         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);
+        targetElementNames.push(...RawSet.DR_ELEMENTS);
+        const isElement = targetElementNames.includes(element.tagName.toLowerCase()) || targetElementNames.includes(targetElementIs?.toLowerCase() as any);
         // if (isElement) {
         //   (element as HTMLElement).style.display = 'none'
         // }
@@ -1143,30 +1157,19 @@ export class RawSet {
   public static drItOtherEncoding(element: Element | DocumentFragment, postFix?: string) {
     const random = RandomUtils.uuid() + postFix;
     const regex = /#it#/g;
-    element
-      .querySelectorAll(
-        `[${RawSet.DR_IT_OPTIONNAME}], [${RawSet.DR_FOR_OF_NAME}], [${RawSet.DR_REPEAT_NAME}], [${RawSet.DR_APPENDER_NAME}]`
-      )
-      .forEach(it => {
-        it.innerHTML = it.innerHTML.replace(regex, random);
-      });
+    element.querySelectorAll(`[${RawSet.DR_IT_OPTIONNAME}], [${RawSet.DR_FOR_OF_NAME}], [${RawSet.DR_REPEAT_NAME}], [${RawSet.DR_APPENDER_NAME}]`).forEach(it => {
+      it.innerHTML = it.innerHTML.replace(regex, random);
+    });
     return random;
   }
 
   public static drItOtherDecoding(element: Element | DocumentFragment, random: string) {
-    element
-      .querySelectorAll(
-        `[${RawSet.DR_IT_OPTIONNAME}], [${RawSet.DR_FOR_OF_NAME}], [${RawSet.DR_REPEAT_NAME}], [${RawSet.DR_APPENDER_NAME}]`
-      )
-      .forEach(it => {
-        it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
-      });
+    element.querySelectorAll(`[${RawSet.DR_IT_OPTIONNAME}], [${RawSet.DR_FOR_OF_NAME}], [${RawSet.DR_REPEAT_NAME}], [${RawSet.DR_APPENDER_NAME}]`).forEach(it => {
+      it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
+    });
   }
 
-  public static drVarDecoding(
-    element: Element,
-    vars: { name: string; value: string; regex: RegExp; random: string }[]
-  ) {
+  public static drVarDecoding(element: Element, vars: { name: string; value: string; regex: RegExp; random: string }[]) {
     element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
       vars
         .filter(vit => vit.value && vit.name)
@@ -1223,28 +1226,20 @@ export class RawSet {
     return thisRandom;
   }
 
-  public static drThisBindEncoding(
-    element: Element,
-    variable: RegExp,
-    config: { config: DomRenderConfig; otherReplaceVariablePath?: string }
-  ) {
+  public static drThisBindEncoding(element: Element, variable: RegExp, config: { config: DomRenderConfig; otherReplaceVariablePath?: string }) {
     element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(eIt => {
       let message = eIt.innerHTML;
       // StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(it => {
       StringUtils.regexExec(variable, message)
         .reverse()
         .forEach(it => {
-          message =
-            message.substr(0, it.index) +
-            message.substr(it.index).replace(it[0], `${it[1] ?? ''}${eIt.getAttribute(RawSet.DR_THIS_NAME)}`);
+          message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], `${it[1] ?? ''}${eIt.getAttribute(RawSet.DR_THIS_NAME)}`);
         });
       eIt.innerHTML = message;
     });
 
     const targetElements = config.config.targetElements ?? [];
-    const targetElementNames = targetElements
-      .map(it => it.name.replaceAll('.', '\\.').replaceAll(':', '\\:'))
-      .join(',');
+    const targetElementNames = targetElements.map(it => it.name.replaceAll('.', '\\.').replaceAll(':', '\\:')).join(',');
     const thisRandom = RandomUtils.uuid();
     // console.log('thisRandom', thisRandom, variable);
     element.querySelectorAll(targetElementNames).forEach(it => {
@@ -1260,9 +1255,7 @@ export class RawSet {
       StringUtils.regexExec(variable, message)
         .reverse()
         .forEach(it => {
-          message =
-            message.substr(0, it.index) +
-            message.substr(it.index).replace(it[0], `${it[1] ?? ''}${config.otherReplaceVariablePath}`);
+          message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], `${it[1] ?? ''}${config.otherReplaceVariablePath}`);
         });
       element.innerHTML = message;
     }
@@ -1271,9 +1264,7 @@ export class RawSet {
 
   public static drThisBindDecoding(element: Element, config: { asIs: string; toBe: string; config: DomRenderConfig }) {
     const targetElements = config.config.targetElements ?? [];
-    const targetElementNames = targetElements
-      .map(it => it.name.replaceAll('.', '\\.').replaceAll(':', '\\:'))
-      .join(',');
+    const targetElementNames = targetElements.map(it => it.name.replaceAll('.', '\\.').replaceAll(':', '\\:')).join(',');
     element.querySelectorAll(targetElementNames).forEach(it => {
       it.innerHTML = it.innerHTML.replace(RegExp(config.asIs, 'g'), config.toBe);
     });
@@ -1344,16 +1335,7 @@ export class RawSet {
     return vars;
   }
 
-  public static async drThisCreate(
-    rawSet: RawSet,
-    element: Element,
-    drThis: string,
-    drVarOption: string,
-    drStripOption: boolean | string | null,
-    obj: any,
-    config: DomRenderConfig,
-    set?: ComponentSet
-  ): Promise<DocumentFragment | undefined> {
+  public static async drThisCreate(rawSet: RawSet, element: Element, drThis: string, drVarOption: string, drStripOption: boolean | string | null, obj: any, config: DomRenderConfig, set?: ComponentSet): Promise<DocumentFragment | undefined> {
     // console.log('ttttttttttttttttttttt',element.innerHTML, drThis, set, obj);
     const fag = config.window.document?.createDocumentFragment();
     if (!fag) {
@@ -1363,9 +1345,10 @@ export class RawSet {
     let targetObj = obj;
     if (set) {
       targetObj = set.obj;
-      set.setTemplateStyle(await RawSet.fetchTemplateStyle(set));
-      const style = RawSet.generateStyleTransform(set.styles ?? [], rawSet.uuid, true);
-      targetElement.innerHTML = style + (set.template ?? '');
+      const templateStringSet = await RawSet.fetchTemplateStyle(set, targetObj);
+      set.setTemplateStyle(templateStringSet);
+      const style = RawSet.generateStyleTransform(templateStringSet.styles ?? [], rawSet.uuid, true);
+      targetElement.innerHTML = style + (templateStringSet.template ?? '');
     } else {
       targetObj = ObjectUtils.Script.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(drThis), obj);
     }
@@ -1417,11 +1400,8 @@ export class RawSet {
     render = Object.freeze(render);
 
     // dr-on-create data onCreateRender
-    const onCreateDataScript = `return {rootParent: this, render: this.__render}`;
-    const onCreateDataParam = ObjectUtils.Script.evaluate<OnCreateRenderDataParams>(
-      onCreateDataScript,
-      Object.assign(obj, { __render: render })
-    );
+    const onCreateDataScript = `{rootParent: this, render: this.__render}`;
+    const onCreateDataParam = ObjectUtils.Script.evaluateReturn<OnCreateRenderDataParams>(onCreateDataScript, Object.assign(obj, { __render: render }));
     if (isOnCreateRenderData(targetObj)) {
       targetObj?.onCreateRenderData(onCreateDataParam as OnCreateRenderDataParams);
     }
@@ -1434,10 +1414,7 @@ export class RawSet {
     const onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
     let createParam: any[] = [];
     if (onCreate) {
-      createParam = ObjectUtils.Script.evaluateReturn<any[]>(
-        { bodyScript: renderScript, returnScript: ObjectUtils.Path.toOptionalChainPath(onCreate) },
-        obj
-      );
+      createParam = ObjectUtils.Script.evaluateReturn<any[]>({ bodyScript: renderScript, returnScript: ObjectUtils.Path.toOptionalChainPath(onCreate) }, obj);
       if (!Array.isArray(createParam)) {
         createParam = [createParam];
       }
@@ -1523,14 +1500,15 @@ 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
-      .getAttributeNames()
-      .forEach(it => targetElement.setAttribute(it, targetElement.getAttribute(it)!.replace(/#this#/g, drThis)));
+    targetElement.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', 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);
@@ -1582,21 +1560,31 @@ export class RawSet {
     return fag;
   }
 
-  private static async fetchTemplateStyle(set: { template?: string; styles?: string | string[] }) {
+  private static async fetchTemplateStyle<T>(set: { template?: string | ((instance: T) => Promise<string> | string); styles?: string | string[] | ((instance: T) => Promise<string | string[]> | string | string[]) }, obj?: T) {
     // const id = RandomUtils.getRandomString(20);
     const stylePromises: Promise<string>[] = [];
-    const templatePromise =
-      set.template && set.template.startsWith('lazy://')
-        ? (await fetch(set.template.substring(6))).text()
-        : Promise.resolve(set.template);
-    if (Array.isArray(set.styles)) {
-      for (let i = 0; set.styles && i < (set.styles.length ?? 0); i++) {
-        const it = set.styles[i];
-        stylePromises.push(it.startsWith('lazy://') ? (await fetch(it.substring(6))).text() : Promise.resolve(it));
+
+    const resolveLazy = async (value?: string) => {
+      if (!value) {
+        return value;
       }
-    } else if (set.styles) {
-      stylePromises.push(Promise.resolve(set.styles));
+      return value.startsWith('lazy://') ? (await fetch(value.substring(6))).text() : value;
+    };
+
+    const templateValue = typeof set.template === 'function' ? await set.template(obj as T) : set.template;
+    const templatePromise = typeof templateValue === 'string' ? resolveLazy(templateValue) : Promise.resolve(templateValue);
+
+    const stylesValue = typeof set.styles === 'function' ? await set.styles(obj as T) : set.styles;
+
+    if (Array.isArray(stylesValue)) {
+      for (let i = 0; i < stylesValue.length; i++) {
+        const it = stylesValue[i];
+        stylePromises.push(resolveLazy(it) as Promise<string>);
+      }
+    } else if (typeof stylesValue === 'string') {
+      stylePromises.push(resolveLazy(stylesValue) as Promise<string>);
     }
+
     // const tempTemplate = config.window.document.createElement('template');
     // tempTemplate.innerHTML = await templatePromise;
     // const tempContainer = config.window.document.createElement('div');
@@ -1606,11 +1594,7 @@ export class RawSet {
     };
   }
 
-  public static createComponentTargetAttribute(
-    name: string,
-    getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any,
-    factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment
-  ) {
+  public static createComponentTargetAttribute(name: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment) {
     const targetAttribute: TargetAttr = {
       name,
       callBack(element: Element, attrValue: string, obj: any, rawSet: RawSet): DocumentFragment {
@@ -1631,36 +1615,16 @@ export class RawSet {
     return targetAttribute;
   }
 
-  public static createComponentTargetElement({
-    name,
-    objFactory,
-    template = '',
-    styles = [],
-    noStrip
-  }: {
-    name: string;
-    noStrip?: boolean;
-    objFactory: (element: Element, obj: any, rawSet: RawSet, counstructorParam: any[]) => any;
-    template?: string;
-    styles?: string | string[];
-  }): TargetElement {
-    const targetElement: TargetElement = {
+  public static createComponentTargetElement<T = any>({ name, objFactory, template = '', styles = [], noStrip }: { name: string; noStrip?: boolean; objFactory: (element: Element, obj: any, rawSet: RawSet, counstructorParam: any[]) => any; template?: string | ((instance: T) => Promise<string>); styles?: string | string[] | ((instance: T) => Promise<string>) }): TargetElement<T> {
+    const targetElement: TargetElement<T> = {
       name,
-      styles,
-      template,
+      styles: styles,
+      template: template,
       noStrip,
-      async callBack(
-        element: Element,
-        obj: any,
-        rawSet: RawSet,
-        attrs: Attrs,
-        config: DomRenderConfig
-      ): Promise<DocumentFragment | undefined> {
-        const templateStyle = await RawSet.fetchTemplateStyle({ template: this.template, styles: this.styles });
-        this.template = templateStyle.template;
-        this.styles = templateStyle.styles;
-        obj.__domrender_components ??= {};
-        const domrenderComponents = obj.__domrender_components;
+      async callBack(element: Element, obj: any, rawSet: RawSet, attrs: Attrs, config: DomRenderConfig): Promise<DocumentFragment | undefined> {
+        obj[DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY] ??= {};
+        const domrenderComponents = obj[DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY];
+
         // debugger;
         const renderScript = ` /*createComponentTargetElement*/
             var ${EventManager.RAWSET_VARNAME} = this.__render.rawSet; 
@@ -1702,11 +1666,7 @@ export class RawSet {
         //
         // // dr-constructor
         if (constructor) {
-          let param =
-            ObjectUtils.Script.evaluateReturn(
-              { bodyScript: renderScript, returnScript: ObjectUtils.Path.toOptionalChainPath(constructor) },
-              Object.assign(obj, { __render: render })
-            ) ?? [];
+          let param = ObjectUtils.Script.evaluateReturn({ bodyScript: renderScript, returnScript: ObjectUtils.Path.toOptionalChainPath(constructor) }, Object.assign(obj, { __render: render })) ?? [];
           if (!Array.isArray(param)) {
             param = [param];
           }
@@ -1714,7 +1674,7 @@ export class RawSet {
         }
 
         // // console.log('------22', attrs);
-        const instance = (domrenderComponents[rawSet.uuid] = objFactory(element, obj, rawSet, constructorParam));
+        const instance = (domrenderComponents[rawSet.uuid] = await objFactory(element, obj, rawSet, constructorParam));
         render = {
           currentThis: instance,
           // creatorMetaData: i,
@@ -1724,9 +1684,13 @@ export class RawSet {
         // 추적 및 destroy 위해.
         instance.__rawSet = rawSet;
 
+        const templateStyle = await RawSet.fetchTemplateStyle({ template: this.template, styles: this.styles }, instance);
+        this.template = templateStyle.template;
+        this.styles = templateStyle.styles;
+
         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';
@@ -1757,7 +1721,7 @@ export class RawSet {
         // 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 ?? ''), [
+        applayTemplate = StringUtils.replaceSequentially(this.template ?? '', [
           {
             regex: new RegExp(`#${innerHTMLName}#`, 'g'),
             callback: () => applayTemplate
@@ -1786,15 +1750,7 @@ export class RawSet {
 
         // 여기서 targetElement의 옷을 벗긴다.
         // console.log('---createComponentTargetElement', element);
-        let data = await RawSet.drThisCreate(
-          rawSet,
-          element,
-          `this.__domrender_components.${rawSet.uuid}`,
-          '',
-          !noStrip,
-          obj,
-          config
-        );
+        let data = await RawSet.drThisCreate(rawSet, element, `this.${DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY}.${rawSet.uuid}`, '', !noStrip, obj, config);
         // const tempDiv = document.createElement("div");
         // tempDiv.appendChild(data.cloneNode(true)); // 원본 보존
         // console.log('-------------ddddddddddddd', element.innerHTML, tempDiv.innerHTML);
@@ -1813,8 +1769,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.');
-            let s = ElementUtils.toInnerHTML(data, {document: config.window.document});
-            template.innerHTML = s.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;
@@ -1840,12 +1796,7 @@ export class RawSet {
     return StringUtils.regexExec(reg, data ?? '');
   }
 
-  public static destroy(
-    obj: any | undefined,
-    parameter: OnDestroyRenderParams,
-    config: DomRenderConfig,
-    destroyOptions: (DestroyOptionType | string)[] = []
-  ): void {
+  public static destroy(obj: any | undefined, parameter: OnDestroyRenderParams, config: DomRenderConfig, destroyOptions: (DestroyOptionType | string)[] = []): void {
     // console.log('destroy destroydestroydestroydestroy', obj, parameter, config, destroyOptions);
     if (!destroyOptions.some(it => it === DestroyOptionType.NO_DESTROY)) {
       if (!destroyOptions.some(it => it === DestroyOptionType.NO_MESSENGER_DESTROY)) {
@@ -1853,6 +1804,11 @@ export class RawSet {
           config.messenger.deleteChannelFromObj(obj);
         }
       }
+
+      if (obj && obj.onDestroy === 'function') {
+        obj.onDestroy();
+      }
+
       // console.log('------------destroy', obj);
       if (isOnDestroyRender(obj)) {
         obj.onDestroyRender?.(parameter);
@@ -1892,11 +1848,7 @@ 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);
@@ -1919,23 +1871,20 @@ export class RawSet {
         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.isStringTemplate ? '`' + targetScript + '`' : targetScript },
-          Object.assign(config.obj, config.renderData ? { __render: config.renderData } : undefined)
-        );
+        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.isStringTemplate ? '`' + targetScript + '`' : targetScript }, Object.assign(config.obj, config.renderData ? { __render: config.renderData } : undefined));
         attribute[k] = cval;
       });
     }
-      // console.log('attribute', attribute);
+    // console.log('attribute', attribute);
     return attribute;
   }
 }