dom-render 1.0.83 → 1.0.86

package/DomRender.d.ts

@@ -1,13 +1,13 @@
-import { Config } from './Config';
+import { Config } from './configs/Config';
 import { ConstructorType } from './types/Types';
 import { RawSet } from './RawSet';
 export declare class DomRender {
-    static run<T extends object>(obj: T, target?: Node, config?: Config): T;
+    static run<T extends object>(obj: T, target?: Node | null, oConfig?: Omit<Config, 'window'>): T;
     static createComponent(param: {
-        type: ConstructorType<any>;
+        type: ConstructorType<any> | any;
         tagName?: string;
         template?: string;
         styles?: string[] | string;
-    }, config: Config): import("./Config").TargetElement;
-    static createAttribute(attrName: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment): import("./Config").TargetAttr;
+    }): import("./configs/TargetElement").TargetElement;
+    static createAttribute(attrName: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment): import("./configs/TargetAttr").TargetAttr;
 }

package/DomRender.js

@@ -19,7 +19,7 @@ var DefaultMessenger_1 = require("./messenger/DefaultMessenger");
 var DomRender = /** @class */ (function () {
     function DomRender() {
     }
-    DomRender.run = function (obj, target, config) {
+    DomRender.run = function (obj, target, oConfig) {
         var _a, _b, _c;
         var robj = obj;
         if ('_DomRender_isProxy' in obj) {
@@ -29,9 +29,13 @@ var DomRender = /** @class */ (function () {
             robj = obj;
             return robj;
         }
+        var config = oConfig;
         if (!config) {
             config = { window: window };
         }
+        if (config && !config.window) {
+            config.window = window;
+        }
         config.routerType = config.routerType || 'none';
         config.messenger = Types_1.DomRenderFinalProxy.final((_a = config.messenger) !== null && _a !== void 0 ? _a : new DefaultMessenger_1.DefaultMessenger(config));
         var domRender = new DomRenderProxy_1.DomRenderProxy(obj, target, config);
@@ -46,12 +50,13 @@ var DomRender = /** @class */ (function () {
         domRender.run(robj);
         return robj;
     };
-    DomRender.createComponent = function (param, config) {
+    DomRender.createComponent = function (param) {
         var _a, _b;
-        var component = RawSet_1.RawSet.createComponentTargetElement((_a = param.tagName) !== null && _a !== void 0 ? _a : param.type.name, function (e, o, r2, counstructorParam) {
+        // console.log('===>', typeof param.type, param.type.name, param.type.constructor.name)
+        var component = RawSet_1.RawSet.createComponentTargetElement((_a = param.tagName) !== null && _a !== void 0 ? _a : (typeof param.type === 'function' ? param.type.name : param.type.constructor.name), function (e, o, r2, counstructorParam) {
             var _a;
-            return new ((_a = param.type).bind.apply(_a, __spreadArray([void 0], counstructorParam, false)))();
-        }, (_b = param.template) !== null && _b !== void 0 ? _b : '', Array.isArray(param.styles) ? param.styles : (param.styles ? [param.styles] : undefined), false, config);
+            return typeof param.type === 'function' ? new ((_a = param.type).bind.apply(_a, __spreadArray([void 0], counstructorParam, false)))() : param.type;
+        }, (_b = param.template) !== null && _b !== void 0 ? _b : '', Array.isArray(param.styles) ? param.styles : (param.styles ? [param.styles] : undefined));
         return component;
     };
     DomRender.createAttribute = function (attrName, getThisObj, factory) {

package/DomRenderProxy.d.ts

@@ -1,5 +1,5 @@
 import { RawSet } from './RawSet';
-import { Config } from './Config';
+import { Config } from './configs/Config';
 export declare class DomRenderProxy<T extends object> implements ProxyHandler<T> {
     _domRender_origin: T;
     config: Config;
@@ -7,7 +7,7 @@ export declare class DomRenderProxy<T extends object> implements ProxyHandler<T>
     _rawSets: Map<string, Set<RawSet>>;
     _domRender_proxy?: T;
     _targets: Set<Node>;
-    constructor(_domRender_origin: T, target: Node | undefined, config: Config);
+    constructor(_domRender_origin: T, target: Node | null | undefined, config: Config);
     static unFinal<T = any>(obj: T): T;
     static final<T = any>(obj: T): T;
     static isFinal<T = any>(obj: T): boolean;

package/DomRenderProxy.js

@@ -134,7 +134,9 @@ var DomRenderProxy = /** @class */ (function () {
                     // ------------------->
                 }
                 else {
+                    // console.log('---rawSets->', it)
                     var rawSets = it.render(_this._domRender_proxy, _this.config);
+                    // console.log('---rawSets->', rawSets)
                     // 대상 attribute 있으면
                     // const targetAttrs = (it.point.node as Element).getAttribute(EventManager.normalAttrMapAttrName);
                     // if (it?.data.onChangeAttrRender && it.type === RawSetType.TARGET_ELEMENT && targetAttrs) {

package/README.MD

@@ -7,7 +7,7 @@ DOM-RENDER
 
 # 🚀 Quick start 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.83/dist/bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.86/dist/bundle.js"></script>
 ```
 ```html
 <!DOCTYPE html>
@@ -18,7 +18,7 @@ DOM-RENDER
 </head>
 <body id="app">
 ${this.name}$
-<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.83/dist/bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.86/dist/bundle.js"></script>
 <script>
   let data = {
     name: 'my name is dom-render'
@@ -404,9 +404,9 @@ const config: Config = {
   window
 };
 config.targetElements = [
-  DomRender.createComponent({type: Main, tagName: 'page-main', template: MainTemplate}, config),
-  DomRender.createComponent({type: Second, tagName: 'page-second', template: SecondTemplate}, config),
-  DomRender.createComponent({type: Detail, tagName: 'page-detail', template: DetailTemplate}, config)
+  DomRender.createComponent({type: Main, tagName: 'page-main', template: MainTemplate}),
+  DomRender.createComponent({type: Second, tagName: 'page-second', template: SecondTemplate}),
+  DomRender.createComponent({type: Detail, tagName: 'page-detail', template: DetailTemplate})
 ]
 config.routerType = 'hash'; // 'hash' | 'path' | 'none';
 const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
@@ -644,8 +644,8 @@ link attribute
 ```
 ```typescript
 config.targetElements = [
-  DomRender.createComponent({type: Profile, template: ProfileTemplate}, config),
-  DomRender.createComponent({type: Home, template: HomeTemplate, styles: HomeStyle}, config)
+  DomRender.createComponent({type: Profile, template: ProfileTemplate}),
+  DomRender.createComponent({type: Home, template: HomeTemplate, styles: HomeStyle})
 ]
 
 config.targetAttrs = [

package/RawSet.d.ts

@@ -1,5 +1,7 @@
-import { Config, TargetAttr, TargetElement } from './Config';
+import { Config } from './configs/Config';
 import { ComponentSet } from './components/ComponentSet';
+import { TargetElement } from './configs/TargetElement';
+import { TargetAttr } from './configs/TargetAttr';
 export declare enum DestroyOptionType {
     NO_DESTROY = "NO_DESTROY",
     NO_MESSENGER_DESTROY = "NO_MESSENGER_DESTROY"
@@ -49,6 +51,7 @@ export declare type ElementInitCallBack = {
 };
 export declare enum RawSetType {
     TEXT = "TEXT",
+    STYLE_TEXT = "STYLE_TEXT",
     TARGET_ELEMENT = "TARGET_ELEMENT",
     TARGET_ATTR = "TARGET_ATTR",
     UNKOWN = "UNKOWN"
@@ -71,10 +74,11 @@ export declare class RawSet {
     uuid: string;
     type: RawSetType;
     point: {
-        start: Comment;
+        start: Comment | Text | HTMLMetaElement;
         node: Node;
-        end: Comment;
+        end: Comment | Text | HTMLMetaElement;
         thisVariableName?: string | null;
+        parent?: Node | null;
     };
     fragment: DocumentFragment;
     detect?: {
@@ -105,16 +109,18 @@ export declare class RawSet {
     static readonly DR_TAGS: never[];
     static readonly DR_ATTRIBUTES: string[];
     constructor(uuid: string, type: RawSetType, point: {
-        start: Comment;
+        start: Comment | Text | HTMLMetaElement;
         node: Node;
-        end: Comment;
+        end: Comment | Text | HTMLMetaElement;
         thisVariableName?: string | null;
+        parent?: Node | null;
     }, fragment: DocumentFragment, detect?: {
         action: Function;
     } | undefined, data?: any);
     get isConnected(): boolean;
     getUsingTriggerVariables(config?: Config): Set<string>;
     render(obj: any, config: Config): RawSet[];
+    generateCSS(id: string, cssRule: CSSRule): void;
     applyEvent(obj: any, fragment?: DocumentFragment, config?: Config): void;
     getAttribute(element: Element, attr: string): string | null;
     getAttributeAndDelete(element: Element, attr: string): string | null;
@@ -139,13 +145,11 @@ export declare class RawSet {
         regex: RegExp;
         random: string;
     }[]): void;
-    static drThisCreate(element: Element, drThis: string, drVarOption: string, drStripOption: boolean | string | null, obj: any, config: Config, set?: ComponentSet): DocumentFragment;
+    static drThisCreate(rawSet: RawSet, element: Element, drThis: string, drVarOption: string, drStripOption: boolean | string | null, obj: any, config: Config, set?: ComponentSet): DocumentFragment;
     static createComponentTargetAttribute(name: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment): TargetAttr;
-    static createComponentTargetElement(name: string, objFactory: (element: Element, obj: any, rawSet: RawSet, counstructorParam: any[]) => any, template: string | undefined, styles: string[] | undefined, styleLocale: boolean, config: Config): TargetElement;
+    static createComponentTargetElement(name: string, objFactory: (element: Element, obj: any, rawSet: RawSet, counstructorParam: any[]) => any, template?: string, styles?: string[]): TargetElement;
     static isExporesion(data: string | null): boolean;
     static exporesionGrouops(data: string | null): RegExpExecArray[];
-    static styleTransformLocal(styleBody: string | string[], id: string, styleTagWrap?: boolean, locale?: boolean): string;
-    static metaStart(id: string): string;
-    static metaEnd(id: string): string;
+    static styleTransformLocal(styleBody: string | string[], id: string, styleTagWrap?: boolean): string;
     static destroy(obj: any | undefined, parameter: any[], config: Config, destroyOptions?: (DestroyOptionType | string)[]): void;
 }

package/RawSet.js

@@ -50,6 +50,7 @@ var DestroyOptionType;
 var RawSetType;
 (function (RawSetType) {
     RawSetType["TEXT"] = "TEXT";
+    RawSetType["STYLE_TEXT"] = "STYLE_TEXT";
     RawSetType["TARGET_ELEMENT"] = "TARGET_ELEMENT";
     RawSetType["TARGET_ATTR"] = "TARGET_ATTR";
     RawSetType["UNKOWN"] = "UNKOWN";
@@ -146,21 +147,28 @@ var RawSet = /** @class */ (function () {
             });
             var fag = config.window.document.createDocumentFragment();
             if (cNode.nodeType === Node.TEXT_NODE && cNode.textContent) {
+                // console.log('text-->', this, obj, config)
+                // console.log('text-->', Array.from(this.fragment.childNodes))
                 var textContent = cNode.textContent;
                 var runText = RawSet.exporesionGrouops(textContent)[0][1];
                 // console.log('--->', RawSet.exporesionGrouops(textContent), textContent,runText, runText[0][1])
-                var n = void 0;
+                var newNode = void 0;
                 if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
                     var r = ScriptUtils_1.ScriptUtils.eval("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
                     var template = config.window.document.createElement('template');
                     template.innerHTML = r;
-                    n = template.content;
+                    newNode = template.content;
                 }
                 else {
                     var r = ScriptUtils_1.ScriptUtils.eval("".concat(__render.bindScript, "  return ").concat(runText), Object.assign(obj, { __render: __render }));
-                    n = config.window.document.createTextNode(r);
+                    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');
                 }
-                (_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(n, cNode);
             }
             else if (cNode.nodeType === Node.ELEMENT_NODE) {
                 var element = cNode;
@@ -215,7 +223,7 @@ var RawSet = /** @class */ (function () {
             }
         }
         this.applyEvent(obj, genNode, config);
-        this.replaceBody(genNode);
+        this.replaceBody(genNode); // 중요 여기서 마지막에 연션된 값을 그려준다.
         drAttrs.forEach(function (it) {
             if (it.drCompleteOption) {
                 // genNode.childNodes
@@ -228,46 +236,25 @@ var RawSet = /** @class */ (function () {
                 }));
             }
         });
+        // 중요 style isolation 나중에 :scope로 대체 가능할듯.
+        Array.from(window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
+            var _a;
+            var styleElement = it.ownerNode;
+            var id = (_a = styleElement.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-')[0];
+            if (id) {
+                // console.log('------->', id)
+                Array.from(it.cssRules).forEach(function (it) {
+                    _this.generateCSS(id, it);
+                });
+            }
+            it.ownerNode.setAttribute('completed', 'true');
+        });
         for (var _p = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _p < onThisComponentSetCallBacks_1.length; _p++) {
             var it_1 = onThisComponentSetCallBacks_1[_p];
             (_c = (_b = it_1.obj).onInitRender) === null || _c === void 0 ? void 0 : _c.call(_b);
         }
         for (var _q = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _q < onElementInitCallBacks_1.length; _q++) {
             var it_2 = onElementInitCallBacks_1[_q];
-            // 중요 style isolation 나중에 :scope로 대체 가능할듯.
-            Array.from(window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
-                var _a;
-                var styleElement = it.ownerNode;
-                var id = (_a = styleElement.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-')[0];
-                if (id) {
-                    // console.log('------->', id)
-                    var start_1 = "#".concat(id, "-start");
-                    var end_1 = "#".concat(id, "-end");
-                    Array.from(it.cssRules).filter(function (it) { return it.constructor.name === 'CSSStyleRule'; }).forEach(function (it) {
-                        var rule = it;
-                        // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *) ${rule.selectorText}`;
-                        // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ ${rule.selectorText})`;
-                        // console.log('-----', rule, rule.selectorText)
-                        if (!rule.selectorText.startsWith(':root')) {
-                            // rule.selectorText = `${start} ~ ${rule.selectorText}:not(${start} ~ ${end} ~ *)`;
-                            // rule.selectorText = `${start} ~ ${rule.selectorText}:not(${start} ~ ${end} ~ *)`;
-                            var selectorText = ":is(".concat(start_1, " ~ *:not(").concat(start_1, " ~ ").concat(end_1, " ~ *))");
-                            if (rule.selectorText.startsWith('.')) {
-                                rule.selectorText = "".concat(selectorText).concat(rule.selectorText, ", ").concat(selectorText, " ").concat(rule.selectorText);
-                                //     rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *)${rule.selectorText}`;
-                            }
-                            else {
-                                var divText = "".concat(start_1, " ~ ").concat(rule.selectorText, ":not(").concat(start_1, " ~ ").concat(end_1, " ~ *)");
-                                rule.selectorText = "".concat(selectorText, " ").concat(rule.selectorText, ", ").concat(divText);
-                                // rule.selectorText = `${selectorText} ${rule.selectorText}`;
-                                //     rule.selectorText = `${rule.selectorText} ~ ${start} ~ *:not(${start} ~ ${end} ~ *)`;
-                            }
-                        }
-                        // console.log(rule.selectorText);
-                    });
-                }
-                it.ownerNode.setAttribute('completed', 'true');
-            });
             (_g = (_f = (_e = (_d = it_2.targetElement) === null || _d === void 0 ? void 0 : _d.__render) === null || _e === void 0 ? void 0 : _e.component) === null || _f === void 0 ? void 0 : _f.onInitRender) === null || _g === void 0 ? void 0 : _g.call(_f, Object.freeze({ render: (_h = it_2.targetElement) === null || _h === void 0 ? void 0 : _h.__render, creatorMetaData: (_j = it_2.targetElement) === null || _j === void 0 ? void 0 : _j.__creatorMetaData }));
             (_k = config === null || config === void 0 ? void 0 : config.onElementInit) === null || _k === void 0 ? void 0 : _k.call(config, it_2.name, obj, this, it_2.targetElement);
         }
@@ -294,6 +281,39 @@ var RawSet = /** @class */ (function () {
         }
         return raws;
     };
+    RawSet.prototype.generateCSS = function (id, cssRule) {
+        var _this = this;
+        var start = "#".concat(id, "-start");
+        var end = "#".concat(id, "-end");
+        if (cssRule.constructor.name === 'CSSStyleRule') {
+            var rule = cssRule;
+            // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *) ${rule.selectorText}`;
+            // rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ ${rule.selectorText})`;
+            // console.log('-----', rule, rule.selectorText)
+            if (!rule.selectorText.startsWith(':root')) {
+                // rule.selectorText = `${start} ~ ${rule.selectorText}:not(${start} ~ ${end} ~ *)`;
+                // rule.selectorText = `${start} ~ ${rule.selectorText}:not(${start} ~ ${end} ~ *)`;
+                var selectorText = ":is(".concat(start, " ~ *:not(").concat(start, " ~ ").concat(end, " ~ *))");
+                if (rule.selectorText.startsWith('.')) {
+                    rule.selectorText = "".concat(selectorText).concat(rule.selectorText, ", ").concat(selectorText, " ").concat(rule.selectorText);
+                    //     rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *)${rule.selectorText}`;
+                }
+                else {
+                    var divText = "".concat(start, " ~ ").concat(rule.selectorText, ":not(").concat(start, " ~ ").concat(end, " ~ *)");
+                    rule.selectorText = "".concat(selectorText, " ").concat(rule.selectorText, ", ").concat(divText);
+                    // rule.selectorText = `${selectorText} ${rule.selectorText}`;
+                    //     rule.selectorText = `${rule.selectorText} ~ ${start} ~ *:not(${start} ~ ${end} ~ *)`;
+                }
+            }
+            // console.log(rule.selectorText);
+        }
+        else if (cssRule.constructor.name === 'CSSMediaRule') {
+            var rule = cssRule;
+            Array.from(rule.cssRules).forEach(function (it) {
+                _this.generateCSS(id, it);
+            });
+        }
+    };
     RawSet.prototype.applyEvent = function (obj, fragment, config) {
         if (fragment === void 0) { fragment = this.fragment; }
         EventManager_1.eventManager.applyEvent(obj, EventManager_1.eventManager.findAttrElements(fragment, config), config);
@@ -334,17 +354,19 @@ var RawSet = /** @class */ (function () {
     RawSet.prototype.replaceBody = function (genNode) {
         var _a;
         this.childAllRemove();
-        (_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling);
+        (_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
     RawSet.checkPointCreates = function (element, obj, config) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
+        // console.log('start==========')
         var thisVariableName = element.__domrender_this_variable_name;
         // console.log('checkPointCreates thisVariableName', thisVariableName);
         var nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
             acceptNode: function (node) {
                 var _a, _b, _c, _d, _e;
                 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: 나중에
@@ -389,49 +411,68 @@ var RawSet = /** @class */ (function () {
                 // const a = StringUtils.regexExec(/[$#]\{.*?\}/g, text);
                 // const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); // <--TODO: 나중에..
                 var groups = RawSet.exporesionGrouops(text);
-                var map = groups.map(function (it) { return ({ uuid: RandomUtils_1.RandomUtils.uuid(), content: it[0], regexArr: it }); });
+                var map = groups.map(function (it) { return ({ uuid: RandomUtils_1.RandomUtils.getRandomString(40), content: it[0], regexArr: it }); });
                 var lasterIndex = 0;
                 for (var i = 0; i < map.length; i++) {
                     var it_4 = map[i];
                     var regexArr = it_4.regexArr;
                     var preparedText = regexArr.input.substring(lasterIndex, regexArr.index);
-                    var start = config.window.document.createComment("start text ".concat(it_4.uuid));
-                    var end = config.window.document.createComment("end text ".concat(it_4.uuid));
+                    // 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`);
+                    var start = void 0;
+                    var end = void 0;
+                    var type = void 0;
+                    if (currentNode.parentNode && currentNode.parentNode.nodeName.toUpperCase() === 'STYLE') {
+                        type = RawSetType.STYLE_TEXT;
+                        start = config.window.document.createTextNode("/*start text ".concat(it_4.uuid, "*/"));
+                        end = config.window.document.createTextNode("/*end text ".concat(it_4.uuid, "*/"));
+                    }
+                    else {
+                        type = RawSetType.TEXT;
+                        start = config.window.document.createComment("start text ".concat(it_4.uuid));
+                        end = config.window.document.createComment("end text ".concat(it_4.uuid));
+                    }
                     // layout setting
-                    template.content.append(document.createTextNode(preparedText)); // 사이사이값.
-                    template.content.append(start);
-                    template.content.append(end);
-                    // content
+                    template.content.append(document.createTextNode(preparedText)); // 앞 부분 넣고
+                    template.content.append(start); // add start checkpoint
+                    template.content.append(end); // add end checkpoint
+                    // content 안쪽 RawSet render 할때 start 와 end 사이에 fragment 연산해서 들어간다.
                     var fragment = config.window.document.createDocumentFragment();
                     fragment.append(config.window.document.createTextNode(it_4.content));
-                    pars.push(new RawSet(it_4.uuid, RawSetType.TEXT, {
+                    pars.push(new RawSet(it_4.uuid, type, {
                         start: start,
                         node: currentNode,
                         end: end,
+                        parent: currentNode.parentNode,
                         thisVariableName: thisVariableName
                     }, fragment));
                     lasterIndex = regexArr.index + it_4.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);
+                (_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) {
-                var uuid = RandomUtils_1.RandomUtils.uuid();
+                var uuid = RandomUtils_1.RandomUtils.getRandomString(40);
                 var element_3 = currentNode;
                 var fragment = config.window.document.createDocumentFragment();
-                var start = config.window.document.createComment("start ".concat(uuid));
-                var end = config.window.document.createComment("end ".concat(uuid));
-                // console.log('start--', uuid)
+                var start = config.window.document.createElement('meta');
+                var end = config.window.document.createElement('meta');
+                start.setAttribute('id', "".concat(uuid, "-start"));
+                end.setAttribute('id', "".concat(uuid, "-end"));
+                var type = RawSetType.TARGET_ELEMENT;
                 var isElement = ((_d = (_c = config.targetElements) === null || _c === void 0 ? void 0 : _c.map(function (it) { return it.name.toLowerCase(); })) !== null && _d !== void 0 ? _d : []).includes(element_3.tagName.toLowerCase());
                 var targetAttrNames_2 = ((_f = (_e = config.targetAttrs) === null || _e === void 0 ? void 0 : _e.map(function (it) { return it.name; })) !== null && _f !== void 0 ? _f : []).concat(RawSet.DR_ATTRIBUTES);
                 var isAttr = element_3.getAttributeNames().filter(function (it) { return targetAttrNames_2.includes(it.toLowerCase()); }).length > 0;
                 (_g = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _g === void 0 ? void 0 : _g.insertBefore(start, currentNode);
                 (_h = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _h === void 0 ? void 0 : _h.insertBefore(end, currentNode.nextSibling);
                 fragment.append(currentNode);
-                pars.push(new RawSet(uuid, isElement ? RawSetType.TARGET_ELEMENT : (isAttr ? RawSetType.TARGET_ATTR : RawSetType.UNKOWN), {
+                pars.push(new RawSet(uuid, isElement ? type : (isAttr ? RawSetType.TARGET_ATTR : RawSetType.UNKOWN), {
                     start: start,
                     node: currentNode,
                     end: end,
+                    parent: currentNode.parentNode,
                     thisVariableName: thisVariableName
                 }, fragment));
             }
@@ -558,16 +599,18 @@ var RawSet = /** @class */ (function () {
             });
         });
     };
-    RawSet.drThisCreate = function (element, drThis, drVarOption, drStripOption, obj, config, set) {
+    RawSet.drThisCreate = function (rawSet, element, drThis, drVarOption, drStripOption, obj, config, set) {
         var _a, _b, _c, _d;
         var fag = config.window.document.createDocumentFragment();
         var n = element.cloneNode(true);
+        // console.log('--------',n, n.innerHTML)
         if (set) {
-            var id = RandomUtils_1.RandomUtils.getRandomString(20);
-            var style = RawSet.styleTransformLocal((_a = set.styles) !== null && _a !== void 0 ? _a : [], id, true, set.styleLocale);
-            var metaStart = RawSet.metaStart(id);
-            var metaEnd = RawSet.metaEnd(id);
-            n.innerHTML = metaStart + style + ((_b = set.template) !== null && _b !== void 0 ? _b : '') + metaEnd;
+            // const id = RandomUtils.getRandomString(20);
+            var style = RawSet.styleTransformLocal((_a = set.styles) !== null && _a !== void 0 ? _a : [], rawSet.uuid, true);
+            n.innerHTML = style + ((_b = set.template) !== null && _b !== void 0 ? _b : '');
+            // const metaStart = RawSet.metaStart(id);
+            // const metaEnd = RawSet.metaEnd(id);
+            // n.innerHTML = metaStart + style + (set.template ?? '') + metaEnd;
             // dr-on-create onCreateRender
             var onCreate = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
             var renderScript = '';
@@ -595,6 +638,7 @@ var RawSet = /** @class */ (function () {
         this.drVarDecoding(n, vars);
         this.drThisDecoding(n, thisRandom);
         if (drStripOption && (drStripOption === true || drStripOption === 'true')) {
+            // console.log('------childNodes', Array.from(n.childNodes))
             Array.from(n.childNodes).forEach(function (it) { return fag.append(it); });
         }
         else {
@@ -625,21 +669,22 @@ var RawSet = /** @class */ (function () {
         };
         return targetAttribute;
     };
-    RawSet.createComponentTargetElement = function (name, objFactory, template, styles, styleLocale, config) {
+    RawSet.createComponentTargetElement = function (name, objFactory, template, styles) {
         if (template === void 0) { template = ''; }
         if (styles === void 0) { styles = []; }
         var targetElement = {
             name: name,
             styles: styles,
             template: template,
-            callBack: function (element, obj, rawSet, attrs) {
+            callBack: function (element, obj, rawSet, attrs, config) {
                 var _a, _b, _c, _d, _e, _f;
                 // console.log('callback------->', element)
                 if (!obj.__domrender_components) {
                     obj.__domrender_components = {};
                 }
                 var domrenderComponents = obj.__domrender_components;
-                var componentKey = '_' + RandomUtils_1.RandomUtils.getRandomString(20);
+                // const componentKey = '_' + RandomUtils.getRandomString(20);
+                var componentKey = rawSet.uuid;
                 var attribute = DomUtils_1.DomUtils.getAttributeToObject(element);
                 var renderScript = 'var $component = this.__render.component; var $element = this.__render.element; var $router = this.__render.router; var $innerHTML = this.__render.innerHTML; var $attribute = this.__render.attribute; var $creatorMetaData = this.__render.creatorMetaData;';
                 var render = Object.freeze({
@@ -722,12 +767,13 @@ var RawSet = /** @class */ (function () {
                         __render: render
                     }));
                 }
-                var style = RawSet.styleTransformLocal(styles, componentKey, true, styleLocale);
-                var metaStart = RawSet.metaStart(componentKey);
-                var metaEnd = RawSet.metaEnd(componentKey);
-                element.innerHTML = metaStart + style + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '') + metaEnd;
+                var style = RawSet.styleTransformLocal(styles, componentKey, true);
+                element.innerHTML = style + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
+                // const metaStart = RawSet.metaStart(componentKey);
+                // const metaEnd = RawSet.metaEnd(componentKey);
+                // element.innerHTML = metaStart + style + (applayTemplate ?? '') + metaEnd;
                 // console.log('------>', element.innerHTML, obj)
-                var data = RawSet.drThisCreate(element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
+                var data = RawSet.drThisCreate(rawSet, element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
                 // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
                 if (innerHTMLThisRandom) {
                     var template_1 = config.window.document.createElement('template');
@@ -752,9 +798,8 @@ var RawSet = /** @class */ (function () {
         return StringUtils_1.StringUtils.regexExec(reg, data !== null && data !== void 0 ? data : '');
     };
     // 중요 스타일 적용 부분
-    RawSet.styleTransformLocal = function (styleBody, id, styleTagWrap, locale) {
+    RawSet.styleTransformLocal = function (styleBody, id, styleTagWrap) {
         if (styleTagWrap === void 0) { styleTagWrap = true; }
-        if (locale === void 0) { locale = false; }
         // <style id="first">
         //     #first ~ *:not(#first ~ style[domstyle] ~ *) {
         //     font-size: 30px;
@@ -764,25 +809,26 @@ var RawSet = /** @class */ (function () {
         if (Array.isArray(styleBody)) {
             styleBody = styleBody.join('\n');
         }
-        if (locale) {
-            styleBody = styleBody.replace(/([^}]+){/gm, function (a, b) {
-                if (typeof b === 'string') {
-                    b = b.trim();
-                }
-                return "#".concat(id, " ~ ").concat(b, ":not(#").concat(id, " ~ style[domstyle] ~ *), #").concat(id, " ~ * ").concat(b, " {");
-            });
-        }
+        // if (locale) {
+        //     styleBody = styleBody.replace(/([^}]+){/gm, function (a, b) {
+        //         if (typeof b === 'string') {
+        //             b = b.trim();
+        //         }
+        //         return `#${id} ~ ${b}:not(#${id} ~ style[domstyle] ~ *), #${id} ~ * ${b} {`;
+        //     });
+        // }
         if (styleTagWrap) {
             styleBody = "<style id='".concat(id, "-style' domstyle>").concat(styleBody, "</style>");
         }
         return styleBody;
     };
-    RawSet.metaStart = function (id) {
-        return "<meta id='".concat(id, "-start' />");
-    };
-    RawSet.metaEnd = function (id) {
-        return "<meta id='".concat(id, "-end' />");
-    };
+    // public static metaStart(id: string) {
+    //     return `<meta id='${id}-start' />`;
+    // }
+    //
+    // public static metaEnd(id: string) {
+    //     return `<meta id='${id}-end' />`;
+    // }
     RawSet.destroy = function (obj, parameter, config, destroyOptions) {
         var _a;
         if (destroyOptions === void 0) { destroyOptions = []; }

package/configs/Config.d.ts

@@ -0,0 +1,26 @@
+import { ConstructorType } from '../types/Types';
+import { RawSet } from '../RawSet';
+import { Router } from '../routers/Router';
+import { Messenger } from '../messenger/Messenger';
+import { TargetElement } from './TargetElement';
+import { TargetAttr } from './TargetAttr';
+export declare type Config = {
+    window: Window;
+    targetElements?: TargetElement[];
+    targetAttrs?: TargetAttr[];
+    onElementInit?: (name: string, obj: any, rawSet: RawSet, targetElement: TargetElement) => any;
+    onAttrInit?: (name: string, attrValue: string, obj: any, rawSet: RawSet) => any;
+    proxyExcludeTyps?: ConstructorType<any>[];
+    proxyExcludeOnBeforeReturnSets?: string[];
+    proxyExcludeOnBeforeReturnGets?: string[];
+    scripts?: {
+        [n: string]: any;
+    };
+    routerType?: 'hash' | 'path' | 'none';
+    router?: Router;
+    messenger?: Messenger;
+    applyEvents?: {
+        attrName: string;
+        callBack: (elements: Element, attrValue: string, obj: any) => void;
+    }[];
+};

package/configs/TargetAttr.d.ts

@@ -0,0 +1,6 @@
+import { RawSet } from '../RawSet';
+export declare type TargetAttr = {
+    name: string;
+    callBack: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment;
+    complete?: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => void;
+};

package/configs/TargetAttr.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });