dom-render 1.0.84 → 1.0.87
Sign up to get free protection for your applications and to get access to all the features.
- package/DomRender.d.ts +5 -5
- package/DomRender.js +10 -5
- package/DomRenderProxy.d.ts +2 -2
- package/DomRenderProxy.js +2 -0
- package/README.MD +7 -7
- package/RawSet.d.ts +22 -11
- package/RawSet.js +129 -86
- package/configs/Config.d.ts +26 -0
- package/{Config.js → configs/Config.js} +0 -0
- package/configs/TargetAttr.d.ts +6 -0
- package/configs/TargetAttr.js +2 -0
- package/configs/TargetElement.d.ts +11 -0
- package/configs/TargetElement.js +2 -0
- package/dist/bundle.js +371 -321
- package/events/EventManager.d.ts +1 -1
- package/lifecycle/OnProxyDomRender.d.ts +1 -1
- package/messenger/Messenger.d.ts +1 -1
- package/operators/DrTargetElement.js +1 -1
- package/operators/DrThis.js +2 -2
- package/operators/OperatorRender.d.ts +1 -1
- package/package.json +1 -1
- package/Config.d.ts +0 -38
package/DomRender.d.ts
CHANGED
@@ -1,13 +1,13 @@
|
|
1
|
-
import { Config } from './Config';
|
1
|
+
import { Config } from './configs/Config';
|
2
2
|
import { ConstructorType } from './types/Types';
|
3
3
|
import { RawSet } from './RawSet';
|
4
4
|
export declare class DomRender {
|
5
|
-
static run<T extends object>(obj: T, target?: Node,
|
5
|
+
static run<T extends object>(obj: T, target?: Node | null, oConfig?: Omit<Config, 'window'>): T;
|
6
6
|
static createComponent(param: {
|
7
|
-
type: ConstructorType<any
|
7
|
+
type: ConstructorType<any> | any;
|
8
8
|
tagName?: string;
|
9
9
|
template?: string;
|
10
10
|
styles?: string[] | string;
|
11
|
-
}
|
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("./
|
11
|
+
}): import("./configs/TargetElement").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("./configs/TargetAttr").TargetAttr;
|
13
13
|
}
|
package/DomRender.js
CHANGED
@@ -19,7 +19,7 @@ var DefaultMessenger_1 = require("./messenger/DefaultMessenger");
|
|
19
19
|
var DomRender = /** @class */ (function () {
|
20
20
|
function DomRender() {
|
21
21
|
}
|
22
|
-
DomRender.run = function (obj, target,
|
22
|
+
DomRender.run = function (obj, target, oConfig) {
|
23
23
|
var _a, _b, _c;
|
24
24
|
var robj = obj;
|
25
25
|
if ('_DomRender_isProxy' in obj) {
|
@@ -29,9 +29,13 @@ var DomRender = /** @class */ (function () {
|
|
29
29
|
robj = obj;
|
30
30
|
return robj;
|
31
31
|
}
|
32
|
+
var config = oConfig;
|
32
33
|
if (!config) {
|
33
34
|
config = { window: window };
|
34
35
|
}
|
36
|
+
if (config && !config.window) {
|
37
|
+
config.window = window;
|
38
|
+
}
|
35
39
|
config.routerType = config.routerType || 'none';
|
36
40
|
config.messenger = Types_1.DomRenderFinalProxy.final((_a = config.messenger) !== null && _a !== void 0 ? _a : new DefaultMessenger_1.DefaultMessenger(config));
|
37
41
|
var domRender = new DomRenderProxy_1.DomRenderProxy(obj, target, config);
|
@@ -46,12 +50,13 @@ var DomRender = /** @class */ (function () {
|
|
46
50
|
domRender.run(robj);
|
47
51
|
return robj;
|
48
52
|
};
|
49
|
-
DomRender.createComponent = function (param
|
53
|
+
DomRender.createComponent = function (param) {
|
50
54
|
var _a, _b;
|
51
|
-
|
55
|
+
// console.log('===>', typeof param.type, param.type.name, param.type.constructor.name)
|
56
|
+
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) {
|
52
57
|
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)
|
58
|
+
return typeof param.type === 'function' ? new ((_a = param.type).bind.apply(_a, __spreadArray([void 0], counstructorParam, false)))() : param.type;
|
59
|
+
}, (_b = param.template) !== null && _b !== void 0 ? _b : '', Array.isArray(param.styles) ? param.styles : (param.styles ? [param.styles] : undefined));
|
55
60
|
return component;
|
56
61
|
};
|
57
62
|
DomRender.createAttribute = function (attrName, getThisObj, factory) {
|
package/DomRenderProxy.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { RawSet } from './RawSet';
|
2
|
-
import { Config } from './Config';
|
2
|
+
import { Config } from './configs/Config';
|
3
3
|
export declare class DomRenderProxy<T extends object> implements ProxyHandler<T> {
|
4
4
|
_domRender_origin: T;
|
5
5
|
config: Config;
|
@@ -7,7 +7,7 @@ export declare class DomRenderProxy<T extends object> implements ProxyHandler<T>
|
|
7
7
|
_rawSets: Map<string, Set<RawSet>>;
|
8
8
|
_domRender_proxy?: T;
|
9
9
|
_targets: Set<Node>;
|
10
|
-
constructor(_domRender_origin: T, target: Node | undefined, config: Config);
|
10
|
+
constructor(_domRender_origin: T, target: Node | null | undefined, config: Config);
|
11
11
|
static unFinal<T = any>(obj: T): T;
|
12
12
|
static final<T = any>(obj: T): T;
|
13
13
|
static isFinal<T = any>(obj: T): boolean;
|
package/DomRenderProxy.js
CHANGED
@@ -134,7 +134,9 @@ var DomRenderProxy = /** @class */ (function () {
|
|
134
134
|
// ------------------->
|
135
135
|
}
|
136
136
|
else {
|
137
|
+
// console.log('---rawSets->', it)
|
137
138
|
var rawSets = it.render(_this._domRender_proxy, _this.config);
|
139
|
+
// console.log('---rawSets->', rawSets)
|
138
140
|
// 대상 attribute 있으면
|
139
141
|
// const targetAttrs = (it.point.node as Element).getAttribute(EventManager.normalAttrMapAttrName);
|
140
142
|
// if (it?.data.onChangeAttrRender && it.type === RawSetType.TARGET_ELEMENT && targetAttrs) {
|
package/README.MD
CHANGED
@@ -7,7 +7,7 @@ DOM-RENDER
|
|
7
7
|
|
8
8
|
# 🚀 Quick start
|
9
9
|
```html
|
10
|
-
<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.86/dist/bundle.js"></script>
|
11
11
|
```
|
12
12
|
```html
|
13
13
|
<!DOCTYPE html>
|
@@ -18,7 +18,7 @@ DOM-RENDER
|
|
18
18
|
</head>
|
19
19
|
<body id="app">
|
20
20
|
${this.name}$
|
21
|
-
<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.
|
21
|
+
<script src="https://cdn.jsdelivr.net/npm/dom-render@1.0.86/dist/bundle.js"></script>
|
22
22
|
<script>
|
23
23
|
let data = {
|
24
24
|
name: 'my name is dom-render'
|
@@ -404,9 +404,9 @@ const config: Config = {
|
|
404
404
|
window
|
405
405
|
};
|
406
406
|
config.targetElements = [
|
407
|
-
DomRender.createComponent({type: Main, tagName: 'page-main', template: MainTemplate}
|
408
|
-
DomRender.createComponent({type: Second, tagName: 'page-second', template: SecondTemplate}
|
409
|
-
DomRender.createComponent({type: Detail, tagName: 'page-detail', template: DetailTemplate}
|
407
|
+
DomRender.createComponent({type: Main, tagName: 'page-main', template: MainTemplate}),
|
408
|
+
DomRender.createComponent({type: Second, tagName: 'page-second', template: SecondTemplate}),
|
409
|
+
DomRender.createComponent({type: Detail, tagName: 'page-detail', template: DetailTemplate})
|
410
410
|
]
|
411
411
|
config.routerType = 'hash'; // 'hash' | 'path' | 'none';
|
412
412
|
const data = DomRender.run(new Data(), document.querySelector('#app')!, config);
|
@@ -644,8 +644,8 @@ link attribute
|
|
644
644
|
```
|
645
645
|
```typescript
|
646
646
|
config.targetElements = [
|
647
|
-
DomRender.createComponent({type: Profile, template: ProfileTemplate}
|
648
|
-
DomRender.createComponent({type: Home, template: HomeTemplate, styles: HomeStyle}
|
647
|
+
DomRender.createComponent({type: Profile, template: ProfileTemplate}),
|
648
|
+
DomRender.createComponent({type: Home, template: HomeTemplate, styles: HomeStyle})
|
649
649
|
]
|
650
650
|
|
651
651
|
config.targetAttrs = [
|
package/RawSet.d.ts
CHANGED
@@ -1,5 +1,7 @@
|
|
1
|
-
import { Config
|
1
|
+
import { Config } from './configs/Config';
|
2
2
|
import { ComponentSet } from './components/ComponentSet';
|
3
|
+
import { TargetElement } from './configs/TargetElement';
|
4
|
+
import { TargetAttr } from './configs/TargetAttr';
|
3
5
|
export declare enum DestroyOptionType {
|
4
6
|
NO_DESTROY = "NO_DESTROY",
|
5
7
|
NO_MESSENGER_DESTROY = "NO_MESSENGER_DESTROY"
|
@@ -49,6 +51,7 @@ export declare type ElementInitCallBack = {
|
|
49
51
|
};
|
50
52
|
export declare enum RawSetType {
|
51
53
|
TEXT = "TEXT",
|
54
|
+
STYLE_TEXT = "STYLE_TEXT",
|
52
55
|
TARGET_ELEMENT = "TARGET_ELEMENT",
|
53
56
|
TARGET_ATTR = "TARGET_ATTR",
|
54
57
|
UNKOWN = "UNKOWN"
|
@@ -71,10 +74,11 @@ export declare class RawSet {
|
|
71
74
|
uuid: string;
|
72
75
|
type: RawSetType;
|
73
76
|
point: {
|
74
|
-
start: Comment;
|
77
|
+
start: Comment | Text | HTMLMetaElement;
|
75
78
|
node: Node;
|
76
|
-
end: Comment;
|
79
|
+
end: Comment | Text | HTMLMetaElement;
|
77
80
|
thisVariableName?: string | null;
|
81
|
+
parent?: Node | null;
|
78
82
|
};
|
79
83
|
fragment: DocumentFragment;
|
80
84
|
detect?: {
|
@@ -105,23 +109,33 @@ export declare class RawSet {
|
|
105
109
|
static readonly DR_TAGS: never[];
|
106
110
|
static readonly DR_ATTRIBUTES: string[];
|
107
111
|
constructor(uuid: string, type: RawSetType, point: {
|
108
|
-
start: Comment;
|
112
|
+
start: Comment | Text | HTMLMetaElement;
|
109
113
|
node: Node;
|
110
|
-
end: Comment;
|
114
|
+
end: Comment | Text | HTMLMetaElement;
|
111
115
|
thisVariableName?: string | null;
|
116
|
+
parent?: Node | null;
|
112
117
|
}, fragment: DocumentFragment, detect?: {
|
113
118
|
action: Function;
|
114
119
|
} | undefined, data?: any);
|
115
120
|
get isConnected(): boolean;
|
116
121
|
getUsingTriggerVariables(config?: Config): Set<string>;
|
117
122
|
render(obj: any, config: Config): RawSet[];
|
118
|
-
|
123
|
+
static generateStyleSheetsLocal(): void;
|
124
|
+
static generateCSS(id: string, cssRule: CSSRule): void;
|
125
|
+
static generateStyleTransform(styleBody: string | string[], id: string, styleTagWrap?: boolean): string;
|
119
126
|
applyEvent(obj: any, fragment?: DocumentFragment, config?: Config): void;
|
120
127
|
getAttribute(element: Element, attr: string): string | null;
|
121
128
|
getAttributeAndDelete(element: Element, attr: string): string | null;
|
122
129
|
getDrAppendAttributeAndDelete(element: Element, obj: any): string | null;
|
123
130
|
replaceBody(genNode: Node): void;
|
124
131
|
static checkPointCreates(element: Node, obj: any, config: Config): RawSet[];
|
132
|
+
static createStartEndPoint(id: string, type: RawSetType, config: Config): {
|
133
|
+
start: HTMLMetaElement;
|
134
|
+
end: HTMLMetaElement;
|
135
|
+
} | {
|
136
|
+
start: Comment;
|
137
|
+
end: Comment;
|
138
|
+
};
|
125
139
|
childAllRemove(): void;
|
126
140
|
static drItOtherEncoding(element: Element | DocumentFragment): string;
|
127
141
|
static drItOtherDecoding(element: Element | DocumentFragment, random: string): void;
|
@@ -140,13 +154,10 @@ export declare class RawSet {
|
|
140
154
|
regex: RegExp;
|
141
155
|
random: string;
|
142
156
|
}[]): void;
|
143
|
-
static drThisCreate(element: Element, drThis: string, drVarOption: string, drStripOption: boolean | string | null, obj: any, config: Config, set?: ComponentSet): DocumentFragment;
|
157
|
+
static drThisCreate(rawSet: RawSet, element: Element, drThis: string, drVarOption: string, drStripOption: boolean | string | null, obj: any, config: Config, set?: ComponentSet): DocumentFragment;
|
144
158
|
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;
|
145
|
-
static createComponentTargetElement(name: string, objFactory: (element: Element, obj: any, rawSet: RawSet, counstructorParam: any[]) => any, template
|
159
|
+
static createComponentTargetElement(name: string, objFactory: (element: Element, obj: any, rawSet: RawSet, counstructorParam: any[]) => any, template?: string, styles?: string[]): TargetElement;
|
146
160
|
static isExporesion(data: string | null): boolean;
|
147
161
|
static exporesionGrouops(data: string | null): RegExpExecArray[];
|
148
|
-
static styleTransformLocal(styleBody: string | string[], id: string, styleTagWrap?: boolean, locale?: boolean): string;
|
149
|
-
static metaStart(id: string): string;
|
150
|
-
static metaEnd(id: string): string;
|
151
162
|
static destroy(obj: any | undefined, parameter: any[], config: Config, destroyOptions?: (DestroyOptionType | string)[]): void;
|
152
163
|
}
|
package/RawSet.js
CHANGED
@@ -50,6 +50,7 @@ var DestroyOptionType;
|
|
50
50
|
var RawSetType;
|
51
51
|
(function (RawSetType) {
|
52
52
|
RawSetType["TEXT"] = "TEXT";
|
53
|
+
RawSetType["STYLE_TEXT"] = "STYLE_TEXT";
|
53
54
|
RawSetType["TARGET_ELEMENT"] = "TARGET_ELEMENT";
|
54
55
|
RawSetType["TARGET_ATTR"] = "TARGET_ATTR";
|
55
56
|
RawSetType["UNKOWN"] = "UNKOWN";
|
@@ -146,21 +147,28 @@ var RawSet = /** @class */ (function () {
|
|
146
147
|
});
|
147
148
|
var fag = config.window.document.createDocumentFragment();
|
148
149
|
if (cNode.nodeType === Node.TEXT_NODE && cNode.textContent) {
|
150
|
+
// console.log('text-->', this, obj, config)
|
151
|
+
// console.log('text-->', Array.from(this.fragment.childNodes))
|
149
152
|
var textContent = cNode.textContent;
|
150
153
|
var runText = RawSet.exporesionGrouops(textContent)[0][1];
|
151
154
|
// console.log('--->', RawSet.exporesionGrouops(textContent), textContent,runText, runText[0][1])
|
152
|
-
var
|
155
|
+
var newNode = void 0;
|
153
156
|
if (textContent === null || textContent === void 0 ? void 0 : textContent.startsWith('#')) {
|
154
157
|
var r = ScriptUtils_1.ScriptUtils.eval("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
|
155
158
|
var template = config.window.document.createElement('template');
|
156
159
|
template.innerHTML = r;
|
157
|
-
|
160
|
+
newNode = template.content;
|
158
161
|
}
|
159
162
|
else {
|
160
163
|
var r = ScriptUtils_1.ScriptUtils.eval("".concat(__render.bindScript, " return ").concat(runText), Object.assign(obj, { __render: __render }));
|
161
|
-
|
164
|
+
newNode = config.window.document.createTextNode(r);
|
165
|
+
}
|
166
|
+
(_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newNode, cNode);
|
167
|
+
// console.log('-------', this.point.start.parentNode.nodeName)
|
168
|
+
// 중요 style value change 됐을때 다시 처리해야되기떄문에: 마지막에 completed 없는 attr 가지고 판단 하니깐
|
169
|
+
if (this.type === RawSetType.STYLE_TEXT && this.point.parent) {
|
170
|
+
this.point.parent.removeAttribute('completed');
|
162
171
|
}
|
163
|
-
(_a = cNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(n, cNode);
|
164
172
|
}
|
165
173
|
else if (cNode.nodeType === Node.ELEMENT_NODE) {
|
166
174
|
var element = cNode;
|
@@ -215,7 +223,7 @@ var RawSet = /** @class */ (function () {
|
|
215
223
|
}
|
216
224
|
}
|
217
225
|
this.applyEvent(obj, genNode, config);
|
218
|
-
this.replaceBody(genNode);
|
226
|
+
this.replaceBody(genNode); // 중요 여기서 마지막에 연션된 값을 그려준다.
|
219
227
|
drAttrs.forEach(function (it) {
|
220
228
|
if (it.drCompleteOption) {
|
221
229
|
// genNode.childNodes
|
@@ -228,25 +236,16 @@ var RawSet = /** @class */ (function () {
|
|
228
236
|
}));
|
229
237
|
}
|
230
238
|
});
|
239
|
+
// 중요 style isolation 나중에 :scope로 대체 가능할듯.
|
240
|
+
RawSet.generateStyleSheetsLocal();
|
241
|
+
// console.log('-22222-')
|
242
|
+
// alert(1);
|
231
243
|
for (var _p = 0, onThisComponentSetCallBacks_1 = onThisComponentSetCallBacks; _p < onThisComponentSetCallBacks_1.length; _p++) {
|
232
244
|
var it_1 = onThisComponentSetCallBacks_1[_p];
|
233
245
|
(_c = (_b = it_1.obj).onInitRender) === null || _c === void 0 ? void 0 : _c.call(_b);
|
234
246
|
}
|
235
247
|
for (var _q = 0, onElementInitCallBacks_1 = onElementInitCallBacks; _q < onElementInitCallBacks_1.length; _q++) {
|
236
248
|
var it_2 = onElementInitCallBacks_1[_q];
|
237
|
-
// 중요 style isolation 나중에 :scope로 대체 가능할듯.
|
238
|
-
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) {
|
239
|
-
var _a;
|
240
|
-
var styleElement = it.ownerNode;
|
241
|
-
var id = (_a = styleElement.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-')[0];
|
242
|
-
if (id) {
|
243
|
-
// console.log('------->', id)
|
244
|
-
Array.from(it.cssRules).forEach(function (it) {
|
245
|
-
_this.generateCSS(id, it);
|
246
|
-
});
|
247
|
-
}
|
248
|
-
it.ownerNode.setAttribute('completed', 'true');
|
249
|
-
});
|
250
249
|
(_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 }));
|
251
250
|
(_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);
|
252
251
|
}
|
@@ -273,7 +272,23 @@ var RawSet = /** @class */ (function () {
|
|
273
272
|
}
|
274
273
|
return raws;
|
275
274
|
};
|
276
|
-
RawSet.
|
275
|
+
RawSet.generateStyleSheetsLocal = function () {
|
276
|
+
Array.from(window.document.styleSheets).filter(function (it) { return it.ownerNode && it.ownerNode instanceof Element && it.ownerNode.hasAttribute('domstyle') && it.ownerNode.getAttribute('id') && !it.ownerNode.getAttribute('completed'); }).forEach(function (it) {
|
277
|
+
var _a;
|
278
|
+
var styleElement = it.ownerNode;
|
279
|
+
var split = (_a = styleElement.getAttribute('id')) === null || _a === void 0 ? void 0 : _a.split('-');
|
280
|
+
split === null || split === void 0 ? void 0 : split.pop();
|
281
|
+
var id = split === null || split === void 0 ? void 0 : split.join('-');
|
282
|
+
if (id) {
|
283
|
+
// console.log('------->', id)
|
284
|
+
Array.from(it.cssRules).forEach(function (it) {
|
285
|
+
RawSet.generateCSS(id, it);
|
286
|
+
});
|
287
|
+
}
|
288
|
+
it.ownerNode.setAttribute('completed', 'true');
|
289
|
+
});
|
290
|
+
};
|
291
|
+
RawSet.generateCSS = function (id, cssRule) {
|
277
292
|
var _this = this;
|
278
293
|
var start = "#".concat(id, "-start");
|
279
294
|
var end = "#".concat(id, "-end");
|
@@ -306,6 +321,17 @@ var RawSet = /** @class */ (function () {
|
|
306
321
|
});
|
307
322
|
}
|
308
323
|
};
|
324
|
+
// 중요 스타일 적용 부분
|
325
|
+
RawSet.generateStyleTransform = function (styleBody, id, styleTagWrap) {
|
326
|
+
if (styleTagWrap === void 0) { styleTagWrap = true; }
|
327
|
+
if (Array.isArray(styleBody)) {
|
328
|
+
styleBody = styleBody.join('\n');
|
329
|
+
}
|
330
|
+
if (styleTagWrap) {
|
331
|
+
styleBody = "<style id='".concat(id, "-style' domstyle>").concat(styleBody, "</style>");
|
332
|
+
}
|
333
|
+
return styleBody;
|
334
|
+
};
|
309
335
|
RawSet.prototype.applyEvent = function (obj, fragment, config) {
|
310
336
|
if (fragment === void 0) { fragment = this.fragment; }
|
311
337
|
EventManager_1.eventManager.applyEvent(obj, EventManager_1.eventManager.findAttrElements(fragment, config), config);
|
@@ -346,17 +372,19 @@ var RawSet = /** @class */ (function () {
|
|
346
372
|
RawSet.prototype.replaceBody = function (genNode) {
|
347
373
|
var _a;
|
348
374
|
this.childAllRemove();
|
349
|
-
(_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling);
|
375
|
+
(_a = this.point.start.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(genNode, this.point.start.nextSibling); // 중요 start checkpoint 다음인 end checkpoint 앞에 넣는다. 즉 중간 껴넣기 (나중에 meta tag로 변경을 해도될듯하긴한데..)
|
350
376
|
};
|
351
377
|
// 중요 important
|
352
378
|
RawSet.checkPointCreates = function (element, obj, config) {
|
353
379
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
380
|
+
// console.log('start==========')
|
354
381
|
var thisVariableName = element.__domrender_this_variable_name;
|
355
382
|
// console.log('checkPointCreates thisVariableName', thisVariableName);
|
356
383
|
var nodeIterator = config.window.document.createNodeIterator(element, NodeFilter.SHOW_ALL, {
|
357
384
|
acceptNode: function (node) {
|
358
385
|
var _a, _b, _c, _d, _e;
|
359
386
|
if (node.nodeType === Node.TEXT_NODE) {
|
387
|
+
// console.log('text--->', node.textContent)
|
360
388
|
// console.log('????????', node.parentElement, node.parentElement?.getAttribute('dr-pre'));
|
361
389
|
// console.log('???????/',node.textContent, node.parentElement?.getAttribute('dr-pre'))
|
362
390
|
// TODO: 나중에
|
@@ -401,49 +429,60 @@ var RawSet = /** @class */ (function () {
|
|
401
429
|
// const a = StringUtils.regexExec(/[$#]\{.*?\}/g, text);
|
402
430
|
// const a = StringUtils.betweenRegexpStr('[$#]\\{', '\\}', text); // <--TODO: 나중에..
|
403
431
|
var groups = RawSet.exporesionGrouops(text);
|
404
|
-
var map = groups.map(function (it) { return ({ uuid: RandomUtils_1.RandomUtils.
|
432
|
+
var map = groups.map(function (it) { return ({ uuid: RandomUtils_1.RandomUtils.getRandomString(40), content: it[0], regexArr: it }); });
|
405
433
|
var lasterIndex = 0;
|
406
434
|
for (var i = 0; i < map.length; i++) {
|
407
435
|
var it_4 = map[i];
|
408
436
|
var regexArr = it_4.regexArr;
|
409
437
|
var preparedText = regexArr.input.substring(lasterIndex, regexArr.index);
|
410
|
-
|
411
|
-
|
438
|
+
// const start = config.window.document.createElement('meta');
|
439
|
+
// start.setAttribute('id', `${it.uuid}-start`);
|
440
|
+
// const end = config.window.document.createElement('meta');
|
441
|
+
// end.setAttribute('id', `${it.uuid}-end`);
|
442
|
+
var type = void 0;
|
443
|
+
if (currentNode.parentNode && currentNode.parentNode.nodeName.toUpperCase() === 'STYLE') {
|
444
|
+
type = RawSetType.STYLE_TEXT;
|
445
|
+
}
|
446
|
+
else {
|
447
|
+
type = RawSetType.TEXT;
|
448
|
+
}
|
449
|
+
var startEndPoint = RawSet.createStartEndPoint(it_4.uuid, type, config);
|
412
450
|
// layout setting
|
413
|
-
template.content.append(document.createTextNode(preparedText)); //
|
414
|
-
template.content.append(start);
|
415
|
-
template.content.append(end);
|
416
|
-
// content
|
451
|
+
template.content.append(document.createTextNode(preparedText)); // 앞 부분 넣고
|
452
|
+
template.content.append(startEndPoint.start); // add start checkpoint
|
453
|
+
template.content.append(startEndPoint.end); // add end checkpoint
|
454
|
+
// content 안쪽 RawSet render 할때 start 와 end 사이에 fragment 연산해서 들어간다.
|
417
455
|
var fragment = config.window.document.createDocumentFragment();
|
418
456
|
fragment.append(config.window.document.createTextNode(it_4.content));
|
419
|
-
pars.push(new RawSet(it_4.uuid,
|
420
|
-
start: start,
|
457
|
+
pars.push(new RawSet(it_4.uuid, type, {
|
458
|
+
start: startEndPoint.start,
|
421
459
|
node: currentNode,
|
422
|
-
end: end,
|
460
|
+
end: startEndPoint.end,
|
461
|
+
parent: currentNode.parentNode,
|
423
462
|
thisVariableName: thisVariableName
|
424
463
|
}, fragment));
|
425
464
|
lasterIndex = regexArr.index + it_4.content.length;
|
426
465
|
}
|
427
466
|
template.content.append(config.window.document.createTextNode(text.substring(lasterIndex, text.length)));
|
428
|
-
(_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template.content, currentNode);
|
467
|
+
(_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(template.content, currentNode); // <-- 여기서 text를 fragment로 replace했기때문에 추적 변경이 가능하다.
|
429
468
|
}
|
430
469
|
else if (currentNode.nodeType === Node.ELEMENT_NODE) {
|
431
|
-
var uuid = RandomUtils_1.RandomUtils.
|
470
|
+
var uuid = RandomUtils_1.RandomUtils.getRandomString(40);
|
432
471
|
var element_3 = currentNode;
|
433
472
|
var fragment = config.window.document.createDocumentFragment();
|
434
|
-
var
|
435
|
-
var
|
436
|
-
// console.log('start--', uuid)
|
473
|
+
var type = RawSetType.TARGET_ELEMENT;
|
474
|
+
var startEndPoint = RawSet.createStartEndPoint(uuid, type, config);
|
437
475
|
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());
|
438
476
|
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);
|
439
477
|
var isAttr = element_3.getAttributeNames().filter(function (it) { return targetAttrNames_2.includes(it.toLowerCase()); }).length > 0;
|
440
|
-
(_g = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _g === void 0 ? void 0 : _g.insertBefore(start, currentNode);
|
441
|
-
(_h = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _h === void 0 ? void 0 : _h.insertBefore(end, currentNode.nextSibling);
|
478
|
+
(_g = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _g === void 0 ? void 0 : _g.insertBefore(startEndPoint.start, currentNode);
|
479
|
+
(_h = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _h === void 0 ? void 0 : _h.insertBefore(startEndPoint.end, currentNode.nextSibling);
|
442
480
|
fragment.append(currentNode);
|
443
|
-
pars.push(new RawSet(uuid, isElement ?
|
444
|
-
start: start,
|
481
|
+
pars.push(new RawSet(uuid, isElement ? type : (isAttr ? RawSetType.TARGET_ATTR : RawSetType.UNKOWN), {
|
482
|
+
start: startEndPoint.start,
|
445
483
|
node: currentNode,
|
446
|
-
end: end,
|
484
|
+
end: startEndPoint.end,
|
485
|
+
parent: currentNode.parentNode,
|
447
486
|
thisVariableName: thisVariableName
|
448
487
|
}, fragment));
|
449
488
|
}
|
@@ -455,6 +494,30 @@ var RawSet = /** @class */ (function () {
|
|
455
494
|
// console.log('check-->', pars)
|
456
495
|
return pars;
|
457
496
|
};
|
497
|
+
RawSet.createStartEndPoint = function (id, type, config) {
|
498
|
+
if (type === RawSetType.TARGET_ELEMENT) {
|
499
|
+
var start = config.window.document.createElement('meta');
|
500
|
+
var end = config.window.document.createElement('meta');
|
501
|
+
start.setAttribute('id', "".concat(id, "-start"));
|
502
|
+
end.setAttribute('id', "".concat(id, "-end"));
|
503
|
+
return {
|
504
|
+
start: start,
|
505
|
+
end: end,
|
506
|
+
};
|
507
|
+
}
|
508
|
+
else if (type === RawSetType.STYLE_TEXT) {
|
509
|
+
return {
|
510
|
+
start: config.window.document.createTextNode("/*start text ".concat(id, "*/")),
|
511
|
+
end: config.window.document.createTextNode("/*end text ".concat(id, "*/"))
|
512
|
+
};
|
513
|
+
}
|
514
|
+
else { // text
|
515
|
+
return {
|
516
|
+
start: config.window.document.createComment("start text ".concat(id)),
|
517
|
+
end: config.window.document.createComment("end text ".concat(id))
|
518
|
+
};
|
519
|
+
}
|
520
|
+
};
|
458
521
|
RawSet.prototype.childAllRemove = function () {
|
459
522
|
var next = this.point.start.nextSibling;
|
460
523
|
while (next) {
|
@@ -570,16 +633,18 @@ var RawSet = /** @class */ (function () {
|
|
570
633
|
});
|
571
634
|
});
|
572
635
|
};
|
573
|
-
RawSet.drThisCreate = function (element, drThis, drVarOption, drStripOption, obj, config, set) {
|
636
|
+
RawSet.drThisCreate = function (rawSet, element, drThis, drVarOption, drStripOption, obj, config, set) {
|
574
637
|
var _a, _b, _c, _d;
|
575
638
|
var fag = config.window.document.createDocumentFragment();
|
576
639
|
var n = element.cloneNode(true);
|
640
|
+
// console.log('--------',n, n.innerHTML)
|
577
641
|
if (set) {
|
578
|
-
|
579
|
-
var style = RawSet.
|
580
|
-
|
581
|
-
|
582
|
-
|
642
|
+
// const id = RandomUtils.getRandomString(20);
|
643
|
+
var style = RawSet.generateStyleTransform((_a = set.styles) !== null && _a !== void 0 ? _a : [], rawSet.uuid, true);
|
644
|
+
n.innerHTML = style + ((_b = set.template) !== null && _b !== void 0 ? _b : '');
|
645
|
+
// const metaStart = RawSet.metaStart(id);
|
646
|
+
// const metaEnd = RawSet.metaEnd(id);
|
647
|
+
// n.innerHTML = metaStart + style + (set.template ?? '') + metaEnd;
|
583
648
|
// dr-on-create onCreateRender
|
584
649
|
var onCreate = element.getAttribute("".concat(EventManager_1.EventManager.attrPrefix, "on-create"));
|
585
650
|
var renderScript = '';
|
@@ -607,6 +672,7 @@ var RawSet = /** @class */ (function () {
|
|
607
672
|
this.drVarDecoding(n, vars);
|
608
673
|
this.drThisDecoding(n, thisRandom);
|
609
674
|
if (drStripOption && (drStripOption === true || drStripOption === 'true')) {
|
675
|
+
// console.log('------childNodes', Array.from(n.childNodes))
|
610
676
|
Array.from(n.childNodes).forEach(function (it) { return fag.append(it); });
|
611
677
|
}
|
612
678
|
else {
|
@@ -637,21 +703,22 @@ var RawSet = /** @class */ (function () {
|
|
637
703
|
};
|
638
704
|
return targetAttribute;
|
639
705
|
};
|
640
|
-
RawSet.createComponentTargetElement = function (name, objFactory, template, styles
|
706
|
+
RawSet.createComponentTargetElement = function (name, objFactory, template, styles) {
|
641
707
|
if (template === void 0) { template = ''; }
|
642
708
|
if (styles === void 0) { styles = []; }
|
643
709
|
var targetElement = {
|
644
710
|
name: name,
|
645
711
|
styles: styles,
|
646
712
|
template: template,
|
647
|
-
callBack: function (element, obj, rawSet, attrs) {
|
713
|
+
callBack: function (element, obj, rawSet, attrs, config) {
|
648
714
|
var _a, _b, _c, _d, _e, _f;
|
649
715
|
// console.log('callback------->', element)
|
650
716
|
if (!obj.__domrender_components) {
|
651
717
|
obj.__domrender_components = {};
|
652
718
|
}
|
653
719
|
var domrenderComponents = obj.__domrender_components;
|
654
|
-
|
720
|
+
// const componentKey = '_' + RandomUtils.getRandomString(20);
|
721
|
+
var componentKey = rawSet.uuid;
|
655
722
|
var attribute = DomUtils_1.DomUtils.getAttributeToObject(element);
|
656
723
|
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;';
|
657
724
|
var render = Object.freeze({
|
@@ -734,12 +801,13 @@ var RawSet = /** @class */ (function () {
|
|
734
801
|
__render: render
|
735
802
|
}));
|
736
803
|
}
|
737
|
-
var style = RawSet.
|
738
|
-
|
739
|
-
|
740
|
-
|
804
|
+
var style = RawSet.generateStyleTransform(styles, componentKey, true);
|
805
|
+
element.innerHTML = style + (applayTemplate !== null && applayTemplate !== void 0 ? applayTemplate : '');
|
806
|
+
// const metaStart = RawSet.metaStart(componentKey);
|
807
|
+
// const metaEnd = RawSet.metaEnd(componentKey);
|
808
|
+
// element.innerHTML = metaStart + style + (applayTemplate ?? '') + metaEnd;
|
741
809
|
// console.log('------>', element.innerHTML, obj)
|
742
|
-
var data = RawSet.drThisCreate(element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
|
810
|
+
var data = RawSet.drThisCreate(rawSet, element, "this.__domrender_components.".concat(componentKey), '', true, obj, config);
|
743
811
|
// 넘어온 innerHTML에 this가 있는걸 다시 복호화해서 제대로 작동하도록한다.
|
744
812
|
if (innerHTMLThisRandom) {
|
745
813
|
var template_1 = config.window.document.createElement('template');
|
@@ -763,38 +831,13 @@ var RawSet = /** @class */ (function () {
|
|
763
831
|
var reg = /(?:[$#]\{(?:(([$#]\{)??[^$#]?[^{]*?)\}[$#]))/g;
|
764
832
|
return StringUtils_1.StringUtils.regexExec(reg, data !== null && data !== void 0 ? data : '');
|
765
833
|
};
|
766
|
-
//
|
767
|
-
|
768
|
-
|
769
|
-
|
770
|
-
|
771
|
-
|
772
|
-
|
773
|
-
// color: blue;
|
774
|
-
// }
|
775
|
-
// </style>
|
776
|
-
if (Array.isArray(styleBody)) {
|
777
|
-
styleBody = styleBody.join('\n');
|
778
|
-
}
|
779
|
-
if (locale) {
|
780
|
-
styleBody = styleBody.replace(/([^}]+){/gm, function (a, b) {
|
781
|
-
if (typeof b === 'string') {
|
782
|
-
b = b.trim();
|
783
|
-
}
|
784
|
-
return "#".concat(id, " ~ ").concat(b, ":not(#").concat(id, " ~ style[domstyle] ~ *), #").concat(id, " ~ * ").concat(b, " {");
|
785
|
-
});
|
786
|
-
}
|
787
|
-
if (styleTagWrap) {
|
788
|
-
styleBody = "<style id='".concat(id, "-style' domstyle>").concat(styleBody, "</style>");
|
789
|
-
}
|
790
|
-
return styleBody;
|
791
|
-
};
|
792
|
-
RawSet.metaStart = function (id) {
|
793
|
-
return "<meta id='".concat(id, "-start' />");
|
794
|
-
};
|
795
|
-
RawSet.metaEnd = function (id) {
|
796
|
-
return "<meta id='".concat(id, "-end' />");
|
797
|
-
};
|
834
|
+
// public static metaStart(id: string) {
|
835
|
+
// return `<meta id='${id}-start' />`;
|
836
|
+
// }
|
837
|
+
//
|
838
|
+
// public static metaEnd(id: string) {
|
839
|
+
// return `<meta id='${id}-end' />`;
|
840
|
+
// }
|
798
841
|
RawSet.destroy = function (obj, parameter, config, destroyOptions) {
|
799
842
|
var _a;
|
800
843
|
if (destroyOptions === void 0) { destroyOptions = []; }
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import { ConstructorType } from '../types/Types';
|
2
|
+
import { RawSet } from '../RawSet';
|
3
|
+
import { Router } from '../routers/Router';
|
4
|
+
import { Messenger } from '../messenger/Messenger';
|
5
|
+
import { TargetElement } from './TargetElement';
|
6
|
+
import { TargetAttr } from './TargetAttr';
|
7
|
+
export declare type Config = {
|
8
|
+
window: Window;
|
9
|
+
targetElements?: TargetElement[];
|
10
|
+
targetAttrs?: TargetAttr[];
|
11
|
+
onElementInit?: (name: string, obj: any, rawSet: RawSet, targetElement: TargetElement) => any;
|
12
|
+
onAttrInit?: (name: string, attrValue: string, obj: any, rawSet: RawSet) => any;
|
13
|
+
proxyExcludeTyps?: ConstructorType<any>[];
|
14
|
+
proxyExcludeOnBeforeReturnSets?: string[];
|
15
|
+
proxyExcludeOnBeforeReturnGets?: string[];
|
16
|
+
scripts?: {
|
17
|
+
[n: string]: any;
|
18
|
+
};
|
19
|
+
routerType?: 'hash' | 'path' | 'none';
|
20
|
+
router?: Router;
|
21
|
+
messenger?: Messenger;
|
22
|
+
applyEvents?: {
|
23
|
+
attrName: string;
|
24
|
+
callBack: (elements: Element, attrValue: string, obj: any) => void;
|
25
|
+
}[];
|
26
|
+
};
|
File without changes
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import { RawSet } from '../RawSet';
|
2
|
+
export declare type TargetAttr = {
|
3
|
+
name: string;
|
4
|
+
callBack: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment;
|
5
|
+
complete?: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => void;
|
6
|
+
};
|