@dooboostore/dom-render 1.0.98

package/operators/DrStripElement.js

@@ -0,0 +1,50 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
+import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
+import { RawSet } from '../rawsets/RawSet';
+import { ExecuteState } from './OperatorExecuter';
+export class DrStripElement extends OperatorExecuterAttrRequire {
+    constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        source.operatorAround = undefined;
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+    }
+    executeAttrRequire(attr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            // 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.eval(`
+                ${this.render.bindScript}
+                ${(_a = this.elementSource.attrs.drBeforeOption) !== null && _a !== void 0 ? _a : ''}
+                const n = $element.cloneNode(true);
+                if(${attr}) {
+                  Array.from(n.childNodes).forEach(it => this.__render.fag.append(it));
+                } else {
+                  this.__render.fag.append(n);
+                }
+                ${(_b = this.elementSource.attrs.drAfterOption) !== null && _b !== void 0 ? _b : ''};
+                return true;
+                `, Object.assign(this.source.obj, {
+                __render: Object.freeze(Object.assign({ fag: newTemp, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, drStripOption: this.elementSource.attrs.drStripOption }, this.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);
+            (_c = this.elementSource.element.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(this.returnContainer.fag, this.elementSource.element);
+            this.returnContainer.raws.push(...rr);
+            return ExecuteState.EXECUTE;
+        });
+    }
+}
+//# sourceMappingURL=DrStripElement.js.map

package/operators/DrTargetAttr.d.ts

@@ -0,0 +1,8 @@
+import { RawSet } from '../rawsets/RawSet';
+import { AfterCallBack, ElementSource, ExecuteState, OperatorExecuter, ReturnContainer, Source } from './OperatorExecuter';
+import { Render } from '../rawsets/Render';
+export declare class DrTargetAttr extends OperatorExecuter<void> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack);
+    execute(): Promise<ExecuteState>;
+}
+//# sourceMappingURL=DrTargetAttr.d.ts.map

package/operators/DrTargetAttr.js

@@ -0,0 +1,45 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { RawSet } from '../rawsets/RawSet';
+import { ExecuteState, OperatorExecuter } from './OperatorExecuter';
+export class DrTargetAttr extends OperatorExecuter {
+    constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        source.operatorAround = undefined;
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+    }
+    execute() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            const attributeNames = this.elementSource.element.getAttributeNames();
+            const targetAttr = (_b = (_a = this.source.config) === null || _a === void 0 ? void 0 : _a.targetAttrs) === null || _b === void 0 ? void 0 : _b.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);
+                        (_c = this.elementSource.element.parentNode) === null || _c === void 0 ? void 0 : _c.replaceChild(documentFragment, this.elementSource.element);
+                        this.returnContainer.raws.push(...rr);
+                        this.afterCallBack.onAttrInitCallBacks.push({
+                            attrName,
+                            attrValue,
+                            obj: this.source.obj
+                        });
+                        (_d = targetAttr === null || targetAttr === void 0 ? void 0 : targetAttr.complete) === null || _d === void 0 ? void 0 : _d.call(targetAttr, this.elementSource.element, attrValue, this.source.obj, this.rawSet);
+                    }
+                }
+                return ExecuteState.EXECUTE;
+            }
+            return ExecuteState.NO_EXECUTE;
+        });
+    }
+}
+//# sourceMappingURL=DrTargetAttr.js.map

package/operators/DrTargetElement.d.ts

@@ -0,0 +1,13 @@
+import { RawSet } from '../rawsets/RawSet';
+import { AfterCallBack, ElementSource, ExecuteState, OperatorExecuter, ReturnContainer, Source } from './OperatorExecuter';
+import { Render } from '../rawsets/Render';
+declare global {
+    interface Window {
+        HTMLMetaElement: typeof HTMLMetaElement;
+    }
+}
+export declare class DrTargetElement extends OperatorExecuter<void> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack);
+    execute(): Promise<ExecuteState>;
+}
+//# sourceMappingURL=DrTargetElement.d.ts.map

package/operators/DrTargetElement.js

@@ -0,0 +1,91 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
+import { RawSet } from '../rawsets/RawSet';
+import { ExecuteState, OperatorExecuter } from './OperatorExecuter';
+// 여기서 사용자가 등록한 TargetElement가 들어간다.
+export class DrTargetElement extends OperatorExecuter {
+    constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        source.operatorAround = undefined;
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+    }
+    execute() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
+            const targetElement = (_b = (_a = this.source.config) === null || _a === void 0 ? void 0 : _a.targetElements) === null || _b === void 0 ? void 0 : _b.find(it => it.name.toLowerCase() === this.elementSource.element.tagName.toLowerCase());
+            if (targetElement) {
+                if (this.rawSet.point.start instanceof this.source.config.window.HTMLMetaElement && this.rawSet.point.end instanceof this.source.config.window.HTMLMetaElement) {
+                    this.rawSet.point.start.setAttribute('this-path', `this.__domrender_components.${this.rawSet.uuid}`);
+                    this.rawSet.point.end.setAttribute('this-path', `this.__domrender_components.${this.rawSet.uuid}`);
+                }
+                const documentFragment = yield targetElement.callBack(this.elementSource.element, this.source.obj, this.rawSet, this.elementSource.attrs, this.source.config);
+                if (documentFragment) {
+                    const detectAction = this.elementSource.element.getAttribute(RawSet.DR_DETECT_NAME);
+                    // const dictionaryKey = this.elementSource.element.getAttribute(RawSet.DR_DICTIONARY_OPTIONKEYNAME);
+                    // console.log('dictionaryKey', dictionaryKey);
+                    // const render = (documentFragment as any).render;
+                    this.rawSet.dataSet.fragment = documentFragment;
+                    // if (documentFragment) {
+                    //     const tempDiv = this.source.config.window.document.createElement('div');
+                    //     tempDiv.appendChild(documentFragment.cloneNode(true));
+                    //     console.log('DocumentFragment innerHTML:', tempDiv.innerHTML);
+                    // }
+                    // this.rawSet.dataSet??={};
+                    // this.rawSet.dataSet.data = render.component;
+                    if (detectAction && this.rawSet.dataSet.render) {
+                        // TODO: 없어져야될듯?
+                        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.eval(script, Object.assign(this.source.obj, {
+                                    __render: this.rawSet.dataSet.render
+                                }));
+                            }
+                        };
+                    }
+                    // fag.append(documentFragment)
+                    // console.log('----------1', ElementUtils.toInnerHTML(documentFragment, {document: this.source.config.window.document}));
+                    // await Promises.sleep(1000)
+                    let targetFragment = documentFragment;
+                    if (targetElement.noStrip) {
+                        // documentFragment.firstElementChild.classList.add(`${this.rawSet.uuid}___DrTargetElement`)
+                        const fragment = this.source.config.window.document.createDocumentFragment();
+                        Array.from(((_c = documentFragment.firstElementChild) === null || _c === void 0 ? void 0 : _c.childNodes) || []).forEach(child => {
+                            // fragment.appendChild(child.cloneNode(true));
+                            fragment.appendChild(child);
+                        });
+                        // fragment.append(documentFragment.firstElementChild);
+                        targetFragment = fragment;
+                    }
+                    // console.log('----------2', ElementUtils.toInnerHTML(targetFragment, {document: this.source.config.window.document}));
+                    const rr = RawSet.checkPointCreates(targetFragment, this.source.obj, this.source.config);
+                    if (targetElement.noStrip) {
+                        Array.from(targetFragment.childNodes || []).forEach(child => {
+                            documentFragment.firstElementChild.appendChild(child);
+                        });
+                    }
+                    (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(documentFragment, this.elementSource.element);
+                    this.returnContainer.raws.push(...rr);
+                    this.afterCallBack.onElementInitCallBacks.push({
+                        name: targetElement.name.toLowerCase(),
+                        obj: this.source.obj,
+                        targetElement,
+                        creatorMetaData: targetElement.__creatorMetaData
+                    });
+                    // console.log('sssssssssssssss', this.source.obj);
+                    (_e = targetElement === null || targetElement === void 0 ? void 0 : targetElement.complete) === null || _e === void 0 ? void 0 : _e.call(targetElement, this.elementSource.element, this.source.obj, this.rawSet);
+                }
+                return ExecuteState.EXECUTE;
+            }
+            return ExecuteState.NO_EXECUTE;
+        });
+    }
+}
+//# sourceMappingURL=DrTargetElement.js.map

package/operators/DrTargetElementIsElement.d.ts

@@ -0,0 +1,13 @@
+import { RawSet } from '../rawsets/RawSet';
+import { AfterCallBack, ElementSource, ExecuteState, OperatorExecuter, ReturnContainer, Source } from './OperatorExecuter';
+import { Render } from '../rawsets/Render';
+declare global {
+    interface Window {
+        HTMLMetaElement: typeof HTMLMetaElement;
+    }
+}
+export declare class DrTargetElementIsElement extends OperatorExecuter<string | null> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack);
+    execute(attr: string | null): Promise<ExecuteState>;
+}
+//# sourceMappingURL=DrTargetElementIsElement.d.ts.map

package/operators/DrTargetElementIsElement.js

@@ -0,0 +1,79 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { RawSet } from '../rawsets/RawSet';
+import { ExecuteState, OperatorExecuter } from './OperatorExecuter';
+import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
+// 여기서 사용자가 등록한 TargetElement가 들어간다.
+export class DrTargetElementIsElement extends OperatorExecuter {
+    constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        source.operatorAround = undefined;
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+    }
+    execute(attr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
+            if (!attr) {
+                return ExecuteState.NO_EXECUTE;
+            }
+            const targetElement = (_b = (_a = this.source.config) === null || _a === void 0 ? void 0 : _a.targetElements) === null || _b === void 0 ? void 0 : _b.find(it => it.name.toLowerCase() === attr.toLowerCase());
+            // console.log('--------------tar', targetElement)
+            if (targetElement) {
+                if (this.rawSet.point.start instanceof this.source.config.window.HTMLMetaElement && this.rawSet.point.end instanceof this.source.config.window.HTMLMetaElement) {
+                    this.rawSet.point.start.setAttribute('this-path', `this.__domrender_components.${this.rawSet.uuid}`);
+                    this.rawSet.point.end.setAttribute('this-path', `this.__domrender_components.${this.rawSet.uuid}`);
+                }
+                const documentFragment = yield targetElement.callBack(this.elementSource.element, this.source.obj, this.rawSet, this.elementSource.attrs, this.source.config);
+                if (documentFragment) {
+                    const detectAction = this.elementSource.element.getAttribute(RawSet.DR_DETECT_NAME);
+                    this.rawSet.dataSet.fragment = documentFragment;
+                    if (detectAction && this.rawSet.dataSet.render) {
+                        // TODO: 없어져야될듯?
+                        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.eval(script, Object.assign(this.source.obj, {
+                                    __render: this.rawSet.dataSet.render
+                                }));
+                            }
+                        };
+                    }
+                    // dr-replace-target-element-is 는 무조건 NoStrip로 처리
+                    const noStrip = targetElement.noStrip;
+                    let targetFragment = documentFragment;
+                    if (noStrip) {
+                        const fragment = this.source.config.window.document.createDocumentFragment();
+                        Array.from(((_c = documentFragment.firstElementChild) === null || _c === void 0 ? void 0 : _c.childNodes) || []).forEach(child => {
+                            fragment.appendChild(child);
+                        });
+                        targetFragment = fragment;
+                    }
+                    const rr = RawSet.checkPointCreates(targetFragment, this.source.obj, this.source.config);
+                    if (noStrip) {
+                        Array.from(targetFragment.childNodes || []).forEach(child => {
+                            documentFragment.firstElementChild.appendChild(child);
+                        });
+                    }
+                    (_d = this.elementSource.element.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(documentFragment, this.elementSource.element);
+                    this.returnContainer.raws.push(...rr);
+                    this.afterCallBack.onElementInitCallBacks.push({
+                        name: targetElement.name.toLowerCase(),
+                        obj: this.source.obj,
+                        targetElement,
+                        creatorMetaData: targetElement.__creatorMetaData
+                    });
+                    (_e = targetElement === null || targetElement === void 0 ? void 0 : targetElement.complete) === null || _e === void 0 ? void 0 : _e.call(targetElement, this.elementSource.element, this.source.obj, this.rawSet);
+                }
+                return ExecuteState.EXECUTE;
+            }
+            return ExecuteState.NO_EXECUTE;
+        });
+    }
+}
+//# sourceMappingURL=DrTargetElementIsElement.js.map

package/operators/DrThis.d.ts

@@ -0,0 +1,7 @@
+import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
+import { ExecuteState } from './OperatorExecuter';
+export declare class DrThis extends OperatorExecuterAttrRequire<string> {
+    executeAttrRequire(attr: any): Promise<ExecuteState>;
+    setThisPath(thisPath: string): void;
+}
+//# sourceMappingURL=DrThis.d.ts.map

package/operators/DrThis.js

@@ -0,0 +1,72 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
+import { RawSet } from '../rawsets/RawSet';
+import { ComponentSet } from '../components/ComponentSet';
+import { ExecuteState } from './OperatorExecuter';
+import { isOnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';
+import { isOnDrThisBind } from '../lifecycle/dr-this/OnDrThisBind';
+export class DrThis extends OperatorExecuterAttrRequire {
+    executeAttrRequire(attr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            // console.log('drThis!!!!!!!!!!!!!',this.elementSource.attrs.drThis);
+            if (attr && this.elementSource.attrs.drThis) {
+                let thisPath = this.elementSource.attrs.drThis;
+                if (attr instanceof ComponentSet) {
+                    // console.log('drThis!!!!!!!!!!->', attr)
+                    // if (this.rawSet.data) {
+                    //   const destroyOptions = this.elementSource.attrs.drDestroyOption?.split(',') ?? [];
+                    //   debugger;
+                    //   RawSet.destroy((this.rawSet.data as ComponentSet).obj, [], this.source.config, destroyOptions);
+                    // }
+                    if (((_b = (_a = attr.config) === null || _a === void 0 ? void 0 : _a.beforeComponentSet) === null || _b === void 0 ? void 0 : _b.obj) !== attr.obj) {
+                        if (isOnDrThisUnBind((_c = attr.config.beforeComponentSet) === null || _c === void 0 ? void 0 : _c.obj)) {
+                            (_f = (_e = (_d = attr.config.beforeComponentSet) === null || _d === void 0 ? void 0 : _d.obj) === null || _e === void 0 ? void 0 : _e.onDrThisUnBind) === null || _f === void 0 ? void 0 : _f.call(_e);
+                        }
+                    }
+                    // this.rawSet.dataSet ??= {};
+                    // this.rawSet.dataSet.data = attr;
+                    if (((_h = (_g = attr.config) === null || _g === void 0 ? void 0 : _g.beforeComponentSet) === null || _h === void 0 ? void 0 : _h.obj) !== attr.obj) {
+                        if (isOnDrThisBind(attr.obj)) {
+                            (_k = (_j = attr.obj) === null || _j === void 0 ? void 0 : _j.onDrThisBind) === null || _k === void 0 ? void 0 : _k.call(_j);
+                        }
+                    }
+                    // 중요: componentSet 의 objPath를 보고 판단하는 중요한부분
+                    thisPath = `${this.elementSource.attrs.drThis}${attr.config.objPath ? ('.' + attr.config.objPath) : ''}`;
+                    this.setThisPath(thisPath);
+                    const componentBody = yield RawSet.drThisCreate(this.rawSet, this.elementSource.element, thisPath, (_l = this.elementSource.attrs.drVarOption) !== null && _l !== void 0 ? _l : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config, attr);
+                    this.returnContainer.fag.append(componentBody);
+                    this.afterCallBack.onThisComponentSetCallBacks.push(attr);
+                }
+                else {
+                    this.setThisPath(thisPath);
+                    this.returnContainer.fag.append(yield RawSet.drThisCreate(this.rawSet, this.elementSource.element, this.elementSource.attrs.drThis, (_m = this.elementSource.attrs.drVarOption) !== null && _m !== void 0 ? _m : '', this.elementSource.attrs.drStripOption, this.source.obj, this.source.config));
+                }
+                // console.log('!!!!!!!!!zzz', Array.from(this.returnContainer.fag.childNodes), this.elementSource.element);
+                const rr = RawSet.checkPointCreates(this.returnContainer.fag, this.source.obj, this.source.config);
+                (_o = this.elementSource.element.parentNode) === null || _o === void 0 ? void 0 : _o.replaceChild(this.returnContainer.fag, this.elementSource.element);
+                this.returnContainer.raws.push(...rr);
+            }
+            else {
+                this.elementSource.element.remove();
+            }
+            return ExecuteState.EXECUTE;
+        });
+    }
+    setThisPath(thisPath) {
+        // if (this.rawSet.point.start instanceof HTMLMetaElement && this.rawSet.point.end instanceof HTMLMetaElement) {
+        if (this.rawSet.point.start instanceof this.source.config.window.HTMLMetaElement && this.rawSet.point.end instanceof this.source.config.window.HTMLMetaElement) {
+            this.rawSet.point.start.setAttribute('this-path', thisPath);
+            this.rawSet.point.end.setAttribute('this-path', thisPath);
+        }
+    }
+}
+//# sourceMappingURL=DrThis.js.map

package/operators/DrThisProperty.d.ts

@@ -0,0 +1,11 @@
+import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
+import { RawSet } from '../rawsets/RawSet';
+import { Render } from '../rawsets/Render';
+import { AfterCallBack, ElementSource, ExecuteState, ReturnContainer, Source } from './OperatorExecuter';
+import { Config } from '../configs/Config';
+export declare class DrThisProperty extends OperatorExecuterAttrRequire<string> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack);
+    executeAttrRequire(attr: string): Promise<ExecuteState>;
+    static append(obj: any, fullPath: string, key: string, rawSet: RawSet, config: Config): RawSet[];
+}
+//# sourceMappingURL=DrThisProperty.d.ts.map

package/operators/DrThisProperty.js

@@ -0,0 +1,93 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { OperatorExecuterAttrRequire } from './OperatorExecuterAttrRequire';
+import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
+import { RawSet } from '../rawsets/RawSet';
+import { ExecuteState } from './OperatorExecuter';
+export class DrThisProperty extends OperatorExecuterAttrRequire {
+    constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack) {
+        source.operatorAround = undefined;
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, false);
+    }
+    executeAttrRequire(attr) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
+            const itRandom = RawSet.drItOtherEncoding(this.elementSource.element, 'DrThisProperty');
+            const vars = RawSet.drVarEncoding(this.elementSource.element, (_a = this.elementSource.attrs.drVarOption) !== null && _a !== void 0 ? _a : '');
+            const newTemp = this.source.config.window.document.createElement('temp');
+            const dictioanry = ScriptUtils.evalReturn(attr, this.source.obj);
+            const dictionaryKey = (_b = this.elementSource.attrs.drKeyOption) !== null && _b !== void 0 ? _b : '';
+            // console.log('--->', attr, dictionaryKey)
+            // if (!(dictioanry instanceof Dictionary)) {
+            //     return ExecuteState.STOP;
+            // }
+            // await new Promise(resolve => setTimeout(resolve, 1000));
+            // console.log('!!!!!!!!!!!!!!', this.rawSet);
+            ScriptUtils.eval(`
+                    ${this.render.bindScript}
+                    ${(_c = this.elementSource.attrs.drBeforeOption) !== null && _c !== void 0 ? _c : ''}
+                    var i = 0; 
+                    const dictionary = ${attr};
+                    const dictionaryKey = '${dictionaryKey}';
+                    const dictionaryStr = \`${attr}\`.trim();
+                    // console.log('----@#!@#@!#', this.__render.oldChild);
+                    if (dictionary) {
+                        for(const it in dictionary) {
+                            var destIt = dictionaryStr + '["' + it + '"]';
+                            const n = this.__render.element.cloneNode(true);
+                            n.setAttribute('dr-this', destIt);
+                            n.setAttribute('${RawSet.DR_KEY_OPTIONNAME}', it);
+                            // n.setAttribute('dr-dictionary-key', it);
+                            this.__render.fag.append(n);
+                            i++;
+                        }
+                         this.__render.rawset.point.start.setAttribute('${RawSet.DR_HAS_KEYS_OPTIONNAME}',Object.keys(dictionary).join(','));
+                    }
+                    ${(_d = this.elementSource.attrs.drAfterOption) !== null && _d !== void 0 ? _d : ''}
+                    `, Object.assign(this.source.obj, {
+                __render: Object.freeze(Object.assign({ drStripOption: this.elementSource.attrs.drStripOption, drAttr: this.elementSource.attrs, drAttrsOriginName: RawSet.drAttrsOriginName, fag: newTemp }, 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);
+            (_e = this.elementSource.element.parentNode) === null || _e === void 0 ? void 0 : _e.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;
+        });
+    }
+    static append(obj, fullPath, key, rawSet, config) {
+        var _a, _b;
+        const genNode = config.window.document.importNode(rawSet.dataSet.fragment, true);
+        // console.log('---> append', rawSet, genNode);
+        const rawSets = [];
+        for (const cNode of Array.from(genNode.childNodes.values())) {
+            const element = cNode.cloneNode(true);
+            element.removeAttribute(RawSet.DR_THIS_PROPERTY_NAME);
+            element.setAttribute(RawSet.DR_THIS_NAME, `this.${fullPath}`);
+            element.setAttribute(RawSet.DR_KEY_OPTIONNAME, key);
+            // rawSet.point.end.after(element);
+            const fg = config.window.document.createDocumentFragment();
+            fg.append(element);
+            rawSets.push(...RawSet.checkPointCreates(fg, obj, config));
+            rawSet.point.end.before(fg);
+            const start = rawSet.point.start;
+            const keys = (_b = (_a = start.getAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME)) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+            keys.push(key);
+            start.setAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME, keys.join(','));
+            rawSets.forEach((it) => __awaiter(this, void 0, void 0, function* () { return yield it.render(obj, config); }));
+        }
+        return rawSets;
+    }
+}
+//# sourceMappingURL=DrThisProperty.js.map

