dom-render 1.0.78 → 1.0.81

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,38 +643,53 @@ 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
 ```html
 <my-element dr-on-component-init="$component.say();"></my-element>
+
+<home value="${this.name}$" wow="${this.color}$">
+  ${#component#.homeName}$
+  <home value="${#component#.homeName}$" wow="${#component#.homeColor}$" dr-component-name="sub_component" dr-component-inner-html-name="innerHTML">
+    ${#sub_component#.homeName}$
+  </home>
+</home>
 ```
 - attribute
   - dr-on-component-init: component created init call script
@@ -631,6 +697,10 @@ using component
     - $element: element instance
     - $attribute: element attribute object
     - $innerHTML: element innerHTML string
+  - #component#: component instance
+  - #innerHTML#: element innerHTML
+  - dr-component-name: renaming component variable name (default: component)
+  - dr-inner-html-name: renaming innerHTML variable name (default: innerHTML)
 ---
 
 # License

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;

package/RawSet.js

@@ -303,7 +303,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);
@@ -596,7 +596,7 @@ var RawSet = /** @class */ (function () {
             styles: styles,
             template: template,
             callBack: function (element, obj, rawSet, attrs) {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e, _f;
                 // console.log('callback------->', element)
                 if (!obj.__domrender_components) {
                     obj.__domrender_components = {};
@@ -666,15 +666,17 @@ var RawSet = /** @class */ (function () {
                 (_d = instance === null || instance === void 0 ? void 0 : instance.onCreateRender) === null || _d === void 0 ? void 0 : _d.call.apply(_d, __spreadArray([instance], createParam, false));
                 var applayTemplate = element.innerHTML;
                 var innerHTMLThisRandom;
+                var componentName = (_e = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "component-name"))) !== null && _e !== void 0 ? _e : 'component';
+                var innerHTMLName = (_f = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "component-inner-html-name"))) !== null && _f !== void 0 ? _f : 'innerHTML';
                 if (applayTemplate) {
                     // if (rawSet.point.thisVariableName) {
                     // 넘어온 innerHTML에 this가 있으면 해당안되게 우선 치환.
                     innerHTMLThisRandom = RandomUtils_1.RandomUtils.uuid();
                     applayTemplate = applayTemplate.replace(/this\./g, innerHTMLThisRandom);
                     // }
-                    applayTemplate = applayTemplate.replace(/#component#/g, 'this');
+                    applayTemplate = applayTemplate.replace(RegExp("#".concat(componentName, "#"), 'g'), 'this');
                 }
-                applayTemplate = template.replace(/#innerHTML#/g, applayTemplate);
+                applayTemplate = template.replace(RegExp("#".concat(innerHTMLName, "#"), 'g'), applayTemplate);
                 // dr-on-component-init
                 var oninit = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-component-init")); // dr-on-component-init
                 if (oninit) {