veles 0.0.5 → 0.0.7
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/{chunk-V3EV7UG6.js → chunk-ILNLS6QO.js} +14 -11
- package/dist/chunk-MH6DPZ3V.js +490 -0
- package/dist/chunk-X6QYYW56.js +15 -0
- package/dist/create-state-Bo6TT4qP.d.ts +33 -0
- package/dist/create-state-D1JASFVs.d.cts +33 -0
- package/dist/fragment-CU26z590.d.cts +9 -0
- package/dist/fragment-IVSEC7-Q.d.ts +9 -0
- package/dist/index.cjs +318 -235
- package/dist/index.d.cts +4 -45
- package/dist/index.d.ts +4 -45
- package/dist/index.js +7 -407
- package/dist/jsx-runtime.cjs +1 -1
- package/dist/jsx-runtime.d.cts +2 -2
- package/dist/jsx-runtime.d.ts +2 -2
- package/dist/jsx-runtime.js +4 -2
- package/dist/{fragment-CHmQ0MhU.d.cts → types.d-DgVBp6oa.d.cts} +1 -7
- package/dist/{fragment-CHmQ0MhU.d.ts → types.d-DgVBp6oa.d.ts} +1 -7
- package/dist/utils/index.cjs +814 -0
- package/dist/utils/index.d.cts +18 -0
- package/dist/utils/index.d.ts +18 -0
- package/dist/utils/index.js +37 -0
- package/package.json +6 -1
package/dist/index.cjs
CHANGED
|
@@ -21,7 +21,6 @@ var src_exports = {};
|
|
|
21
21
|
__export(src_exports, {
|
|
22
22
|
Fragment: () => Fragment,
|
|
23
23
|
attachComponent: () => attachComponent,
|
|
24
|
-
combineState: () => combineState,
|
|
25
24
|
createElement: () => createElement,
|
|
26
25
|
createRef: () => createRef,
|
|
27
26
|
createState: () => createState,
|
|
@@ -30,7 +29,7 @@ __export(src_exports, {
|
|
|
30
29
|
});
|
|
31
30
|
module.exports = __toCommonJS(src_exports);
|
|
32
31
|
|
|
33
|
-
// src/
|
|
32
|
+
// src/_utils.ts
|
|
34
33
|
function getComponentVelesNode(component) {
|
|
35
34
|
const componentsTree = [];
|
|
36
35
|
if ("velesStringElement" in component) {
|
|
@@ -70,6 +69,17 @@ function callMountHandlers(component) {
|
|
|
70
69
|
function identity(value1, value2) {
|
|
71
70
|
return value1 === value2;
|
|
72
71
|
}
|
|
72
|
+
function unique(arr) {
|
|
73
|
+
const map = /* @__PURE__ */ new Map();
|
|
74
|
+
const resultArr = [];
|
|
75
|
+
arr.forEach((element) => {
|
|
76
|
+
if (map.has(element))
|
|
77
|
+
return;
|
|
78
|
+
map.set(element, true);
|
|
79
|
+
resultArr.push(element);
|
|
80
|
+
});
|
|
81
|
+
return resultArr;
|
|
82
|
+
}
|
|
73
83
|
|
|
74
84
|
// src/create-element/parse-children.ts
|
|
75
85
|
function parseChildren({
|
|
@@ -336,6 +346,307 @@ function createState(initialValue, subscribeCallback) {
|
|
|
336
346
|
let trackingSelectorElements = [];
|
|
337
347
|
let trackingAttributes = [];
|
|
338
348
|
let trackingIterators = [];
|
|
349
|
+
const _triggerUpdates = () => {
|
|
350
|
+
const newTrackingSelectorElements = [];
|
|
351
|
+
trackingSelectorElements.forEach((selectorTrackingElement) => {
|
|
352
|
+
const { selectedValue, selector, cb, node, comparator } = selectorTrackingElement;
|
|
353
|
+
const newSelectedValue = selector ? selector(value) : value;
|
|
354
|
+
if (comparator(selectedValue, newSelectedValue)) {
|
|
355
|
+
newTrackingSelectorElements.push(selectorTrackingElement);
|
|
356
|
+
return;
|
|
357
|
+
}
|
|
358
|
+
const returnednewNode = cb ? cb(newSelectedValue) : String(newSelectedValue);
|
|
359
|
+
const newNode = !returnednewNode || typeof returnednewNode === "string" ? createTextElement(returnednewNode) : returnednewNode;
|
|
360
|
+
const { velesElementNode: oldVelesElementNode } = getComponentVelesNode(node);
|
|
361
|
+
const { velesElementNode: newVelesElementNode } = getComponentVelesNode(newNode);
|
|
362
|
+
const parentVelesElement = oldVelesElementNode.parentVelesElement;
|
|
363
|
+
const newTrackingSelectorElement = {
|
|
364
|
+
selector,
|
|
365
|
+
selectedValue: newSelectedValue,
|
|
366
|
+
cb,
|
|
367
|
+
node: newNode,
|
|
368
|
+
comparator
|
|
369
|
+
};
|
|
370
|
+
if (parentVelesElement) {
|
|
371
|
+
newVelesElementNode.parentVelesElement = parentVelesElement;
|
|
372
|
+
if ("velesNode" in newVelesElementNode && newVelesElementNode.phantom) {
|
|
373
|
+
const insertAllPhantomChildren = (adjacentNode) => {
|
|
374
|
+
newVelesElementNode.childComponents.forEach(
|
|
375
|
+
(childComponentofPhantom) => {
|
|
376
|
+
if ("velesNode" in childComponentofPhantom) {
|
|
377
|
+
adjacentNode.html.before(childComponentofPhantom.html);
|
|
378
|
+
childComponentofPhantom.parentVelesElement = adjacentNode.parentVelesElement;
|
|
379
|
+
} else {
|
|
380
|
+
const { velesElementNode } = getComponentVelesNode(
|
|
381
|
+
childComponentofPhantom
|
|
382
|
+
);
|
|
383
|
+
if (!velesElementNode) {
|
|
384
|
+
console.error("can't find HTML tree in a component chain");
|
|
385
|
+
} else {
|
|
386
|
+
adjacentNode.html.before(velesElementNode.html);
|
|
387
|
+
velesElementNode.parentVelesElement = adjacentNode.parentVelesElement;
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
);
|
|
392
|
+
};
|
|
393
|
+
if ("velesNode" in oldVelesElementNode && oldVelesElementNode.phantom) {
|
|
394
|
+
let isInserted = false;
|
|
395
|
+
oldVelesElementNode.childComponents.forEach(
|
|
396
|
+
(childComponentofPhantom) => {
|
|
397
|
+
if ("velesNode" in childComponentofPhantom) {
|
|
398
|
+
if (!isInserted) {
|
|
399
|
+
insertAllPhantomChildren(childComponentofPhantom);
|
|
400
|
+
isInserted = true;
|
|
401
|
+
}
|
|
402
|
+
childComponentofPhantom.html.remove();
|
|
403
|
+
} else {
|
|
404
|
+
const { velesElementNode } = getComponentVelesNode(
|
|
405
|
+
childComponentofPhantom
|
|
406
|
+
);
|
|
407
|
+
if (!velesElementNode) {
|
|
408
|
+
console.error("can't find HTML tree in a component chain");
|
|
409
|
+
} else {
|
|
410
|
+
if (!isInserted) {
|
|
411
|
+
insertAllPhantomChildren(velesElementNode);
|
|
412
|
+
isInserted = true;
|
|
413
|
+
}
|
|
414
|
+
velesElementNode.html.remove();
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
);
|
|
419
|
+
} else {
|
|
420
|
+
insertAllPhantomChildren(oldVelesElementNode);
|
|
421
|
+
oldVelesElementNode.html.remove();
|
|
422
|
+
}
|
|
423
|
+
} else {
|
|
424
|
+
if ("velesNode" in oldVelesElementNode && oldVelesElementNode.phantom) {
|
|
425
|
+
let isInserted = false;
|
|
426
|
+
oldVelesElementNode.childComponents.forEach(
|
|
427
|
+
(childComponentofPhantom) => {
|
|
428
|
+
if ("velesNode" in childComponentofPhantom) {
|
|
429
|
+
if (!isInserted) {
|
|
430
|
+
childComponentofPhantom.html.before(
|
|
431
|
+
newVelesElementNode.html
|
|
432
|
+
);
|
|
433
|
+
isInserted = true;
|
|
434
|
+
}
|
|
435
|
+
childComponentofPhantom.html.remove();
|
|
436
|
+
} else {
|
|
437
|
+
const { velesElementNode } = getComponentVelesNode(
|
|
438
|
+
childComponentofPhantom
|
|
439
|
+
);
|
|
440
|
+
if (!velesElementNode) {
|
|
441
|
+
console.error("can't find HTML tree in a component chain");
|
|
442
|
+
} else {
|
|
443
|
+
if (!isInserted) {
|
|
444
|
+
velesElementNode.html.before(newVelesElementNode.html);
|
|
445
|
+
isInserted = true;
|
|
446
|
+
}
|
|
447
|
+
velesElementNode.html.remove();
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
);
|
|
452
|
+
} else {
|
|
453
|
+
parentVelesElement.html.replaceChild(
|
|
454
|
+
newVelesElementNode.html,
|
|
455
|
+
oldVelesElementNode.html
|
|
456
|
+
);
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
parentVelesElement.childComponents = parentVelesElement.childComponents.map(
|
|
460
|
+
(childComponent) => childComponent === node ? newNode : node
|
|
461
|
+
);
|
|
462
|
+
node._privateMethods._callUnmountHandlers();
|
|
463
|
+
callMountHandlers(newNode);
|
|
464
|
+
newNode._privateMethods._addUnmountHandler(() => {
|
|
465
|
+
trackingSelectorElements = trackingSelectorElements.filter(
|
|
466
|
+
(el) => el !== newTrackingSelectorElement
|
|
467
|
+
);
|
|
468
|
+
});
|
|
469
|
+
} else {
|
|
470
|
+
console.log("parent node was not found");
|
|
471
|
+
}
|
|
472
|
+
newTrackingSelectorElements.push(newTrackingSelectorElement);
|
|
473
|
+
});
|
|
474
|
+
trackingSelectorElements = unique(
|
|
475
|
+
trackingSelectorElements.concat(newTrackingSelectorElements)
|
|
476
|
+
);
|
|
477
|
+
trackingAttributes.forEach(({ cb, htmlElement, attributeName }) => {
|
|
478
|
+
const newAttributeValue = cb ? cb(value) : value;
|
|
479
|
+
htmlElement.setAttribute(attributeName, newAttributeValue);
|
|
480
|
+
});
|
|
481
|
+
trackingEffects.forEach((trackingEffect) => {
|
|
482
|
+
const { cb, selectedValue, selector, comparator } = trackingEffect;
|
|
483
|
+
const newSelectedValue = selector ? selector(value) : value;
|
|
484
|
+
if (comparator ? comparator(selectedValue, newSelectedValue) : selectedValue === newSelectedValue) {
|
|
485
|
+
return;
|
|
486
|
+
}
|
|
487
|
+
cb(newSelectedValue);
|
|
488
|
+
trackingEffect.selectedValue = newSelectedValue;
|
|
489
|
+
});
|
|
490
|
+
trackingIterators.forEach((trackingIterator) => {
|
|
491
|
+
const {
|
|
492
|
+
cb,
|
|
493
|
+
key,
|
|
494
|
+
renderedElements,
|
|
495
|
+
elementsByKey,
|
|
496
|
+
wrapperComponent,
|
|
497
|
+
selector
|
|
498
|
+
} = trackingIterator;
|
|
499
|
+
if (!wrapperComponent) {
|
|
500
|
+
console.error("there is no wrapper component for the iterator");
|
|
501
|
+
return;
|
|
502
|
+
}
|
|
503
|
+
const { velesElementNode: wrapperVelesElementNode } = getComponentVelesNode(wrapperComponent);
|
|
504
|
+
const parentVelesElement = wrapperVelesElementNode.parentVelesElement;
|
|
505
|
+
if (!parentVelesElement) {
|
|
506
|
+
console.error("there is no parent Veles node for the iterator wrapper");
|
|
507
|
+
return;
|
|
508
|
+
}
|
|
509
|
+
const elements = selector ? selector(value) : value;
|
|
510
|
+
if (Array.isArray(elements)) {
|
|
511
|
+
const newRenderedElements = [];
|
|
512
|
+
const newElementsByKey = {};
|
|
513
|
+
const renderedExistingElements = {};
|
|
514
|
+
elements.forEach((element, index) => {
|
|
515
|
+
let calculatedKey = "";
|
|
516
|
+
if (typeof key === "string" && typeof element === "object" && element !== null && key in element) {
|
|
517
|
+
calculatedKey = element[key];
|
|
518
|
+
} else if (typeof key === "function") {
|
|
519
|
+
calculatedKey = key({ element, index });
|
|
520
|
+
} else {
|
|
521
|
+
}
|
|
522
|
+
if (!calculatedKey) {
|
|
523
|
+
return;
|
|
524
|
+
}
|
|
525
|
+
const existingElement = elementsByKey[calculatedKey];
|
|
526
|
+
if (existingElement) {
|
|
527
|
+
renderedExistingElements[calculatedKey] = true;
|
|
528
|
+
const currentValue = existingElement.elementState.getValue();
|
|
529
|
+
if (currentValue !== element) {
|
|
530
|
+
existingElement.elementState.setValue(element);
|
|
531
|
+
}
|
|
532
|
+
const currentIndex = existingElement.indexState.getValue();
|
|
533
|
+
if (currentIndex !== index) {
|
|
534
|
+
existingElement.indexState.setValue(index);
|
|
535
|
+
}
|
|
536
|
+
newRenderedElements.push([
|
|
537
|
+
existingElement.node,
|
|
538
|
+
calculatedKey,
|
|
539
|
+
existingElement.elementState
|
|
540
|
+
]);
|
|
541
|
+
newElementsByKey[calculatedKey] = {
|
|
542
|
+
elementState: existingElement.elementState,
|
|
543
|
+
indexState: existingElement.indexState,
|
|
544
|
+
indexValue: index,
|
|
545
|
+
node: existingElement.node
|
|
546
|
+
};
|
|
547
|
+
} else {
|
|
548
|
+
const elementState = createState(element);
|
|
549
|
+
const indexState = createState(index);
|
|
550
|
+
const node = cb({ elementState, indexState });
|
|
551
|
+
newRenderedElements.push([node, calculatedKey, elementState]);
|
|
552
|
+
newElementsByKey[calculatedKey] = {
|
|
553
|
+
elementState,
|
|
554
|
+
indexState,
|
|
555
|
+
indexValue: index,
|
|
556
|
+
node
|
|
557
|
+
};
|
|
558
|
+
}
|
|
559
|
+
});
|
|
560
|
+
const positioningOffset = {};
|
|
561
|
+
let newElementsCount = 0;
|
|
562
|
+
let offset = 0;
|
|
563
|
+
let currentElement = null;
|
|
564
|
+
newRenderedElements.forEach((newRenderedElement, index) => {
|
|
565
|
+
var _a, _b, _c;
|
|
566
|
+
if (positioningOffset[index]) {
|
|
567
|
+
offset = offset + positioningOffset[index];
|
|
568
|
+
}
|
|
569
|
+
const [newNode, calculatedKey, newState] = newRenderedElement;
|
|
570
|
+
const existingElement = elementsByKey[calculatedKey];
|
|
571
|
+
if (existingElement) {
|
|
572
|
+
const { velesElementNode: existingElementNode } = getComponentVelesNode(existingElement.node);
|
|
573
|
+
if (existingElement.indexValue + offset === index) {
|
|
574
|
+
currentElement = existingElementNode.html;
|
|
575
|
+
return;
|
|
576
|
+
}
|
|
577
|
+
if (existingElement.indexValue + offset > index) {
|
|
578
|
+
if (currentElement) {
|
|
579
|
+
currentElement.after(existingElementNode.html);
|
|
580
|
+
positioningOffset[existingElement.indexValue + 1] = -1;
|
|
581
|
+
} else {
|
|
582
|
+
const firstRenderedElement = (_a = renderedElements[0]) == null ? void 0 : _a[0];
|
|
583
|
+
if (firstRenderedElement) {
|
|
584
|
+
const { velesElementNode: firstRenderedVelesNode } = getComponentVelesNode(firstRenderedElement);
|
|
585
|
+
firstRenderedVelesNode.html.before(existingElementNode.html);
|
|
586
|
+
} else {
|
|
587
|
+
}
|
|
588
|
+
}
|
|
589
|
+
currentElement = existingElementNode.html;
|
|
590
|
+
offset = offset + 1;
|
|
591
|
+
} else {
|
|
592
|
+
if (currentElement) {
|
|
593
|
+
currentElement.after(existingElementNode.html);
|
|
594
|
+
positioningOffset[existingElement.indexValue + 1] = 1;
|
|
595
|
+
} else {
|
|
596
|
+
const firstRenderedElement = (_b = renderedElements[0]) == null ? void 0 : _b[0];
|
|
597
|
+
if (firstRenderedElement) {
|
|
598
|
+
const { velesElementNode: firstRenderedVelesNode } = getComponentVelesNode(firstRenderedElement);
|
|
599
|
+
firstRenderedVelesNode.html.before(existingElementNode.html);
|
|
600
|
+
} else {
|
|
601
|
+
}
|
|
602
|
+
}
|
|
603
|
+
currentElement = existingElementNode.html;
|
|
604
|
+
offset = offset - 1;
|
|
605
|
+
}
|
|
606
|
+
} else {
|
|
607
|
+
const { velesElementNode: newNodeVelesElement } = getComponentVelesNode(newNode);
|
|
608
|
+
newNodeVelesElement.parentVelesElement = parentVelesElement;
|
|
609
|
+
if (currentElement) {
|
|
610
|
+
currentElement.after(newNodeVelesElement.html);
|
|
611
|
+
} else {
|
|
612
|
+
const firstRenderedElement = (_c = renderedElements[0]) == null ? void 0 : _c[0];
|
|
613
|
+
if (firstRenderedElement) {
|
|
614
|
+
const { velesElementNode: firstRenderedVelesNode } = getComponentVelesNode(firstRenderedElement);
|
|
615
|
+
firstRenderedVelesNode.html.before(newNodeVelesElement.html);
|
|
616
|
+
} else {
|
|
617
|
+
parentVelesElement.html.prepend(newNodeVelesElement.html);
|
|
618
|
+
}
|
|
619
|
+
}
|
|
620
|
+
offset = offset + 1;
|
|
621
|
+
currentElement = newNodeVelesElement.html;
|
|
622
|
+
newElementsCount = newElementsCount + 1;
|
|
623
|
+
callMountHandlers(newNode);
|
|
624
|
+
}
|
|
625
|
+
});
|
|
626
|
+
if (renderedElements.length === newRenderedElements.length + newElementsCount) {
|
|
627
|
+
} else {
|
|
628
|
+
renderedElements.forEach(([oldNode, calculatedKey]) => {
|
|
629
|
+
if (renderedExistingElements[calculatedKey] === true) {
|
|
630
|
+
return;
|
|
631
|
+
} else {
|
|
632
|
+
const { velesElementNode: oldRenderedVelesNode } = getComponentVelesNode(oldNode);
|
|
633
|
+
oldRenderedVelesNode.html.remove();
|
|
634
|
+
oldNode._privateMethods._callUnmountHandlers();
|
|
635
|
+
if ("velesNode" in wrapperVelesElementNode) {
|
|
636
|
+
wrapperVelesElementNode.childComponents = wrapperVelesElementNode.childComponents.filter(
|
|
637
|
+
(childComponent) => childComponent !== oldNode
|
|
638
|
+
);
|
|
639
|
+
} else {
|
|
640
|
+
throw new Error("Wrapper iterator element is a string");
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
});
|
|
644
|
+
}
|
|
645
|
+
trackingIterator.renderedElements = newRenderedElements;
|
|
646
|
+
trackingIterator.elementsByKey = newElementsByKey;
|
|
647
|
+
}
|
|
648
|
+
});
|
|
649
|
+
};
|
|
339
650
|
const result = {
|
|
340
651
|
// supposed to be used at the component level
|
|
341
652
|
trackValue: (cb, options = {}) => {
|
|
@@ -403,13 +714,15 @@ function createState(initialValue, subscribeCallback) {
|
|
|
403
714
|
} else {
|
|
404
715
|
}
|
|
405
716
|
const elementState = createState(element);
|
|
717
|
+
const indexState = createState(index);
|
|
406
718
|
if (!calculatedKey) {
|
|
407
719
|
return;
|
|
408
720
|
}
|
|
409
|
-
let node = cb({ elementState,
|
|
721
|
+
let node = cb({ elementState, indexState });
|
|
410
722
|
elementsByKey[calculatedKey] = {
|
|
411
723
|
node,
|
|
412
|
-
|
|
724
|
+
indexState,
|
|
725
|
+
indexValue: index,
|
|
413
726
|
elementState
|
|
414
727
|
};
|
|
415
728
|
children.push([node, calculatedKey, elementState]);
|
|
@@ -470,224 +783,8 @@ function createState(initialValue, subscribeCallback) {
|
|
|
470
783
|
if (newValue !== value) {
|
|
471
784
|
previousValue = value;
|
|
472
785
|
value = newValue;
|
|
473
|
-
|
|
786
|
+
_triggerUpdates();
|
|
474
787
|
}
|
|
475
|
-
},
|
|
476
|
-
// TODO: remove it from this object completely
|
|
477
|
-
// and access it from closure
|
|
478
|
-
_triggerUpdates: () => {
|
|
479
|
-
trackingSelectorElements = trackingSelectorElements.map(
|
|
480
|
-
(selectorTrackingElement) => {
|
|
481
|
-
const { selectedValue, selector, cb, node, comparator } = selectorTrackingElement;
|
|
482
|
-
const newSelectedValue = selector ? selector(value) : value;
|
|
483
|
-
if (comparator(selectedValue, newSelectedValue)) {
|
|
484
|
-
return selectorTrackingElement;
|
|
485
|
-
}
|
|
486
|
-
const returnednewNode = cb ? cb(newSelectedValue) : String(newSelectedValue);
|
|
487
|
-
const newNode = !returnednewNode || typeof returnednewNode === "string" ? createTextElement(returnednewNode) : returnednewNode;
|
|
488
|
-
const { velesElementNode: oldVelesElementNode } = getComponentVelesNode(node);
|
|
489
|
-
const { velesElementNode: newVelesElementNode } = getComponentVelesNode(newNode);
|
|
490
|
-
const parentVelesElement = oldVelesElementNode.parentVelesElement;
|
|
491
|
-
const newTrackingSelectorElement = {
|
|
492
|
-
selector,
|
|
493
|
-
selectedValue: newSelectedValue,
|
|
494
|
-
cb,
|
|
495
|
-
node: newNode,
|
|
496
|
-
comparator
|
|
497
|
-
};
|
|
498
|
-
if (parentVelesElement) {
|
|
499
|
-
newVelesElementNode.parentVelesElement = parentVelesElement;
|
|
500
|
-
parentVelesElement.html.replaceChild(
|
|
501
|
-
newVelesElementNode.html,
|
|
502
|
-
oldVelesElementNode.html
|
|
503
|
-
);
|
|
504
|
-
parentVelesElement.childComponents = parentVelesElement.childComponents.map(
|
|
505
|
-
(childComponent) => childComponent === node ? newNode : node
|
|
506
|
-
);
|
|
507
|
-
node._privateMethods._callUnmountHandlers();
|
|
508
|
-
callMountHandlers(newNode);
|
|
509
|
-
newNode._privateMethods._addUnmountHandler(() => {
|
|
510
|
-
trackingSelectorElements = trackingSelectorElements.filter(
|
|
511
|
-
(el) => el !== newTrackingSelectorElement
|
|
512
|
-
);
|
|
513
|
-
});
|
|
514
|
-
} else {
|
|
515
|
-
console.log("parent node was not found");
|
|
516
|
-
}
|
|
517
|
-
return newTrackingSelectorElement;
|
|
518
|
-
}
|
|
519
|
-
);
|
|
520
|
-
trackingAttributes.forEach(({ cb, htmlElement, attributeName }) => {
|
|
521
|
-
const newAttributeValue = cb ? cb(value) : value;
|
|
522
|
-
htmlElement.setAttribute(attributeName, newAttributeValue);
|
|
523
|
-
});
|
|
524
|
-
trackingEffects.forEach((trackingEffect) => {
|
|
525
|
-
const { cb, selectedValue, selector, comparator } = trackingEffect;
|
|
526
|
-
const newSelectedValue = selector ? selector(value) : value;
|
|
527
|
-
if (comparator ? comparator(selectedValue, newSelectedValue) : selectedValue === newSelectedValue) {
|
|
528
|
-
return;
|
|
529
|
-
}
|
|
530
|
-
cb(newSelectedValue);
|
|
531
|
-
trackingEffect.selectedValue = newSelectedValue;
|
|
532
|
-
});
|
|
533
|
-
trackingIterators.forEach((trackingIterator) => {
|
|
534
|
-
const {
|
|
535
|
-
cb,
|
|
536
|
-
key,
|
|
537
|
-
renderedElements,
|
|
538
|
-
elementsByKey,
|
|
539
|
-
wrapperComponent,
|
|
540
|
-
selector
|
|
541
|
-
} = trackingIterator;
|
|
542
|
-
if (!wrapperComponent) {
|
|
543
|
-
console.error("there is no wrapper component for the iterator");
|
|
544
|
-
return;
|
|
545
|
-
}
|
|
546
|
-
const { velesElementNode: wrapperVelesElementNode } = getComponentVelesNode(wrapperComponent);
|
|
547
|
-
const parentVelesElement = wrapperVelesElementNode.parentVelesElement;
|
|
548
|
-
if (!parentVelesElement) {
|
|
549
|
-
console.error(
|
|
550
|
-
"there is no parent Veles node for the iterator wrapper"
|
|
551
|
-
);
|
|
552
|
-
return;
|
|
553
|
-
}
|
|
554
|
-
const elements = selector ? selector(value) : value;
|
|
555
|
-
if (Array.isArray(elements)) {
|
|
556
|
-
const newRenderedElements = [];
|
|
557
|
-
const newElementsByKey = {};
|
|
558
|
-
const renderedExistingElements = {};
|
|
559
|
-
elements.forEach((element, index) => {
|
|
560
|
-
let calculatedKey = "";
|
|
561
|
-
if (typeof key === "string" && typeof element === "object" && element !== null && key in element) {
|
|
562
|
-
calculatedKey = element[key];
|
|
563
|
-
} else if (typeof key === "function") {
|
|
564
|
-
calculatedKey = key({ element, index });
|
|
565
|
-
} else {
|
|
566
|
-
}
|
|
567
|
-
if (!calculatedKey) {
|
|
568
|
-
return;
|
|
569
|
-
}
|
|
570
|
-
const existingElement = elementsByKey[calculatedKey];
|
|
571
|
-
if (existingElement) {
|
|
572
|
-
renderedExistingElements[calculatedKey] = true;
|
|
573
|
-
const currentValue = existingElement.elementState.getValue();
|
|
574
|
-
if (currentValue !== element) {
|
|
575
|
-
existingElement.elementState.setValue(() => element);
|
|
576
|
-
}
|
|
577
|
-
newRenderedElements.push([
|
|
578
|
-
existingElement.node,
|
|
579
|
-
calculatedKey,
|
|
580
|
-
existingElement.elementState
|
|
581
|
-
]);
|
|
582
|
-
newElementsByKey[calculatedKey] = {
|
|
583
|
-
elementState: existingElement.elementState,
|
|
584
|
-
index,
|
|
585
|
-
node: existingElement.node
|
|
586
|
-
};
|
|
587
|
-
} else {
|
|
588
|
-
const elementState = createState(element);
|
|
589
|
-
const node = cb({ elementState, index });
|
|
590
|
-
newRenderedElements.push([node, calculatedKey, elementState]);
|
|
591
|
-
newElementsByKey[calculatedKey] = {
|
|
592
|
-
elementState,
|
|
593
|
-
index,
|
|
594
|
-
node
|
|
595
|
-
};
|
|
596
|
-
}
|
|
597
|
-
});
|
|
598
|
-
const positioningOffset = {};
|
|
599
|
-
let newElementsCount = 0;
|
|
600
|
-
let offset = 0;
|
|
601
|
-
let currentElement = null;
|
|
602
|
-
newRenderedElements.forEach((newRenderedElement, index) => {
|
|
603
|
-
var _a, _b, _c;
|
|
604
|
-
if (positioningOffset[index]) {
|
|
605
|
-
offset = offset + positioningOffset[index];
|
|
606
|
-
}
|
|
607
|
-
const [newNode, calculatedKey, newState] = newRenderedElement;
|
|
608
|
-
const existingElement = elementsByKey[calculatedKey];
|
|
609
|
-
if (existingElement) {
|
|
610
|
-
const { velesElementNode: existingElementNode } = getComponentVelesNode(existingElement.node);
|
|
611
|
-
if (existingElement.index + offset === index) {
|
|
612
|
-
currentElement = existingElementNode.html;
|
|
613
|
-
return;
|
|
614
|
-
}
|
|
615
|
-
if (existingElement.index + offset > index) {
|
|
616
|
-
if (currentElement) {
|
|
617
|
-
currentElement.after(existingElementNode.html);
|
|
618
|
-
positioningOffset[existingElement.index + 1] = -1;
|
|
619
|
-
} else {
|
|
620
|
-
const firstRenderedElement = (_a = renderedElements[0]) == null ? void 0 : _a[0];
|
|
621
|
-
if (firstRenderedElement) {
|
|
622
|
-
const { velesElementNode: firstRenderedVelesNode } = getComponentVelesNode(firstRenderedElement);
|
|
623
|
-
firstRenderedVelesNode.html.before(
|
|
624
|
-
existingElementNode.html
|
|
625
|
-
);
|
|
626
|
-
} else {
|
|
627
|
-
}
|
|
628
|
-
}
|
|
629
|
-
currentElement = existingElementNode.html;
|
|
630
|
-
offset = offset + 1;
|
|
631
|
-
} else {
|
|
632
|
-
if (currentElement) {
|
|
633
|
-
currentElement.after(existingElementNode.html);
|
|
634
|
-
positioningOffset[existingElement.index + 1] = 1;
|
|
635
|
-
} else {
|
|
636
|
-
const firstRenderedElement = (_b = renderedElements[0]) == null ? void 0 : _b[0];
|
|
637
|
-
if (firstRenderedElement) {
|
|
638
|
-
const { velesElementNode: firstRenderedVelesNode } = getComponentVelesNode(firstRenderedElement);
|
|
639
|
-
firstRenderedVelesNode.html.before(
|
|
640
|
-
existingElementNode.html
|
|
641
|
-
);
|
|
642
|
-
} else {
|
|
643
|
-
}
|
|
644
|
-
}
|
|
645
|
-
currentElement = existingElementNode.html;
|
|
646
|
-
offset = offset - 1;
|
|
647
|
-
}
|
|
648
|
-
} else {
|
|
649
|
-
const { velesElementNode: newNodeVelesElement } = getComponentVelesNode(newNode);
|
|
650
|
-
newNodeVelesElement.parentVelesElement = parentVelesElement;
|
|
651
|
-
if (currentElement) {
|
|
652
|
-
currentElement.after(newNodeVelesElement.html);
|
|
653
|
-
} else {
|
|
654
|
-
const firstRenderedElement = (_c = renderedElements[0]) == null ? void 0 : _c[0];
|
|
655
|
-
if (firstRenderedElement) {
|
|
656
|
-
const { velesElementNode: firstRenderedVelesNode } = getComponentVelesNode(firstRenderedElement);
|
|
657
|
-
firstRenderedVelesNode.html.before(newNodeVelesElement.html);
|
|
658
|
-
} else {
|
|
659
|
-
parentVelesElement.html.prepend(newNodeVelesElement.html);
|
|
660
|
-
}
|
|
661
|
-
}
|
|
662
|
-
offset = offset + 1;
|
|
663
|
-
currentElement = newNodeVelesElement.html;
|
|
664
|
-
newElementsCount = newElementsCount + 1;
|
|
665
|
-
callMountHandlers(newNode);
|
|
666
|
-
}
|
|
667
|
-
});
|
|
668
|
-
if (renderedElements.length === newRenderedElements.length + newElementsCount) {
|
|
669
|
-
} else {
|
|
670
|
-
renderedElements.forEach(([oldNode, calculatedKey]) => {
|
|
671
|
-
if (renderedExistingElements[calculatedKey] === true) {
|
|
672
|
-
return;
|
|
673
|
-
} else {
|
|
674
|
-
const { velesElementNode: oldRenderedVelesNode } = getComponentVelesNode(oldNode);
|
|
675
|
-
oldRenderedVelesNode.html.remove();
|
|
676
|
-
oldNode._privateMethods._callUnmountHandlers();
|
|
677
|
-
if ("velesNode" in wrapperVelesElementNode) {
|
|
678
|
-
wrapperVelesElementNode.childComponents = wrapperVelesElementNode.childComponents.filter(
|
|
679
|
-
(childComponent) => childComponent !== oldNode
|
|
680
|
-
);
|
|
681
|
-
} else {
|
|
682
|
-
throw new Error("Wrapper iterator element is a string");
|
|
683
|
-
}
|
|
684
|
-
}
|
|
685
|
-
});
|
|
686
|
-
}
|
|
687
|
-
trackingIterator.renderedElements = newRenderedElements;
|
|
688
|
-
trackingIterator.elementsByKey = newElementsByKey;
|
|
689
|
-
}
|
|
690
|
-
});
|
|
691
788
|
}
|
|
692
789
|
};
|
|
693
790
|
if (subscribeCallback) {
|
|
@@ -699,19 +796,6 @@ function createState(initialValue, subscribeCallback) {
|
|
|
699
796
|
return result;
|
|
700
797
|
}
|
|
701
798
|
|
|
702
|
-
// src/hooks/combine-state.ts
|
|
703
|
-
function combineState(...states) {
|
|
704
|
-
const initialValue = states.map((state) => state.getValue());
|
|
705
|
-
const combinedState = createState(initialValue);
|
|
706
|
-
states.forEach((state) => {
|
|
707
|
-
state.trackValue(() => {
|
|
708
|
-
const updatedValue = states.map((state2) => state2.getValue());
|
|
709
|
-
combinedState.setValue(updatedValue);
|
|
710
|
-
});
|
|
711
|
-
});
|
|
712
|
-
return combinedState;
|
|
713
|
-
}
|
|
714
|
-
|
|
715
799
|
// src/create-ref.ts
|
|
716
800
|
function createRef(initialRefValue = null) {
|
|
717
801
|
return {
|
|
@@ -731,7 +815,6 @@ function Fragment({ children }) {
|
|
|
731
815
|
0 && (module.exports = {
|
|
732
816
|
Fragment,
|
|
733
817
|
attachComponent,
|
|
734
|
-
combineState,
|
|
735
818
|
createElement,
|
|
736
819
|
createRef,
|
|
737
820
|
createState,
|
package/dist/index.d.cts
CHANGED
|
@@ -1,53 +1,12 @@
|
|
|
1
|
-
import { V as VelesElement, a as VelesComponent
|
|
2
|
-
export { F as Fragment, c as createElement } from './fragment-
|
|
1
|
+
import { V as VelesElement, a as VelesComponent } from './types.d-DgVBp6oa.cjs';
|
|
2
|
+
export { F as Fragment, c as createElement } from './fragment-CU26z590.cjs';
|
|
3
|
+
export { S as State, c as createState } from './create-state-D1JASFVs.cjs';
|
|
3
4
|
|
|
4
5
|
declare function attachComponent({ htmlElement, component, }: {
|
|
5
6
|
htmlElement: HTMLElement;
|
|
6
7
|
component: VelesElement | VelesComponent;
|
|
7
8
|
}): () => void;
|
|
8
9
|
|
|
9
|
-
type State<ValueType> = {
|
|
10
|
-
trackValue(cb: (value: ValueType) => void | Function, options?: {
|
|
11
|
-
callOnMount?: boolean;
|
|
12
|
-
skipFirstCall?: boolean;
|
|
13
|
-
comparator?: (value1: ValueType, value2: ValueType) => boolean;
|
|
14
|
-
}): void;
|
|
15
|
-
trackValueSelector<SelectorValueType>(selector: (value: ValueType) => SelectorValueType, cb: (value: SelectorValueType) => void | Function, options?: {
|
|
16
|
-
callOnMount?: boolean;
|
|
17
|
-
skipFirstCall?: boolean;
|
|
18
|
-
comparator?: (value1: SelectorValueType, value2: SelectorValueType) => boolean;
|
|
19
|
-
}): void;
|
|
20
|
-
useValue(cb?: (value: ValueType) => VelesElement | VelesComponent | string | undefined | null, comparator?: (value1: ValueType, value2: ValueType) => boolean): VelesElement | VelesComponent | VelesStringElement;
|
|
21
|
-
useValueSelector<SelectorValueType>(selector: (value: ValueType) => SelectorValueType, cb?: (value: SelectorValueType) => VelesElement | VelesComponent | string | undefined | null, comparator?: (value1: SelectorValueType, value2: SelectorValueType) => boolean): VelesElement | VelesComponent | VelesStringElement;
|
|
22
|
-
useAttribute(cb?: (value: ValueType) => any): AttributeHelper<any>;
|
|
23
|
-
useValueIterator<Element>(options: {
|
|
24
|
-
key: string | ((options: {
|
|
25
|
-
element: Element;
|
|
26
|
-
index: number;
|
|
27
|
-
}) => string);
|
|
28
|
-
selector?: (value: ValueType) => Element[];
|
|
29
|
-
}, cb: (props: {
|
|
30
|
-
elementState: State<Element>;
|
|
31
|
-
index: number;
|
|
32
|
-
}) => VelesElement | VelesComponent): VelesComponent | VelesElement | null;
|
|
33
|
-
getValue(): ValueType;
|
|
34
|
-
getPreviousValue(): undefined | ValueType;
|
|
35
|
-
setValue(newValueCB: ((currentValue: ValueType) => ValueType) | ValueType): void;
|
|
36
|
-
_triggerUpdates(): void;
|
|
37
|
-
};
|
|
38
|
-
declare function createState<T>(initialValue: T, subscribeCallback?: (setValue: ReturnType<typeof createState<T>>["setValue"]) => Function): State<T>;
|
|
39
|
-
|
|
40
|
-
type createdState<StateType> = ReturnType<typeof createState<StateType>>;
|
|
41
|
-
declare function combineState<A, B>(state1: createdState<A>, state2: createdState<B>): createdState<[A, B]>;
|
|
42
|
-
declare function combineState<A, B, C>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>): createdState<[A, B, C]>;
|
|
43
|
-
declare function combineState<A, B, C, D>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>): createdState<[A, B, C, D]>;
|
|
44
|
-
declare function combineState<A, B, C, D, E>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>, state5: createdState<E>): createdState<[A, B, C, D, E]>;
|
|
45
|
-
declare function combineState<A, B, C, D, E, F>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>, state5: createdState<E>, state6: createdState<F>): createdState<[A, B, C, D, E, F]>;
|
|
46
|
-
declare function combineState<A, B, C, D, E, F, G>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>, state5: createdState<E>, state6: createdState<F>, state7: createdState<G>): createdState<[A, B, C, D, E, F, G]>;
|
|
47
|
-
declare function combineState<A, B, C, D, E, F, G, H>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>, state5: createdState<E>, state6: createdState<F>, state7: createdState<G>, state8: createdState<H>): createdState<[A, B, C, D, E, F, G, H]>;
|
|
48
|
-
declare function combineState<A, B, C, D, E, F, G, H, I>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>, state5: createdState<E>, state6: createdState<F>, state7: createdState<G>, state8: createdState<H>, state9: createdState<I>): createdState<[A, B, C, D, E, F, G, H, I]>;
|
|
49
|
-
declare function combineState<A, B, C, D, E, F, G, H, I, J>(state1: createdState<A>, state2: createdState<B>, state3: createdState<C>, state4: createdState<D>, state5: createdState<E>, state6: createdState<F>, state7: createdState<G>, state8: createdState<H>, state9: createdState<I>, state10: createdState<J>): createdState<[A, B, C, D, E, F, G, H, I, J]>;
|
|
50
|
-
|
|
51
10
|
declare function onMount(cb: () => void | Function): void;
|
|
52
11
|
declare function onUnmount(cb: Function): void;
|
|
53
12
|
|
|
@@ -56,4 +15,4 @@ declare function createRef<T>(initialRefValue?: T | null): {
|
|
|
56
15
|
current: T | null;
|
|
57
16
|
};
|
|
58
17
|
|
|
59
|
-
export {
|
|
18
|
+
export { attachComponent, createRef, onMount, onUnmount };
|