dom-render 1.0.91 → 1.0.92
Sign up to get free protection for your applications and to get access to all the features.
- package/DomRender.js +5 -1
- package/DomRenderProxy.d.ts +1 -1
- package/DomRenderProxy.js +121 -63
- package/README.MD +14 -2
- package/configs/TargetElement.d.ts +1 -1
- package/dist/bundle.js +1189 -835
- package/events/EventManager.js +1 -0
- package/operators/Dr.d.ts +1 -1
- package/operators/Dr.js +58 -17
- package/operators/DrAppender.d.ts +1 -1
- package/operators/DrAppender.js +61 -21
- package/operators/DrFor.d.ts +1 -1
- package/operators/DrFor.js +58 -17
- package/operators/DrForOf.d.ts +1 -1
- package/operators/DrForOf.js +61 -20
- package/operators/DrForm.d.ts +1 -1
- package/operators/DrForm.js +87 -46
- package/operators/DrIf.d.ts +1 -1
- package/operators/DrIf.js +62 -23
- package/operators/DrInnerHTML.d.ts +1 -1
- package/operators/DrInnerHTML.js +56 -15
- package/operators/DrInnerText.d.ts +1 -1
- package/operators/DrInnerText.js +54 -13
- package/operators/DrPre.d.ts +1 -1
- package/operators/DrPre.js +41 -1
- package/operators/DrRepeat.d.ts +1 -1
- package/operators/DrRepeat.js +58 -17
- package/operators/DrTargetAttr.d.ts +1 -1
- package/operators/DrTargetAttr.js +64 -23
- package/operators/DrTargetElement.d.ts +1 -1
- package/operators/DrTargetElement.js +78 -34
- package/operators/DrThis.d.ts +1 -1
- package/operators/DrThis.js +73 -23
- package/operators/OperatorExecuter.d.ts +3 -2
- package/operators/OperatorExecuter.js +60 -14
- package/operators/OperatorExecuterAttrRequire.d.ts +2 -2
- package/operators/OperatorExecuterAttrRequire.js +48 -24
- package/package.json +1 -1
- package/rawsets/RawSet.d.ts +3 -3
- package/rawsets/RawSet.js +458 -315
- package/routers/HashRouter.js +1 -1
- package/routers/PathRouter.js +1 -1
- package/routers/Router.d.ts +3 -0
- package/routers/Router.js +10 -0
package/DomRender.js
CHANGED
@@ -20,7 +20,7 @@ var DomRender = /** @class */ (function () {
|
|
20
20
|
function DomRender() {
|
21
21
|
}
|
22
22
|
DomRender.run = function (obj, target, oConfig) {
|
23
|
-
var _a, _b, _c;
|
23
|
+
var _a, _b, _c, _d;
|
24
24
|
var robj = obj;
|
25
25
|
if ('_DomRender_isProxy' in obj) {
|
26
26
|
if (target) {
|
@@ -47,6 +47,10 @@ var DomRender = /** @class */ (function () {
|
|
47
47
|
else if (config.routerType === 'hash') {
|
48
48
|
config.router = (_c = config.router) !== null && _c !== void 0 ? _c : new HashRouter_1.HashRouter(robj, config.window);
|
49
49
|
}
|
50
|
+
else { // default
|
51
|
+
config.routerType = 'hash';
|
52
|
+
config.router = (_d = config.router) !== null && _d !== void 0 ? _d : new HashRouter_1.HashRouter(robj, config.window);
|
53
|
+
}
|
50
54
|
domRender.run(robj);
|
51
55
|
return robj;
|
52
56
|
};
|
package/DomRenderProxy.d.ts
CHANGED
@@ -14,7 +14,7 @@ export declare class DomRenderProxy<T extends object> implements ProxyHandler<T>
|
|
14
14
|
run(objProxy: T): void;
|
15
15
|
initRender(target: Node): void;
|
16
16
|
getRawSets(): RawSet[];
|
17
|
-
render(raws?: RawSet[] | string, fullPathStr?: string): void
|
17
|
+
render(raws?: RawSet[] | string, fullPathStr?: string): Promise<void>;
|
18
18
|
root(paths: string[], value?: any, lastDoneExecute?: boolean): string[];
|
19
19
|
set(target: T, p: string | symbol, value: any, receiver: T): boolean;
|
20
20
|
get(target: T, p: string | symbol, receiver: any): any;
|
package/DomRenderProxy.js
CHANGED
@@ -1,4 +1,40 @@
|
|
1
1
|
"use strict";
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
9
|
+
});
|
10
|
+
};
|
11
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
12
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
13
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
14
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
15
|
+
function step(op) {
|
16
|
+
if (f) throw new TypeError("Generator is already executing.");
|
17
|
+
while (_) try {
|
18
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
19
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
20
|
+
switch (op[0]) {
|
21
|
+
case 0: case 1: t = op; break;
|
22
|
+
case 4: _.label++; return { value: op[1], done: false };
|
23
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
24
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
25
|
+
default:
|
26
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
27
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
28
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
29
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
30
|
+
if (t[2]) _.ops.pop();
|
31
|
+
_.trys.pop(); continue;
|
32
|
+
}
|
33
|
+
op = body.call(thisArg, _);
|
34
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
35
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
36
|
+
}
|
37
|
+
};
|
2
38
|
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
3
39
|
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
4
40
|
if (ar || !(i in from)) {
|
@@ -53,6 +89,7 @@ var DomRenderProxy = /** @class */ (function () {
|
|
53
89
|
// console.log('target-------->')
|
54
90
|
var filter = (_b = (_a = _this.config.proxyExcludeTyps) === null || _a === void 0 ? void 0 : _a.filter(function (it) { return target instanceof it; })) !== null && _b !== void 0 ? _b : [];
|
55
91
|
if (filter.length === 0) {
|
92
|
+
// console.log('--------', objProxy, target, it)
|
56
93
|
var proxyAfter = _this.proxy(objProxy, target, it);
|
57
94
|
obj[it] = proxyAfter;
|
58
95
|
}
|
@@ -118,67 +155,88 @@ var DomRenderProxy = /** @class */ (function () {
|
|
118
155
|
};
|
119
156
|
// 중요 important
|
120
157
|
DomRenderProxy.prototype.render = function (raws, fullPathStr) {
|
121
|
-
var
|
122
|
-
|
123
|
-
var iter
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
if (it.isConnected) {
|
137
|
-
// 중요 render될때 targetAttribute 체크 해야함.
|
138
|
-
var targetAttrMap = (_b = (_a = it.point.node) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, EventManager_1.EventManager.normalAttrMapAttrName);
|
139
|
-
if ((_c = it.detect) === null || _c === void 0 ? void 0 : _c.action) {
|
140
|
-
it.detect.action();
|
141
|
-
}
|
142
|
-
else if (it.type === RawSetType_1.RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && it.fragment.render) {
|
143
|
-
new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
|
144
|
-
// it?.data.onChangeAttrRender(k, null, v);
|
145
|
-
var isUsing = EventManager_1.EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));
|
146
|
-
if (isUsing) {
|
147
|
-
var render = it.fragment.render;
|
148
|
-
// console.log('render-->', (it.fragment as any).render)
|
149
|
-
var script = "".concat(render.renderScript, " return ").concat(v, " ");
|
150
|
-
var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign(_this._domRender_proxy, { __render: render }));
|
151
|
-
it.data.onChangeAttrRender(k, cval);
|
158
|
+
var _a, _b, _c;
|
159
|
+
return __awaiter(this, void 0, void 0, function () {
|
160
|
+
var iter, removeRawSets, rawSets, _loop_1, this_1, _i, rawSets_1, it_1;
|
161
|
+
var _this = this;
|
162
|
+
return __generator(this, function (_d) {
|
163
|
+
switch (_d.label) {
|
164
|
+
case 0:
|
165
|
+
if (typeof raws === 'string') {
|
166
|
+
iter = this._rawSets.get(raws);
|
167
|
+
if (iter) {
|
168
|
+
raws = Array.from(iter);
|
169
|
+
}
|
170
|
+
else {
|
171
|
+
raws = undefined;
|
172
|
+
}
|
152
173
|
}
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
174
|
+
removeRawSets = [];
|
175
|
+
rawSets = raws !== null && raws !== void 0 ? raws : this.getRawSets();
|
176
|
+
_loop_1 = function (it_1) {
|
177
|
+
var targetAttrMap, rawSets_2;
|
178
|
+
return __generator(this, function (_e) {
|
179
|
+
switch (_e.label) {
|
180
|
+
case 0:
|
181
|
+
it_1.getUsingTriggerVariables(this_1.config).forEach(function (path) { return _this.addRawSet(path, it_1); });
|
182
|
+
if (!it_1.isConnected) return [3 /*break*/, 5];
|
183
|
+
targetAttrMap = (_b = (_a = it_1.point.node) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, EventManager_1.EventManager.normalAttrMapAttrName);
|
184
|
+
if (!((_c = it_1.detect) === null || _c === void 0 ? void 0 : _c.action)) return [3 /*break*/, 1];
|
185
|
+
it_1.detect.action();
|
186
|
+
return [3 /*break*/, 4];
|
187
|
+
case 1:
|
188
|
+
if (!(it_1.type === RawSetType_1.RawSetType.TARGET_ELEMENT && it_1.data && fullPathStr && targetAttrMap && it_1.fragment.render)) return [3 /*break*/, 2];
|
189
|
+
new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
|
190
|
+
var _a;
|
191
|
+
// it?.data.onChangeAttrRender(k, null, v);
|
192
|
+
var isUsing = EventManager_1.EventManager.isUsingThisVar(v, "this.".concat(fullPathStr));
|
193
|
+
if (isUsing) {
|
194
|
+
var render = it_1.fragment.render;
|
195
|
+
// console.log('render-->', (it.fragment as any).render)
|
196
|
+
var script = "".concat(render.renderScript, " return ").concat(v, " ");
|
197
|
+
var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign((_a = _this._domRender_proxy) !== null && _a !== void 0 ? _a : {}, { __render: render }));
|
198
|
+
it_1.data.onChangeAttrRender(k, cval);
|
199
|
+
}
|
200
|
+
// console.log('---?', v, fullPathStr, isUsing);
|
201
|
+
});
|
202
|
+
return [3 /*break*/, 4];
|
203
|
+
case 2: return [4 /*yield*/, it_1.render(this_1._domRender_proxy, this_1.config)];
|
204
|
+
case 3:
|
205
|
+
rawSets_2 = _e.sent();
|
206
|
+
// 그외 자식들 render
|
207
|
+
if (rawSets_2 && rawSets_2.length > 0) {
|
208
|
+
this_1.render(rawSets_2);
|
209
|
+
}
|
210
|
+
_e.label = 4;
|
211
|
+
case 4: return [3 /*break*/, 6];
|
212
|
+
case 5:
|
213
|
+
removeRawSets.push(it_1);
|
214
|
+
_e.label = 6;
|
215
|
+
case 6: return [2 /*return*/];
|
216
|
+
}
|
217
|
+
});
|
218
|
+
};
|
219
|
+
this_1 = this;
|
220
|
+
_i = 0, rawSets_1 = rawSets;
|
221
|
+
_d.label = 1;
|
222
|
+
case 1:
|
223
|
+
if (!(_i < rawSets_1.length)) return [3 /*break*/, 4];
|
224
|
+
it_1 = rawSets_1[_i];
|
225
|
+
return [5 /*yield**/, _loop_1(it_1)];
|
226
|
+
case 2:
|
227
|
+
_d.sent();
|
228
|
+
_d.label = 3;
|
229
|
+
case 3:
|
230
|
+
_i++;
|
231
|
+
return [3 /*break*/, 1];
|
232
|
+
case 4:
|
233
|
+
if (removeRawSets.length > 0) {
|
234
|
+
this.removeRawSet.apply(this, removeRawSets);
|
235
|
+
}
|
236
|
+
return [2 /*return*/];
|
172
237
|
}
|
173
|
-
}
|
174
|
-
else {
|
175
|
-
removeRawSets.push(it);
|
176
|
-
// this.removeRawSet(it)
|
177
|
-
}
|
238
|
+
});
|
178
239
|
});
|
179
|
-
if (removeRawSets.length > 0) {
|
180
|
-
this.removeRawSet.apply(this, removeRawSets);
|
181
|
-
}
|
182
240
|
};
|
183
241
|
DomRenderProxy.prototype.root = function (paths, value, lastDoneExecute) {
|
184
242
|
var _this = this;
|
@@ -290,14 +348,14 @@ var DomRenderProxy = /** @class */ (function () {
|
|
290
348
|
// return (p in target) ? (target as any)[p].bind(target) : (target as any)[p]
|
291
349
|
// console.log('-->', p, Object.prototype.toString.call((target as any)[p]), (target as any)[p])
|
292
350
|
// return (target as any)[p]
|
293
|
-
var
|
294
|
-
if (
|
295
|
-
|
351
|
+
var it_2 = target[p];
|
352
|
+
if (it_2 && typeof it_2 === 'object' && ('_DomRender_isProxy' in it_2) && Object.prototype.toString.call(it_2._DomRender_origin) === '[object Date]') {
|
353
|
+
it_2 = it_2._DomRender_origin;
|
296
354
|
}
|
297
355
|
if (('onBeforeReturnGet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnGets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
|
298
|
-
(_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnGet) === null || _c === void 0 ? void 0 : _c.call(_b, p,
|
356
|
+
(_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnGet) === null || _c === void 0 ? void 0 : _c.call(_b, p, it_2, this.root([p], it_2, false));
|
299
357
|
}
|
300
|
-
return
|
358
|
+
return it_2;
|
301
359
|
}
|
302
360
|
};
|
303
361
|
DomRenderProxy.prototype.has = function (target, p) {
|
package/README.MD
CHANGED
@@ -633,7 +633,7 @@ const data = config.scripts.concat('head', 'tail')
|
|
633
633
|
---
|
634
634
|
# Component, Attribute, AttributeCallBack
|
635
635
|
# 😃 examples
|
636
|
-
- [examples](./examples/component_script_attr)
|
636
|
+
- [examples](./examples/component_script_attr) lazy load (html, css)
|
637
637
|
```html
|
638
638
|
<body id="app">
|
639
639
|
${this.name}$
|
@@ -677,7 +677,7 @@ link attribute
|
|
677
677
|
```
|
678
678
|
```typescript
|
679
679
|
config.targetElements = [
|
680
|
-
DomRender.createComponent({type: Profile, template: ProfileTemplate}),
|
680
|
+
DomRender.createComponent({type: Profile, template: ProfileTemplate}), // lazy loading format 'lazy://component/home.html'
|
681
681
|
DomRender.createComponent({type: Home, template: HomeTemplate, styles: HomeStyle})
|
682
682
|
]
|
683
683
|
|
@@ -724,6 +724,18 @@ using component
|
|
724
724
|
</home>
|
725
725
|
</home>
|
726
726
|
```
|
727
|
+
lazy loading rollup config
|
728
|
+
```javascript
|
729
|
+
copy({
|
730
|
+
targets: [
|
731
|
+
{
|
732
|
+
src: ['**/*.html', '**/*.css', '!node_modules/**/*.html', '!node_modules/**/*.css'], dest: 'dist',
|
733
|
+
rename: (name, extension, fullPath) => `${fullPath}`
|
734
|
+
},
|
735
|
+
{ src: 'assets', dest: 'dist' }
|
736
|
+
]
|
737
|
+
})
|
738
|
+
```
|
727
739
|
- attribute
|
728
740
|
- dr-on-create:callback: component created init callback script
|
729
741
|
- dr-on-create:arguments: component onCreatedRender arguments
|
@@ -7,7 +7,7 @@ export declare type TargetElement = {
|
|
7
7
|
name: string;
|
8
8
|
template?: string;
|
9
9
|
styles?: string[];
|
10
|
-
callBack: (target: Element, obj: any, rawSet: RawSet, attrs: Attrs, config: Config) => DocumentFragment
|
10
|
+
callBack: (target: Element, obj: any, rawSet: RawSet, attrs: Attrs, config: Config) => Promise<DocumentFragment>;
|
11
11
|
complete?: (target: Element, obj: any, rawSet: RawSet) => void;
|
12
12
|
__render?: Render;
|
13
13
|
__creatorMetaData?: CreatorMetaData;
|