@dooboostore/dom-render 1.0.107 → 1.0.108

package/src/operators/DrAppender.ts

@@ -0,0 +1,64 @@
+import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
+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';
+
+export class DrAppender extends OperatorExecuterAttrRequire<string> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+        source.operatorAround = undefined;
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+    }
+
+    async executeAttrRequire(attr: string): Promise<ExecuteState> {
+        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(`
+                    try{
+                    ${this.render.bindScript}
+                    ${this.elementSource.attrs.drBeforeOption ?? ''}
+                        const ifWrap = document.createElement('div');
+                        // ifWrap.setAttribute('${RawSet.DR_STRIP_OPTIONNAME}', 'true');
+                        // ifWrap.setAttribute('${RawSet.DR_IF_NAME}', '${this.elementSource.attrs.drAppender} && ${this.elementSource.attrs.drAppender}.length > 0');
+                        const n = this.__render.element.cloneNode(true);
+                        Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drAppender' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));
+                        const length = ${this.elementSource.attrs.drAppender}.length;
+                        if (length > 0) {
+                            n.setAttribute('${RawSet.DR_FOR_OF_NAME}', '${this.elementSource.attrs.drAppender}[' + (length-1) + ']');
+                            n.setAttribute('${RawSet.DR_NEXT_OPTIONNAME}', '${this.elementSource.attrs.drAppender},' + length);
+                        } else {
+                            n.setAttribute('${RawSet.DR_FOR_OF_NAME}', '${this.elementSource.attrs.drAppender}[0]');
+                            n.setAttribute('${RawSet.DR_NEXT_OPTIONNAME}', '${this.elementSource.attrs.drAppender},' + 1);
+                        }
+                        // console.log('appender--->', Array.from(n.getAttributeNames()).map(it=>({name:it,attr: n.getAttribute(it)})));
+                        // const drOptionThis = n.getAttribute('${RawSet.DR_THIS_OPTIONNAME}');
+                        // if (drOptionThis) {
+                        // }
+                        // ifWrap.append(n);
+                        // this.__render.fag.append(ifWrap);
+                        this.__render.fag.append(n);
+                    ${this.elementSource.attrs.drAfterOption ?? ''}
+                    }catch(e){}
+                    `, Object.assign(this.source.obj, {
+            __render: Object.freeze({
+                drStripOption: this.elementSource.attrs.drStripOption,
+                drAttr: this.elementSource.attrs,
+                drAttrsOriginName: RawSet.drAttrsOriginName,
+                fag: newTemp,
+                ...this.render
+                // eslint-disable-next-line no-use-before-define
+            } as Render)
+        }));
+        RawSet.drVarDecoding(newTemp, vars);
+        RawSet.drItOtherDecoding(newTemp, itRandom);
+        const tempalte = this.source.config.window.document.createElement('template');
+        tempalte.innerHTML = newTemp.innerHTML;
+        this.returnContainer.fag.append(tempalte.content)
+        const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+        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)
+        return ExecuteState.EXECUTE;
+    }
+}

package/src/operators/DrFor.ts

@@ -0,0 +1,52 @@
+import { OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
+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';
+
+export class DrFor extends OperatorExecuterAttrRequire<string> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+        source.operatorAround = undefined;
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+    }
+
+    async executeAttrRequire(attr: string): Promise<ExecuteState> {
+        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');
+        // console.log('-----asdad',attr , this.elementSource.attrs.drItOption);
+        ScriptUtils.evaluate(`
+                    ${this.render.bindScript}
+                    ${this.elementSource.attrs.drBeforeOption ?? ''}
+                    for(${attr}) {
+                        const n = this.__render.element.cloneNode(true);
+                        var destIt = ${this.elementSource.attrs.drItOption};
+                        if (destIt !== undefined) {
+                            n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearForIt\\#/g, destIt).replace(/\\#nearForIndex\\#/g, destIt))) 
+                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, destIt);
+                        }
+                        if (this.__render.drStripOption === 'true') {
+                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));
+                        } else {
+                            this.__render.fag.append(n);
+                        }
+                    }
+                    ${this.elementSource.attrs.drAfterOption ?? ''}
+                    `, Object.assign(this.source.obj, {
+            __render: Object.freeze({
+                fag: newTemp,
+                drStripOption: this.elementSource.attrs.drStripOption,
+                ...this.render
+            })
+        }));
+        RawSet.drVarDecoding(newTemp, vars);
+        RawSet.drItOtherDecoding(newTemp, itRandom);
+        const tempalte = this.source.config.window.document.createElement('template');
+        tempalte.innerHTML = newTemp.innerHTML;
+        this.returnContainer.fag.append(tempalte.content)
+        const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config)
+        this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        this.returnContainer.raws.push(...rr)
+        return ExecuteState.EXECUTE;
+    }
+}

