dom-render 1.0.79 → 1.0.82

package/DomRender.d.ts

@@ -3,26 +3,11 @@ 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 addComponent(config: Config, { type, tagName }: {
+    static createComponent(param: {
         type: ConstructorType<any>;
         tagName?: string;
-    }, { template, styles, styleLocale }: {
-        template: string;
-        styles?: string[];
-        styleLocale?: boolean;
-    }): {
-        add: (source: {
-            type: ConstructorType<any>;
-            tagName?: string;
-        }, front: {
-            template: string;
-            styles?: string[];
-        }) => any;
-    };
-    static addAttribute(config: Config, attrName: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment): {
-        add: (attrName: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment) => any;
-    };
-    static addAttributeCallBack(config: Config, attrName: string, callBack: (elements: Element, attrValue: string, obj: any) => void): {
-        add: (attrName: string, callBack: (elements: Element, attrValue: string, obj: any) => void) => any;
-    };
+        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;
 }

package/DomRender.js

@@ -46,44 +46,17 @@ var DomRender = /** @class */ (function () {
         domRender.run(robj);
         return robj;
     };
-    DomRender.addComponent = function (config, _a, _b) {
-        var _c;
-        var type = _a.type, _d = _a.tagName, tagName = _d === void 0 ? type.name : _d;
-        var template = _b.template, _e = _b.styles, styles = _e === void 0 ? [] : _e, _f = _b.styleLocale, styleLocale = _f === void 0 ? false : _f;
-        var component = RawSet_1.RawSet.createComponentTargetElement(tagName, function (e, o, r2, counstructorParam) {
-            return new (type.bind.apply(type, __spreadArray([void 0], counstructorParam, false)))();
-        }, template, styles, styleLocale, config);
-        config.targetElements = (_c = config.targetElements) !== null && _c !== void 0 ? _c : [];
-        config.targetElements.push(component);
-        return {
-            add: function (source, front) {
-                return DomRender.addComponent(config, source, front);
-            }
-        };
+    DomRender.createComponent = function (param, config) {
+        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) {
+            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 component;
     };
-    DomRender.addAttribute = function (config, attrName, getThisObj, factory) {
-        var _a;
+    DomRender.createAttribute = function (attrName, getThisObj, factory) {
         var targetAttribute = RawSet_1.RawSet.createComponentTargetAttribute(attrName, getThisObj, factory);
-        config.targetAttrs = (_a = config.targetAttrs) !== null && _a !== void 0 ? _a : [];
-        config.targetAttrs.push(targetAttribute);
-        return {
-            add: function (attrName, getThisObj, factory) {
-                return DomRender.addAttribute(config, attrName, getThisObj, factory);
-            }
-        };
-    };
-    DomRender.addAttributeCallBack = function (config, attrName, callBack) {
-        var _a;
-        config.applyEvents = (_a = config.applyEvents) !== null && _a !== void 0 ? _a : [];
-        config.applyEvents.push({
-            attrName: attrName,
-            callBack: callBack
-        });
-        return {
-            add: function (attrName, callBack) {
-                return DomRender.addAttributeCallBack(config, attrName, callBack);
-            }
-        };
+        return targetAttribute;
     };
     return DomRender;
 }());

package/DomRenderProxy.js

@@ -64,7 +64,7 @@ var DomRenderProxy = /** @class */ (function () {
         (_d = (_c = this._domRender_proxy) === null || _c === void 0 ? void 0 : _c.onCreateRender) === null || _d === void 0 ? void 0 : _d.call(_c, createParam);
         var innerHTML = (_e = target.innerHTML) !== null && _e !== void 0 ? _e : '';
         this._targets.add(target);
-        var rawSets = RawSet_1.RawSet.checkPointCreates(target, this.config);
+        var rawSets = RawSet_1.RawSet.checkPointCreates(target, this._domRender_proxy, this.config);
         // console.log('initRender -------rawSet', rawSets)
         // 중요 초기에 한번 튕겨줘야함.
         EventManager_1.eventManager.applyEvent(this._domRender_proxy, EventManager_1.eventManager.findAttrElements(target, this.config), this.config);
@@ -182,6 +182,7 @@ var DomRenderProxy = /** @class */ (function () {
         }
         else {
             var strings = paths.reverse();
+            // array같은경우도 키값으로 접근하기때문에 특정 인덱스를 찾아서 그부분만 바꿔줄수 있다.
             var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[".concat(it, "]"); }).join('').slice(1);
             if (lastDoneExecute) {
                 var iterable = this._rawSets.get(fullPathStr_1);

package/README.MD

@@ -7,7 +7,7 @@ DOM-RENDER
 
 # 🚀 Quick start 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.78/dist/bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.81/dist/bundle.js"></script>
 ```
 ```html
 <!DOCTYPE html>
@@ -119,6 +119,45 @@ const data = DomRender.run(new Data(), document.querySelector('#app')!);
 ```
 </details>
 
+<details>
+  <summary>dr-appender<strong>🔻(click)</strong></summary>
+
+```html
+<h3>appender</h3>
+<ul>
+  <li dr-appender="this.appender">
+    ${#it#}$
+  </li>
+</ul>
+<button dr-event-click="this.append()">appending</button>
+<button dr-event-click="this.modifyAppender(0)">idx 0 modify</button>
+<button dr-event-click="this.clearAppend()">appender clear</button>
+```
+
+```typescript
+class Data {
+    appender = new Appender();
+
+    constructor() {
+        this.appender.push('init' + RandomUtils.uuid(), 'init' + RandomUtils.uuid());
+    }
+
+    append() {
+        this.appender.push(RandomUtils.uuid(), RandomUtils.uuid());
+    }
+
+    clearAppend() {
+        this.appender.clear()
+    }
+
+    modifyAppender(idx: number) {
+        this.appender[idx][0] = RandomUtils.uuid();
+    }
+}
+
+```
+</details>
+
 <details>
   <summary>dr-repeat<strong>🔻(click)</strong></summary>
 
@@ -364,11 +403,12 @@ validator
 const config: Config = {
   window
 };
-DomRender.addComponent(config, {type: Main, tagName: 'page-main'}, {template: MainTemplate})
-        .add({type: Second, tagName: 'page-second'}, {template: SecondTemplate})
-        .add({type: Detail, tagName: 'page-detail'}, {template: DetailTemplate});
-config.routerType = 'hash';
-config.routerType = 'hash';
+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)
+]
+config.routerType = 'hash'; // 'hash' | 'path' | 'none';
 const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
 ```
 ```html
@@ -464,6 +504,17 @@ for (let data of new Range(100,55, 10)) {
 const rangeArray = new Range(100,55, 10).toArray();
 ```
 </details>
+<details>
+  <summary>Appender<strong>🔻(click)</strong></summary>
+
+```javascript
+const appender = new Appender<number>([1, 2]);
+appender.push(3, 4)
+for (const data of appender) {
+    console.log('----appender item--->', data);
+}
+```
+</details>
 
 ## Detect Get, Set
 <details>
@@ -592,33 +643,41 @@ link attribute
 </body>
 ```
 ```typescript
-DomRender
-        .addComponent(config, {type: Profile}, {template: ProfileTemplate})
-        .add({type: Home}, {template: HomeTemplate});
-
-DomRender.addAttribute(config, 'link',
-        (element: Element, attrValue: string, obj: any, rawSet: RawSet) => {
-          return obj;
-        },
-        (element: Element, attrValue: string, obj: any, rawSet: RawSet) => {
-          const fag = window.document.createDocumentFragment();
-          if (attrValue) {
-            const n = element.cloneNode(true) as Element;
-            attrValue = ScriptUtils.eval(`return ${attrValue}`, obj)
-            n.addEventListener('click', () => {
-              location.href = attrValue;
-            });
-            fag.append(n);
+config.targetElements = [
+  DomRender.createComponent({type: Profile, template: ProfileTemplate}, config),
+  DomRender.createComponent({type: Home, template: HomeTemplate, styles: HomeStyle}, config)
+]
+
+config.targetAttrs = [
+  DomRender.createAttribute('link',
+          (element: Element, attrValue: string, obj: any, rawSet: RawSet) => {
+            return obj;
+          },
+          (element: Element, attrValue: string, obj: any, rawSet: RawSet) => {
+            const fag = window.document.createDocumentFragment();
+            if (attrValue) {
+              const n = element.cloneNode(true) as Element;
+              attrValue = ScriptUtils.eval(`return ${attrValue}`, obj)
+              n.addEventListener('click', () => {
+                location.href = attrValue;
+              });
+              fag.append(n);
+            }
+            return fag;
           }
-          return fag;
-        }
-);
-
-DomRender.addAttributeCallBack(config, 'wow', (e, a, o) => {
-  e.addEventListener('click', (event) => {
-    alert((event.target as any).value);
-  })
-})
+  )
+]
+
+config.applyEvents = [
+  {
+    attrName: 'wow',
+    callBack: (e, a, o) => {
+      e.addEventListener('click', (event) => {
+        alert((event.target as any).value);
+      })
+    }
+  }
+]
 const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
 ```
 using component

package/RawSet.d.ts

@@ -120,7 +120,7 @@ export declare class RawSet {
     getAttributeAndDelete(element: Element, attr: string): string | null;
     getDrAppendAttributeAndDelete(element: Element, obj: any): string | null;
     replaceBody(genNode: Node): void;
-    static checkPointCreates(element: Node, config: Config): RawSet[];
+    static checkPointCreates(element: Node, obj: any, config: Config): RawSet[];
     childAllRemove(): void;
     static drItOtherEncoding(element: Element | DocumentFragment): string;
     static drItOtherDecoding(element: Element | DocumentFragment, random: string): void;
@@ -145,5 +145,7 @@ export declare class RawSet {
     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 destroy(obj: any | undefined, parameter: any[], config: Config, destroyOptions?: (DestroyOptionType | string)[]): void;
 }

package/RawSet.js

@@ -118,7 +118,7 @@ var RawSet = /** @class */ (function () {
         // console.log('usingTriggerVariable----------->', usingTriggerVariables)
         return usingTriggerVariables;
     };
-    // 중요 render
+    // 중요 render 처리 부분
     RawSet.prototype.render = function (obj, config) {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -234,6 +234,33 @@ var RawSet = /** @class */ (function () {
         }
         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 = "".concat(start_1, " ~ ").concat(rule.selectorText, ":not(").concat(start_1, " ~ ").concat(end_1, " ~ *)");
+                            // if (rule.selectorText.startsWith('.')) {
+                            //     rule.selectorText = `${start} ~ *:not(${start} ~ ${end} ~ *)${rule.selectorText}`;
+                            // } else {
+                            //     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);
         }
@@ -303,7 +330,7 @@ var RawSet = /** @class */ (function () {
         (_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling);
     };
     // 중요 important
-    RawSet.checkPointCreates = function (element, config) {
+    RawSet.checkPointCreates = function (element, obj, config) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         var thisVariableName = element.__domrender_this_variable_name;
         // console.log('checkPointCreates thisVariableName', thisVariableName);
@@ -530,7 +557,10 @@ var RawSet = /** @class */ (function () {
         var n = element.cloneNode(true);
         if (set) {
             var id = RandomUtils_1.RandomUtils.getRandomString(20);
-            n.innerHTML = RawSet.styleTransformLocal((_a = set.styles) !== null && _a !== void 0 ? _a : [], id, true, set.styleLocale) + ((_b = set.template) !== null && _b !== void 0 ? _b : '');
+            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;
             // dr-on-create onCreateRender
             var onCreate = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
             var renderScript = '';
@@ -685,8 +715,10 @@ var RawSet = /** @class */ (function () {
                         __render: render
                     }));
                 }
-                var innerHTML = RawSet.styleTransformLocal(styles, componentKey, true, styleLocale) + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
-                element.innerHTML = innerHTML;
+                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;
                 // console.log('------>', element.innerHTML, obj)
                 var data = RawSet.drThisCreate(element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
                 // 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
@@ -712,6 +744,7 @@ var RawSet = /** @class */ (function () {
         var reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]?[^{]*?)\}[$#]))/g;
         return StringUtils_1.StringUtils.regexExec(reg, data !== null && data !== void 0 ? data : '');
     };
+    // 중요 스타일 적용 부분
     RawSet.styleTransformLocal = function (styleBody, id, styleTagWrap, locale) {
         if (styleTagWrap === void 0) { styleTagWrap = true; }
         if (locale === void 0) { locale = false; }
@@ -733,10 +766,16 @@ var RawSet = /** @class */ (function () {
             });
         }
         if (styleTagWrap) {
-            styleBody = "<style id='".concat(id, "' domstyle>").concat(styleBody, "</style>");
+            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' />");
+    };
     RawSet.destroy = function (obj, parameter, config, destroyOptions) {
         var _a;
         if (destroyOptions === void 0) { destroyOptions = []; }