@dooboostore/dom-render 1.0.111 → 1.0.113

package/dist/cjs/rawsets/RawSet.js

@@ -20,11 +20,11 @@ __export(RawSet_exports, {
   RawSet: () => RawSet
 });
 module.exports = __toCommonJS(RawSet_exports);
-var import_RandomUtils = require("@dooboostore/core/random/RandomUtils");
-var import_StringUtils = require("@dooboostore/core/string/StringUtils");
+var import_core = require("@dooboostore/core");
+var import_core2 = require("@dooboostore/core");
 var import_EventManager = require("../events/EventManager");
-var import_Range = require("../iterators/Range");
-var import_ElementUtils = require("@dooboostore/core-web/element/ElementUtils");
+var import_core3 = require("@dooboostore/core");
+var import_core_web = require("@dooboostore/core-web");
 var import_DrPre = require("../operators/DrPre");
 var import_Dr = require("../operators/Dr");
 var import_DrIf = require("../operators/DrIf");
@@ -44,7 +44,7 @@ var import_DestroyOptionType = require("./DestroyOptionType");
 var import_RawSetType = require("./RawSetType");
 var import_DrThisProperty = require("../operators/DrThisProperty");
 var import_RawSetOperatorType = require("./RawSetOperatorType");
-var import_CssParser = require("@dooboostore/core/parser/css/CssParser");
+var import_core4 = require("@dooboostore/core");
 var import_OnCreateRenderData = require("../lifecycle/OnCreateRenderData");
 var import_OnCreateRender = require("../lifecycle/OnCreateRender");
 var import_OnChangeAttrRender = require("../lifecycle/OnChangeAttrRender");
@@ -52,9 +52,10 @@ var import_OnInitRender = require("../lifecycle/OnInitRender");
 var import_OnCreatedThisChild = require("../lifecycle/OnCreatedThisChild");
 var import_OnDestroyRender = require("../lifecycle/OnDestroyRender");
 var import_DrTargetElementIsElement = require("../operators/DrTargetElementIsElement");
-var import_ObjectUtils = require("@dooboostore/core/object/ObjectUtils");
-var import_NodeUtils = require("@dooboostore/core-web/node/NodeUtils");
-var import_ConvertUtils = require("@dooboostore/core/convert/ConvertUtils");
+var import_core5 = require("@dooboostore/core");
+var import_core_web2 = require("@dooboostore/core-web");
+var import_core6 = require("@dooboostore/core");
+var import_index = require("./index");
 const _RawSet = class _RawSet {
   constructor(uuid, type, point, dataSet, detect) {
     this.uuid = uuid;
@@ -65,15 +66,15 @@ const _RawSet = class _RawSet {
     this.findNearThis = (obj, rawSet = this) => {
       const path = this.findNearThisPath(rawSet);
       if (path) {
-        const optionalPath = import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(path);
-        return import_ObjectUtils.ObjectUtils.Script.evaluateReturn(optionalPath, obj);
+        const optionalPath = import_core5.ObjectUtils.Path.toOptionalChainPath(path);
+        return import_core5.ObjectUtils.Script.evaluateReturn(optionalPath, obj);
       }
     };
     this.findParentThis = (obj, rawSet = this) => {
       const path = this.findParentThisPath(rawSet);
       if (path) {
-        const optionalPath = import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(path);
-        return import_ObjectUtils.ObjectUtils.Script.evaluateReturn(optionalPath, obj);
+        const optionalPath = import_core5.ObjectUtils.Path.toOptionalChainPath(path);
+        return import_core5.ObjectUtils.Script.evaluateReturn(optionalPath, obj);
       }
     };
     this.findNearThisPath = (rawSet = this) => {
@@ -115,12 +116,7 @@ const _RawSet = class _RawSet {
         }
       } else if (cNode.nodeType === Node.ELEMENT_NODE) {
         const element = cNode;
-        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
-        );
+        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);
         const targetScripts = targetAttrNames.map((it) => element.getAttribute(it)).filter((it) => it).map((it) => `(${it})`);
         const targetAttrMap = element.getAttribute(import_EventManager.EventManager.normalAttrMapAttrName);
         if (targetAttrMap) {
@@ -136,15 +132,57 @@ const _RawSet = class _RawSet {
         import_EventManager.EventManager.VARNAMES.forEach((it) => {
           script = script.replace(RegExp(it.replace("$", "\\$"), "g"), `this.___${it}`);
         });
-        Array.from(import_ObjectUtils.ObjectUtils.Path.detectPathFromScript(script, { excludeThis: true })).filter((it) => !it.startsWith(`___${import_EventManager.EventManager.SCRIPTS_VARNAME}`)).forEach((it) => usingTriggerVariables.add(it));
+        Array.from(import_core5.ObjectUtils.Path.detectPathFromScript(script, { excludeThis: true })).filter((it) => !it.startsWith(`___${import_EventManager.EventManager.SCRIPTS_VARNAME}`)).forEach((it) => usingTriggerVariables.add(it));
       }
     });
     return usingTriggerVariables;
   }