package/operators/OperatorExecuter.d.ts

@@ -0,0 +1,50 @@
+import { AttrInitCallBack } from '../rawsets/AttrInitCallBack';
+import { ElementInitCallBack } from '../rawsets/ElementInitCallBack';
+import { ComponentSet } from '../components/ComponentSet';
+import { RawSet } from '../rawsets/RawSet';
+import { Render } from '../rawsets/Render';
+import { Attrs } from '../rawsets/Attrs';
+import { Config } from '../configs/Config';
+export interface OperatorAround {
+    beforeAttr?: (value: string | null | undefined, opratorExecutor: OperatorExecuter) => string | null | undefined;
+    before?: (data: any, opratorExecutor: OperatorExecuter) => any;
+    after?: (data: any, opratorExecutor: OperatorExecuter) => void;
+}
+export declare enum ExecuteState {
+    EXECUTE = 0,
+    NO_EXECUTE = 1,
+    STOP = 2
+}
+export type AfterCallBack = {
+    onAttrInitCallBacks: AttrInitCallBack[];
+    onElementInitCallBacks: ElementInitCallBack[];
+    onThisComponentSetCallBacks: ComponentSet[];
+};
+export type ReturnContainer = {
+    raws: RawSet[];
+    fag: DocumentFragment;
+};
+export type ElementSource = {
+    element: Element;
+    attrs: Attrs;
+    attr?: string | null;
+    attrName?: string | undefined;
+};
+export type Source = {
+    config: Config;
+    operatorAround?: OperatorAround;
+    obj: any;
+};
+export declare abstract class OperatorExecuter<T = any> {
+    rawSet: RawSet;
+    render: Render;
+    returnContainer: ReturnContainer;
+    elementSource: ElementSource;
+    source: Source;
+    afterCallBack: AfterCallBack;
+    startingExecute: boolean;
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack, startingExecute?: boolean);
+    start(): Promise<ExecuteState>;
+    abstract execute(value: T): Promise<ExecuteState>;
+}
+//# sourceMappingURL=OperatorExecuter.d.ts.map

