@salla.sa/twilight-components 1.0.2 → 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.
Files changed (34) hide show
  1. package/README.md +3 -0
  2. package/dist/cjs/{index-a67728b4.js → index-9441fd8e.js} +361 -43
  3. package/dist/cjs/index.cjs.js +119 -0
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/cjs/salla-login_2.cjs.entry.js +4 -103
  6. package/dist/cjs/search-modal-722cccc3.js +129 -0
  7. package/dist/cjs/twilight-components.cjs.js +2 -2
  8. package/dist/collection/components/search-modal/search-modal.css +9 -0
  9. package/dist/collection/components/search-modal/search-modal.js +55 -20
  10. package/dist/collection/index.js +3 -1
  11. package/dist/collection/plugins/tailwind-theme/index.js +6 -10
  12. package/dist/esm/{index-aeba9f62.js → index-63e5409f.js} +361 -44
  13. package/dist/esm/index.js +114 -0
  14. package/dist/esm/loader.js +2 -2
  15. package/dist/esm/salla-login_2.entry.js +2 -105
  16. package/dist/esm/search-modal-d6e12d32.js +126 -0
  17. package/dist/esm/twilight-components.js +2 -2
  18. package/dist/loader/cdn.js +3 -0
  19. package/dist/loader/index.cjs.js +3 -0
  20. package/dist/loader/index.d.ts +13 -0
  21. package/dist/loader/index.es2017.js +3 -0
  22. package/dist/loader/index.js +4 -0
  23. package/dist/loader/package.json +10 -0
  24. package/dist/twilight-components/index.esm.js +1 -0
  25. package/dist/twilight-components/p-01102f97.entry.js +1 -0
  26. package/dist/twilight-components/p-3d53781c.js +1 -0
  27. package/dist/twilight-components/p-591a15cf.js +1 -0
  28. package/dist/twilight-components/twilight-components.esm.js +1 -1
  29. package/dist/types/components/search-modal/search-modal.d.ts +10 -6
  30. package/dist/types/components.d.ts +8 -0
  31. package/dist/types/index.d.ts +8 -1
  32. package/package.json +1 -1
  33. package/dist/twilight-components/p-0a7edc5f.entry.js +0 -1
  34. 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 key = null;
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
- // normalize class / classname attributes
220
- if (vnodeData.key) {
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.$key$ = key;
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.$key$ = null;
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.$tag$));
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$.parentNode.insertBefore(node, 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.$key$ === vnode2.$key$;
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;