dom-render 1.0.79 → 1.0.80

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);

package/README.MD

@@ -364,11 +364,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
@@ -592,33 +593,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;

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);