dom-render 1.0.95 → 1.0.97
Sign up to get free protection for your applications and to get access to all the features.
- package/DomRender.d.ts +1 -1
- package/DomRender.js +3 -3
- package/DomRenderProxy.js +24 -30
- package/README.MD +41 -0
- package/components/ComponentSet.d.ts +1 -1
- package/configs/Config.d.ts +1 -1
- package/configs/TargetAttr.d.ts +1 -1
- package/configs/TargetElement.d.ts +1 -1
- package/css/parse/index.d.ts +1 -0
- package/css/parse/index.js +512 -0
- package/css/stringify/compiler.d.ts +32 -0
- package/css/stringify/compiler.js +40 -0
- package/css/stringify/compress.d.ts +75 -0
- package/css/stringify/compress.js +156 -0
- package/css/stringify/identity.d.ts +85 -0
- package/css/stringify/identity.js +194 -0
- package/css/stringify/index.d.ts +14 -0
- package/css/stringify/index.js +44 -0
- package/dist/bundle.js +1138 -385
- package/events/EventManager.js +27 -27
- package/iterators/Range.d.ts +1 -0
- package/iterators/Range.js +15 -0
- package/messenger/Messenger.d.ts +4 -4
- package/operators/Dr.js +2 -2
- package/operators/DrAppender.js +5 -3
- package/operators/DrFor.js +5 -3
- package/operators/DrForOf.js +5 -3
- package/operators/DrForm.js +12 -12
- package/operators/DrIf.js +5 -3
- package/operators/DrInnerHTML.js +2 -2
- package/operators/DrInnerText.js +2 -2
- package/operators/DrPre.js +4 -2
- package/operators/DrRepeat.js +5 -3
- package/operators/DrTargetAttr.js +4 -2
- package/operators/DrTargetElement.js +5 -3
- package/operators/DrThis.js +2 -2
- package/operators/{DrDictionary.d.ts → DrThisProperty.d.ts} +1 -2
- package/operators/{DrDictionary.js → DrThisProperty.js} +19 -42
- package/operators/OperatorExecuter.d.ts +5 -5
- package/operators/OperatorExecuter.js +2 -2
- package/operators/OperatorExecuterAttrRequire.js +1 -1
- package/package.json +3 -3
- package/rawsets/AttrInitCallBack.d.ts +1 -1
- package/rawsets/Attrs.d.ts +4 -3
- package/rawsets/CreatorMetaData.d.ts +1 -1
- package/rawsets/ElementInitCallBack.d.ts +1 -1
- package/rawsets/RawSet.d.ts +19 -7
- package/rawsets/RawSet.js +144 -73
- package/rawsets/RawSetOperatorType.d.ts +3 -0
- package/rawsets/RawSetOperatorType.js +7 -0
- package/rawsets/Render.d.ts +1 -1
- package/routers/Router.d.ts +1 -1
- package/routers/Router.js +1 -1
- package/utils/dom/DomUtils.d.ts +1 -1
- package/utils/node/NodeUtils.d.ts +1 -1
- package/utils/script/ScriptUtils.js +2 -2
- package/utils/storage/StorageUtils.d.ts +7 -0
- package/utils/storage/StorageUtils.js +39 -0
- package/utils/string/StringUtils.d.ts +1 -0
- package/utils/string/StringUtils.js +17 -0
- package/validators/EmptyValidator.js +2 -2
- package/validators/NotEmptyValidator.js +2 -2
- package/validators/ValidMultipleValidator.d.ts +1 -1
- package/validators/Validator.d.ts +2 -2
- package/validators/ValidatorArray.d.ts +1 -1
package/DomRender.d.ts
CHANGED
@@ -2,7 +2,7 @@ import { Config } from './configs/Config';
|
|
2
2
|
import { ConstructorType } from './types/Types';
|
3
3
|
import { RawSet } from './rawsets/RawSet';
|
4
4
|
export declare class DomRender {
|
5
|
-
static run<T extends object>(obj: T, target?: Node | null, oConfig?:
|
5
|
+
static run<T extends object>(obj: T, target?: Node | null, oConfig?: Config): T;
|
6
6
|
static createComponent(param: {
|
7
7
|
type: ConstructorType<any> | any;
|
8
8
|
tagName?: string;
|
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;
|
24
24
|
var robj = obj;
|
25
25
|
if ('_DomRender_isProxy' in obj) {
|
26
26
|
if (target) {
|
@@ -48,8 +48,8 @@ var DomRender = /** @class */ (function () {
|
|
48
48
|
config.router = (_c = config.router) !== null && _c !== void 0 ? _c : new HashRouter_1.HashRouter(robj, config.window);
|
49
49
|
}
|
50
50
|
else { // default
|
51
|
-
config.routerType = 'hash';
|
52
|
-
config.router =
|
51
|
+
// config.routerType = 'hash';
|
52
|
+
// config.router = config.router ?? new HashRouter(robj, config.window);
|
53
53
|
}
|
54
54
|
domRender.run(robj);
|
55
55
|
return robj;
|
package/DomRenderProxy.js
CHANGED
@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
14
14
|
function verb(n) { return function (v) { return step([n, v]); }; }
|
15
15
|
function step(op) {
|
16
16
|
if (f) throw new TypeError("Generator is already executing.");
|
17
|
-
while (
|
17
|
+
while (_) try {
|
18
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
19
|
if (y = 0, t) op = [op[0] & 2, t.value];
|
20
20
|
switch (op[0]) {
|
@@ -51,7 +51,8 @@ var EventManager_1 = require("./events/EventManager");
|
|
51
51
|
var ScriptUtils_1 = require("./utils/script/ScriptUtils");
|
52
52
|
var Types_1 = require("./types/Types");
|
53
53
|
var RawSetType_1 = require("./rawsets/RawSetType");
|
54
|
-
var
|
54
|
+
var DrThisProperty_1 = require("./operators/DrThisProperty");
|
55
|
+
var RawSetOperatorType_1 = require("./rawsets/RawSetOperatorType");
|
55
56
|
var excludeGetSetPropertys = ['onBeforeReturnGet', 'onBeforeReturnSet', '__domrender_components', '__render', '_DomRender_isFinal', '_domRender_ref', '_rawSets', '_domRender_proxy', '_targets', '_DomRender_origin', '_DomRender_ref', '_DomRender_proxy'];
|
56
57
|
var DomRenderProxy = /** @class */ (function () {
|
57
58
|
function DomRenderProxy(_domRender_origin, target, config) {
|
@@ -75,9 +76,9 @@ var DomRenderProxy = /** @class */ (function () {
|
|
75
76
|
};
|
76
77
|
DomRenderProxy.prototype.run = function (objProxy) {
|
77
78
|
var _this = this;
|
78
|
-
var _a;
|
79
|
+
var _a, _b;
|
79
80
|
this._domRender_proxy = objProxy;
|
80
|
-
(_a = objProxy === null ||
|
81
|
+
(_b = (_a = objProxy) === null || _a === void 0 ? void 0 : _a.onProxyDomRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.config);
|
81
82
|
var obj = objProxy._DomRender_origin;
|
82
83
|
if (obj) {
|
83
84
|
Object.keys(obj).forEach(function (it) {
|
@@ -192,11 +193,11 @@ var DomRenderProxy = /** @class */ (function () {
|
|
192
193
|
new Map(JSON.parse(targetAttrMap)).forEach(function (v, k) {
|
193
194
|
var _a;
|
194
195
|
// it?.data.onChangeAttrRender(k, null, v);
|
195
|
-
var isUsing = EventManager_1.EventManager.isUsingThisVar(v, "this."
|
196
|
+
var isUsing = EventManager_1.EventManager.isUsingThisVar(v, "this." + fullPathStr);
|
196
197
|
if (isUsing) {
|
197
198
|
var render = it_1.fragment.render;
|
198
199
|
// console.log('render-->', (it.fragment as any).render)
|
199
|
-
var script =
|
200
|
+
var script = render.renderScript + " return " + v + " ";
|
200
201
|
var cval = ScriptUtils_1.ScriptUtils.eval(script, Object.assign((_a = _this._domRender_proxy) !== null && _a !== void 0 ? _a : {}, { __render: render }));
|
201
202
|
it_1.data.onChangeAttrRender(k, cval);
|
202
203
|
}
|
@@ -268,7 +269,7 @@ var DomRenderProxy = /** @class */ (function () {
|
|
268
269
|
// const firstPathStr = paths.slice(1).reverse().join('.');
|
269
270
|
var strings = paths.reverse();
|
270
271
|
// array같은경우도 키값으로 접근하기때문에 특정 인덱스를 찾아서 그부분만 바꿔줄수 있다.
|
271
|
-
var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "["
|
272
|
+
var fullPathStr_1 = strings.map(function (it) { return isNaN(Number(it)) ? '.' + it : "[" + it + "]"; }).join('').slice(1);
|
272
273
|
// console.log('-------fullPathStr', fullPathStr, lastDoneExecute);
|
273
274
|
if (lastDoneExecute) {
|
274
275
|
// const firstData = ScriptUtils.evalReturn('this.' + firstPathStr, this._domRender_proxy);
|
@@ -277,12 +278,13 @@ var DomRenderProxy = /** @class */ (function () {
|
|
277
278
|
// }
|
278
279
|
var iterable_1 = this._rawSets.get(fullPathStr_1);
|
279
280
|
// array check
|
280
|
-
var front_1 = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "["
|
281
|
+
var front_1 = strings.slice(0, strings.length - 1).map(function (it) { return isNaN(Number(it)) ? '.' + it : "[" + it + "]"; }).join('');
|
281
282
|
var last_1 = strings[strings.length - 1];
|
282
283
|
var data_1 = ScriptUtils_1.ScriptUtils.evalReturn('this' + front_1, this._domRender_proxy);
|
283
284
|
// console.log('-------!!!!!', fullPathStr, iterable, data, front, last);
|
284
285
|
new Promise(function (resolve) {
|
285
286
|
var firstPathStr = front_1.slice(1);
|
287
|
+
// check dictionary
|
286
288
|
// console.log('-promise-------', firstPathStr, this)
|
287
289
|
var firstTargets = _this._rawSets.get(firstPathStr);
|
288
290
|
var firstTargetDictionary = [];
|
@@ -290,7 +292,7 @@ var DomRenderProxy = /** @class */ (function () {
|
|
290
292
|
var _a, _b;
|
291
293
|
// console.log('----forEach---', it);
|
292
294
|
var type = (_b = (_a = it.point.start).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'type');
|
293
|
-
if (type ===
|
295
|
+
if (type === RawSetOperatorType_1.RawSetOperatorType.DR_THIS_PROPERTY) {
|
294
296
|
firstTargetDictionary.push(it);
|
295
297
|
}
|
296
298
|
});
|
@@ -300,10 +302,15 @@ var DomRenderProxy = /** @class */ (function () {
|
|
300
302
|
var skip_1 = false;
|
301
303
|
firstTargetDictionary.forEach(function (it) {
|
302
304
|
var _a, _b;
|
303
|
-
var
|
305
|
+
var startElement = it.point.start;
|
306
|
+
var keys = (_b = (_a = startElement.getAttribute(RawSet_1.RawSet.DR_HAS_KEYS_OPTIONNAME)) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
|
307
|
+
if (value === undefined) {
|
308
|
+
var rawSet = it.getHasRawSet(last_1);
|
309
|
+
rawSet === null || rawSet === void 0 ? void 0 : rawSet.remove();
|
310
|
+
startElement.setAttribute(RawSet_1.RawSet.DR_HAS_KEYS_OPTIONNAME, keys.filter(function (it) { return it !== last_1; }).join(','));
|
311
|
+
}
|
304
312
|
if (!keys.includes(last_1)) {
|
305
|
-
var raws =
|
306
|
-
// console.log('----append---', raws);
|
313
|
+
var raws = DrThisProperty_1.DrThisProperty.append(_this._domRender_proxy, fullPathStr_1, last_1, it, _this.config);
|
307
314
|
if (raws) {
|
308
315
|
rawSets_3.push.apply(rawSets_3, raws);
|
309
316
|
}
|
@@ -315,18 +322,7 @@ var DomRenderProxy = /** @class */ (function () {
|
|
315
322
|
if (skip_1 === false || rawSets_3.length > 0) {
|
316
323
|
return _this.render(rawSets_3);
|
317
324
|
}
|
318
|
-
// console.log('rawSets-->#$$$$$$$$$$$', this._rawSets);
|
319
|
-
// rawSets.forEach(it => this.addRawSet(fullPathStr, it));
|
320
|
-
// DrDictionary.append(this._domRender_proxy, fullPathStr, it, this.config);
|
321
|
-
// it.render(this._domRender_proxy, this.config);
|
322
325
|
}
|
323
|
-
/* if (data instanceof Dictionary) {
|
324
|
-
const a = this._rawSets.get(firstPathStr);
|
325
|
-
// a?.forEach(it => {
|
326
|
-
// if (it.type === RawSetType.TARGET_ATTR)
|
327
|
-
// })
|
328
|
-
console.log('dictionary-->', data, last, value, this._rawSets, a);
|
329
|
-
} else */
|
330
326
|
if (last_1 === 'length' && Array.isArray(data_1)) {
|
331
327
|
var aIterable = _this._rawSets.get(firstPathStr);
|
332
328
|
if (aIterable) {
|
@@ -337,14 +333,12 @@ var DomRenderProxy = /** @class */ (function () {
|
|
337
333
|
return _this.render(Array.from(iterable_1), fullPathStr_1);
|
338
334
|
}
|
339
335
|
}).then(function (it) {
|
340
|
-
console.log('target1------->,', it);
|
341
336
|
_this._targets.forEach(function (it) {
|
342
|
-
console.log('target2------->,', it);
|
343
337
|
// return;
|
344
338
|
if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {
|
345
339
|
var targets = EventManager_1.eventManager.findAttrElements(it, _this.config);
|
346
340
|
// console.log('------>', targets);
|
347
|
-
EventManager_1.eventManager.changeVar(_this._domRender_proxy, targets, "this."
|
341
|
+
EventManager_1.eventManager.changeVar(_this._domRender_proxy, targets, "this." + fullPathStr_1, _this.config);
|
348
342
|
}
|
349
343
|
});
|
350
344
|
});
|
@@ -354,7 +348,7 @@ var DomRenderProxy = /** @class */ (function () {
|
|
354
348
|
return fullPaths;
|
355
349
|
};
|
356
350
|
DomRenderProxy.prototype.set = function (target, p, value, receiver) {
|
357
|
-
var _a, _b;
|
351
|
+
var _a, _b, _c;
|
358
352
|
// console.log('set-->', p, value, target, receiver);
|
359
353
|
if (typeof p === 'string' && p !== '__domrender_components' && excludeGetSetPropertys.includes(p)) {
|
360
354
|
target[p] = value;
|
@@ -376,12 +370,12 @@ var DomRenderProxy = /** @class */ (function () {
|
|
376
370
|
}
|
377
371
|
// console.log('full path:', fullPath);
|
378
372
|
if (('onBeforeReturnSet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnSets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
|
379
|
-
(_b = receiver === null ||
|
373
|
+
(_c = (_b = receiver) === null || _b === void 0 ? void 0 : _b.onBeforeReturnSet) === null || _c === void 0 ? void 0 : _c.call(_b, p, value, fullPath);
|
380
374
|
}
|
381
375
|
return true;
|
382
376
|
};
|
383
377
|
DomRenderProxy.prototype.get = function (target, p, receiver) {
|
384
|
-
var _a, _b;
|
378
|
+
var _a, _b, _c;
|
385
379
|
// console.log('get-->', target, p, receiver);
|
386
380
|
if (p === '_DomRender_origin') {
|
387
381
|
return this._domRender_origin;
|
@@ -412,7 +406,7 @@ var DomRenderProxy = /** @class */ (function () {
|
|
412
406
|
it_2 = it_2._DomRender_origin;
|
413
407
|
}
|
414
408
|
if (('onBeforeReturnGet' in receiver) && typeof p === 'string' && !((_a = this.config.proxyExcludeOnBeforeReturnGets) !== null && _a !== void 0 ? _a : []).concat(excludeGetSetPropertys).includes(p)) {
|
415
|
-
(_b = receiver === null ||
|
409
|
+
(_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));
|
416
410
|
}
|
417
411
|
return it_2;
|
418
412
|
}
|
package/README.MD
CHANGED
@@ -222,6 +222,47 @@ window-event-popstate: <input type="text" dr-window-event-popstate="alert(this.n
|
|
222
222
|
</details>
|
223
223
|
|
224
224
|
|
225
|
+
## this
|
226
|
+
<details>
|
227
|
+
<summary>dr-this<strong>🔻(click)</strong></summary>
|
228
|
+
* dr-this
|
229
|
+
* object mapping
|
230
|
+
|
231
|
+
```typescript
|
232
|
+
class data {
|
233
|
+
dictionary = {
|
234
|
+
name: 'visualkhh'
|
235
|
+
}
|
236
|
+
}
|
237
|
+
```
|
238
|
+
```html
|
239
|
+
<div dr-this="this.dictionary">
|
240
|
+
${this.name}$
|
241
|
+
</div>
|
242
|
+
```
|
243
|
+
</details>
|
244
|
+
|
245
|
+
<details>
|
246
|
+
<summary>dr-this-property<strong>🔻(click)</strong></summary>
|
247
|
+
* dr-property
|
248
|
+
* property forEach in object
|
249
|
+
* dynamic add, delete
|
250
|
+
|
251
|
+
```typescript
|
252
|
+
class data {
|
253
|
+
dictionary = {
|
254
|
+
name1: 'visualkhh1',
|
255
|
+
name2: 'visualkhh2',
|
256
|
+
name3: 'visualkhh3'
|
257
|
+
}
|
258
|
+
}
|
259
|
+
```
|
260
|
+
```html
|
261
|
+
<home dr-this-property="this.dictionary" dr-on-init:arguments="[2,#this#]">
|
262
|
+
${this}$
|
263
|
+
</home>
|
264
|
+
```
|
265
|
+
</details>
|
225
266
|
|
226
267
|
## value
|
227
268
|
<details>
|
package/configs/Config.d.ts
CHANGED
@@ -6,7 +6,7 @@ import { TargetElement } from './TargetElement';
|
|
6
6
|
import { TargetAttr } from './TargetAttr';
|
7
7
|
import { Attrs } from '../rawsets/Attrs';
|
8
8
|
import { OperatorAround } from '../operators/OperatorExecuter';
|
9
|
-
export type Config = {
|
9
|
+
export declare type Config = {
|
10
10
|
window: Window;
|
11
11
|
targetElements?: TargetElement[];
|
12
12
|
targetAttrs?: TargetAttr[];
|
package/configs/TargetAttr.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { RawSet } from '../rawsets/RawSet';
|
2
|
-
export type TargetAttr = {
|
2
|
+
export declare type TargetAttr = {
|
3
3
|
name: string;
|
4
4
|
callBack: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => DocumentFragment;
|
5
5
|
complete?: (target: Element, attrValue: string, obj: any, rawSet: RawSet) => void;
|
@@ -3,7 +3,7 @@ import { Config } from './Config';
|
|
3
3
|
import { Attrs } from '../rawsets/Attrs';
|
4
4
|
import { CreatorMetaData } from '../rawsets/CreatorMetaData';
|
5
5
|
import { Render } from '../rawsets/Render';
|
6
|
-
export type TargetElement = {
|
6
|
+
export declare type TargetElement = {
|
7
7
|
name: string;
|
8
8
|
template?: string;
|
9
9
|
styles?: string[];
|
@@ -0,0 +1 @@
|
|
1
|
+
export default function _default(css: any, options: any): any;
|