tutuca 0.9.11 → 0.9.13
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 +180 -224
- package/dist/tutuca-dev.min.js +3 -3
- package/dist/tutuca-extra.js +158 -200
- package/dist/tutuca-extra.min.js +3 -3
- package/dist/tutuca.js +152 -194
- 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) {
|
|
@@ -1205,7 +1202,8 @@ class RenderNode extends RenderViewId {
|
|
|
1205
1202
|
|
|
1206
1203
|
class RenderItNode extends RenderViewId {
|
|
1207
1204
|
render(stack, rx) {
|
|
1208
|
-
|
|
1205
|
+
const newStack = stack.enter(stack.it, {}, true);
|
|
1206
|
+
return rx.renderIt(newStack, this.nodeId, "", this.viewId);
|
|
1209
1207
|
}
|
|
1210
1208
|
pathInNext = true;
|
|
1211
1209
|
}
|
|
@@ -1400,7 +1398,7 @@ class ParseContext {
|
|
|
1400
1398
|
const slots = { _: new FragmentNode(anySlot) };
|
|
1401
1399
|
for (const child of childs) {
|
|
1402
1400
|
if (child instanceof SlotNode) {
|
|
1403
|
-
slots[child.val.
|
|
1401
|
+
slots[child.val.val] = child.node;
|
|
1404
1402
|
} else if (!(child instanceof TextNode) || !child.isWhiteSpace()) {
|
|
1405
1403
|
anySlot.push(child);
|
|
1406
1404
|
}
|
|
@@ -1664,18 +1662,15 @@ class Components {
|
|
|
1664
1662
|
const comp = this.getCompFor(v);
|
|
1665
1663
|
return comp ? comp.on.stackEnter : defaultOnStackEnter;
|
|
1666
1664
|
}
|
|
1667
|
-
|
|
1668
|
-
return this.getCompFor(v)?.
|
|
1669
|
-
}
|
|
1670
|
-
getAlterHandlerFor(v, name) {
|
|
1671
|
-
return this.getCompFor(v)?.alter[name] ?? null;
|
|
1665
|
+
getHandlerFor(v, name, key) {
|
|
1666
|
+
return this.getCompFor(v)?.[key][name] ?? null;
|
|
1672
1667
|
}
|
|
1673
1668
|
getRequestFor(v, name) {
|
|
1674
1669
|
const comp = this.getCompFor(v);
|
|
1675
1670
|
return comp ? comp.scope.lookupRequest(name) : null;
|
|
1676
1671
|
}
|
|
1677
1672
|
lookupComputed(v, name) {
|
|
1678
|
-
const fn = this.
|
|
1673
|
+
const fn = this.getHandlerFor(v, name, "computed");
|
|
1679
1674
|
return fn ? this.computedCache.getKey(v, name, fn) : null;
|
|
1680
1675
|
}
|
|
1681
1676
|
compileStyles() {
|
|
@@ -1954,11 +1949,8 @@ class Stack {
|
|
|
1954
1949
|
const node = this.binds.head.isFrame ? this.binds.head : this.binds.tail.head;
|
|
1955
1950
|
return this.comps.lookupComputed(node.it, name);
|
|
1956
1951
|
}
|
|
1957
|
-
|
|
1958
|
-
return this.comps.
|
|
1959
|
-
}
|
|
1960
|
-
getAlterHandler(name) {
|
|
1961
|
-
return this.comps.getAlterHandlerFor(this.it, name);
|
|
1952
|
+
getHandlerFor(name, key) {
|
|
1953
|
+
return this.comps.getHandlerFor(this.it, name, key);
|
|
1962
1954
|
}
|
|
1963
1955
|
lookupRequest(name) {
|
|
1964
1956
|
return this.comps.getRequestFor(this.it, name);
|
|
@@ -1976,22 +1968,22 @@ class Stack {
|
|
|
1976
1968
|
|
|
1977
1969
|
// src/transactor.js
|
|
1978
1970
|
class State {
|
|
1979
|
-
constructor(
|
|
1980
|
-
this.
|
|
1971
|
+
constructor(val) {
|
|
1972
|
+
this.val = val;
|
|
1981
1973
|
this.changeSubs = [];
|
|
1982
1974
|
}
|
|
1983
1975
|
onChange(cb) {
|
|
1984
1976
|
this.changeSubs.push(cb);
|
|
1985
1977
|
}
|
|
1986
|
-
set(
|
|
1987
|
-
const old = this.
|
|
1988
|
-
this.
|
|
1978
|
+
set(val, info) {
|
|
1979
|
+
const old = this.val;
|
|
1980
|
+
this.val = val;
|
|
1989
1981
|
for (const sub of this.changeSubs) {
|
|
1990
|
-
sub({
|
|
1982
|
+
sub({ val, old, info, timestamp: Date.now() });
|
|
1991
1983
|
}
|
|
1992
1984
|
}
|
|
1993
1985
|
update(fn, info) {
|
|
1994
|
-
return this.set(fn(this.
|
|
1986
|
+
return this.set(fn(this.val), info);
|
|
1995
1987
|
}
|
|
1996
1988
|
}
|
|
1997
1989
|
|
|
@@ -2015,7 +2007,7 @@ class Transactor {
|
|
|
2015
2007
|
return this.pushTransaction(new BubbleEvent(path, this, name, args, parent, newOpts));
|
|
2016
2008
|
}
|
|
2017
2009
|
async pushRequest(path, name, args = [], opts = {}, parent = null) {
|
|
2018
|
-
const curRoot = this.state.
|
|
2010
|
+
const curRoot = this.state.val;
|
|
2019
2011
|
const curLeaf = path.lookup(curRoot);
|
|
2020
2012
|
const handler = this.comps.getRequestFor(curLeaf, name) ?? mkReq404(name);
|
|
2021
2013
|
const resHandlerName = opts?.onResName ?? name;
|
|
@@ -2045,7 +2037,7 @@ class Transactor {
|
|
|
2045
2037
|
}
|
|
2046
2038
|
}
|
|
2047
2039
|
transact(transaction) {
|
|
2048
|
-
const curState = this.state.
|
|
2040
|
+
const curState = this.state.val;
|
|
2049
2041
|
const newState = transaction.run(curState, this.comps);
|
|
2050
2042
|
if (newState !== undefined) {
|
|
2051
2043
|
this.state.set(newState, { transaction });
|
|
@@ -2068,10 +2060,10 @@ function nullHandler() {
|
|
|
2068
2060
|
}
|
|
2069
2061
|
|
|
2070
2062
|
class Transaction {
|
|
2071
|
-
constructor(path, transactor) {
|
|
2063
|
+
constructor(path, transactor, parentTransaction = null) {
|
|
2072
2064
|
this.path = path;
|
|
2073
2065
|
this.transactor = transactor;
|
|
2074
|
-
this.parentTransaction =
|
|
2066
|
+
this.parentTransaction = parentTransaction;
|
|
2075
2067
|
this._task = null;
|
|
2076
2068
|
}
|
|
2077
2069
|
get task() {
|
|
@@ -2229,7 +2221,7 @@ class Task {
|
|
|
2229
2221
|
constructor(info) {
|
|
2230
2222
|
this.info = info;
|
|
2231
2223
|
this.deps = [];
|
|
2232
|
-
this.
|
|
2224
|
+
this.val = this.resolve = this.reject = null;
|
|
2233
2225
|
this.promise = new Promise((res, rej) => {
|
|
2234
2226
|
this.resolve = res;
|
|
2235
2227
|
this.reject = rej;
|
|
@@ -2241,8 +2233,8 @@ class Task {
|
|
|
2241
2233
|
this.deps.push(task);
|
|
2242
2234
|
task.promise.then((_) => this._check());
|
|
2243
2235
|
}
|
|
2244
|
-
complete(
|
|
2245
|
-
this.
|
|
2236
|
+
complete(val) {
|
|
2237
|
+
this.val = val;
|
|
2246
2238
|
this._check();
|
|
2247
2239
|
}
|
|
2248
2240
|
_check() {
|
|
@@ -2345,7 +2337,7 @@ class App {
|
|
|
2345
2337
|
}
|
|
2346
2338
|
} else if (isDragStart) {
|
|
2347
2339
|
e.target.dataset.dragging = 1;
|
|
2348
|
-
const rootValue = this.state.
|
|
2340
|
+
const rootValue = this.state.val;
|
|
2349
2341
|
const value = path.lookup(rootValue);
|
|
2350
2342
|
const type = e.target.dataset.dragtype ?? "?";
|
|
2351
2343
|
const stack = path.buildStack(this.makeStack(rootValue));
|
|
@@ -2371,7 +2363,7 @@ class App {
|
|
|
2371
2363
|
}
|
|
2372
2364
|
}
|
|
2373
2365
|
render() {
|
|
2374
|
-
const root = this.state.
|
|
2366
|
+
const root = this.state.val;
|
|
2375
2367
|
const stack = this.makeStack(root);
|
|
2376
2368
|
return this.renderFn(this.renderer.renderRoot(stack, root), this.rootNode);
|
|
2377
2369
|
}
|
|
@@ -2397,7 +2389,7 @@ class App {
|
|
|
2397
2389
|
this.rootNode.addEventListener(name, this);
|
|
2398
2390
|
}
|
|
2399
2391
|
this.onChange((info) => {
|
|
2400
|
-
if (info.
|
|
2392
|
+
if (info.val !== info.old) {
|
|
2401
2393
|
this.render();
|
|
2402
2394
|
}
|
|
2403
2395
|
});
|
|
@@ -2468,11 +2460,11 @@ function getClosestDropTarget(target, rootNode, count) {
|
|
|
2468
2460
|
}
|
|
2469
2461
|
|
|
2470
2462
|
class DragInfo {
|
|
2471
|
-
constructor(path, stack, e,
|
|
2463
|
+
constructor(path, stack, e, val, type, node) {
|
|
2472
2464
|
this.path = path;
|
|
2473
2465
|
this.stack = stack;
|
|
2474
2466
|
this.e = e;
|
|
2475
|
-
this.
|
|
2467
|
+
this.val = val;
|
|
2476
2468
|
this.type = type;
|
|
2477
2469
|
this.node = node;
|
|
2478
2470
|
}
|
|
@@ -2505,12 +2497,12 @@ class ParseCtxClassSetCollector extends ParseContext {
|
|
|
2505
2497
|
if (attr.name !== "class") {
|
|
2506
2498
|
continue;
|
|
2507
2499
|
}
|
|
2508
|
-
const {
|
|
2500
|
+
const { val, thenVal, elseVal } = attr;
|
|
2509
2501
|
if (thenVal !== undefined) {
|
|
2510
2502
|
this._maybeAddVal(thenVal);
|
|
2511
2503
|
this._maybeAddVal(elseVal);
|
|
2512
2504
|
} else {
|
|
2513
|
-
this._maybeAddVal(
|
|
2505
|
+
this._maybeAddVal(val);
|
|
2514
2506
|
}
|
|
2515
2507
|
}
|
|
2516
2508
|
} else {
|
|
@@ -2521,15 +2513,15 @@ class ParseCtxClassSetCollector extends ParseContext {
|
|
|
2521
2513
|
}
|
|
2522
2514
|
}
|
|
2523
2515
|
_maybeAddVal(value) {
|
|
2524
|
-
if (!this._maybeAddStrTpl(value) && typeof value?.
|
|
2525
|
-
this._addClasses(value.
|
|
2516
|
+
if (!this._maybeAddStrTpl(value) && typeof value?.val === "string") {
|
|
2517
|
+
this._addClasses(value.val);
|
|
2526
2518
|
}
|
|
2527
2519
|
}
|
|
2528
2520
|
_maybeAddStrTpl(value) {
|
|
2529
2521
|
if (value?.vals !== undefined) {
|
|
2530
2522
|
for (const val of value.vals) {
|
|
2531
|
-
if (val instanceof ConstVal && val.
|
|
2532
|
-
this._addClasses(val.
|
|
2523
|
+
if (val instanceof ConstVal && val.val !== "") {
|
|
2524
|
+
this._addClasses(val.val);
|
|
2533
2525
|
}
|
|
2534
2526
|
}
|
|
2535
2527
|
return true;
|
|
@@ -7327,7 +7319,7 @@ class Renderer {
|
|
|
7327
7319
|
this.comps = comps;
|
|
7328
7320
|
this.h = h;
|
|
7329
7321
|
this.fragment = fragment;
|
|
7330
|
-
this.
|
|
7322
|
+
this.renderComment = comment;
|
|
7331
7323
|
this.renderFn = renderFn;
|
|
7332
7324
|
this.getSeqInfo = getSeqInfo ?? basicGetSeqInfo;
|
|
7333
7325
|
this.cache = cache ?? new WeakMapDomCache;
|
|
@@ -7353,13 +7345,13 @@ class Renderer {
|
|
|
7353
7345
|
return dom.innerHTML;
|
|
7354
7346
|
}
|
|
7355
7347
|
renderRoot(stack, val, viewName = null) {
|
|
7356
|
-
const
|
|
7357
|
-
const nid =
|
|
7358
|
-
return
|
|
7348
|
+
const comp = this.comps.getCompFor(val);
|
|
7349
|
+
const nid = comp.getView(viewName).anode.nodeId ?? null;
|
|
7350
|
+
return comp ? this._rValComp(stack, val, comp, nid, "ROOT", viewName) : null;
|
|
7359
7351
|
}
|
|
7360
7352
|
renderIt(stack, nodeId, key, viewName) {
|
|
7361
|
-
const
|
|
7362
|
-
return
|
|
7353
|
+
const comp = this.comps.getCompFor(stack.it);
|
|
7354
|
+
return comp ? this._rValComp(stack, stack.it, comp, nodeId, key, viewName) : null;
|
|
7363
7355
|
}
|
|
7364
7356
|
_rValComp(stack, val, comp, nid, key, viewName) {
|
|
7365
7357
|
const cacheKey = `${viewName ?? stack.viewsId ?? ""}${nid}-${key}`;
|
|
@@ -7369,10 +7361,13 @@ class Renderer {
|
|
|
7369
7361
|
}
|
|
7370
7362
|
const view = viewName ? comp.getView(viewName) : stack.lookupBestView(comp.views, "main");
|
|
7371
7363
|
const meta = this.renderMetadata("Comp", { nid });
|
|
7372
|
-
const dom = this.renderFragment([meta,
|
|
7364
|
+
const dom = this.renderFragment([meta, this.renderView(view, stack)]);
|
|
7373
7365
|
this.cache.set(val, cacheKey, dom);
|
|
7374
7366
|
return dom;
|
|
7375
7367
|
}
|
|
7368
|
+
pushEachEntry(r, nid, attrName, key, dom) {
|
|
7369
|
+
r.push(this.renderMetadata("Each", { nid, [attrName]: key }), dom);
|
|
7370
|
+
}
|
|
7376
7371
|
renderEach(stack, iterInfo, nodeId, viewName) {
|
|
7377
7372
|
const { seq, filter, loopWith } = iterInfo.eval(stack);
|
|
7378
7373
|
const [attrName, gen] = this.getSeqInfo(seq);
|
|
@@ -7382,16 +7377,14 @@ class Renderer {
|
|
|
7382
7377
|
if (filter.call(stack.it, key, value, iterData)) {
|
|
7383
7378
|
const newStack = stack.enter(value, { key }, true);
|
|
7384
7379
|
const dom = this.renderIt(newStack, nodeId, key, viewName);
|
|
7385
|
-
|
|
7386
|
-
r.push(dom);
|
|
7380
|
+
this.pushEachEntry(r, nodeId, attrName, key, dom);
|
|
7387
7381
|
}
|
|
7388
7382
|
}
|
|
7389
7383
|
return r;
|
|
7390
7384
|
}
|
|
7391
|
-
renderEachWhen(stack, iterInfo,
|
|
7385
|
+
renderEachWhen(stack, iterInfo, view, nid) {
|
|
7392
7386
|
const { seq, filter, loopWith, enricher } = iterInfo.eval(stack);
|
|
7393
7387
|
const [attrName, gen] = this.getSeqInfo(seq);
|
|
7394
|
-
const hasEnricher = !!enricher;
|
|
7395
7388
|
const r = [];
|
|
7396
7389
|
const iterData = loopWith.call(stack.it, seq);
|
|
7397
7390
|
for (const [key, value] of gen(seq)) {
|
|
@@ -7399,30 +7392,31 @@ class Renderer {
|
|
|
7399
7392
|
const bindings = { key, value };
|
|
7400
7393
|
const cacheKey = `${nid}-${key}`;
|
|
7401
7394
|
let cachedNode;
|
|
7402
|
-
if (
|
|
7395
|
+
if (enricher) {
|
|
7403
7396
|
enricher.call(stack.it, bindings, key, value, iterData);
|
|
7404
7397
|
cachedNode = this.cache.get2(stack.it, value, cacheKey);
|
|
7405
7398
|
} else {
|
|
7406
7399
|
cachedNode = this.cache.get(value, cacheKey);
|
|
7407
7400
|
}
|
|
7408
7401
|
if (cachedNode) {
|
|
7409
|
-
|
|
7410
|
-
r.push(cachedNode);
|
|
7402
|
+
this.pushEachEntry(r, nid, attrName, key, cachedNode);
|
|
7411
7403
|
continue;
|
|
7412
7404
|
}
|
|
7413
7405
|
const newStack = stack.enter(value, bindings, false);
|
|
7414
|
-
const dom =
|
|
7415
|
-
|
|
7416
|
-
if (
|
|
7406
|
+
const dom = this.renderView(view, newStack);
|
|
7407
|
+
this.pushEachEntry(r, nid, attrName, key, dom);
|
|
7408
|
+
if (enricher) {
|
|
7417
7409
|
this.cache.set2(stack.it, value, cacheKey, dom);
|
|
7418
7410
|
} else {
|
|
7419
7411
|
this.cache.set(value, cacheKey, dom);
|
|
7420
7412
|
}
|
|
7421
|
-
r.push(dom);
|
|
7422
7413
|
}
|
|
7423
7414
|
}
|
|
7424
7415
|
return r;
|
|
7425
7416
|
}
|
|
7417
|
+
renderView(view, stack) {
|
|
7418
|
+
return view.render(stack, this);
|
|
7419
|
+
}
|
|
7426
7420
|
renderText(text) {
|
|
7427
7421
|
return text;
|
|
7428
7422
|
}
|
|
@@ -7430,10 +7424,7 @@ class Renderer {
|
|
|
7430
7424
|
info.$ = type;
|
|
7431
7425
|
return this.renderComment(`§${JSON.stringify(info)}§`);
|
|
7432
7426
|
}
|
|
7433
|
-
|
|
7434
|
-
return this.comment(text);
|
|
7435
|
-
}
|
|
7436
|
-
renderEmpty(_text) {
|
|
7427
|
+
renderEmpty() {
|
|
7437
7428
|
return null;
|
|
7438
7429
|
}
|
|
7439
7430
|
renderTag(tagName, attrs, childs) {
|
|
@@ -7560,6 +7551,7 @@ seqInfoByClass.set(KList, ["data-sk", klistEntries]);
|
|
|
7560
7551
|
// src/vdom.js
|
|
7561
7552
|
var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a");
|
|
7562
7553
|
var isObject = (v) => v !== null && typeof v === "object";
|
|
7554
|
+
var prototypesDiffer = (a, b) => Object.getPrototypeOf(a) !== Object.getPrototypeOf(b);
|
|
7563
7555
|
function applyProperties(node, props, previous) {
|
|
7564
7556
|
for (const propName in props) {
|
|
7565
7557
|
const propValue = props[propName];
|
|
@@ -7581,41 +7573,48 @@ function applyProperties(node, props, previous) {
|
|
|
7581
7573
|
function removeProperty(node, propName, previous) {
|
|
7582
7574
|
const previousValue = previous[propName];
|
|
7583
7575
|
if (propName === "dangerouslySetInnerHTML") {
|
|
7584
|
-
node.
|
|
7576
|
+
node.replaceChildren();
|
|
7577
|
+
} else if (propName === "className") {
|
|
7578
|
+
node.removeAttribute("class");
|
|
7579
|
+
} else if (propName === "htmlFor") {
|
|
7580
|
+
node.removeAttribute("for");
|
|
7585
7581
|
} else if (typeof previousValue === "string" || isHtmlAttribute(propName)) {
|
|
7586
|
-
|
|
7587
|
-
node.removeAttribute(attrName);
|
|
7582
|
+
node.removeAttribute(propName);
|
|
7588
7583
|
} else {
|
|
7589
7584
|
node[propName] = null;
|
|
7590
7585
|
}
|
|
7591
7586
|
}
|
|
7592
7587
|
function patchObject(node, previous, propName, propValue) {
|
|
7593
7588
|
const previousValue = previous?.[propName];
|
|
7594
|
-
if (isObject(previousValue) &&
|
|
7589
|
+
if (isObject(previousValue) && prototypesDiffer(previousValue, propValue)) {
|
|
7595
7590
|
node[propName] = propValue;
|
|
7596
7591
|
return;
|
|
7597
7592
|
}
|
|
7598
|
-
|
|
7599
|
-
if (!isObject(current)) {
|
|
7593
|
+
if (!isObject(node[propName])) {
|
|
7600
7594
|
node[propName] = {};
|
|
7601
|
-
current = node[propName];
|
|
7602
7595
|
}
|
|
7603
|
-
const target =
|
|
7596
|
+
const target = node[propName];
|
|
7604
7597
|
for (const k in propValue) {
|
|
7605
7598
|
target[k] = propValue[k];
|
|
7606
7599
|
}
|
|
7607
7600
|
}
|
|
7608
7601
|
|
|
7609
7602
|
class VBase {
|
|
7610
|
-
isEqualTo(other) {
|
|
7611
|
-
return this === other;
|
|
7612
|
-
}
|
|
7613
|
-
toDom(_opts) {
|
|
7614
|
-
return null;
|
|
7615
|
-
}
|
|
7616
7603
|
}
|
|
7617
7604
|
var getKey = (child) => child instanceof VNode2 ? child.key : undefined;
|
|
7618
7605
|
var isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function";
|
|
7606
|
+
function childsEqual(a, b) {
|
|
7607
|
+
for (let i = 0;i < a.length; i++) {
|
|
7608
|
+
if (!a[i].isEqualTo(b[i]))
|
|
7609
|
+
return false;
|
|
7610
|
+
}
|
|
7611
|
+
return true;
|
|
7612
|
+
}
|
|
7613
|
+
function appendChildNodes(parent, childs, opts) {
|
|
7614
|
+
for (const child of childs) {
|
|
7615
|
+
parent.appendChild(child.toDom(opts));
|
|
7616
|
+
}
|
|
7617
|
+
}
|
|
7619
7618
|
function addChild(normalizedChildren, child) {
|
|
7620
7619
|
if (child == null)
|
|
7621
7620
|
return;
|
|
@@ -7679,21 +7678,11 @@ class VFragment extends VBase {
|
|
|
7679
7678
|
if (!(other instanceof VFragment) || this.childs.length !== other.childs.length) {
|
|
7680
7679
|
return false;
|
|
7681
7680
|
}
|
|
7682
|
-
|
|
7683
|
-
if (!this.childs[i].isEqualTo(other.childs[i])) {
|
|
7684
|
-
return false;
|
|
7685
|
-
}
|
|
7686
|
-
}
|
|
7687
|
-
return true;
|
|
7681
|
+
return childsEqual(this.childs, other.childs);
|
|
7688
7682
|
}
|
|
7689
7683
|
toDom(opts) {
|
|
7690
7684
|
const fragment = opts.document.createDocumentFragment();
|
|
7691
|
-
|
|
7692
|
-
const childNode = child.toDom(opts);
|
|
7693
|
-
if (childNode) {
|
|
7694
|
-
fragment.appendChild(childNode);
|
|
7695
|
-
}
|
|
7696
|
-
}
|
|
7685
|
+
appendChildNodes(fragment, this.childs, opts);
|
|
7697
7686
|
return fragment;
|
|
7698
7687
|
}
|
|
7699
7688
|
}
|
|
@@ -7724,23 +7713,13 @@ class VNode2 extends VBase {
|
|
|
7724
7713
|
return false;
|
|
7725
7714
|
}
|
|
7726
7715
|
}
|
|
7727
|
-
|
|
7728
|
-
if (!this.childs[i].isEqualTo(other.childs[i])) {
|
|
7729
|
-
return false;
|
|
7730
|
-
}
|
|
7731
|
-
}
|
|
7732
|
-
return true;
|
|
7716
|
+
return childsEqual(this.childs, other.childs);
|
|
7733
7717
|
}
|
|
7734
7718
|
toDom(opts) {
|
|
7735
7719
|
const doc = opts.document;
|
|
7736
7720
|
const node = this.namespace === null ? doc.createElement(this.tag) : doc.createElementNS(this.namespace, this.tag);
|
|
7737
7721
|
applyProperties(node, this.attrs, {});
|
|
7738
|
-
|
|
7739
|
-
const childNode = child.toDom(opts);
|
|
7740
|
-
if (childNode) {
|
|
7741
|
-
node.appendChild(childNode);
|
|
7742
|
-
}
|
|
7743
|
-
}
|
|
7722
|
+
appendChildNodes(node, this.childs, opts);
|
|
7744
7723
|
return node;
|
|
7745
7724
|
}
|
|
7746
7725
|
}
|
|
@@ -7754,8 +7733,10 @@ function diffProps(a, b) {
|
|
|
7754
7733
|
}
|
|
7755
7734
|
const aValue = a[aKey];
|
|
7756
7735
|
const bValue = b[aKey];
|
|
7757
|
-
if (aValue === bValue)
|
|
7758
|
-
|
|
7736
|
+
if (aValue === bValue)
|
|
7737
|
+
continue;
|
|
7738
|
+
if (isObject(aValue) && isObject(bValue)) {
|
|
7739
|
+
if (prototypesDiffer(bValue, aValue)) {
|
|
7759
7740
|
diff ??= {};
|
|
7760
7741
|
diff[aKey] = bValue;
|
|
7761
7742
|
} else {
|
|
@@ -7778,55 +7759,44 @@ function diffProps(a, b) {
|
|
|
7778
7759
|
}
|
|
7779
7760
|
return diff;
|
|
7780
7761
|
}
|
|
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
7762
|
function morphNode(domNode, source, target, opts) {
|
|
7791
7763
|
if (source === target || source.isEqualTo(target))
|
|
7792
7764
|
return domNode;
|
|
7793
|
-
|
|
7794
|
-
|
|
7795
|
-
|
|
7796
|
-
|
|
7797
|
-
|
|
7798
|
-
|
|
7799
|
-
if (
|
|
7800
|
-
|
|
7765
|
+
const type = source.nodeType;
|
|
7766
|
+
if (type === target.nodeType) {
|
|
7767
|
+
if (type === 3 || type === 8) {
|
|
7768
|
+
domNode.data = target.text;
|
|
7769
|
+
return domNode;
|
|
7770
|
+
}
|
|
7771
|
+
if (type === 1 && source.tag === target.tag && source.namespace === target.namespace && source.key === target.key) {
|
|
7772
|
+
const propsDiff = diffProps(source.attrs, target.attrs);
|
|
7773
|
+
if (propsDiff)
|
|
7774
|
+
applyProperties(domNode, propsDiff, source.attrs);
|
|
7775
|
+
if (!target.attrs.dangerouslySetInnerHTML) {
|
|
7776
|
+
morphChildren(domNode, source.childs, target.childs, opts);
|
|
7777
|
+
}
|
|
7778
|
+
return domNode;
|
|
7801
7779
|
}
|
|
7802
|
-
if (
|
|
7803
|
-
morphChildren(domNode, source.childs, target.childs,
|
|
7780
|
+
if (type === 11) {
|
|
7781
|
+
morphChildren(domNode, source.childs, target.childs, opts);
|
|
7782
|
+
return domNode;
|
|
7804
7783
|
}
|
|
7805
|
-
return domNode;
|
|
7806
|
-
}
|
|
7807
|
-
if (bothInstanceOf(source, target, VFragment)) {
|
|
7808
|
-
morphChildren(domNode, source.childs, target.childs, null, opts);
|
|
7809
|
-
return domNode;
|
|
7810
7784
|
}
|
|
7811
|
-
|
|
7785
|
+
const newNode = target.toDom(opts);
|
|
7786
|
+
domNode.parentNode?.replaceChild(newNode, domNode);
|
|
7787
|
+
return newNode;
|
|
7812
7788
|
}
|
|
7813
|
-
function morphChildren(parentDom, oldChilds, newChilds,
|
|
7789
|
+
function morphChildren(parentDom, oldChilds, newChilds, opts) {
|
|
7814
7790
|
if (oldChilds.length === 0) {
|
|
7815
|
-
|
|
7816
|
-
const node = child.toDom(opts);
|
|
7817
|
-
if (node)
|
|
7818
|
-
parentDom.appendChild(node);
|
|
7819
|
-
}
|
|
7791
|
+
appendChildNodes(parentDom, newChilds, opts);
|
|
7820
7792
|
return;
|
|
7821
7793
|
}
|
|
7822
7794
|
if (newChilds.length === 0) {
|
|
7823
|
-
|
|
7824
|
-
parentDom.removeChild(parentDom.firstChild);
|
|
7825
|
-
}
|
|
7795
|
+
parentDom.replaceChildren();
|
|
7826
7796
|
return;
|
|
7827
7797
|
}
|
|
7828
7798
|
const domNodes = Array.from(parentDom.childNodes);
|
|
7829
|
-
const oldKeyMap =
|
|
7799
|
+
const oldKeyMap = Object.create(null);
|
|
7830
7800
|
for (let i = 0;i < oldChilds.length; i++) {
|
|
7831
7801
|
const key = getKey(oldChilds[i]);
|
|
7832
7802
|
if (key != null)
|
|
@@ -7853,17 +7823,13 @@ function morphChildren(parentDom, oldChilds, newChilds, _parentTag, opts) {
|
|
|
7853
7823
|
}
|
|
7854
7824
|
if (oldIdx >= 0) {
|
|
7855
7825
|
used[oldIdx] = 1;
|
|
7856
|
-
const
|
|
7857
|
-
const newDom = morphNode(dom, oldChilds[oldIdx], newChild, opts);
|
|
7826
|
+
const newDom = morphNode(domNodes[oldIdx], oldChilds[oldIdx], newChild, opts);
|
|
7858
7827
|
const ref = parentDom.childNodes[j] ?? null;
|
|
7859
7828
|
if (newDom !== ref)
|
|
7860
7829
|
parentDom.insertBefore(newDom, ref);
|
|
7861
7830
|
} else {
|
|
7862
|
-
const
|
|
7863
|
-
|
|
7864
|
-
const ref = parentDom.childNodes[j] ?? null;
|
|
7865
|
-
parentDom.insertBefore(dom, ref);
|
|
7866
|
-
}
|
|
7831
|
+
const ref = parentDom.childNodes[j] ?? null;
|
|
7832
|
+
parentDom.insertBefore(newChild.toDom(opts), ref);
|
|
7867
7833
|
}
|
|
7868
7834
|
}
|
|
7869
7835
|
for (let i = oldChilds.length - 1;i >= 0; i--) {
|
|
@@ -7876,24 +7842,16 @@ var renderCache = new WeakMap;
|
|
|
7876
7842
|
function render(vnode, container, options) {
|
|
7877
7843
|
const cached = renderCache.get(container);
|
|
7878
7844
|
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);
|
|
7845
|
+
if (cached && cached.vnode instanceof VFragment === isFragment) {
|
|
7846
|
+
const oldDom = isFragment ? container : cached.dom;
|
|
7847
|
+
const newDom = morphNode(oldDom, cached.vnode, vnode, options);
|
|
7848
|
+
renderCache.set(container, { vnode, dom: isFragment ? container : newDom });
|
|
7849
|
+
return newDom;
|
|
7889
7850
|
}
|
|
7851
|
+
renderCache.delete(container);
|
|
7890
7852
|
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
|
-
}
|
|
7853
|
+
container.replaceChildren(domNode);
|
|
7854
|
+
renderCache.set(container, { vnode, dom: isFragment ? container : domNode });
|
|
7897
7855
|
return domNode;
|
|
7898
7856
|
}
|
|
7899
7857
|
function h(tagName, properties, children) {
|
|
@@ -8020,30 +7978,28 @@ function checkEventModifiers(lx, view) {
|
|
|
8020
7978
|
}
|
|
8021
7979
|
}
|
|
8022
7980
|
}
|
|
7981
|
+
var KNOWN_HANDLER_NAMES = new Set([
|
|
7982
|
+
"value",
|
|
7983
|
+
"valueAsInt",
|
|
7984
|
+
"valueAsFloat",
|
|
7985
|
+
"target",
|
|
7986
|
+
"event",
|
|
7987
|
+
"isAlt",
|
|
7988
|
+
"isShift",
|
|
7989
|
+
"isCtrl",
|
|
7990
|
+
"isCmd",
|
|
7991
|
+
"key",
|
|
7992
|
+
"keyCode",
|
|
7993
|
+
"isUpKey",
|
|
7994
|
+
"isDownKey",
|
|
7995
|
+
"isSend",
|
|
7996
|
+
"isCancel",
|
|
7997
|
+
"isTabKey",
|
|
7998
|
+
"ctx",
|
|
7999
|
+
"dragInfo"
|
|
8000
|
+
]);
|
|
8023
8001
|
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
|
-
}
|
|
8002
|
+
return KNOWN_HANDLER_NAMES.has(name);
|
|
8047
8003
|
}
|
|
8048
8004
|
function checkKnownHandlerNames(lx, view, Comp) {
|
|
8049
8005
|
const { computed, scope, Class } = Comp;
|
|
@@ -8141,7 +8097,7 @@ function checkConsistentAttrs(lx, Comp) {
|
|
|
8141
8097
|
if (attrs instanceof DynAttrs) {
|
|
8142
8098
|
for (const attr2 of attrs.items) {
|
|
8143
8099
|
if (attr2 instanceof Attr) {
|
|
8144
|
-
checkConsistentAttrVal(lx, attr2.
|
|
8100
|
+
checkConsistentAttrVal(lx, attr2.val, fields, proto, computed, scope);
|
|
8145
8101
|
}
|
|
8146
8102
|
}
|
|
8147
8103
|
}
|