package/src/operators/DrForOf.ts

@@ -0,0 +1,116 @@
+import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
+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 DrForOf extends OperatorExecuterAttrRequire<string> {
+  constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+    source.operatorAround = undefined;
+    super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+  }
+
+  async executeAttrRequire(attr: string): Promise<ExecuteState> {
+    // console.log('타지도않냐?')
+    const itRandom = RawSet.drItOtherEncoding(this.elementSource.element, 'DrForOf');
+    const vars = RawSet.drVarEncoding(this.elementSource.element, this.elementSource.attrs.drVarOption ?? '');
+    const newTemp = this.source.config.window.document.createElement('temp');
+    // console.log('----!', this.elementSource.attrs)
+    // ScriptUtils.evalReturn()
+    ScriptUtils.evaluate(`
+                    ${this.render.bindScript}
+                    ${this.elementSource.attrs.drBeforeOption ?? ''}
+                    var i = -1; 
+                    const forOf = ${ObjectUtils.Path.toOptionalChainPath(attr)};
+                    const forOfStr = \`${attr}\`.trim();
+                    // console.log('forOf---',forOf);
+                    if (forOf) {
+                        for(const it of forOf) {
+                            i++;
+                            var destIt = it;
+                            if (/\\[(.*,?)\\],/g.test(forOfStr)) {
+                                if (typeof it === 'string') {
+                                    destIt = it;
+                                } else {
+                                    destIt = forOfStr.substring(1, forOfStr.length-1).split(',')[i];
+                                }
+                            } else if (forOf.isRange) {
+                                    destIt = it;
+                            } else {
+                                destIt = forOfStr + '[' + i +']'
+                            }
+                            const n = this.__render.element.cloneNode(true);
+                            // console.log('zzzzzzzzzzz', n.getAttribute('${RawSet.DR_DETECT_ATTR_OPTIONNAME}'));
+                            Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drForOf' && k !== 'drNextOption' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));
+                            // console.log('---------'+destIt,n, Array.from(n.getAttributeNames()).map(it=>({name:it,attr: n.getAttribute(it)})));
+                            // console.log('---------destItdestIt',destIt);
+                            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)))
+                            const drOptionAttr = n.getAttribute('${RawSet.DR_DETECT_ATTR_OPTIONNAME}');
+                            if (drOptionAttr) {
+                              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 drOptionFilter = n.getAttribute('${RawSet.DR_DETECT_FILTER_OPTIONNAME}');
+                            if (drOptionFilter) {
+                              const drOptionFilterResult = $scriptUtils.evaluateReturn(drOptionFilter, this);
+                              // console.log('---drforof----', drOptionFilter, drOptionFilterResult)
+                              if (!drOptionFilterResult) {
+                                continue;
+                              }
+                            }
+
+                            n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, i);
+                            // console.log('!@@@@', n.innerHTML);
+                            // DR_THIS_OPTIONNAME 는 제거한다 꼬인다. strip 할때 막 꼬여버린다.
+                            // const drOptionThis = n.getAttribute('${RawSet.DR_THIS_OPTIONNAME}');
+                            // if (drOptionThis) {
+                            //  n.setAttribute('${RawSet.DR_THIS_NAME}', drOptionThis)
+                            // }
+                            if (this.__render.drStripOption === 'true') {
+                                Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));
+                            } else {
+                                this.__render.fag.append(n);
+                            }
+                           
+                        }
+                        
+                        if('${this.elementSource.attrs.drNextOption}' !== 'null') {
+                            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));
+                            const [name, idx] = '${this.elementSource.attrs.drNextOption}'.split(',');
+                            n.setAttribute('${RawSet.DR_FOR_OF_NAME}', name + '[' + idx + ']');
+                            n.setAttribute('${RawSet.DR_NEXT_OPTIONNAME}', name + ',' +  (Number(idx) + 1));
+                            this.__render.fag.append(n);
+                        }
+                    }
+                    ${this.elementSource.attrs.drAfterOption ?? ''}
+                    `, Object.assign(this.source.obj, {
+      __render: Object.freeze({
+        drStripOption: this.elementSource.attrs.drStripOption,
+        drAttr: this.elementSource.attrs,
+        drAttrsOriginName: RawSet.drAttrsOriginName,
+        fag: newTemp,
+        ...this.render
+        // eslint-disable-next-line no-use-before-define
+      } as Render)
+    }));
+    RawSet.drVarDecoding(newTemp, vars);
+    RawSet.drItOtherDecoding(newTemp, itRandom);
+    const tempalte = this.source.config.window.document.createElement('template');
+    tempalte.innerHTML = newTemp.innerHTML;
+    this.returnContainer.fag.append(tempalte.content)
+    const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+    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)
+    return ExecuteState.EXECUTE;
+  }
+}

