@dooboostore/dom-render 1.0.112 → 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) {
@@ -149,10 +145,13 @@ const _RawSet = class _RawSet {
               `
         };
         try {
-          const newValue = ObjectUtils.Script.evaluateReturn({
-            bodyScript: __render.bindScript,
-            returnScript: runText
-          }, Object.assign(obj, { __render }));
+          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: [] };
@@ -204,10 +203,7 @@ const _RawSet = class _RawSet {
         const runText = _RawSet.expressionGroups(textContent)[0][1];
         let newNode;
         if (textContent?.startsWith("#")) {
-          const r = ObjectUtils.Script.evaluateReturn(
-            { bodyScript: __render.bindScript, returnScript: 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;
@@ -247,7 +243,12 @@ 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 = [
@@ -319,14 +320,14 @@ 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];
         }
       });
     }
@@ -356,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);
@@ -369,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)) {
@@ -388,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);
@@ -415,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);
     }
@@ -434,80 +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()) ?? [];
-          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()
-              }));
-              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();
@@ -666,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#");
     });
   }
@@ -813,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);
     }
@@ -860,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);
     }
@@ -874,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];
       }
@@ -960,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;
       }
-    } else if (set.styles) {
-      stylePromises.push(Promise.resolve(set.styles));
+      return value.startsWith("lazy://") ? (await fetch(value.substring(6))).text() : value;
+    };
+    const templateValue = typeof set.template === "function" ? await set.template(obj) : 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 (typeof stylesValue === "string") {
+      stylePromises.push(resolveLazy(stylesValue));
     }
     return {
       template: await templatePromise,
@@ -989,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; 
@@ -1044,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,
@@ -1061,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);
@@ -1098,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;
@@ -1135,6 +1154,9 @@ const _RawSet = class _RawSet {
           config.messenger.deleteChannelFromObj(obj);
         }
       }
+      if (obj && obj.onDestroy === "function") {
+        obj.onDestroy();
+      }
       if (isOnDestroyRender(obj)) {
         obj.onDestroyRender?.(parameter);
       }
@@ -1159,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;
       });
     }
@@ -1207,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";
@@ -1215,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,
@@ -1246,15 +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_ELEMENTS = [_RawSet.DR_TARGET_ELEMENT_ELEMENTNAME];
 _RawSet.DR_ATTRIBUTES = [
   _RawSet.DR_NAME,
   _RawSet.DR_APPENDER_NAME,