@dooboostore/dom-render 1.0.111 → 1.0.112

package/src/dist/rawsets/RawSet.js

@@ -1,1469 +0,0 @@
-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