package/src/operators/DrForm.ts

@@ -0,0 +1,72 @@
+import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
+import {RawSet} from '../rawsets/RawSet';
+import {Validator} from '../validators/Validator';
+import {EventManager} from '../events/EventManager';
+import {ValidatorArray} from '../validators/ValidatorArray';
+import {Render} from '../rawsets/Render';
+import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
+import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
+
+export class DrForm extends OperatorExecuterAttrRequire<string> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+    }
+
+    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 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 thisName = fromName ?? this.elementSource.element.getAttribute('name');
+        // // 자기자신이 Input 대상일때
+        if (childs.length <= 0 && thisName) {
+            childs.push(this.elementSource.element);
+        } else {
+            if (data instanceof Validator) {
+                data.setTarget(this.elementSource.element);
+            }
+        }
+        childs.forEach(it => {
+            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');
+            if (varpath != null) {
+                if (validatorName) {
+                    ScriptUtils.evaluate(`
+                                ${this.render.bindScript}
+                                const validator = typeof ${validatorName} ==='function' ?  new  ${validatorName}() : ${validatorName};
+                                ${attr}['${varpath}'] = validator;
+                            `,
+                    Object.assign(this.source.obj, {
+                        __render: Object.freeze({
+                            drStripOption: this.elementSource.attrs.drStripOption,
+                            ...this.render
+                        } as Render)
+                    }
+                    ));
+                }
+                varpath = `${attr}['${varpath}']`;
+                const data = ScriptUtils.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);
+                } else if (data instanceof Validator) {
+                    // varpath += (varpath ? '.value' : 'value');
+                    // varpath = drAttr.drForm + '.' + varpath;
+                    // it.setAttribute(attrEventName, `${varpath} = $target.value; ${target}=$target; ${event}=$event;`);
+                    it.setAttribute(attrEventName, `${varpath}.set($target.value, $target, $event); ${it.getAttribute(attrEventName) ?? ''};`);
+                    data.setTarget(it);
+                    data.value = (it as any).value;
+                } else {
+                    it.setAttribute(attrEventName, `${varpath} = $target.value;`);
+                }
+            }
+        })
+        RawSet.drFormOtherMoveAttr(this.elementSource.element, 'temp-name', 'name', this.source.config);
+        this.returnContainer.raws.push(...RawSet.checkPointCreates(this.elementSource.element, this.source.obj, this.source.config));
+        return ExecuteState.EXECUTE;
+    }
+}

package/src/operators/DrIf.ts

