@dooboostore/dom-render 1.0.110 → 1.0.112

package/dist/esm/rawsets/RawSet.js

@@ -119,10 +119,49 @@ 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 +204,15 @@ 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}`,
+          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);
@@ -215,140 +251,23 @@ 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();
@@ -411,6 +330,7 @@ const _RawSet = class _RawSet {
         }
       });
     }
+    console.groupEnd();
     return { raws, executedOperators };
   }
   // 중요 스타일 적용 부분
@@ -529,7 +449,7 @@ const _RawSet = class _RawSet {
           }
           if (element2.hasAttribute(EventManager.attrAttrName)) {
             const script = element2.getAttribute(EventManager.attrAttrName) ?? "";
-            const keyValuePairs = Array.from(script.matchAll(/(\w+):\s*([^,}]+)/g)).map((match) => ({
+            const keyValuePairs = Array.from(script.matchAll(/['"]?([\w-_]+)['"]?:\s*([^,}]+)/g)).map((match) => ({
               key: match[1],
               value: match[2]
             }));
@@ -539,20 +459,22 @@ const _RawSet = class _RawSet {
           }
           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);
+            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],
-                inner: it2[1]
+                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, "({})");
@@ -565,7 +487,7 @@ const _RawSet = class _RawSet {
               } else {
                 element2.setAttribute(it, cval);
               }
-              normalAttrs.set(it, { originalAttrValue: value, variablePaths });
+              normalAttrs.set(it, { originalAttrValue: value, variablePaths, isStringTemplate });
             }
             const isTargetAttr = targetAttrNames.includes(it.toLowerCase());
             return isTargetAttr;
@@ -636,7 +558,8 @@ const _RawSet = class _RawSet {
           lasterIndex = regexArr.index + it.content.length;
         }
         template.content.append(config.window.document.createTextNode(text.substring(lasterIndex, text.length)));
-        currentNode2?.parentNode?.replaceChild(template.content, currentNode2);
+        const p = currentNode2?.parentNode;
+        p?.replaceChild(template.content, currentNode2);
       } else if (currentNode2.nodeType === Node2.ELEMENT_NODE) {
         const uuid = `${RandomUtils.alphabet(40)}`;
         const element2 = currentNode2;
@@ -645,6 +568,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;
@@ -1007,9 +931,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);
     }
@@ -1183,7 +1109,8 @@ const _RawSet = class _RawSet {
         );
         if (data && innerHTMLThisRandom) {
           const template2 = config.window.document.createElement("template");
-          template2.innerHTML = ElementUtils.toInnerHTML(data, { document: config.window.document }).replace(RegExp(innerHTMLThisRandom, "g"), "this.");
+          let s = ElementUtils.toInnerHTML(data, { document: config.window.document });
+          template2.innerHTML = s.replace(RegExp(innerHTMLThisRandom, "g"), "this.");
           ;
           data = template2.content;
         }
@@ -1223,22 +1150,17 @@ const _RawSet = class _RawSet {
       new Map(JSON.parse(normalAttribute)).forEach((v, k) => {
         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 {
+        if (v.isStringTemplate) {
           variablePaths.forEach((it) => {
             let r = ObjectUtils.Path.toOptionalChainPath(it.inner);
             targetScript = targetScript.replaceAll(it.origin, `\${${r}}`);
           });
+        } else {
+          let r = ObjectUtils.Path.toOptionalChainPath(variablePaths[0].inner);
+          targetScript = targetScript.replaceAll(variablePaths[0].origin, r);
         }
         const cval = ObjectUtils.Script.evaluateReturn(
-          { bodyScript: config.script, returnScript: isScriptValue ? targetScript : "`" + targetScript + "`" },
+          { bodyScript: config.script, returnScript: v.isStringTemplate ? "`" + targetScript + "`" : targetScript },
           Object.assign(config.obj, config.renderData ? { __render: config.renderData } : void 0)
         );
         attribute[k] = cval;
@@ -1262,6 +1184,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";
@@ -1328,6 +1252,9 @@ _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,
@@ -1341,7 +1268,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;