tutuca 0.9.11 → 0.9.12
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/dist/tutuca-dev.js +178 -223
- package/dist/tutuca-dev.min.js +3 -3
- package/dist/tutuca-extra.js +156 -199
- package/dist/tutuca-extra.min.js +3 -3
- package/dist/tutuca.js +150 -193
- package/dist/tutuca.min.js +3 -3
- package/package.json +1 -1
package/dist/tutuca-dev.js
CHANGED
|
@@ -280,9 +280,6 @@ class ValParser {
|
|
|
280
280
|
this.okStrTpl = false;
|
|
281
281
|
this.okSeqAccess = false;
|
|
282
282
|
}
|
|
283
|
-
parseIfOk(s, px, isOk, parseFn) {
|
|
284
|
-
return isOk ? parseFn(s, px) : null;
|
|
285
|
-
}
|
|
286
283
|
_parseSeqAccess(s, px) {
|
|
287
284
|
if (!this.okSeqAccess) {
|
|
288
285
|
return null;
|
|
@@ -296,13 +293,13 @@ class ValParser {
|
|
|
296
293
|
parse(s, px) {
|
|
297
294
|
switch (getValSubType(s)) {
|
|
298
295
|
case VAL_SUB_TYPE_STRING_TEMPLATE:
|
|
299
|
-
return this.
|
|
296
|
+
return this.okStrTpl ? parseStrTemplate(s, px) : null;
|
|
300
297
|
case VAL_SUB_TYPE_CONST_STRING:
|
|
301
|
-
return this.
|
|
298
|
+
return this.okStrTpl ? parseConst(s, px) : null;
|
|
302
299
|
case VAL_SUB_TYPE_SEQ_ACCESS:
|
|
303
300
|
return this._parseSeqAccess(s, px);
|
|
304
301
|
case VAL_SUB_TYPE_INVALID:
|
|
305
|
-
return this.
|
|
302
|
+
return this.okStrTpl ? parseStrTemplate(s, px) : null;
|
|
306
303
|
}
|
|
307
304
|
const charCode = s.charCodeAt(0);
|
|
308
305
|
switch (charCode) {
|
|
@@ -314,29 +311,29 @@ class ValParser {
|
|
|
314
311
|
return null;
|
|
315
312
|
}
|
|
316
313
|
case 126:
|
|
317
|
-
return this.
|
|
314
|
+
return this.okStrTpl ? parseConst(s.slice(1), px) : null;
|
|
318
315
|
case 39:
|
|
319
|
-
return this.
|
|
316
|
+
return this.okStrTpl ? parseConst(s.slice(1, -1), px) : null;
|
|
320
317
|
case 64:
|
|
321
|
-
return this.
|
|
318
|
+
return this.okBind ? parseBind(s.slice(1), px) : null;
|
|
322
319
|
case 42:
|
|
323
|
-
return this.
|
|
320
|
+
return this.okDyn ? parseDyn(s.slice(1), px) : null;
|
|
324
321
|
case 46:
|
|
325
|
-
return this.
|
|
322
|
+
return this.okField ? parseField(s.slice(1), px) : null;
|
|
326
323
|
case 36:
|
|
327
|
-
return this.
|
|
324
|
+
return this.okComputed ? parseComp(s.slice(1), px) : null;
|
|
328
325
|
case 33:
|
|
329
|
-
return this.
|
|
326
|
+
return this.okRequest ? parseReq(s.slice(1), px) : null;
|
|
330
327
|
}
|
|
331
328
|
const num = VALID_FLOAT_RE.test(s) ? parseFloat(s) : null;
|
|
332
329
|
if (Number.isFinite(num)) {
|
|
333
|
-
return this.
|
|
330
|
+
return this.okConst ? parseConst(num, px) : null;
|
|
334
331
|
} else if (s === "true" || s === "false") {
|
|
335
|
-
return this.
|
|
332
|
+
return this.okConst ? parseConst(s === "true", px) : null;
|
|
336
333
|
} else if (charCode >= 97 && charCode <= 122) {
|
|
337
|
-
return this.
|
|
334
|
+
return this.okName ? parseName(s, px) : null;
|
|
338
335
|
} else if (charCode >= 65 && charCode <= 90) {
|
|
339
|
-
return this.
|
|
336
|
+
return this.okType ? parseType(s, px) : null;
|
|
340
337
|
}
|
|
341
338
|
return null;
|
|
342
339
|
}
|
|
@@ -419,18 +416,18 @@ class BaseVal {
|
|
|
419
416
|
}
|
|
420
417
|
|
|
421
418
|
class ConstVal extends BaseVal {
|
|
422
|
-
constructor(
|
|
419
|
+
constructor(val) {
|
|
423
420
|
super();
|
|
424
|
-
this.
|
|
421
|
+
this.val = val;
|
|
425
422
|
}
|
|
426
423
|
render(_stack, _rx) {
|
|
427
|
-
return this.
|
|
424
|
+
return this.val;
|
|
428
425
|
}
|
|
429
426
|
eval(_stack) {
|
|
430
|
-
return this.
|
|
427
|
+
return this.val;
|
|
431
428
|
}
|
|
432
429
|
toString() {
|
|
433
|
-
const v = this.
|
|
430
|
+
const v = this.val;
|
|
434
431
|
return typeof v === "string" ? `'${v}'` : `${v}`;
|
|
435
432
|
}
|
|
436
433
|
}
|
|
@@ -464,7 +461,7 @@ class StrTplVal extends VarVal {
|
|
|
464
461
|
vals[i] = val;
|
|
465
462
|
allConsts &&= val instanceof ConstVal;
|
|
466
463
|
}
|
|
467
|
-
return allConsts ? new ConstVal(vals.map((v) => v.
|
|
464
|
+
return allConsts ? new ConstVal(vals.map((v) => v.val).join("")) : new StrTplVal(vals);
|
|
468
465
|
}
|
|
469
466
|
}
|
|
470
467
|
|
|
@@ -483,13 +480,13 @@ class NameVal extends VarVal {
|
|
|
483
480
|
|
|
484
481
|
class InputHandlerNameVal extends NameVal {
|
|
485
482
|
eval(stack) {
|
|
486
|
-
return stack.
|
|
483
|
+
return stack.getHandlerFor(this.name, "input") ?? mk404Handler("input", this.name);
|
|
487
484
|
}
|
|
488
485
|
}
|
|
489
486
|
|
|
490
487
|
class AlterHandlerNameVal extends NameVal {
|
|
491
488
|
eval(stack) {
|
|
492
|
-
return stack.
|
|
489
|
+
return stack.getHandlerFor(this.name, "alter") ?? mk404Handler("alter", this.name);
|
|
493
490
|
}
|
|
494
491
|
}
|
|
495
492
|
var mk404Handler = (type, name) => function(...args) {
|
|
@@ -798,7 +795,7 @@ class ConstAttrs extends Attributes {
|
|
|
798
795
|
static fromAttrs(attrs) {
|
|
799
796
|
const attrsObj = {};
|
|
800
797
|
for (const attr of attrs) {
|
|
801
|
-
attrsObj[attr.name] = attr.
|
|
798
|
+
attrsObj[attr.name] = attr.val.eval(null);
|
|
802
799
|
}
|
|
803
800
|
return new ConstAttrs(attrsObj);
|
|
804
801
|
}
|
|
@@ -831,7 +828,7 @@ class DynAttrs extends Attributes {
|
|
|
831
828
|
toMacroVars() {
|
|
832
829
|
const r = {};
|
|
833
830
|
for (const attr of this.items) {
|
|
834
|
-
r[attr.name] = attr.
|
|
831
|
+
r[attr.name] = attr.val.toString();
|
|
835
832
|
}
|
|
836
833
|
return r;
|
|
837
834
|
}
|
|
@@ -844,23 +841,23 @@ class BaseAttr {
|
|
|
844
841
|
}
|
|
845
842
|
|
|
846
843
|
class Attr extends BaseAttr {
|
|
847
|
-
constructor(name,
|
|
844
|
+
constructor(name, val) {
|
|
848
845
|
super(name);
|
|
849
|
-
this.
|
|
846
|
+
this.val = val;
|
|
850
847
|
}
|
|
851
848
|
eval(stack) {
|
|
852
|
-
return this.
|
|
849
|
+
return this.val.eval(stack);
|
|
853
850
|
}
|
|
854
851
|
}
|
|
855
852
|
|
|
856
853
|
class ConstAttr extends Attr {
|
|
857
854
|
}
|
|
858
855
|
class RawHtmlAttr extends Attr {
|
|
859
|
-
constructor(
|
|
860
|
-
super("dangerouslySetInnerHTML",
|
|
856
|
+
constructor(val) {
|
|
857
|
+
super("dangerouslySetInnerHTML", val ?? vp.nullConstVal);
|
|
861
858
|
}
|
|
862
859
|
eval(stack) {
|
|
863
|
-
return { __html: `${this.
|
|
860
|
+
return { __html: `${this.val.eval(stack)}` };
|
|
864
861
|
}
|
|
865
862
|
}
|
|
866
863
|
var NOT_SET_VAL = vp.nullConstVal;
|
|
@@ -940,16 +937,16 @@ class BaseNode {
|
|
|
940
937
|
}
|
|
941
938
|
|
|
942
939
|
class TextNode extends BaseNode {
|
|
943
|
-
constructor(
|
|
940
|
+
constructor(val) {
|
|
944
941
|
super();
|
|
945
|
-
this.
|
|
942
|
+
this.val = val;
|
|
946
943
|
}
|
|
947
944
|
render(_stack, rx) {
|
|
948
|
-
return rx.renderText(this.
|
|
945
|
+
return rx.renderText(this.val);
|
|
949
946
|
}
|
|
950
947
|
isWhiteSpace() {
|
|
951
|
-
for (let i = 0;i < this.
|
|
952
|
-
const c = this.
|
|
948
|
+
for (let i = 0;i < this.val.length; i++) {
|
|
949
|
+
const c = this.val.charCodeAt(i);
|
|
953
950
|
if (!(c === 32 || c === 10 || c === 9 || c === 13)) {
|
|
954
951
|
return false;
|
|
955
952
|
}
|
|
@@ -957,8 +954,8 @@ class TextNode extends BaseNode {
|
|
|
957
954
|
return true;
|
|
958
955
|
}
|
|
959
956
|
hasNewLine() {
|
|
960
|
-
for (let i = 0;i < this.
|
|
961
|
-
const c = this.
|
|
957
|
+
for (let i = 0;i < this.val.length; i++) {
|
|
958
|
+
const c = this.val.charCodeAt(i);
|
|
962
959
|
if (c === 10 || c === 13) {
|
|
963
960
|
return true;
|
|
964
961
|
}
|
|
@@ -966,7 +963,7 @@ class TextNode extends BaseNode {
|
|
|
966
963
|
return false;
|
|
967
964
|
}
|
|
968
965
|
condenseWhiteSpace() {
|
|
969
|
-
this.
|
|
966
|
+
this.val = "";
|
|
970
967
|
}
|
|
971
968
|
isConstant() {
|
|
972
969
|
return true;
|
|
@@ -976,7 +973,7 @@ class TextNode extends BaseNode {
|
|
|
976
973
|
|
|
977
974
|
class CommentNode extends TextNode {
|
|
978
975
|
render(_stack, rx) {
|
|
979
|
-
return rx.renderComment(this.
|
|
976
|
+
return rx.renderComment(this.val);
|
|
980
977
|
}
|
|
981
978
|
}
|
|
982
979
|
function optimizeChilds(childs) {
|
|
@@ -1400,7 +1397,7 @@ class ParseContext {
|
|
|
1400
1397
|
const slots = { _: new FragmentNode(anySlot) };
|
|
1401
1398
|
for (const child of childs) {
|
|
1402
1399
|
if (child instanceof SlotNode) {
|
|
1403
|
-
slots[child.val.
|
|
1400
|
+
slots[child.val.val] = child.node;
|
|
1404
1401
|
} else if (!(child instanceof TextNode) || !child.isWhiteSpace()) {
|
|
1405
1402
|
anySlot.push(child);
|
|
1406
1403
|
}
|
|
@@ -1664,18 +1661,15 @@ class Components {
|
|
|
1664
1661
|
const comp = this.getCompFor(v);
|
|
1665
1662
|
return comp ? comp.on.stackEnter : defaultOnStackEnter;
|
|
1666
1663
|
}
|
|
1667
|
-
|
|
1668
|
-
return this.getCompFor(v)?.
|
|
1669
|
-
}
|
|
1670
|
-
getAlterHandlerFor(v, name) {
|
|
1671
|
-
return this.getCompFor(v)?.alter[name] ?? null;
|
|
1664
|
+
getHandlerFor(v, name, key) {
|
|
1665
|
+
return this.getCompFor(v)?.[key][name] ?? null;
|
|
1672
1666
|
}
|
|
1673
1667
|
getRequestFor(v, name) {
|
|
1674
1668
|
const comp = this.getCompFor(v);
|
|
1675
1669
|
return comp ? comp.scope.lookupRequest(name) : null;
|
|
1676
1670
|
}
|
|
1677
1671
|
lookupComputed(v, name) {
|
|
1678
|
-
const fn = this.
|
|
1672
|
+
const fn = this.getHandlerFor(v, name, "computed");
|
|
1679
1673
|
return fn ? this.computedCache.getKey(v, name, fn) : null;
|
|
1680
1674
|
}
|
|
1681
1675
|
compileStyles() {
|
|
@@ -1954,11 +1948,8 @@ class Stack {
|
|
|
1954
1948
|
const node = this.binds.head.isFrame ? this.binds.head : this.binds.tail.head;
|
|
1955
1949
|
return this.comps.lookupComputed(node.it, name);
|
|
1956
1950
|
}
|
|
1957
|
-
|
|
1958
|
-
return this.comps.
|
|
1959
|
-
}
|
|
1960
|
-
getAlterHandler(name) {
|
|
1961
|
-
return this.comps.getAlterHandlerFor(this.it, name);
|
|
1951
|
+
getHandlerFor(name, key) {
|
|
1952
|
+
return this.comps.getHandlerFor(this.it, name, key);
|
|
1962
1953
|
}
|
|
1963
1954
|
lookupRequest(name) {
|
|
1964
1955
|
return this.comps.getRequestFor(this.it, name);
|
|
@@ -1976,22 +1967,22 @@ class Stack {
|
|
|
1976
1967
|
|
|
1977
1968
|
// src/transactor.js
|
|
1978
1969
|
class State {
|
|
1979
|
-
constructor(
|
|
1980
|
-
this.
|
|
1970
|
+
constructor(val) {
|
|
1971
|
+
this.val = val;
|
|
1981
1972
|
this.changeSubs = [];
|
|
1982
1973
|
}
|
|
1983
1974
|
onChange(cb) {
|
|
1984
1975
|
this.changeSubs.push(cb);
|
|
1985
1976
|
}
|
|
1986
|
-
set(
|
|
1987
|
-
const old = this.
|
|
1988
|
-
this.
|
|
1977
|
+
set(val, info) {
|
|
1978
|
+
const old = this.val;
|
|
1979
|
+
this.val = val;
|
|
1989
1980
|
for (const sub of this.changeSubs) {
|
|
1990
|
-
sub({
|
|
1981
|
+
sub({ val, old, info, timestamp: Date.now() });
|
|
1991
1982
|
}
|
|
1992
1983
|
}
|
|
1993
1984
|
update(fn, info) {
|
|
1994
|
-
return this.set(fn(this.
|
|
1985
|
+
return this.set(fn(this.val), info);
|
|
1995
1986
|
}
|
|
1996
1987
|
}
|
|
1997
1988
|
|
|
@@ -2015,7 +2006,7 @@ class Transactor {
|
|
|
2015
2006
|
return this.pushTransaction(new BubbleEvent(path, this, name, args, parent, newOpts));
|
|
2016
2007
|
}
|
|
2017
2008
|
async pushRequest(path, name, args = [], opts = {}, parent = null) {
|
|
2018
|
-
const curRoot = this.state.
|
|
2009
|
+
const curRoot = this.state.val;
|
|
2019
2010
|
const curLeaf = path.lookup(curRoot);
|
|
2020
2011
|
const handler = this.comps.getRequestFor(curLeaf, name) ?? mkReq404(name);
|
|
2021
2012
|
const resHandlerName = opts?.onResName ?? name;
|
|
@@ -2045,7 +2036,7 @@ class Transactor {
|
|
|
2045
2036
|
}
|
|
2046
2037
|
}
|
|
2047
2038
|
transact(transaction) {
|
|
2048
|
-
const curState = this.state.
|
|
2039
|
+
const curState = this.state.val;
|
|
2049
2040
|
const newState = transaction.run(curState, this.comps);
|
|
2050
2041
|
if (newState !== undefined) {
|
|
2051
2042
|
this.state.set(newState, { transaction });
|
|
@@ -2068,10 +2059,10 @@ function nullHandler() {
|
|
|
2068
2059
|
}
|
|
2069
2060
|
|
|
2070
2061
|
class Transaction {
|
|
2071
|
-
constructor(path, transactor) {
|
|
2062
|
+
constructor(path, transactor, parentTransaction = null) {
|
|
2072
2063
|
this.path = path;
|
|
2073
2064
|
this.transactor = transactor;
|
|
2074
|
-
this.parentTransaction =
|
|
2065
|
+
this.parentTransaction = parentTransaction;
|
|
2075
2066
|
this._task = null;
|
|
2076
2067
|
}
|
|
2077
2068
|
get task() {
|
|
@@ -2229,7 +2220,7 @@ class Task {
|
|
|
2229
2220
|
constructor(info) {
|
|
2230
2221
|
this.info = info;
|
|
2231
2222
|
this.deps = [];
|
|
2232
|
-
this.
|
|
2223
|
+
this.val = this.resolve = this.reject = null;
|
|
2233
2224
|
this.promise = new Promise((res, rej) => {
|
|
2234
2225
|
this.resolve = res;
|
|
2235
2226
|
this.reject = rej;
|
|
@@ -2241,8 +2232,8 @@ class Task {
|
|
|
2241
2232
|
this.deps.push(task);
|
|
2242
2233
|
task.promise.then((_) => this._check());
|
|
2243
2234
|
}
|
|
2244
|
-
complete(
|
|
2245
|
-
this.
|
|
2235
|
+
complete(val) {
|
|
2236
|
+
this.val = val;
|
|
2246
2237
|
this._check();
|
|
2247
2238
|
}
|
|
2248
2239
|
_check() {
|
|
@@ -2345,7 +2336,7 @@ class App {
|
|
|
2345
2336
|
}
|
|
2346
2337
|
} else if (isDragStart) {
|
|
2347
2338
|
e.target.dataset.dragging = 1;
|
|
2348
|
-
const rootValue = this.state.
|
|
2339
|
+
const rootValue = this.state.val;
|
|
2349
2340
|
const value = path.lookup(rootValue);
|
|
2350
2341
|
const type = e.target.dataset.dragtype ?? "?";
|
|
2351
2342
|
const stack = path.buildStack(this.makeStack(rootValue));
|
|
@@ -2371,7 +2362,7 @@ class App {
|
|
|
2371
2362
|
}
|
|
2372
2363
|
}
|
|
2373
2364
|
render() {
|
|
2374
|
-
const root = this.state.
|
|
2365
|
+
const root = this.state.val;
|
|
2375
2366
|
const stack = this.makeStack(root);
|
|
2376
2367
|
return this.renderFn(this.renderer.renderRoot(stack, root), this.rootNode);
|
|
2377
2368
|
}
|
|
@@ -2397,7 +2388,7 @@ class App {
|
|
|
2397
2388
|
this.rootNode.addEventListener(name, this);
|
|
2398
2389
|
}
|
|
2399
2390
|
this.onChange((info) => {
|
|
2400
|
-
if (info.
|
|
2391
|
+
if (info.val !== info.old) {
|
|
2401
2392
|
this.render();
|
|
2402
2393
|
}
|
|
2403
2394
|
});
|
|
@@ -2468,11 +2459,11 @@ function getClosestDropTarget(target, rootNode, count) {
|
|
|
2468
2459
|
}
|
|
2469
2460
|
|
|
2470
2461
|
class DragInfo {
|
|
2471
|
-
constructor(path, stack, e,
|
|
2462
|
+
constructor(path, stack, e, val, type, node) {
|
|
2472
2463
|
this.path = path;
|
|
2473
2464
|
this.stack = stack;
|
|
2474
2465
|
this.e = e;
|
|
2475
|
-
this.
|
|
2466
|
+
this.val = val;
|
|
2476
2467
|
this.type = type;
|
|
2477
2468
|
this.node = node;
|
|
2478
2469
|
}
|
|
@@ -2505,12 +2496,12 @@ class ParseCtxClassSetCollector extends ParseContext {
|
|
|
2505
2496
|
if (attr.name !== "class") {
|
|
2506
2497
|
continue;
|
|
2507
2498
|
}
|
|
2508
|
-
const {
|
|
2499
|
+
const { val, thenVal, elseVal } = attr;
|
|
2509
2500
|
if (thenVal !== undefined) {
|
|
2510
2501
|
this._maybeAddVal(thenVal);
|
|
2511
2502
|
this._maybeAddVal(elseVal);
|
|
2512
2503
|
} else {
|
|
2513
|
-
this._maybeAddVal(
|
|
2504
|
+
this._maybeAddVal(val);
|
|
2514
2505
|
}
|
|
2515
2506
|
}
|
|
2516
2507
|
} else {
|
|
@@ -2521,15 +2512,15 @@ class ParseCtxClassSetCollector extends ParseContext {
|
|
|
2521
2512
|
}
|
|
2522
2513
|
}
|
|
2523
2514
|
_maybeAddVal(value) {
|
|
2524
|
-
if (!this._maybeAddStrTpl(value) && typeof value?.
|
|
2525
|
-
this._addClasses(value.
|
|
2515
|
+
if (!this._maybeAddStrTpl(value) && typeof value?.val === "string") {
|
|
2516
|
+
this._addClasses(value.val);
|
|
2526
2517
|
}
|
|
2527
2518
|
}
|
|
2528
2519
|
_maybeAddStrTpl(value) {
|
|
2529
2520
|
if (value?.vals !== undefined) {
|
|
2530
2521
|
for (const val of value.vals) {
|
|
2531
|
-
if (val instanceof ConstVal && val.
|
|
2532
|
-
this._addClasses(val.
|
|
2522
|
+
if (val instanceof ConstVal && val.val !== "") {
|
|
2523
|
+
this._addClasses(val.val);
|
|
2533
2524
|
}
|
|
2534
2525
|
}
|
|
2535
2526
|
return true;
|
|
@@ -7327,7 +7318,7 @@ class Renderer {
|
|
|
7327
7318
|
this.comps = comps;
|
|
7328
7319
|
this.h = h;
|
|
7329
7320
|
this.fragment = fragment;
|
|
7330
|
-
this.
|
|
7321
|
+
this.renderComment = comment;
|
|
7331
7322
|
this.renderFn = renderFn;
|
|
7332
7323
|
this.getSeqInfo = getSeqInfo ?? basicGetSeqInfo;
|
|
7333
7324
|
this.cache = cache ?? new WeakMapDomCache;
|
|
@@ -7353,13 +7344,13 @@ class Renderer {
|
|
|
7353
7344
|
return dom.innerHTML;
|
|
7354
7345
|
}
|
|
7355
7346
|
renderRoot(stack, val, viewName = null) {
|
|
7356
|
-
const
|
|
7357
|
-
const nid =
|
|
7358
|
-
return
|
|
7347
|
+
const comp = this.comps.getCompFor(val);
|
|
7348
|
+
const nid = comp.getView(viewName).anode.nodeId ?? null;
|
|
7349
|
+
return comp ? this._rValComp(stack, val, comp, nid, "ROOT", viewName) : null;
|
|
7359
7350
|
}
|
|
7360
7351
|
renderIt(stack, nodeId, key, viewName) {
|
|
7361
|
-
const
|
|
7362
|
-
return
|
|
7352
|
+
const comp = this.comps.getCompFor(stack.it);
|
|
7353
|
+
return comp ? this._rValComp(stack, stack.it, comp, nodeId, key, viewName) : null;
|
|
7363
7354
|
}
|
|
7364
7355
|
_rValComp(stack, val, comp, nid, key, viewName) {
|
|
7365
7356
|
const cacheKey = `${viewName ?? stack.viewsId ?? ""}${nid}-${key}`;
|
|
@@ -7369,10 +7360,13 @@ class Renderer {
|
|
|
7369
7360
|
}
|
|
7370
7361
|
const view = viewName ? comp.getView(viewName) : stack.lookupBestView(comp.views, "main");
|
|
7371
7362
|
const meta = this.renderMetadata("Comp", { nid });
|
|
7372
|
-
const dom = this.renderFragment([meta,
|
|
7363
|
+
const dom = this.renderFragment([meta, this.renderView(view, stack)]);
|
|
7373
7364
|
this.cache.set(val, cacheKey, dom);
|
|
7374
7365
|
return dom;
|
|
7375
7366
|
}
|
|
7367
|
+
pushEachEntry(r, nid, attrName, key, dom) {
|
|
7368
|
+
r.push(this.renderMetadata("Each", { nid, [attrName]: key }), dom);
|
|
7369
|
+
}
|
|
7376
7370
|
renderEach(stack, iterInfo, nodeId, viewName) {
|
|
7377
7371
|
const { seq, filter, loopWith } = iterInfo.eval(stack);
|
|
7378
7372
|
const [attrName, gen] = this.getSeqInfo(seq);
|
|
@@ -7382,16 +7376,14 @@ class Renderer {
|
|
|
7382
7376
|
if (filter.call(stack.it, key, value, iterData)) {
|
|
7383
7377
|
const newStack = stack.enter(value, { key }, true);
|
|
7384
7378
|
const dom = this.renderIt(newStack, nodeId, key, viewName);
|
|
7385
|
-
|
|
7386
|
-
r.push(dom);
|
|
7379
|
+
this.pushEachEntry(r, nodeId, attrName, key, dom);
|
|
7387
7380
|
}
|
|
7388
7381
|
}
|
|
7389
7382
|
return r;
|
|
7390
7383
|
}
|
|
7391
|
-
renderEachWhen(stack, iterInfo,
|
|
7384
|
+
renderEachWhen(stack, iterInfo, view, nid) {
|
|
7392
7385
|
const { seq, filter, loopWith, enricher } = iterInfo.eval(stack);
|
|
7393
7386
|
const [attrName, gen] = this.getSeqInfo(seq);
|
|
7394
|
-
const hasEnricher = !!enricher;
|
|
7395
7387
|
const r = [];
|
|
7396
7388
|
const iterData = loopWith.call(stack.it, seq);
|
|
7397
7389
|
for (const [key, value] of gen(seq)) {
|
|
@@ -7399,30 +7391,31 @@ class Renderer {
|
|
|
7399
7391
|
const bindings = { key, value };
|
|
7400
7392
|
const cacheKey = `${nid}-${key}`;
|
|
7401
7393
|
let cachedNode;
|
|
7402
|
-
if (
|
|
7394
|
+
if (enricher) {
|
|
7403
7395
|
enricher.call(stack.it, bindings, key, value, iterData);
|
|
7404
7396
|
cachedNode = this.cache.get2(stack.it, value, cacheKey);
|
|
7405
7397
|
} else {
|
|
7406
7398
|
cachedNode = this.cache.get(value, cacheKey);
|
|
7407
7399
|
}
|
|
7408
7400
|
if (cachedNode) {
|
|
7409
|
-
|
|
7410
|
-
r.push(cachedNode);
|
|
7401
|
+
this.pushEachEntry(r, nid, attrName, key, cachedNode);
|
|
7411
7402
|
continue;
|
|
7412
7403
|
}
|
|
7413
7404
|
const newStack = stack.enter(value, bindings, false);
|
|
7414
|
-
const dom =
|
|
7415
|
-
|
|
7416
|
-
if (
|
|
7405
|
+
const dom = this.renderView(view, newStack);
|
|
7406
|
+
this.pushEachEntry(r, nid, attrName, key, dom);
|
|
7407
|
+
if (enricher) {
|
|
7417
7408
|
this.cache.set2(stack.it, value, cacheKey, dom);
|
|
7418
7409
|
} else {
|
|
7419
7410
|
this.cache.set(value, cacheKey, dom);
|
|
7420
7411
|
}
|
|
7421
|
-
r.push(dom);
|
|
7422
7412
|
}
|
|
7423
7413
|
}
|
|
7424
7414
|
return r;
|
|
7425
7415
|
}
|
|
7416
|
+
renderView(view, stack) {
|
|
7417
|
+
return view.render(stack, this);
|
|
7418
|
+
}
|
|
7426
7419
|
renderText(text) {
|
|
7427
7420
|
return text;
|
|
7428
7421
|
}
|
|
@@ -7430,10 +7423,7 @@ class Renderer {
|
|
|
7430
7423
|
info.$ = type;
|
|
7431
7424
|
return this.renderComment(`§${JSON.stringify(info)}§`);
|
|
7432
7425
|
}
|
|
7433
|
-
|
|
7434
|
-
return this.comment(text);
|
|
7435
|
-
}
|
|
7436
|
-
renderEmpty(_text) {
|
|
7426
|
+
renderEmpty() {
|
|
7437
7427
|
return null;
|
|
7438
7428
|
}
|
|
7439
7429
|
renderTag(tagName, attrs, childs) {
|
|
@@ -7560,6 +7550,7 @@ seqInfoByClass.set(KList, ["data-sk", klistEntries]);
|
|
|
7560
7550
|
// src/vdom.js
|
|
7561
7551
|
var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a");
|
|
7562
7552
|
var isObject = (v) => v !== null && typeof v === "object";
|
|
7553
|
+
var prototypesDiffer = (a, b) => Object.getPrototypeOf(a) !== Object.getPrototypeOf(b);
|
|
7563
7554
|
function applyProperties(node, props, previous) {
|
|
7564
7555
|
for (const propName in props) {
|
|
7565
7556
|
const propValue = props[propName];
|
|
@@ -7581,41 +7572,48 @@ function applyProperties(node, props, previous) {
|
|
|
7581
7572
|
function removeProperty(node, propName, previous) {
|
|
7582
7573
|
const previousValue = previous[propName];
|
|
7583
7574
|
if (propName === "dangerouslySetInnerHTML") {
|
|
7584
|
-
node.
|
|
7575
|
+
node.replaceChildren();
|
|
7576
|
+
} else if (propName === "className") {
|
|
7577
|
+
node.removeAttribute("class");
|
|
7578
|
+
} else if (propName === "htmlFor") {
|
|
7579
|
+
node.removeAttribute("for");
|
|
7585
7580
|
} else if (typeof previousValue === "string" || isHtmlAttribute(propName)) {
|
|
7586
|
-
|
|
7587
|
-
node.removeAttribute(attrName);
|
|
7581
|
+
node.removeAttribute(propName);
|
|
7588
7582
|
} else {
|
|
7589
7583
|
node[propName] = null;
|
|
7590
7584
|
}
|
|
7591
7585
|
}
|
|
7592
7586
|
function patchObject(node, previous, propName, propValue) {
|
|
7593
7587
|
const previousValue = previous?.[propName];
|
|
7594
|
-
if (isObject(previousValue) &&
|
|
7588
|
+
if (isObject(previousValue) && prototypesDiffer(previousValue, propValue)) {
|
|
7595
7589
|
node[propName] = propValue;
|
|
7596
7590
|
return;
|
|
7597
7591
|
}
|
|
7598
|
-
|
|
7599
|
-
if (!isObject(current)) {
|
|
7592
|
+
if (!isObject(node[propName])) {
|
|
7600
7593
|
node[propName] = {};
|
|
7601
|
-
current = node[propName];
|
|
7602
7594
|
}
|
|
7603
|
-
const target =
|
|
7595
|
+
const target = node[propName];
|
|
7604
7596
|
for (const k in propValue) {
|
|
7605
7597
|
target[k] = propValue[k];
|
|
7606
7598
|
}
|
|
7607
7599
|
}
|
|
7608
7600
|
|
|
7609
7601
|
class VBase {
|
|
7610
|
-
isEqualTo(other) {
|
|
7611
|
-
return this === other;
|
|
7612
|
-
}
|
|
7613
|
-
toDom(_opts) {
|
|
7614
|
-
return null;
|
|
7615
|
-
}
|
|
7616
7602
|
}
|
|
7617
7603
|
var getKey = (child) => child instanceof VNode2 ? child.key : undefined;
|
|
7618
7604
|
var isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function";
|
|
7605
|
+
function childsEqual(a, b) {
|
|
7606
|
+
for (let i = 0;i < a.length; i++) {
|
|
7607
|
+
if (!a[i].isEqualTo(b[i]))
|
|
7608
|
+
return false;
|
|
7609
|
+
}
|
|
7610
|
+
return true;
|
|
7611
|
+
}
|
|
7612
|
+
function appendChildNodes(parent, childs, opts) {
|
|
7613
|
+
for (const child of childs) {
|
|
7614
|
+
parent.appendChild(child.toDom(opts));
|
|
7615
|
+
}
|
|
7616
|
+
}
|
|
7619
7617
|
function addChild(normalizedChildren, child) {
|
|
7620
7618
|
if (child == null)
|
|
7621
7619
|
return;
|
|
@@ -7679,21 +7677,11 @@ class VFragment extends VBase {
|
|
|
7679
7677
|
if (!(other instanceof VFragment) || this.childs.length !== other.childs.length) {
|
|
7680
7678
|
return false;
|
|
7681
7679
|
}
|
|
7682
|
-
|
|
7683
|
-
if (!this.childs[i].isEqualTo(other.childs[i])) {
|
|
7684
|
-
return false;
|
|
7685
|
-
}
|
|
7686
|
-
}
|
|
7687
|
-
return true;
|
|
7680
|
+
return childsEqual(this.childs, other.childs);
|
|
7688
7681
|
}
|
|
7689
7682
|
toDom(opts) {
|
|
7690
7683
|
const fragment = opts.document.createDocumentFragment();
|
|
7691
|
-
|
|
7692
|
-
const childNode = child.toDom(opts);
|
|
7693
|
-
if (childNode) {
|
|
7694
|
-
fragment.appendChild(childNode);
|
|
7695
|
-
}
|
|
7696
|
-
}
|
|
7684
|
+
appendChildNodes(fragment, this.childs, opts);
|
|
7697
7685
|
return fragment;
|
|
7698
7686
|
}
|
|
7699
7687
|
}
|
|
@@ -7724,23 +7712,13 @@ class VNode2 extends VBase {
|
|
|
7724
7712
|
return false;
|
|
7725
7713
|
}
|
|
7726
7714
|
}
|
|
7727
|
-
|
|
7728
|
-
if (!this.childs[i].isEqualTo(other.childs[i])) {
|
|
7729
|
-
return false;
|
|
7730
|
-
}
|
|
7731
|
-
}
|
|
7732
|
-
return true;
|
|
7715
|
+
return childsEqual(this.childs, other.childs);
|
|
7733
7716
|
}
|
|
7734
7717
|
toDom(opts) {
|
|
7735
7718
|
const doc = opts.document;
|
|
7736
7719
|
const node = this.namespace === null ? doc.createElement(this.tag) : doc.createElementNS(this.namespace, this.tag);
|
|
7737
7720
|
applyProperties(node, this.attrs, {});
|
|
7738
|
-
|
|
7739
|
-
const childNode = child.toDom(opts);
|
|
7740
|
-
if (childNode) {
|
|
7741
|
-
node.appendChild(childNode);
|
|
7742
|
-
}
|
|
7743
|
-
}
|
|
7721
|
+
appendChildNodes(node, this.childs, opts);
|
|
7744
7722
|
return node;
|
|
7745
7723
|
}
|
|
7746
7724
|
}
|
|
@@ -7754,8 +7732,10 @@ function diffProps(a, b) {
|
|
|
7754
7732
|
}
|
|
7755
7733
|
const aValue = a[aKey];
|
|
7756
7734
|
const bValue = b[aKey];
|
|
7757
|
-
if (aValue === bValue)
|
|
7758
|
-
|
|
7735
|
+
if (aValue === bValue)
|
|
7736
|
+
continue;
|
|
7737
|
+
if (isObject(aValue) && isObject(bValue)) {
|
|
7738
|
+
if (prototypesDiffer(bValue, aValue)) {
|
|
7759
7739
|
diff ??= {};
|
|
7760
7740
|
diff[aKey] = bValue;
|
|
7761
7741
|
} else {
|
|
@@ -7778,55 +7758,44 @@ function diffProps(a, b) {
|
|
|
7778
7758
|
}
|
|
7779
7759
|
return diff;
|
|
7780
7760
|
}
|
|
7781
|
-
function replaceNode(domNode, vnode, options) {
|
|
7782
|
-
const parentNode = domNode.parentNode;
|
|
7783
|
-
const newNode = vnode.toDom(options);
|
|
7784
|
-
if (parentNode && newNode && newNode !== domNode) {
|
|
7785
|
-
parentNode.replaceChild(newNode, domNode);
|
|
7786
|
-
}
|
|
7787
|
-
return newNode || domNode;
|
|
7788
|
-
}
|
|
7789
|
-
var bothInstanceOf = (a, b, C) => a instanceof C && b instanceof C;
|
|
7790
7761
|
function morphNode(domNode, source, target, opts) {
|
|
7791
7762
|
if (source === target || source.isEqualTo(target))
|
|
7792
7763
|
return domNode;
|
|
7793
|
-
|
|
7794
|
-
|
|
7795
|
-
|
|
7796
|
-
|
|
7797
|
-
|
|
7798
|
-
const propsDiff = diffProps(source.attrs, target.attrs);
|
|
7799
|
-
if (propsDiff) {
|
|
7800
|
-
applyProperties(domNode, propsDiff, source.attrs);
|
|
7764
|
+
const type = source.nodeType;
|
|
7765
|
+
if (type === target.nodeType) {
|
|
7766
|
+
if (type === 3 || type === 8) {
|
|
7767
|
+
domNode.data = target.text;
|
|
7768
|
+
return domNode;
|
|
7801
7769
|
}
|
|
7802
|
-
if (
|
|
7803
|
-
|
|
7770
|
+
if (type === 1 && source.tag === target.tag && source.namespace === target.namespace && source.key === target.key) {
|
|
7771
|
+
const propsDiff = diffProps(source.attrs, target.attrs);
|
|
7772
|
+
if (propsDiff)
|
|
7773
|
+
applyProperties(domNode, propsDiff, source.attrs);
|
|
7774
|
+
if (!target.attrs.dangerouslySetInnerHTML) {
|
|
7775
|
+
morphChildren(domNode, source.childs, target.childs, opts);
|
|
7776
|
+
}
|
|
7777
|
+
return domNode;
|
|
7778
|
+
}
|
|
7779
|
+
if (type === 11) {
|
|
7780
|
+
morphChildren(domNode, source.childs, target.childs, opts);
|
|
7781
|
+
return domNode;
|
|
7804
7782
|
}
|
|
7805
|
-
return domNode;
|
|
7806
|
-
}
|
|
7807
|
-
if (bothInstanceOf(source, target, VFragment)) {
|
|
7808
|
-
morphChildren(domNode, source.childs, target.childs, null, opts);
|
|
7809
|
-
return domNode;
|
|
7810
7783
|
}
|
|
7811
|
-
|
|
7784
|
+
const newNode = target.toDom(opts);
|
|
7785
|
+
domNode.parentNode?.replaceChild(newNode, domNode);
|
|
7786
|
+
return newNode;
|
|
7812
7787
|
}
|
|
7813
|
-
function morphChildren(parentDom, oldChilds, newChilds,
|
|
7788
|
+
function morphChildren(parentDom, oldChilds, newChilds, opts) {
|
|
7814
7789
|
if (oldChilds.length === 0) {
|
|
7815
|
-
|
|
7816
|
-
const node = child.toDom(opts);
|
|
7817
|
-
if (node)
|
|
7818
|
-
parentDom.appendChild(node);
|
|
7819
|
-
}
|
|
7790
|
+
appendChildNodes(parentDom, newChilds, opts);
|
|
7820
7791
|
return;
|
|
7821
7792
|
}
|
|
7822
7793
|
if (newChilds.length === 0) {
|
|
7823
|
-
|
|
7824
|
-
parentDom.removeChild(parentDom.firstChild);
|
|
7825
|
-
}
|
|
7794
|
+
parentDom.replaceChildren();
|
|
7826
7795
|
return;
|
|
7827
7796
|
}
|
|
7828
7797
|
const domNodes = Array.from(parentDom.childNodes);
|
|
7829
|
-
const oldKeyMap =
|
|
7798
|
+
const oldKeyMap = Object.create(null);
|
|
7830
7799
|
for (let i = 0;i < oldChilds.length; i++) {
|
|
7831
7800
|
const key = getKey(oldChilds[i]);
|
|
7832
7801
|
if (key != null)
|
|
@@ -7853,17 +7822,13 @@ function morphChildren(parentDom, oldChilds, newChilds, _parentTag, opts) {
|
|
|
7853
7822
|
}
|
|
7854
7823
|
if (oldIdx >= 0) {
|
|
7855
7824
|
used[oldIdx] = 1;
|
|
7856
|
-
const
|
|
7857
|
-
const newDom = morphNode(dom, oldChilds[oldIdx], newChild, opts);
|
|
7825
|
+
const newDom = morphNode(domNodes[oldIdx], oldChilds[oldIdx], newChild, opts);
|
|
7858
7826
|
const ref = parentDom.childNodes[j] ?? null;
|
|
7859
7827
|
if (newDom !== ref)
|
|
7860
7828
|
parentDom.insertBefore(newDom, ref);
|
|
7861
7829
|
} else {
|
|
7862
|
-
const
|
|
7863
|
-
|
|
7864
|
-
const ref = parentDom.childNodes[j] ?? null;
|
|
7865
|
-
parentDom.insertBefore(dom, ref);
|
|
7866
|
-
}
|
|
7830
|
+
const ref = parentDom.childNodes[j] ?? null;
|
|
7831
|
+
parentDom.insertBefore(newChild.toDom(opts), ref);
|
|
7867
7832
|
}
|
|
7868
7833
|
}
|
|
7869
7834
|
for (let i = oldChilds.length - 1;i >= 0; i--) {
|
|
@@ -7876,24 +7841,16 @@ var renderCache = new WeakMap;
|
|
|
7876
7841
|
function render(vnode, container, options) {
|
|
7877
7842
|
const cached = renderCache.get(container);
|
|
7878
7843
|
const isFragment = vnode instanceof VFragment;
|
|
7879
|
-
if (cached) {
|
|
7880
|
-
const
|
|
7881
|
-
|
|
7882
|
-
|
|
7883
|
-
|
|
7884
|
-
const domToCache = isFragment ? container : newDom;
|
|
7885
|
-
renderCache.set(container, { vnode, dom: domToCache });
|
|
7886
|
-
return newDom;
|
|
7887
|
-
}
|
|
7888
|
-
renderCache.delete(container);
|
|
7844
|
+
if (cached && cached.vnode instanceof VFragment === isFragment) {
|
|
7845
|
+
const oldDom = isFragment ? container : cached.dom;
|
|
7846
|
+
const newDom = morphNode(oldDom, cached.vnode, vnode, options);
|
|
7847
|
+
renderCache.set(container, { vnode, dom: isFragment ? container : newDom });
|
|
7848
|
+
return newDom;
|
|
7889
7849
|
}
|
|
7850
|
+
renderCache.delete(container);
|
|
7890
7851
|
const domNode = vnode.toDom(options);
|
|
7891
|
-
|
|
7892
|
-
|
|
7893
|
-
container.appendChild(domNode);
|
|
7894
|
-
const domToCache = isFragment ? container : domNode;
|
|
7895
|
-
renderCache.set(container, { vnode, dom: domToCache });
|
|
7896
|
-
}
|
|
7852
|
+
container.replaceChildren(domNode);
|
|
7853
|
+
renderCache.set(container, { vnode, dom: isFragment ? container : domNode });
|
|
7897
7854
|
return domNode;
|
|
7898
7855
|
}
|
|
7899
7856
|
function h(tagName, properties, children) {
|
|
@@ -8020,30 +7977,28 @@ function checkEventModifiers(lx, view) {
|
|
|
8020
7977
|
}
|
|
8021
7978
|
}
|
|
8022
7979
|
}
|
|
7980
|
+
var KNOWN_HANDLER_NAMES = new Set([
|
|
7981
|
+
"value",
|
|
7982
|
+
"valueAsInt",
|
|
7983
|
+
"valueAsFloat",
|
|
7984
|
+
"target",
|
|
7985
|
+
"event",
|
|
7986
|
+
"isAlt",
|
|
7987
|
+
"isShift",
|
|
7988
|
+
"isCtrl",
|
|
7989
|
+
"isCmd",
|
|
7990
|
+
"key",
|
|
7991
|
+
"keyCode",
|
|
7992
|
+
"isUpKey",
|
|
7993
|
+
"isDownKey",
|
|
7994
|
+
"isSend",
|
|
7995
|
+
"isCancel",
|
|
7996
|
+
"isTabKey",
|
|
7997
|
+
"ctx",
|
|
7998
|
+
"dragInfo"
|
|
7999
|
+
]);
|
|
8023
8000
|
function isKnownHandlerName(name) {
|
|
8024
|
-
|
|
8025
|
-
case "value":
|
|
8026
|
-
case "valueAsInt":
|
|
8027
|
-
case "valueAsFloat":
|
|
8028
|
-
case "target":
|
|
8029
|
-
case "event":
|
|
8030
|
-
case "isAlt":
|
|
8031
|
-
case "isShift":
|
|
8032
|
-
case "isCtrl":
|
|
8033
|
-
case "isCmd":
|
|
8034
|
-
case "key":
|
|
8035
|
-
case "keyCode":
|
|
8036
|
-
case "isUpKey":
|
|
8037
|
-
case "isDownKey":
|
|
8038
|
-
case "isSend":
|
|
8039
|
-
case "isCancel":
|
|
8040
|
-
case "isTabKey":
|
|
8041
|
-
case "ctx":
|
|
8042
|
-
case "dragInfo":
|
|
8043
|
-
return true;
|
|
8044
|
-
default:
|
|
8045
|
-
return false;
|
|
8046
|
-
}
|
|
8001
|
+
return KNOWN_HANDLER_NAMES.has(name);
|
|
8047
8002
|
}
|
|
8048
8003
|
function checkKnownHandlerNames(lx, view, Comp) {
|
|
8049
8004
|
const { computed, scope, Class } = Comp;
|
|
@@ -8141,7 +8096,7 @@ function checkConsistentAttrs(lx, Comp) {
|
|
|
8141
8096
|
if (attrs instanceof DynAttrs) {
|
|
8142
8097
|
for (const attr2 of attrs.items) {
|
|
8143
8098
|
if (attr2 instanceof Attr) {
|
|
8144
|
-
checkConsistentAttrVal(lx, attr2.
|
|
8099
|
+
checkConsistentAttrVal(lx, attr2.val, fields, proto, computed, scope);
|
|
8145
8100
|
}
|
|
8146
8101
|
}
|
|
8147
8102
|
}
|