@dooboostore/dom-render 1.0.111 → 1.0.112

package/src/operators/Dr.ts

@@ -3,6 +3,7 @@ import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
 import {RawSet} from '../rawsets/RawSet';
 import {Render} from '../rawsets/Render';
 import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
+import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
 
 export class Dr extends OperatorExecuterAttrRequire<null> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
@@ -13,7 +14,7 @@ export class Dr extends OperatorExecuterAttrRequire<null> {
         const itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
         const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');
         const newTemp = this.source.config.window.document.createElement('temp');
-        ScriptUtils.evaluate(`
+        ObjectUtils.Script.evaluate(`
                     ${this.render.bindScript}
                     const n = $element.cloneNode(true);
                     var destIt = ${this.elementSource.attrs.drItOption};

package/src/operators/DrAppender.ts

@@ -3,6 +3,7 @@ import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
 import {RawSet} from '../rawsets/RawSet';
 import {Render} from '../rawsets/Render';
 import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
+import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
 
 export class DrAppender extends OperatorExecuterAttrRequire<string> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
@@ -14,7 +15,7 @@ export class DrAppender extends OperatorExecuterAttrRequire<string> {
         const itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
         const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');
         const newTemp = this.source.config.window.document.createElement('temp');
-        ScriptUtils.evaluate(`
+        ObjectUtils.Script.evaluate(`
                     try{
                     ${this.render.bindScript}
                     ${this.elementSource.attrs.drBeforeOption ?? ''}

package/src/operators/DrFor.ts

@@ -3,6 +3,7 @@ import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
 import {RawSet} from '../rawsets/RawSet';
 import {Render} from '../rawsets/Render';
 import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
+import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
 
 export class DrFor extends OperatorExecuterAttrRequire<string> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
@@ -15,7 +16,7 @@ export class DrFor extends OperatorExecuterAttrRequire<string> {
         const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');
         const newTemp = this.source.config.window.document.createElement('temp');
         // console.log('-----asdad',attr , this.elementSource.attrs.drItOption);
-        ScriptUtils.evaluate(`
+      ObjectUtils.Script.evaluate(`
                     ${this.render.bindScript}
                     ${this.elementSource.attrs.drBeforeOption ?? ''}
                     for(${attr}) {

package/src/operators/DrForOf.ts

@@ -19,9 +19,14 @@ export class DrForOf extends OperatorExecuterAttrRequire<string> {
 
     const variableName = this.elementSource.element.getAttribute(RawSet.DR_VARIABLE_NAME_OPTIONNAME);
     const itemVariableName = this.elementSource.element.getAttribute(RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME);
+    // const drAttrOption = this.elementSource.element.getAttribute(RawSet.DR_ATTR_OPTIONNAME);
     const itemIndexVariableName = this.elementSource.element.getAttribute(RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME);
+    const hasVariableName = this.elementSource.element.hasAttribute(RawSet.DR_VARIABLE_NAME_OPTIONNAME);
+    const hasItemVariableName = this.elementSource.element.hasAttribute(RawSet.DR_ITEM_VARIABLE_NAME_OPTIONNAME);
+    const hasItemIndexVariableName = this.elementSource.element.hasAttribute(RawSet.DR_ITEM_INDEX_VARIABLE_NAME_OPTIONNAME);
     // console.log('----!', this.elementSource.attrs)
     // ScriptUtils.evalReturn()
+    const t0 = performance.now();
     ObjectUtils.Script.evaluate(`
                     ${this.render.bindScript}
                     ${this.elementSource.attrs.drBeforeOption ?? ''}
@@ -29,6 +34,7 @@ export class DrForOf extends OperatorExecuterAttrRequire<string> {
                     const forOf = ${ObjectUtils.Path.toOptionalChainPath(attr)};
                     const forOfStr = \`${attr}\`.trim();
                     // console.log('forOf---',forOf);
+                    // debugger;
                     if (forOf) {
                         for(const it of forOf) {
                             i++;
@@ -47,16 +53,39 @@ export class DrForOf extends OperatorExecuterAttrRequire<string> {
                             const n = this.__render.element.cloneNode(true);
                             Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));
                             n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIt\\#/g, destIt).replace(/\\#it\\#/g, destIt).replace(/\\#nearForOfIndex\\#/g, i)))
-                            if ('${variableName}') {
+                            if (${hasVariableName} && '${variableName}') {
                               n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replaceAll('#${variableName}#', forOfStr)));
                             }
-                            if ('${itemVariableName}') {
+                            if (${hasItemVariableName} && '${itemVariableName}') {
                               n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replaceAll('#${itemVariableName}#', destIt)));
                             }
-                            if ('${itemIndexVariableName}') {
+                            if (${hasItemIndexVariableName} && '${itemIndexVariableName}') {
                               n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replaceAll('#${itemIndexVariableName}#', i)));
                             }
                             
+                            const hasDrOptionAttr = n.hasAttribute('${RawSet.DR_ATTR_OPTIONNAME}');
+                            if (hasDrOptionAttr) {
+                              const drOptionAttr = n.getAttribute('${RawSet.DR_ATTR_OPTIONNAME}');
+                              const drOptionAttrResult = $scriptUtils.evaluateReturn(drOptionAttr, this);
+                              Array.from(Object.entries(drOptionAttrResult??{})).forEach(([k,v])=>{
+                                if (v === null) {
+                                  n.removeAttribute(k);
+                                } else {
+                                  n.setAttribute(k,v);
+                                }
+                              })
+                            
+                            }
+                            const hasDrOptionIf = n.hasAttribute('${RawSet.DR_IF_OPTIONNAME}');
+                            if (hasDrOptionIf) {
+                              const drOptionIf = n.getAttribute('${RawSet.DR_IF_OPTIONNAME}');
+                              const e = $scriptUtils.evaluateReturn(drOptionIf, this);
+                              if(!e) {
+                                continue;
+                              }
+                            
+                            }
+                            
                             const drOptionAttr = n.getAttribute('${RawSet.DR_DETECT_ATTR_OPTIONNAME}');
                             if (drOptionAttr) {
                               const drOptionAttrResult = $scriptUtils.evaluateReturn(drOptionAttr, this);
@@ -79,13 +108,13 @@ export class DrForOf extends OperatorExecuterAttrRequire<string> {
                             }
 
                             n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, i);
-                            if ('${variableName}') {
+                            if (${hasVariableName} && '${variableName}') {
                               n.innerHTML = n.innerHTML.replaceAll('#${variableName}#', forOfStr);
                             }
-                            if ('${itemVariableName}') {
+                            if (${hasItemVariableName} && '${itemVariableName}') {
                               n.innerHTML = n.innerHTML.replaceAll('#${itemVariableName}#', destIt);
                             }
-                            if ('${itemIndexVariableName}') {
+                            if (${hasItemIndexVariableName} && '${itemIndexVariableName}') {
                               n.innerHTML = n.innerHTML.replaceAll('#${itemIndexVariableName}#', i);
                             }
                    
@@ -126,6 +155,7 @@ export class DrForOf extends OperatorExecuterAttrRequire<string> {
     this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);
     // const rrr = rr.flatMap(it => it.render(obj, config));// .flat();
     this.returnContainer.raws.push(...rr)
+    // console.log(`drForOf 호출에 걸린 시간은 ${performance.now() - t0} 밀리초.`);
     return ExecuteState.EXECUTE;
   }
 }

package/src/operators/DrForm.ts

@@ -6,6 +6,7 @@ import {ValidatorArray} from '../validators/ValidatorArray';
 import {Render} from '../rawsets/Render';
 import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
 import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
+import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
 
 export class DrForm extends OperatorExecuterAttrRequire<string> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
@@ -14,11 +15,11 @@ export class DrForm extends OperatorExecuterAttrRequire<string> {
 
     async executeAttrRequire(attr: string): Promise<ExecuteState> {
         RawSet.drFormOtherMoveAttr(this.elementSource.element, 'name', 'temp-name', this.source.config);
-        const data = ScriptUtils.evaluateReturn(`${attr}`, this.source.obj);
+        const data = ObjectUtils.Script.evaluateReturn(`${attr}`, this.source.obj);
 
         const childs = Array.from(this.elementSource.element.querySelectorAll('[name]'));
 
-        const fromName = ScriptUtils.evaluateReturn(this.elementSource.element.getAttribute(`${RawSet.DR_FORM_NAME}:name`) ?? '', this.source.obj);
+        const fromName = ObjectUtils.Script.evaluateReturn(this.elementSource.element.getAttribute(`${RawSet.DR_FORM_NAME}:name`) ?? '', this.source.obj);
         const thisName = fromName ?? this.elementSource.element.getAttribute('name');
         // // 자기자신이 Input 대상일때
         if (childs.length <= 0 && thisName) {
@@ -32,10 +33,10 @@ export class DrForm extends OperatorExecuterAttrRequire<string> {
             const eventName = it.getAttribute(`${RawSet.DR_FORM_NAME}:event`) ?? 'change'
             const validatorName = it.getAttribute(`${RawSet.DR_FORM_NAME}:validator`);
             const attrEventName = EventManager.attrPrefix + 'event-' + eventName;
-            let varpath = ScriptUtils.evaluateReturn(this.elementSource.element.getAttribute(`${RawSet.DR_FORM_NAME}:name`) ?? '', this.source.obj) ?? it.getAttribute('name');
+            let varpath = ObjectUtils.Script.evaluateReturn(this.elementSource.element.getAttribute(`${RawSet.DR_FORM_NAME}:name`) ?? '', this.source.obj) ?? it.getAttribute('name');
             if (varpath != null) {
                 if (validatorName) {
-                    ScriptUtils.evaluate(`
+                    ObjectUtils.Script.evaluate(`
                                 ${this.render.bindScript}
                                 const validator = typeof ${validatorName} ==='function' ?  new  ${validatorName}() : ${validatorName};
                                 ${attr}['${varpath}'] = validator;
@@ -49,7 +50,7 @@ export class DrForm extends OperatorExecuterAttrRequire<string> {
                     ));
                 }
                 varpath = `${attr}['${varpath}']`;
-                const data = ScriptUtils.evaluateReturn(`${varpath}`, this.source.obj);
+                const data = ObjectUtils.Script.evaluateReturn(`${varpath}`, this.source.obj);
                 if (data instanceof ValidatorArray) {
                     it.setAttribute(attrEventName, `${varpath}.setArrayValue($target, $target.value, $event); ${it.getAttribute(attrEventName) ?? ''};`);
                     data.addValidator((it as any).value, it);

package/src/operators/DrInnerHTML.ts

@@ -3,6 +3,7 @@ import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
 import {RawSet} from '../rawsets/RawSet';
 import {Render} from '../rawsets/Render';
 import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
+import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
 
 export class DrInnerHTML extends OperatorExecuterAttrRequire<string> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
@@ -11,7 +12,7 @@ export class DrInnerHTML extends OperatorExecuterAttrRequire<string> {
 
     async executeAttrRequire(attr: string): Promise<ExecuteState> {
         const newTemp = this.source.config.window.document.createElement('temp');
-        ScriptUtils.evaluate(`
+      ObjectUtils.Script.evaluate(`
                         ${this.render.bindScript}
                         const n = $element.cloneNode(true);
                         ${this.elementSource.attrs.drBeforeOption ?? ''}

package/src/operators/DrRepeat.ts

@@ -4,6 +4,7 @@ import {RawSet} from '../rawsets/RawSet';
 import {EventManager} from '../events/EventManager';
 import {Render} from '../rawsets/Render';
 import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
+import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
 
 export class DrRepeat extends OperatorExecuterAttrRequire<string> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
@@ -15,7 +16,7 @@ export class DrRepeat extends OperatorExecuterAttrRequire<string> {
         const itRandom = RawSet.drItOtherEncoding(this.elementSource.element);
         const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');
         const newTemp = this.source.config.window.document.createElement('temp');
-        ScriptUtils.evaluate(`
+      ObjectUtils.Script.evaluate(`
                     ${this.render.bindScript}
                     ${this.elementSource.attrs.drBeforeOption ?? ''}
                     var i = 0; 

package/src/operators/DrStripElement.ts

@@ -3,6 +3,7 @@ import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
 import { RawSet } from '../rawsets/RawSet';
 import { Render } from '../rawsets/Render';
 import { AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source } from './OperatorExecuter';
+import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
 
 export class DrStripElement extends OperatorExecuterAttrRequire<string> {
   constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
@@ -15,7 +16,7 @@ export class DrStripElement extends OperatorExecuterAttrRequire<string> {
     // const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');
     const newTemp = this.source.config.window.document.createElement('temp');
     // Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v)); <-- 이부분은 다른 attr에도 적용을 할지말지 생각해야됨  엘리먼트 존재유무에 따라서 적용을 할지말지 결정해야됨
-    ScriptUtils.evaluate(`
+    ObjectUtils.Script.evaluate(`
                 ${this.render.bindScript}
                 ${this.elementSource.attrs.drBeforeOption ?? ''}
                 const n = $element.cloneNode(true);

package/src/operators/DrTargetElement.ts

@@ -1,4 +1,4 @@
-import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
+import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
 import { RawSet } from '../rawsets/RawSet';
 import { CreatorMetaData } from '../rawsets/CreatorMetaData';
 import {
@@ -11,6 +11,7 @@ import {
 } from './OperatorExecuter';
 import { Render } from '../rawsets/Render';
 import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';
+import { TargetElement } from '../configs';
 
 declare global {
   interface Window {
@@ -33,9 +34,20 @@ export class DrTargetElement extends OperatorExecuter<void> {
   }
 
   async execute(): Promise<ExecuteState> {
-    const targetElement = this.source.config?.targetElements?.find(
-      it => it.name.toLowerCase() === this.elementSource.element.tagName.toLowerCase()
-    );
+    let targetElement: TargetElement | undefined = undefined;
+    let isTargetElementElement = this.elementSource.element.tagName.toLowerCase() === RawSet.DR_TARGET_ELEMENT_ELEMENTNAME.toLowerCase();
+    if (isTargetElementElement){
+      const targetElementTagName = this.elementSource.element.getAttribute(`${RawSet.DR_TARGET_ELEMENT_ELEMENTNAME}:is`)?.toLowerCase();
+      targetElement = this.source.config?.targetElements?.find(
+        it => it.name.toLowerCase() === targetElementTagName
+      );
+    } else {
+      targetElement = this.source.config?.targetElements?.find(
+        it => it.name.toLowerCase() === this.elementSource.element.tagName.toLowerCase()
+      );
+    }
+    // console.log('--------------tar', isTargetElementElement, targetElement, this.elementSource.element.tagName);
+
     if (targetElement) {
       if (
         this.rawSet.point.start instanceof this.source.config.window.HTMLMetaElement &&
@@ -71,7 +83,7 @@ export class DrTargetElement extends OperatorExecuter<void> {
           this.rawSet.detect = {
             action: () => {
               const script = `var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;  ${detectAction} `;
-              ScriptUtils.evaluate(
+              ObjectUtils.Script.evaluate(
                 script,
                 Object.assign(this.source.obj, {
                   __render: this.rawSet.dataSet.render

package/src/operators/DrTargetElementIsElement.ts

@@ -2,7 +2,7 @@ import { RawSet } from '../rawsets/RawSet';
 import { CreatorMetaData } from '../rawsets/CreatorMetaData';
 import { AfterCallBack, ElementSource, ExecuteState, OperatorExecuter, ReturnContainer, Source } from './OperatorExecuter';
 import { Render } from '../rawsets/Render';
-import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
+import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
 
 
 // 여기서 사용자가 등록한 TargetElement가 들어간다.
@@ -34,7 +34,7 @@ export class DrTargetElementIsElement extends OperatorExecuter<string | null> {
           this.rawSet.detect = {
             action: () => {
               const script = `var $component = this.__render.component; var $element = this.__render.element; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute;  ${detectAction} `;
-              ScriptUtils.evaluate(script, Object.assign(this.source.obj, {
+              ObjectUtils.Script.evaluate(script, Object.assign(this.source.obj, {
                 __render: this.rawSet.dataSet.render
               }))
             }

package/src/operators/DrThis.ts

@@ -4,7 +4,7 @@ import { ComponentSet } from '../components/ComponentSet';
 import { ExecuteState } from './OperatorExecuter';
 import { isOnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';
 import { isOnDrThisBind } from '../lifecycle/dr-this/OnDrThisBind';
-import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
+import { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';
 import { Render } from '../rawsets/Render';
 
 export class DrThis extends OperatorExecuterAttrRequire<string> {
@@ -12,7 +12,7 @@ export class DrThis extends OperatorExecuterAttrRequire<string> {
     // const e = this.elementSource;
     // console.log('drThis!!!!!!!!!!!!!', this.elementSource.attrs.drDetectIfOption, this.elementSource.attrs.drIfOption);
     const optionIf = this.elementSource.attrs.drDetectIfOption ?? this.elementSource.attrs.drIfOption;
-    const ok = ScriptUtils.evaluate(`
+    const ok = ObjectUtils.Script.evaluate(`
                 ${this.render.bindScript}
                 try {
                   const ok  = ${this.elementSource.attrs.drThis};

package/src/operators/DrThisProperty.ts

@@ -4,6 +4,7 @@ import {RawSet} from '../rawsets/RawSet';
 import {Render} from '../rawsets/Render';
 import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
 import {DomRenderConfig} from '../configs/DomRenderConfig';
+import {ObjectUtils} from "@dooboostore/core/object/ObjectUtils";
 
 export class DrThisProperty extends OperatorExecuterAttrRequire<string> {
     constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
@@ -23,7 +24,7 @@ export class DrThisProperty extends OperatorExecuterAttrRequire<string> {
         // }
         // await new Promise(resolve => setTimeout(resolve, 1000));
         // console.log('!!!!!!!!!!!!!!', this.rawSet);
-        ScriptUtils.evaluate(`
+      ObjectUtils.Script.evaluate(`
                     ${this.render.bindScript}
                     ${this.elementSource.attrs.drBeforeOption ?? ''}
                     var i = 0;