UNPKG

71.3 kBJavaScriptView Raw
1'use strict';
2
3function _interopNamespace(e) {
4 if (e && e.__esModule) { return e; } else {
5 var n = {};
6 if (e) {
7 Object.keys(e).forEach(function (k) {
8 var d = Object.getOwnPropertyDescriptor(e, k);
9 Object.defineProperty(n, k, d.get ? d : {
10 enumerable: true,
11 get: function () {
12 return e[k];
13 }
14 });
15 });
16 }
17 n['default'] = e;
18 return n;
19 }
20}
21
22const NAMESPACE = 'bulmil';
23
24let contentRef;
25let hostTagName;
26let useNativeShadowDom = false;
27let checkSlotFallbackVisibility = false;
28let checkSlotRelocate = false;
29let isSvgMode = false;
30let queueCongestion = 0;
31let queuePending = false;
32const win = typeof window !== 'undefined' ? window : {};
33const CSS = win.CSS ;
34const doc = win.document || { head: {} };
35const plt = {
36 $flags$: 0,
37 $resourcesUrl$: '',
38 jmp: h => h(),
39 raf: h => requestAnimationFrame(h),
40 ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
41 rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
42};
43const supportsShadow = true;
44const promiseResolve = (v) => Promise.resolve(v);
45const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
46 try {
47 new CSSStyleSheet();
48 return true;
49 }
50 catch (e) { }
51 return false;
52 })()
53 ;
54const CONTENT_REF_ID = 'r';
55const ORG_LOCATION_ID = 'o';
56const SLOT_NODE_ID = 's';
57const TEXT_NODE_ID = 't';
58const HYDRATE_ID = 's-id';
59const HYDRATED_STYLE_ID = 'sty-id';
60const HYDRATE_CHILD_ID = 'c-id';
61const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
62const createTime = (fnName, tagName = '') => {
63 {
64 return () => {
65 return;
66 };
67 }
68};
69const uniqueTime = (key, measureText) => {
70 {
71 return () => {
72 return;
73 };
74 }
75};
76const rootAppliedStyles = new WeakMap();
77const registerStyle = (scopeId, cssText, allowCS) => {
78 let style = styles.get(scopeId);
79 if (supportsConstructibleStylesheets && allowCS) {
80 style = (style || new CSSStyleSheet());
81 style.replace(cssText);
82 }
83 else {
84 style = cssText;
85 }
86 styles.set(scopeId, style);
87};
88const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
89 let scopeId = getScopeId(cmpMeta);
90 let style = styles.get(scopeId);
91 // if an element is NOT connected then getRootNode() will return the wrong root node
92 // so the fallback is to always use the document for the root node in those cases
93 styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
94 if (style) {
95 if (typeof style === 'string') {
96 styleContainerNode = styleContainerNode.head || styleContainerNode;
97 let appliedStyles = rootAppliedStyles.get(styleContainerNode);
98 let styleElm;
99 if (!appliedStyles) {
100 rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
101 }
102 if (!appliedStyles.has(scopeId)) {
103 if ( styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) {
104 // This is only happening on native shadow-dom, do not needs CSS var shim
105 styleElm.innerHTML = style;
106 }
107 else {
108 if ( plt.$cssShim$) {
109 styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */));
110 const newScopeId = styleElm['s-sc'];
111 if (newScopeId) {
112 scopeId = newScopeId;
113 // we don't want to add this styleID to the appliedStyles Set
114 // since the cssVarShim might need to apply several different
115 // stylesheets for the same component
116 appliedStyles = null;
117 }
118 }
119 else {
120 styleElm = doc.createElement('style');
121 styleElm.innerHTML = style;
122 }
123 styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
124 }
125 if (appliedStyles) {
126 appliedStyles.add(scopeId);
127 }
128 }
129 }
130 else if ( !styleContainerNode.adoptedStyleSheets.includes(style)) {
131 styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
132 }
133 }
134 return scopeId;
135};
136const attachStyles = (hostRef) => {
137 const cmpMeta = hostRef.$cmpMeta$;
138 const elm = hostRef.$hostElement$;
139 const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
140 const scopeId = addStyle( elm.getRootNode(), cmpMeta, hostRef.$modeName$, elm);
141 endAttachStyles();
142};
143const getScopeId = (cmp, mode) => 'sc-' + ( cmp.$tagName$);
144/**
145 * Default style mode id
146 */
147/**
148 * Reusable empty obj/array
149 * Don't add values to these!!
150 */
151const EMPTY_OBJ = {};
152const isComplexType = (o) => {
153 // https://jsperf.com/typeof-fn-object/5
154 o = typeof o;
155 return o === 'object' || o === 'function';
156};
157const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
158/**
159 * Production h() function based on Preact by
160 * Jason Miller (@developit)
161 * Licensed under the MIT License
162 * https://github.com/developit/preact/blob/master/LICENSE
163 *
164 * Modified for Stencil's compiler and vdom
165 */
166// const stack: any[] = [];
167// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
168// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
169const h = (nodeName, vnodeData, ...children) => {
170 let child = null;
171 let slotName = null;
172 let simple = false;
173 let lastSimple = false;
174 let vNodeChildren = [];
175 const walk = (c) => {
176 for (let i = 0; i < c.length; i++) {
177 child = c[i];
178 if (Array.isArray(child)) {
179 walk(child);
180 }
181 else if (child != null && typeof child !== 'boolean') {
182 if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {
183 child = String(child);
184 }
185 if (simple && lastSimple) {
186 // If the previous child was simple (string), we merge both
187 vNodeChildren[vNodeChildren.length - 1].$text$ += child;
188 }
189 else {
190 // Append a new vNode, if it's text, we create a text vNode
191 vNodeChildren.push(simple ? newVNode(null, child) : child);
192 }
193 lastSimple = simple;
194 }
195 }
196 };
197 walk(children);
198 if (vnodeData) {
199 if ( vnodeData.name) {
200 slotName = vnodeData.name;
201 }
202 {
203 const classData = vnodeData.className || vnodeData.class;
204 if (classData) {
205 vnodeData.class =
206 typeof classData !== 'object'
207 ? classData
208 : Object.keys(classData)
209 .filter(k => classData[k])
210 .join(' ');
211 }
212 }
213 }
214 if ( typeof nodeName === 'function') {
215 // nodeName is a functional component
216 return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
217 }
218 const vnode = newVNode(nodeName, null);
219 vnode.$attrs$ = vnodeData;
220 if (vNodeChildren.length > 0) {
221 vnode.$children$ = vNodeChildren;
222 }
223 {
224 vnode.$name$ = slotName;
225 }
226 return vnode;
227};
228const newVNode = (tag, text) => {
229 const vnode = {
230 $flags$: 0,
231 $tag$: tag,
232 $text$: text,
233 $elm$: null,
234 $children$: null,
235 };
236 {
237 vnode.$attrs$ = null;
238 }
239 {
240 vnode.$name$ = null;
241 }
242 return vnode;
243};
244const Host = {};
245const isHost = (node) => node && node.$tag$ === Host;
246const vdomFnUtils = {
247 forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
248 map: (children, cb) => children
249 .map(convertToPublic)
250 .map(cb)
251 .map(convertToPrivate),
252};
253const convertToPublic = (node) => ({
254 vattrs: node.$attrs$,
255 vchildren: node.$children$,
256 vkey: node.$key$,
257 vname: node.$name$,
258 vtag: node.$tag$,
259 vtext: node.$text$,
260});
261const convertToPrivate = (node) => {
262 const vnode = newVNode(node.vtag, node.vtext);
263 vnode.$attrs$ = node.vattrs;
264 vnode.$children$ = node.vchildren;
265 vnode.$key$ = node.vkey;
266 vnode.$name$ = node.vname;
267 return vnode;
268};
269/**
270 * Production setAccessor() function based on Preact by
271 * Jason Miller (@developit)
272 * Licensed under the MIT License
273 * https://github.com/developit/preact/blob/master/LICENSE
274 *
275 * Modified for Stencil's compiler and vdom
276 */
277const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
278 if (oldValue !== newValue) {
279 let isProp = isMemberInElement(elm, memberName);
280 let ln = memberName.toLowerCase();
281 if ( memberName === 'class') {
282 const classList = elm.classList;
283 const oldClasses = parseClassList(oldValue);
284 const newClasses = parseClassList(newValue);
285 classList.remove(...oldClasses.filter(c => c && !newClasses.includes(c)));
286 classList.add(...newClasses.filter(c => c && !oldClasses.includes(c)));
287 }
288 else if ( ( !isProp ) && memberName[0] === 'o' && memberName[1] === 'n') {
289 // Event Handlers
290 // so if the member name starts with "on" and the 3rd characters is
291 // a capital letter, and it's not already a member on the element,
292 // then we're assuming it's an event listener
293 if (memberName[2] === '-') {
294 // on- prefixed events
295 // allows to be explicit about the dom event to listen without any magic
296 // under the hood:
297 // <my-cmp on-click> // listens for "click"
298 // <my-cmp on-Click> // listens for "Click"
299 // <my-cmp on-ionChange> // listens for "ionChange"
300 // <my-cmp on-EVENTS> // listens for "EVENTS"
301 memberName = memberName.slice(3);
302 }
303 else if (isMemberInElement(win, ln)) {
304 // standard event
305 // the JSX attribute could have been "onMouseOver" and the
306 // member name "onmouseover" is on the window's prototype
307 // so let's add the listener "mouseover", which is all lowercased
308 memberName = ln.slice(2);
309 }
310 else {
311 // custom event
312 // the JSX attribute could have been "onMyCustomEvent"
313 // so let's trim off the "on" prefix and lowercase the first character
314 // and add the listener "myCustomEvent"
315 // except for the first character, we keep the event name case
316 memberName = ln[2] + memberName.slice(3);
317 }
318 if (oldValue) {
319 plt.rel(elm, memberName, oldValue, false);
320 }
321 if (newValue) {
322 plt.ael(elm, memberName, newValue, false);
323 }
324 }
325 else {
326 // Set property if it exists and it's not a SVG
327 const isComplex = isComplexType(newValue);
328 if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
329 try {
330 if (!elm.tagName.includes('-')) {
331 let n = newValue == null ? '' : newValue;
332 // Workaround for Safari, moving the <input> caret when re-assigning the same valued
333 if (memberName === 'list') {
334 isProp = false;
335 // tslint:disable-next-line: triple-equals
336 }
337 else if (oldValue == null || elm[memberName] != n) {
338 elm[memberName] = n;
339 }
340 }
341 else {
342 elm[memberName] = newValue;
343 }
344 }
345 catch (e) { }
346 }
347 if (newValue == null || newValue === false) {
348 {
349 elm.removeAttribute(memberName);
350 }
351 }
352 else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
353 newValue = newValue === true ? '' : newValue;
354 {
355 elm.setAttribute(memberName, newValue);
356 }
357 }
358 }
359 }
360};
361const parseClassListRegex = /\s/;
362const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
363const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
364 // if the element passed in is a shadow root, which is a document fragment
365 // then we want to be adding attrs/props to the shadow root's "host" element
366 // if it's not a shadow root, then we add attrs/props to the same element
367 const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
368 const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
369 const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
370 {
371 // remove attributes no longer present on the vnode by setting them to undefined
372 for (memberName in oldVnodeAttrs) {
373 if (!(memberName in newVnodeAttrs)) {
374 setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
375 }
376 }
377 }
378 // add new & update changed attributes
379 for (memberName in newVnodeAttrs) {
380 setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
381 }
382};
383const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
384 // tslint:disable-next-line: prefer-const
385 let newVNode = newParentVNode.$children$[childIndex];
386 let i = 0;
387 let elm;
388 let childNode;
389 let oldVNode;
390 if ( !useNativeShadowDom) {
391 // remember for later we need to check to relocate nodes
392 checkSlotRelocate = true;
393 if (newVNode.$tag$ === 'slot') {
394 newVNode.$flags$ |= newVNode.$children$
395 ? // slot element has fallback content
396 2 /* isSlotFallback */
397 : // slot element does not have fallback content
398 1 /* isSlotReference */;
399 }
400 }
401 if ( newVNode.$text$ !== null) {
402 // create text node
403 elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
404 }
405 else if ( newVNode.$flags$ & 1 /* isSlotReference */) {
406 // create a slot reference node
407 elm = newVNode.$elm$ = doc.createTextNode('');
408 }
409 else {
410 // create element
411 elm = newVNode.$elm$ = ( doc.createElement( newVNode.$flags$ & 2 /* isSlotFallback */ ? 'slot-fb' : newVNode.$tag$));
412 // add css classes, attrs, props, listeners, etc.
413 {
414 updateElement(null, newVNode, isSvgMode);
415 }
416 if (newVNode.$children$) {
417 for (i = 0; i < newVNode.$children$.length; ++i) {
418 // create the node
419 childNode = createElm(oldParentVNode, newVNode, i);
420 // return node could have been null
421 if (childNode) {
422 // append our new node
423 elm.appendChild(childNode);
424 }
425 }
426 }
427 }
428 {
429 elm['s-hn'] = hostTagName;
430 if (newVNode.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
431 // remember the content reference comment
432 elm['s-sr'] = true;
433 // remember the content reference comment
434 elm['s-cr'] = contentRef;
435 // remember the slot name, or empty string for default slot
436 elm['s-sn'] = newVNode.$name$ || '';
437 // check if we've got an old vnode for this slot
438 oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
439 if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
440 // we've got an old slot vnode and the wrapper is being replaced
441 // so let's move the old slot content back to it's original location
442 putBackInOriginalLocation(oldParentVNode.$elm$, false);
443 }
444 }
445 }
446 return elm;
447};
448const putBackInOriginalLocation = (parentElm, recursive) => {
449 plt.$flags$ |= 1 /* isTmpDisconnected */;
450 const oldSlotChildNodes = parentElm.childNodes;
451 for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
452 const childNode = oldSlotChildNodes[i];
453 if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
454 // // this child node in the old element is from another component
455 // // remove this node from the old slot's parent
456 // childNode.remove();
457 // and relocate it back to it's original location
458 parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
459 // remove the old original location comment entirely
460 // later on the patch function will know what to do
461 // and move this to the correct spot in need be
462 childNode['s-ol'].remove();
463 childNode['s-ol'] = undefined;
464 checkSlotRelocate = true;
465 }
466 if (recursive) {
467 putBackInOriginalLocation(childNode, recursive);
468 }
469 }
470 plt.$flags$ &= ~1 /* isTmpDisconnected */;
471};
472const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
473 let containerElm = (( parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
474 let childNode;
475 for (; startIdx <= endIdx; ++startIdx) {
476 if (vnodes[startIdx]) {
477 childNode = createElm(null, parentVNode, startIdx);
478 if (childNode) {
479 vnodes[startIdx].$elm$ = childNode;
480 containerElm.insertBefore(childNode, referenceNode(before) );
481 }
482 }
483 }
484};
485const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
486 for (; startIdx <= endIdx; ++startIdx) {
487 if ((vnode = vnodes[startIdx])) {
488 elm = vnode.$elm$;
489 {
490 // we're removing this element
491 // so it's possible we need to show slot fallback content now
492 checkSlotFallbackVisibility = true;
493 if (elm['s-ol']) {
494 // remove the original location comment
495 elm['s-ol'].remove();
496 }
497 else {
498 // it's possible that child nodes of the node
499 // that's being removed are slot nodes
500 putBackInOriginalLocation(elm, true);
501 }
502 }
503 // remove the vnode's element from the dom
504 elm.remove();
505 }
506 }
507};
508const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
509 let oldStartIdx = 0;
510 let newStartIdx = 0;
511 let oldEndIdx = oldCh.length - 1;
512 let oldStartVnode = oldCh[0];
513 let oldEndVnode = oldCh[oldEndIdx];
514 let newEndIdx = newCh.length - 1;
515 let newStartVnode = newCh[0];
516 let newEndVnode = newCh[newEndIdx];
517 let node;
518 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
519 if (oldStartVnode == null) {
520 // Vnode might have been moved left
521 oldStartVnode = oldCh[++oldStartIdx];
522 }
523 else if (oldEndVnode == null) {
524 oldEndVnode = oldCh[--oldEndIdx];
525 }
526 else if (newStartVnode == null) {
527 newStartVnode = newCh[++newStartIdx];
528 }
529 else if (newEndVnode == null) {
530 newEndVnode = newCh[--newEndIdx];
531 }
532 else if (isSameVnode(oldStartVnode, newStartVnode)) {
533 patch(oldStartVnode, newStartVnode);
534 oldStartVnode = oldCh[++oldStartIdx];
535 newStartVnode = newCh[++newStartIdx];
536 }
537 else if (isSameVnode(oldEndVnode, newEndVnode)) {
538 patch(oldEndVnode, newEndVnode);
539 oldEndVnode = oldCh[--oldEndIdx];
540 newEndVnode = newCh[--newEndIdx];
541 }
542 else if (isSameVnode(oldStartVnode, newEndVnode)) {
543 // Vnode moved right
544 if ( (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
545 putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
546 }
547 patch(oldStartVnode, newEndVnode);
548 parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
549 oldStartVnode = oldCh[++oldStartIdx];
550 newEndVnode = newCh[--newEndIdx];
551 }
552 else if (isSameVnode(oldEndVnode, newStartVnode)) {
553 // Vnode moved left
554 if ( (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
555 putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
556 }
557 patch(oldEndVnode, newStartVnode);
558 parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
559 oldEndVnode = oldCh[--oldEndIdx];
560 newStartVnode = newCh[++newStartIdx];
561 }
562 else {
563 {
564 // new element
565 node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
566 newStartVnode = newCh[++newStartIdx];
567 }
568 if (node) {
569 {
570 parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
571 }
572 }
573 }
574 }
575 if (oldStartIdx > oldEndIdx) {
576 addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
577 }
578 else if ( newStartIdx > newEndIdx) {
579 removeVnodes(oldCh, oldStartIdx, oldEndIdx);
580 }
581};
582const isSameVnode = (vnode1, vnode2) => {
583 // compare if two vnode to see if they're "technically" the same
584 // need to have the same element tag, and same key to be the same
585 if (vnode1.$tag$ === vnode2.$tag$) {
586 if ( vnode1.$tag$ === 'slot') {
587 return vnode1.$name$ === vnode2.$name$;
588 }
589 return true;
590 }
591 return false;
592};
593const referenceNode = (node) => {
594 // this node was relocated to a new location in the dom
595 // because of some other component's slot
596 // but we still have an html comment in place of where
597 // it's original location was according to it's original vdom
598 return (node && node['s-ol']) || node;
599};
600const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
601const patch = (oldVNode, newVNode) => {
602 const elm = (newVNode.$elm$ = oldVNode.$elm$);
603 const oldChildren = oldVNode.$children$;
604 const newChildren = newVNode.$children$;
605 const tag = newVNode.$tag$;
606 const text = newVNode.$text$;
607 let defaultHolder;
608 if ( text === null) {
609 // element node
610 {
611 if ( tag === 'slot')
612 ;
613 else {
614 // either this is the first render of an element OR it's an update
615 // AND we already know it's possible it could have changed
616 // this updates the element's css classes, attrs, props, listeners, etc.
617 updateElement(oldVNode, newVNode, isSvgMode);
618 }
619 }
620 if ( oldChildren !== null && newChildren !== null) {
621 // looks like there's child vnodes for both the old and new vnodes
622 updateChildren(elm, oldChildren, newVNode, newChildren);
623 }
624 else if (newChildren !== null) {
625 // no old child vnodes, but there are new child vnodes to add
626 if ( oldVNode.$text$ !== null) {
627 // the old vnode was text, so be sure to clear it out
628 elm.textContent = '';
629 }
630 // add the new vnode children
631 addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
632 }
633 else if ( oldChildren !== null) {
634 // no new child vnodes, but there are old child vnodes to remove
635 removeVnodes(oldChildren, 0, oldChildren.length - 1);
636 }
637 }
638 else if ( (defaultHolder = elm['s-cr'])) {
639 // this element has slotted content
640 defaultHolder.parentNode.textContent = text;
641 }
642 else if ( oldVNode.$text$ !== text) {
643 // update the text content for the text only vnode
644 // and also only if the text is different than before
645 elm.data = text;
646 }
647};
648const updateFallbackSlotVisibility = (elm) => {
649 // tslint:disable-next-line: prefer-const
650 let childNodes = elm.childNodes;
651 let childNode;
652 let i;
653 let ilen;
654 let j;
655 let slotNameAttr;
656 let nodeType;
657 for (i = 0, ilen = childNodes.length; i < ilen; i++) {
658 childNode = childNodes[i];
659 if (childNode.nodeType === 1 /* ElementNode */) {
660 if (childNode['s-sr']) {
661 // this is a slot fallback node
662 // get the slot name for this slot reference node
663 slotNameAttr = childNode['s-sn'];
664 // by default always show a fallback slot node
665 // then hide it if there are other slots in the light dom
666 childNode.hidden = false;
667 for (j = 0; j < ilen; j++) {
668 if (childNodes[j]['s-hn'] !== childNode['s-hn']) {
669 // this sibling node is from a different component
670 nodeType = childNodes[j].nodeType;
671 if (slotNameAttr !== '') {
672 // this is a named fallback slot node
673 if (nodeType === 1 /* ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
674 childNode.hidden = true;
675 break;
676 }
677 }
678 else {
679 // this is a default fallback slot node
680 // any element or text node (with content)
681 // should hide the default fallback slot node
682 if (nodeType === 1 /* ElementNode */ || (nodeType === 3 /* TextNode */ && childNodes[j].textContent.trim() !== '')) {
683 childNode.hidden = true;
684 break;
685 }
686 }
687 }
688 }
689 }
690 // keep drilling down
691 updateFallbackSlotVisibility(childNode);
692 }
693 }
694};
695const relocateNodes = [];
696const relocateSlotContent = (elm) => {
697 // tslint:disable-next-line: prefer-const
698 let childNode;
699 let node;
700 let hostContentNodes;
701 let slotNameAttr;
702 let relocateNodeData;
703 let j;
704 let i = 0;
705 let childNodes = elm.childNodes;
706 let ilen = childNodes.length;
707 for (; i < ilen; i++) {
708 childNode = childNodes[i];
709 if (childNode['s-sr'] && (node = childNode['s-cr'])) {
710 // first got the content reference comment node
711 // then we got it's parent, which is where all the host content is in now
712 hostContentNodes = node.parentNode.childNodes;
713 slotNameAttr = childNode['s-sn'];
714 for (j = hostContentNodes.length - 1; j >= 0; j--) {
715 node = hostContentNodes[j];
716 if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
717 // let's do some relocating to its new home
718 // but never relocate a content reference node
719 // that is suppose to always represent the original content location
720 if (isNodeLocatedInSlot(node, slotNameAttr)) {
721 // it's possible we've already decided to relocate this node
722 relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
723 // made some changes to slots
724 // let's make sure we also double check
725 // fallbacks are correctly hidden or shown
726 checkSlotFallbackVisibility = true;
727 node['s-sn'] = node['s-sn'] || slotNameAttr;
728 if (relocateNodeData) {
729 // previously we never found a slot home for this node
730 // but turns out we did, so let's remember it now
731 relocateNodeData.$slotRefNode$ = childNode;
732 }
733 else {
734 // add to our list of nodes to relocate
735 relocateNodes.push({
736 $slotRefNode$: childNode,
737 $nodeToRelocate$: node,
738 });
739 }
740 if (node['s-sr']) {
741 relocateNodes.map(relocateNode => {
742 if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
743 relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
744 if (relocateNodeData && !relocateNode.$slotRefNode$) {
745 relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
746 }
747 }
748 });
749 }
750 }
751 else if (!relocateNodes.some(r => r.$nodeToRelocate$ === node)) {
752 // so far this element does not have a slot home, not setting slotRefNode on purpose
753 // if we never find a home for this element then we'll need to hide it
754 relocateNodes.push({
755 $nodeToRelocate$: node,
756 });
757 }
758 }
759 }
760 }
761 if (childNode.nodeType === 1 /* ElementNode */) {
762 relocateSlotContent(childNode);
763 }
764 }
765};
766const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
767 if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
768 if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
769 return true;
770 }
771 if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
772 return true;
773 }
774 return false;
775 }
776 if (nodeToRelocate['s-sn'] === slotNameAttr) {
777 return true;
778 }
779 return slotNameAttr === '';
780};
781const renderVdom = (hostRef, renderFnResults) => {
782 const hostElm = hostRef.$hostElement$;
783 const cmpMeta = hostRef.$cmpMeta$;
784 const oldVNode = hostRef.$vnode$ || newVNode(null, null);
785 const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
786 hostTagName = hostElm.tagName;
787 if ( cmpMeta.$attrsToReflect$) {
788 rootVnode.$attrs$ = rootVnode.$attrs$ || {};
789 cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
790 }
791 rootVnode.$tag$ = null;
792 rootVnode.$flags$ |= 4 /* isHost */;
793 hostRef.$vnode$ = rootVnode;
794 rootVnode.$elm$ = oldVNode.$elm$ = ( hostElm);
795 {
796 contentRef = hostElm['s-cr'];
797 useNativeShadowDom = (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
798 // always reset
799 checkSlotFallbackVisibility = false;
800 }
801 // synchronous patch
802 patch(oldVNode, rootVnode);
803 {
804 // while we're moving nodes around existing nodes, temporarily disable
805 // the disconnectCallback from working
806 plt.$flags$ |= 1 /* isTmpDisconnected */;
807 if (checkSlotRelocate) {
808 relocateSlotContent(rootVnode.$elm$);
809 let relocateData;
810 let nodeToRelocate;
811 let orgLocationNode;
812 let parentNodeRef;
813 let insertBeforeNode;
814 let refNode;
815 let i = 0;
816 for (; i < relocateNodes.length; i++) {
817 relocateData = relocateNodes[i];
818 nodeToRelocate = relocateData.$nodeToRelocate$;
819 if (!nodeToRelocate['s-ol']) {
820 // add a reference node marking this node's original location
821 // keep a reference to this node for later lookups
822 orgLocationNode = doc.createTextNode('');
823 orgLocationNode['s-nr'] = nodeToRelocate;
824 nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
825 }
826 }
827 for (i = 0; i < relocateNodes.length; i++) {
828 relocateData = relocateNodes[i];
829 nodeToRelocate = relocateData.$nodeToRelocate$;
830 if (relocateData.$slotRefNode$) {
831 // by default we're just going to insert it directly
832 // after the slot reference node
833 parentNodeRef = relocateData.$slotRefNode$.parentNode;
834 insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
835 orgLocationNode = nodeToRelocate['s-ol'];
836 while ((orgLocationNode = orgLocationNode.previousSibling)) {
837 refNode = orgLocationNode['s-nr'];
838 if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
839 refNode = refNode.nextSibling;
840 if (!refNode || !refNode['s-nr']) {
841 insertBeforeNode = refNode;
842 break;
843 }
844 }
845 }
846 if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) || nodeToRelocate.nextSibling !== insertBeforeNode) {
847 // we've checked that it's worth while to relocate
848 // since that the node to relocate
849 // has a different next sibling or parent relocated
850 if (nodeToRelocate !== insertBeforeNode) {
851 if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
852 // probably a component in the index.html that doesn't have it's hostname set
853 nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
854 }
855 // add it back to the dom but in its new home
856 parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
857 }
858 }
859 }
860 else {
861 // this node doesn't have a slot home to go to, so let's hide it
862 if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
863 nodeToRelocate.hidden = true;
864 }
865 }
866 }
867 }
868 if (checkSlotFallbackVisibility) {
869 updateFallbackSlotVisibility(rootVnode.$elm$);
870 }
871 // done moving nodes around
872 // allow the disconnect callback to work again
873 plt.$flags$ &= ~1 /* isTmpDisconnected */;
874 // always reset
875 relocateNodes.length = 0;
876 }
877};
878const emitEvent = (elm, name, opts) => {
879 const ev = new ( CustomEvent)(name, opts);
880 elm.dispatchEvent(ev);
881 return ev;
882};
883const attachToAncestor = (hostRef, ancestorComponent) => {
884 if ( ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
885 ancestorComponent['s-p'].push(new Promise(r => (hostRef.$onRenderResolve$ = r)));
886 }
887};
888const scheduleUpdate = (hostRef, isInitialLoad) => {
889 {
890 hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
891 }
892 if ( hostRef.$flags$ & 4 /* isWaitingForChildren */) {
893 hostRef.$flags$ |= 512 /* needsRerender */;
894 return;
895 }
896 attachToAncestor(hostRef, hostRef.$ancestorComponent$);
897 // there is no ancestorc omponent or the ancestor component
898 // has already fired off its lifecycle update then
899 // fire off the initial update
900 const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
901 return writeTask(dispatch) ;
902};
903const dispatchHooks = (hostRef, isInitialLoad) => {
904 const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
905 const instance = hostRef.$lazyInstance$ ;
906 let promise;
907 endSchedule();
908 return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
909};
910const updateComponent = (hostRef, instance, isInitialLoad) => {
911 // updateComponent
912 const elm = hostRef.$hostElement$;
913 const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
914 const rc = elm['s-rc'];
915 if ( isInitialLoad) {
916 // DOM WRITE!
917 attachStyles(hostRef);
918 }
919 const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
920 {
921 {
922 // looks like we've got child nodes to render into this host element
923 // or we need to update the css class/attrs on the host element
924 // DOM WRITE!
925 renderVdom(hostRef, callRender(hostRef, instance));
926 }
927 }
928 if ( plt.$cssShim$) {
929 plt.$cssShim$.updateHost(elm);
930 }
931 if ( rc) {
932 // ok, so turns out there are some child host elements
933 // waiting on this parent element to load
934 // let's fire off all update callbacks waiting
935 rc.map(cb => cb());
936 elm['s-rc'] = undefined;
937 }
938 endRender();
939 endUpdate();
940 {
941 const childrenPromises = elm['s-p'];
942 const postUpdate = () => postUpdateComponent(hostRef);
943 if (childrenPromises.length === 0) {
944 postUpdate();
945 }
946 else {
947 Promise.all(childrenPromises).then(postUpdate);
948 hostRef.$flags$ |= 4 /* isWaitingForChildren */;
949 childrenPromises.length = 0;
950 }
951 }
952};
953const callRender = (hostRef, instance) => {
954 try {
955 instance = instance.render() ;
956 {
957 hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
958 }
959 {
960 hostRef.$flags$ |= 2 /* hasRendered */;
961 }
962 }
963 catch (e) {
964 consoleError(e);
965 }
966 return instance;
967};
968const postUpdateComponent = (hostRef) => {
969 const tagName = hostRef.$cmpMeta$.$tagName$;
970 const elm = hostRef.$hostElement$;
971 const endPostUpdate = createTime('postUpdate', tagName);
972 const ancestorComponent = hostRef.$ancestorComponent$;
973 if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
974 hostRef.$flags$ |= 64 /* hasLoadedComponent */;
975 {
976 // DOM WRITE!
977 addHydratedFlag(elm);
978 }
979 endPostUpdate();
980 {
981 hostRef.$onReadyResolve$(elm);
982 if (!ancestorComponent) {
983 appDidLoad();
984 }
985 }
986 }
987 else {
988 endPostUpdate();
989 }
990 // load events fire from bottom to top
991 // the deepest elements load first then bubbles up
992 {
993 if (hostRef.$onRenderResolve$) {
994 hostRef.$onRenderResolve$();
995 hostRef.$onRenderResolve$ = undefined;
996 }
997 if (hostRef.$flags$ & 512 /* needsRerender */) {
998 nextTick(() => scheduleUpdate(hostRef, false));
999 }
1000 hostRef.$flags$ &= ~(4 /* isWaitingForChildren */ | 512 /* needsRerender */);
1001 }
1002 // ( •_•)
1003 // ( •_•)>⌐■-■
1004 // (⌐■_■)
1005};
1006const forceUpdate = (ref) => {
1007 {
1008 const hostRef = getHostRef(ref);
1009 const isConnected = hostRef.$hostElement$.isConnected;
1010 if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
1011 scheduleUpdate(hostRef, false);
1012 }
1013 // Returns "true" when the forced update was successfully scheduled
1014 return isConnected;
1015 }
1016};
1017const appDidLoad = (who) => {
1018 // on appload
1019 // we have finish the first big initial render
1020 {
1021 addHydratedFlag(doc.documentElement);
1022 }
1023 {
1024 plt.$flags$ |= 2 /* appLoaded */;
1025 }
1026 nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
1027};
1028const then = (promise, thenFn) => {
1029 return promise && promise.then ? promise.then(thenFn) : thenFn();
1030};
1031const addHydratedFlag = (elm) => ( elm.classList.add('hydrated') );
1032const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
1033 const endHydrate = createTime('hydrateClient', tagName);
1034 const shadowRoot = hostElm.shadowRoot;
1035 const childRenderNodes = [];
1036 const slotNodes = [];
1037 const shadowRootNodes = null;
1038 const vnode = (hostRef.$vnode$ = newVNode(tagName, null));
1039 if (!plt.$orgLocNodes$) {
1040 initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));
1041 }
1042 hostElm[HYDRATE_ID] = hostId;
1043 hostElm.removeAttribute(HYDRATE_ID);
1044 clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
1045 childRenderNodes.map(c => {
1046 const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
1047 const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
1048 const node = c.$elm$;
1049 if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
1050 orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
1051 }
1052 if (!shadowRoot) {
1053 node['s-hn'] = tagName;
1054 if (orgLocationNode) {
1055 node['s-ol'] = orgLocationNode;
1056 node['s-ol']['s-nr'] = node;
1057 }
1058 }
1059 plt.$orgLocNodes$.delete(orgLocationId);
1060 });
1061 endHydrate();
1062};
1063const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
1064 let childNodeType;
1065 let childIdSplt;
1066 let childVNode;
1067 let i;
1068 if (node.nodeType === 1 /* ElementNode */) {
1069 childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
1070 if (childNodeType) {
1071 // got the node data from the element's attribute
1072 // `${hostId}.${nodeId}.${depth}.${index}`
1073 childIdSplt = childNodeType.split('.');
1074 if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
1075 childVNode = {
1076 $flags$: 0,
1077 $hostId$: childIdSplt[0],
1078 $nodeId$: childIdSplt[1],
1079 $depth$: childIdSplt[2],
1080 $index$: childIdSplt[3],
1081 $tag$: node.tagName.toLowerCase(),
1082 $elm$: node,
1083 $attrs$: null,
1084 $children$: null,
1085 $key$: null,
1086 $name$: null,
1087 $text$: null,
1088 };
1089 childRenderNodes.push(childVNode);
1090 node.removeAttribute(HYDRATE_CHILD_ID);
1091 // this is a new child vnode
1092 // so ensure its parent vnode has the vchildren array
1093 if (!parentVNode.$children$) {
1094 parentVNode.$children$ = [];
1095 }
1096 // add our child vnode to a specific index of the vnode's children
1097 parentVNode.$children$[childVNode.$index$] = childVNode;
1098 // this is now the new parent vnode for all the next child checks
1099 parentVNode = childVNode;
1100 if (shadowRootNodes && childVNode.$depth$ === '0') {
1101 shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
1102 }
1103 }
1104 }
1105 // recursively drill down, end to start so we can remove nodes
1106 for (i = node.childNodes.length - 1; i >= 0; i--) {
1107 clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);
1108 }
1109 if (node.shadowRoot) {
1110 // keep drilling down through the shadow root nodes
1111 for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
1112 clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);
1113 }
1114 }
1115 }
1116 else if (node.nodeType === 8 /* CommentNode */) {
1117 // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`
1118 childIdSplt = node.nodeValue.split('.');
1119 if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
1120 // comment node for either the host id or a 0 host id
1121 childNodeType = childIdSplt[0];
1122 childVNode = {
1123 $flags$: 0,
1124 $hostId$: childIdSplt[1],
1125 $nodeId$: childIdSplt[2],
1126 $depth$: childIdSplt[3],
1127 $index$: childIdSplt[4],
1128 $elm$: node,
1129 $attrs$: null,
1130 $children$: null,
1131 $key$: null,
1132 $name$: null,
1133 $tag$: null,
1134 $text$: null,
1135 };
1136 if (childNodeType === TEXT_NODE_ID) {
1137 childVNode.$elm$ = node.nextSibling;
1138 if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* TextNode */) {
1139 childVNode.$text$ = childVNode.$elm$.textContent;
1140 childRenderNodes.push(childVNode);
1141 // remove the text comment since it's no longer needed
1142 node.remove();
1143 if (!parentVNode.$children$) {
1144 parentVNode.$children$ = [];
1145 }
1146 parentVNode.$children$[childVNode.$index$] = childVNode;
1147 if (shadowRootNodes && childVNode.$depth$ === '0') {
1148 shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
1149 }
1150 }
1151 }
1152 else if (childVNode.$hostId$ === hostId) {
1153 // this comment node is specifcally for this host id
1154 if (childNodeType === SLOT_NODE_ID) {
1155 // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
1156 childVNode.$tag$ = 'slot';
1157 if (childIdSplt[5]) {
1158 node['s-sn'] = childVNode.$name$ = childIdSplt[5];
1159 }
1160 else {
1161 node['s-sn'] = '';
1162 }
1163 node['s-sr'] = true;
1164 slotNodes.push(childVNode);
1165 if (!parentVNode.$children$) {
1166 parentVNode.$children$ = [];
1167 }
1168 parentVNode.$children$[childVNode.$index$] = childVNode;
1169 }
1170 else if (childNodeType === CONTENT_REF_ID) {
1171 // `${CONTENT_REF_ID}.${hostId}`;
1172 {
1173 hostElm['s-cr'] = node;
1174 node['s-cn'] = true;
1175 }
1176 }
1177 }
1178 }
1179 }
1180 else if (parentVNode && parentVNode.$tag$ === 'style') {
1181 const vnode = newVNode(null, node.textContent);
1182 vnode.$elm$ = node;
1183 vnode.$index$ = '0';
1184 parentVNode.$children$ = [vnode];
1185 }
1186};
1187const initializeDocumentHydrate = (node, orgLocNodes) => {
1188 if (node.nodeType === 1 /* ElementNode */) {
1189 let i = 0;
1190 for (; i < node.childNodes.length; i++) {
1191 initializeDocumentHydrate(node.childNodes[i], orgLocNodes);
1192 }
1193 if (node.shadowRoot) {
1194 for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
1195 initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
1196 }
1197 }
1198 }
1199 else if (node.nodeType === 8 /* CommentNode */) {
1200 const childIdSplt = node.nodeValue.split('.');
1201 if (childIdSplt[0] === ORG_LOCATION_ID) {
1202 orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
1203 node.nodeValue = '';
1204 // useful to know if the original location is
1205 // the root light-dom of a shadow dom component
1206 node['s-en'] = childIdSplt[3];
1207 }
1208 }
1209};
1210const parsePropertyValue = (propValue, propType) => {
1211 // ensure this value is of the correct prop type
1212 if (propValue != null && !isComplexType(propValue)) {
1213 if ( propType & 4 /* Boolean */) {
1214 // per the HTML spec, any string value means it is a boolean true value
1215 // but we'll cheat here and say that the string "false" is the boolean false
1216 return propValue === 'false' ? false : propValue === '' || !!propValue;
1217 }
1218 if ( propType & 2 /* Number */) {
1219 // force it to be a number
1220 return parseFloat(propValue);
1221 }
1222 if ( propType & 1 /* String */) {
1223 // could have been passed as a number or boolean
1224 // but we still want it as a string
1225 return String(propValue);
1226 }
1227 // redundant return here for better minification
1228 return propValue;
1229 }
1230 // not sure exactly what type we want
1231 // so no need to change to a different type
1232 return propValue;
1233};
1234const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
1235const setValue = (ref, propName, newVal, cmpMeta) => {
1236 // check our new property value against our internal value
1237 const hostRef = getHostRef(ref);
1238 const oldVal = hostRef.$instanceValues$.get(propName);
1239 const flags = hostRef.$flags$;
1240 const instance = hostRef.$lazyInstance$ ;
1241 newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
1242 if (( !(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
1243 // gadzooks! the property's value has changed!!
1244 // set our new value!
1245 hostRef.$instanceValues$.set(propName, newVal);
1246 if ( instance) {
1247 if ( (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
1248 // looks like this value actually changed, so we've got work to do!
1249 // but only if we've already rendered, otherwise just chill out
1250 // queue that we need to do an update, but don't worry about queuing
1251 // up millions cuz this function ensures it only runs once
1252 scheduleUpdate(hostRef, false);
1253 }
1254 }
1255 }
1256};
1257const proxyComponent = (Cstr, cmpMeta, flags) => {
1258 if ( cmpMeta.$members$) {
1259 // It's better to have a const than two Object.entries()
1260 const members = Object.entries(cmpMeta.$members$);
1261 const prototype = Cstr.prototype;
1262 members.map(([memberName, [memberFlags]]) => {
1263 if ( (memberFlags & 31 /* Prop */ || (( flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
1264 // proxyComponent - prop
1265 Object.defineProperty(prototype, memberName, {
1266 get() {
1267 // proxyComponent, get value
1268 return getValue(this, memberName);
1269 },
1270 set(newValue) {
1271 // proxyComponent, set value
1272 setValue(this, memberName, newValue, cmpMeta);
1273 },
1274 configurable: true,
1275 enumerable: true,
1276 });
1277 }
1278 });
1279 if ( ( flags & 1 /* isElementConstructor */)) {
1280 const attrNameToPropName = new Map();
1281 prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
1282 plt.jmp(() => {
1283 const propName = attrNameToPropName.get(attrName);
1284 this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
1285 });
1286 };
1287 // create an array of attributes to observe
1288 // and also create a map of html attribute name to js property name
1289 Cstr.observedAttributes = members
1290 .filter(([_, m]) => m[0] & 15 /* HasAttribute */) // filter to only keep props that should match attributes
1291 .map(([propName, m]) => {
1292 const attrName = m[1] || propName;
1293 attrNameToPropName.set(attrName, propName);
1294 if ( m[0] & 512 /* ReflectAttr */) {
1295 cmpMeta.$attrsToReflect$.push([propName, attrName]);
1296 }
1297 return attrName;
1298 });
1299 }
1300 }
1301 return Cstr;
1302};
1303const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
1304 // initializeComponent
1305 if ( (hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
1306 // we haven't initialized this element yet
1307 hostRef.$flags$ |= 32 /* hasInitializedComponent */;
1308 {
1309 // lazy loaded components
1310 // request the component's implementation to be
1311 // wired up with the host element
1312 Cstr = loadModule(cmpMeta);
1313 if (Cstr.then) {
1314 // Await creates a micro-task avoid if possible
1315 const endLoad = uniqueTime();
1316 Cstr = await Cstr;
1317 endLoad();
1318 }
1319 if ( !Cstr.isProxied) {
1320 proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
1321 Cstr.isProxied = true;
1322 }
1323 const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);
1324 // ok, time to construct the instance
1325 // but let's keep track of when we start and stop
1326 // so that the getters/setters don't incorrectly step on data
1327 {
1328 hostRef.$flags$ |= 8 /* isConstructingInstance */;
1329 }
1330 // construct the lazy-loaded component implementation
1331 // passing the hostRef is very important during
1332 // construction in order to directly wire together the
1333 // host element and the lazy-loaded instance
1334 try {
1335 new Cstr(hostRef);
1336 }
1337 catch (e) {
1338 consoleError(e);
1339 }
1340 {
1341 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
1342 }
1343 endNewInstance();
1344 }
1345 const scopeId = getScopeId(cmpMeta);
1346 if ( !styles.has(scopeId) && Cstr.style) {
1347 const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
1348 // this component has styles but we haven't registered them yet
1349 let style = Cstr.style;
1350 registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
1351 endRegisterStyles();
1352 }
1353 }
1354 // we've successfully created a lazy instance
1355 const ancestorComponent = hostRef.$ancestorComponent$;
1356 const schedule = () => scheduleUpdate(hostRef, true);
1357 if ( ancestorComponent && ancestorComponent['s-rc']) {
1358 // this is the intial load and this component it has an ancestor component
1359 // but the ancestor component has NOT fired its will update lifecycle yet
1360 // so let's just cool our jets and wait for the ancestor to continue first
1361 // this will get fired off when the ancestor component
1362 // finally gets around to rendering its lazy self
1363 // fire off the initial update
1364 ancestorComponent['s-rc'].push(schedule);
1365 }
1366 else {
1367 schedule();
1368 }
1369};
1370const connectedCallback = (elm) => {
1371 if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
1372 const hostRef = getHostRef(elm);
1373 const cmpMeta = hostRef.$cmpMeta$;
1374 const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
1375 if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
1376 // first time this component has connected
1377 hostRef.$flags$ |= 1 /* hasConnected */;
1378 let hostId;
1379 {
1380 hostId = elm.getAttribute(HYDRATE_ID);
1381 if (hostId) {
1382 initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
1383 }
1384 }
1385 if ( !hostId) {
1386 // initUpdate
1387 // if the slot polyfill is required we'll need to put some nodes
1388 // in here to act as original content anchors as we move nodes around
1389 // host element has been connected to the DOM
1390 if ( ( cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */))) {
1391 setContentReference(elm);
1392 }
1393 }
1394 {
1395 // find the first ancestor component (if there is one) and register
1396 // this component as one of the actively loading child components for its ancestor
1397 let ancestorComponent = elm;
1398 while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
1399 // climb up the ancestors looking for the first
1400 // component that hasn't finished its lifecycle update yet
1401 if (( ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute('s-id') && ancestorComponent['s-p']) ||
1402 ancestorComponent['s-p']) {
1403 // we found this components first ancestor component
1404 // keep a reference to this component's ancestor component
1405 attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
1406 break;
1407 }
1408 }
1409 }
1410 // Lazy properties
1411 // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
1412 if ( cmpMeta.$members$) {
1413 Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
1414 if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
1415 const value = elm[memberName];
1416 delete elm[memberName];
1417 elm[memberName] = value;
1418 }
1419 });
1420 }
1421 {
1422 // connectedCallback, taskQueue, initialLoad
1423 // angular sets attribute AFTER connectCallback
1424 // https://github.com/angular/angular/issues/18909
1425 // https://github.com/angular/angular/issues/19940
1426 nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
1427 }
1428 }
1429 endConnected();
1430 }
1431};
1432const setContentReference = (elm) => {
1433 // only required when we're NOT using native shadow dom (slot)
1434 // or this browser doesn't support native shadow dom
1435 // and this host element was NOT created with SSR
1436 // let's pick out the inner content for slot projection
1437 // create a node to represent where the original
1438 // content was first placed, which is useful later on
1439 const contentRefElm = (elm['s-cr'] = doc.createComment( ''));
1440 contentRefElm['s-cn'] = true;
1441 elm.insertBefore(contentRefElm, elm.firstChild);
1442};
1443const disconnectedCallback = (elm) => {
1444 if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
1445 const hostRef = getHostRef(elm);
1446 // clear CSS var-shim tracking
1447 if ( plt.$cssShim$) {
1448 plt.$cssShim$.removeHost(elm);
1449 }
1450 }
1451};
1452const bootstrapLazy = (lazyBundles, options = {}) => {
1453 const endBootstrap = createTime();
1454 const cmpTags = [];
1455 const exclude = options.exclude || [];
1456 const customElements = win.customElements;
1457 const head = doc.head;
1458 const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
1459 const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
1460 const deferredConnectedCallbacks = [];
1461 let appLoadFallback;
1462 let isBootstrapping = true;
1463 Object.assign(plt, options);
1464 plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
1465 {
1466 if (options.syncQueue) {
1467 plt.$flags$ |= 4 /* queueSync */;
1468 }
1469 }
1470 {
1471 // If the app is already hydrated there is not point to disable the
1472 // async queue. This will improve the first input delay
1473 plt.$flags$ |= 2 /* appLoaded */;
1474 }
1475 lazyBundles.map(lazyBundle => lazyBundle[1].map(compactMeta => {
1476 const cmpMeta = {
1477 $flags$: compactMeta[0],
1478 $tagName$: compactMeta[1],
1479 $members$: compactMeta[2],
1480 $listeners$: compactMeta[3],
1481 };
1482 {
1483 cmpMeta.$members$ = compactMeta[2];
1484 }
1485 {
1486 cmpMeta.$attrsToReflect$ = [];
1487 }
1488 const tagName = cmpMeta.$tagName$;
1489 const HostElement = class extends HTMLElement {
1490 // StencilLazyHost
1491 constructor(self) {
1492 // @ts-ignore
1493 super(self);
1494 self = this;
1495 registerHost(self, cmpMeta);
1496 }
1497 connectedCallback() {
1498 if (appLoadFallback) {
1499 clearTimeout(appLoadFallback);
1500 appLoadFallback = null;
1501 }
1502 if (isBootstrapping) {
1503 // connectedCallback will be processed once all components have been registered
1504 deferredConnectedCallbacks.push(this);
1505 }
1506 else {
1507 plt.jmp(() => connectedCallback(this));
1508 }
1509 }
1510 disconnectedCallback() {
1511 plt.jmp(() => disconnectedCallback(this));
1512 }
1513 forceUpdate() {
1514 forceUpdate(this);
1515 }
1516 componentOnReady() {
1517 return getHostRef(this).$onReadyPromise$;
1518 }
1519 };
1520 cmpMeta.$lazyBundleIds$ = lazyBundle[0];
1521 if (!exclude.includes(tagName) && !customElements.get(tagName)) {
1522 cmpTags.push(tagName);
1523 customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
1524 }
1525 }));
1526 {
1527 visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
1528 visibilityStyle.setAttribute('data-styles', '');
1529 head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
1530 }
1531 // Process deferred connectedCallbacks now all components have been registered
1532 isBootstrapping = false;
1533 if (deferredConnectedCallbacks.length) {
1534 deferredConnectedCallbacks.map(host => host.connectedCallback());
1535 }
1536 else {
1537 {
1538 plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30)));
1539 }
1540 }
1541 // Fallback appLoad event
1542 endBootstrap();
1543};
1544const hostRefs = new WeakMap();
1545const getHostRef = (ref) => hostRefs.get(ref);
1546const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
1547const registerHost = (elm, cmpMeta) => {
1548 const hostRef = {
1549 $flags$: 0,
1550 $hostElement$: elm,
1551 $cmpMeta$: cmpMeta,
1552 $instanceValues$: new Map(),
1553 };
1554 {
1555 hostRef.$onReadyPromise$ = new Promise(r => (hostRef.$onReadyResolve$ = r));
1556 elm['s-p'] = [];
1557 elm['s-rc'] = [];
1558 }
1559 return hostRefs.set(elm, hostRef);
1560};
1561const isMemberInElement = (elm, memberName) => memberName in elm;
1562const consoleError = (e) => console.error(e);
1563const cmpModules = /*@__PURE__*/ new Map();
1564const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
1565 // loadModuleImport
1566 const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
1567 const bundleId = ( cmpMeta.$lazyBundleIds$);
1568 const module = cmpModules.get(bundleId) ;
1569 if (module) {
1570 return module[exportName];
1571 }
1572 return Promise.resolve().then(function () { return _interopNamespace(require(
1573 /* webpackInclude: /\.entry\.js$/ */
1574 /* webpackExclude: /\.system\.entry\.js$/ */
1575 /* webpackMode: "lazy" */
1576 `./${bundleId}.entry.js${ ''}`)); }).then(importedModule => {
1577 {
1578 cmpModules.set(bundleId, importedModule);
1579 }
1580 return importedModule[exportName];
1581 }, consoleError);
1582};
1583const styles = new Map();
1584const queueDomReads = [];
1585const queueDomWrites = [];
1586const queueDomWritesLow = [];
1587const queueTask = (queue, write) => (cb) => {
1588 queue.push(cb);
1589 if (!queuePending) {
1590 queuePending = true;
1591 if (write && plt.$flags$ & 4 /* queueSync */) {
1592 nextTick(flush);
1593 }
1594 else {
1595 plt.raf(flush);
1596 }
1597 }
1598};
1599const consume = (queue) => {
1600 for (let i = 0; i < queue.length; i++) {
1601 try {
1602 queue[i](performance.now());
1603 }
1604 catch (e) {
1605 consoleError(e);
1606 }
1607 }
1608 queue.length = 0;
1609};
1610const consumeTimeout = (queue, timeout) => {
1611 let i = 0;
1612 let ts = 0;
1613 while (i < queue.length && (ts = performance.now()) < timeout) {
1614 try {
1615 queue[i++](ts);
1616 }
1617 catch (e) {
1618 consoleError(e);
1619 }
1620 }
1621 if (i === queue.length) {
1622 queue.length = 0;
1623 }
1624 else if (i !== 0) {
1625 queue.splice(0, i);
1626 }
1627};
1628const flush = () => {
1629 {
1630 queueCongestion++;
1631 }
1632 // always force a bunch of medium callbacks to run, but still have
1633 // a throttle on how many can run in a certain time
1634 // DOM READS!!!
1635 consume(queueDomReads);
1636 // DOM WRITES!!!
1637 {
1638 const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */ ? performance.now() + 14 * Math.ceil(queueCongestion * (1.0 / 10.0)) : Infinity;
1639 consumeTimeout(queueDomWrites, timeout);
1640 consumeTimeout(queueDomWritesLow, timeout);
1641 if (queueDomWrites.length > 0) {
1642 queueDomWritesLow.push(...queueDomWrites);
1643 queueDomWrites.length = 0;
1644 }
1645 if ((queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0)) {
1646 // still more to do yet, but we've run out of time
1647 // let's let this thing cool off and try again in the next tick
1648 plt.raf(flush);
1649 }
1650 else {
1651 queueCongestion = 0;
1652 }
1653 }
1654};
1655const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
1656const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1657const patchEsm = () => {
1658 // @ts-ignore
1659 if ( !(CSS && CSS.supports && CSS.supports('color', 'var(--c)'))) {
1660 // @ts-ignore
1661 return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-css-shim" */ './css-shim-73a19dab.js'); }).then(() => {
1662 if ((plt.$cssShim$ = win.__cssshim)) {
1663 return plt.$cssShim$.i();
1664 }
1665 else {
1666 // for better minification
1667 return 0;
1668 }
1669 });
1670 }
1671 return promiseResolve();
1672};
1673const patchBrowser = () => {
1674 {
1675 // shim css vars
1676 plt.$cssShim$ = win.__cssshim;
1677 }
1678 // @ts-ignore
1679 const scriptElm = Array.from(doc.querySelectorAll('script')).find(s => new RegExp(`\/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute('data-stencil-namespace') === NAMESPACE)
1680 ;
1681 const opts = scriptElm['data-opts'] || {} ;
1682 if ( 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
1683 // Safari < v11 support: This IF is true if it's Safari below v11.
1684 // This fn cannot use async/await since Safari didn't support it until v11,
1685 // however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
1686 // so both the ESM file and nomodule file would get downloaded. Only Safari
1687 // has 'onbeforeload' in the script, and "history.scrollRestoration" was added
1688 // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
1689 // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
1690 return {
1691 then() {
1692 /* promise noop */
1693 },
1694 };
1695 }
1696 {
1697 opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;
1698 {
1699 patchDynamicImport(opts.resourcesUrl, scriptElm);
1700 }
1701 if ( !win.customElements) {
1702 // module support, but no custom elements support (Old Edge)
1703 // @ts-ignore
1704 return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-ba4d3125.js'); }).then(() => opts);
1705 }
1706 }
1707 return promiseResolve(opts);
1708};
1709const patchDynamicImport = (base, orgScriptElm) => {
1710 const importFunctionName = getDynamicImportFunction(NAMESPACE);
1711 try {
1712 // test if this browser supports dynamic imports
1713 // There is a caching issue in V8, that breaks using import() in Function
1714 // By generating a random string, we can workaround it
1715 // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
1716 win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
1717 }
1718 catch (e) {
1719 // this shim is specifically for browsers that do support "esm" imports
1720 // however, they do NOT support "dynamic" imports
1721 // basically this code is for old Edge, v18 and below
1722 const moduleMap = new Map();
1723 win[importFunctionName] = (src) => {
1724 const url = new URL(src, base).href;
1725 let mod = moduleMap.get(url);
1726 if (!mod) {
1727 const script = doc.createElement('script');
1728 script.type = 'module';
1729 script.crossOrigin = orgScriptElm.crossOrigin;
1730 script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], { type: 'application/javascript' }));
1731 mod = new Promise(resolve => {
1732 script.onload = () => {
1733 resolve(win[importFunctionName].m);
1734 script.remove();
1735 };
1736 });
1737 moduleMap.set(url, mod);
1738 doc.head.appendChild(script);
1739 }
1740 return mod;
1741 };
1742 }
1743};
1744
1745exports.Host = Host;
1746exports.bootstrapLazy = bootstrapLazy;
1747exports.h = h;
1748exports.patchBrowser = patchBrowser;
1749exports.patchEsm = patchEsm;
1750exports.registerInstance = registerInstance;