@@ -0,0 +1,69 @@
+import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
+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 DrIf extends OperatorExecuterAttrRequire<string> {
+  constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+    source.operatorAround = undefined;
+    super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+  }
+
+  async executeAttrRequire(attr: string): Promise<ExecuteState> {
+    const itRandom = RawSet.drItOtherEncoding(this.elementSource.element, 'DrIf');
+    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에도 적용을 할지말지 생각해야됨  엘리먼트 존재유무에 따라서 적용을 할지말지 결정해야됨
+    const keepgoing = ScriptUtils.evaluate(`
+                ${this.render.bindScript}
+                ${this.elementSource.attrs.drBeforeOption ?? ''}
+                if ($rawSet.data === (${ObjectUtils.Path.toOptionalChainPath(attr)})) {
+                    return false;
+                }
+                $rawSet.data = ${ObjectUtils.Path.toOptionalChainPath(attr)};
+                if($rawSet.data) {
+                    const n = $element.cloneNode(true);
+                    Object.entries(this.__render.drAttr).filter(([k,v]) => k !== 'drIf' && v).forEach(([k, v]) => n.setAttribute(this.__render.drAttrsOriginName[k], v));
+                    var destIt = ${this.elementSource.attrs.drItOption};
+                    if (destIt !== undefined) {
+                     // 여기가 ..아주 헛갈리는데...
+                        Array.from(n.getAttributeNames()).forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#DrIFIt\\#/g, destIt)))
+                        n.innerHTML = n.innerHTML.replace(/\\#DrIFIt\\#/g, destIt);
+                    }
+                    if (this.__render.drStripOption === 'true') {
+                        Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));
+                    } else {
+                        this.__render.fag.append(n);
+                    }
+                }
+                ${this.elementSource.attrs.drAfterOption ?? ''};
+                return true;
+                `, Object.assign(this.source.obj,
+      {
+        __render: Object.freeze({
+          fag: newTemp,
+          drAttr: this.elementSource.attrs,
+          drAttrsOriginName: RawSet.drAttrsOriginName,
+          drStripOption: this.elementSource.attrs.drStripOption,
+          ...this.render
+        } as Render)
+      }
+    ));
+    // TODO: 뭐지?? 지워야되는거 아닌가?
+    if (keepgoing === false) {
+      return ExecuteState.STOP;
+    }
+    RawSet.drVarDecoding(newTemp, vars);
+    RawSet.drItOtherDecoding(newTemp, itRandom);
+    // const bypass = (newTemp.innerHTML ?? '').trim().length <= 0;
+    const tempalte = this.source.config.window.document.createElement('template');
+    tempalte.innerHTML = newTemp.innerHTML;
+    this.returnContainer.fag.append(tempalte.content);
+    const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+    this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);
+    this.returnContainer.raws.push(...rr);
+    return ExecuteState.EXECUTE;
+  }
+}

package/src/operators/DrInnerHTML.ts

@@ -0,0 +1,41 @@
+import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
+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';
+
+export class DrInnerHTML extends OperatorExecuterAttrRequire<string> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+    }
+
+    async executeAttrRequire(attr: string): Promise<ExecuteState> {
+        const newTemp = this.source.config.window.document.createElement('temp');
+        ScriptUtils.evaluate(`
+                        ${this.render.bindScript}
+                        const n = $element.cloneNode(true);
+                        ${this.elementSource.attrs.drBeforeOption ?? ''}
+                        n.innerHTML = ${attr};
+                        if (this.__render.drStripOption === 'true') {
+                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));
+                        } else {
+                            this.__render.fag.append(n);
+                        }
+                        ${this.elementSource.attrs.drAfterOption ?? ''}
+                    `, Object.assign(this.source.obj, {
+            __render: Object.freeze({
+                drStripOption: this.elementSource.attrs.drStripOption,
+                fag: newTemp,
+                ...this.render
+                // eslint-disable-next-line no-use-before-define
+            } as Render)
+        }));
+        const tempalte = this.source.config.window.document.createElement('template');
+        tempalte.innerHTML = newTemp.innerHTML;
+        this.returnContainer.fag.append(tempalte.content);
+        const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+        this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        this.returnContainer.raws.push(...rr);
+        return ExecuteState.EXECUTE;
+    }
+}