package/operators/OperatorExecuter.js

@@ -0,0 +1,50 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
+export var ExecuteState;
+(function (ExecuteState) {
+    ExecuteState[ExecuteState["EXECUTE"] = 0] = "EXECUTE";
+    ExecuteState[ExecuteState["NO_EXECUTE"] = 1] = "NO_EXECUTE";
+    ExecuteState[ExecuteState["STOP"] = 2] = "STOP";
+})(ExecuteState || (ExecuteState = {}));
+export class OperatorExecuter {
+    constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack, startingExecute = true) {
+        this.rawSet = rawSet;
+        this.render = render;
+        this.returnContainer = returnContainer;
+        this.elementSource = elementSource;
+        this.source = source;
+        this.afterCallBack = afterCallBack;
+        this.startingExecute = startingExecute;
+    }
+    ;
+    start() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f;
+            let attrValue = this.elementSource.attr;
+            // console.log('OperatorExecuter ', attrValue, this);
+            if ((_a = this.source.operatorAround) === null || _a === void 0 ? void 0 : _a.beforeAttr) {
+                attrValue = (_b = this.source.operatorAround.beforeAttr(attrValue, this)) !== null && _b !== void 0 ? _b : '';
+            }
+            let r = attrValue;
+            if (r && this.startingExecute) {
+                r = ScriptUtils.eval(` ${this.render.bindScript}; return ${attrValue}`, Object.assign(this.source.obj, { __render: this.render }));
+            }
+            if ((_c = this.source.operatorAround) === null || _c === void 0 ? void 0 : _c.before) {
+                r = (_d = this.source.operatorAround) === null || _d === void 0 ? void 0 : _d.before(r, this);
+            }
+            const state = yield this.execute(r);
+            (_f = (_e = this.source.operatorAround) === null || _e === void 0 ? void 0 : _e.after) === null || _f === void 0 ? void 0 : _f.call(_e, r, this);
+            return state;
+        });
+    }
+    ;
+}
+//# sourceMappingURL=OperatorExecuter.js.map

