@dooboostore/dom-render 1.0.110 → 1.0.111

package/src/dist/rawsets/RawSet.js

@@ -0,0 +1,1469 @@
+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 { RandomUtils } from '@dooboostore/core/random/RandomUtils';
+import { StringUtils } from '@dooboostore/core/string/StringUtils';
+import { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';
+import { EventManager } from '../events/EventManager';
+import { Range } from '../iterators/Range';
+import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';
+import { DrPre } from '../operators/DrPre';
+import { Dr } from '../operators/Dr';
+import { DrIf } from '../operators/DrIf';
+import { ExecuteState } from '../operators/OperatorExecuter';
+import { DrThis } from '../operators/DrThis';
+import { DrForm } from '../operators/DrForm';
+import { DrInnerText } from '../operators/DrInnerText';
+import { DrInnerHTML } from '../operators/DrInnerHTML';
+import { DrFor } from '../operators/DrFor';
+import { DrForOf } from '../operators/DrForOf';
+import { DrAppender } from '../operators/DrAppender';
+import { DrRepeat } from '../operators/DrRepeat';
+import { DrTargetElement } from '../operators/DrTargetElement';
+import { DrTargetAttr } from '../operators/DrTargetAttr';
+import { DrStripElement } from '../operators/DrStripElement';
+import { DestroyOptionType } from './DestroyOptionType';
+import { RawSetType } from './RawSetType';
+import { DrThisProperty } from '../operators/DrThisProperty';
+import { RawSetOperatorType } from './RawSetOperatorType';
+import { CssParser, isStyleRule, isAtRule } from '@dooboostore/core/parser/css/CssParser';
+import { isOnCreateRenderData } from '../lifecycle/OnCreateRenderData';
+import { isOnCreateRender } from '../lifecycle/OnCreateRender';
+import { isOnChangeAttrRender } from '../lifecycle/OnChangeAttrRender';
+import { isOnInitRender } from '../lifecycle/OnInitRender';
+import { isOnCreatedThisChild } from '../lifecycle/OnCreatedThisChild';
+import { isOnDestroyRender } from '../lifecycle/OnDestroyRender';
+import { DrTargetElementIsElement } from '../operators/DrTargetElementIsElement';
+import { ObjectUtils } from '@dooboostore/core';
+export class RawSet {
+    constructor(uuid, type, point, dataSet, detect) {
+        this.uuid = uuid;
+        this.type = type;
+        this.point = point;
+        this.dataSet = dataSet;
+        this.detect = detect;
+        this.findNearThis = (obj, rawSet = this) => {
+            const path = this.findNearThisPath(rawSet);
+            if (path) {
+                const optionalPath = ObjectUtils.Path.toOptionalChainPath(path);
+                // console.log('ppppp-', path, optionalPath)
+                return ScriptUtils.evalReturn(optionalPath, obj);
+            }
+        };
+        this.findParentThis = (obj, rawSet = this) => {
+            const path = this.findParentThisPath(rawSet);
+            if (path) {
+                const optionalPath = ObjectUtils.Path.toOptionalChainPath(path);
+                return ScriptUtils.evalReturn(optionalPath, obj);
+            }
+        };
+        this.findNearThisPath = (rawSet = this) => {
+            const paths = this.findThisPaths(rawSet);
+            return paths[paths.length - 1];
+        };
+        this.findParentThisPath = (rawSet = this) => {
+            const paths = this.findThisPaths(rawSet);
+            return paths[paths.length - 2];
+        };
+        this.findThisPaths = (rawSet = this) => {
+            const paths = [];
+            const findPath = (rawSet) => {
+                if (rawSet && rawSet.point) {
+                    // jsDom에서 instranceof HTMLMetaElement가 안먹히는것같아? 간혈적으로?
+                    if ('getAttribute' in rawSet.point.start && rawSet.point.start.getAttribute('this-path')) {
+                        paths.push(rawSet.point.start.getAttribute('this-path'));
+                    }
+                    if (rawSet.point.parentRawSet)
+                        findPath(rawSet.point.parentRawSet);
+                }
+            };
+            findPath(rawSet);
+            paths.push('this');
+            return paths.reverse();
+        };
+        // point.start.rawSet = this;
+        // console.log('rawset constructor->', (this.point.node as Element).getAttributeNames());
+    }
+    get isConnected() {
+        // console.log('isConnect???', this, this.point.start.isConnected, this.point.end.isConnected);
+        return this.point.start.isConnected && this.point.end.isConnected;
+    }
+    // 중요
+    getUsingTriggerVariables(config) {
+        const usingTriggerVariables = new Set();
+        // console.log('------data', this.dataSet)
+        this.dataSet.fragment.childNodes.forEach((cNode, key) => {
+            var _a, _b, _c;
+            // console.log('-----aaaa-data', cNode, key)
+            let script = '';
+            if (cNode.nodeType === Node.TEXT_NODE) {
+                script = `\`${(_a = cNode.textContent) !== null && _a !== void 0 ? _a : ''}\``;
+                const expressionGroups = RawSet.expressionGroups(script);
+                // console.log('???????', script, expressionGroups)
+                if (expressionGroups[0].length > 1) {
+                    script = expressionGroups[0][1];
+                }
+                // console.log('--', expressionGroups, script)
+            }
+            else if (cNode.nodeType === Node.ELEMENT_NODE) {
+                const element = cNode;
+                const targetAttrNames = ((_c = (_b = config === null || config === void 0 ? void 0 : config.targetAttrs) === null || _b === void 0 ? void 0 : _b.map(it => it.name)) !== null && _c !== void 0 ? _c : [])
+                    .concat(RawSet.DR_ATTRIBUTES, RawSet.DR_DETECT_FILTER_OPTIONNAME, RawSet.DR_DETECT_IF_OPTIONNAME, RawSet.DR_DETECT_ATTR_OPTIONNAME); // .concat(EventManager.normalAttrMapAttrName);
+                const targetScripts = targetAttrNames.map(it => element.getAttribute(it)).filter(it => it).map(it => `(${it})`);
+                const targetAttrMap = element.getAttribute(EventManager.normalAttrMapAttrName);
+                // console.log('targetAttrMap-->', targetAttrMap)
+                if (targetAttrMap) {
+                    new Map(JSON.parse(targetAttrMap)).forEach((v, k) => {
+                        targetScripts.push(`(${v})`);
+                    });
+                }
+                script = targetScripts.join(';');
+                // script = targetScripts.map(it=>`try{${it}}catch(e){}`).join(';');
+                // attribute쪽 체크하는거 추가
+                // console.log('----!!!!!-->', targetAttrNames)
+                // const otherAttrs = element.getAttributeNames()
+                //     .filter(it => !targetAttrNames.includes(it.toLowerCase()) && RawSet.isExporesion(element.getAttribute(it)))
+                //     .map(it => {
+                //         return `\`${element.getAttribute(it) ?? ''}\``;
+                //     }).join(';');
+                // script += ';' + otherAttrs
+            }
+            if (script) {
+                script = script.replace(/#[^#]*#/g, '({})');
+                // script = script.replace('}$','}');
+                // script = script.replace('@this@','this');
+                // console.log('----------->', script)
+                EventManager.VARNAMES.forEach(it => {
+                    // script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), `this?.___${it}`);
+                    // script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), `this.___${it}`);
+                    script = script.replace(RegExp(it.replace('$', '\\$'), 'g'), `this.___${it}`);
+                    // console.log('scripts-->', script)
+                });
+                // console.log('--------1--', script);
+                // script = script.replaceAll('#{','${').replaceAll('}#', '}')
+                // console.log('--------2--', script);
+                Array.from(ScriptUtils.getVariablePaths(script)).filter(it => !it.startsWith(`___${EventManager.SCRIPTS_VARNAME}`)).forEach(it => usingTriggerVariables.add(it));
+            }
+        });
+        // console.log('usingTriggerVariable----------->', usingTriggerVariables)
+        return usingTriggerVariables;
+    }
+    // 중요 render 처리 부분
+    render(obj, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+            // console.log('render!!!!!!!!!!!!!!')
+            const genNode = config.window.document.importNode(this.dataSet.fragment, true);
+            const raws = [];
+            const onAttrInitCallBacks = [];
+            const onElementInitCallBacks = [];
+            const onThisComponentSetCallBacks = [];
+            const drAttrs = [];
+            // console.log('rawSet render!!', obj, config, this, Array.from(genNode.childNodes.values()));
+            for (const cNode of Array.from(genNode.childNodes.values())) {
+                // console.log('cNodecNodecNode', cNode);
+                let attribute = {};
+                if (cNode.nodeType === Node.ELEMENT_NODE) {
+                    attribute = ElementUtils.getAttributeToObject(cNode);
+                }
+                const __render = Object.freeze({
+                    rawSet: this,
+                    scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj),
+                    router: config === null || config === void 0 ? void 0 : config.router,
+                    range: Range.range,
+                    element: cNode,
+                    attribute: attribute,
+                    rootObject: obj,
+                    scriptUtils: ScriptUtils,
+                    nearThis: this.findNearThis(obj),
+                    parentThis: this.findParentThis(obj),
+                    bindScript: ` /** render **/
+                    const ${EventManager.SCRIPTS_VARNAME} = this.__render.scripts;
+                    const ${EventManager.RAWSET_VARNAME} = this.__render.rawSet;
+                    const ${EventManager.ELEMENT_VARNAME} = this.__render.element;
+                    const ${EventManager.ATTRIBUTE_VARNAME} = this.__render.attribute;
+                    const ${EventManager.RANGE_VARNAME} = this.__render.range;
+                    const ${EventManager.ROUTER_VARNAME} = this.__render.router;
+                    const ${EventManager.NEAR_THIS_VARNAME} = this.__render.nearThis;
+                    const ${EventManager.PARENT_THIS_VARNAME} = this.__render.parentThis;
+                    const ${EventManager.SCRIPT_UTILS_VARNAME} = this.__render.scriptUtils;
+                    const ${EventManager.ROOT_OBJECT_VARNAME} = this.__render.rootObject;
+            `
+                });
+                // const normalAttribute = attribute[EventManager.normalAttrMapAttrName];
+                // if (normalAttribute) {
+                //   new Map<string, string>(JSON.parse(normalAttribute)).forEach((v, k) => {
+                //     const cval = ScriptUtils.evalReturn({ bodyScript: __render.bindScript, returnScript: v }, Object.assign(obj, { __render: __render }));
+                //     console.log('-----------',v,k, cval);
+                //     attribute[v] = cval;
+                //   });
+                // }
+                const fag = config.window.document.createDocumentFragment();
+                if (cNode.nodeType === Node.TEXT_NODE && cNode.textContent) {
+                    // console.log('text-->', this, obj, config, cNode.textContent);
+                    // console.log('text-->', Array.from(this.fragment.childNodes))
+                    const textContent = cNode.textContent;
+                    const runText = RawSet.expressionGroups(textContent)[0][1];
+                    // console.log('--->', RawSet.exporesionGrouops(textContent), textContent,runText, runText[0][1])
+                    let newNode;
+                    if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
+                        const r = ScriptUtils.eval(`${__render.bindScript} return ${runText}`, Object.assign(obj, { __render }));
+                        const template = config.window.document.createElement('template');
+                        template.innerHTML = r;
+                        newNode = template.content;
+                    }
+                    else {
+                        const r = ScriptUtils.eval(`${__render.bindScript}  return ${runText}`, Object.assign(obj, { __render }));
+                        newNode = config.window.document.createTextNode(r);
+                    }
+                    (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, cNode);
+                    // console.log('-------', this.point.start.parentNode.nodeName)
+                    // 중요 style value change 됐을때 다시 처리해야되기떄문에: 마지막에 completed 없는 attr 가지고 판단 하니깐
+                    if (this.type === RawSetType.STYLE_TEXT && this.point.parent) {
+                        this.point.parent.removeAttribute('completed');
+                    }
+                }
+                else if (cNode.nodeType === Node.ELEMENT_NODE) {
+                    const element = cNode;
+                    // console.log('target-->', element)
+                    const drAttr = {
+                        dr: this.getAttributeAndDelete(element, RawSet.DR_NAME),
+                        drIf: this.getAttributeAndDelete(element, RawSet.DR_IF_NAME),
+                        drFor: this.getAttributeAndDelete(element, RawSet.DR_FOR_NAME),
+                        drForOf: this.getAttributeAndDelete(element, RawSet.DR_FOR_OF_NAME),
+                        drThisProperty: this.getAttributeAndDelete(element, RawSet.DR_THIS_PROPERTY_NAME),
+                        drAppender: this.getAttributeAndDelete(element, RawSet.DR_APPENDER_NAME),
+                        drRepeat: this.getAttributeAndDelete(element, RawSet.DR_REPEAT_NAME),
+                        drThis: this.getAttributeAndDelete(element, RawSet.DR_THIS_NAME),
+                        drForm: this.getAttributeAndDelete(element, RawSet.DR_FORM_NAME),
+                        drPre: this.getAttributeAndDelete(element, RawSet.DR_PRE_NAME),
+                        drInnerHTML: this.getAttributeAndDelete(element, RawSet.DR_INNERHTML_NAME),
+                        drInnerText: this.getAttributeAndDelete(element, RawSet.DR_INNERTEXT_NAME),
+                        drStripElement: this.getAttributeAndDelete(element, RawSet.DR_STRIP_NAME),
+                        drReplaceTargetElementIs: this.getAttributeAndDelete(element, RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME),
+                        drItOption: this.getAttributeAndDelete(element, RawSet.DR_IT_OPTIONNAME),
+                        drIfOption: this.getAttributeAndDelete(element, RawSet.DR_IF_OPTIONNAME),
+                        drVarOption: this.getAttributeAndDelete(element, RawSet.DR_VAR_OPTIONNAME),
+                        drNextOption: this.getAttributeAndDelete(element, RawSet.DR_NEXT_OPTIONNAME),
+                        drAfterOption: this.getAttributeAndDelete(element, RawSet.DR_AFTER_OPTIONNAME),
+                        drBeforeOption: this.getAttributeAndDelete(element, RawSet.DR_BEFORE_OPTIONNAME),
+                        drCompleteOption: this.getAttributeAndDelete(element, RawSet.DR_COMPLETE_OPTIONNAME),
+                        drStripOption: this.getAttributeAndDelete(element, RawSet.DR_STRIP_OPTIONNAME),
+                        drDestroyOption: this.getAttributeAndDelete(element, RawSet.DR_DESTROY_OPTIONNAME),
+                        drKeyOption: this.getAttributeAndDelete(element, RawSet.DR_KEY_OPTIONNAME),
+                        drDetectIfOption: this.getAttribute(element, RawSet.DR_DETECT_IF_OPTIONNAME),
+                        drHasKeysOption: this.getAttribute(element, RawSet.DR_HAS_KEYS_OPTIONNAME),
+                    };
+                    drAttrs.push(drAttr);
+                    // 아래 순서 중요
+                    const operators = [
+                        new DrPre(this, __render, { raws, fag }, { element, attrName: RawSet.DR_PRE_NAME, attr: drAttr.drPre, attrs: drAttr }, { config, obj, operatorAround: (_b = config.operatorAround) === null || _b === void 0 ? void 0 : _b.drPre }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new Dr(this, __render, { raws, fag }, { element, attrName: RawSet.DR_NAME, attr: drAttr.dr, attrs: drAttr }, { config, obj, operatorAround: (_c = config.operatorAround) === null || _c === void 0 ? void 0 : _c.dr }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        // new Dr(this, __render, {raws, fag}, {element, attrName: EventManager.onRenderedInitAttrName, attr: drAttr.dr, attrs: drAttr}, {config, obj, operatorAround: config.operatorAround?.dr}, {onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks}),
+                        new DrIf(this, __render, { raws, fag }, { element, attrName: RawSet.DR_IF_NAME, attr: drAttr.drIf, attrs: drAttr }, { config, obj, operatorAround: (_d = config.operatorAround) === null || _d === void 0 ? void 0 : _d.drIf }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrStripElement(this, __render, { raws, fag }, { element, attrName: RawSet.DR_STRIP_NAME, attr: drAttr.drStripElement, attrs: drAttr }, { config, obj, operatorAround: (_e = config.operatorAround) === null || _e === void 0 ? void 0 : _e.drThis }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrThis(this, __render, { raws, fag }, { element, attrName: RawSet.DR_THIS_NAME, attr: drAttr.drThis, attrs: drAttr }, { config, obj, operatorAround: (_f = config.operatorAround) === null || _f === void 0 ? void 0 : _f.drThis }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrForm(this, __render, { raws, fag }, { element, attrName: RawSet.DR_FOR_NAME, attr: drAttr.drForm, attrs: drAttr }, { config, obj, operatorAround: (_g = config.operatorAround) === null || _g === void 0 ? void 0 : _g.drForm }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrInnerText(this, __render, { raws, fag }, { element, attrName: RawSet.DR_INNERTEXT_NAME, attr: drAttr.drInnerText, attrs: drAttr }, { config, obj, operatorAround: (_h = config.operatorAround) === null || _h === void 0 ? void 0 : _h.drInnerText }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrInnerHTML(this, __render, { raws, fag }, { element, attrName: RawSet.DR_INNERHTML_NAME, attr: drAttr.drInnerHTML, attrs: drAttr }, { config, obj, operatorAround: (_j = config.operatorAround) === null || _j === void 0 ? void 0 : _j.drInnerHTML }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrFor(this, __render, { raws, fag }, { element, attrName: RawSet.DR_FOR_NAME, attr: drAttr.drFor, attrs: drAttr }, { config, obj, operatorAround: (_k = config.operatorAround) === null || _k === void 0 ? void 0 : _k.drFor }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrForOf(this, __render, { raws, fag }, { element, attrName: RawSet.DR_FOR_OF_NAME, attr: drAttr.drForOf, attrs: drAttr }, { config, obj, operatorAround: (_l = config.operatorAround) === null || _l === void 0 ? void 0 : _l.drForOf }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrThisProperty(this, __render, { raws, fag }, { element, attrName: RawSet.DR_THIS_PROPERTY_NAME, attr: drAttr.drThisProperty, attrs: drAttr }, { config, obj, operatorAround: (_m = config.operatorAround) === null || _m === void 0 ? void 0 : _m.drThisProperty }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrAppender(this, __render, { raws, fag }, { element, attrName: RawSet.DR_APPENDER_NAME, attr: drAttr.drAppender, attrs: drAttr }, { config, obj, operatorAround: (_o = config.operatorAround) === null || _o === void 0 ? void 0 : _o.drAppender }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrRepeat(this, __render, { raws, fag }, { element, attrName: RawSet.DR_REPEAT_NAME, attr: drAttr.drRepeat, attrs: drAttr }, { config, obj, operatorAround: (_p = config.operatorAround) === null || _p === void 0 ? void 0 : _p.drRepeat }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrTargetElementIsElement(this, __render, { raws, fag }, { element, attrName: RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME, attr: drAttr.drReplaceTargetElementIs, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrTargetElement(this, __render, { raws, fag }, { element, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                        new DrTargetAttr(this, __render, { raws, fag }, { element, attrs: drAttr }, { config, obj }, { onAttrInitCallBacks, onElementInitCallBacks, onThisComponentSetCallBacks }),
+                    ];
+                    for (const operator of operators) {
+                        const state = yield operator.start();
+                        if (state === ExecuteState.EXECUTE) {
+                            break;
+                        }
+                        else if (state === ExecuteState.STOP) {
+                            return raws;
+                        }
+                    }
+                }
+            }
+            this.point.childrenRawSets = raws;
+            raws.forEach(it => {
+                it.point.parentRawSet = this;
+            });
+            // console.log('pppppppppppppp', this);
+            // replaceBody와 applyEvent 순서를 바꿨다 20250511
+            const childrenNodes = Array.from(genNode.childNodes);
+            this.applyEvent(obj, genNode, config);
+            this.replaceBody(genNode); // 중요 여기서 마지막에 연션된 값을 그려준다.
+            // console.log('rawSEt!!!!!!!', obj,childrenNodes,config)
+            this.onRenderedEvent(obj, childrenNodes, config);
+            drAttrs.forEach(it => {
+                if (it.drCompleteOption) {
+                    // genNode.childNodes
+                    const render = Object.freeze({
+                        rawSet: this,
+                        fag: genNode,
+                        scripts: EventManager.setBindProperty(config === null || config === void 0 ? void 0 : config.scripts, obj)
+                    });
+                    ScriptUtils.eval(`
+                const ${EventManager.FAG_VARNAME} = this.__render.fag;
+                const ${EventManager.SCRIPTS_VARNAME} = this.__render.scripts;
+                const ${EventManager.RAWSET_VARNAME} = this.__render.rawSet;
+                ${it.drCompleteOption}`, Object.assign(obj, { __render: render }));
+                }
+            });
+            // 중요 style isolation 나중에 :scope로 대체 가능할듯.
+            // 2023.9.4일 없앰  style 처음들어올때 처리하는걸로 바꿈
+            // RawSet.generateStyleSheetsLocal(config);
+            for (const it of onThisComponentSetCallBacks) {
+                if (isOnInitRender(it.obj)) {
+                    (_r = (_q = it.obj) === null || _q === void 0 ? void 0 : _q.onInitRender) === null || _r === void 0 ? void 0 : _r.call(_q, {}, this);
+                }
+            }
+            for (const it of onElementInitCallBacks) {
+                if (isOnInitRender((_s = this.dataSet.render) === null || _s === void 0 ? void 0 : _s.currentThis)) {
+                    // TODO: 나중에 파라미터 들어가야될듯. 지금은 리팩토링하느라 빠짐
+                    // console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!', it, this.dataSet);
+                    // dr-on-init:arguments
+                    // if (isOnInitRender()) {
+                    //   it.targetElement.__render.component.onInitRender?.(...param);
+                    // }
+                    // if (it.targetElement?.__render?.element && it.targetElement?.__render?.component) {
+                    //   const oninit = it.targetElement.__render.element.getAttribute(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME); // dr-on-component-init
+                    //   let param = [];
+                    //   if (oninit) {
+                    //     const script = `${it.targetElement.__render.renderScript} return ${oninit} `;
+                    //     param = ScriptUtils.eval(script, Object.assign(obj, {
+                    //       __render: it.targetElement.__render
+                    //     }));
+                    //     if (!Array.isArray(param)) {
+                    //       param = [param];
+                    //     }
+                    //   }
+                    //
+                    //   if (isOnInitRender(it.targetElement.__render.component)) {
+                    //     it.targetElement.__render.component.onInitRender?.(...param);
+                    //   }
+                    // }
+                    this.dataSet.render.currentThis.onInitRender({}, this);
+                }
+                (_t = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _t === void 0 ? void 0 : _t.call(config, it.name, obj, this, it.targetElement);
+            }
+            // TODO: 이부분도 위에 targetElement 처럼 해야될까?
+            for (const it of onAttrInitCallBacks) {
+                (_u = config === null || config === void 0 ? void 0 : config.onAttrInit) === null || _u === void 0 ? void 0 : _u.call(config, it.attrName, it.attrValue, obj, this);
+            }
+            // component destroy
+            if (obj.__domrender_components) {
+                Object.entries(obj.__domrender_components).forEach(([key, value]) => {
+                    var _a, _b, _c;
+                    const rawSet = value.__rawSet;
+                    const drAttrs = (_a = rawSet === null || rawSet === void 0 ? void 0 : rawSet.dataSet.render) === null || _a === void 0 ? void 0 : _a.attribute;
+                    if (rawSet && !rawSet.isConnected) {
+                        const destroyOptions = (_c = (_b = drAttrs === null || drAttrs === void 0 ? void 0 : drAttrs.drDestroyOption) === null || _b === void 0 ? void 0 : _b.split(',')) !== null && _c !== void 0 ? _c : [];
+                        RawSet.destroy(obj.__domrender_components[key], { rawSet: rawSet }, config, destroyOptions);
+                        delete obj.__domrender_components[key];
+                    }
+                });
+            }
+            // console.log('-------raws',raws)
+            return raws;
+        });
+    }
+    // 중요 스타일 적용 부분
+    static generateRuleSelector(start, end, sit) {
+        const selectorText = `:is(${start} ~ *:not(${start} ~ ${end} ~ *))`;
+        if (sit.startsWith('## ')) {
+            return sit.replace(/^## /, '');
+        }
+        else if (sit.startsWith('.')) {
+            return `${selectorText}${sit}, ${selectorText} ${sit}`;
+        }
+        else if (sit.includes('::')) {
+            const reg = sit.match(/(.*)::(.*)$/);
+            const first = reg === null || reg === void 0 ? void 0 : reg[1];
+            const extracted = reg === null || reg === void 0 ? void 0 : reg[2];
+            const divText = `${start} ~ ${first}:not(${start} ~ ${end} ~ *)`;
+            return `${selectorText} ${first}, ${divText}::${extracted}`;
+        }
+        else {
+            const divText = `${start} ~ ${sit}:not(${start} ~ ${end} ~ *)`;
+            return `${selectorText} ${sit}, ${divText}`;
+        }
+    }
+    static generateStyleTransform(styleBody, componentKey, styleTagWrap = true) {
+        // console.log('style!!!!!!!!!!!!!!!!1', styleBody, componentKey, styleTagWrap);
+        if (Array.isArray(styleBody)) {
+            styleBody = styleBody.join('\n');
+        }
+        styleBody = styleBody.replaceAll('#uuid#', componentKey);
+        const start = `#${componentKey}-start`;
+        const end = `#${componentKey}-end`;
+        // 이거뭐하는지 까먹었네 뭐였지??..
+        // 동적으로 처리하는것같은데.. css 에서는 동적으로 처리하는걸 지향 해야될것같은데 이기능 deprecated 할지 고민중
+        // const before = StringUtils.regexExecArrayReplace(styleBody, /(\$\{.*?\}\$)/g, (data) => {
+        //   // console.log('동적?', `var(--domrender-${data[0]})`)
+        //   return `var(--domrender-${data[0]})`;
+        // });
+        // const before = styleBody;
+        // console.log('before@@@@@@@@@@@', before)
+        const cssParser = new CssParser(styleBody);
+        const processRule = (rule) => {
+            if (isStyleRule(rule)) {
+                const isRoot = rule.selector.includes(':root');
+                if (!isRoot) {
+                    // Handle comma-separated selectors
+                    const selectors = rule.selector.split(',').map(s => s.trim());
+                    const transformedSelectors = selectors.map(selector => this.generateRuleSelector(start, end, selector));
+                    rule.selector = transformedSelectors.join(', ');
+                }
+            }
+            else if (isAtRule(rule)) {
+                if (rule.name === 'media') {
+                    const hasRoot = rule.children.some(childRule => isStyleRule(childRule) && childRule.selector.includes(':root'));
+                    if (!hasRoot) {
+                        rule.children.forEach(childRule => {
+                            if (isStyleRule(childRule)) {
+                                const selectors = childRule.selector.split(',').map(s => s.trim());
+                                const transformedSelectors = selectors.map(selector => this.generateRuleSelector(start, end, selector));
+                                childRule.selector = transformedSelectors.join(', ');
+                            }
+                        });
+                    }
+                }
+            }
+        };
+        cssParser.rules.forEach(processRule);
+        let after = cssParser.stringify();
+        // let after = StringUtils.regexExecArrayReplace(stringify as string, /(var\(--domrender-(\$\{.*?\}\$)?\))/g, (data) => {
+        //   return data[2];
+        // });
+        // console.log('after@@@@@@@@@@@', after)
+        // 여기서 선언 selector 자체에도 처리가능하도록 한다 20250518
+        after = after.replaceAll('/*$', '${');
+        after = after.replaceAll('$*/', '}$');
+        if (styleTagWrap) {
+            styleBody = `<style id='${componentKey}-style' domstyle>${after}</style>`;
+        }
+        // console.log('style!!!!!!!!!!!!!!2', styleBody);
+        return styleBody;
+    }
+    applyEvent(obj, fragment = this.dataSet.fragment, config) {
+        this.dataSet.config.eventManager.applyEvent(obj, this.dataSet.config.eventManager.findAttrElements(fragment, config), config);
+    }
+    onRenderedEvent(obj, nodes, config) {
+        this.dataSet.config.eventManager.onRenderedEvent(obj, nodes, config);
+    }
+    getAttribute(element, attr) {
+        const data = element.getAttribute(attr);
+        return data;
+    }
+    getAttributeAndDelete(element, attr) {
+        const data = element.getAttribute(attr);
+        // if (data)
+        //  element.setAttribute(`origin-${attr}`, data);
+        element.removeAttribute(attr);
+        return data;
+    }
+    getDrAppendAttributeAndDelete(element, obj) {
+        let data = element.getAttribute(RawSet.DR_APPENDER_NAME);
+        // if (data && !/\[[0-9]+\]/g.test(data)) {
+        if (data && !/\[.+\]/g.test(data)) {
+            const currentIndex = ScriptUtils.evalReturn(`${ObjectUtils.Path.toOptionalChainPath(data)}?.length -1`, obj);
+            // console.log('------?', currentIndex)
+            // if (currentIndex === undefined || isNaN(currentIndex)) {
+            //     return undefined;
+            // }
+            // const currentIndex = ScriptUtils.evalReturn(`${data}.length`, obj);
+            data = `${data}[${currentIndex}]`;
+            element.setAttribute(RawSet.DR_APPENDER_NAME, data);
+            // element.setAttribute(RawSet.DR_IF_NAME, data);
+            // element.setAttribute('dr-id', data);
+            // console.log('-->', element)
+        }
+        // if (data && !/\.childs\[[0-9]+\]/g.test(data)) {
+        //     const currentIndex = ScriptUtils.evalReturn(`${data}.currentIndex`, obj);
+        //     data = `${data}.childs[${currentIndex}]`;
+        //     element.setAttribute(RawSet.DR_APPENDER_NAME, data)
+        // }
+        element.removeAttribute(RawSet.DR_APPENDER_NAME);
+        return data;
+    }
+    replaceBody(genNode) {
+        var _a;
+        this.childAllRemove();
+        (_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling); // 중요 start checkpoint 다음인 end checkpoint 앞에 넣는다. 즉 중간 껴넣기 (나중에 meta tag로 변경을 해도될듯하긴한데..)
+    }
+    // 중요 important
+    static checkPointCreates(element, obj, config) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        // console.log('!@@@@@@@@@@@@@@@@', obj);
+        // const NodeFilter = (config.window as any).NodeFilter;
+        // const thisVariableName = (element as any).__domrender_this_variable_name;
+        // console.log('thisVariableName---', thisVariableName);
+        const nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
+            acceptNode(node) {
+                var _a, _b, _c, _d, _e, _f;
+                // console.log('nodeType', node.nodeType, (node as any).tagName, (node as any).data);
+                if (node.nodeType === Node.TEXT_NODE) {
+                    // console.log('text--->', node.textContent)
+                    // console.log('????????', node.parentElement, node.parentElement?.getAttribute('dr-pre'));
+                    // console.log('???????/',node.textContent, node.parentElement?.getAttribute('dr-pre'))
+                    // TODO: 나중에
+                    // const between = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', StringUtils.deleteEnter((node as Text).data ?? ''))
+                    const between = RawSet.expressionGroups(StringUtils.deleteEnter((_a = node.data) !== null && _a !== void 0 ? _a : ''));
+                    // console.log('bbbb', between)
+                    return (between === null || between === void 0 ? void 0 : between.length) > 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                    // return /\$\{.*?\}/g.test(StringUtils.deleteEnter((node as Text).data ?? '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                    // return /[$#]\{.*?\}/g.test(StringUtils.deleteEnter((node as Text).data ?? '')) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                }
+                else if (node.nodeType === Node.ELEMENT_NODE) {
+                    const element = node;
+                    if (element.hasAttribute(RawSet.DR_PRE_NAME)) {
+                        return NodeFilter.FILTER_REJECT;
+                    }
+                    if (element.hasAttribute(EventManager.attrAttrName)) {
+                        const script = (_b = element.getAttribute(EventManager.attrAttrName)) !== null && _b !== void 0 ? _b : '';
+                        // console.log('scriptscriptscriptscriptscriptscript,', script)
+                        const keyValuePairs = Array.from(script.matchAll(/(\w+):\s*([^,}]+)/g)).map(match => ({ key: match[1], value: match[2] }));
+                        (keyValuePairs !== null && keyValuePairs !== void 0 ? keyValuePairs : []).forEach(it => {
+                            element.setAttribute(it.key, '${' + it.value + '}$');
+                        });
+                        // console.log('-------k', keyValuePairs)
+                        // const drAttr = ScriptUtils.evalReturn(script, obj)
+                        // Object.entries(drAttr).forEach(([key, value]) => {
+                        //   const keyValuePairs = Array.from(a.matchAll(/(\w+):\s*([^,}]+)/g)).map(match => ({ key: match[1], value: match[2] }));
+                        //   console.log(keyValuePairs);
+                        //   // 출력: [{ key: 'value', value: 'this.child.obj.name' }, { key: 'wow', value: 'this.ww' }, { key: 'zz', value: '22' }, { key: 'v', value: '"ee"' }]
+                        //
+                        //   console.log('-----------------', key,value)
+                        //   element.setAttribute(key, '${'+(value)+'}$');
+                        // })
+                        // EventManager.attrNames.filter(it => it in drAttr).forEach(it => {
+                        //   if (drAttr[it] === null) {
+                        //     element.removeAttribute(it);
+                        //   } else {
+                        //     element.setAttribute(it, drAttr[it]);
+                        //   }
+                        // })
+                        // console.log('-------->', Array.from(element.attributes), element.getAttribute('dr-attr'), obj)
+                    }
+                    // element.setAttribute('dr-event-click', 'console.log(11)');
+                    const targetElementIs = element.getAttribute(RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME);
+                    const targetElementNames = (_d = (_c = config.targetElements) === null || _c === void 0 ? void 0 : _c.map(it => it.name.toLowerCase())) !== null && _d !== void 0 ? _d : [];
+                    const isElement = targetElementNames.includes(element.tagName.toLowerCase()) || targetElementNames.includes(targetElementIs === null || targetElementIs === void 0 ? void 0 : targetElementIs.toLowerCase());
+                    // if (isElement) {
+                    //   (element as HTMLElement).style.display = 'none';
+                    //   (element as HTMLElement).style.width = '100px';
+                    //   (element as HTMLElement).style.height = '100px';
+                    //   console.log((element as HTMLElement).outerHTML)
+                    // }
+                    // console.log('------targetElementIstargetElementIs>', targetElementNames, '---', isElement, targetElementIs);
+                    // const targetAttrNames = (config.targetAttrs?.map(it => it.name) ?? []).concat([...RawSet.DR_ATTRIBUTES,...EventManager.RAWSET_CHECK_ATTRIBUTE]);
+                    const targetAttrNames = ((_f = (_e = config.targetAttrs) === null || _e === void 0 ? void 0 : _e.map(it => it.name)) !== null && _f !== void 0 ? _f : []).concat([...RawSet.DR_ATTRIBUTES]);
+                    const normalAttrs = new Map();
+                    const linkVariables = new Map();
+                    const linkNames = EventManager.linkAttrs.map(it => it.name);
+                    const isAttr = element.getAttributeNames().filter(it => {
+                        const value = element.getAttribute(it);
+                        // link일때
+                        if (value && linkNames.includes(it)) {
+                            linkVariables.set(it, value);
+                        }
+                        else if (value && RawSet.isExpression(value)) { // 표현식있을떄
+                            let variablePath = RawSet.expressionGroups(value)[0][1];
+                            // normal Attribute 초반에 셋팅해주기.
+                            variablePath = variablePath.replace(/#[^#]*#/g, '({})');
+                            const cval = ScriptUtils.evalReturn(ObjectUtils.Path.toOptionalChainPath(variablePath), Object.assign(obj));
+                            // const cval = ScriptUtils.evalReturn(variablePath, Object.assign(obj));
+                            if (cval === null) {
+                                element.removeAttribute(it);
+                            }
+                            else {
+                                element.setAttribute(it, cval);
+                            }
+                            normalAttrs.set(it, variablePath);
+                            // console.log('normalAttribute', it, variablePath);
+                        }
+                        // console.log(element.getAttribute(it), attrExpresion);
+                        const isTargetAttr = targetAttrNames.includes(it.toLowerCase());
+                        return isTargetAttr;
+                    }).length > 0;
+                    if (linkVariables.size) {
+                        element.setAttribute(EventManager.linkTargetMapAttrName, JSON.stringify(Array.from(linkVariables.entries())));
+                    }
+                    // 기본 attribute를 처리하기위해
+                    if (normalAttrs.size) {
+                        element.setAttribute(EventManager.normalAttrMapAttrName, JSON.stringify(Array.from(normalAttrs.entries())));
+                    }
+                    // if (isElement)  {
+                    //   element.setAttribute('www', '@this@');
+                    // }
+                    const r = (isAttr || isElement) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                    return r;
+                }
+                return NodeFilter.FILTER_REJECT;
+            }
+        });
+        const pars = [];
+        let currentNode;
+        // eslint-disable-next-line no-cond-assign
+        while (currentNode = nodeIterator.nextNode()) {
+            if (currentNode.nodeType === Node.TEXT_NODE) {
+                const text = (_a = currentNode.textContent) !== null && _a !== void 0 ? _a : '';
+                const template = config.window.document.createElement('template');
+                // const a = StringUtils.regexExec(/\$\{.*?\}/g, text);
+                // const a = StringUtils.regexExec(/[$#]\{.*?\}/g, text);
+                // const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); // <--TODO: 나중에..
+                const groups = RawSet.expressionGroups(text);
+                const map = groups.map(it => { var _a; return ({ uuid: `${RandomUtils.alphabet(40)}_${(_a = obj === null || obj === void 0 ? void 0 : obj.constructor) === null || _a === void 0 ? void 0 : _a.name}`, content: it[0], regexArr: it }); });
+                let lasterIndex = 0;
+                for (let i = 0; i < map.length; i++) {
+                    const it = map[i];
+                    // console.log('itttttttttttt', it);
+                    const regexArr = it.regexArr;
+                    // 중요: text경우 asdasd ${this.name}$ 이렇게 있다면 앞부분 asdasd <-- 이부분은 살려야되니깐 아래처럼 짜름
+                    const preparedText = regexArr.input.substring(lasterIndex, regexArr.index);
+                    // const preparedText = regexArr[1];
+                    // const start = config.window.document.createElement('meta');
+                    // start.setAttribute('id', `${it.uuid}-start`);
+                    // const end = config.window.document.createElement('meta');
+                    // end.setAttribute('id', `${it.uuid}-end`);
+                    let type;
+                    if (currentNode.parentNode && currentNode.parentNode.nodeName.toUpperCase() === 'STYLE') {
+                        type = RawSetType.STYLE_TEXT;
+                    }
+                    else {
+                        type = RawSetType.TEXT;
+                    }
+                    const node = document.createTextNode(preparedText);
+                    const startEndPoint = RawSet.createStartEndPoint({ id: it.uuid, type }, config);
+                    // layout setting
+                    // console.log('createTextNode', node);
+                    template.content.append(node); // expression 앞 부분 넣어줘야 앞부분 일반 text 안짤린다.
+                    template.content.append(startEndPoint.start); // add start checkpoint
+                    template.content.append(startEndPoint.end); // add end checkpoint
+                    // content 안쪽 RawSet render 할때 start 와 end 사이에 fragment 연산해서 들어간다.
+                    const fragment = config.window.document.createDocumentFragment();
+                    fragment.append(config.window.document.createTextNode(it.content));
+                    // (startEndPoint.start as any).khh = RandomUtils.decimal(0,10)
+                    pars.push(new RawSet(it.uuid, type, {
+                        start: startEndPoint.start,
+                        node: currentNode,
+                        end: startEndPoint.end,
+                        parent: currentNode.parentNode,
+                        // thisVariableName: thisVariableName
+                    }, { fragment: fragment, config: config }));
+                    lasterIndex = regexArr.index + it.content.length;
+                }
+                template.content.append(config.window.document.createTextNode(text.substring(lasterIndex, text.length)));
+                (_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template.content, currentNode); // <-- 여기서 text를 fragment로 replace했기때문에 추적 변경이 가능하다.
+            }
+            else if (currentNode.nodeType === Node.ELEMENT_NODE) {
+                const uuid = `${RandomUtils.alphabet(40)}___${(_c = obj === null || obj === void 0 ? void 0 : obj.constructor) === null || _c === void 0 ? void 0 : _c.name}`;
+                const element = currentNode;
+                const fragment = config.window.document.createDocumentFragment();
+                const elementType = RawSetType.TARGET_ELEMENT;
+                const startEndPoint = RawSet.createStartEndPoint({ node: element, id: uuid, type: elementType }, config);
+                // 여기서 등록한 component 추가한다.
+                const targetElementIs = element.getAttribute(RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME);
+                const targetElementNames = (_e = (_d = config.targetElements) === null || _d === void 0 ? void 0 : _d.map(it => it.name.toLowerCase())) !== null && _e !== void 0 ? _e : [];
+                const isElement = targetElementNames.includes(element.tagName.toLowerCase()) || targetElementNames.includes(targetElementIs === null || targetElementIs === void 0 ? void 0 : targetElementIs.toLowerCase());
+                // if (isElement) {
+                //   (element as HTMLElement).style.display = 'none'
+                // }
+                // const isElement = targetElementNames.includes(element.tagName.toLowerCase());
+                const targetAttrNames = ((_g = (_f = config.targetAttrs) === null || _f === void 0 ? void 0 : _f.map(it => it.name)) !== null && _g !== void 0 ? _g : []).concat(RawSet.DR_ATTRIBUTES);
+                const isAttr = element.getAttributeNames().filter(it => targetAttrNames.includes(it.toLowerCase())).length > 0;
+                (_h = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _h === void 0 ? void 0 : _h.insertBefore(startEndPoint.start, currentNode);
+                (_j = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _j === void 0 ? void 0 : _j.insertBefore(startEndPoint.end, currentNode.nextSibling);
+                fragment.append(currentNode);
+                // const tempDiv = document.createElement('div');
+                // tempDiv.appendChild(fragment.cloneNode(true)); // fragment 복사본 추가
+                // console.log('------',tempDiv.innerHTML);
+                // console.log();
+                const rawSet = new RawSet(uuid, isElement ? elementType : (isAttr ? RawSetType.TARGET_ATTR : RawSetType.UNKOWN), {
+                    start: startEndPoint.start,
+                    node: currentNode,
+                    end: startEndPoint.end,
+                    parent: currentNode.parentNode,
+                    // thisVariableName: thisVariableName
+                }, { config: config, fragment: fragment });
+                pars.push(rawSet);
+            }
+        }
+        // console.log('parsparsparsparsparsparsparsparsparspars', pars);
+        return pars;
+    }
+    static createStartEndPoint(data, config) {
+        if (data.type === RawSetType.TARGET_ELEMENT && data.node) {
+            const element = data.node;
+            const start = config.window.document.createElement('meta');
+            const end = config.window.document.createElement('meta');
+            start.setAttribute('id', `${data.id}-start`);
+            start.setAttribute('dr-start-point', '');
+            const keys = element.getAttribute(RawSet.DR_KEY_OPTIONNAME);
+            const thisPropertyType = element.getAttribute(RawSet.DR_THIS_PROPERTY_NAME);
+            if (thisPropertyType) {
+                start.setAttribute('type', RawSetOperatorType.DR_THIS_PROPERTY);
+            }
+            if (keys) {
+                element.removeAttribute(RawSet.DR_KEY_OPTIONNAME);
+                start.setAttribute(RawSet.DR_KEY_OPTIONNAME, keys);
+            }
+            end.setAttribute('id', `${data.id}-end`);
+            end.setAttribute('dr-end-point', '');
+            return { start, end };
+        }
+        else if (data.type === RawSetType.STYLE_TEXT) {
+            return {
+                start: config.window.document.createTextNode(`/*start text ${data.id}*/`),
+                end: config.window.document.createTextNode(`/*end text ${data.id}*/`)
+            };
+        }
+        else { // text
+            return {
+                start: config.window.document.createComment(`start text ${data.id}`),
+                end: config.window.document.createComment(`end text ${data.id}`)
+            };
+        }
+    }
+    remove() {
+        this.childAllRemove();
+        this.point.end.remove();
+        this.point.start.remove();
+    }
+    childAllRemove() {
+        let next = this.point.start.nextSibling;
+        while (next) {
+            if (next === this.point.end) {
+                break;
+            }
+            next.remove();
+            next = this.point.start.nextSibling;
+        }
+    }
+    childs(stopNext) {
+        const childs = [];
+        let next = this.point.start.nextSibling;
+        while (next && next !== this.point.end) {
+            if (stopNext === null || stopNext === void 0 ? void 0 : stopNext(next)) {
+                return;
+            }
+            childs.push(next);
+            next = next.nextSibling;
+        }
+        return childs;
+    }
+    getHasRawSet(key) {
+        let rawSet;
+        this.childs((node) => {
+            var _a, _b;
+            const drKey = (_b = (_a = node).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, RawSet.DR_KEY_OPTIONNAME);
+            if (drKey && drKey === key) {
+                rawSet = node.rawSet;
+                return true;
+            }
+            return false;
+        });
+        return rawSet;
+    }
+    static drItOtherEncoding(element, postFix) {
+        const random = RandomUtils.uuid() + postFix;
+        const regex = /#it#/g;
+        element.querySelectorAll(`[${RawSet.DR_IT_OPTIONNAME}], [${RawSet.DR_FOR_OF_NAME}], [${RawSet.DR_REPEAT_NAME}], [${RawSet.DR_APPENDER_NAME}]`).forEach(it => {
+            it.innerHTML = it.innerHTML.replace(regex, random);
+        });
+        return random;
+    }
+    static drItOtherDecoding(element, random) {
+        element.querySelectorAll(`[${RawSet.DR_IT_OPTIONNAME}], [${RawSet.DR_FOR_OF_NAME}], [${RawSet.DR_REPEAT_NAME}], [${RawSet.DR_APPENDER_NAME}]`).forEach(it => {
+            it.innerHTML = it.innerHTML.replace(RegExp(random, 'g'), '#it#');
+        });
+    }
+    static drVarDecoding(element, vars) {
+        element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
+            vars.filter(vit => vit.value && vit.name).forEach(vit => {
+                it.innerHTML = it.innerHTML.replace(RegExp(vit.random, 'g'), vit.value);
+            });
+        });
+    }
+    static replaceInnerHTML(element, config) {
+        var _a;
+        const innerHTML = element.innerHTML;
+        const tobe = config.toBe = (_a = config.toBe) !== null && _a !== void 0 ? _a : RandomUtils.uuid();
+        if (config.asIs instanceof RegExp) {
+            element.innerHTML = innerHTML.replace(config.asIs, config.toBe);
+        }
+        else {
+            element.innerHTML = innerHTML.replaceAll(config.asIs, config.toBe);
+        }
+        return tobe;
+    }
+    static drThisEncoding(element, drThis, config) {
+        var _a;
+        const thisRandom = config.toBe = (_a = config === null || config === void 0 ? void 0 : config.toBe) !== null && _a !== void 0 ? _a : RandomUtils.uuid();
+        // const thisRegex = /(?<!(dr-|\.))this(?=.?)/g;
+        // const thisRegex = /[^(dr\-)]this(?=.?)/g;
+        // const thisRegex = /[^(dr\-)]this\./g;
+        // safari 때문에 전위 검색 regex가 안됨 아 짜증나서 이걸로함.
+        // element.querySelectorAll(`[${RawSet.DR_PRE_NAME}]`).forEach(it => {
+        //     let message = it.innerHTML;
+        // })
+        element.querySelectorAll(`[${RawSet.DR_PRE_NAME}]`).forEach(it => {
+            it.innerHTML = it.innerHTML.replace(config.asIs, thisRandom);
+        });
+        element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
+            // console.log('rrrrrrrrand?', drThis,config);
+            let message = it.innerHTML;
+            // StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(it => {
+            StringUtils.regexExec(config.asIs, message).reverse().forEach(it => {
+                var _a;
+                message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], `${(_a = it[1]) !== null && _a !== void 0 ? _a : ''}${drThis}`);
+            });
+            it.innerHTML = message;
+        });
+        // console.log('changggg', element.innerHTML);
+        let message = element.innerHTML;
+        StringUtils.regexExec(config.asIs, message).reverse().forEach(it => {
+            var _a;
+            message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], `${(_a = it[1]) !== null && _a !== void 0 ? _a : ''}${drThis}`);
+        });
+        element.innerHTML = message;
+        return thisRandom;
+    }
+    static drThisBindEncoding(element, variable, config) {
+        var _a;
+        element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(eIt => {
+            let message = eIt.innerHTML;
+            // StringUtils.regexExec(/([^(dr\-)])?this(?=.?)/g, message).reverse().forEach(it => {
+            StringUtils.regexExec(variable, message).reverse().forEach(it => {
+                var _a;
+                message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], `${(_a = it[1]) !== null && _a !== void 0 ? _a : ''}${eIt.getAttribute(RawSet.DR_THIS_NAME)}`);
+            });
+            eIt.innerHTML = message;
+        });
+        const targetElements = (_a = config.config.targetElements) !== null && _a !== void 0 ? _a : [];
+        const targetElementNames = targetElements.map(it => it.name.replaceAll('.', '\\.').replaceAll(':', '\\:')).join(',');
+        const thisRandom = RandomUtils.uuid();
+        element.querySelectorAll(targetElementNames).forEach(it => {
+            it.innerHTML = it.innerHTML.replace(variable, thisRandom);
+        });
+        element.querySelectorAll(`[${RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME}]`).forEach(it => {
+            it.innerHTML = it.innerHTML.replace(variable, thisRandom);
+        });
+        if (config.otherReplaceVariablePath) {
+            let message = element.innerHTML;
+            StringUtils.regexExec(variable, message).reverse().forEach(it => {
+                var _a;
+                message = message.substr(0, it.index) + message.substr(it.index).replace(it[0], `${(_a = it[1]) !== null && _a !== void 0 ? _a : ''}${config.otherReplaceVariablePath}`);
+            });
+            element.innerHTML = message;
+        }
+        return thisRandom;
+    }
+    static drThisBindDecoding(element, config) {
+        var _a;
+        const targetElements = (_a = config.config.targetElements) !== null && _a !== void 0 ? _a : [];
+        const targetElementNames = targetElements.map(it => it.name.replaceAll('.', '\\.').replaceAll(':', '\\:')).join(',');
+        element.querySelectorAll(targetElementNames).forEach(it => {
+            it.innerHTML = it.innerHTML.replace(RegExp(config.asIs, 'g'), config.toBe);
+        });
+        element.querySelectorAll(`[${RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME}]`).forEach(it => {
+            it.innerHTML = it.innerHTML.replace(RegExp(config.asIs, 'g'), config.toBe);
+        });
+    }
+    static drThisDecoding(element, config) {
+        element.querySelectorAll(`[${RawSet.DR_PRE_NAME}]`).forEach(it => {
+            it.innerHTML = it.innerHTML.replace(RegExp(config.asIs, 'g'), config.toBe);
+        });
+        element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
+            it.innerHTML = it.innerHTML.replace(RegExp(config.asIs, 'g'), config.toBe);
+        });
+    }
+    static drFormOtherMoveAttr(element, as, to, config) {
+        element.querySelectorAll(`[${RawSet.DR_FORM_NAME}]`).forEach(subElement => {
+            var _a;
+            const nodeIterator = config.window.document.createNodeIterator(subElement, NodeFilter.SHOW_ELEMENT, {
+                acceptNode(node) {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        const element = node;
+                        return element.hasAttribute(as) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+                    }
+                    else {
+                        return NodeFilter.FILTER_REJECT;
+                    }
+                }
+            });
+            let node;
+            // eslint-disable-next-line no-cond-assign
+            while (node = nodeIterator.nextNode()) {
+                const element = node;
+                element.setAttribute(to, (_a = element.getAttribute(as)) !== null && _a !== void 0 ? _a : '');
+                element.removeAttribute(as);
+            }
+        });
+    }
+    static drVarEncoding(element, drVarOption) {
+        var _a;
+        const vars = ((_a = drVarOption === null || drVarOption === void 0 ? void 0 : drVarOption.split(',')) !== null && _a !== void 0 ? _a : []).map(it => {
+            var _a, _b;
+            const s = it.trim().split('=');
+            const name = (_a = s[0]) === null || _a === void 0 ? void 0 : _a.trim();
+            const value = (_b = s[1]) === null || _b === void 0 ? void 0 : _b.trim();
+            return {
+                name,
+                value,
+                // regex: RegExp('(?<!(dr-|\\.))var\\.' + s[0] + '(?=.?)', 'g'),
+                regex: RegExp('\\$var\\.' + name + '(?=.?)', 'g'),
+                random: RandomUtils.uuid()
+            };
+        });
+        // console.log('asd', element.innerHTML);
+        // element.querySelectorAll(`[${RawSet.DR_THIS_NAME}]`).forEach(it => {
+        element.querySelectorAll(`[${RawSet.DR_VAR_OPTIONNAME}]`).forEach(it => {
+            vars.filter(vit => vit.value && vit.name).forEach(vit => {
+                it.innerHTML = it.innerHTML.replace(vit.regex, vit.random);
+            });
+        });
+        vars.filter(vit => vit.value && vit.name).forEach(vit => {
+            element.innerHTML = element.innerHTML.replace(vit.regex, vit.value);
+        });
+        return vars;
+    }
+    static drThisCreate(rawSet, element, drThis, drVarOption, drStripOption, obj, config, set) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f, _g;
+            var _h;
+            // console.log('ttttttttttttttttttttt',element.innerHTML, drThis, set, obj);
+            const fag = config.window.document.createDocumentFragment();
+            const targetElement = element.cloneNode(true);
+            let targetObj = obj;
+            if (set) {
+                targetObj = set.obj;
+                set.setTemplateStyle(yield RawSet.fetchTemplateStyle(set));
+                const style = RawSet.generateStyleTransform((_a = set.styles) !== null && _a !== void 0 ? _a : [], rawSet.uuid, true);
+                targetElement.innerHTML = style + ((_b = set.template) !== null && _b !== void 0 ? _b : '');
+            }
+            else {
+                targetObj = ScriptUtils.evalReturn(ObjectUtils.Path.toOptionalChainPath(drThis), obj);
+            }
+            const componentKey = rawSet.uuid;
+            const renderScript = ` /*drThisCreate*/
+        // console.log('-----', this.__render);
+        var ${EventManager.RENDER_VARNAME} = this.__render; 
+        var ${EventManager.RAWSET_VARNAME} = this.__render.rawSet; 
+        var ${EventManager.COMPONENT_VARNAME} = this.__render.component; 
+        var ${EventManager.ELEMENT_VARNAME} = this.__render.element; 
+        var ${EventManager.ROUTER_VARNAME} = this.__render.router; 
+        var ${EventManager.INNER_HTML_VARNAME} = this.__render.innerHTML; 
+        var ${EventManager.ATTRIBUTE_VARNAME} = this.__render.attribute; 
+        var ${EventManager.PARENT_THIS_PATH_VARNAME} = this.__render.parentThisPath; 
+        var ${EventManager.CURRENT_THIS_VARNAME} = this.__render.currentThis; 
+        var ${EventManager.CURRENT_THIS_PATH_VARNAME} = this.__render.currentThisPath; 
+        var ${EventManager.PARENT_THIS_VARNAME} = this.__render.parentThis; 
+        var ${EventManager.NEAR_THIS_PATH_VARNAME} = this.__render.nearThisPath; 
+        var ${EventManager.NEAR_THIS_VARNAME} = this.__render.nearThis; 
+        var ${EventManager.CREATOR_META_DATA_VARNAME} = this.__render.creatorMetaData;
+      `;
+            const parentThisPath = rawSet.findParentThisPath();
+            const parentThis = rawSet.findParentThis(obj);
+            const nearThisPath = rawSet.findNearThisPath();
+            const nearThis = rawSet.findNearThis(obj);
+            // console.log('ttttttttttttttttt',parentThisPath, parentThis, nearThisPath, nearThis);
+            // console.log('-element.innerHTMLelement.innerHTMLelement.innerHTML',element.innerHTML);
+            let render = {
+                renderScript: renderScript,
+                element: element,
+                getElement: () => config.window.document.querySelector(`[class*="${rawSet.uuid}"]`),
+                innerHTML: element.innerHTML,
+                // attribute: ObjectUtils.toDeleteKey(attribute, [...Object.values(RawSet.drAttrsOriginName), ...Object.values(EventManager.VARNAMES)]),
+                rawSet: rawSet,
+                router: config.router,
+                componentKey: componentKey,
+                currentThis: targetObj,
+                currentThisPath: drThis,
+                parentThisPath: parentThisPath,
+                parentThis: parentThis,
+                nearThisPath: nearThisPath,
+                nearThis: nearThis,
+                scripts: EventManager.setBindProperty((_c = config.scripts) !== null && _c !== void 0 ? _c : {}, obj)
+            };
+            // const attribute = DomUtils.getAttributeToObject(element);
+            render.attribute = RawSet.getAttributeObject(element, { script: renderScript, obj: obj, renderData: render });
+            render = Object.freeze(render);
+            // dr-on-create data onCreateRender
+            const onCreateDataScript = `return {rootParent: this, render: this.__render}`;
+            const onCreateDataParam = ScriptUtils.eval(onCreateDataScript, Object.assign(obj, { __render: render }));
+            if (isOnCreateRenderData(targetObj)) {
+                targetObj === null || targetObj === void 0 ? void 0 : targetObj.onCreateRenderData(onCreateDataParam);
+            }
+            // 부모에게도 자식 this 생성된거 알려주는 callback
+            if (((_d = onCreateDataParam === null || onCreateDataParam === void 0 ? void 0 : onCreateDataParam.render) === null || _d === void 0 ? void 0 : _d.parentThis) && isOnCreatedThisChild((_e = onCreateDataParam === null || onCreateDataParam === void 0 ? void 0 : onCreateDataParam.render) === null || _e === void 0 ? void 0 : _e.parentThis)) {
+                onCreateDataParam.render.parentThis.onCreatedThisChild(targetObj, onCreateDataParam);
+            }
+            // dr-on-create onCreateRender
+            const onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
+            let createParam = [];
+            if (onCreate) {
+                createParam = ScriptUtils.evalReturn({ bodyScript: renderScript, returnScript: ObjectUtils.Path.toOptionalChainPath(onCreate) }, obj);
+                if (!Array.isArray(createParam)) {
+                    createParam = [createParam];
+                }
+            }
+            if (isOnCreateRender(targetObj)) {
+                targetObj.onCreateRender(...createParam);
+            }
+            // console.log('매번타나?');
+            // 중요 dr-normal-attr-map
+            // const normalAttrMap = element.getAttribute(EventManager.normalAttrMapAttrName);
+            const targetAttrObject = RawSet.getAttributeObject(element, { script: renderScript, obj: obj, renderData: render });
+            if (targetAttrObject) {
+                (_f = (_h = rawSet.dataSet).render) !== null && _f !== void 0 ? _f : (_h.render = {});
+                rawSet.dataSet.render.attribute = targetAttrObject;
+                Object.entries(targetAttrObject).forEach(([key, cval], index) => {
+                    // console.log('ooooooooooooooooo', key, cval);
+                    // const script = `${renderScript} return ${value} `;
+                    // const cval = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
+                    // // element.setAttribute(key, cval);
+                    if (isOnChangeAttrRender(targetObj)) {
+                        targetObj.onChangeAttrRender(key, cval, { rawSet: rawSet });
+                    }
+                });
+            }
+            // dr-on-component-init
+            // const oninit = element.getAttribute(`${EventManager.attrPrefix}on-component-init`); // dr-on-component-init
+            const oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME); // dr-on-component-init
+            // console.log('--------drThisCreate!!!', oninit)
+            if (oninit) {
+                const script = `${renderScript}  ${oninit} `;
+                ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
+            }
+            targetElement.querySelectorAll(EventManager.attrNames.map(it => `[${it}]`).join(',')).forEach(it => {
+                it.setAttribute(EventManager.ownerVariablePathAttrName, 'this');
+            });
+            // console.log('targetElement',targetElement);
+            // attribute
+            // const componentName = element.getAttribute(RawSet.DR_COMPONENT_NAME_OPTIONNAME) ?? 'component';
+            const componentNameReplaceKey = RandomUtils.uuid();
+            // if (componentName) {
+            //   RawSet.replaceInnerHTML(element, {asIs: `#${componentName}#`, toBe: 'this'})
+            // }
+            // const innerHTMLName = element.getAttribute(RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME) ?? 'innerHTML';
+            // const innerHTMLNameReplaceKey = RandomUtils.uuid();
+            // if (innerHTMLName) {
+            //   RawSet.replaceInnerHTML(element, {asIs: `#${innerHTMLName}#`, toBe: innerHTMLNameReplaceKey})
+            // }
+            // 이걸 왜 뺐었지... 다시넣었음  그런데 조금 로직이.. 검증이..
+            const innerHTMLName = (_g = targetElement.getAttribute(RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME)) !== null && _g !== void 0 ? _g : 'innerHTML';
+            if (innerHTMLName) {
+                RawSet.replaceInnerHTML(targetElement, { asIs: `#${innerHTMLName}#`, toBe: element.innerHTML });
+            }
+            // console.log('aa-asIs', targetElement.innerHTML);
+            const optionThisName = targetElement.getAttribute(RawSet.DR_THIS_NAME_OPTIONNAME);
+            // console.log('11111111111111', optionThisName)
+            targetElement.getAttributeNames().forEach(it => targetElement.setAttribute(it, targetElement.getAttribute(it).replace(/#this#/g, drThis)));
+            const thisRandom = this.drThisEncoding(targetElement, drThis, { asIs: /@this@/g });
+            // console.log('@@@@@@@@@@@@@0', targetElement.innerHTML);
+            // let thisNameRandom: string | undefined = undefined;
+            if (optionThisName) {
+                // console.log('-----0', element.innerHTML, '\n', targetElement.innerHTML)
+                targetElement.innerHTML = targetElement.innerHTML.replaceAll(`@${optionThisName}@`, drThis);
+                // console.log('-----1', element.innerHTML, '\n', targetElement.innerHTML)
+                // thisNameRandom = this.drThisBindEncoding(targetElement, new RegExp(`@${optionThisName}@`, 'g'), {config: config, otherReplaceVariablePath: drThis});
+            }
+            const nearThisRandom = this.drThisBindEncoding(targetElement, /@nearThis@/g, { config: config, otherReplaceVariablePath: rawSet.findNearThisPath() });
+            const parentThisRandom = this.drThisBindEncoding(targetElement, /@parentThis@/g, { config: config, otherReplaceVariablePath: rawSet.findParentThisPath() });
+            // console.log('@@@@@@@@@@@@@1', targetElement.innerHTML, rawSet.findParentThisPath());
+            // console.log('@@@@@@@@@@@@@-----------', rawSet.point?.parentRawSet?.point?.start, rawSet.point?.parentRawSet?.point?.start instanceof HTMLMetaElement);
+            // if (rawSet.point?.parentRawSet?.point?.start instanceof HTMLMetaElement) {
+            // console.log('@@@@@@@@@@@@@-----------', rawSet.point?.parentRawSet?.point?.start.getAttribute('this-path'));
+            // }
+            // console.log('@@@@@@@@@@@@@2', targetElement.innerHTML);
+            // const nearThisRandom = this.drThisEncoding(targetElement, rawSet.findNearThisPath(), {asIs: /@nearThis@/g});
+            // const parentThisRandom = this.drThisEncoding(targetElement, rawSet.findParentThisPath(), {asIs: /@parentThis@/g});
+            // console.log('aa-toBe', targetElement.innerHTML);
+            // console.log('------', rawSet.findNearThisPath());
+            // console.log('------', rawSet.findParentThisPath());
+            const vars = this.drVarEncoding(targetElement, drVarOption);
+            this.drVarDecoding(targetElement, vars);
+            this.drThisDecoding(targetElement, { asIs: thisRandom, toBe: '@this@' });
+            // if (optionThisName && thisNameRandom)
+            //   this.drThisBindDecoding(targetElement, {config: config, asIs: thisNameRandom, toBe: `@${optionThisName}@`});
+            this.drThisBindDecoding(targetElement, { config: config, asIs: nearThisRandom, toBe: '@nearThis@' });
+            this.drThisBindDecoding(targetElement, { config: config, asIs: parentThisRandom, toBe: '@parentThis@' });
+            // if (componentName) {
+            //   RawSet.replaceInnerHTML(element, {asIs: componentNameReplaceKey, toBe: `#${componentName}#`})
+            // }
+            // if (innerHTMLName) {
+            //   RawSet.replaceInnerHTML(targetElement, {asIs: innerHTMLNameReplaceKey, toBe: `#${innerHTMLName}#`})
+            // }
+            // console.log('ddddddddddddd', targetElement.innerHTML);
+            if (drStripOption && (drStripOption === true || drStripOption === 'true')) {
+                // console.log('------childNodes', Array.from(n.childNodes))
+                Array.from(targetElement.childNodes).forEach(it => fag.append(it));
+            }
+            else {
+                targetElement.classList.add(`${rawSet.uuid}`);
+                fag.append(targetElement);
+            }
+            // (fag as any).__domrender_this_variable_name = drThis;
+            // console.log('set __domrender_this_variable_name', (fag as any).__domrender_this_variable_name)
+            return fag;
+        });
+    }
+    static fetchTemplateStyle(set) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            // const id = RandomUtils.getRandomString(20);
+            const stylePromises = [];
+            const templatePromise = (set.template && set.template.startsWith('lazy://') ? (yield fetch(set.template.substring(6))).text() : Promise.resolve(set.template));
+            if (Array.isArray(set.styles)) {
+                for (let i = 0; set.styles && i < ((_a = set.styles.length) !== null && _a !== void 0 ? _a : 0); i++) {
+                    const it = set.styles[i];
+                    stylePromises.push(it.startsWith('lazy://') ? (yield fetch(it.substring(6))).text() : Promise.resolve(it));
+                }
+            }
+            else if (set.styles) {
+                stylePromises.push(Promise.resolve(set.styles));
+            }
+            // const tempTemplate = config.window.document.createElement('template');
+            // tempTemplate.innerHTML = await templatePromise;
+            // const tempContainer = config.window.document.createElement('div');
+            return {
+                template: yield templatePromise,
+                styles: yield Promise.all(stylePromises)
+            };
+        });
+    }
+    static createComponentTargetAttribute(name, getThisObj, factory) {
+        const targetAttribute = {
+            name,
+            callBack(element, attrValue, obj, rawSet) {
+                const thisObj = getThisObj(element, attrValue, obj, rawSet);
+                const data = factory(element, attrValue, obj, rawSet);
+                // rawSet.point.thisVariableName = (data as any).__domrender_this_variable_name;
+                if (thisObj) {
+                    // const i = thisObj.__domrender_component_new = (thisObj.__domrender_component_new ?? new Proxy({}, new DomRenderFinalProxy())) as CreatorMetaData;
+                    // i.thisVariableName = rawSet.point.thisVariableName;
+                    // i.rawSet = rawSet;
+                    // i.innerHTML = element.innerHTML;
+                    // i.rootCreator = new Proxy(obj, new DomRenderFinalProxy());
+                    // i.creator = new Proxy(rawSet.point.thisVariableName ? ScriptUtils.evalReturn(rawSet.point.thisVariableName, obj) : obj, new DomRenderFinalProxy());
+                }
+                return data;
+            }
+        };
+        return targetAttribute;
+    }
+    static createComponentTargetElement({ name, objFactory, template = '', styles = [], noStrip }) {
+        const targetElement = {
+            name,
+            styles,
+            template,
+            noStrip,
+            callBack(element, obj, rawSet, attrs, config) {
+                return __awaiter(this, void 0, void 0, function* () {
+                    var _a, _b, _c, _d, _e, _f;
+                    const templateStyle = yield RawSet.fetchTemplateStyle({ template: this.template, styles: this.styles });
+                    this.template = templateStyle.template;
+                    this.styles = templateStyle.styles;
+                    (_a = obj.__domrender_components) !== null && _a !== void 0 ? _a : (obj.__domrender_components = {});
+                    const domrenderComponents = obj.__domrender_components;
+                    // debugger;
+                    const renderScript = ` /*createComponentTargetElement*/
+            // console.log('-------------------',this.__render);
+            var ${EventManager.RAWSET_VARNAME} = this.__render.rawSet; 
+            var ${EventManager.COMPONENT_VARNAME} = this.__render.component; 
+            var ${EventManager.ELEMENT_VARNAME} = this.__render.element; 
+            var ${EventManager.ROUTER_VARNAME} = this.__render.router; 
+            var ${EventManager.INNER_HTML_VARNAME} = this.__render.innerHTML; 
+            var ${EventManager.ATTRIBUTE_VARNAME} = this.__render.attribute; 
+            var ${EventManager.PARENT_THIS_PATH_VARNAME} = this.__render.parentThisPath; 
+            var ${EventManager.PARENT_THIS_VARNAME} = this.__render.parentThis; 
+            var ${EventManager.NEAR_THIS_PATH_VARNAME} = this.__render.nearThisPath; 
+            var ${EventManager.NEAR_THIS_VARNAME} = this.__render.nearThis; 
+            var ${EventManager.CREATOR_META_DATA_VARNAME} = this.__render.creatorMetaData;
+        `;
+                    const parentThisPath = rawSet.findParentThisPath();
+                    const parentThis = rawSet.findParentThis(obj);
+                    const nearThisPath = rawSet.findNearThisPath();
+                    const nearThis = rawSet.findNearThis(obj);
+                    let render = {
+                        renderScript,
+                        element: element,
+                        innerHTML: element.innerHTML,
+                        // attribute: attribute,
+                        getElement: () => config.window.document.querySelector(`[class*="${rawSet.uuid}"]`),
+                        rawSet: rawSet,
+                        router: config.router,
+                        componentKey: rawSet.uuid,
+                        nearThisPath: nearThisPath,
+                        nearThis: nearThis,
+                        parentThisPath: parentThisPath,
+                        parentThis: parentThis,
+                        scripts: EventManager.setBindProperty((_b = config.scripts) !== null && _b !== void 0 ? _b : {}, obj)
+                    };
+                    const constructor = element.getAttribute(RawSet.DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME);
+                    let constructorParam = [];
+                    // script 부분은 처리되어 바인딩 시켜준다
+                    render.attribute = RawSet.getAttributeObject(element, { script: renderScript, obj: obj, renderData: render });
+                    render = Object.freeze(render);
+                    //
+                    // // dr-constructor
+                    if (constructor) {
+                        let param = (_c = ScriptUtils.evalReturn({ bodyScript: renderScript, returnScript: ObjectUtils.Path.toOptionalChainPath(constructor) }, Object.assign(obj, { __render: render }))) !== null && _c !== void 0 ? _c : [];
+                        if (!Array.isArray(param)) {
+                            param = [param];
+                        }
+                        constructorParam = param;
+                    }
+                    // // console.log('------22', attrs);
+                    const instance = domrenderComponents[rawSet.uuid] = objFactory(element, obj, rawSet, constructorParam);
+                    render = Object.assign({ currentThis: instance }, render);
+                    rawSet.dataSet.render = render;
+                    // 추적 및 destroy 위해.
+                    instance.__rawSet = rawSet;
+                    //
+                    // const i = instance.__domrender_component_new = (instance.__domrender_component_new ?? new Proxy({}, new DomRenderFinalProxy())) as CreatorMetaData;
+                    // i.thisVariableName = rawSet.point.thisVariableName;
+                    // i.thisFullVariableName = `this.__domrender_components.${componentKey}`;
+                    // i.componentKey = componentKey;
+                    // i.rawSet = rawSet;
+                    // i.attribute = attribute;
+                    // i.router = config.router;
+                    // i.scripts = render.scripts;
+                    // i.drAttrs = attrs;
+                    // i.innerHTML = element.innerHTML;
+                    // i.rootCreator = new Proxy(obj, new DomRenderFinalProxy());
+                    // i.creator = new Proxy(rawSet.point.thisVariableName ? ScriptUtils.evalReturn(rawSet.point.thisVariableName, obj) : obj, new DomRenderFinalProxy());
+                    // this.__creatorMetaData = i;
+                    // render = {
+                    //   component: instance,
+                    //   creatorMetaData: i,
+                    //   ...render
+                    // };
+                    //
+                    // // 중요 dr-normal-attr-map
+                    // const normalAttrMap = element.getAttribute(EventManager.normalAttrMapAttrName);
+                    // if (isOnChangeAttrRender(instance) && normalAttrMap) {
+                    //   new Map<string, string>(JSON.parse(normalAttrMap)).forEach((value, key) => {
+                    //     const script = `${renderScript} return ${value} `;
+                    //     const cval = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
+                    //     // element.setAttribute(key, cval);
+                    //     instance.onChangeAttrRender(key, cval);
+                    //   });
+                    // }
+                    //
+                    // // dr-on-create data
+                    // const onCreateDataScript = `return {rootParent: this, render: this.__render}`;
+                    // const onCreateDataParam = ScriptUtils.eval(onCreateDataScript, Object.assign(obj, { __render: render }));
+                    // if (isOnCreateRenderData(instance)) {
+                    //   instance?.onCreateRenderData(onCreateDataParam);
+                    // }
+                    //
+                    // // dr-on-create onCreateRender
+                    // const onCreate = element.getAttribute(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);
+                    // this.__render = render;
+                    // let createParam = [];
+                    // if (onCreate) {
+                    //   const script = `${renderScript} return ${onCreate} `;
+                    //   createParam = ScriptUtils.eval(script, Object.assign(obj, { __render: render }));
+                    //   if (!Array.isArray(createParam)) {
+                    //     createParam = [createParam];
+                    //   }
+                    // }
+                    // if (isOnCreateRender(instance)) {
+                    //   instance?.onCreateRender?.(...createParam);
+                    // }
+                    let applayTemplate = element.innerHTML;
+                    let innerHTMLThisRandom;
+                    const componentName = (_d = element.getAttribute(RawSet.DR_COMPONENT_NAME_OPTIONNAME)) !== null && _d !== void 0 ? _d : 'component';
+                    const innerHTMLName = (_e = element.getAttribute(RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME)) !== null && _e !== void 0 ? _e : 'innerHTML';
+                    if (applayTemplate) {
+                        // if (rawSet.point.thisVariableName) {
+                        // 넘어온 innerHTML에 this가 있으면 해당안되게 우선 치환.
+                        innerHTMLThisRandom = RandomUtils.uuid();
+                        applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
+                        // }
+                        applayTemplate = applayTemplate.replace(RegExp(`#${componentName}#`, 'g'), 'this');
+                    }
+                    // applayTemplate = template.replace(RegExp(`#${innerHTMLName}#`, 'g'), applayTemplate);
+                    applayTemplate = ((_f = this.template) !== null && _f !== void 0 ? _f : '').replace(RegExp(`#${innerHTMLName}#`, 'g'), applayTemplate);
+                    // dr-on-component-init
+                    // const oninit = element.getAttribute(`${EventManager.attrPrefix}on-component-init`); // dr-on-component-init
+                    // const oninit = element.getAttribute(RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME); // dr-on-component-init
+                    // if (oninit) {
+                    //   const script = `${renderScript}  ${oninit} `;
+                    //   ScriptUtils.eval(script, Object.assign(obj, {
+                    //     __render: render
+                    //   }));
+                    // }
+                    const style = RawSet.generateStyleTransform(this.styles, rawSet.uuid, true);
+                    element.innerHTML = style + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
+                    // 여기서 targetElement의 옷을 벗긴다.
+                    // console.log('---createComponentTargetElement', element);
+                    let data = yield RawSet.drThisCreate(rawSet, element, `this.__domrender_components.${rawSet.uuid}`, '', !noStrip, obj, config);
+                    // const tempDiv = document.createElement("div");
+                    // tempDiv.appendChild(data.cloneNode(true)); // 원본 보존
+                    // console.log('-------------ddddddddddddd', element.innerHTML, tempDiv.innerHTML);
+                    // let data = await RawSet.drThisCreate(rawSet, element, `this.__domrender_components.${componentKey}`, '', false, obj, config);
+                    // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다. 부모에서의 this면 부모껄로 작동되게
+                    if (innerHTMLThisRandom) {
+                        const template = config.window.document.createElement('template');
+                        template.content.append(data);
+                        template.innerHTML = template.innerHTML.replace(RegExp(innerHTMLThisRandom, 'g'), 'this.');
+                        data = template.content;
+                    }
+                    // (data as any).render = render;
+                    return data;
+                });
+            }
+            // complete
+        };
+        return targetElement;
+    }
+    static isExpression(data) {
+        // const reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]?[^{]*?)\}[$#]))/g;
+        const reg = /[$#]\{([\s\S.]*?)\}[$#]/g;
+        return reg.test(data !== null && data !== void 0 ? data : '');
+    }
+    static expressionGroups(data) {
+        // const reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]*?)\}[$#]))/g;
+        // const reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]?[^{]*?)\}[$#]))/g;
+        const reg = /[$#]\{([\s\S.]*?)\}[$#]/g;
+        return StringUtils.regexExec(reg, data !== null && data !== void 0 ? data : '');
+    }
+    static destroy(obj, parameter, config, destroyOptions = []) {
+        var _a;
+        // console.log('destroy destroydestroydestroydestroy', obj, parameter, config, destroyOptions);
+        if (!destroyOptions.some(it => it === DestroyOptionType.NO_DESTROY)) {
+            if (!destroyOptions.some(it => it === DestroyOptionType.NO_MESSENGER_DESTROY)) {
+                if (config.messenger && obj) {
+                    config.messenger.deleteChannelFromObj(obj);
+                }
+            }
+            // console.log('------------destroy', obj);
+            if (isOnDestroyRender(obj)) {
+                (_a = obj.onDestroyRender) === null || _a === void 0 ? void 0 : _a.call(obj, parameter);
+            }
+        }
+    }
+    static getAttributeObject(element, config) {
+        if (!element) {
+            return undefined;
+        }
+        const attribute = ElementUtils.getAttributeToObject(element);
+        const normalAttribute = attribute[EventManager.normalAttrMapAttrName];
+        if (normalAttribute) {
+            new Map(JSON.parse(normalAttribute)).forEach((v, k) => {
+                const cval = ScriptUtils.evalReturn({ bodyScript: config.script, returnScript: v }, Object.assign(config.obj, config.renderData ? { __render: config.renderData } : undefined));
+                attribute[k] = cval;
+            });
+        }
+        return attribute;
+    }
+}
+RawSet.DR_NAME = 'dr';
+RawSet.DR_IF_NAME = 'dr-if';
+RawSet.DR_FOR_NAME = 'dr-for';
+RawSet.DR_FOR_OF_NAME = 'dr-for-of';
+RawSet.DR_THIS_PROPERTY_NAME = 'dr-this-property';
+RawSet.DR_REPEAT_NAME = 'dr-repeat';
+RawSet.DR_THIS_NAME = 'dr-this';
+RawSet.DR_FORM_NAME = 'dr-form';
+RawSet.DR_PRE_NAME = 'dr-pre';
+RawSet.DR_APPENDER_NAME = 'dr-appender';
+RawSet.DR_INNERHTML_NAME = 'dr-inner-html';
+RawSet.DR_INNERTEXT_NAME = 'dr-inner-text';
+RawSet.DR_DETECT_NAME = 'dr-detect';
+RawSet.DR_STRIP_NAME = 'dr-strip';
+RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME = 'dr-replace-target-element-is';
+// 감지처리되는 옵션
+RawSet.DR_DETECT_IF_OPTIONNAME = 'dr-detect-option-if';
+RawSet.DR_DETECT_FILTER_OPTIONNAME = 'dr-detect-option-filter';
+RawSet.DR_DETECT_ATTR_OPTIONNAME = 'dr-detect-option-attr';
+/**
+ * @deprecated
+ */
+RawSet.DR_THIS_OPTIONNAME = 'dr-option-this';
+RawSet.DR_ATTR_OPTIONNAME = 'dr-option-attr';
+RawSet.DR_IF_OPTIONNAME = 'dr-option-if';
+RawSet.DR_IT_OPTIONNAME = 'dr-option-it';
+RawSet.DR_VAR_OPTIONNAME = 'dr-option-var';
+RawSet.DR_AFTER_OPTIONNAME = 'dr-option-after';
+RawSet.DR_NEXT_OPTIONNAME = 'dr-option-next';
+RawSet.DR_BEFORE_OPTIONNAME = 'dr-option-before';
+RawSet.DR_COMPLETE_OPTIONNAME = 'dr-option-complete';
+RawSet.DR_STRIP_OPTIONNAME = 'dr-option-strip';
+RawSet.DR_DESTROY_OPTIONNAME = 'dr-option-destroy';
+RawSet.DR_THIS_NAME_OPTIONNAME = 'dr-option-this-name';
+/**
+ * @deprecated
+ */
+RawSet.DR_COMPONENT_NAME_OPTIONNAME = 'dr-option-component-name';
+RawSet.DR_COMPONENT_INNER_HTML_NAME_OPTIONNAME = 'dr-option-component-inner-html-name';
+RawSet.DR_KEY_OPTIONNAME = 'dr-option-key';
+RawSet.DR_HAS_KEYS_OPTIONNAME = 'dr-option-has-keys';
+RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME = 'dr-on-create:arguments';
+RawSet.DR_ON_CREATED_CALLBACK_OPTIONNAME = 'dr-on-create:callback';
+/**  우선 쓰는곳이 없어서 deprecated를 걸어놨음
+@deprecated
+*/
+RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME = 'dr-on-init:arguments';
+RawSet.DR_ON_CONSTRUCTOR_ARGUMENTS_OPTIONNAME = 'dr-on-constructor:arguments';
+RawSet.drAttrsOriginName = {
+    dr: RawSet.DR_NAME,
+    drIf: RawSet.DR_IF_NAME,
+    drFor: RawSet.DR_FOR_NAME,
+    drForOf: RawSet.DR_FOR_OF_NAME,
+    drThisProperty: RawSet.DR_THIS_PROPERTY_NAME,
+    drAppender: RawSet.DR_APPENDER_NAME,
+    drRepeat: RawSet.DR_REPEAT_NAME,
+    drThis: RawSet.DR_THIS_NAME,
+    drForm: RawSet.DR_FORM_NAME,
+    drPre: RawSet.DR_PRE_NAME,
+    drInnerHTML: RawSet.DR_INNERHTML_NAME,
+    drInnerText: RawSet.DR_INNERTEXT_NAME,
+    drItOption: RawSet.DR_IT_OPTIONNAME,
+    drVarOption: RawSet.DR_VAR_OPTIONNAME,
+    drAfterOption: RawSet.DR_AFTER_OPTIONNAME,
+    drNextOption: RawSet.DR_NEXT_OPTIONNAME,
+    drBeforeOption: RawSet.DR_BEFORE_OPTIONNAME,
+    drCompleteOption: RawSet.DR_COMPLETE_OPTIONNAME,
+    drStripElement: RawSet.DR_STRIP_NAME,
+    drReplaceTargetElementIs: RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME,
+    drStripOption: RawSet.DR_STRIP_OPTIONNAME,
+    drIfOption: RawSet.DR_IF_OPTIONNAME,
+    drDetectIfOption: RawSet.DR_DETECT_IF_OPTIONNAME,
+    drDestroyOption: RawSet.DR_DESTROY_OPTIONNAME,
+    drHasKeysOption: RawSet.DR_HAS_KEYS_OPTIONNAME,
+    drKeyOption: RawSet.DR_KEY_OPTIONNAME
+};
+RawSet.DR_TAGS = [];
+// public static readonly DR_REPLACE_ACTION_ATTRIBUTES = [
+//   RawSet.DR_REPLACE_TARGET_ELEMENT_IS_NAME
+// ]
+RawSet.DR_ATTRIBUTES = [
+    RawSet.DR_NAME,
+    RawSet.DR_APPENDER_NAME,
+    RawSet.DR_IF_NAME,
+    RawSet.DR_FOR_OF_NAME,
+    RawSet.DR_THIS_PROPERTY_NAME,
+    RawSet.DR_FOR_NAME,
+    RawSet.DR_THIS_NAME,
+    RawSet.DR_FORM_NAME,
+    RawSet.DR_PRE_NAME,
+    RawSet.DR_INNERHTML_NAME,
+    RawSet.DR_INNERTEXT_NAME,
+    RawSet.DR_REPEAT_NAME,
+    RawSet.DR_DETECT_NAME,
+    RawSet.DR_STRIP_NAME,
+];
+//# sourceMappingURL=RawSet.js.map