@dooboostore/dom-render 1.0.111 → 1.0.113

package/dist/esm/rawsets/RawSet.js

@@ -1,8 +1,8 @@
-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 } from "../events/EventManager.js";
-import { Range } from "../iterators/Range.js";
-import { ElementUtils } from "@dooboostore/core-web/element/ElementUtils";
+import { Range } from "@dooboostore/core";
+import { ElementUtils } from "@dooboostore/core-web";
 import { DrPre } from "../operators/DrPre.js";
 import { Dr } from "../operators/Dr.js";
 import { DrIf } from "../operators/DrIf.js";
@@ -22,7 +22,7 @@ import { DestroyOptionType } from "./DestroyOptionType.js";
 import { RawSetType } from "./RawSetType.js";
 import { DrThisProperty } from "../operators/DrThisProperty.js";
 import { RawSetOperatorType } from "./RawSetOperatorType.js";
-import { CssParser, isStyleRule, isAtRule } from "@dooboostore/core/parser/css/CssParser";
+import { CssParser, isStyleRule, isAtRule } from "@dooboostore/core";
 import { isOnCreateRenderData } from "../lifecycle/OnCreateRenderData.js";
 import { isOnCreateRender } from "../lifecycle/OnCreateRender.js";
 import { isOnChangeAttrRender } from "../lifecycle/OnChangeAttrRender.js";
@@ -30,9 +30,10 @@ import { isOnInitRender } from "../lifecycle/OnInitRender.js";
 import { isOnCreatedThisChild } from "../lifecycle/OnCreatedThisChild.js";
 import { isOnDestroyRender } from "../lifecycle/OnDestroyRender.js";
 import { DrTargetElementIsElement } from "../operators/DrTargetElementIsElement.js";
-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.js";
 const _RawSet = class _RawSet {
   constructor(uuid, type, point, dataSet, detect) {
     this.uuid = uuid;
@@ -93,12 +94,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(EventManager.normalAttrMapAttrName);
         if (targetAttrMap) {
@@ -119,10 +115,52 @@ const _RawSet = class _RawSet {
     });
     return usingTriggerVariables;
   }
-  // 중요 render 처리 부분
-  // public async render(obj: any, config: DomRenderConfig): Promise<RawSet[]> {
-  // }
   async render(obj, config) {
+    if (this.dataSet.fragment.childNodes.length === 1 && this.dataSet.fragment.childNodes[0].nodeType === Node.TEXT_NODE) {
+      const textContent = this.dataSet.fragment.childNodes[0].textContent;
+      if (textContent) {
+        const runText = _RawSet.expressionGroups(textContent)[0][1];
+        const __render = {
+          rawSet: this,
+          scripts: 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) {
+            return { raws: [], executedOperators: [] };
+          }
+          this.lastRenderedValue = newValueStr;
+        } catch (e) {
+        }
+      }
+    }
     const genNode = config.window.document.importNode(this.dataSet.fragment, true);
     const raws = [];
     const onAttrInitCallBacks = [];
@@ -165,18 +203,12 @@ const _RawSet = class _RawSet {
         const runText = _RawSet.expressionGroups(textContent)[0][1];
         let newNode;
         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");
           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);
@@ -211,144 +243,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 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) {
           const state = await operator.start();
@@ -400,17 +320,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[DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY]) {
+      Object.entries(obj[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[DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY][key], { rawSet }, config, destroyOptions);
+          delete obj[DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY][key];
         }
       });
     }
+    console.groupEnd();
     return { raws, executedOperators };
   }
   // 중요 스타일 적용 부분
@@ -436,6 +357,8 @@ 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 CssParser(styleBody);
@@ -449,9 +372,7 @@ const _RawSet = 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)) {
@@ -468,17 +389,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);
@@ -495,10 +461,7 @@ const _RawSet = class _RawSet {
   getDrAppendAttributeAndDelete(element, obj) {
     let data = element.getAttribute(_RawSet.DR_APPENDER_NAME);
     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);
       data = `${data}[${currentIndex}]`;
       element.setAttribute(_RawSet.DR_APPENDER_NAME, data);
     }