package/src/operators/DrInnerText.ts

@@ -0,0 +1,40 @@
+import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
+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';
+
+export class DrInnerText extends OperatorExecuterAttrRequire<string> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+    }
+
+    async executeAttrRequire(attr: string): Promise<ExecuteState> {
+        const newTemp = this.source.config.window.document.createElement('temp');
+        ScriptUtils.evaluate(` 
+                        ${this.render.bindScript}
+                        const n = $element.cloneNode(true);  
+                        ${this.elementSource.attrs.drBeforeOption ?? ''}
+                        n.innerText = ${attr};
+                        if (this.__render.drStripOption === 'true') {
+                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));
+                        } else {
+                            this.__render.fag.append(n);
+                        }
+                        ${this.elementSource.attrs.drAfterOption ?? ''}
+                    `, Object.assign(this.source.obj, {
+            __render: Object.freeze({
+                drStripOption: this.elementSource.attrs.drStripOption,
+                fag: newTemp,
+                ...this.render
+            } as Render)
+        }));
+        const tempalte = this.source.config.window.document.createElement('template');
+        tempalte.innerHTML = newTemp.innerHTML;
+        this.returnContainer.fag.append(tempalte.content);
+        const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+        this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        this.returnContainer.raws.push(...rr);
+        return ExecuteState.EXECUTE;
+    }
+}

package/src/operators/DrPre.ts

@@ -0,0 +1,14 @@
+import {AfterCallBack, ElementSource, ExecuteState, OperatorExecuter, ReturnContainer, Source} from './OperatorExecuter';
+import {RawSet} from '../rawsets/RawSet';
+import {Render} from '../rawsets/Render';
+
+export class DrPre extends OperatorExecuter<null> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+        source.operatorAround = undefined;
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack);
+    }
+
+    async execute(value: null): Promise<ExecuteState> {
+        return (value != null) ? ExecuteState.EXECUTE : ExecuteState.NO_EXECUTE;
+    }
+}

package/src/operators/DrRepeat.ts

@@ -0,0 +1,64 @@
+import {OperatorExecuterAttrRequire} from './OperatorExecuterAttrRequire';
+import {ScriptUtils} from '@dooboostore/core-web/script/ScriptUtils';
+import {RawSet} from '../rawsets/RawSet';
+import {EventManager} from '../events/EventManager';
+import {Render} from '../rawsets/Render';
+import {AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source} from './OperatorExecuter';
+
+export class DrRepeat extends OperatorExecuterAttrRequire<string> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+        source.operatorAround = undefined;
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+    }
+
+    async executeAttrRequire(attr: string): Promise<ExecuteState> {
+        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(`
+                    ${this.render.bindScript}
+                    ${this.elementSource.attrs.drBeforeOption ?? ''}
+                    var i = 0; 
+                    const repeat = ${attr};
+                    const repeatStr = \`${attr}\`;
+                    let range = repeat;
+                    if (typeof repeat === 'number') {
+                        range = ${EventManager.RANGE_VARNAME}(repeat);
+                    } 
+                    for(const it of range) {
+                        var destIt = it;
+                        if (range.isRange) {
+                            destIt = it;
+                        }  else {
+                            destIt = repeatStr + '[' + i +']'
+                        }
+                        const n = this.__render.element.cloneNode(true);
+                        n.getAttributeNames().forEach(it => n.setAttribute(it, n.getAttribute(it).replace(/\\#it\\#/g, destIt).replace(/\\#nearRangeIt\\#/g, destIt).replace(/\\#nearRangeIndex\\#/g, destIt)))
+                        n.innerHTML = n.innerHTML.replace(/\\#it\\#/g, destIt).replace(/\\#index\\#/g, destIt);
+                        
+                        if (this.__render.drStripOption === 'true') {
+                            Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));
+                        } else {
+                            this.__render.fag.append(n);
+                        }
+                        i++;
+                    }
+                    ${this.elementSource.attrs.drAfterOption ?? ''}
+                    `, Object.assign(this.source.obj, {
+            __render: Object.freeze({
+                fag: newTemp,
+                drStripOption: this.elementSource.attrs.drStripOption,
+                ...this.render
+            })
+        }));
+        RawSet.drVarDecoding(newTemp, vars);
+        RawSet.drItOtherDecoding(newTemp, itRandom);
+        const tempalte = this.source.config.window.document.createElement('template');
+        tempalte.innerHTML = newTemp.innerHTML;
+        this.returnContainer.fag.append(tempalte.content)
+        const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config)
+        this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);
+        this.returnContainer.raws.push(...rr)
+        return ExecuteState.EXECUTE;
+    }
+}

