@dooboostore/dom-render 1.0.108 → 1.0.110

package/dist/esm/rawsets/RawSet.js

@@ -1,6 +1,5 @@
 import { RandomUtils } from "@dooboostore/core/random/RandomUtils";
 import { StringUtils } from "@dooboostore/core/string/StringUtils";
-import { ScriptUtils } from "@dooboostore/core-web/script/ScriptUtils";
 import { EventManager } from "../events/EventManager.js";
 import { Range } from "../iterators/Range.js";
 import { ElementUtils } from "@dooboostore/core-web/element/ElementUtils";
@@ -32,6 +31,8 @@ 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";
 const _RawSet = class _RawSet {
   constructor(uuid, type, point, dataSet, detect) {
     this.uuid = uuid;
@@ -43,14 +44,14 @@ const _RawSet = class _RawSet {
       const path = this.findNearThisPath(rawSet);
       if (path) {
         const optionalPath = ObjectUtils.Path.toOptionalChainPath(path);
-        return ScriptUtils.evaluateReturn(optionalPath, obj);
+        return ObjectUtils.Script.evaluateReturn(optionalPath, obj);
       }
     };
     this.findParentThis = (obj, rawSet = this) => {
       const path = this.findParentThisPath(rawSet);
       if (path) {
         const optionalPath = ObjectUtils.Path.toOptionalChainPath(path);
-        return ScriptUtils.evaluateReturn(optionalPath, obj);
+        return ObjectUtils.Script.evaluateReturn(optionalPath, obj);
       }
     };
     this.findNearThisPath = (rawSet = this) => {
@@ -65,11 +66,10 @@ const _RawSet = class _RawSet {
       const paths = [];
       const findPath = (rawSet2) => {
         if (rawSet2 && rawSet2.point) {
-          if ("getAttribute" in rawSet2.point.start && rawSet2.point.start.getAttribute("this-path")) {
+          if (rawSet2.point?.start && "getAttribute" in rawSet2.point.start && rawSet2.point.start.getAttribute("this-path")) {
             paths.push(rawSet2.point.start.getAttribute("this-path"));
           }
-          if (rawSet2.point.parentRawSet)
-            findPath(rawSet2.point.parentRawSet);
+          if (rawSet2.point.parentRawSet) findPath(rawSet2.point.parentRawSet);
         }
       };
       findPath(rawSet);
@@ -78,7 +78,7 @@ const _RawSet = class _RawSet {
     };
   }
   get isConnected() {
-    return this.point.start.isConnected && this.point.end.isConnected;
+    return this.point && this.point.start && this.point.end && this.point.start.isConnected && this.point.end.isConnected;
   }
   // 중요
   getUsingTriggerVariables(config) {
@@ -93,12 +93,18 @@ 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) {
           new Map(JSON.parse(targetAttrMap)).forEach((v, k) => {
-            targetScripts.push(`(${v})`);
+            const variablePaths = v.variablePaths;
+            variablePaths.forEach((it) => targetScripts.push(`(${it.inner})`));
           });
         }
         script = targetScripts.join(";");
@@ -114,6 +120,8 @@ const _RawSet = class _RawSet {
     return usingTriggerVariables;
   }
   // 중요 render 처리 부분
+  // public async render(obj: any, config: DomRenderConfig): Promise<RawSet[]> {
+  // }
   async render(obj, config) {
     const genNode = config.window.document.importNode(this.dataSet.fragment, true);
     const raws = [];
@@ -121,6 +129,7 @@ const _RawSet = class _RawSet {
     const onElementInitCallBacks = [];
     const onThisComponentSetCallBacks = [];
     const drAttrs = [];
+    const executedOperators = [];
     for (const cNode of Array.from(genNode.childNodes.values())) {
       let attribute = {};
       if (cNode.nodeType === Node.ELEMENT_NODE) {
@@ -134,7 +143,7 @@ const _RawSet = class _RawSet {
         element: cNode,
         attribute,
         rootObject: obj,
-        scriptUtils: ScriptUtils,
+        scriptUtils: ObjectUtils.Script,
         nearThis: this.findNearThis(obj),
         parentThis: this.findParentThis(obj),
         bindScript: ` /** render **/
@@ -156,12 +165,18 @@ const _RawSet = class _RawSet {
         const runText = _RawSet.expressionGroups(textContent)[0][1];
         let newNode;
         if (textContent?.startsWith("#")) {
-          const r = ScriptUtils.evaluate(`${__render.bindScript} return ${runText}`, Object.assign(obj, { __render }));
+          const r = ObjectUtils.Script.evaluate(
+            `${__render.bindScript} return ${runText}`,
+            Object.assign(obj, { __render })
+          );
           const template = config.window.document.createElement("template");
           template.innerHTML = r;
           newNode = template.content;
         } else {
-          const r = ScriptUtils.evaluate(`${__render.bindScript}  return ${runText}`, Object.assign(obj, { __render }));
+          const r = ObjectUtils.Script.evaluate(
+            `${__render.bindScript}  return ${runText}`,
+            Object.assign(obj, { __render })
+          );
           newNode = config.window.document.createTextNode(r);
         }
         cNode.parentNode?.replaceChild(newNode, cNode);
@@ -200,30 +215,148 @@ const _RawSet = class _RawSet {
         };
         drAttrs.push(drAttr);
         const operators = [
-          new DrPre(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_PRE_NAME, attr: drAttr.drPre, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drPre }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new Dr(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_NAME, attr: drAttr.dr, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.dr }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+          new DrPre(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_PRE_NAME, attr: drAttr.drPre, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drPre },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new Dr(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_NAME, attr: drAttr.dr, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.dr },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
           // new Dr(this, __render, {raws, fag}, {element, attrName: EventManager.onRenderedInitAttrName, attr: drAttr.dr, attrs: drAttr}, {config, obj, operatorAround: config.operatorAround?.dr}, {onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks}),
-          new DrIf(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_IF_NAME, attr: drAttr.drIf, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drIf }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrStripElement(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_STRIP_NAME, attr: drAttr.drStripElement, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drThis }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrThis(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_THIS_NAME, attr: drAttr.drThis, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drThis }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrForm(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_FOR_NAME, attr: drAttr.drForm, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drForm }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrInnerText(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_INNERTEXT_NAME, attr: drAttr.drInnerText, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drInnerText }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrInnerHTML(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_INNERHTML_NAME, attr: drAttr.drInnerHTML, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drInnerHTML }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrFor(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_FOR_NAME, attr: drAttr.drFor, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drFor }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrForOf(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_FOR_OF_NAME, attr: drAttr.drForOf, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drForOf }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrThisProperty(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_THIS_PROPERTY_NAME, attr: drAttr.drThisProperty, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drThisProperty }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrAppender(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drAppender }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrRepeat(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr }, { config, obj, operatorAround: config.operatorAround?.drRepeat }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrTargetElementIsElement(this, __render, { raws, fag }, { element, attrName: _RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME, attr: drAttr.drReplaceTargetElementIs, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrTargetElement(this, __render, { raws, fag }, { element, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
-          new DrTargetAttr(this, __render, { raws, fag }, { element, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks })
+          new DrIf(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_IF_NAME, attr: drAttr.drIf, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drIf },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrStripElement(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_STRIP_NAME, attr: drAttr.drStripElement, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drThis },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrThis(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_THIS_NAME, attr: drAttr.drThis, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drThis },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrForm(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_FOR_NAME, attr: drAttr.drForm, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drForm },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrInnerText(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_INNERTEXT_NAME, attr: drAttr.drInnerText, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drInnerText },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrInnerHTML(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_INNERHTML_NAME, attr: drAttr.drInnerHTML, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drInnerHTML },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrFor(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_FOR_NAME, attr: drAttr.drFor, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drFor },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrForOf(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_FOR_OF_NAME, attr: drAttr.drForOf, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drForOf },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrThisProperty(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_THIS_PROPERTY_NAME, attr: drAttr.drThisProperty, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drThisProperty },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrAppender(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drAppender },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrRepeat(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrName: _RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr },
+            { config, obj, operatorAround: config.operatorAround?.drRepeat },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrTargetElementIsElement(
+            this,
+            __render,
+            { raws, fag },
+            {
+              element,
+              attrName: _RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME,
+              attr: drAttr.drReplaceTargetElementIs,
+              attrs: drAttr
+            },
+            { config, obj },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrTargetElement(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrs: drAttr },
+            { config, obj },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          ),
+          new DrTargetAttr(
+            this,
+            __render,
+            { raws, fag },
+            { element, attrs: drAttr },
+            { config, obj },
+            { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }
+          )
         ];
         for (const operator of operators) {
           const state = await operator.start();
           if (state === ExecuteState.EXECUTE) {
+            executedOperators.push(operator);
             break;
           } else if (state === ExecuteState.STOP) {
-            return raws;
+            return { raws, executedOperators };
           }
         }
       }
@@ -243,21 +376,24 @@ const _RawSet = class _RawSet {
           fag: genNode,
           scripts: EventManager.setBindProperty(config?.scripts, obj)
         });
-        ScriptUtils.evaluate(`
+        ObjectUtils.Script.evaluate(
+          `
                 const ${EventManager.FAG_VARNAME} = this.__render.fag;
                 const ${EventManager.SCRIPTS_VARNAME} = this.__render.scripts;
                 const ${EventManager.RAWSET_VARNAME} = this.__render.rawSet;
-                ${it.drCompleteOption}`, Object.assign(obj, { __render: render }));
+                ${it.drCompleteOption}`,
+          Object.assign(obj, { __render: render })
+        );
       }
     });
     for (const it of onThisComponentSetCallBacks) {
       if (isOnInitRender(it.obj)) {
-        it.obj?.onInitRender?.({}, this);
+        await it.obj?.onInitRender?.({}, this);
       }
     }
     for (const it of onElementInitCallBacks) {
       if (isOnInitRender(this.dataSet.render?.currentThis)) {
-        this.dataSet.render.currentThis.onInitRender({}, this);
+        await this.dataSet.render.currentThis.onInitRender({}, this);
       }
       config?.onElementInit?.(it.name, obj, this, it.targetElement);
     }
@@ -275,7 +411,7 @@ const _RawSet = class _RawSet {
         }
       });
     }
-    return raws;
+    return { raws, executedOperators };
   }
   // 중요 스타일 적용 부분
   static generateRuleSelector(start, end, sit) {
@@ -308,9 +444,7 @@ const _RawSet = class _RawSet {
         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)
-          );
+          const transformedSelectors = selectors.map((selector) => this.generateRuleSelector(start, end, selector));
           rule.selector = transformedSelectors.join(", ");
         }
       } else if (isAtRule(rule)) {
@@ -322,9 +456,7 @@ const _RawSet = class _RawSet {
             rule.children.forEach((childRule) => {
               if (isStyleRule(childRule)) {
                 const selectors = childRule.selector.split(",").map((s) => s.trim());
-                const transformedSelectors = selectors.map(
-                  (selector) => this.generateRuleSelector(start, end, selector)
-                );
+                const transformedSelectors = selectors.map((selector) => this.generateRuleSelector(start, end, selector));
                 childRule.selector = transformedSelectors.join(", ");
               }
             });
@@ -342,7 +474,11 @@ const _RawSet = class _RawSet {
     return styleBody;
   }
   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);
@@ -359,7 +495,10 @@ const _RawSet = class _RawSet {
   getDrAppendAttributeAndDelete(element, obj) {
     let data = element.getAttribute(_RawSet.DR_APPENDER_NAME);
     if (data && !/\[.+\]/g.test(data)) {
-      const currentIndex = ScriptUtils.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);
     }
@@ -372,19 +511,28 @@ const _RawSet = class _RawSet {
   }
   // 중요 important
   static checkPointCreates(element, obj, config) {
-    const nodeIterator = config.window.document?.createNodeIterator(element, NodeFilter.SHOW_ALL, {
-      acceptNode(node) {
-        if (node.nodeType === Node.TEXT_NODE) {
+    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 ?? ""));
-          return between?.length > 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-        } else if (node.nodeType === Node.ELEMENT_NODE) {
+          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)) {
-            return NodeFilter.FILTER_REJECT;
+            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 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 + "}$");
             });
@@ -396,79 +544,102 @@ const _RawSet = class _RawSet {
           const normalAttrs = /* @__PURE__ */ new Map();
           const linkVariables = /* @__PURE__ */ new Map();
           const linkNames = EventManager.linkAttrs.map((it) => it.name);
-          const isAttr = element2.getAttributeNames().filter((it) => {
+          const isAttr = element2.getAttributeNames().filter((it) => !EventManager.noDetectAttr.includes(it)).filter((it) => {
             const value = element2.getAttribute(it);
             if (value && linkNames.includes(it)) {
               linkVariables.set(it, value);
             } else if (value && _RawSet.isExpression(value)) {
-              let variablePath = _RawSet.expressionGroups(value)[0][1];
-              const originVariable = variablePath;
-              variablePath = variablePath.replace(/#[^#]*#/g, "({})");
-              const optionalChainPath = ObjectUtils.Path.toOptionalChainPath(variablePath);
-              const cval = ScriptUtils.evaluateReturn(optionalChainPath, Object.assign(obj));
+              const variablePaths = _RawSet.expressionGroups(value).map((it2) => ({
+                origin: it2[0],
+                inner: it2[1]
+              }));
+              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, originVariable);
+              normalAttrs.set(it, { originalAttrValue: value, variablePaths });
             }
             const isTargetAttr = targetAttrNames.includes(it.toLowerCase());
             return isTargetAttr;
           }).length > 0;
           if (linkVariables.size) {
-            element2.setAttribute(EventManager.linkTargetMapAttrName, JSON.stringify(Array.from(linkVariables.entries())));
+            element2.setAttribute(
+              EventManager.linkTargetMapAttrName,
+              JSON.stringify(Array.from(linkVariables.entries()))
+            );
           }
           if (normalAttrs.size) {
             element2.setAttribute(EventManager.normalAttrMapAttrName, JSON.stringify(Array.from(normalAttrs.entries())));
           }
-          const r = isAttr || isElement ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-          return r;
+          const r2 = isAttr || isElement ? NodeUtils.FindNodesFilterResult.MATCH_AND_SKIP_CHILDREN : NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
+          return r2;
         }
-        return NodeFilter.FILTER_REJECT;
+        const r = NodeUtils.FindNodesFilterResult.NO_MATCH_AND_CONTINUE;
+        return r;
       }
-    });
+    );
     const pars = [];
     let currentNode;
-    while (currentNode = nodeIterator?.nextNode()) {
-      if (currentNode.nodeType === Node.TEXT_NODE) {
-        const text = currentNode.textContent ?? "";
+    const name = RandomUtils.uuid();
+    for (const currentNode2 of findNodes) {
+      processedNodes.add(currentNode2);
+      if (currentNode2.nodeType === Node2.TEXT_NODE) {
+        const text = currentNode2.textContent ?? "";
         const template = config.window.document?.createElement("template");
         if (!template) break;
         const groups = _RawSet.expressionGroups(text);
-        const map = groups.map((it) => ({ uuid: `${RandomUtils.alphabet(40)}_${obj?.constructor?.name}`, content: it[0], regexArr: it }));
+        const map = groups.map((it) => ({
+          uuid: `${RandomUtils.alphabet(40)}_${obj?.constructor?.name}`,
+          content: it[0],
+          regexArr: it
+        }));
         let lasterIndex = 0;
         for (let i = 0; i < map.length; i++) {
           const it = map[i];
           const regexArr = it.regexArr;
           const preparedText = regexArr.input.substring(lasterIndex, regexArr.index);
           let type;
-          if (currentNode.parentNode && currentNode.parentNode.nodeName.toUpperCase() === "STYLE") {
+          if (currentNode2.parentNode && currentNode2.parentNode.nodeName.toUpperCase() === "STYLE") {
             type = RawSetType.STYLE_TEXT;
           } else {
             type = RawSetType.TEXT;
           }
-          const node = document.createTextNode(preparedText);
+          const node = config.window.document.createTextNode(preparedText);
           const startEndPoint = _RawSet.createStartEndPoint({ id: it.uuid, type }, config);
           template.content.append(node);
           template.content.append(startEndPoint.start);
           template.content.append(startEndPoint.end);
           const fragment = config.window.document.createDocumentFragment();
           fragment.append(config.window.document.createTextNode(it.content));
-          pars.push(new _RawSet(it.uuid, type, {
-            start: startEndPoint.start,
-            node: currentNode,
-            end: startEndPoint.end,
-            parent: currentNode.parentNode
-            // thisVariableName: thisVariableName
-          }, { fragment, config }));
+          pars.push(
+            new _RawSet(
+              it.uuid,
+              type,
+              {
+                start: startEndPoint.start,
+                node: currentNode2,
+                end: startEndPoint.end,
+                parent: currentNode2.parentNode
+                // thisVariableName: thisVariableName
+              },
+              { fragment, config }
+            )
+          );
           lasterIndex = regexArr.index + it.content.length;
         }
         template.content.append(config.window.document.createTextNode(text.substring(lasterIndex, text.length)));
-        currentNode?.parentNode?.replaceChild(template.content, currentNode);
-      } else if (currentNode.nodeType === Node.ELEMENT_NODE) {
+        currentNode2?.parentNode?.replaceChild(template.content, currentNode2);
+      } else if (currentNode2.nodeType === Node2.ELEMENT_NODE) {
         const uuid = `${RandomUtils.alphabet(40)}`;
-        const element2 = currentNode;
+        const element2 = currentNode2;
         const fragment = config.window.document.createDocumentFragment();
         const elementType = RawSetType.TARGET_ELEMENT;
         const startEndPoint = _RawSet.createStartEndPoint({ node: element2, id: uuid, type: elementType }, config);
@@ -477,19 +648,25 @@ const _RawSet = class _RawSet {
         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;
-        currentNode?.parentNode?.insertBefore(startEndPoint.start, currentNode);
-        currentNode?.parentNode?.insertBefore(startEndPoint.end, currentNode.nextSibling);
-        fragment.append(currentNode);
-        const rawSet = new _RawSet(uuid, isElement ? elementType : isAttr ? RawSetType.TARGET_ATTR : RawSetType.UNKOWN, {
-          start: startEndPoint.start,
-          node: currentNode,
-          end: startEndPoint.end,
-          parent: currentNode.parentNode
-          // thisVariableName: thisVariableName
-        }, { config, fragment });
+        currentNode2?.parentNode?.insertBefore(startEndPoint.start, currentNode2);
+        currentNode2?.parentNode?.insertBefore(startEndPoint.end, currentNode2.nextSibling);
+        fragment.append(currentNode2);
+        const rawSet = new _RawSet(
+          uuid,
+          isElement ? elementType : isAttr ? RawSetType.TARGET_ATTR : RawSetType.UNKOWN,
+          {
+            start: startEndPoint.start,
+            node: currentNode2,
+            end: startEndPoint.end,
+            parent: currentNode2.parentNode
+            // thisVariableName: thisVariableName
+          },
+          { config, fragment }
+        );
         pars.push(rawSet);
       }
     }
+    const util = ElementUtils;
     return pars;
   }
   static createStartEndPoint(data, config) {
@@ -565,13 +742,17 @@ 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#");
     });
   }
@@ -712,7 +893,7 @@ const _RawSet = class _RawSet {
       const style = _RawSet.generateStyleTransform(set.styles ?? [], rawSet.uuid, true);
       targetElement.innerHTML = style + (set.template ?? "");
     } else {
-      targetObj = ScriptUtils.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(drThis), obj);
+      targetObj = ObjectUtils.Script.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(drThis), obj);
     }
     const componentKey = rawSet.uuid;
     const renderScript = ` /*drThisCreate*/
@@ -756,7 +937,10 @@ 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 = ScriptUtils.evaluate(onCreateDataScript, Object.assign(obj, { __render: render }));
+    const onCreateDataParam = ObjectUtils.Script.evaluate(
+      onCreateDataScript,
+      Object.assign(obj, { __render: render })
+    );
     if (isOnCreateRenderData(targetObj)) {
       targetObj?.onCreateRenderData(onCreateDataParam);
     }
@@ -766,7 +950,10 @@ const _RawSet = class _RawSet {
     const onCreate = element.getAttribute(_RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
     let createParam = [];
     if (onCreate) {
-      createParam = ScriptUtils.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];
       }
@@ -787,15 +974,38 @@ const _RawSet = class _RawSet {
     const oninit = element.getAttribute(_RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME);
     if (oninit) {
       const script = `${renderScript}  ${oninit} `;
-      ScriptUtils.evaluate(script, Object.assign(obj, { __render: render }));
+      ObjectUtils.Script.evaluate(script, Object.assign(obj, { __render: render }));
     }
     targetElement.querySelectorAll(EventManager.attrNames.map((it) => `[${it}]`).join(",")).forEach((it) => {
       it.setAttribute(EventManager.ownerVariablePathAttrName, "this");
     });
-    const componentNameReplaceKey = RandomUtils.uuid();
-    const innerHTMLName = targetElement.getAttribute(_RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME) ?? "innerHTML";
+    rawSet.point.innerHTML = element.innerHTML;
+    const innerText = element.textContent?.trim() ?? "";
+    const escapedInnerHTML = 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";
+    const templateReplacements = [];
     if (innerHTMLName) {
-      _RawSet.replaceInnerHTML(targetElement, { asIs: `#${innerHTMLName}#`, toBe: element.innerHTML });
+      templateReplacements.push({
+        regex: new RegExp(`#${innerHTMLName}#`, "g"),
+        callback: () => element.innerHTML
+      });
+    }
+    if (innerTEXTName) {
+      templateReplacements.push({
+        regex: new RegExp(`#${innerTEXTName}#`, "g"),
+        callback: () => innerText
+      });
+    }
+    if (innerHTMLEscapedName) {
+      templateReplacements.push({
+        regex: new RegExp(`#${innerHTMLEscapedName}#`, "g"),
+        callback: () => escapedInnerHTML
+      });
+    }
+    if (templateReplacements.length > 0) {
+      targetElement.innerHTML = StringUtils.replaceSequentially(targetElement.innerHTML, templateReplacements);
     }
     const optionThisName = targetElement.getAttribute(_RawSet.DR_THIS_NAME_OPTIONNAME);
     targetElement.getAttributeNames().forEach((it) => targetElement.setAttribute(it, targetElement.getAttribute(it).replace(/#this#/g, drThis)));
@@ -803,8 +1013,14 @@ const _RawSet = class _RawSet {
     if (optionThisName) {
       targetElement.innerHTML = targetElement.innerHTML.replaceAll(`@${optionThisName}@`, drThis);
     }
-    const nearThisRandom = this.drThisBindEncoding(targetElement, /@nearThis@/g, { config, otherReplaceVariablePath: rawSet.findNearThisPath() });
-    const parentThisRandom = this.drThisBindEncoding(targetElement, /@parentThis@/g, { config, otherReplaceVariablePath: rawSet.findParentThisPath() });
+    const nearThisRandom = this.drThisBindEncoding(targetElement, /@nearThis@/g, {
+      config,
+      otherReplaceVariablePath: rawSet.findNearThisPath()
+    });
+    const parentThisRandom = this.drThisBindEncoding(targetElement, /@parentThis@/g, {
+      config,
+      otherReplaceVariablePath: rawSet.findParentThisPath()
+    });
     const vars = this.drVarEncoding(targetElement, drVarOption);
     this.drVarDecoding(targetElement, vars);
     this.drThisDecoding(targetElement, { asIs: thisRandom, toBe: "@this@" });
@@ -847,7 +1063,13 @@ const _RawSet = class _RawSet {
     };
     return targetAttribute;
   }
-  static createComponentTargetElement({ name, objFactory, template = "", styles = [], noStrip }) {
+  static createComponentTargetElement({
+    name,
+    objFactory,
+    template = "",
+    styles = [],
+    noStrip
+  }) {
     const targetElement = {
       name,
       styles,
@@ -860,7 +1082,6 @@ const _RawSet = class _RawSet {
         obj.__domrender_components ?? (obj.__domrender_components = {});
         const domrenderComponents = obj.__domrender_components;
         const renderScript = ` /*createComponentTargetElement*/
-            // console.log('-------------------',this.__render);
             var ${EventManager.RAWSET_VARNAME} = this.__render.rawSet; 
             var ${EventManager.COMPONENT_VARNAME} = this.__render.component; 
             var ${EventManager.ELEMENT_VARNAME} = this.__render.element; 
@@ -897,7 +1118,10 @@ const _RawSet = class _RawSet {
         render.attribute = _RawSet.getAttributeObject(element, { script: renderScript, obj, renderData: render });
         render = Object.freeze(render);
         if (constructor) {
-          let param = ScriptUtils.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];
           }
@@ -912,22 +1136,55 @@ const _RawSet = class _RawSet {
         rawSet.dataSet.render = render;
         instance.__rawSet = rawSet;
         let applayTemplate = element.innerHTML;
+        let applayTemplateText = element.textContent?.trim() ?? "";
+        let applayTemplateEscape = ConvertUtils.escapeHTML(element.innerHTML);
         let innerHTMLThisRandom;
-        const componentName = element.getAttribute(_RawSet.DR_COMPONENT_NAME_OPTIONNAME) ?? "component";
-        const innerHTMLName = element.getAttribute(_RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME) ?? "innerHTML";
+        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 = RandomUtils.uuid();
-          applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
-          applayTemplate = applayTemplate.replace(RegExp(`#${componentName}#`, "g"), "this");
+          applayTemplate = StringUtils.replaceSequentially(applayTemplate, [
+            {
+              regex: /this\./g,
+              callback: () => innerHTMLThisRandom
+            },
+            {
+              regex: new RegExp(`#${componentName}#`, "g"),
+              callback: () => nearThisPath
+            }
+          ]);
         }
-        applayTemplate = (this.template ?? "").replace(RegExp(`#${innerHTMLName}#`, "g"), applayTemplate);
+        applayTemplate = StringUtils.replaceSequentially(this.template ?? "", [
+          {
+            regex: new RegExp(`#${innerHTMLName}#`, "g"),
+            callback: () => applayTemplate
+          },
+          {
+            regex: new RegExp(`#${innerTEXTName}#`, "g"),
+            callback: () => applayTemplateText
+          },
+          {
+            regex: new RegExp(`#${innerHTMLEscapedName}#`, "g"),
+            callback: () => applayTemplateEscape
+          }
+        ]);
         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.__domrender_components.${rawSet.uuid}`,
+          "",
+          !noStrip,
+          obj,
+          config
+        );
         if (data && innerHTMLThisRandom) {
           const template2 = config.window.document.createElement("template");
-          template2.content.append(data);
-          template2.innerHTML = template2.innerHTML.replace(RegExp(innerHTMLThisRandom, "g"), "this.");
+          template2.innerHTML = ElementUtils.toInnerHTML(data, { document: config.window.document }).replace(RegExp(innerHTMLThisRandom, "g"), "this.");
+          ;
           data = template2.content;
         }
         return data;
@@ -964,7 +1221,26 @@ const _RawSet = class _RawSet {
     const normalAttribute = attribute[EventManager.normalAttrMapAttrName];
     if (normalAttribute) {
       new Map(JSON.parse(normalAttribute)).forEach((v, k) => {
-        const cval = ScriptUtils.evaluateReturn({ bodyScript: config.script, returnScript: v }, Object.assign(config.obj, config.renderData ? { __render: config.renderData } : void 0));
+        const variablePaths = v.variablePaths;
+        let targetScript = v.originalAttrValue.trim();
+        let checktargetScript = v.originalAttrValue.trim();
+        variablePaths.forEach((it) => {
+          checktargetScript = targetScript.replaceAll(it.origin, "");
+        });
+        let isScriptValue = checktargetScript.length === 0 && variablePaths.length === 1;
+        if (isScriptValue) {
+          let r = ObjectUtils.Path.toOptionalChainPath(variablePaths[0].inner);
+          targetScript = targetScript.replaceAll(variablePaths[0].origin, r);
+        } else {
+          variablePaths.forEach((it) => {
+            let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
+            targetScript = targetScript.replaceAll(it.origin, `\${${r}}`);
+          });
+        }
+        const cval = ObjectUtils.Script.evaluateReturn(
+          { bodyScript: config.script, returnScript: isScriptValue ? targetScript : "`" + targetScript + "`" },
+          Object.assign(config.obj, config.renderData ? { __render: config.renderData } : void 0)
+        );
         attribute[k] = cval;
       });
     }
@@ -1005,11 +1281,12 @@ _RawSet.DR_COMPLETE_OPTIONNAME = "dr-option-complete";
 _RawSet.DR_STRIP_OPTIONNAME = "dr-option-strip";
 _RawSet.DR_DESTROY_OPTIONNAME = "dr-option-destroy";
 _RawSet.DR_THIS_NAME_OPTIONNAME = "dr-option-this-name";
-/**
- * @deprecated
- */
-_RawSet.DR_COMPONENT_NAME_OPTIONNAME = "dr-option-component-name";
-_RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME = "dr-option-component-inner-html-name";
+_RawSet.DR_VARIABLE_NAME_OPTIONNAME = "dr-option-variable-name";
+_RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME = "dr-option-item-variable-name";
+_RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME = "dr-option-item-index-variable-name";
+_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";
 _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";