@geotrekce/geotrek-rando-widget 0.0.13 → 0.0.14
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/cjs/{css-shim-6f592941.js → css-shim-06c204c1.js} +1 -1
- package/dist/cjs/{dom-d5e52c7e.js → dom-874a1e39.js} +1 -1
- package/dist/cjs/geotrek-rando-widget.cjs.js +4 -4
- package/dist/cjs/grw-app.cjs.entry.js +4 -3
- package/dist/cjs/grw-filter_6.cjs.entry.js +14447 -14156
- package/dist/cjs/grw-information-desk-detail_3.cjs.entry.js +2 -2
- package/dist/cjs/grw-trek-card.cjs.entry.js +15 -7
- package/dist/cjs/{index-66d58516.js → index-c3fb4999.js} +219 -66
- package/dist/cjs/loader.cjs.js +4 -4
- package/dist/cjs/{shadow-css-cf936b02.js → shadow-css-a33dc836.js} +1 -1
- package/dist/cjs/{store-d301af22.js → store-5183d8f8.js} +4 -2
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/grw-app/grw-app.js +432 -450
- package/dist/collection/components/grw-filter/grw-filter.js +65 -61
- package/dist/collection/components/grw-information-desk-detail/grw-information-desk-detail.js +35 -44
- package/dist/collection/components/grw-map/grw-map.css +5 -4
- package/dist/collection/components/grw-map/grw-map.js +251 -217
- package/dist/collection/components/grw-poi-detail/grw-poi-detail.js +33 -32
- package/dist/collection/components/grw-sensitive-area-detail/grw-sensitive-area-detail.js +42 -47
- package/dist/collection/components/grw-trek-card/grw-trek-card.js +142 -129
- package/dist/collection/components/grw-trek-detail/grw-trek-detail.js +135 -208
- package/dist/collection/components/grw-treks-list/grw-treks-list.js +95 -65
- package/dist/collection/store/grw-trek-provider.js +61 -55
- package/dist/collection/store/grw-treks-provider.js +181 -177
- package/dist/collection/store/store.js +3 -2
- package/dist/components/grw-app.js +3 -2
- package/dist/components/grw-map2.js +14405 -14129
- package/dist/components/grw-trek-card2.js +17 -7
- package/dist/components/grw-trek-detail2.js +10 -3
- package/dist/components/grw-trek-provider2.js +6 -2
- package/dist/components/grw-treks-list2.js +7 -2
- package/dist/components/grw-treks-provider2.js +5 -3
- package/dist/components/store.js +3 -2
- package/dist/esm/{css-shim-2d0a698c.js → css-shim-bfa379cd.js} +1 -1
- package/dist/esm/{dom-9794f747.js → dom-104fb833.js} +1 -1
- package/dist/esm/geotrek-rando-widget.js +4 -4
- package/dist/esm/grw-app.entry.js +4 -3
- package/dist/esm/grw-filter_6.entry.js +14427 -14136
- package/dist/esm/grw-information-desk-detail_3.entry.js +2 -2
- package/dist/esm/grw-trek-card.entry.js +15 -7
- package/dist/esm/{index-899307bb.js → index-e834943f.js} +219 -66
- package/dist/esm/loader.js +4 -4
- package/dist/esm/{shadow-css-4cd4480f.js → shadow-css-4261c637.js} +1 -1
- package/dist/esm/{store-70461a28.js → store-c6ccb3db.js} +4 -3
- package/dist/esm-es5/{css-shim-2d0a698c.js → css-shim-bfa379cd.js} +0 -0
- package/dist/esm-es5/{dom-9794f747.js → dom-104fb833.js} +0 -0
- package/dist/esm-es5/geotrek-rando-widget.js +1 -1
- package/dist/esm-es5/grw-app.entry.js +1 -1
- package/dist/esm-es5/grw-filter_6.entry.js +4 -5
- package/dist/esm-es5/grw-information-desk-detail_3.entry.js +1 -1
- package/dist/esm-es5/grw-trek-card.entry.js +1 -1
- package/dist/esm-es5/{index-899307bb.js → index-e834943f.js} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/{shadow-css-4cd4480f.js → shadow-css-4261c637.js} +0 -0
- package/dist/esm-es5/{store-70461a28.js → store-c6ccb3db.js} +1 -1
- package/dist/geotrek-rando-widget/geotrek-rando-widget.esm.js +1 -1
- package/dist/geotrek-rando-widget/geotrek-rando-widget.js +1 -1
- package/dist/geotrek-rando-widget/p-392538a1.system.entry.js +1 -0
- package/dist/geotrek-rando-widget/{p-d1582cff.js → p-4c61dcad.js} +0 -0
- package/dist/geotrek-rando-widget/p-4e0fcbe6.js +1 -0
- package/dist/geotrek-rando-widget/p-6469fc8a.system.js +1 -0
- package/dist/geotrek-rando-widget/{p-c8c96517.system.js → p-6523a23b.system.js} +0 -0
- package/dist/geotrek-rando-widget/{p-32d97a4f.system.js → p-70ecdd1b.system.js} +0 -0
- package/dist/geotrek-rando-widget/{p-0c5b047c.js → p-88046639.js} +0 -0
- package/dist/geotrek-rando-widget/p-88e55e13.entry.js +1 -0
- package/dist/geotrek-rando-widget/p-93d51eaa.entry.js +1 -0
- package/dist/geotrek-rando-widget/p-95932d69.system.entry.js +5 -0
- package/dist/geotrek-rando-widget/{p-4690907e.js → p-9c0d229f.js} +1 -1
- package/dist/geotrek-rando-widget/{p-b1530d9c.system.js → p-a8de6293.system.js} +0 -0
- package/dist/geotrek-rando-widget/p-d56c1888.system.entry.js +1 -0
- package/dist/geotrek-rando-widget/{p-533fc2bb.entry.js → p-dce99cef.entry.js} +1 -1
- package/dist/geotrek-rando-widget/{p-8f9914f4.system.js → p-e2d589f8.system.js} +1 -1
- package/dist/geotrek-rando-widget/{p-82ca029f.system.js → p-e3c13365.system.js} +1 -1
- package/dist/geotrek-rando-widget/{p-2bd0278f.system.entry.js → p-e9f13f25.system.entry.js} +1 -1
- package/dist/geotrek-rando-widget/{p-4eaf20b7.js → p-ef5d4167.js} +0 -0
- package/dist/geotrek-rando-widget/p-fce69064.entry.js +1 -0
- package/dist/types/components/grw-map/grw-map.d.ts +3 -1
- package/dist/types/components/grw-trek-card/grw-trek-card.d.ts +4 -1
- package/dist/types/components/grw-trek-detail/grw-trek-detail.d.ts +3 -1
- package/dist/types/components/grw-treks-list/grw-treks-list.d.ts +1 -0
- package/dist/types/components.d.ts +8 -0
- package/dist/types/store/store.d.ts +5 -3
- package/dist/types/types/types.d.ts +6 -0
- package/loader/package.json +1 -0
- package/package.json +12 -12
- package/readme.md +4 -6
- package/dist/geotrek-rando-widget/p-067c02c4.system.js +0 -1
- package/dist/geotrek-rando-widget/p-18038011.js +0 -1
- package/dist/geotrek-rando-widget/p-2712caa8.system.entry.js +0 -6
- package/dist/geotrek-rando-widget/p-3ed52659.entry.js +0 -1
- package/dist/geotrek-rando-widget/p-48d5dde7.entry.js +0 -1
- package/dist/geotrek-rando-widget/p-e1431f36.system.entry.js +0 -1
- package/dist/geotrek-rando-widget/p-e38f4ff4.system.entry.js +0 -1
- package/dist/geotrek-rando-widget/p-f5d98aae.entry.js +0 -1
|
@@ -65,7 +65,7 @@ const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) =
|
|
|
65
65
|
const hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
66
66
|
try {
|
|
67
67
|
{
|
|
68
|
-
if (hostRef.$flags$ & 256 /* isListenReady */) {
|
|
68
|
+
if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
|
|
69
69
|
// instance is ready, let's call it's member method for this event
|
|
70
70
|
hostRef.$lazyInstance$[methodName](ev);
|
|
71
71
|
}
|
|
@@ -79,12 +79,12 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
81
|
const getHostListenerTarget = (elm, flags) => {
|
|
82
|
-
if (flags & 8 /* TargetWindow */)
|
|
82
|
+
if (flags & 8 /* LISTENER_FLAGS.TargetWindow */)
|
|
83
83
|
return win;
|
|
84
84
|
return elm;
|
|
85
85
|
};
|
|
86
86
|
// prettier-ignore
|
|
87
|
-
const hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
|
|
87
|
+
const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
|
|
88
88
|
const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
|
|
89
89
|
const createTime = (fnName, tagName = '') => {
|
|
90
90
|
{
|
|
@@ -100,7 +100,7 @@ const uniqueTime = (key, measureText) => {
|
|
|
100
100
|
};
|
|
101
101
|
}
|
|
102
102
|
};
|
|
103
|
-
const rootAppliedStyles = new WeakMap();
|
|
103
|
+
const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
|
|
104
104
|
const registerStyle = (scopeId, cssText, allowCS) => {
|
|
105
105
|
let style = styles.get(scopeId);
|
|
106
106
|
if (supportsConstructableStylesheets && allowCS) {
|
|
@@ -122,7 +122,7 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
|
|
|
122
122
|
const style = styles.get(scopeId);
|
|
123
123
|
// if an element is NOT connected then getRootNode() will return the wrong root node
|
|
124
124
|
// so the fallback is to always use the document for the root node in those cases
|
|
125
|
-
styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
|
|
125
|
+
styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
|
|
126
126
|
if (style) {
|
|
127
127
|
if (typeof style === 'string') {
|
|
128
128
|
styleContainerNode = styleContainerNode.head || styleContainerNode;
|
|
@@ -134,7 +134,7 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
|
|
|
134
134
|
if (!appliedStyles.has(scopeId)) {
|
|
135
135
|
{
|
|
136
136
|
if (plt.$cssShim$) {
|
|
137
|
-
styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */));
|
|
137
|
+
styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 /* CMP_FLAGS.needsScopedEncapsulation */));
|
|
138
138
|
const newScopeId = styleElm['s-sc'];
|
|
139
139
|
if (newScopeId) {
|
|
140
140
|
scopeId = newScopeId;
|
|
@@ -167,7 +167,7 @@ const attachStyles = (hostRef) => {
|
|
|
167
167
|
const flags = cmpMeta.$flags$;
|
|
168
168
|
const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
|
|
169
169
|
const scopeId = addStyle(supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$, elm);
|
|
170
|
-
if (flags & 10 /* needsScopedEncapsulation */) {
|
|
170
|
+
if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
|
|
171
171
|
// only required when we're NOT using native shadow dom (slot)
|
|
172
172
|
// or this browser doesn't support native shadow dom
|
|
173
173
|
// and this host element was NOT created with SSR
|
|
@@ -393,7 +393,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
393
393
|
}
|
|
394
394
|
}
|
|
395
395
|
}
|
|
396
|
-
else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
|
|
396
|
+
else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
|
|
397
397
|
newValue = newValue === true ? '' : newValue;
|
|
398
398
|
{
|
|
399
399
|
elm.setAttribute(memberName, newValue);
|
|
@@ -408,7 +408,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
|
|
|
408
408
|
// if the element passed in is a shadow root, which is a document fragment
|
|
409
409
|
// then we want to be adding attrs/props to the shadow root's "host" element
|
|
410
410
|
// if it's not a shadow root, then we add attrs/props to the same element
|
|
411
|
-
const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host
|
|
411
|
+
const elm = newVnode.$elm$.nodeType === 11 /* NODE_TYPE.DocumentFragment */ && newVnode.$elm$.host
|
|
412
412
|
? newVnode.$elm$.host
|
|
413
413
|
: newVnode.$elm$;
|
|
414
414
|
const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
|
|
@@ -426,6 +426,16 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
|
|
|
426
426
|
setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
|
|
427
427
|
}
|
|
428
428
|
};
|
|
429
|
+
/**
|
|
430
|
+
* Create a DOM Node corresponding to one of the children of a given VNode.
|
|
431
|
+
*
|
|
432
|
+
* @param oldParentVNode the parent VNode from the previous render
|
|
433
|
+
* @param newParentVNode the parent VNode from the current render
|
|
434
|
+
* @param childIndex the index of the VNode, in the _new_ parent node's
|
|
435
|
+
* children, for which we will create a new DOM node
|
|
436
|
+
* @param parentElm the parent DOM node which our new node will be a child of
|
|
437
|
+
* @returns the newly created node
|
|
438
|
+
*/
|
|
429
439
|
const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
430
440
|
// tslint:disable-next-line: prefer-const
|
|
431
441
|
const newVNode = newParentVNode.$children$[childIndex];
|
|
@@ -487,6 +497,74 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
|
|
|
487
497
|
}
|
|
488
498
|
}
|
|
489
499
|
};
|
|
500
|
+
/**
|
|
501
|
+
* Reconcile the children of a new VNode with the children of an old VNode by
|
|
502
|
+
* traversing the two collections of children, identifying nodes that are
|
|
503
|
+
* conserved or changed, calling out to `patch` to make any necessary
|
|
504
|
+
* updates to the DOM, and rearranging DOM nodes as needed.
|
|
505
|
+
*
|
|
506
|
+
* The algorithm for reconciling children works by analyzing two 'windows' onto
|
|
507
|
+
* the two arrays of children (`oldCh` and `newCh`). We keep track of the
|
|
508
|
+
* 'windows' by storing start and end indices and references to the
|
|
509
|
+
* corresponding array entries. Initially the two 'windows' are basically equal
|
|
510
|
+
* to the entire array, but we progressively narrow the windows until there are
|
|
511
|
+
* no children left to update by doing the following:
|
|
512
|
+
*
|
|
513
|
+
* 1. Skip any `null` entries at the beginning or end of the two arrays, so
|
|
514
|
+
* that if we have an initial array like the following we'll end up dealing
|
|
515
|
+
* only with a window bounded by the highlighted elements:
|
|
516
|
+
*
|
|
517
|
+
* [null, null, VNode1 , ... , VNode2, null, null]
|
|
518
|
+
* ^^^^^^ ^^^^^^
|
|
519
|
+
*
|
|
520
|
+
* 2. Check to see if the elements at the head and tail positions are equal
|
|
521
|
+
* across the windows. This will basically detect elements which haven't
|
|
522
|
+
* been added, removed, or changed position, i.e. if you had the following
|
|
523
|
+
* VNode elements (represented as HTML):
|
|
524
|
+
*
|
|
525
|
+
* oldVNode: `<div><p><span>HEY</span></p></div>`
|
|
526
|
+
* newVNode: `<div><p><span>THERE</span></p></div>`
|
|
527
|
+
*
|
|
528
|
+
* Then when comparing the children of the `<div>` tag we check the equality
|
|
529
|
+
* of the VNodes corresponding to the `<p>` tags and, since they are the
|
|
530
|
+
* same tag in the same position, we'd be able to avoid completely
|
|
531
|
+
* re-rendering the subtree under them with a new DOM element and would just
|
|
532
|
+
* call out to `patch` to handle reconciling their children and so on.
|
|
533
|
+
*
|
|
534
|
+
* 3. Check, for both windows, to see if the element at the beginning of the
|
|
535
|
+
* window corresponds to the element at the end of the other window. This is
|
|
536
|
+
* a heuristic which will let us identify _some_ situations in which
|
|
537
|
+
* elements have changed position, for instance it _should_ detect that the
|
|
538
|
+
* children nodes themselves have not changed but merely moved in the
|
|
539
|
+
* following example:
|
|
540
|
+
*
|
|
541
|
+
* oldVNode: `<div><element-one /><element-two /></div>`
|
|
542
|
+
* newVNode: `<div><element-two /><element-one /></div>`
|
|
543
|
+
*
|
|
544
|
+
* If we find cases like this then we also need to move the concrete DOM
|
|
545
|
+
* elements corresponding to the moved children to write the re-order to the
|
|
546
|
+
* DOM.
|
|
547
|
+
*
|
|
548
|
+
* 4. Finally, if VNodes have the `key` attribute set on them we check for any
|
|
549
|
+
* nodes in the old children which have the same key as the first element in
|
|
550
|
+
* our window on the new children. If we find such a node we handle calling
|
|
551
|
+
* out to `patch`, moving relevant DOM nodes, and so on, in accordance with
|
|
552
|
+
* what we find.
|
|
553
|
+
*
|
|
554
|
+
* Finally, once we've narrowed our 'windows' to the point that either of them
|
|
555
|
+
* collapse (i.e. they have length 0) we then handle any remaining VNode
|
|
556
|
+
* insertion or deletion that needs to happen to get a DOM state that correctly
|
|
557
|
+
* reflects the new child VNodes. If, for instance, after our window on the old
|
|
558
|
+
* children has collapsed we still have more nodes on the new children that
|
|
559
|
+
* we haven't dealt with yet then we need to add them, or if the new children
|
|
560
|
+
* collapse but we still have unhandled _old_ children then we need to make
|
|
561
|
+
* sure the corresponding DOM nodes are removed.
|
|
562
|
+
*
|
|
563
|
+
* @param parentElm the node into which the parent VNode is rendered
|
|
564
|
+
* @param oldCh the old children of the parent node
|
|
565
|
+
* @param newVNode the new VNode which will replace the parent
|
|
566
|
+
* @param newCh the new children of the parent node
|
|
567
|
+
*/
|
|
490
568
|
const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
491
569
|
let oldStartIdx = 0;
|
|
492
570
|
let newStartIdx = 0;
|
|
@@ -502,7 +580,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
502
580
|
let elmToMove;
|
|
503
581
|
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
|
|
504
582
|
if (oldStartVnode == null) {
|
|
505
|
-
//
|
|
583
|
+
// VNode might have been moved left
|
|
506
584
|
oldStartVnode = oldCh[++oldStartIdx];
|
|
507
585
|
}
|
|
508
586
|
else if (oldEndVnode == null) {
|
|
@@ -515,29 +593,65 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
515
593
|
newEndVnode = newCh[--newEndIdx];
|
|
516
594
|
}
|
|
517
595
|
else if (isSameVnode(oldStartVnode, newStartVnode)) {
|
|
596
|
+
// if the start nodes are the same then we should patch the new VNode
|
|
597
|
+
// onto the old one, and increment our `newStartIdx` and `oldStartIdx`
|
|
598
|
+
// indices to reflect that. We don't need to move any DOM Nodes around
|
|
599
|
+
// since things are matched up in order.
|
|
518
600
|
patch(oldStartVnode, newStartVnode);
|
|
519
601
|
oldStartVnode = oldCh[++oldStartIdx];
|
|
520
602
|
newStartVnode = newCh[++newStartIdx];
|
|
521
603
|
}
|
|
522
604
|
else if (isSameVnode(oldEndVnode, newEndVnode)) {
|
|
605
|
+
// likewise, if the end nodes are the same we patch new onto old and
|
|
606
|
+
// decrement our end indices, and also likewise in this case we don't
|
|
607
|
+
// need to move any DOM Nodes.
|
|
523
608
|
patch(oldEndVnode, newEndVnode);
|
|
524
609
|
oldEndVnode = oldCh[--oldEndIdx];
|
|
525
610
|
newEndVnode = newCh[--newEndIdx];
|
|
526
611
|
}
|
|
527
612
|
else if (isSameVnode(oldStartVnode, newEndVnode)) {
|
|
528
613
|
patch(oldStartVnode, newEndVnode);
|
|
614
|
+
// We need to move the element for `oldStartVnode` into a position which
|
|
615
|
+
// will be appropriate for `newEndVnode`. For this we can use
|
|
616
|
+
// `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
|
|
617
|
+
// sibling for `oldEndVnode.$elm$` then we want to move the DOM node for
|
|
618
|
+
// `oldStartVnode` between `oldEndVnode` and it's sibling, like so:
|
|
619
|
+
//
|
|
620
|
+
// <old-start-node />
|
|
621
|
+
// <some-intervening-node />
|
|
622
|
+
// <old-end-node />
|
|
623
|
+
// <!-- -> <-- `oldStartVnode.$elm$` should be inserted here
|
|
624
|
+
// <next-sibling />
|
|
625
|
+
//
|
|
626
|
+
// If instead `oldEndVnode.$elm$` has no sibling then we just want to put
|
|
627
|
+
// the node for `oldStartVnode` at the end of the children of
|
|
628
|
+
// `parentElm`. Luckily, `Node.nextSibling` will return `null` if there
|
|
629
|
+
// aren't any siblings, and passing `null` to `Node.insertBefore` will
|
|
630
|
+
// append it to the children of the parent element.
|
|
529
631
|
parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
|
|
530
632
|
oldStartVnode = oldCh[++oldStartIdx];
|
|
531
633
|
newEndVnode = newCh[--newEndIdx];
|
|
532
634
|
}
|
|
533
635
|
else if (isSameVnode(oldEndVnode, newStartVnode)) {
|
|
534
636
|
patch(oldEndVnode, newStartVnode);
|
|
637
|
+
// We've already checked above if `oldStartVnode` and `newStartVnode` are
|
|
638
|
+
// the same node, so since we're here we know that they are not. Thus we
|
|
639
|
+
// can move the element for `oldEndVnode` _before_ the element for
|
|
640
|
+
// `oldStartVnode`, leaving `oldStartVnode` to be reconciled in the
|
|
641
|
+
// future.
|
|
535
642
|
parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
|
|
536
643
|
oldEndVnode = oldCh[--oldEndIdx];
|
|
537
644
|
newStartVnode = newCh[++newStartIdx];
|
|
538
645
|
}
|
|
539
646
|
else {
|
|
540
|
-
//
|
|
647
|
+
// Here we do some checks to match up old and new nodes based on the
|
|
648
|
+
// `$key$` attribute, which is set by putting a `key="my-key"` attribute
|
|
649
|
+
// in the JSX for a DOM element in the implementation of a Stencil
|
|
650
|
+
// component.
|
|
651
|
+
//
|
|
652
|
+
// First we check to see if there are any nodes in the array of old
|
|
653
|
+
// children which have the same key as the first node in the new
|
|
654
|
+
// children.
|
|
541
655
|
idxInOld = -1;
|
|
542
656
|
{
|
|
543
657
|
for (i = oldStartIdx; i <= oldEndIdx; ++i) {
|
|
@@ -548,23 +662,32 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
548
662
|
}
|
|
549
663
|
}
|
|
550
664
|
if (idxInOld >= 0) {
|
|
665
|
+
// We found a node in the old children which matches up with the first
|
|
666
|
+
// node in the new children! So let's deal with that
|
|
551
667
|
elmToMove = oldCh[idxInOld];
|
|
552
668
|
if (elmToMove.$tag$ !== newStartVnode.$tag$) {
|
|
669
|
+
// the tag doesn't match so we'll need a new DOM element
|
|
553
670
|
node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
|
|
554
671
|
}
|
|
555
672
|
else {
|
|
556
673
|
patch(elmToMove, newStartVnode);
|
|
674
|
+
// invalidate the matching old node so that we won't try to update it
|
|
675
|
+
// again later on
|
|
557
676
|
oldCh[idxInOld] = undefined;
|
|
558
677
|
node = elmToMove.$elm$;
|
|
559
678
|
}
|
|
560
679
|
newStartVnode = newCh[++newStartIdx];
|
|
561
680
|
}
|
|
562
681
|
else {
|
|
563
|
-
//
|
|
682
|
+
// We either didn't find an element in the old children that matches
|
|
683
|
+
// the key of the first new child OR the build is not using `key`
|
|
684
|
+
// attributes at all. In either case we need to create a new element
|
|
685
|
+
// for the new node.
|
|
564
686
|
node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
|
|
565
687
|
newStartVnode = newCh[++newStartIdx];
|
|
566
688
|
}
|
|
567
689
|
if (node) {
|
|
690
|
+
// if we created a new node then handle inserting it to the DOM
|
|
568
691
|
{
|
|
569
692
|
oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
|
|
570
693
|
}
|
|
@@ -572,29 +695,58 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
572
695
|
}
|
|
573
696
|
}
|
|
574
697
|
if (oldStartIdx > oldEndIdx) {
|
|
698
|
+
// we have some more new nodes to add which don't match up with old nodes
|
|
575
699
|
addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
|
|
576
700
|
}
|
|
577
701
|
else if (newStartIdx > newEndIdx) {
|
|
702
|
+
// there are nodes in the `oldCh` array which no longer correspond to nodes
|
|
703
|
+
// in the new array, so lets remove them (which entails cleaning up the
|
|
704
|
+
// relevant DOM nodes)
|
|
578
705
|
removeVnodes(oldCh, oldStartIdx, oldEndIdx);
|
|
579
706
|
}
|
|
580
707
|
};
|
|
581
|
-
|
|
708
|
+
/**
|
|
709
|
+
* Compare two VNodes to determine if they are the same
|
|
710
|
+
*
|
|
711
|
+
* **NB**: This function is an equality _heuristic_ based on the available
|
|
712
|
+
* information set on the two VNodes and can be misleading under certain
|
|
713
|
+
* circumstances. In particular, if the two nodes do not have `key` attrs
|
|
714
|
+
* (available under `$key$` on VNodes) then the function falls back on merely
|
|
715
|
+
* checking that they have the same tag.
|
|
716
|
+
*
|
|
717
|
+
* So, in other words, if `key` attrs are not set on VNodes which may be
|
|
718
|
+
* changing order within a `children` array or something along those lines then
|
|
719
|
+
* we could obtain a false positive and then have to do needless re-rendering.
|
|
720
|
+
*
|
|
721
|
+
* @param leftVNode the first VNode to check
|
|
722
|
+
* @param rightVNode the second VNode to check
|
|
723
|
+
* @returns whether they're equal or not
|
|
724
|
+
*/
|
|
725
|
+
const isSameVnode = (leftVNode, rightVNode) => {
|
|
582
726
|
// compare if two vnode to see if they're "technically" the same
|
|
583
727
|
// need to have the same element tag, and same key to be the same
|
|
584
|
-
if (
|
|
728
|
+
if (leftVNode.$tag$ === rightVNode.$tag$) {
|
|
729
|
+
// this will be set if components in the build have `key` attrs set on them
|
|
585
730
|
{
|
|
586
|
-
return
|
|
731
|
+
return leftVNode.$key$ === rightVNode.$key$;
|
|
587
732
|
}
|
|
588
733
|
}
|
|
589
734
|
return false;
|
|
590
735
|
};
|
|
736
|
+
/**
|
|
737
|
+
* Handle reconciling an outdated VNode with a new one which corresponds to
|
|
738
|
+
* it. This function handles flushing updates to the DOM and reconciling the
|
|
739
|
+
* children of the two nodes (if any).
|
|
740
|
+
*
|
|
741
|
+
* @param oldVNode an old VNode whose DOM element and children we want to update
|
|
742
|
+
* @param newVNode a new VNode representing an updated version of the old one
|
|
743
|
+
*/
|
|
591
744
|
const patch = (oldVNode, newVNode) => {
|
|
592
745
|
const elm = (newVNode.$elm$ = oldVNode.$elm$);
|
|
593
746
|
const oldChildren = oldVNode.$children$;
|
|
594
747
|
const newChildren = newVNode.$children$;
|
|
595
748
|
const text = newVNode.$text$;
|
|
596
749
|
if (text === null) {
|
|
597
|
-
// element node
|
|
598
750
|
{
|
|
599
751
|
{
|
|
600
752
|
// either this is the first render of an element OR it's an update
|
|
@@ -605,6 +757,7 @@ const patch = (oldVNode, newVNode) => {
|
|
|
605
757
|
}
|
|
606
758
|
if (oldChildren !== null && newChildren !== null) {
|
|
607
759
|
// looks like there's child vnodes for both the old and new vnodes
|
|
760
|
+
// so we need to call `updateChildren` to reconcile them
|
|
608
761
|
updateChildren(elm, oldChildren, newVNode, newChildren);
|
|
609
762
|
}
|
|
610
763
|
else if (newChildren !== null) {
|
|
@@ -633,7 +786,7 @@ const renderVdom = (hostRef, renderFnResults) => {
|
|
|
633
786
|
const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
|
|
634
787
|
hostTagName = hostElm.tagName;
|
|
635
788
|
rootVnode.$tag$ = null;
|
|
636
|
-
rootVnode.$flags$ |= 4 /* isHost */;
|
|
789
|
+
rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
|
|
637
790
|
hostRef.$vnode$ = rootVnode;
|
|
638
791
|
rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
|
|
639
792
|
{
|
|
@@ -648,9 +801,9 @@ const createEvent = (ref, name, flags) => {
|
|
|
648
801
|
return {
|
|
649
802
|
emit: (detail) => {
|
|
650
803
|
return emitEvent(elm, name, {
|
|
651
|
-
bubbles: !!(flags & 4 /* Bubbles */),
|
|
652
|
-
composed: !!(flags & 2 /* Composed */),
|
|
653
|
-
cancelable: !!(flags & 1 /* Cancellable */),
|
|
804
|
+
bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
|
|
805
|
+
composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
|
|
806
|
+
cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
|
|
654
807
|
detail,
|
|
655
808
|
});
|
|
656
809
|
},
|
|
@@ -675,10 +828,10 @@ const attachToAncestor = (hostRef, ancestorComponent) => {
|
|
|
675
828
|
};
|
|
676
829
|
const scheduleUpdate = (hostRef, isInitialLoad) => {
|
|
677
830
|
{
|
|
678
|
-
hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
|
|
831
|
+
hostRef.$flags$ |= 16 /* HOST_FLAGS.isQueuedForUpdate */;
|
|
679
832
|
}
|
|
680
|
-
if (hostRef.$flags$ & 4 /* isWaitingForChildren */) {
|
|
681
|
-
hostRef.$flags$ |= 512 /* needsRerender */;
|
|
833
|
+
if (hostRef.$flags$ & 4 /* HOST_FLAGS.isWaitingForChildren */) {
|
|
834
|
+
hostRef.$flags$ |= 512 /* HOST_FLAGS.needsRerender */;
|
|
682
835
|
return;
|
|
683
836
|
}
|
|
684
837
|
attachToAncestor(hostRef, hostRef.$ancestorComponent$);
|
|
@@ -694,7 +847,7 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
694
847
|
let promise;
|
|
695
848
|
if (isInitialLoad) {
|
|
696
849
|
{
|
|
697
|
-
hostRef.$flags$ |= 256 /* isListenReady */;
|
|
850
|
+
hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
|
|
698
851
|
if (hostRef.$queuedListeners$) {
|
|
699
852
|
hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
|
|
700
853
|
hostRef.$queuedListeners$ = null;
|
|
@@ -740,7 +893,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
|
|
|
740
893
|
}
|
|
741
894
|
else {
|
|
742
895
|
Promise.all(childrenPromises).then(postUpdate);
|
|
743
|
-
hostRef.$flags$ |= 4 /* isWaitingForChildren */;
|
|
896
|
+
hostRef.$flags$ |= 4 /* HOST_FLAGS.isWaitingForChildren */;
|
|
744
897
|
childrenPromises.length = 0;
|
|
745
898
|
}
|
|
746
899
|
}
|
|
@@ -750,10 +903,10 @@ const callRender = (hostRef, instance, elm) => {
|
|
|
750
903
|
renderingRef = instance;
|
|
751
904
|
instance = instance.render() ;
|
|
752
905
|
{
|
|
753
|
-
hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
|
|
906
|
+
hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
|
|
754
907
|
}
|
|
755
908
|
{
|
|
756
|
-
hostRef.$flags$ |= 2 /* hasRendered */;
|
|
909
|
+
hostRef.$flags$ |= 2 /* HOST_FLAGS.hasRendered */;
|
|
757
910
|
}
|
|
758
911
|
{
|
|
759
912
|
{
|
|
@@ -779,8 +932,8 @@ const postUpdateComponent = (hostRef) => {
|
|
|
779
932
|
const endPostUpdate = createTime('postUpdate', tagName);
|
|
780
933
|
const instance = hostRef.$lazyInstance$ ;
|
|
781
934
|
const ancestorComponent = hostRef.$ancestorComponent$;
|
|
782
|
-
if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
|
|
783
|
-
hostRef.$flags$ |= 64 /* hasLoadedComponent */;
|
|
935
|
+
if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
|
|
936
|
+
hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
|
|
784
937
|
{
|
|
785
938
|
// DOM WRITE!
|
|
786
939
|
addHydratedFlag(elm);
|
|
@@ -806,10 +959,10 @@ const postUpdateComponent = (hostRef) => {
|
|
|
806
959
|
hostRef.$onRenderResolve$();
|
|
807
960
|
hostRef.$onRenderResolve$ = undefined;
|
|
808
961
|
}
|
|
809
|
-
if (hostRef.$flags$ & 512 /* needsRerender */) {
|
|
962
|
+
if (hostRef.$flags$ & 512 /* HOST_FLAGS.needsRerender */) {
|
|
810
963
|
nextTick(() => scheduleUpdate(hostRef, false));
|
|
811
964
|
}
|
|
812
|
-
hostRef.$flags$ &= ~(4 /* isWaitingForChildren */ | 512 /* needsRerender */);
|
|
965
|
+
hostRef.$flags$ &= ~(4 /* HOST_FLAGS.isWaitingForChildren */ | 512 /* HOST_FLAGS.needsRerender */);
|
|
813
966
|
}
|
|
814
967
|
// ( •_•)
|
|
815
968
|
// ( •_•)>⌐■-■
|
|
@@ -820,7 +973,7 @@ const forceUpdate = (ref) => {
|
|
|
820
973
|
const hostRef = getHostRef(ref);
|
|
821
974
|
const isConnected = hostRef.$hostElement$.isConnected;
|
|
822
975
|
if (isConnected &&
|
|
823
|
-
(hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
|
|
976
|
+
(hostRef.$flags$ & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
|
|
824
977
|
scheduleUpdate(hostRef, false);
|
|
825
978
|
}
|
|
826
979
|
// Returns "true" when the forced update was successfully scheduled
|
|
@@ -877,16 +1030,16 @@ const addHydratedFlag = (elm) => elm.classList.add('hydrated')
|
|
|
877
1030
|
const parsePropertyValue = (propValue, propType) => {
|
|
878
1031
|
// ensure this value is of the correct prop type
|
|
879
1032
|
if (propValue != null && !isComplexType(propValue)) {
|
|
880
|
-
if (propType & 4 /* Boolean */) {
|
|
1033
|
+
if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
|
|
881
1034
|
// per the HTML spec, any string value means it is a boolean true value
|
|
882
1035
|
// but we'll cheat here and say that the string "false" is the boolean false
|
|
883
1036
|
return propValue === 'false' ? false : propValue === '' || !!propValue;
|
|
884
1037
|
}
|
|
885
|
-
if (propType & 2 /* Number */) {
|
|
1038
|
+
if (propType & 2 /* MEMBER_FLAGS.Number */) {
|
|
886
1039
|
// force it to be a number
|
|
887
1040
|
return parseFloat(propValue);
|
|
888
1041
|
}
|
|
889
|
-
if (propType & 1 /* String */) {
|
|
1042
|
+
if (propType & 1 /* MEMBER_FLAGS.String */) {
|
|
890
1043
|
// could have been passed as a number or boolean
|
|
891
1044
|
// but we still want it as a string
|
|
892
1045
|
return String(propValue);
|
|
@@ -910,13 +1063,13 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
910
1063
|
// explicitly check for NaN on both sides, as `NaN === NaN` is always false
|
|
911
1064
|
const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
|
|
912
1065
|
const didValueChange = newVal !== oldVal && !areBothNaN;
|
|
913
|
-
if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && didValueChange) {
|
|
1066
|
+
if ((!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) || oldVal === undefined) && didValueChange) {
|
|
914
1067
|
// gadzooks! the property's value has changed!!
|
|
915
1068
|
// set our new value!
|
|
916
1069
|
hostRef.$instanceValues$.set(propName, newVal);
|
|
917
1070
|
if (instance) {
|
|
918
1071
|
// get an array of method names of watch functions to call
|
|
919
|
-
if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
|
|
1072
|
+
if (cmpMeta.$watchers$ && flags & 128 /* HOST_FLAGS.isWatchReady */) {
|
|
920
1073
|
const watchMethods = cmpMeta.$watchers$[propName];
|
|
921
1074
|
if (watchMethods) {
|
|
922
1075
|
// this instance is watching for when this property changed
|
|
@@ -931,7 +1084,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
931
1084
|
});
|
|
932
1085
|
}
|
|
933
1086
|
}
|
|
934
|
-
if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
|
|
1087
|
+
if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
|
|
935
1088
|
// looks like this value actually changed, so we've got work to do!
|
|
936
1089
|
// but only if we've already rendered, otherwise just chill out
|
|
937
1090
|
// queue that we need to do an update, but don't worry about queuing
|
|
@@ -950,8 +1103,8 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
950
1103
|
const members = Object.entries(cmpMeta.$members$);
|
|
951
1104
|
const prototype = Cstr.prototype;
|
|
952
1105
|
members.map(([memberName, [memberFlags]]) => {
|
|
953
|
-
if ((memberFlags & 31 /* Prop */ ||
|
|
954
|
-
((flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
|
|
1106
|
+
if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
|
|
1107
|
+
((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
|
|
955
1108
|
// proxyComponent - prop
|
|
956
1109
|
Object.defineProperty(prototype, memberName, {
|
|
957
1110
|
get() {
|
|
@@ -967,7 +1120,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
967
1120
|
});
|
|
968
1121
|
}
|
|
969
1122
|
});
|
|
970
|
-
if ((flags & 1 /* isElementConstructor */)) {
|
|
1123
|
+
if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
|
|
971
1124
|
const attrNameToPropName = new Map();
|
|
972
1125
|
prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
|
|
973
1126
|
plt.jmp(() => {
|
|
@@ -1023,7 +1176,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1023
1176
|
// create an array of attributes to observe
|
|
1024
1177
|
// and also create a map of html attribute name to js property name
|
|
1025
1178
|
Cstr.observedAttributes = members
|
|
1026
|
-
.filter(([_, m]) => m[0] & 15 /* HasAttribute */) // filter to only keep props that should match attributes
|
|
1179
|
+
.filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) // filter to only keep props that should match attributes
|
|
1027
1180
|
.map(([propName, m]) => {
|
|
1028
1181
|
const attrName = m[1] || propName;
|
|
1029
1182
|
attrNameToPropName.set(attrName, propName);
|
|
@@ -1035,10 +1188,10 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1035
1188
|
};
|
|
1036
1189
|
const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
|
|
1037
1190
|
// initializeComponent
|
|
1038
|
-
if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
|
|
1191
|
+
if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
|
|
1039
1192
|
{
|
|
1040
1193
|
// we haven't initialized this element yet
|
|
1041
|
-
hostRef.$flags$ |= 32 /* hasInitializedComponent */;
|
|
1194
|
+
hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
|
|
1042
1195
|
// lazy loaded components
|
|
1043
1196
|
// request the component's implementation to be
|
|
1044
1197
|
// wired up with the host element
|
|
@@ -1056,7 +1209,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
1056
1209
|
{
|
|
1057
1210
|
cmpMeta.$watchers$ = Cstr.watchers;
|
|
1058
1211
|
}
|
|
1059
|
-
proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
|
|
1212
|
+
proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */);
|
|
1060
1213
|
Cstr.isProxied = true;
|
|
1061
1214
|
}
|
|
1062
1215
|
const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);
|
|
@@ -1064,7 +1217,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
1064
1217
|
// but let's keep track of when we start and stop
|
|
1065
1218
|
// so that the getters/setters don't incorrectly step on data
|
|
1066
1219
|
{
|
|
1067
|
-
hostRef.$flags$ |= 8 /* isConstructingInstance */;
|
|
1220
|
+
hostRef.$flags$ |= 8 /* HOST_FLAGS.isConstructingInstance */;
|
|
1068
1221
|
}
|
|
1069
1222
|
// construct the lazy-loaded component implementation
|
|
1070
1223
|
// passing the hostRef is very important during
|
|
@@ -1077,10 +1230,10 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
1077
1230
|
consoleError(e);
|
|
1078
1231
|
}
|
|
1079
1232
|
{
|
|
1080
|
-
hostRef.$flags$ &= ~8 /* isConstructingInstance */;
|
|
1233
|
+
hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
|
|
1081
1234
|
}
|
|
1082
1235
|
{
|
|
1083
|
-
hostRef.$flags$ |= 128 /* isWatchReady */;
|
|
1236
|
+
hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
|
|
1084
1237
|
}
|
|
1085
1238
|
endNewInstance();
|
|
1086
1239
|
fireConnectedCallback(hostRef.$lazyInstance$);
|
|
@@ -1091,10 +1244,10 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
1091
1244
|
const scopeId = getScopeId(cmpMeta);
|
|
1092
1245
|
if (!styles.has(scopeId)) {
|
|
1093
1246
|
const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
|
|
1094
|
-
if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
|
|
1095
|
-
style = await Promise.resolve().then(function () { return require('./shadow-css-
|
|
1247
|
+
if (cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) {
|
|
1248
|
+
style = await Promise.resolve().then(function () { return require('./shadow-css-a33dc836.js'); }).then((m) => m.scopeCss(style, scopeId, false));
|
|
1096
1249
|
}
|
|
1097
|
-
registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
|
|
1250
|
+
registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */));
|
|
1098
1251
|
endRegisterStyles();
|
|
1099
1252
|
}
|
|
1100
1253
|
}
|
|
@@ -1121,13 +1274,13 @@ const fireConnectedCallback = (instance) => {
|
|
|
1121
1274
|
}
|
|
1122
1275
|
};
|
|
1123
1276
|
const connectedCallback = (elm) => {
|
|
1124
|
-
if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
|
|
1277
|
+
if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
|
|
1125
1278
|
const hostRef = getHostRef(elm);
|
|
1126
1279
|
const cmpMeta = hostRef.$cmpMeta$;
|
|
1127
1280
|
const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
|
|
1128
|
-
if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
|
|
1281
|
+
if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
|
|
1129
1282
|
// first time this component has connected
|
|
1130
|
-
hostRef.$flags$ |= 1 /* hasConnected */;
|
|
1283
|
+
hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
|
|
1131
1284
|
{
|
|
1132
1285
|
// find the first ancestor component (if there is one) and register
|
|
1133
1286
|
// this component as one of the actively loading child components for its ancestor
|
|
@@ -1147,7 +1300,7 @@ const connectedCallback = (elm) => {
|
|
|
1147
1300
|
// https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
|
|
1148
1301
|
if (cmpMeta.$members$) {
|
|
1149
1302
|
Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
|
|
1150
|
-
if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
|
|
1303
|
+
if (memberFlags & 31 /* MEMBER_FLAGS.Prop */ && elm.hasOwnProperty(memberName)) {
|
|
1151
1304
|
const value = elm[memberName];
|
|
1152
1305
|
delete elm[memberName];
|
|
1153
1306
|
elm[memberName] = value;
|
|
@@ -1170,7 +1323,7 @@ const connectedCallback = (elm) => {
|
|
|
1170
1323
|
}
|
|
1171
1324
|
};
|
|
1172
1325
|
const disconnectedCallback = (elm) => {
|
|
1173
|
-
if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
|
|
1326
|
+
if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
|
|
1174
1327
|
const hostRef = getHostRef(elm);
|
|
1175
1328
|
const instance = hostRef.$lazyInstance$ ;
|
|
1176
1329
|
{
|
|
@@ -1194,7 +1347,7 @@ const patchChildSlotNodes = (elm, cmpMeta) => {
|
|
|
1194
1347
|
return this[n];
|
|
1195
1348
|
}
|
|
1196
1349
|
}
|
|
1197
|
-
if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
|
|
1350
|
+
if (cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) {
|
|
1198
1351
|
const childNodesFn = elm.__lookupGetter__('childNodes');
|
|
1199
1352
|
Object.defineProperty(elm, 'children', {
|
|
1200
1353
|
get() {
|
|
@@ -1209,8 +1362,8 @@ const patchChildSlotNodes = (elm, cmpMeta) => {
|
|
|
1209
1362
|
Object.defineProperty(elm, 'childNodes', {
|
|
1210
1363
|
get() {
|
|
1211
1364
|
const childNodes = childNodesFn.call(this);
|
|
1212
|
-
if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0 &&
|
|
1213
|
-
getHostRef(this).$flags$ & 2 /* hasRendered */) {
|
|
1365
|
+
if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0 &&
|
|
1366
|
+
getHostRef(this).$flags$ & 2 /* HOST_FLAGS.hasRendered */) {
|
|
1214
1367
|
const result = new FakeNodeList();
|
|
1215
1368
|
for (let i = 0; i < childNodes.length; i++) {
|
|
1216
1369
|
const slot = childNodes[i]['s-nr'];
|
|
@@ -1255,8 +1408,8 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1255
1408
|
{
|
|
1256
1409
|
cmpMeta.$watchers$ = {};
|
|
1257
1410
|
}
|
|
1258
|
-
if (!supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
|
|
1259
|
-
cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
|
|
1411
|
+
if (!supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
|
|
1412
|
+
cmpMeta.$flags$ |= 8 /* CMP_FLAGS.needsShadowDomShim */;
|
|
1260
1413
|
}
|
|
1261
1414
|
const tagName = cmpMeta.$tagName$;
|
|
1262
1415
|
const HostElement = class extends HTMLElement {
|
|
@@ -1266,7 +1419,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1266
1419
|
super(self);
|
|
1267
1420
|
self = this;
|
|
1268
1421
|
registerHost(self, cmpMeta);
|
|
1269
|
-
if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
|
|
1422
|
+
if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
|
|
1270
1423
|
// this component is using shadow dom
|
|
1271
1424
|
// and this browser supports shadow dom
|
|
1272
1425
|
// add the read-only property "shadowRoot" to the host element
|
|
@@ -1307,7 +1460,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1307
1460
|
cmpMeta.$lazyBundleId$ = lazyBundle[0];
|
|
1308
1461
|
if (!exclude.includes(tagName) && !customElements.get(tagName)) {
|
|
1309
1462
|
cmpTags.push(tagName);
|
|
1310
|
-
customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
|
|
1463
|
+
customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* PROXY_FLAGS.isElementConstructor */));
|
|
1311
1464
|
}
|
|
1312
1465
|
});
|
|
1313
1466
|
});
|
|
@@ -1329,7 +1482,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
1329
1482
|
// Fallback appLoad event
|
|
1330
1483
|
endBootstrap();
|
|
1331
1484
|
};
|
|
1332
|
-
const hostRefs = new WeakMap();
|
|
1485
|
+
const hostRefs = /*@__PURE__*/ new WeakMap();
|
|
1333
1486
|
const getHostRef = (ref) => hostRefs.get(ref);
|
|
1334
1487
|
const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
|
|
1335
1488
|
const registerHost = (elm, cmpMeta) => {
|
|
@@ -1371,14 +1524,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
1371
1524
|
return importedModule[exportName];
|
|
1372
1525
|
}, consoleError);
|
|
1373
1526
|
};
|
|
1374
|
-
const styles = new Map();
|
|
1527
|
+
const styles = /*@__PURE__*/ new Map();
|
|
1375
1528
|
const queueDomReads = [];
|
|
1376
1529
|
const queueDomWrites = [];
|
|
1377
1530
|
const queueTask = (queue, write) => (cb) => {
|
|
1378
1531
|
queue.push(cb);
|
|
1379
1532
|
if (!queuePending) {
|
|
1380
1533
|
queuePending = true;
|
|
1381
|
-
if (write && plt.$flags$ & 4 /* queueSync */) {
|
|
1534
|
+
if (write && plt.$flags$ & 4 /* PLATFORM_FLAGS.queueSync */) {
|
|
1382
1535
|
nextTick(flush);
|
|
1383
1536
|
}
|
|
1384
1537
|
else {
|