dom-render 1.0.79 → 1.0.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DomRender.d.ts +5 -20
- package/DomRender.js +9 -36
- package/DomRenderProxy.js +1 -1
- package/README.MD +40 -31
- package/RawSet.d.ts +1 -1
- package/RawSet.js +1 -1
- package/dist/bundle.js +249 -269
- package/events/EventManager.js +34 -27
- package/operators/Dr.js +1 -1
- package/operators/DrAppender.js +1 -1
- package/operators/DrFor.js +1 -1
- package/operators/DrForOf.js +1 -1
- package/operators/DrForm.js +1 -1
- package/operators/DrIf.js +1 -1
- package/operators/DrInnerHTML.js +1 -1
- package/operators/DrInnerText.js +1 -1
- package/operators/DrRepeat.js +1 -1
- package/operators/DrTargetAttr.js +1 -1
- package/operators/DrTargetElement.js +1 -1
- package/operators/DrThis.js +1 -1
- package/package.json +1 -1
package/DomRender.d.ts
CHANGED
@@ -3,26 +3,11 @@ import { ConstructorType } from './types/Types';
|
|
3
3
|
import { RawSet } from './RawSet';
|
4
4
|
export declare class DomRender {
|
5
5
|
static run<T extends object>(obj: T, target?: Node, config?: Config): T;
|
6
|
-
static
|
6
|
+
static createComponent(param: {
|
7
7
|
type: ConstructorType<any>;
|
8
8
|
tagName?: string;
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
}): {
|
14
|
-
add: (source: {
|
15
|
-
type: ConstructorType<any>;
|
16
|
-
tagName?: string;
|
17
|
-
}, front: {
|
18
|
-
template: string;
|
19
|
-
styles?: string[];
|
20
|
-
}) => any;
|
21
|
-
};
|
22
|
-
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): {
|
23
|
-
add: (attrName: string, getThisObj: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => any, factory: (element: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment) => any;
|
24
|
-
};
|
25
|
-
static addAttributeCallBack(config: Config, attrName: string, callBack: (elements: Element, attrValue: string, obj: any) => void): {
|
26
|
-
add: (attrName: string, callBack: (elements: Element, attrValue: string, obj: any) => void) => any;
|
27
|
-
};
|
9
|
+
template?: string;
|
10
|
+
styles?: string[] | string;
|
11
|
+
}, config: Config): import("./Config").TargetElement;
|
12
|
+
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;
|
28
13
|
}
|
package/DomRender.js
CHANGED
@@ -46,44 +46,17 @@ var DomRender = /** @class */ (function () {
|
|
46
46
|
domRender.run(robj);
|
47
47
|
return robj;
|
48
48
|
};
|
49
|
-
DomRender.
|
50
|
-
var
|
51
|
-
var
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
config.targetElements = (_c = config.targetElements) !== null && _c !== void 0 ? _c : [];
|
57
|
-
config.targetElements.push(component);
|
58
|
-
return {
|
59
|
-
add: function (source, front) {
|
60
|
-
return DomRender.addComponent(config, source, front);
|
61
|
-
}
|
62
|
-
};
|
49
|
+
DomRender.createComponent = function (param, config) {
|
50
|
+
var _a, _b;
|
51
|
+
var component = RawSet_1.RawSet.createComponentTargetElement((_a = param.tagName) !== null && _a !== void 0 ? _a : param.type.name, function (e, o, r2, counstructorParam) {
|
52
|
+
var _a;
|
53
|
+
return new ((_a = param.type).bind.apply(_a, __spreadArray([void 0], counstructorParam, false)))();
|
54
|
+
}, (_b = param.template) !== null && _b !== void 0 ? _b : '', Array.isArray(param.styles) ? param.styles : (param.styles ? [param.styles] : undefined), false, config);
|
55
|
+
return component;
|
63
56
|
};
|
64
|
-
DomRender.
|
65
|
-
var _a;
|
57
|
+
DomRender.createAttribute = function (attrName, getThisObj, factory) {
|
66
58
|
var targetAttribute = RawSet_1.RawSet.createComponentTargetAttribute(attrName, getThisObj, factory);
|
67
|
-
|
68
|
-
config.targetAttrs.push(targetAttribute);
|
69
|
-
return {
|
70
|
-
add: function (attrName, getThisObj, factory) {
|
71
|
-
return DomRender.addAttribute(config, attrName, getThisObj, factory);
|
72
|
-
}
|
73
|
-
};
|
74
|
-
};
|
75
|
-
DomRender.addAttributeCallBack = function (config, attrName, callBack) {
|
76
|
-
var _a;
|
77
|
-
config.applyEvents = (_a = config.applyEvents) !== null && _a !== void 0 ? _a : [];
|
78
|
-
config.applyEvents.push({
|
79
|
-
attrName: attrName,
|
80
|
-
callBack: callBack
|
81
|
-
});
|
82
|
-
return {
|
83
|
-
add: function (attrName, callBack) {
|
84
|
-
return DomRender.addAttributeCallBack(config, attrName, callBack);
|
85
|
-
}
|
86
|
-
};
|
59
|
+
return targetAttribute;
|
87
60
|
};
|
88
61
|
return DomRender;
|
89
62
|
}());
|
package/DomRenderProxy.js
CHANGED
@@ -64,7 +64,7 @@ var DomRenderProxy = /** @class */ (function () {
|
|
64
64
|
(_d = (_c = this._domRender_proxy) === null || _c === void 0 ? void 0 : _c.onCreateRender) === null || _d === void 0 ? void 0 : _d.call(_c, createParam);
|
65
65
|
var innerHTML = (_e = target.innerHTML) !== null && _e !== void 0 ? _e : '';
|
66
66
|
this._targets.add(target);
|
67
|
-
var rawSets = RawSet_1.RawSet.checkPointCreates(target, this.config);
|
67
|
+
var rawSets = RawSet_1.RawSet.checkPointCreates(target, this._domRender_proxy, this.config);
|
68
68
|
// console.log('initRender -------rawSet', rawSets)
|
69
69
|
// 중요 초기에 한번 튕겨줘야함.
|
70
70
|
EventManager_1.eventManager.applyEvent(this._domRender_proxy, EventManager_1.eventManager.findAttrElements(target, this.config), this.config);
|
package/README.MD
CHANGED
@@ -364,11 +364,12 @@ validator
|
|
364
364
|
const config: Config = {
|
365
365
|
window
|
366
366
|
};
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
367
|
+
config.targetElements = [
|
368
|
+
DomRender.createComponent({type: Main, tagName: 'page-main', template: MainTemplate}, config),
|
369
|
+
DomRender.createComponent({type: Second, tagName: 'page-second', template: SecondTemplate}, config),
|
370
|
+
DomRender.createComponent({type: Detail, tagName: 'page-detail', template: DetailTemplate}, config)
|
371
|
+
]
|
372
|
+
config.routerType = 'hash'; // 'hash' | 'path' | 'none';
|
372
373
|
const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
|
373
374
|
```
|
374
375
|
```html
|
@@ -592,33 +593,41 @@ link attribute
|
|
592
593
|
</body>
|
593
594
|
```
|
594
595
|
```typescript
|
595
|
-
|
596
|
-
|
597
|
-
|
598
|
-
|
599
|
-
|
600
|
-
|
601
|
-
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
const
|
607
|
-
|
608
|
-
|
609
|
-
|
610
|
-
|
611
|
-
|
596
|
+
config.targetElements = [
|
597
|
+
DomRender.createComponent({type: Profile, template: ProfileTemplate}, config),
|
598
|
+
DomRender.createComponent({type: Home, template: HomeTemplate, styles: HomeStyle}, config)
|
599
|
+
]
|
600
|
+
|
601
|
+
config.targetAttrs = [
|
602
|
+
DomRender.createAttribute('link',
|
603
|
+
(element: Element, attrValue: string, obj: any, rawSet: RawSet) => {
|
604
|
+
return obj;
|
605
|
+
},
|
606
|
+
(element: Element, attrValue: string, obj: any, rawSet: RawSet) => {
|
607
|
+
const fag = window.document.createDocumentFragment();
|
608
|
+
if (attrValue) {
|
609
|
+
const n = element.cloneNode(true) as Element;
|
610
|
+
attrValue = ScriptUtils.eval(`return ${attrValue}`, obj)
|
611
|
+
n.addEventListener('click', () => {
|
612
|
+
location.href = attrValue;
|
613
|
+
});
|
614
|
+
fag.append(n);
|
615
|
+
}
|
616
|
+
return fag;
|
612
617
|
}
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
|
620
|
-
|
621
|
-
|
618
|
+
)
|
619
|
+
]
|
620
|
+
|
621
|
+
config.applyEvents = [
|
622
|
+
{
|
623
|
+
attrName: 'wow',
|
624
|
+
callBack: (e, a, o) => {
|
625
|
+
e.addEventListener('click', (event) => {
|
626
|
+
alert((event.target as any).value);
|
627
|
+
})
|
628
|
+
}
|
629
|
+
}
|
630
|
+
]
|
622
631
|
const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
|
623
632
|
```
|
624
633
|
using component
|
package/RawSet.d.ts
CHANGED
@@ -120,7 +120,7 @@ export declare class RawSet {
|
|
120
120
|
getAttributeAndDelete(element: Element, attr: string): string | null;
|
121
121
|
getDrAppendAttributeAndDelete(element: Element, obj: any): string | null;
|
122
122
|
replaceBody(genNode: Node): void;
|
123
|
-
static checkPointCreates(element: Node, config: Config): RawSet[];
|
123
|
+
static checkPointCreates(element: Node, obj: any, config: Config): RawSet[];
|
124
124
|
childAllRemove(): void;
|
125
125
|
static drItOtherEncoding(element: Element | DocumentFragment): string;
|
126
126
|
static drItOtherDecoding(element: Element | DocumentFragment, random: string): void;
|
package/RawSet.js
CHANGED
@@ -303,7 +303,7 @@ var RawSet = /** @class */ (function () {
|
|
303
303
|
(_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling);
|
304
304
|
};
|
305
305
|
// 중요 important
|
306
|
-
RawSet.checkPointCreates = function (element, config) {
|
306
|
+
RawSet.checkPointCreates = function (element, obj, config) {
|
307
307
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
308
308
|
var thisVariableName = element.__domrender_this_variable_name;
|
309
309
|
// console.log('checkPointCreates thisVariableName', thisVariableName);
|