-  // 중요 render 처리 부분
-  // public async render(obj: any, config: DomRenderConfig): Promise<RawSet[]> {
-  // }
   async render(obj, config) {
+    if (this.dataSet.fragment.childNodes.length === 1 && this.dataSet.fragment.childNodes[0].nodeType === Node.TEXT_NODE) {
+      const textContent = this.dataSet.fragment.childNodes[0].textContent;
+      if (textContent) {
+        const runText = _RawSet.expressionGroups(textContent)[0][1];
+        const __render = {
+          rawSet: this,
+          scripts: import_EventManager.EventManager.setBindProperty(config?.scripts, obj),
+          router: config?.router,
+          range: import_core3.Range.range,
+          element: this.dataSet.fragment.childNodes[0],
+          attribute: {},
+          rootObject: obj,
+          scriptUtils: import_core5.ObjectUtils.Script,
+          nearThis: this.findNearThis(obj),
+          parentThis: this.findParentThis(obj),
+          bindScript: ` /** render **/
+                      const ${import_EventManager.EventManager.SCRIPTS_VARNAME} = this.__render.scripts;
+                      const ${import_EventManager.EventManager.RAWSET_VARNAME} = this.__render.rawSet;
+                      const ${import_EventManager.EventManager.ELEMENT_VARNAME} = this.__render.element;
+                      const ${import_EventManager.EventManager.ATTRIBUTE_VARNAME} = this.__render.attribute;
+                      const ${import_EventManager.EventManager.RANGE_VARNAME} = this.__render.range;
+                      const ${import_EventManager.EventManager.ROUTER_VARNAME} = this.__render.router;
+                      const ${import_EventManager.EventManager.NEAR_THIS_VARNAME} = this.__render.nearThis;
+                      const ${import_EventManager.EventManager.PARENT_THIS_VARNAME} = this.__render.parentThis;
+                      const ${import_EventManager.EventManager.SCRIPT_UTILS_VARNAME} = this.__render.scriptUtils;
+                      const ${import_EventManager.EventManager.ROOT_OBJECT_VARNAME} = this.__render.rootObject;
+              `
+        };
+        try {
+          const newValue = import_core5.ObjectUtils.Script.evaluateReturn(
+            {
+              bodyScript: __render.bindScript,
+              returnScript: runText
+            },
+            Object.assign(obj, { __render })
+          );
+          const newValueStr = String(newValue);
+          if (this.lastRenderedValue === newValueStr) {
+            return { raws: [], executedOperators: [] };
+          }
+          this.lastRenderedValue = newValueStr;
+        } catch (e) {
+        }
+      }
+    }
     const genNode = config.window.document.importNode(this.dataSet.fragment, true);
     const raws = [];
     const onAttrInitCallBacks = [];
@@ -155,17 +193,17 @@ const _RawSet = class _RawSet {
     for (const cNode of Array.from(genNode.childNodes.values())) {
       let attribute = {};
       if (cNode.nodeType === Node.ELEMENT_NODE) {
-        attribute = import_ElementUtils.ElementUtils.getAttributeToObject(cNode);
+        attribute = import_core_web.ElementUtils.getAttributeToObject(cNode);
       }
       const __render = Object.freeze({
         rawSet: this,
         scripts: import_EventManager.EventManager.setBindProperty(config?.scripts, obj),
         router: config?.router,
-        range: import_Range.Range.range,
+        range: import_core3.Range.range,
         element: cNode,
         attribute,
         rootObject: obj,
-        scriptUtils: import_ObjectUtils.ObjectUtils.Script,
+        scriptUtils: import_core5.ObjectUtils.Script,
         nearThis: this.findNearThis(obj),
         parentThis: this.findParentThis(obj),
         bindScript: ` /** render **/
@@ -187,18 +225,12 @@ const _RawSet = class _RawSet {
         const runText = _RawSet.expressionGroups(textContent)[0][1];
         let newNode;
         if (textContent?.startsWith("#")) {
-          const r = import_ObjectUtils.ObjectUtils.Script.evaluate(
-            `${__render.bindScript} return ${runText}`,
-            Object.assign(obj, { __render })
-          );
+          const r = import_core5.ObjectUtils.Script.evaluateReturn({ bodyScript: __render.bindScript, returnScript: runText }, Object.assign(obj, { __render }));
           const template = config.window.document.createElement("template");
           template.innerHTML = r;
           newNode = template.content;
         } else {
-          const r = import_ObjectUtils.ObjectUtils.Script.evaluate(
-            `${__render.bindScript}  return ${runText}`,
-            Object.assign(obj, { __render })
-          );
+          const r = import_core5.ObjectUtils.Script.evaluateReturn({ bodyScript: __render.bindScript, returnScript: runText }, Object.assign(obj, { __render }));
           newNode = config.window.document.createTextNode(r);
         }
         cNode.parentNode?.replaceChild(newNode, cNode);
@@ -233,144 +265,32 @@ const _RawSet = 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 import_DrPre.DrPre(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_PRE_NAME, attr: drAttr.drPre, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.drPre },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_Dr.Dr(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_NAME, attr: drAttr.dr, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.dr },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
+          new import_DrPre.DrPre(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_PRE_NAME, attr: drAttr.drPre, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drPre }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_Dr.Dr(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_NAME, attr: drAttr.dr, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.dr }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
           // new Dr(this, __render, {raws, fag}, {element, attrName: EventManager.onRenderedInitAttrName, attr: drAttr.dr, attrs: drAttr}, {config, obj, operatorAround: config.operatorAround?.dr}, {onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks}),
-          new import_DrIf.DrIf(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_IF_NAME, attr: drAttr.drIf, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.drIf },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrStripElement.DrStripElement(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_STRIP_NAME, attr: drAttr.drStripElement, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.drThis },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrThis.DrThis(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_THIS_NAME, attr: drAttr.drThis, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.drThis },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrForm.DrForm(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_FOR_NAME, attr: drAttr.drForm, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.drForm },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrInnerText.DrInnerText(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_INNERTEXT_NAME, attr: drAttr.drInnerText, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.drInnerText },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrInnerHTML.DrInnerHTML(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_INNERHTML_NAME, attr: drAttr.drInnerHTML, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.drInnerHTML },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrFor.DrFor(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_FOR_NAME, attr: drAttr.drFor, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.drFor },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrForOf.DrForOf(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_FOR_OF_NAME, attr: drAttr.drForOf, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.drForOf },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrThisProperty.DrThisProperty(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_THIS_PROPERTY_NAME, attr: drAttr.drThisProperty, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.drThisProperty },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrAppender.DrAppender(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.drAppender },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrRepeat.DrRepeat(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrName: _RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr },
-            { config, obj, operatorAround: config.operatorAround?.drRepeat },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrTargetElementIsElement.DrTargetElementIsElement(
-            this,
-            __render,
-            { raws, fag },
-            {
-              element,
-              attrName: _RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME,
-              attr: drAttr.drReplaceTargetElementIs,
-              attrs: drAttr
-            },
-            { config, obj },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrTargetElement.DrTargetElement(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrs: drAttr },
-            { config, obj },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          ),
-          new import_DrTargetAttr.DrTargetAttr(
-            this,
-            __render,
-            { raws, fag },
-            { element, attrs: drAttr },
-            { config, obj },
-            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
-          )
+          new import_DrIf.DrIf(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_IF_NAME, attr: drAttr.drIf, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drIf }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrStripElement.DrStripElement(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_STRIP_NAME, attr: drAttr.drStripElement, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drThis }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrThis.DrThis(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_THIS_NAME, attr: drAttr.drThis, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drThis }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrForm.DrForm(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_FOR_NAME, attr: drAttr.drForm, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drForm }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrInnerText.DrInnerText(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_INNERTEXT_NAME, attr: drAttr.drInnerText, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drInnerText }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrInnerHTML.DrInnerHTML(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_INNERHTML_NAME, attr: drAttr.drInnerHTML, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drInnerHTML }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrFor.DrFor(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_FOR_NAME, attr: drAttr.drFor, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drFor }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrForOf.DrForOf(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_FOR_OF_NAME, attr: drAttr.drForOf, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drForOf }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrThisProperty.DrThisProperty(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_THIS_PROPERTY_NAME, attr: drAttr.drThisProperty, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drThisProperty }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrAppender.DrAppender(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drAppender }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrRepeat.DrRepeat(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drRepeat }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrTargetElementIsElement.DrTargetElementIsElement(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME, attr: drAttr.drReplaceTargetElementIs, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrTargetElement.DrTargetElement(this, __render, { raws, fag }, { element, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new import_DrTargetAttr.DrTargetAttr(this, __render, { raws, fag }, { element, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks })
         ];
         for (const operator of operators) {
           const state = await operator.start();
@@ -398,7 +318,7 @@ const _RawSet = class _RawSet {
           fag: genNode,
           scripts: import_EventManager.EventManager.setBindProperty(config?.scripts, obj)
         });
-        import_ObjectUtils.ObjectUtils.Script.evaluate(
+        import_core5.ObjectUtils.Script.evaluate(
           `
                 const ${import_EventManager.EventManager.FAG_VARNAME} = this.__render.fag;
                 const ${import_EventManager.EventManager.SCRIPTS_VARNAME} = this.__render.scripts;
@@ -422,17 +342,18 @@ const _RawSet = class _RawSet {
     for (const it of onAttrInitCallBacks) {
       config?.onAttrInit?.(it.attrName, it.attrValue, obj, this);
     }
-    if (obj.__domrender_components) {
-      Object.entries(obj.__domrender_components).forEach(([key, value]) => {
+    if (obj[import_index.DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY]) {
+      Object.entries(obj[import_index.DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY]).forEach(([key, value]) => {
         const rawSet = value.__rawSet;
         const drAttrs2 = rawSet?.dataSet.render?.attribute;
         if (rawSet && !rawSet.isConnected) {
           const destroyOptions = drAttrs2?.drDestroyOption?.split(",") ?? [];
-          _RawSet.destroy(obj.__domrender_components[key], { rawSet }, config, destroyOptions);
-          delete obj.__domrender_components[key];
+          _RawSet.destroy(obj[import_index.DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY][key], { rawSet }, config, destroyOptions);
+          delete obj[import_index.DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY][key];
         }
       });
     }
+    console.groupEnd();
     return { raws, executedOperators };
   }
   // 중요 스타일 적용 부분
@@ -458,25 +379,25 @@ const _RawSet = 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`;
-    const cssParser = new import_CssParser.CssParser(styleBody);
+    const cssParser = new import_core4.CssParser(styleBody);
     const processRule = (rule) => {
-      if ((0, import_CssParser.isStyleRule)(rule)) {
+      if ((0, import_core4.isStyleRule)(rule)) {
         const isRoot = rule.selector.includes(":root");
         if (!isRoot) {
           const selectors = rule.selector.split(",").map((s) => s.trim());
           const transformedSelectors = selectors.map((selector) => this.generateRuleSelector(start, end, selector));
           rule.selector = transformedSelectors.join(", ");
         }
-      } else if ((0, import_CssParser.isAtRule)(rule)) {
+      } else if ((0, import_core4.isAtRule)(rule)) {
         if (rule.name === "media") {
-          const hasRoot = rule.children.some(
-            (childRule) => (0, import_CssParser.isStyleRule)(childRule) && childRule.selector.includes(":root")
-          );
+          const hasRoot = rule.children.some((childRule) => (0, import_core4.isStyleRule)(childRule) && childRule.selector.includes(":root"));
           if (!hasRoot) {
             rule.children.forEach((childRule) => {
-              if ((0, import_CssParser.isStyleRule)(childRule)) {
+              if ((0, import_core4.isStyleRule)(childRule)) {
                 const selectors = childRule.selector.split(",").map((s) => s.trim());
                 const transformedSelectors = selectors.map((selector) => this.generateRuleSelector(start, end, selector));
                 childRule.selector = transformedSelectors.join(", ");
@@ -490,17 +411,62 @@ const _RawSet = class _RawSet {
     let after = cssParser.stringify();
     after = after.replaceAll("/*$", "${");
     after = after.replaceAll("$*/", "}$");
+    if (importRules.length) {
+      after = `${importRules.join("\n")}
+${after}`;
+    }
     if (styleTagWrap) {
       styleBody = `<style id='${componentKey}-style' domstyle>${after}</style>`;
     }
     return styleBody;
   }
+  static extractCssImports(styleBody) {
+    const importRules = [];
+    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 };
+  }
   applyEvent(obj, fragment = this.dataSet.fragment, config) {
-    this.dataSet.config.eventManager.applyEvent(
-      obj,
-      this.dataSet.config.eventManager.findAttrElements(fragment, config),
-      config
-    );
+    this.dataSet.config.eventManager.applyEvent(obj, this.dataSet.config.eventManager.findAttrElements(fragment, config), config);
   }
   onRenderedEvent(obj, nodes, config) {
     this.dataSet.config.eventManager.onRenderedEvent(obj, nodes, config);
@@ -517,10 +483,7 @@ const _RawSet = class _RawSet {
   getDrAppendAttributeAndDelete(element, obj) {
     let data = element.getAttribute(_RawSet.DR_APPENDER_NAME);
     if (data && !/\[.+\]/g.test(data)) {
-      const currentIndex = import_ObjectUtils.ObjectUtils.Script.evaluateReturn(
-        `${import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(data)}?.length -1`,
-        obj
-      );
+      const currentIndex = import_core5.ObjectUtils.Script.evaluateReturn(`${import_core5.ObjectUtils.Path.toOptionalChainPath(data)}?.length -1`, obj);
       data = `${data}[${currentIndex}]`;
       element.setAttribute(_RawSet.DR_APPENDER_NAME, data);
     }
@@ -536,82 +499,77 @@ const _RawSet = class _RawSet {
     const NodeFilter2 = config.window.NodeFilter;
     const Node2 = config.window.Node;
     const processedNodes = /* @__PURE__ */ new Set();
-    const findNodes = import_NodeUtils.NodeUtils.findNodes(
-      element,
-      (node) => {
-        if (node.nodeType === Node2.TEXT_NODE) {
-          const between = _RawSet.expressionGroups(import_StringUtils.StringUtils.deleteEnter(node.data ?? ""));
-          const r2 = between?.length > 0 ? import_NodeUtils.NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : import_NodeUtils.NodeUtils.FindNodesFilterResult.NO_MATCH_AND_SKIP_CHILDREN;
-          return r2;
-        } else if (node.nodeType === Node2.ELEMENT_NODE) {
-          const element2 = node;
-          if (element2.hasAttribute(_RawSet.DR_PRE_NAME)) {
-            let r3 = import_NodeUtils.NodeUtils.FindNodesFilterResult.NO_MATCH_AND_SKIP_CHILDREN;
-            return r3;
-          }
-          if (element2.hasAttribute(import_EventManager.EventManager.attrAttrName)) {
-            const script = element2.getAttribute(import_EventManager.EventManager.attrAttrName) ?? "";
-            const keyValuePairs = Array.from(script.matchAll(/['"]?(\w+)['"]?:\s*([^,}]+)/g)).map((match) => ({
-              key: match[1],
-              value: match[2]
+    const findNodes = import_core_web2.NodeUtils.findNodes(element, (node) => {
+      if (node.nodeType === Node2.TEXT_NODE) {
+        const between = _RawSet.expressionGroups(import_core2.StringUtils.deleteEnter(node.data ?? ""));
+        const r2 = between?.length > 0 ? import_core_web2.NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : import_core_web2.NodeUtils.FindNodesFilterResult.NO_MATCH_AND_SKIP_CHILDREN;
+        return r2;
+      } else if (node.nodeType === Node2.ELEMENT_NODE) {
+        const element2 = node;
+        if (element2.hasAttribute(_RawSet.DR_PRE_NAME)) {
+          let r3 = import_core_web2.NodeUtils.FindNodesFilterResult.NO_MATCH_AND_SKIP_CHILDREN;
+          return r3;
+        }
+        if (element2.hasAttribute(import_EventManager.EventManager.attrAttrName)) {
+          const script = element2.getAttribute(import_EventManager.EventManager.attrAttrName) ?? "";
+          const keyValuePairs = Array.from(script.matchAll(/['"]?([\w-_]+)['"]?:\s*([^,}]+)/g)).map((match) => ({
+            key: match[1],
+            value: match[2]
+          }));
+          (keyValuePairs ?? []).forEach((it) => {
+            element2.setAttribute(it.key, "${" + it.value + "}$");
+          });
+        }
+        const targetElementIs = element2.getAttribute(_RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME);
+        const targetElementNames = config.targetElements?.map((it) => it.name.toLowerCase()) ?? [];
+        targetElementNames.push(..._RawSet.DR_ELEMENTS);
+        const isElement = targetElementNames.includes(element2.tagName.toLowerCase()) || targetElementNames.includes(targetElementIs?.toLowerCase());
+        const targetAttrNames = (config.targetAttrs?.map((it) => it.name) ?? []).concat([..._RawSet.DR_ATTRIBUTES]);
+        const normalAttrs = /* @__PURE__ */ new Map();
+        const linkVariables = /* @__PURE__ */ new Map();
+        const linkNames = import_EventManager.EventManager.linkAttrs.map((it) => it.name);
+        const isAttr = element2.getAttributeNames().filter((it) => !import_EventManager.EventManager.noDetectAttr.includes(it)).filter((it) => {
+          const value = element2.getAttribute(it)?.trim();
+          if (value && linkNames.includes(it)) {
+            linkVariables.set(it, value);
+          } else if (value && _RawSet.isExpression(value)) {
+            const variablePaths = _RawSet.expressionGroups(value).map((it2) => ({
+              origin: it2[0].trim(),
+              inner: it2[1].trim()
             }));
-            (keyValuePairs ?? []).forEach((it) => {
-              element2.setAttribute(it.key, "${" + it.value + "}$");
+            const isStringTemplate = variablePaths.length > 1 || variablePaths[0] && variablePaths[0].origin !== value;
+            let targetScript = value;
+            variablePaths.forEach((it2) => {
+              let r3 = it2.inner.replace(/#[^#]*#/g, "({})");
+              r3 = import_core5.ObjectUtils.Path.toOptionalChainPath(r3);
+              targetScript = targetScript.replaceAll(it2.origin, `\${${r3}}`);
             });
-          }
-          const targetElementIs = element2.getAttribute(_RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME);
-          const targetElementNames = config.targetElements?.map((it) => it.name.toLowerCase()) ?? [];
-          const isElement = targetElementNames.includes(element2.tagName.toLowerCase()) || targetElementNames.includes(targetElementIs?.toLowerCase());
-          const targetAttrNames = (config.targetAttrs?.map((it) => it.name) ?? []).concat([..._RawSet.DR_ATTRIBUTES]);
-          const normalAttrs = /* @__PURE__ */ new Map();
-          const linkVariables = /* @__PURE__ */ new Map();
-          const linkNames = import_EventManager.EventManager.linkAttrs.map((it) => it.name);
-          const isAttr = element2.getAttributeNames().filter((it) => !import_EventManager.EventManager.noDetectAttr.includes(it)).filter((it) => {
-            const value = element2.getAttribute(it)?.trim();
-            if (value && linkNames.includes(it)) {
-              linkVariables.set(it, value);
-            } else if (value && _RawSet.isExpression(value)) {
-              const variablePaths = _RawSet.expressionGroups(value).map((it2) => ({
-                origin: it2[0].trim(),
-                inner: it2[1].trim()
-              }));
-              const isStringTemplate = variablePaths.length > 1 || variablePaths[0] && variablePaths[0].origin !== value;
-              let targetScript = value;
-              variablePaths.forEach((it2) => {
-                let r3 = it2.inner.replace(/#[^#]*#/g, "({})");
-                r3 = import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(r3);
-                targetScript = targetScript.replaceAll(it2.origin, `\${${r3}}`);
-              });
-              const cval = import_ObjectUtils.ObjectUtils.Script.evaluateReturn("`" + targetScript + "`", Object.assign(obj));
-              if (cval === null) {
-                element2.removeAttribute(it);
-              } else {
-                element2.setAttribute(it, cval);
-              }
-              normalAttrs.set(it, { originalAttrValue: value, variablePaths, isStringTemplate });
+            const cval = import_core5.ObjectUtils.Script.evaluateReturn("`" + targetScript + "`", Object.assign(obj));
+            if (cval === null) {
+              element2.removeAttribute(it);
+            } else {
+              element2.setAttribute(it, cval);
             }
-            const isTargetAttr = targetAttrNames.includes(it.toLowerCase());
-            return isTargetAttr;
-          }).length > 0;
-          if (linkVariables.size) {
-            element2.setAttribute(
-              import_EventManager.EventManager.linkTargetMapAttrName,
-              JSON.stringify(Array.from(linkVariables.entries()))
-            );
-          }
-          if (normalAttrs.size) {
-            element2.setAttribute(import_EventManager.EventManager.normalAttrMapAttrName, JSON.stringify(Array.from(normalAttrs.entries())));
+            normalAttrs.set(it, { originalAttrValue: value, variablePaths, isStringTemplate });
           }
-          const r2 = isAttr || isElement ? import_NodeUtils.NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : import_NodeUtils.NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
-          return r2;
+          const isTargetAttr = targetAttrNames.includes(it.toLowerCase());
+          return isTargetAttr;
+        }).length > 0;
+        if (linkVariables.size) {
+          element2.setAttribute(import_EventManager.EventManager.linkTargetMapAttrName, JSON.stringify(Array.from(linkVariables.entries())));
         }
-        const r = import_NodeUtils.NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
-        return r;
+        if (normalAttrs.size) {
+          element2.setAttribute(import_EventManager.EventManager.normalAttrMapAttrName, JSON.stringify(Array.from(normalAttrs.entries())));
+        }
+        const r2 = isAttr || isElement ? import_core_web2.NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : import_core_web2.NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
+        return r2;
       }
-    );
+      const r = import_core_web2.NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
+      return r;
+    });
     const pars = [];
     let currentNode;
-    const name = import_RandomUtils.RandomUtils.uuid();
+    const name = import_core.RandomUtils.uuid();
     for (const currentNode2 of findNodes) {
       processedNodes.add(currentNode2);
       if (currentNode2.nodeType === Node2.TEXT_NODE) {
@@ -620,7 +578,7 @@ const _RawSet = class _RawSet {
         if (!template) break;
         const groups = _RawSet.expressionGroups(text);
         const map = groups.map((it) => ({
-          uuid: `${import_RandomUtils.RandomUtils.alphabet(40)}_${obj?.constructor?.name}`,
+          uuid: `${import_core.RandomUtils.alphabet(40)}_${obj?.constructor?.name}`,
           content: it[0],
           regexArr: it
         }));
@@ -662,13 +620,14 @@ const _RawSet = class _RawSet {
         const p = currentNode2?.parentNode;
         p?.replaceChild(template.content, currentNode2);
       } else if (currentNode2.nodeType === Node2.ELEMENT_NODE) {
-        const uuid = `${import_RandomUtils.RandomUtils.alphabet(40)}`;
+        const uuid = `${import_core.RandomUtils.alphabet(40)}`;
         const element2 = currentNode2;
         const fragment = config.window.document.createDocumentFragment();
         const elementType = import_RawSetType.RawSetType.TARGET_ELEMENT;
         const startEndPoint = _RawSet.createStartEndPoint({ node: element2, id: uuid, type: elementType }, config);
         const targetElementIs = element2.getAttribute(_RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME);
         const targetElementNames = config.targetElements?.map((it) => it.name.toLowerCase()) ?? [];
+        targetElementNames.push(..._RawSet.DR_ELEMENTS);
         const isElement = targetElementNames.includes(element2.tagName.toLowerCase()) || targetElementNames.includes(targetElementIs?.toLowerCase());
         const targetAttrNames = (config.targetAttrs?.map((it) => it.name) ?? []).concat(_RawSet.DR_ATTRIBUTES);
         const isAttr = element2.getAttributeNames().filter((it) => targetAttrNames.includes(it.toLowerCase())).length > 0;
@@ -690,7 +649,7 @@ const _RawSet = class _RawSet {
         pars.push(rawSet);
       }
     }
-    const util = import_ElementUtils.ElementUtils;
+    const util = import_core_web.ElementUtils;
     return pars;
   }
   static createStartEndPoint(data, config) {
@@ -764,19 +723,15 @@ const _RawSet = class _RawSet {
     return rawSet;
   }
   static drItOtherEncoding(element, postFix) {
-    const random = import_RandomUtils.RandomUtils.uuid() + postFix;
+    const random = import_core.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) => {
+    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;
   }
   static drItOtherDecoding(element, random) {
-    element.querySelectorAll(
-      `[${_RawSet.DR_IT_OPTIONNAME}], [${_RawSet.DR_FOR_OF_NAME}], [${_RawSet.DR_REPEAT_NAME}], [${_RawSet.DR_APPENDER_NAME}]`
-    ).forEach((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#");
     });
   }
@@ -789,7 +744,7 @@ const _RawSet = class _RawSet {
   }
   static replaceInnerHTML(element, config) {
     const innerHTML = element.innerHTML;
-    const tobe = config.toBe = config.toBe ?? import_RandomUtils.RandomUtils.uuid();
+    const tobe = config.toBe = config.toBe ?? import_core.RandomUtils.uuid();
     if (config.asIs instanceof RegExp) {
       element.innerHTML = innerHTML.replace(config.asIs, config.toBe);
     } else {
@@ -798,19 +753,19 @@ const _RawSet = class _RawSet {
     return tobe;
   }
   static drThisEncoding(element, drThis, config) {
-    const thisRandom = config.toBe = config?.toBe ?? import_RandomUtils.RandomUtils.uuid();
+    const thisRandom = config.toBe = config?.toBe ?? import_core.RandomUtils.uuid();
     element.querySelectorAll(`[${_RawSet.DR_PRE_NAME}]`).forEach((it) => {
       it.innerHTML = it.innerHTML.replace(config.asIs, thisRandom);
     });
     element.querySelectorAll(`[${_RawSet.DR_THIS_NAME}]`).forEach((it) => {
       let message2 = it.innerHTML;
-      import_StringUtils.StringUtils.regexExec(config.asIs, message2).reverse().forEach((it2) => {
+      import_core2.StringUtils.regexExec(config.asIs, message2).reverse().forEach((it2) => {
         message2 = message2.substr(0, it2.index) + message2.substr(it2.index).replace(it2[0], `${it2[1] ?? ""}${drThis}`);
       });
       it.innerHTML = message2;
     });
     let message = element.innerHTML;
-    import_StringUtils.StringUtils.regexExec(config.asIs, message).reverse().forEach((it) => {
+    import_core2.StringUtils.regexExec(config.asIs, message).reverse().forEach((it) => {
       message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], `${it[1] ?? ""}${drThis}`);
     });
     element.innerHTML = message;
@@ -819,14 +774,14 @@ const _RawSet = class _RawSet {
   static drThisBindEncoding(element, variable, config) {
     element.querySelectorAll(`[${_RawSet.DR_THIS_NAME}]`).forEach((eIt) => {
       let message = eIt.innerHTML;
-      import_StringUtils.StringUtils.regexExec(variable, message).reverse().forEach((it) => {
+      import_core2.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)}`);
       });
       eIt.innerHTML = message;
     });
     const targetElements = config.config.targetElements ?? [];
     const targetElementNames = targetElements.map((it) => it.name.replaceAll(".", "\\.").replaceAll(":", "\\:")).join(",");
-    const thisRandom = import_RandomUtils.RandomUtils.uuid();
+    const thisRandom = import_core.RandomUtils.uuid();
     element.querySelectorAll(targetElementNames).forEach((it) => {
       it.innerHTML = it.innerHTML.replace(variable, thisRandom);
     });
@@ -835,7 +790,7 @@ const _RawSet = class _RawSet {
     });
     if (config.otherReplaceVariablePath) {
       let message = element.innerHTML;
-      import_StringUtils.StringUtils.regexExec(variable, message).reverse().forEach((it) => {
+      import_core2.StringUtils.regexExec(variable, message).reverse().forEach((it) => {
         message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], `${it[1] ?? ""}${config.otherReplaceVariablePath}`);
       });
       element.innerHTML = message;
@@ -890,7 +845,7 @@ const _RawSet = class _RawSet {
         value,
         // regex: RegExp('(?<!(dr-|\\.))var\\.' + s[0] + '(?=.?)', 'g'),
         regex: RegExp("\\$var\\." + name + "(?=.?)", "g"),
-        random: import_RandomUtils.RandomUtils.uuid()
+        random: import_core.RandomUtils.uuid()
       };
     });
     element.querySelectorAll(`[${_RawSet.DR_VAR_OPTIONNAME}]`).forEach((it) => {
@@ -913,11 +868,12 @@ const _RawSet = 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 = import_ObjectUtils.ObjectUtils.Script.evaluateReturn(import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(drThis), obj);
+      targetObj = import_core5.ObjectUtils.Script.evaluateReturn(import_core5.ObjectUtils.Path.toOptionalChainPath(drThis), obj);
     }
     const componentKey = rawSet.uuid;
     const renderScript = ` /*drThisCreate*/
@@ -960,11 +916,8 @@ const _RawSet = class _RawSet {
     };
     render.attribute = _RawSet.getAttributeObject(element, { script: renderScript, obj, renderData: render });
     render = Object.freeze(render);
-    const onCreateDataScript = `return {rootParent: this, render: this.__render}`;
-    const onCreateDataParam = import_ObjectUtils.ObjectUtils.Script.evaluate(
-      onCreateDataScript,
-      Object.assign(obj, { __render: render })
-    );
+    const onCreateDataScript = `{rootParent: this, render: this.__render}`;
+    const onCreateDataParam = import_core5.ObjectUtils.Script.evaluateReturn(onCreateDataScript, Object.assign(obj, { __render: render }));
     if ((0, import_OnCreateRenderData.isOnCreateRenderData)(targetObj)) {
       targetObj?.onCreateRenderData(onCreateDataParam);
     }
@@ -974,10 +927,7 @@ const _RawSet = class _RawSet {
     const onCreate = element.getAttribute(_RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
     let createParam = [];
     if (onCreate) {
-      createParam = import_ObjectUtils.ObjectUtils.Script.evaluateReturn(
-        { bodyScript: renderScript, returnScript: import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(onCreate) },
-        obj
-      );
+      createParam = import_core5.ObjectUtils.Script.evaluateReturn({ bodyScript: renderScript, returnScript: import_core5.ObjectUtils.Path.toOptionalChainPath(onCreate) }, obj);
       if (!Array.isArray(createParam)) {
         createParam = [createParam];
       }
@@ -998,14 +948,14 @@ const _RawSet = class _RawSet {
     const oninit = element.getAttribute(_RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
     if (oninit) {
       const script = `${renderScript}  ${oninit} `;
-      import_ObjectUtils.ObjectUtils.Script.evaluate(script, Object.assign(obj, { __render: render }));
+      import_core5.ObjectUtils.Script.evaluate(script, Object.assign(obj, { __render: render }));
     }
     targetElement.querySelectorAll(import_EventManager.EventManager.attrNames.map((it) => `[${it}]`).join(",")).forEach((it) => {
       it.setAttribute(import_EventManager.EventManager.ownerVariablePathAttrName, "this");
     });
     rawSet.point.innerHTML = element.innerHTML;
     const innerText = element.textContent?.trim() ?? "";
-    const escapedInnerHTML = import_ConvertUtils.ConvertUtils.escapeHTML(element.innerHTML);
+    const escapedInnerHTML = import_core6.ConvertUtils.escapeHTML(element.innerHTML);
     const innerHTMLName = targetElement.getAttribute(_RawSet.DR_INNER_HTML_NAME_OPTIONNAME) ?? "innerHTML";
     const innerTEXTName = targetElement.getAttribute(_RawSet.DR_INNER_TEXT_NAME_OPTIONNAME) ?? "innerTEXT";
     const innerHTMLEscapedName = targetElement.getAttribute(_RawSet.DR_INNER_HTML_ESCAPED_NAME_OPTIONNAME) ?? "innerHTMLEscaped";
@@ -1029,11 +979,13 @@ const _RawSet = class _RawSet {
       });
     }
     if (templateReplacements.length > 0) {
-      targetElement.innerHTML = import_StringUtils.StringUtils.replaceSequentially(targetElement.innerHTML, templateReplacements);
+      targetElement.innerHTML = import_core2.StringUtils.replaceSequentially(targetElement.innerHTML, templateReplacements);
     }
+    const componentName = targetElement.getAttribute(_RawSet.DR_VARIABLE_NAME_OPTIONNAME) ?? "component";
     const optionThisName = targetElement.getAttribute(_RawSet.DR_THIS_NAME_OPTIONNAME);
     targetElement.getAttributeNames().forEach((it) => targetElement.setAttribute(it, targetElement.getAttribute(it).replace(/#this#/g, drThis)));
     const thisRandom = this.drThisEncoding(targetElement, drThis, { asIs: /@this@/g });
+    targetElement.innerHTML = targetElement.innerHTML.replaceAll(`#${componentName}#`, drThis);
     if (optionThisName) {
       targetElement.innerHTML = targetElement.innerHTML.replaceAll(`@${optionThisName}@`, drThis);
     }
@@ -1058,16 +1010,24 @@ const _RawSet = class _RawSet {
     }
     return fag;
   }
-  static async fetchTemplateStyle(set) {
+  static async fetchTemplateStyle(set, obj) {
     const stylePromises = [];
-    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) => {
+      if (!value) {
+        return value;
+      }
+      return value.startsWith("lazy://") ? (await fetch(value.substring(6))).text() : value;
+    };
+    const templateValue = typeof set.template === "function" ? await set.template(obj) : set.template;
+    const templatePromise = typeof templateValue === "string" ? resolveLazy(templateValue) : Promise.resolve(templateValue);
+    const stylesValue = typeof set.styles === "function" ? await set.styles(obj) : set.styles;
+    if (Array.isArray(stylesValue)) {
+      for (let i = 0; i < stylesValue.length; i++) {
+        const it = stylesValue[i];
+        stylePromises.push(resolveLazy(it));
       }
-    } else if (set.styles) {
-      stylePromises.push(Promise.resolve(set.styles));
+    } else if (typeof stylesValue === "string") {
+      stylePromises.push(resolveLazy(stylesValue));
     }
     return {
       template: await templatePromise,
@@ -1087,24 +1047,16 @@ const _RawSet = class _RawSet {
     };
     return targetAttribute;
   }
-  static createComponentTargetElement({
-    name,
-    objFactory,
-    template = "",
-    styles = [],
-    noStrip
-  }) {
+  static createComponentTargetElement({ name, objFactory, template = "", styles = [], noStrip }) {
     const targetElement = {
       name,
       styles,
       template,
       noStrip,
       async callBack(element, obj, rawSet, attrs, config) {
-        const templateStyle = await _RawSet.fetchTemplateStyle({ template: this.template, styles: this.styles });
-        this.template = templateStyle.template;
-        this.styles = templateStyle.styles;
-        obj.__domrender_components ?? (obj.__domrender_components = {});
-        const domrenderComponents = obj.__domrender_components;
+        var _a;
+        obj[_a = import_index.DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY] ?? (obj[_a] = {});
+        const domrenderComponents = obj[import_index.DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY];
         const renderScript = ` /*createComponentTargetElement*/
             var ${import_EventManager.EventManager.RAWSET_VARNAME} = this.__render.rawSet; 
             var ${import_EventManager.EventManager.COMPONENT_VARNAME} = this.__render.component; 
@@ -1142,16 +1094,13 @@ const _RawSet = class _RawSet {
         render.attribute = _RawSet.getAttributeObject(element, { script: renderScript, obj, renderData: render });
         render = Object.freeze(render);
         if (constructor) {
-          let param = import_ObjectUtils.ObjectUtils.Script.evaluateReturn(
-            { bodyScript: renderScript, returnScript: import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(constructor) },
-            Object.assign(obj, { __render: render })
-          ) ?? [];
+          let param = import_core5.ObjectUtils.Script.evaluateReturn({ bodyScript: renderScript, returnScript: import_core5.ObjectUtils.Path.toOptionalChainPath(constructor) }, Object.assign(obj, { __render: render })) ?? [];
           if (!Array.isArray(param)) {
             param = [param];
           }
           constructorParam = param;
         }
-        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,
@@ -1159,17 +1108,20 @@ const _RawSet = class _RawSet {
         };
         rawSet.dataSet.render = render;
         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 = import_ConvertUtils.ConvertUtils.escapeHTML(element.innerHTML);
+        let applayTemplateEscape = import_core6.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";
         const innerTEXTName = element.getAttribute(_RawSet.DR_INNER_TEXT_NAME_OPTIONNAME) ?? "innerTEXT";
         const innerHTMLEscapedName = element.getAttribute(_RawSet.DR_INNER_HTML_ESCAPED_NAME_OPTIONNAME) ?? "innerHTMLEscaped";
         if (applayTemplate) {
-          innerHTMLThisRandom = import_RandomUtils.RandomUtils.uuid();
-          applayTemplate = import_StringUtils.StringUtils.replaceSequentially(applayTemplate, [
+          innerHTMLThisRandom = import_core.RandomUtils.uuid();
+          applayTemplate = import_core2.StringUtils.replaceSequentially(applayTemplate, [
             {
               regex: /this\./g,
               callback: () => innerHTMLThisRandom
@@ -1180,7 +1132,7 @@ const _RawSet = class _RawSet {
             }
           ]);
         }
-        applayTemplate = import_StringUtils.StringUtils.replaceSequentially(this.template ?? "", [
+        applayTemplate = import_core2.StringUtils.replaceSequentially(this.template ?? "", [
           {
             regex: new RegExp(`#${innerHTMLName}#`, "g"),
             callback: () => applayTemplate
@@ -1196,20 +1148,11 @@ const _RawSet = class _RawSet {
         ]);
         const style = _RawSet.generateStyleTransform(this.styles, rawSet.uuid, true);
         element.innerHTML = style + (applayTemplate ?? "");
-        let data = await _RawSet.drThisCreate(
-          rawSet,
-          element,
-          `this.__domrender_components.${rawSet.uuid}`,
-          "",
-          !noStrip,
-          obj,
-          config
-        );
+        let data = await _RawSet.drThisCreate(rawSet, element, `this.${import_index.DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY}.${rawSet.uuid}`, "", !noStrip, obj, config);
         if (data && innerHTMLThisRandom) {
           const template2 = config.window.document.createElement("template");
-          let s = import_ElementUtils.ElementUtils.toInnerHTML(data, { document: config.window.document });
+          let s = import_core_web.ElementUtils.toInnerHTML(data, { document: config.window.document });
           template2.innerHTML = s.replace(RegExp(innerHTMLThisRandom, "g"), "this.");
-          ;
           data = template2.content;
         }
         return data;
@@ -1224,7 +1167,7 @@ const _RawSet = class _RawSet {
   }
   static expressionGroups(data) {
     const reg = /[$#]\{([\s\S.]*?)\}[$#]/g;
-    return import_StringUtils.StringUtils.regexExec(reg, data ?? "");
+    return import_core2.StringUtils.regexExec(reg, data ?? "");
   }
   static destroy(obj, parameter, config, destroyOptions = []) {
     if (!destroyOptions.some((it) => it === import_DestroyOptionType.DestroyOptionType.NO_DESTROY)) {
@@ -1233,6 +1176,9 @@ const _RawSet = class _RawSet {
           config.messenger.deleteChannelFromObj(obj);
         }
       }
+      if (obj && obj.onDestroy === "function") {
+        obj.onDestroy();
+      }
       if ((0, import_OnDestroyRender.isOnDestroyRender)(obj)) {
         obj.onDestroyRender?.(parameter);
       }
@@ -1242,7 +1188,7 @@ const _RawSet = class _RawSet {
     if (!element) {
       return void 0;
     }
-    const attribute = import_ElementUtils.ElementUtils.getAttributeToObject(element);
+    const attribute = import_core_web.ElementUtils.getAttributeToObject(element);
     const normalAttribute = attribute[import_EventManager.EventManager.normalAttrMapAttrName];
     if (normalAttribute) {
       new Map(JSON.parse(normalAttribute)).forEach((v, k) => {
@@ -1250,17 +1196,14 @@ const _RawSet = class _RawSet {
         let targetScript = v.originalAttrValue.trim();
         if (v.isStringTemplate) {
           variablePaths.forEach((it) => {
-            let r = import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(it.inner);
+            let r = import_core5.ObjectUtils.Path.toOptionalChainPath(it.inner);
             targetScript = targetScript.replaceAll(it.origin, `\${${r}}`);
           });
         } else {
-          let r = import_ObjectUtils.ObjectUtils.Path.toOptionalChainPath(variablePaths[0].inner);
+          let r = import_core5.ObjectUtils.Path.toOptionalChainPath(variablePaths[0].inner);
           targetScript = targetScript.replaceAll(variablePaths[0].origin, r);
         }
-        const cval = import_ObjectUtils.ObjectUtils.Script.evaluateReturn(
-          { bodyScript: config.script, returnScript: v.isStringTemplate ? "`" + targetScript + "`" : targetScript },
-          Object.assign(config.obj, config.renderData ? { __render: config.renderData } : void 0)
-        );
+        const cval = import_core5.ObjectUtils.Script.evaluateReturn({ bodyScript: config.script, returnScript: v.isStringTemplate ? "`" + targetScript + "`" : targetScript }, Object.assign(config.obj, config.renderData ? { __render: config.renderData } : void 0));
         attribute[k] = cval;
       });
     }
@@ -1282,6 +1225,8 @@ _RawSet.DR_INNERTEXT_NAME = "dr-inner-text";
 _RawSet.DR_DETECT_NAME = "dr-detect";
 _RawSet.DR_STRIP_NAME = "dr-strip";
 _RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME = "dr-replace-target-element-is";
+// elementName
+_RawSet.DR_TARGET_ELEMENT_ELEMENTNAME = "dr-target-element";
 // 감지처리되는 옵션
 _RawSet.DR_DETECT_IF_OPTIONNAME = "dr-detect-option-if";
 _RawSet.DR_DETECT_FILTER_OPTIONNAME = "dr-detect-option-filter";
@@ -1303,7 +1248,12 @@ _RawSet.DR_DESTROY_OPTIONNAME = "dr-option-destroy";
 _RawSet.DR_THIS_NAME_OPTIONNAME = "dr-option-this-name";
 _RawSet.DR_VARIABLE_NAME_OPTIONNAME = "dr-option-variable-name";
 _RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME = "dr-option-item-variable-name";
+_RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME_DEFAULT = "it";
 _RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME = "dr-option-item-index-variable-name";
+_RawSet.DR_ITEM_OFFSET_INDEX_VARIABLE_NAME_OPTIONNAME = "dr-option-item-offset-index-variable-name";
+_RawSet.DR_ITEM_INDEX_OFFSET_OPTIONNAME = "dr-option-item-index-offset";
+_RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME_DEFAULT = "index";
+_RawSet.DR_ITEM_OFFSET_INDEX_VARIABLE_NAME_OPTIONNAME_DEFAULT = "offsetIndex";
 _RawSet.DR_INNER_HTML_NAME_OPTIONNAME = "dr-option-inner-html-name";
 _RawSet.DR_INNER_TEXT_NAME_OPTIONNAME = "dr-option-inner-text-name";
 _RawSet.DR_INNER_HTML_ESCAPED_NAME_OPTIONNAME = "dr-option-inner-html-escaped-name";
@@ -1311,10 +1261,6 @@ _RawSet.DR_KEY_OPTIONNAME = "dr-option-key";
 _RawSet.DR_HAS_KEYS_OPTIONNAME = "dr-option-has-keys";
 _RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME = "dr-on-create:arguments";
 _RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME = "dr-on-create:callback";
-/**  우선 쓰는곳이 없어서 deprecated를 걸어놨음
-@deprecated
-*/
-_RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME = "dr-on-init:arguments";
 _RawSet.DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME = "dr-on-constructor:arguments";
 _RawSet.drAttrsOriginName = {
   dr: _RawSet.DR_NAME,
@@ -1342,12 +1288,18 @@ _RawSet.drAttrsOriginName = {
   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
 };
 _RawSet.DR_TAGS = [];
 // public static readonly DR_REPLACE_ACTION_ATTRIBUTES = [
 //   RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME
 // ]
+_RawSet.DR_ELEMENTS = [_RawSet.DR_TARGET_ELEMENT_ELEMENTNAME];
 _RawSet.DR_ATTRIBUTES = [
   _RawSet.DR_NAME,
   _RawSet.DR_APPENDER_NAME,
@@ -1361,7 +1313,7 @@ _RawSet.DR_ATTRIBUTES = [
   _RawSet.DR_INNERHTML_NAME,
   _RawSet.DR_INNERTEXT_NAME,
   _RawSet.DR_REPEAT_NAME,
-  _RawSet.DR_DETECT_NAME,
+  // RawSet.DR_DETECT_NAME, // TODO: DrDetect 오퍼레이터 구현 필요
   _RawSet.DR_STRIP_NAME
 ];
 let RawSet = _RawSet;