@@ -514,79 +477,74 @@ const _RawSet = class _RawSet {
     const NodeFilter2 = config.window.NodeFilter;
     const Node2 = config.window.Node;
     const processedNodes = /* @__PURE__ */ new Set();
-    const findNodes = NodeUtils.findNodes(
-      element,
-      (node) => {
-        if (node.nodeType === Node2.TEXT_NODE) {
-          const between = _RawSet.expressionGroups(StringUtils.deleteEnter(node.data ?? ""));
-          const r2 = between?.length > 0 ? NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : 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 = NodeUtils.FindNodesFilterResult.NO_MATCH_AND_SKIP_CHILDREN;
-            return r3;
-          }
-          if (element2.hasAttribute(EventManager.attrAttrName)) {
-            const script = element2.getAttribute(EventManager.attrAttrName) ?? "";
-            const keyValuePairs = Array.from(script.matchAll(/['"]?(\w+)['"]?:\s*([^,}]+)/g)).map((match) => ({
-              key: match[1],
-              value: match[2]
+    const findNodes = NodeUtils.findNodes(element, (node) => {
+      if (node.nodeType === Node2.TEXT_NODE) {
+        const between = _RawSet.expressionGroups(StringUtils.deleteEnter(node.data ?? ""));
+        const r2 = between?.length > 0 ? NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : 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 = NodeUtils.FindNodesFilterResult.NO_MATCH_AND_SKIP_CHILDREN;
+          return r3;
+        }
+        if (element2.hasAttribute(EventManager.attrAttrName)) {
+          const script = element2.getAttribute(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 = EventManager.linkAttrs.map((it) => it.name);
+        const isAttr = element2.getAttributeNames().filter((it) => !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 = 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 = EventManager.linkAttrs.map((it) => it.name);
-          const isAttr = element2.getAttributeNames().filter((it) => !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 = ObjectUtils.Path.toOptionalChainPath(r3);
-                targetScript = targetScript.replaceAll(it2.origin, `\${${r3}}`);
-              });
-              const cval = 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 = 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(
-              EventManager.linkTargetMapAttrName,
-              JSON.stringify(Array.from(linkVariables.entries()))
-            );
-          }
-          if (normalAttrs.size) {
-            element2.setAttribute(EventManager.normalAttrMapAttrName, JSON.stringify(Array.from(normalAttrs.entries())));
+            normalAttrs.set(it, { originalAttrValue: value, variablePaths, isStringTemplate });
           }
-          const r2 = isAttr || isElement ? NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
-          return r2;
+          const isTargetAttr = targetAttrNames.includes(it.toLowerCase());
+          return isTargetAttr;
+        }).length > 0;
+        if (linkVariables.size) {
+          element2.setAttribute(EventManager.linkTargetMapAttrName, JSON.stringify(Array.from(linkVariables.entries())));
         }
-        const r = NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
-        return r;
+        if (normalAttrs.size) {
+          element2.setAttribute(EventManager.normalAttrMapAttrName, JSON.stringify(Array.from(normalAttrs.entries())));
+        }
+        const r2 = isAttr || isElement ? NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
+        return r2;
       }
-    );
+      const r = NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
+      return r;
+    });
     const pars = [];
     let currentNode;
     const name = RandomUtils.uuid();
@@ -647,6 +605,7 @@ const _RawSet = class _RawSet {
         const startEndPoint = _RawSet.createStartEndPoint({ node: element2, id: uuid, type: elementType }, config);
         const targetElementIs = element2.getAttribute(_RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME);
         const targetElementNames = config.targetElements?.map((it) => it.name.toLowerCase()) ?? [];
+        targetElementNames.push(..._RawSet.DR_ELEMENTS);
         const isElement = targetElementNames.includes(element2.tagName.toLowerCase()) || targetElementNames.includes(targetElementIs?.toLowerCase());
         const targetAttrNames = (config.targetAttrs?.map((it) => it.name) ?? []).concat(_RawSet.DR_ATTRIBUTES);
         const isAttr = element2.getAttributeNames().filter((it) => targetAttrNames.includes(it.toLowerCase())).length > 0;
@@ -744,17 +703,13 @@ const _RawSet = class _RawSet {
   static drItOtherEncoding(element, postFix) {
     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) => {
+    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#");
     });
   }
@@ -891,9 +846,10 @@ 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 = ObjectUtils.Script.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(drThis), obj);
     }
@@ -938,11 +894,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 = ObjectUtils.Script.evaluate(
-      onCreateDataScript,
-      Object.assign(obj, { __render: render })
-    );
+    const onCreateDataScript = `{rootParent: this, render: this.__render}`;
+    const onCreateDataParam = ObjectUtils.Script.evaluateReturn(onCreateDataScript, Object.assign(obj, { __render: render }));
     if (isOnCreateRenderData(targetObj)) {
       targetObj?.onCreateRenderData(onCreateDataParam);
     }
@@ -952,10 +905,7 @@ const _RawSet = class _RawSet {
     const onCreate = element.getAttribute(_RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
     let createParam = [];
     if (onCreate) {
-      createParam = ObjectUtils.Script.evaluateReturn(
-        { bodyScript: renderScript, returnScript: ObjectUtils.Path.toOptionalChainPath(onCreate) },
-        obj
-      );
+      createParam = ObjectUtils.Script.evaluateReturn({ bodyScript: renderScript, returnScript: ObjectUtils.Path.toOptionalChainPath(onCreate) }, obj);
       if (!Array.isArray(createParam)) {
         createParam = [createParam];
       }
@@ -1009,9 +959,11 @@ const _RawSet = class _RawSet {
     if (templateReplacements.length > 0) {
       targetElement.innerHTML = 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);
     }
@@ -1036,16 +988,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,
@@ -1065,24 +1025,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 = DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY] ?? (obj[_a] = {});
+        const domrenderComponents = obj[DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY];
         const renderScript = ` /*createComponentTargetElement*/
             var ${EventManager.RAWSET_VARNAME} = this.__render.rawSet; 
             var ${EventManager.COMPONENT_VARNAME} = this.__render.component; 
@@ -1120,16 +1072,13 @@ const _RawSet = class _RawSet {
         render.attribute = _RawSet.getAttributeObject(element, { script: renderScript, obj, renderData: render });
         render = Object.freeze(render);
         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];
           }
           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,
@@ -1137,6 +1086,9 @@ 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 = ConvertUtils.escapeHTML(element.innerHTML);
@@ -1174,20 +1126,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.${DomRenderComponentMetaKey.DOMRENDER_COMPONENTS_KEY}.${rawSet.uuid}`, "", !noStrip, obj, config);
         if (data && innerHTMLThisRandom) {
           const template2 = config.window.document.createElement("template");
           let s = ElementUtils.toInnerHTML(data, { document: config.window.document });
           template2.innerHTML = s.replace(RegExp(innerHTMLThisRandom, "g"), "this.");
-          ;
           data = template2.content;
         }
         return data;
@@ -1211,6 +1154,9 @@ const _RawSet = class _RawSet {
           config.messenger.deleteChannelFromObj(obj);
         }
       }
+      if (obj && obj.onDestroy === "function") {
+        obj.onDestroy();
+      }
       if (isOnDestroyRender(obj)) {
         obj.onDestroyRender?.(parameter);
       }
@@ -1235,10 +1181,7 @@ const _RawSet = class _RawSet {
           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 } : void 0)
-        );
+        const cval = 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;
       });
     }
@@ -1260,6 +1203,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";
@@ -1281,7 +1226,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";
@@ -1289,10 +1239,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,
@@ -1320,12 +1266,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,
@@ -1339,7 +1291,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;