package/src/operators/DrStripElement.ts

@@ -0,0 +1,49 @@
+import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
+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';
+
+export class DrStripElement extends OperatorExecuterAttrRequire<string> {
+  constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+    source.operatorAround = undefined;
+    super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+  }
+
+  async executeAttrRequire(attr: string): Promise<ExecuteState> {
+    // const itRandom = RawSet.drItOtherEncoding(this.elementSource.element, 'DrStripElement');
+    // 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(`
+                ${this.render.bindScript}
+                ${this.elementSource.attrs.drBeforeOption ?? ''}
+                const n = $element.cloneNode(true);
+                if(${attr}) {
+                  Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));
+                } else {
+                  this.__render.fag.append(n);
+                }
+                ${this.elementSource.attrs.drAfterOption ?? ''};
+                return true;
+                `, Object.assign(this.source.obj,
+      {
+        __render: Object.freeze({
+          fag: newTemp,
+          drAttr: this.elementSource.attrs,
+          drAttrsOriginName: RawSet.drAttrsOriginName,
+          drStripOption: this.elementSource.attrs.drStripOption,
+          ...this.render
+        } as Render)
+      }
+    ));
+
+    const tempalte = this.source.config.window.document.createElement('template');
+    tempalte.innerHTML = newTemp.innerHTML;
+    this.returnContainer.fag.append(tempalte.content);
+    const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+    this.elementSource.element.parentNode?.replaceChild(this.returnContainer.fag, this.elementSource.element);
+    this.returnContainer.raws.push(...rr);
+    return ExecuteState.EXECUTE;
+  }
+}

package/src/operators/DrTargetAttr.ts

@@ -0,0 +1,36 @@
+import {RawSet} from '../rawsets/RawSet';
+import {TargetAttr} from '../configs/TargetAttr';
+import {AfterCallBack, ElementSource, ExecuteState, OperatorExecuter, ReturnContainer, Source} from './OperatorExecuter';
+import {Render} from '../rawsets/Render';
+
+export class DrTargetAttr extends OperatorExecuter<void> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack) {
+        source.operatorAround = undefined;
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+    }
+
+    async execute(): Promise<ExecuteState> {
+        const attributeNames = this.elementSource.element.getAttributeNames();
+        const targetAttr: TargetAttr | undefined = this.source.config?.targetAttrs?.find(it => attributeNames.includes(it.name));
+        if (targetAttr) {
+            const attrName = targetAttr.name;
+            const attrValue = this.rawSet.getAttributeAndDelete(this.elementSource.element, attrName)
+            if (attrValue && attrName && (!this.elementSource.attrs.drForOf && !this.elementSource.attrs.drFor && !this.elementSource.attrs.drRepeat)) {
+                const documentFragment = targetAttr.callBack(this.elementSource.element, attrValue, this.source.obj, this.rawSet);
+                if (documentFragment) {
+                    const rr = RawSet.checkPointCreates(documentFragment, this.source.obj, this.source.config)
+                    this.elementSource.element.parentNode?.replaceChild(documentFragment, this.elementSource.element);
+                    this.returnContainer.raws.push(...rr);
+                    this.afterCallBack.onAttrInitCallBacks.push({
+                        attrName,
+                        attrValue,
+                        obj: this.source.obj
+                    });
+                    targetAttr?.complete?.(this.elementSource.element, attrValue, this.source.obj, this.rawSet);
+                }
+            }
+            return ExecuteState.EXECUTE;
+        }
+        return ExecuteState.NO_EXECUTE;
+    }
+}