@salla.sa/twilight-components 1.0.1 → 1.0.3
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/README.md +3 -0
- package/dist/cjs/{index-a67728b4.js → index-9441fd8e.js} +361 -43
- package/dist/cjs/index.cjs.js +119 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/salla-login_2.cjs.entry.js +4 -103
- package/dist/cjs/search-modal-722cccc3.js +129 -0
- package/dist/cjs/twilight-components.cjs.js +2 -2
- package/dist/collection/components/search-modal/search-modal.css +9 -0
- package/dist/collection/components/search-modal/search-modal.js +55 -20
- package/dist/collection/index.js +3 -1
- package/dist/collection/plugins/tailwind-theme/index.js +6 -10
- package/dist/esm/{index-aeba9f62.js → index-63e5409f.js} +361 -44
- package/dist/esm/index.js +114 -0
- package/dist/esm/loader.js +2 -2
- package/dist/esm/salla-login_2.entry.js +2 -105
- package/dist/esm/search-modal-d6e12d32.js +126 -0
- package/dist/esm/twilight-components.js +2 -2
- package/dist/loader/cdn.js +3 -0
- package/dist/loader/index.cjs.js +3 -0
- package/dist/loader/index.d.ts +13 -0
- package/dist/loader/index.es2017.js +3 -0
- package/dist/loader/index.js +4 -0
- package/dist/loader/package.json +10 -0
- package/dist/twilight-components/index.esm.js +1 -0
- package/dist/twilight-components/p-01102f97.entry.js +1 -0
- package/dist/twilight-components/p-3d53781c.js +1 -0
- package/dist/twilight-components/p-591a15cf.js +1 -0
- package/dist/twilight-components/twilight-components.esm.js +1 -1
- package/dist/types/components/search-modal/search-modal.d.ts +10 -6
- package/dist/types/components.d.ts +8 -0
- package/dist/types/index.d.ts +8 -1
- package/package.json +1 -1
- package/dist/twilight-components/p-0a7edc5f.entry.js +0 -1
- package/dist/twilight-components/p-b390bfd1.js +0 -1
package/README.md
CHANGED
|
@@ -42,11 +42,14 @@ require('@salla.sa/twilight-components')
|
|
|
42
42
|
### @salla.sa/twilight-components
|
|
43
43
|
|
|
44
44
|
```
|
|
45
|
+
npm version patch
|
|
45
46
|
npm publish --access private
|
|
46
47
|
```
|
|
47
48
|
|
|
48
49
|
### @salla.sa/plugins
|
|
49
50
|
|
|
51
|
+
todo :: finx the publish scripts
|
|
52
|
+
|
|
50
53
|
```
|
|
51
54
|
node publish.js
|
|
52
55
|
```
|
|
@@ -23,7 +23,11 @@ function _interopNamespace(e) {
|
|
|
23
23
|
const NAMESPACE = 'twilight-components';
|
|
24
24
|
|
|
25
25
|
let scopeId;
|
|
26
|
+
let contentRef;
|
|
26
27
|
let hostTagName;
|
|
28
|
+
let useNativeShadowDom = false;
|
|
29
|
+
let checkSlotFallbackVisibility = false;
|
|
30
|
+
let checkSlotRelocate = false;
|
|
27
31
|
let isSvgMode = false;
|
|
28
32
|
let queuePending = false;
|
|
29
33
|
const win = typeof window !== 'undefined' ? window : {};
|
|
@@ -188,7 +192,7 @@ const isComplexType = (o) => {
|
|
|
188
192
|
// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
|
|
189
193
|
const h = (nodeName, vnodeData, ...children) => {
|
|
190
194
|
let child = null;
|
|
191
|
-
let
|
|
195
|
+
let slotName = null;
|
|
192
196
|
let simple = false;
|
|
193
197
|
let lastSimple = false;
|
|
194
198
|
let vNodeChildren = [];
|
|
@@ -216,9 +220,8 @@ const h = (nodeName, vnodeData, ...children) => {
|
|
|
216
220
|
};
|
|
217
221
|
walk(children);
|
|
218
222
|
if (vnodeData) {
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
key = vnodeData.key;
|
|
223
|
+
if (vnodeData.name) {
|
|
224
|
+
slotName = vnodeData.name;
|
|
222
225
|
}
|
|
223
226
|
{
|
|
224
227
|
const classData = vnodeData.className || vnodeData.class;
|
|
@@ -238,7 +241,7 @@ const h = (nodeName, vnodeData, ...children) => {
|
|
|
238
241
|
vnode.$children$ = vNodeChildren;
|
|
239
242
|
}
|
|
240
243
|
{
|
|
241
|
-
vnode.$
|
|
244
|
+
vnode.$name$ = slotName;
|
|
242
245
|
}
|
|
243
246
|
return vnode;
|
|
244
247
|
};
|
|
@@ -254,7 +257,7 @@ const newVNode = (tag, text) => {
|
|
|
254
257
|
vnode.$attrs$ = null;
|
|
255
258
|
}
|
|
256
259
|
{
|
|
257
|
-
vnode.$
|
|
260
|
+
vnode.$name$ = null;
|
|
258
261
|
}
|
|
259
262
|
return vnode;
|
|
260
263
|
};
|
|
@@ -304,8 +307,6 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
304
307
|
}
|
|
305
308
|
}
|
|
306
309
|
}
|
|
307
|
-
else if (memberName === 'key')
|
|
308
|
-
;
|
|
309
310
|
else if ((!isProp ) &&
|
|
310
311
|
memberName[0] === 'o' &&
|
|
311
312
|
memberName[1] === 'n') {
|
|
@@ -413,13 +414,36 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
413
414
|
let i = 0;
|
|
414
415
|
let elm;
|
|
415
416
|
let childNode;
|
|
417
|
+
let oldVNode;
|
|
418
|
+
if (!useNativeShadowDom) {
|
|
419
|
+
// remember for later we need to check to relocate nodes
|
|
420
|
+
checkSlotRelocate = true;
|
|
421
|
+
if (newVNode.$tag$ === 'slot') {
|
|
422
|
+
if (scopeId) {
|
|
423
|
+
// scoped css needs to add its scoped id to the parent element
|
|
424
|
+
parentElm.classList.add(scopeId + '-s');
|
|
425
|
+
}
|
|
426
|
+
newVNode.$flags$ |= newVNode.$children$
|
|
427
|
+
? // slot element has fallback content
|
|
428
|
+
2 /* isSlotFallback */
|
|
429
|
+
: // slot element does not have fallback content
|
|
430
|
+
1 /* isSlotReference */;
|
|
431
|
+
}
|
|
432
|
+
}
|
|
416
433
|
if (newVNode.$text$ !== null) {
|
|
417
434
|
// create text node
|
|
418
435
|
elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
|
|
419
436
|
}
|
|
437
|
+
else if (newVNode.$flags$ & 1 /* isSlotReference */) {
|
|
438
|
+
// create a slot reference node
|
|
439
|
+
elm = newVNode.$elm$ =
|
|
440
|
+
doc.createTextNode('');
|
|
441
|
+
}
|
|
420
442
|
else {
|
|
421
443
|
// create element
|
|
422
|
-
elm = newVNode.$elm$ = (doc.createElement(newVNode.$
|
|
444
|
+
elm = newVNode.$elm$ = (doc.createElement(newVNode.$flags$ & 2 /* isSlotFallback */
|
|
445
|
+
? 'slot-fb'
|
|
446
|
+
: newVNode.$tag$));
|
|
423
447
|
// add css classes, attrs, props, listeners, etc.
|
|
424
448
|
{
|
|
425
449
|
updateElement(null, newVNode, isSvgMode);
|
|
@@ -432,7 +456,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
432
456
|
if (newVNode.$children$) {
|
|
433
457
|
for (i = 0; i < newVNode.$children$.length; ++i) {
|
|
434
458
|
// create the node
|
|
435
|
-
childNode = createElm(oldParentVNode, newVNode, i);
|
|
459
|
+
childNode = createElm(oldParentVNode, newVNode, i, elm);
|
|
436
460
|
// return node could have been null
|
|
437
461
|
if (childNode) {
|
|
438
462
|
// append our new node
|
|
@@ -441,20 +465,62 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
441
465
|
}
|
|
442
466
|
}
|
|
443
467
|
}
|
|
468
|
+
{
|
|
469
|
+
elm['s-hn'] = hostTagName;
|
|
470
|
+
if (newVNode.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
|
|
471
|
+
// remember the content reference comment
|
|
472
|
+
elm['s-sr'] = true;
|
|
473
|
+
// remember the content reference comment
|
|
474
|
+
elm['s-cr'] = contentRef;
|
|
475
|
+
// remember the slot name, or empty string for default slot
|
|
476
|
+
elm['s-sn'] = newVNode.$name$ || '';
|
|
477
|
+
// check if we've got an old vnode for this slot
|
|
478
|
+
oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
|
|
479
|
+
if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
|
|
480
|
+
// we've got an old slot vnode and the wrapper is being replaced
|
|
481
|
+
// so let's move the old slot content back to it's original location
|
|
482
|
+
putBackInOriginalLocation(oldParentVNode.$elm$, false);
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
}
|
|
444
486
|
return elm;
|
|
445
487
|
};
|
|
488
|
+
const putBackInOriginalLocation = (parentElm, recursive) => {
|
|
489
|
+
plt.$flags$ |= 1 /* isTmpDisconnected */;
|
|
490
|
+
const oldSlotChildNodes = parentElm.childNodes;
|
|
491
|
+
for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
|
|
492
|
+
const childNode = oldSlotChildNodes[i];
|
|
493
|
+
if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
|
|
494
|
+
// // this child node in the old element is from another component
|
|
495
|
+
// // remove this node from the old slot's parent
|
|
496
|
+
// childNode.remove();
|
|
497
|
+
// and relocate it back to it's original location
|
|
498
|
+
parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
|
|
499
|
+
// remove the old original location comment entirely
|
|
500
|
+
// later on the patch function will know what to do
|
|
501
|
+
// and move this to the correct spot in need be
|
|
502
|
+
childNode['s-ol'].remove();
|
|
503
|
+
childNode['s-ol'] = undefined;
|
|
504
|
+
checkSlotRelocate = true;
|
|
505
|
+
}
|
|
506
|
+
if (recursive) {
|
|
507
|
+
putBackInOriginalLocation(childNode, recursive);
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
plt.$flags$ &= ~1 /* isTmpDisconnected */;
|
|
511
|
+
};
|
|
446
512
|
const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
|
|
447
|
-
let containerElm = (parentElm);
|
|
513
|
+
let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
|
|
448
514
|
let childNode;
|
|
449
515
|
if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
|
|
450
516
|
containerElm = containerElm.shadowRoot;
|
|
451
517
|
}
|
|
452
518
|
for (; startIdx <= endIdx; ++startIdx) {
|
|
453
519
|
if (vnodes[startIdx]) {
|
|
454
|
-
childNode = createElm(null, parentVNode, startIdx);
|
|
520
|
+
childNode = createElm(null, parentVNode, startIdx, parentElm);
|
|
455
521
|
if (childNode) {
|
|
456
522
|
vnodes[startIdx].$elm$ = childNode;
|
|
457
|
-
containerElm.insertBefore(childNode, before);
|
|
523
|
+
containerElm.insertBefore(childNode, referenceNode(before) );
|
|
458
524
|
}
|
|
459
525
|
}
|
|
460
526
|
}
|
|
@@ -463,6 +529,20 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
|
|
|
463
529
|
for (; startIdx <= endIdx; ++startIdx) {
|
|
464
530
|
if ((vnode = vnodes[startIdx])) {
|
|
465
531
|
elm = vnode.$elm$;
|
|
532
|
+
{
|
|
533
|
+
// we're removing this element
|
|
534
|
+
// so it's possible we need to show slot fallback content now
|
|
535
|
+
checkSlotFallbackVisibility = true;
|
|
536
|
+
if (elm['s-ol']) {
|
|
537
|
+
// remove the original location comment
|
|
538
|
+
elm['s-ol'].remove();
|
|
539
|
+
}
|
|
540
|
+
else {
|
|
541
|
+
// it's possible that child nodes of the node
|
|
542
|
+
// that's being removed are slot nodes
|
|
543
|
+
putBackInOriginalLocation(elm, true);
|
|
544
|
+
}
|
|
545
|
+
}
|
|
466
546
|
// remove the vnode's element from the dom
|
|
467
547
|
elm.remove();
|
|
468
548
|
}
|
|
@@ -471,8 +551,6 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
|
|
|
471
551
|
const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
472
552
|
let oldStartIdx = 0;
|
|
473
553
|
let newStartIdx = 0;
|
|
474
|
-
let idxInOld = 0;
|
|
475
|
-
let i = 0;
|
|
476
554
|
let oldEndIdx = oldCh.length - 1;
|
|
477
555
|
let oldStartVnode = oldCh[0];
|
|
478
556
|
let oldEndVnode = oldCh[oldEndIdx];
|
|
@@ -480,7 +558,6 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
480
558
|
let newStartVnode = newCh[0];
|
|
481
559
|
let newEndVnode = newCh[newEndIdx];
|
|
482
560
|
let node;
|
|
483
|
-
let elmToMove;
|
|
484
561
|
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
|
|
485
562
|
if (oldStartVnode == null) {
|
|
486
563
|
// Vnode might have been moved left
|
|
@@ -506,48 +583,34 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
506
583
|
newEndVnode = newCh[--newEndIdx];
|
|
507
584
|
}
|
|
508
585
|
else if (isSameVnode(oldStartVnode, newEndVnode)) {
|
|
586
|
+
// Vnode moved right
|
|
587
|
+
if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
|
|
588
|
+
putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
|
|
589
|
+
}
|
|
509
590
|
patch(oldStartVnode, newEndVnode);
|
|
510
591
|
parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
|
|
511
592
|
oldStartVnode = oldCh[++oldStartIdx];
|
|
512
593
|
newEndVnode = newCh[--newEndIdx];
|
|
513
594
|
}
|
|
514
595
|
else if (isSameVnode(oldEndVnode, newStartVnode)) {
|
|
596
|
+
// Vnode moved left
|
|
597
|
+
if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
|
|
598
|
+
putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
|
|
599
|
+
}
|
|
515
600
|
patch(oldEndVnode, newStartVnode);
|
|
516
601
|
parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
|
|
517
602
|
oldEndVnode = oldCh[--oldEndIdx];
|
|
518
603
|
newStartVnode = newCh[++newStartIdx];
|
|
519
604
|
}
|
|
520
605
|
else {
|
|
521
|
-
// createKeyToOldIdx
|
|
522
|
-
idxInOld = -1;
|
|
523
606
|
{
|
|
524
|
-
for (i = oldStartIdx; i <= oldEndIdx; ++i) {
|
|
525
|
-
if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
|
|
526
|
-
idxInOld = i;
|
|
527
|
-
break;
|
|
528
|
-
}
|
|
529
|
-
}
|
|
530
|
-
}
|
|
531
|
-
if (idxInOld >= 0) {
|
|
532
|
-
elmToMove = oldCh[idxInOld];
|
|
533
|
-
if (elmToMove.$tag$ !== newStartVnode.$tag$) {
|
|
534
|
-
node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
|
|
535
|
-
}
|
|
536
|
-
else {
|
|
537
|
-
patch(elmToMove, newStartVnode);
|
|
538
|
-
oldCh[idxInOld] = undefined;
|
|
539
|
-
node = elmToMove.$elm$;
|
|
540
|
-
}
|
|
541
|
-
newStartVnode = newCh[++newStartIdx];
|
|
542
|
-
}
|
|
543
|
-
else {
|
|
544
607
|
// new element
|
|
545
|
-
node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
|
|
608
|
+
node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
|
|
546
609
|
newStartVnode = newCh[++newStartIdx];
|
|
547
610
|
}
|
|
548
611
|
if (node) {
|
|
549
612
|
{
|
|
550
|
-
oldStartVnode.$elm
|
|
613
|
+
parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
|
|
551
614
|
}
|
|
552
615
|
}
|
|
553
616
|
}
|
|
@@ -563,21 +626,34 @@ const isSameVnode = (vnode1, vnode2) => {
|
|
|
563
626
|
// compare if two vnode to see if they're "technically" the same
|
|
564
627
|
// need to have the same element tag, and same key to be the same
|
|
565
628
|
if (vnode1.$tag$ === vnode2.$tag$) {
|
|
566
|
-
{
|
|
567
|
-
return vnode1.$
|
|
629
|
+
if (vnode1.$tag$ === 'slot') {
|
|
630
|
+
return vnode1.$name$ === vnode2.$name$;
|
|
568
631
|
}
|
|
632
|
+
return true;
|
|
569
633
|
}
|
|
570
634
|
return false;
|
|
571
635
|
};
|
|
636
|
+
const referenceNode = (node) => {
|
|
637
|
+
// this node was relocated to a new location in the dom
|
|
638
|
+
// because of some other component's slot
|
|
639
|
+
// but we still have an html comment in place of where
|
|
640
|
+
// it's original location was according to it's original vdom
|
|
641
|
+
return (node && node['s-ol']) || node;
|
|
642
|
+
};
|
|
643
|
+
const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
|
|
572
644
|
const patch = (oldVNode, newVNode) => {
|
|
573
645
|
const elm = (newVNode.$elm$ = oldVNode.$elm$);
|
|
574
646
|
const oldChildren = oldVNode.$children$;
|
|
575
647
|
const newChildren = newVNode.$children$;
|
|
648
|
+
const tag = newVNode.$tag$;
|
|
576
649
|
const text = newVNode.$text$;
|
|
650
|
+
let defaultHolder;
|
|
577
651
|
if (text === null) {
|
|
578
652
|
// element node
|
|
579
653
|
{
|
|
580
|
-
|
|
654
|
+
if (tag === 'slot')
|
|
655
|
+
;
|
|
656
|
+
else {
|
|
581
657
|
// either this is the first render of an element OR it's an update
|
|
582
658
|
// AND we already know it's possible it could have changed
|
|
583
659
|
// this updates the element's css classes, attrs, props, listeners, etc.
|
|
@@ -602,12 +678,147 @@ const patch = (oldVNode, newVNode) => {
|
|
|
602
678
|
removeVnodes(oldChildren, 0, oldChildren.length - 1);
|
|
603
679
|
}
|
|
604
680
|
}
|
|
681
|
+
else if ((defaultHolder = elm['s-cr'])) {
|
|
682
|
+
// this element has slotted content
|
|
683
|
+
defaultHolder.parentNode.textContent = text;
|
|
684
|
+
}
|
|
605
685
|
else if (oldVNode.$text$ !== text) {
|
|
606
686
|
// update the text content for the text only vnode
|
|
607
687
|
// and also only if the text is different than before
|
|
608
688
|
elm.data = text;
|
|
609
689
|
}
|
|
610
690
|
};
|
|
691
|
+
const updateFallbackSlotVisibility = (elm) => {
|
|
692
|
+
// tslint:disable-next-line: prefer-const
|
|
693
|
+
let childNodes = elm.childNodes;
|
|
694
|
+
let childNode;
|
|
695
|
+
let i;
|
|
696
|
+
let ilen;
|
|
697
|
+
let j;
|
|
698
|
+
let slotNameAttr;
|
|
699
|
+
let nodeType;
|
|
700
|
+
for (i = 0, ilen = childNodes.length; i < ilen; i++) {
|
|
701
|
+
childNode = childNodes[i];
|
|
702
|
+
if (childNode.nodeType === 1 /* ElementNode */) {
|
|
703
|
+
if (childNode['s-sr']) {
|
|
704
|
+
// this is a slot fallback node
|
|
705
|
+
// get the slot name for this slot reference node
|
|
706
|
+
slotNameAttr = childNode['s-sn'];
|
|
707
|
+
// by default always show a fallback slot node
|
|
708
|
+
// then hide it if there are other slots in the light dom
|
|
709
|
+
childNode.hidden = false;
|
|
710
|
+
for (j = 0; j < ilen; j++) {
|
|
711
|
+
nodeType = childNodes[j].nodeType;
|
|
712
|
+
if (childNodes[j]['s-hn'] !== childNode['s-hn'] || slotNameAttr !== '') {
|
|
713
|
+
// this sibling node is from a different component OR is a named fallback slot node
|
|
714
|
+
if (nodeType === 1 /* ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
|
|
715
|
+
childNode.hidden = true;
|
|
716
|
+
break;
|
|
717
|
+
}
|
|
718
|
+
}
|
|
719
|
+
else {
|
|
720
|
+
// this is a default fallback slot node
|
|
721
|
+
// any element or text node (with content)
|
|
722
|
+
// should hide the default fallback slot node
|
|
723
|
+
if (nodeType === 1 /* ElementNode */ ||
|
|
724
|
+
(nodeType === 3 /* TextNode */ && childNodes[j].textContent.trim() !== '')) {
|
|
725
|
+
childNode.hidden = true;
|
|
726
|
+
break;
|
|
727
|
+
}
|
|
728
|
+
}
|
|
729
|
+
}
|
|
730
|
+
}
|
|
731
|
+
// keep drilling down
|
|
732
|
+
updateFallbackSlotVisibility(childNode);
|
|
733
|
+
}
|
|
734
|
+
}
|
|
735
|
+
};
|
|
736
|
+
const relocateNodes = [];
|
|
737
|
+
const relocateSlotContent = (elm) => {
|
|
738
|
+
// tslint:disable-next-line: prefer-const
|
|
739
|
+
let childNode;
|
|
740
|
+
let node;
|
|
741
|
+
let hostContentNodes;
|
|
742
|
+
let slotNameAttr;
|
|
743
|
+
let relocateNodeData;
|
|
744
|
+
let j;
|
|
745
|
+
let i = 0;
|
|
746
|
+
let childNodes = elm.childNodes;
|
|
747
|
+
let ilen = childNodes.length;
|
|
748
|
+
for (; i < ilen; i++) {
|
|
749
|
+
childNode = childNodes[i];
|
|
750
|
+
if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
|
|
751
|
+
// first got the content reference comment node
|
|
752
|
+
// then we got it's parent, which is where all the host content is in now
|
|
753
|
+
hostContentNodes = node.parentNode.childNodes;
|
|
754
|
+
slotNameAttr = childNode['s-sn'];
|
|
755
|
+
for (j = hostContentNodes.length - 1; j >= 0; j--) {
|
|
756
|
+
node = hostContentNodes[j];
|
|
757
|
+
if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
|
|
758
|
+
// let's do some relocating to its new home
|
|
759
|
+
// but never relocate a content reference node
|
|
760
|
+
// that is suppose to always represent the original content location
|
|
761
|
+
if (isNodeLocatedInSlot(node, slotNameAttr)) {
|
|
762
|
+
// it's possible we've already decided to relocate this node
|
|
763
|
+
relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
|
|
764
|
+
// made some changes to slots
|
|
765
|
+
// let's make sure we also double check
|
|
766
|
+
// fallbacks are correctly hidden or shown
|
|
767
|
+
checkSlotFallbackVisibility = true;
|
|
768
|
+
node['s-sn'] = node['s-sn'] || slotNameAttr;
|
|
769
|
+
if (relocateNodeData) {
|
|
770
|
+
// previously we never found a slot home for this node
|
|
771
|
+
// but turns out we did, so let's remember it now
|
|
772
|
+
relocateNodeData.$slotRefNode$ = childNode;
|
|
773
|
+
}
|
|
774
|
+
else {
|
|
775
|
+
// add to our list of nodes to relocate
|
|
776
|
+
relocateNodes.push({
|
|
777
|
+
$slotRefNode$: childNode,
|
|
778
|
+
$nodeToRelocate$: node,
|
|
779
|
+
});
|
|
780
|
+
}
|
|
781
|
+
if (node['s-sr']) {
|
|
782
|
+
relocateNodes.map((relocateNode) => {
|
|
783
|
+
if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
|
|
784
|
+
relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
|
|
785
|
+
if (relocateNodeData && !relocateNode.$slotRefNode$) {
|
|
786
|
+
relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
|
|
787
|
+
}
|
|
788
|
+
}
|
|
789
|
+
});
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
|
|
793
|
+
// so far this element does not have a slot home, not setting slotRefNode on purpose
|
|
794
|
+
// if we never find a home for this element then we'll need to hide it
|
|
795
|
+
relocateNodes.push({
|
|
796
|
+
$nodeToRelocate$: node,
|
|
797
|
+
});
|
|
798
|
+
}
|
|
799
|
+
}
|
|
800
|
+
}
|
|
801
|
+
}
|
|
802
|
+
if (childNode.nodeType === 1 /* ElementNode */) {
|
|
803
|
+
relocateSlotContent(childNode);
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
};
|
|
807
|
+
const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
|
|
808
|
+
if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
|
|
809
|
+
if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
|
|
810
|
+
return true;
|
|
811
|
+
}
|
|
812
|
+
if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
|
|
813
|
+
return true;
|
|
814
|
+
}
|
|
815
|
+
return false;
|
|
816
|
+
}
|
|
817
|
+
if (nodeToRelocate['s-sn'] === slotNameAttr) {
|
|
818
|
+
return true;
|
|
819
|
+
}
|
|
820
|
+
return slotNameAttr === '';
|
|
821
|
+
};
|
|
611
822
|
const renderVdom = (hostRef, renderFnResults) => {
|
|
612
823
|
const hostElm = hostRef.$hostElement$;
|
|
613
824
|
const cmpMeta = hostRef.$cmpMeta$;
|
|
@@ -625,9 +836,92 @@ const renderVdom = (hostRef, renderFnResults) => {
|
|
|
625
836
|
{
|
|
626
837
|
scopeId = hostElm['s-sc'];
|
|
627
838
|
}
|
|
839
|
+
{
|
|
840
|
+
contentRef = hostElm['s-cr'];
|
|
841
|
+
useNativeShadowDom = (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
|
|
842
|
+
// always reset
|
|
843
|
+
checkSlotFallbackVisibility = false;
|
|
844
|
+
}
|
|
628
845
|
// synchronous patch
|
|
629
846
|
patch(oldVNode, rootVnode);
|
|
847
|
+
{
|
|
848
|
+
// while we're moving nodes around existing nodes, temporarily disable
|
|
849
|
+
// the disconnectCallback from working
|
|
850
|
+
plt.$flags$ |= 1 /* isTmpDisconnected */;
|
|
851
|
+
if (checkSlotRelocate) {
|
|
852
|
+
relocateSlotContent(rootVnode.$elm$);
|
|
853
|
+
let relocateData;
|
|
854
|
+
let nodeToRelocate;
|
|
855
|
+
let orgLocationNode;
|
|
856
|
+
let parentNodeRef;
|
|
857
|
+
let insertBeforeNode;
|
|
858
|
+
let refNode;
|
|
859
|
+
let i = 0;
|
|
860
|
+
for (; i < relocateNodes.length; i++) {
|
|
861
|
+
relocateData = relocateNodes[i];
|
|
862
|
+
nodeToRelocate = relocateData.$nodeToRelocate$;
|
|
863
|
+
if (!nodeToRelocate['s-ol']) {
|
|
864
|
+
// add a reference node marking this node's original location
|
|
865
|
+
// keep a reference to this node for later lookups
|
|
866
|
+
orgLocationNode =
|
|
867
|
+
doc.createTextNode('');
|
|
868
|
+
orgLocationNode['s-nr'] = nodeToRelocate;
|
|
869
|
+
nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
|
|
870
|
+
}
|
|
871
|
+
}
|
|
872
|
+
for (i = 0; i < relocateNodes.length; i++) {
|
|
873
|
+
relocateData = relocateNodes[i];
|
|
874
|
+
nodeToRelocate = relocateData.$nodeToRelocate$;
|
|
875
|
+
if (relocateData.$slotRefNode$) {
|
|
876
|
+
// by default we're just going to insert it directly
|
|
877
|
+
// after the slot reference node
|
|
878
|
+
parentNodeRef = relocateData.$slotRefNode$.parentNode;
|
|
879
|
+
insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
|
|
880
|
+
orgLocationNode = nodeToRelocate['s-ol'];
|
|
881
|
+
while ((orgLocationNode = orgLocationNode.previousSibling)) {
|
|
882
|
+
refNode = orgLocationNode['s-nr'];
|
|
883
|
+
if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
|
|
884
|
+
refNode = refNode.nextSibling;
|
|
885
|
+
if (!refNode || !refNode['s-nr']) {
|
|
886
|
+
insertBeforeNode = refNode;
|
|
887
|
+
break;
|
|
888
|
+
}
|
|
889
|
+
}
|
|
890
|
+
}
|
|
891
|
+
if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
|
|
892
|
+
nodeToRelocate.nextSibling !== insertBeforeNode) {
|
|
893
|
+
// we've checked that it's worth while to relocate
|
|
894
|
+
// since that the node to relocate
|
|
895
|
+
// has a different next sibling or parent relocated
|
|
896
|
+
if (nodeToRelocate !== insertBeforeNode) {
|
|
897
|
+
if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
|
|
898
|
+
// probably a component in the index.html that doesn't have it's hostname set
|
|
899
|
+
nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
|
|
900
|
+
}
|
|
901
|
+
// add it back to the dom but in its new home
|
|
902
|
+
parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
|
|
903
|
+
}
|
|
904
|
+
}
|
|
905
|
+
}
|
|
906
|
+
else {
|
|
907
|
+
// this node doesn't have a slot home to go to, so let's hide it
|
|
908
|
+
if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
|
|
909
|
+
nodeToRelocate.hidden = true;
|
|
910
|
+
}
|
|
911
|
+
}
|
|
912
|
+
}
|
|
913
|
+
}
|
|
914
|
+
if (checkSlotFallbackVisibility) {
|
|
915
|
+
updateFallbackSlotVisibility(rootVnode.$elm$);
|
|
916
|
+
}
|
|
917
|
+
// done moving nodes around
|
|
918
|
+
// allow the disconnect callback to work again
|
|
919
|
+
plt.$flags$ &= ~1 /* isTmpDisconnected */;
|
|
920
|
+
// always reset
|
|
921
|
+
relocateNodes.length = 0;
|
|
922
|
+
}
|
|
630
923
|
};
|
|
924
|
+
const getElement = (ref) => (getHostRef(ref).$hostElement$ );
|
|
631
925
|
/**
|
|
632
926
|
* Helper function to create & dispatch a custom Event on a provided target
|
|
633
927
|
* @param elm the target of the Event
|
|
@@ -672,6 +966,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
672
966
|
hostRef.$queuedListeners$ = null;
|
|
673
967
|
}
|
|
674
968
|
}
|
|
969
|
+
{
|
|
970
|
+
promise = safeCall(instance, 'componentWillLoad');
|
|
971
|
+
}
|
|
675
972
|
}
|
|
676
973
|
endSchedule();
|
|
677
974
|
return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
|
|
@@ -1002,6 +1299,15 @@ const connectedCallback = (elm) => {
|
|
|
1002
1299
|
if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
|
|
1003
1300
|
// first time this component has connected
|
|
1004
1301
|
hostRef.$flags$ |= 1 /* hasConnected */;
|
|
1302
|
+
{
|
|
1303
|
+
// initUpdate
|
|
1304
|
+
// if the slot polyfill is required we'll need to put some nodes
|
|
1305
|
+
// in here to act as original content anchors as we move nodes around
|
|
1306
|
+
// host element has been connected to the DOM
|
|
1307
|
+
if ((cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */))) {
|
|
1308
|
+
setContentReference(elm);
|
|
1309
|
+
}
|
|
1310
|
+
}
|
|
1005
1311
|
{
|
|
1006
1312
|
// find the first ancestor component (if there is one) and register
|
|
1007
1313
|
// this component as one of the actively loading child components for its ancestor
|
|
@@ -1041,6 +1347,17 @@ const connectedCallback = (elm) => {
|
|
|
1041
1347
|
endConnected();
|
|
1042
1348
|
}
|
|
1043
1349
|
};
|
|
1350
|
+
const setContentReference = (elm) => {
|
|
1351
|
+
// only required when we're NOT using native shadow dom (slot)
|
|
1352
|
+
// or this browser doesn't support native shadow dom
|
|
1353
|
+
// and this host element was NOT created with SSR
|
|
1354
|
+
// let's pick out the inner content for slot projection
|
|
1355
|
+
// create a node to represent where the original
|
|
1356
|
+
// content was first placed, which is useful later on
|
|
1357
|
+
const contentRefElm = (elm['s-cr'] = doc.createComment(''));
|
|
1358
|
+
contentRefElm['s-cn'] = true;
|
|
1359
|
+
elm.insertBefore(contentRefElm, elm.firstChild);
|
|
1360
|
+
};
|
|
1044
1361
|
const disconnectedCallback = (elm) => {
|
|
1045
1362
|
if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
|
|
1046
1363
|
const hostRef = getHostRef(elm);
|
|
@@ -1231,6 +1548,7 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
|
|
|
1231
1548
|
|
|
1232
1549
|
exports.Host = Host;
|
|
1233
1550
|
exports.bootstrapLazy = bootstrapLazy;
|
|
1551
|
+
exports.getElement = getElement;
|
|
1234
1552
|
exports.h = h;
|
|
1235
1553
|
exports.promiseResolve = promiseResolve;
|
|
1236
1554
|
exports.registerInstance = registerInstance;
|