package/operators/OperatorExecuterAttrRequire.d.ts

@@ -0,0 +1,9 @@
+import { RawSet } from '../rawsets/RawSet';
+import { Render } from '../rawsets/Render';
+import { AfterCallBack, ElementSource, ExecuteState, OperatorExecuter, ReturnContainer, Source } from './OperatorExecuter';
+export declare abstract class OperatorExecuterAttrRequire<T> extends OperatorExecuter<T> {
+    constructor(rawSet: RawSet, render: Render, returnContainer: ReturnContainer, elementSource: ElementSource, source: Source, afterCallBack: AfterCallBack, startingExecute?: boolean);
+    execute(data: T): Promise<ExecuteState>;
+    protected abstract executeAttrRequire(attr: T): Promise<ExecuteState>;
+}
+//# sourceMappingURL=OperatorExecuterAttrRequire.d.ts.map

package/operators/OperatorExecuterAttrRequire.js

@@ -0,0 +1,25 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { ExecuteState, OperatorExecuter } from './OperatorExecuter';
+export class OperatorExecuterAttrRequire extends OperatorExecuter {
+    constructor(rawSet, render, returnContainer, elementSource, source, afterCallBack, startingExecute = true) {
+        super(rawSet, render, returnContainer, elementSource, source, afterCallBack, startingExecute);
+    }
+    ;
+    execute(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.elementSource.attr) {
+                return ExecuteState.NO_EXECUTE;
+            }
+            return yield this.executeAttrRequire(data);
+        });
+    }
+}
+//# sourceMappingURL=OperatorExecuterAttrRequire.js.map