UNPKG

61.7 kBJavaScriptView Raw
1const BUILD = {"allRenderFn":false,"cmpDidLoad":true,"cmpDidUnload":true,"cmpDidUpdate":true,"cmpDidRender":false,"cmpWillLoad":true,"cmpWillUpdate":false,"cmpWillRender":false,"connectedCallback":true,"disconnectedCallback":true,"element":false,"event":false,"hasRenderFn":true,"lifecycle":true,"hostListener":false,"hostListenerTargetWindow":false,"hostListenerTargetDocument":false,"hostListenerTargetBody":false,"hostListenerTargetParent":false,"hostListenerTarget":false,"member":true,"method":false,"mode":false,"noVdomRender":false,"observeAttribute":true,"prop":true,"propBoolean":true,"propNumber":true,"propString":true,"propMutable":true,"reflect":true,"scoped":false,"shadowDom":false,"slot":true,"slotRelocation":true,"state":true,"style":true,"svg":false,"updatable":true,"vdomAttribute":true,"vdomClass":true,"vdomFunctional":true,"vdomKey":true,"vdomListener":true,"vdomRef":true,"vdomRender":true,"vdomStyle":true,"vdomText":true,"watchCallback":true,"taskQueue":true,"lazyLoad":true,"hydrateServerSide":false,"cssVarShim":true,"hydrateClientSide":false,"isDebug":false,"isDev":false,"lifecycleDOMEvents":false,"profile":false,"hotModuleReplacement":false,"constructableCSS":true,"cssAnnotations":true};
2const NAMESPACE = 'stencilrouter';
3
4const win = window;
5const doc = document;
6const plt = {
7 $flags$: 0,
8 $resourcesUrl$: '',
9 raf: (h) => requestAnimationFrame(h),
10 ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
11 rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
12};
13const supportsShadowDom = false;
14const supportsConstructibleStylesheets = (() => {
15 try {
16 new CSSStyleSheet();
17 return true;
18 }
19 catch (e) { }
20 return false;
21})();
22
23const Context = {};
24
25const hostRefs = new WeakMap();
26const getHostRef = (ref) => hostRefs.get(ref);
27const registerInstance = (lazyInstance, hostRef) => hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
28const registerHost = (elm) => {
29 {
30 const hostRef = {
31 $flags$: 0,
32 $hostElement$: elm,
33 $instanceValues$: new Map()
34 };
35 hostRef.$onReadyPromise$ = new Promise(r => hostRef.$onReadyResolve$ = r);
36 return hostRefs.set(elm, hostRef);
37 }
38};
39const isMemberInElement = (elm, memberName) => memberName in elm;
40
41const consoleError = (e) => console.error(e);
42
43const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
44 // loadModuleImport
45 const bundleId = cmpMeta.$lazyBundleIds$;
46 return import(
47 /* webpackInclude: /\.entry\.js$/ */
48 /* webpackExclude: /\.(system|cjs)\.entry\.js$/ */
49 /* webpackMode: "lazy" */
50 `./${bundleId}.entry.js${''}`).then(importedModule => importedModule[cmpMeta.$tagName$.replace(/-/g, '_')], consoleError);
51};
52
53const styles = new Map();
54const cssVarShim = win.__stencil_cssshim;
55
56let queueCongestion = 0;
57let queuePending = false;
58const queueDomReads = [];
59const queueDomWrites = [];
60const queueDomWritesLow = [];
61const queueTask = (queue) => (cb) => {
62 // queue dom reads
63 queue.push(cb);
64 if (!queuePending) {
65 queuePending = true;
66 plt.raf(flush);
67 }
68};
69const consume = (queue) => {
70 for (let i = 0; i < queue.length; i++) {
71 try {
72 queue[i](performance.now());
73 }
74 catch (e) {
75 consoleError(e);
76 }
77 }
78 queue.length = 0;
79};
80const consumeTimeout = (queue, timeout) => {
81 let i = 0;
82 let ts = 0;
83 while (i < queue.length && (ts = performance.now()) < timeout) {
84 try {
85 queue[i++](ts);
86 }
87 catch (e) {
88 consoleError(e);
89 }
90 }
91 if (i === queue.length) {
92 queue.length = 0;
93 }
94 else if (i !== 0) {
95 queue.splice(0, i);
96 }
97};
98const flush = () => {
99 queueCongestion++;
100 // always force a bunch of medium callbacks to run, but still have
101 // a throttle on how many can run in a certain time
102 // DOM READS!!!
103 consume(queueDomReads);
104 const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */
105 ? performance.now() + (7 * Math.ceil(queueCongestion * (1.0 / 22.0)))
106 : Infinity;
107 // DOM WRITES!!!
108 consumeTimeout(queueDomWrites, timeout);
109 consumeTimeout(queueDomWritesLow, timeout);
110 if (queueDomWrites.length > 0) {
111 queueDomWritesLow.push(...queueDomWrites);
112 queueDomWrites.length = 0;
113 }
114 if (queuePending = ((queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length) > 0)) {
115 // still more to do yet, but we've run out of time
116 // let's let this thing cool off and try again in the next tick
117 plt.raf(flush);
118 }
119 else {
120 queueCongestion = 0;
121 }
122};
123const nextTick = /*@__PURE__*/ (cb) => Promise.resolve().then(cb);
124const readTask = /*@__PURE__*/ queueTask(queueDomReads);
125const writeTask = /*@__PURE__*/ queueTask(queueDomWrites);
126
127/**
128 * Default style mode id
129 */
130/**
131 * Reusable empty obj/array
132 * Don't add values to these!!
133 */
134const EMPTY_OBJ = {};
135
136const isDef = (v) => v != null;
137const toLowerCase = (str) => str.toLowerCase();
138const isComplexType = (o) => ['object', 'function'].includes(typeof o);
139
140function getDynamicImportFunction(namespace) {
141 return `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
142}
143
144const patchEsm = () => {
145 // @ts-ignore
146 if (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) {
147 // @ts-ignore
148 return import('./css-shim-f7ddb189-f7ddb189.js');
149 }
150 return Promise.resolve();
151};
152const patchBrowser = async () => {
153 // @ts-ignore
154 const importMeta = "";
155 if (importMeta !== '') {
156 return Promise.resolve(new URL('.', importMeta).href);
157 }
158 else {
159 const scriptElm = Array.from(doc.querySelectorAll('script')).find(s => (s.src.includes(`/${NAMESPACE}.esm.js`) ||
160 s.getAttribute('data-namespace') === NAMESPACE));
161 const resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href));
162 patchDynamicImport(resourcesUrl.href);
163 if (!window.customElements) {
164 // @ts-ignore
165 await import('./dom-a0c82e31-a0c82e31.js');
166 }
167 return resourcesUrl.href;
168 }
169};
170const patchDynamicImport = (base) => {
171 const importFunctionName = getDynamicImportFunction(NAMESPACE);
172 try {
173 win[importFunctionName] = new Function('w', 'return import(w);');
174 }
175 catch (e) {
176 const moduleMap = new Map();
177 win[importFunctionName] = (src) => {
178 const url = new URL(src, base).href;
179 let mod = moduleMap.get(url);
180 if (!mod) {
181 const script = doc.createElement('script');
182 script.type = 'module';
183 script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], { type: 'application/javascript' }));
184 mod = new Promise(resolve => {
185 script.onload = () => {
186 resolve(win[importFunctionName].m);
187 script.remove();
188 };
189 });
190 moduleMap.set(url, mod);
191 doc.head.appendChild(script);
192 }
193 return mod;
194 };
195 }
196};
197const HYDRATED_CLASS = 'hydrated';
198
199const rootAppliedStyles = new WeakMap();
200const registerStyle = (scopeId, cssText) => {
201 let style = styles.get(scopeId);
202 if (supportsConstructibleStylesheets) {
203 style = (style || new CSSStyleSheet());
204 style.replace(cssText);
205 }
206 else {
207 style = cssText;
208 }
209 styles.set(scopeId, style);
210};
211const addStyle = (styleContainerNode, tagName, mode, hostElm) => {
212 let scopeId = getScopeId(tagName);
213 let style = styles.get(scopeId);
214 // if an element is NOT connected then getRootNode() will return the wrong root node
215 // so the fallback is to always use the document for the root node in those cases
216 styleContainerNode = (styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc);
217 if (style) {
218 if (typeof style === 'string') {
219 styleContainerNode = styleContainerNode.head || styleContainerNode;
220 let appliedStyles = rootAppliedStyles.get(styleContainerNode);
221 let styleElm;
222 if (!appliedStyles) {
223 rootAppliedStyles.set(styleContainerNode, appliedStyles = new Set());
224 }
225 if (!appliedStyles.has(scopeId)) {
226 {
227 if (cssVarShim) {
228 styleElm = cssVarShim.createHostStyle(hostElm, scopeId, style);
229 const newScopeId = styleElm['s-sc'];
230 if (newScopeId) {
231 scopeId = newScopeId;
232 // we don't want to add this styleID to the appliedStyles Set
233 // since the cssVarShim might need to apply several different
234 // stylesheets for the same component
235 appliedStyles = null;
236 }
237 }
238 else {
239 styleElm = doc.createElement('style');
240 styleElm.innerHTML = style;
241 }
242 styleContainerNode.appendChild(styleElm);
243 }
244 if (appliedStyles) {
245 appliedStyles.add(scopeId);
246 }
247 }
248 }
249 else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
250 styleContainerNode.adoptedStyleSheets = [
251 ...styleContainerNode.adoptedStyleSheets,
252 style
253 ];
254 }
255 }
256 return scopeId;
257};
258const attachStyles = (elm, cmpMeta, mode) => {
259 const styleId = addStyle(elm.getRootNode(), cmpMeta.$tagName$, mode, elm);
260};
261const getScopeId = (tagName, mode) => 'sc-' + (tagName);
262
263/**
264 * Production h() function based on Preact by
265 * Jason Miller (@developit)
266 * Licensed under the MIT License
267 * https://github.com/developit/preact/blob/master/LICENSE
268 *
269 * Modified for Stencil's compiler and vdom
270 */
271// const stack: any[] = [];
272// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
273// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
274const h = (nodeName, vnodeData, ...children) => {
275 let child = null;
276 let simple = false;
277 let lastSimple = false;
278 let key;
279 let slotName;
280 let vNodeChildren = [];
281 const walk = (c) => {
282 for (let i = 0; i < c.length; i++) {
283 child = c[i];
284 if (Array.isArray(child)) {
285 walk(child);
286 }
287 else if (child != null && typeof child !== 'boolean') {
288 if (simple = typeof nodeName !== 'function' && !isComplexType(child)) {
289 child = String(child);
290 }
291 if (simple && lastSimple) {
292 // If the previous child was simple (string), we merge both
293 vNodeChildren[vNodeChildren.length - 1].$text$ += child;
294 }
295 else {
296 // Append a new vNode, if it's text, we create a text vNode
297 vNodeChildren.push(simple ? { $flags$: 0, $text$: child } : child);
298 }
299 lastSimple = simple;
300 }
301 }
302 };
303 walk(children);
304 if (vnodeData) {
305 // normalize class / classname attributes
306 {
307 key = vnodeData.key || undefined;
308 }
309 {
310 slotName = vnodeData.name;
311 }
312 {
313 const classData = vnodeData.className || vnodeData.class;
314 if (classData) {
315 vnodeData.class = typeof classData !== 'object'
316 ? classData
317 : Object.keys(classData)
318 .filter(k => classData[k])
319 .join(' ');
320 }
321 }
322 }
323 if (typeof nodeName === 'function') {
324 // nodeName is a functional component
325 return nodeName(vnodeData, vNodeChildren, vdomFnUtils);
326 }
327 const vnode = {
328 $flags$: 0,
329 $tag$: nodeName,
330 $children$: vNodeChildren.length > 0 ? vNodeChildren : null,
331 $elm$: undefined,
332 $attrs$: vnodeData,
333 };
334 {
335 vnode.$key$ = key;
336 }
337 {
338 vnode.$name$ = slotName;
339 }
340 return vnode;
341};
342const Host = {};
343const vdomFnUtils = {
344 'forEach': (children, cb) => children.map(convertToPublic).forEach(cb),
345 'map': (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
346};
347const convertToPublic = (node) => {
348 return {
349 vattrs: node.$attrs$,
350 vchildren: node.$children$,
351 vkey: node.$key$,
352 vname: node.$name$,
353 vtag: node.$tag$,
354 vtext: node.$text$
355 };
356};
357const convertToPrivate = (node) => {
358 return {
359 $flags$: 0,
360 $attrs$: node.vattrs,
361 $children$: node.vchildren,
362 $key$: node.vkey,
363 $name$: node.vname,
364 $tag$: node.vtag,
365 $text$: node.vtext
366 };
367};
368
369/**
370 * Production setAccessor() function based on Preact by
371 * Jason Miller (@developit)
372 * Licensed under the MIT License
373 * https://github.com/developit/preact/blob/master/LICENSE
374 *
375 * Modified for Stencil's compiler and vdom
376 */
377const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
378 if (oldValue === newValue) {
379 return;
380 }
381 if (memberName === 'class' && !isSvg) {
382 // Class
383 {
384 const oldList = parseClassList(oldValue);
385 const baseList = parseClassList(elm.className).filter(item => !oldList.includes(item));
386 elm.className = baseList.concat(parseClassList(newValue).filter(item => !baseList.includes(item))).join(' ');
387 }
388 }
389 else if (memberName === 'style') {
390 // update style attribute, css properties and values
391 {
392 for (const prop in oldValue) {
393 if (!newValue || newValue[prop] == null) {
394 if (prop.includes('-')) {
395 elm.style.removeProperty(prop);
396 }
397 else {
398 elm.style[prop] = '';
399 }
400 }
401 }
402 }
403 for (const prop in newValue) {
404 if (!oldValue || newValue[prop] !== oldValue[prop]) {
405 if (prop.includes('-')) {
406 elm.style.setProperty(prop, newValue[prop]);
407 }
408 else {
409 elm.style[prop] = newValue[prop];
410 }
411 }
412 }
413 }
414 else if (memberName === 'key') ;
415 else if (memberName === 'ref') {
416 // minifier will clean this up
417 if (newValue) {
418 newValue(elm);
419 }
420 }
421 else if (memberName.startsWith('on') && !isMemberInElement(elm, memberName)) {
422 // Event Handlers
423 // so if the member name starts with "on" and the 3rd characters is
424 // a capital letter, and it's not already a member on the element,
425 // then we're assuming it's an event listener
426 if (isMemberInElement(elm, toLowerCase(memberName))) {
427 // standard event
428 // the JSX attribute could have been "onMouseOver" and the
429 // member name "onmouseover" is on the element's prototype
430 // so let's add the listener "mouseover", which is all lowercased
431 memberName = toLowerCase(memberName.substring(2));
432 }
433 else {
434 // custom event
435 // the JSX attribute could have been "onMyCustomEvent"
436 // so let's trim off the "on" prefix and lowercase the first character
437 // and add the listener "myCustomEvent"
438 // except for the first character, we keep the event name case
439 memberName = toLowerCase(memberName[2]) + memberName.substring(3);
440 }
441 if (oldValue) {
442 plt.rel(elm, memberName, oldValue, false);
443 }
444 if (newValue) {
445 plt.ael(elm, memberName, newValue, false);
446 }
447 }
448 else {
449 // Set property if it exists and it's not a SVG
450 const isProp = isMemberInElement(elm, memberName);
451 const isComplex = isComplexType(newValue);
452 if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
453 try {
454 elm[memberName] = newValue == null && elm.tagName.indexOf('-') === -1 ? '' : newValue;
455 }
456 catch (e) { }
457 }
458 if (newValue == null || newValue === false) {
459 {
460 elm.removeAttribute(memberName);
461 }
462 }
463 else if ((!isProp || (flags & 4 /* isHost */) || isSvg) && !isComplex) {
464 newValue = newValue === true ? '' : newValue.toString();
465 {
466 elm.setAttribute(memberName, newValue);
467 }
468 }
469 }
470};
471const parseClassList = (value) => (!value) ? [] : value.split(' ');
472
473const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
474 // if the element passed in is a shadow root, which is a document fragment
475 // then we want to be adding attrs/props to the shadow root's "host" element
476 // if it's not a shadow root, then we add attrs/props to the same element
477 const elm = (newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host) ? newVnode.$elm$.host : newVnode.$elm$;
478 const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
479 const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
480 {
481 // remove attributes no longer present on the vnode by setting them to undefined
482 for (memberName in oldVnodeAttrs) {
483 if (newVnodeAttrs[memberName] == null && oldVnodeAttrs[memberName] != null) {
484 setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
485 }
486 }
487 }
488 // add new & update changed attributes
489 for (memberName in newVnodeAttrs) {
490 setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
491 }
492};
493
494let scopeId;
495let contentRef;
496let hostTagName;
497let useNativeShadowDom = false;
498let checkSlotFallbackVisibility = false;
499let checkSlotRelocate = false;
500let isSvgMode = false;
501const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
502 // tslint:disable-next-line: prefer-const
503 let newVNode = newParentVNode.$children$[childIndex];
504 let i = 0;
505 let elm;
506 let childNode;
507 let oldVNode;
508 if (!useNativeShadowDom) {
509 // remember for later we need to check to relocate nodes
510 checkSlotRelocate = true;
511 if (newVNode.$tag$ === 'slot') {
512 if (scopeId) {
513 // scoped css needs to add its scoped id to the parent element
514 parentElm.classList.add(scopeId + '-s');
515 }
516 if (!newVNode.$children$) {
517 // slot element does not have fallback content
518 // create an html comment we'll use to always reference
519 // where actual slot content should sit next to
520 newVNode.$flags$ |= 1 /* isSlotReference */;
521 }
522 else {
523 // slot element has fallback content
524 // still create an element that "mocks" the slot element
525 newVNode.$flags$ |= 2 /* isSlotFallback */;
526 }
527 }
528 }
529 if (isDef(newVNode.$text$)) {
530 // create text node
531 newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
532 }
533 else if (newVNode.$flags$ & 1 /* isSlotReference */) {
534 // create a slot reference node
535 newVNode.$elm$ = doc.createTextNode('');
536 }
537 else {
538 // create element
539 elm = newVNode.$elm$ = (doc.createElement((newVNode.$flags$ & 2 /* isSlotFallback */) ? 'slot-fb' : newVNode.$tag$));
540 // add css classes, attrs, props, listeners, etc.
541 {
542 updateElement(null, newVNode, isSvgMode);
543 }
544 if (newVNode.$children$) {
545 for (i = 0; i < newVNode.$children$.length; ++i) {
546 // create the node
547 childNode = createElm(oldParentVNode, newVNode, i, elm);
548 // return node could have been null
549 if (childNode) {
550 // append our new node
551 elm.appendChild(childNode);
552 }
553 }
554 }
555 }
556 {
557 newVNode.$elm$['s-hn'] = hostTagName;
558 if (newVNode.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
559 // remember the content reference comment
560 newVNode.$elm$['s-sr'] = true;
561 // remember the content reference comment
562 newVNode.$elm$['s-cr'] = contentRef;
563 // remember the slot name, or empty string for default slot
564 newVNode.$elm$['s-sn'] = newVNode.$name$ || '';
565 // check if we've got an old vnode for this slot
566 oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
567 if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
568 // we've got an old slot vnode and the wrapper is being replaced
569 // so let's move the old slot content back to it's original location
570 putBackInOriginalLocation(oldParentVNode.$elm$, false);
571 }
572 }
573 }
574 return newVNode.$elm$;
575};
576const putBackInOriginalLocation = (parentElm, recursive) => {
577 plt.$flags$ |= 1 /* isTmpDisconnected */;
578 const oldSlotChildNodes = parentElm.childNodes;
579 for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
580 const childNode = oldSlotChildNodes[i];
581 if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
582 // // this child node in the old element is from another component
583 // // remove this node from the old slot's parent
584 // childNode.remove();
585 // and relocate it back to it's original location
586 parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
587 // remove the old original location comment entirely
588 // later on the patch function will know what to do
589 // and move this to the correct spot in need be
590 childNode['s-ol'].remove();
591 childNode['s-ol'] = undefined;
592 checkSlotRelocate = true;
593 }
594 if (recursive) {
595 putBackInOriginalLocation(childNode, recursive);
596 }
597 }
598 plt.$flags$ &= ~1 /* isTmpDisconnected */;
599};
600const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
601 let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
602 let childNode;
603 for (; startIdx <= endIdx; ++startIdx) {
604 if (vnodes[startIdx]) {
605 childNode = createElm(null, parentVNode, startIdx, parentElm);
606 if (childNode) {
607 vnodes[startIdx].$elm$ = childNode;
608 containerElm.insertBefore(childNode, referenceNode(before));
609 }
610 }
611 }
612};
613const removeVnodes = (vnodes, startIdx, endIdx, elm) => {
614 for (; startIdx <= endIdx; ++startIdx) {
615 if (isDef(vnodes[startIdx])) {
616 elm = vnodes[startIdx].$elm$;
617 callNodeRefs(vnodes[startIdx], true);
618 {
619 // we're removing this element
620 // so it's possible we need to show slot fallback content now
621 checkSlotFallbackVisibility = true;
622 if (elm['s-ol']) {
623 // remove the original location comment
624 elm['s-ol'].remove();
625 }
626 else {
627 // it's possible that child nodes of the node
628 // that's being removed are slot nodes
629 putBackInOriginalLocation(elm, true);
630 }
631 }
632 // remove the vnode's element from the dom
633 elm.remove();
634 }
635 }
636};
637const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
638 let oldStartIdx = 0;
639 let newStartIdx = 0;
640 let idxInOld = 0;
641 let i = 0;
642 let oldEndIdx = oldCh.length - 1;
643 let oldStartVnode = oldCh[0];
644 let oldEndVnode = oldCh[oldEndIdx];
645 let newEndIdx = newCh.length - 1;
646 let newStartVnode = newCh[0];
647 let newEndVnode = newCh[newEndIdx];
648 let node;
649 let elmToMove;
650 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
651 if (oldStartVnode == null) {
652 // Vnode might have been moved left
653 oldStartVnode = oldCh[++oldStartIdx];
654 }
655 else if (oldEndVnode == null) {
656 oldEndVnode = oldCh[--oldEndIdx];
657 }
658 else if (newStartVnode == null) {
659 newStartVnode = newCh[++newStartIdx];
660 }
661 else if (newEndVnode == null) {
662 newEndVnode = newCh[--newEndIdx];
663 }
664 else if (isSameVnode(oldStartVnode, newStartVnode)) {
665 patch(oldStartVnode, newStartVnode);
666 oldStartVnode = oldCh[++oldStartIdx];
667 newStartVnode = newCh[++newStartIdx];
668 }
669 else if (isSameVnode(oldEndVnode, newEndVnode)) {
670 patch(oldEndVnode, newEndVnode);
671 oldEndVnode = oldCh[--oldEndIdx];
672 newEndVnode = newCh[--newEndIdx];
673 }
674 else if (isSameVnode(oldStartVnode, newEndVnode)) {
675 // Vnode moved right
676 if (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot') {
677 putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
678 }
679 patch(oldStartVnode, newEndVnode);
680 parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
681 oldStartVnode = oldCh[++oldStartIdx];
682 newEndVnode = newCh[--newEndIdx];
683 }
684 else if (isSameVnode(oldEndVnode, newStartVnode)) {
685 // Vnode moved left
686 if (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot') {
687 putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
688 }
689 patch(oldEndVnode, newStartVnode);
690 parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
691 oldEndVnode = oldCh[--oldEndIdx];
692 newStartVnode = newCh[++newStartIdx];
693 }
694 else {
695 // createKeyToOldIdx
696 idxInOld = -1;
697 {
698 for (i = oldStartIdx; i <= oldEndIdx; ++i) {
699 if (oldCh[i] && isDef(oldCh[i].$key$) && oldCh[i].$key$ === newStartVnode.$key$) {
700 idxInOld = i;
701 break;
702 }
703 }
704 }
705 if (idxInOld >= 0) {
706 elmToMove = oldCh[idxInOld];
707 if (elmToMove.$tag$ !== newStartVnode.$tag$) {
708 node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
709 }
710 else {
711 patch(elmToMove, newStartVnode);
712 oldCh[idxInOld] = undefined;
713 node = elmToMove.$elm$;
714 }
715 newStartVnode = newCh[++newStartIdx];
716 }
717 else {
718 // new element
719 node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
720 newStartVnode = newCh[++newStartIdx];
721 }
722 if (node) {
723 {
724 parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
725 }
726 }
727 }
728 }
729 if (oldStartIdx > oldEndIdx) {
730 addVnodes(parentElm, (newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$), newVNode, newCh, newStartIdx, newEndIdx);
731 }
732 else if (newStartIdx > newEndIdx) {
733 removeVnodes(oldCh, oldStartIdx, oldEndIdx);
734 }
735};
736const isSameVnode = (vnode1, vnode2) => {
737 // compare if two vnode to see if they're "technically" the same
738 // need to have the same element tag, and same key to be the same
739 if (vnode1.$tag$ === vnode2.$tag$) {
740 if (vnode1.$tag$ === 'slot') {
741 return vnode1.$name$ === vnode2.$name$;
742 }
743 {
744 return vnode1.$key$ === vnode2.$key$;
745 }
746 return true;
747 }
748 return false;
749};
750const referenceNode = (node) => {
751 // this node was relocated to a new location in the dom
752 // because of some other component's slot
753 // but we still have an html comment in place of where
754 // it's original location was according to it's original vdom
755 return (node && node['s-ol']) || node;
756};
757const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
758const patch = (oldVNode, newVNode) => {
759 const elm = newVNode.$elm$ = oldVNode.$elm$;
760 const oldChildren = oldVNode.$children$;
761 const newChildren = newVNode.$children$;
762 let defaultHolder;
763 if (!isDef(newVNode.$text$)) {
764 // element node
765 {
766 if (newVNode.$tag$ === 'slot') ;
767 else {
768 // either this is the first render of an element OR it's an update
769 // AND we already know it's possible it could have changed
770 // this updates the element's css classes, attrs, props, listeners, etc.
771 updateElement(oldVNode, newVNode, isSvgMode);
772 }
773 }
774 if (isDef(oldChildren) && isDef(newChildren)) {
775 // looks like there's child vnodes for both the old and new vnodes
776 updateChildren(elm, oldChildren, newVNode, newChildren);
777 }
778 else if (isDef(newChildren)) {
779 // no old child vnodes, but there are new child vnodes to add
780 if (isDef(oldVNode.$text$)) {
781 // the old vnode was text, so be sure to clear it out
782 elm.textContent = '';
783 }
784 // add the new vnode children
785 addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
786 }
787 else if (isDef(oldChildren)) {
788 // no new child vnodes, but there are old child vnodes to remove
789 removeVnodes(oldChildren, 0, oldChildren.length - 1);
790 }
791 }
792 else if (defaultHolder = elm['s-cr']) {
793 // this element has slotted content
794 defaultHolder.parentNode.textContent = newVNode.$text$;
795 }
796 else if (oldVNode.$text$ !== newVNode.$text$) {
797 // update the text content for the text only vnode
798 // and also only if the text is different than before
799 elm.textContent = newVNode.$text$;
800 }
801};
802const updateFallbackSlotVisibility = (elm, childNode, childNodes, i, ilen, j, slotNameAttr, nodeType) => {
803 childNodes = elm.childNodes;
804 for (i = 0, ilen = childNodes.length; i < ilen; i++) {
805 childNode = childNodes[i];
806 if (childNode.nodeType === 1 /* ElementNode */) {
807 if (childNode['s-sr']) {
808 // this is a slot fallback node
809 // get the slot name for this slot reference node
810 slotNameAttr = childNode['s-sn'];
811 // by default always show a fallback slot node
812 // then hide it if there are other slots in the light dom
813 childNode.hidden = false;
814 for (j = 0; j < ilen; j++) {
815 if (childNodes[j]['s-hn'] !== childNode['s-hn']) {
816 // this sibling node is from a different component
817 nodeType = childNodes[j].nodeType;
818 if (slotNameAttr !== '') {
819 // this is a named fallback slot node
820 if (nodeType === 1 /* ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
821 childNode.hidden = true;
822 break;
823 }
824 }
825 else {
826 // this is a default fallback slot node
827 // any element or text node (with content)
828 // should hide the default fallback slot node
829 if (nodeType === 1 /* ElementNode */ || (nodeType === 3 /* TextNode */ && childNodes[j].textContent.trim() !== '')) {
830 childNode.hidden = true;
831 break;
832 }
833 }
834 }
835 }
836 }
837 // keep drilling down
838 updateFallbackSlotVisibility(childNode);
839 }
840 }
841};
842const relocateNodes = [];
843const relocateSlotContent = (elm) => {
844 // tslint:disable-next-line: prefer-const
845 let childNodes = elm.childNodes;
846 let ilen = childNodes.length;
847 let i = 0;
848 let j = 0;
849 let nodeType = 0;
850 let childNode;
851 let node;
852 let hostContentNodes;
853 let slotNameAttr;
854 for (ilen = childNodes.length; i < ilen; i++) {
855 childNode = childNodes[i];
856 if (childNode['s-sr'] && (node = childNode['s-cr'])) {
857 // first got the content reference comment node
858 // then we got it's parent, which is where all the host content is in now
859 hostContentNodes = node.parentNode.childNodes;
860 slotNameAttr = childNode['s-sn'];
861 for (j = hostContentNodes.length - 1; j >= 0; j--) {
862 node = hostContentNodes[j];
863 if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
864 // let's do some relocating to its new home
865 // but never relocate a content reference node
866 // that is suppose to always represent the original content location
867 nodeType = node.nodeType;
868 if (((nodeType === 3 /* TextNode */ || nodeType === 8 /* CommentNode */) && slotNameAttr === '') ||
869 (nodeType === 1 /* ElementNode */ && node.getAttribute('slot') === null && slotNameAttr === '') ||
870 (nodeType === 1 /* ElementNode */ && node.getAttribute('slot') === slotNameAttr)) {
871 // it's possible we've already decided to relocate this node
872 if (!relocateNodes.some(r => r.nodeToRelocate === node)) {
873 // made some changes to slots
874 // let's make sure we also double check
875 // fallbacks are correctly hidden or shown
876 checkSlotFallbackVisibility = true;
877 node['s-sn'] = slotNameAttr;
878 // add to our list of nodes to relocate
879 relocateNodes.push({
880 slotRefNode: childNode,
881 nodeToRelocate: node
882 });
883 }
884 }
885 }
886 }
887 }
888 if (childNode.nodeType === 1 /* ElementNode */) {
889 relocateSlotContent(childNode);
890 }
891 }
892};
893const callNodeRefs = (vNode, isDestroy) => {
894 if (vNode) {
895 vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(isDestroy ? null : vNode.$elm$);
896 vNode.$children$ && vNode.$children$.forEach(vChild => {
897 callNodeRefs(vChild, isDestroy);
898 });
899 }
900};
901const isHost = (node) => {
902 return node && node.$tag$ === Host;
903};
904const renderVdom = (hostElm, hostRef, cmpMeta, renderFnResults) => {
905 const oldVNode = hostRef.$vnode$ || { $flags$: 0 };
906 hostTagName = toLowerCase(hostElm.tagName);
907 if (isHost(renderFnResults)) {
908 renderFnResults.$tag$ = null;
909 }
910 else {
911 renderFnResults = h(null, null, renderFnResults);
912 }
913 if (BUILD.reflect && cmpMeta.$attrsToReflect$) {
914 renderFnResults.$attrs$ = renderFnResults.$attrs$ || {};
915 cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => renderFnResults.$attrs$[attribute] = hostElm[propName]);
916 }
917 renderFnResults.$flags$ |= 4 /* isHost */;
918 hostRef.$vnode$ = renderFnResults;
919 renderFnResults.$elm$ = oldVNode.$elm$ = (BUILD.shadowDom ? hostElm.shadowRoot || hostElm : hostElm);
920 if (BUILD.scoped || BUILD.shadowDom) {
921 scopeId = hostElm['s-sc'];
922 }
923 if (BUILD.slotRelocation) {
924 contentRef = hostElm['s-cr'];
925 useNativeShadowDom = supportsShadowDom && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
926 // always reset
927 checkSlotRelocate = checkSlotFallbackVisibility = false;
928 }
929 // synchronous patch
930 patch(oldVNode, renderFnResults);
931 if (BUILD.slotRelocation) {
932 if (checkSlotRelocate) {
933 relocateSlotContent(renderFnResults.$elm$);
934 for (let i = 0; i < relocateNodes.length; i++) {
935 const relocateNode = relocateNodes[i];
936 if (!relocateNode.nodeToRelocate['s-ol']) {
937 // add a reference node marking this node's original location
938 // keep a reference to this node for later lookups
939 const orgLocationNode = (BUILD.isDebug || BUILD.hydrateServerSide)
940 ? doc.createComment(`org-loc`)
941 : doc.createTextNode('');
942 orgLocationNode['s-nr'] = relocateNode.nodeToRelocate;
943 relocateNode.nodeToRelocate.parentNode.insertBefore((relocateNode.nodeToRelocate['s-ol'] = orgLocationNode), relocateNode.nodeToRelocate);
944 }
945 }
946 // while we're moving nodes around existing nodes, temporarily disable
947 // the disconnectCallback from working
948 plt.$flags$ |= 1 /* isTmpDisconnected */;
949 for (let i = 0; i < relocateNodes.length; i++) {
950 const relocateNode = relocateNodes[i];
951 // by default we're just going to insert it directly
952 // after the slot reference node
953 const parentNodeRef = relocateNode.slotRefNode.parentNode;
954 let insertBeforeNode = relocateNode.slotRefNode.nextSibling;
955 let orgLocationNode = relocateNode.nodeToRelocate['s-ol'];
956 while (orgLocationNode = orgLocationNode.previousSibling) {
957 let refNode = orgLocationNode['s-nr'];
958 if (refNode && refNode) {
959 if (refNode['s-sn'] === relocateNode.nodeToRelocate['s-sn']) {
960 if (parentNodeRef === refNode.parentNode) {
961 if ((refNode = refNode.nextSibling) && refNode && !refNode['s-nr']) {
962 insertBeforeNode = refNode;
963 break;
964 }
965 }
966 }
967 }
968 }
969 if ((!insertBeforeNode && parentNodeRef !== relocateNode.nodeToRelocate.parentNode) ||
970 (relocateNode.nodeToRelocate.nextSibling !== insertBeforeNode)) {
971 // we've checked that it's worth while to relocate
972 // since that the node to relocate
973 // has a different next sibling or parent relocated
974 if (relocateNode.nodeToRelocate !== insertBeforeNode) {
975 // add it back to the dom but in its new home
976 parentNodeRef.insertBefore(relocateNode.nodeToRelocate, insertBeforeNode);
977 }
978 }
979 }
980 // done moving nodes around
981 // allow the disconnect callback to work again
982 plt.$flags$ &= ~1 /* isTmpDisconnected */;
983 }
984 if (checkSlotFallbackVisibility) {
985 updateFallbackSlotVisibility(renderFnResults.$elm$);
986 }
987 // always reset
988 relocateNodes.length = 0;
989 }
990};
991
992const safeCall = async (instance, method) => {
993 if (instance && instance[method]) {
994 try {
995 await instance[method]();
996 }
997 catch (e) {
998 consoleError(e);
999 }
1000 }
1001};
1002const scheduleUpdate = async (elm, hostRef, cmpMeta, isInitialLoad) => {
1003 {
1004 hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
1005 }
1006 const instance = hostRef.$lazyInstance$;
1007 if (isInitialLoad) {
1008 {
1009 await safeCall(instance, 'componentWillLoad');
1010 }
1011 }
1012 // there is no ancestorc omponent or the ancestor component
1013 // has already fired off its lifecycle update then
1014 // fire off the initial update
1015 {
1016 writeTask(() => updateComponent(elm, hostRef, cmpMeta, instance, isInitialLoad));
1017 }
1018};
1019const updateComponent = (elm, hostRef, cmpMeta, instance, isInitialLoad) => {
1020 // updateComponent
1021 {
1022 hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
1023 }
1024 {
1025 elm['s-lr'] = false;
1026 }
1027 if (isInitialLoad) {
1028 // DOM WRITE!
1029 attachStyles(elm, cmpMeta, hostRef.$modeName$);
1030 }
1031 {
1032 {
1033 // tell the platform we're actively rendering
1034 // if a value is changed within a render() then
1035 // this tells the platform not to queue the change
1036 hostRef.$flags$ |= 4 /* isActiveRender */;
1037 try {
1038 // looks like we've got child nodes to render into this host element
1039 // or we need to update the css class/attrs on the host element
1040 // DOM WRITE!
1041 renderVdom(elm, hostRef, cmpMeta, (BUILD.allRenderFn) ? instance.render() : (instance.render && instance.render()));
1042 }
1043 catch (e) {
1044 consoleError(e);
1045 }
1046 hostRef.$flags$ &= ~4 /* isActiveRender */;
1047 }
1048 }
1049 if (cssVarShim) {
1050 cssVarShim.updateHost(elm);
1051 }
1052 // set that this component lifecycle rendering has completed
1053 {
1054 elm['s-lr'] = true;
1055 }
1056 {
1057 hostRef.$flags$ |= 2 /* hasRendered */;
1058 }
1059 if (elm['s-rc'].length > 0) {
1060 // ok, so turns out there are some child host elements
1061 // waiting on this parent element to load
1062 // let's fire off all update callbacks waiting
1063 elm['s-rc'].forEach(cb => cb());
1064 elm['s-rc'].length = 0;
1065 }
1066 postUpdateComponent(elm, hostRef);
1067};
1068const postUpdateComponent = (elm, hostRef, ancestorsActivelyLoadingChildren) => {
1069 if (!elm['s-al']) {
1070 const instance = hostRef.$lazyInstance$;
1071 const ancestorComponent = hostRef.$ancestorComponent$;
1072 if (!(hostRef.$flags$ & 512 /* hasLoadedComponent */)) {
1073 hostRef.$flags$ |= 512 /* hasLoadedComponent */;
1074 {
1075 // DOM WRITE!
1076 // add the css class that this element has officially hydrated
1077 elm.classList.add(HYDRATED_CLASS);
1078 }
1079 {
1080 safeCall(instance, 'componentDidLoad');
1081 }
1082 {
1083 hostRef.$onReadyResolve$(elm);
1084 }
1085 if (!ancestorComponent) {
1086 // on appload
1087 // we have finish the first big initial render
1088 doc.documentElement.classList.add(HYDRATED_CLASS);
1089 {
1090 setTimeout(() => plt.$flags$ |= 2 /* appLoaded */, 999);
1091 }
1092 }
1093 }
1094 else {
1095 {
1096 // we've already loaded this component
1097 // fire off the user's componentDidUpdate method (if one was provided)
1098 // componentDidUpdate runs AFTER render() has been called
1099 // and all child components have finished updating
1100 safeCall(instance, 'componentDidUpdate');
1101 }
1102 }
1103 // load events fire from bottom to top
1104 // the deepest elements load first then bubbles up
1105 if (ancestorComponent) {
1106 // ok so this element already has a known ancestor component
1107 // let's make sure we remove this element from its ancestor's
1108 // known list of child elements which are actively loading
1109 if (ancestorsActivelyLoadingChildren = ancestorComponent['s-al']) {
1110 // remove this element from the actively loading map
1111 ancestorsActivelyLoadingChildren.delete(elm);
1112 // the ancestor's initializeComponent method will do the actual checks
1113 // to see if the ancestor is actually loaded or not
1114 // then let's call the ancestor's initializeComponent method if there's no length
1115 // (which actually ends up as this method again but for the ancestor)
1116 if (ancestorsActivelyLoadingChildren.size === 0) {
1117 ancestorComponent['s-al'] = undefined;
1118 ancestorComponent['s-init']();
1119 }
1120 }
1121 hostRef.$ancestorComponent$ = undefined;
1122 }
1123 // ( •_•)
1124 // ( •_•)>⌐■-■
1125 // (⌐■_■)
1126 }
1127};
1128
1129const disconnectedCallback = (elm) => {
1130 if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
1131 const hostRef = getHostRef(elm);
1132 // clear CSS var-shim tracking
1133 if (cssVarShim) {
1134 cssVarShim.removeHost(elm);
1135 }
1136 const instance = hostRef.$lazyInstance$;
1137 {
1138 safeCall(instance, 'disconnectedCallback');
1139 }
1140 {
1141 safeCall(instance, 'componentDidUnload');
1142 }
1143 }
1144};
1145
1146const parsePropertyValue = (propValue, propType) => {
1147 // ensure this value is of the correct prop type
1148 if (propValue != null && !isComplexType(propValue)) {
1149 if (propType & 4 /* Boolean */) {
1150 // per the HTML spec, any string value means it is a boolean true value
1151 // but we'll cheat here and say that the string "false" is the boolean false
1152 return (propValue === 'false' ? false : propValue === '' || !!propValue);
1153 }
1154 if (propType & 2 /* Number */) {
1155 // force it to be a number
1156 return parseFloat(propValue);
1157 }
1158 if (propType & 1 /* String */) {
1159 // could have been passed as a number or boolean
1160 // but we still want it as a string
1161 return String(propValue);
1162 }
1163 // redundant return here for better minification
1164 return propValue;
1165 }
1166 // not sure exactly what type we want
1167 // so no need to change to a different type
1168 return propValue;
1169};
1170
1171const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
1172const setValue = (ref, propName, newVal, cmpMeta) => {
1173 // check our new property value against our internal value
1174 const hostRef = getHostRef(ref);
1175 const elm = hostRef.$hostElement$;
1176 const oldVal = hostRef.$instanceValues$.get(propName);
1177 const flags = hostRef.$flags$;
1178 newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
1179 if (newVal !== oldVal && (!(flags & 8 /* isConstructingInstance */) || oldVal === undefined)) {
1180 // gadzooks! the property's value has changed!!
1181 // set our new value!
1182 hostRef.$instanceValues$.set(propName, newVal);
1183 if (hostRef.$lazyInstance$) {
1184 // get an array of method names of watch functions to call
1185 if (cmpMeta.$watchers$ &&
1186 (flags & (1 /* hasConnected */ | 8 /* isConstructingInstance */)) === 1 /* hasConnected */) {
1187 const watchMethods = cmpMeta.$watchers$[propName];
1188 if (watchMethods) {
1189 // this instance is watching for when this property changed
1190 watchMethods.forEach(watchMethodName => {
1191 try {
1192 // fire off each of the watch methods that are watching this property
1193 (BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm)[watchMethodName].call((BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm), newVal, oldVal, propName);
1194 }
1195 catch (e) {
1196 consoleError(e);
1197 }
1198 });
1199 }
1200 }
1201 if ((flags & (4 /* isActiveRender */ | 2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
1202 // looks like this value actually changed, so we've got work to do!
1203 // but only if we've already rendered, otherwise just chill out
1204 // queue that we need to do an update, but don't worry about queuing
1205 // up millions cuz this function ensures it only runs once
1206 scheduleUpdate(elm, hostRef, cmpMeta, false);
1207 }
1208 }
1209 }
1210};
1211
1212const proxyComponent = (Cstr, cmpMeta, flags) => {
1213 if (cmpMeta.$members$) {
1214 if (Cstr.watchers) {
1215 cmpMeta.$watchers$ = Cstr.watchers;
1216 }
1217 // It's better to have a const than two Object.entries()
1218 const members = Object.entries(cmpMeta.$members$);
1219 const prototype = Cstr.prototype;
1220 members.forEach(([memberName, [memberFlags]]) => {
1221 if ((memberFlags & 31) || (flags & 2 && (memberFlags & 32 /* State */))) {
1222 // proxyComponent - prop
1223 Object.defineProperty(prototype, memberName, {
1224 get() {
1225 // proxyComponent, get value
1226 return getValue(this, memberName);
1227 },
1228 set(newValue) {
1229 // proxyComponent, set value
1230 setValue(this, memberName, newValue, cmpMeta);
1231 },
1232 configurable: true,
1233 enumerable: true
1234 });
1235 }
1236 });
1237 if (flags & 1) {
1238 const attrNameToPropName = new Map();
1239 prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
1240 const propName = attrNameToPropName.get(attrName);
1241 this[propName] = newValue === null && typeof this[propName] === 'boolean'
1242 ? false
1243 : newValue;
1244 };
1245 // create an array of attributes to observe
1246 // and also create a map of html attribute name to js property name
1247 Cstr.observedAttributes = members
1248 .filter(([_, m]) => m[0] & 15 /* HasAttribute */) // filter to only keep props that should match attributes
1249 .map(([propName, m]) => {
1250 const attrName = m[1] || propName;
1251 attrNameToPropName.set(attrName, propName);
1252 if (m[0] & 512 /* ReflectAttr */) {
1253 cmpMeta.$attrsToReflect$.push([propName, attrName]);
1254 }
1255 return attrName;
1256 });
1257 }
1258 }
1259 return Cstr;
1260};
1261
1262const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
1263 // initializeComponent
1264 if ((hostRef.$flags$ & 256 /* hasInitializedComponent */) === 0) {
1265 // we haven't initialized this element yet
1266 hostRef.$flags$ |= 256 /* hasInitializedComponent */;
1267 {
1268 // lazy loaded components
1269 // request the component's implementation to be
1270 // wired up with the host element
1271 Cstr = await loadModule(cmpMeta);
1272 if (!Cstr.isProxied) {
1273 // we'eve never proxied this Constructor before
1274 // let's add the getters/setters to its prototype before
1275 // the first time we create an instance of the implementation
1276 {
1277 cmpMeta.$watchers$ = Cstr.watchers;
1278 }
1279 proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
1280 Cstr.isProxied = true;
1281 }
1282 // ok, time to construct the instance
1283 // but let's keep track of when we start and stop
1284 // so that the getters/setters don't incorrectly step on data
1285 {
1286 hostRef.$flags$ |= 8 /* isConstructingInstance */;
1287 }
1288 // construct the lazy-loaded component implementation
1289 // passing the hostRef is very important during
1290 // construction in order to directly wire together the
1291 // host element and the lazy-loaded instance
1292 try {
1293 new Cstr(hostRef);
1294 }
1295 catch (e) {
1296 consoleError(e);
1297 }
1298 {
1299 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
1300 }
1301 fireConnectedCallback(hostRef.$lazyInstance$);
1302 }
1303 if (!Cstr.isStyleRegistered && Cstr.style) {
1304 // this component has styles but we haven't registered them yet
1305 let style = Cstr.style;
1306 let scopeId = getScopeId(cmpMeta.$tagName$);
1307 registerStyle(scopeId, style);
1308 Cstr.isStyleRegistered = true;
1309 }
1310 }
1311 // we've successfully created a lazy instance
1312 const ancestorComponent = hostRef.$ancestorComponent$;
1313 if (ancestorComponent && !ancestorComponent['s-lr'] && ancestorComponent['s-rc']) {
1314 // this is the intial load and this component it has an ancestor component
1315 // but the ancestor component has NOT fired its will update lifecycle yet
1316 // so let's just cool our jets and wait for the ancestor to continue first
1317 ancestorComponent['s-rc'].push(() =>
1318 // this will get fired off when the ancestor component
1319 // finally gets around to rendering its lazy self
1320 // fire off the initial update
1321 initializeComponent(elm, hostRef, cmpMeta));
1322 }
1323 else {
1324 scheduleUpdate(elm, hostRef, cmpMeta, true);
1325 }
1326};
1327
1328const fireConnectedCallback = (instance) => {
1329 {
1330 safeCall(instance, 'connectedCallback');
1331 }
1332};
1333const connectedCallback = (elm, cmpMeta) => {
1334 if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
1335 // connectedCallback
1336 const hostRef = getHostRef(elm);
1337 if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
1338 // first time this component has connected
1339 hostRef.$flags$ |= 1 /* hasConnected */;
1340 let hostId;
1341 if (!hostId) {
1342 // initUpdate
1343 // if the slot polyfill is required we'll need to put some nodes
1344 // in here to act as original content anchors as we move nodes around
1345 // host element has been connected to the DOM
1346 if (cmpMeta.$flags$ & 4 ||
1347 (BUILD.shadowDom && cmpMeta.$flags$ & 8 /* needsShadowDomShim */)) {
1348 setContentReference(elm);
1349 }
1350 }
1351 {
1352 // find the first ancestor component (if there is one) and register
1353 // this component as one of the actively loading child components for its ancestor
1354 let ancestorComponent = elm;
1355 while ((ancestorComponent = (ancestorComponent.parentNode || ancestorComponent.host))) {
1356 // climb up the ancestors looking for the first
1357 // component that hasn't finished its lifecycle update yet
1358 if ((ancestorComponent['s-init'] && !ancestorComponent['s-lr']) || (BUILD.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute('s-id'))) {
1359 // we found this components first ancestor component
1360 // keep a reference to this component's ancestor component
1361 hostRef.$ancestorComponent$ = ancestorComponent;
1362 // ensure there is an array to contain a reference to each of the child components
1363 // and set this component as one of the ancestor's child components it should wait on
1364 (ancestorComponent['s-al'] = ancestorComponent['s-al'] || new Set()).add(elm);
1365 break;
1366 }
1367 }
1368 }
1369 // Lazy properties
1370 // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
1371 if (cmpMeta.$members$) {
1372 Object.entries(cmpMeta.$members$).forEach(([memberName, [memberFlags]]) => {
1373 if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
1374 const value = elm[memberName];
1375 delete elm[memberName];
1376 elm[memberName] = value;
1377 }
1378 });
1379 }
1380 {
1381 initializeComponent(elm, hostRef, cmpMeta);
1382 }
1383 }
1384 fireConnectedCallback(hostRef.$lazyInstance$);
1385 }
1386};
1387const setContentReference = (elm, contentRefElm) => {
1388 // only required when we're NOT using native shadow dom (slot)
1389 // or this browser doesn't support native shadow dom
1390 // and this host element was NOT created with SSR
1391 // let's pick out the inner content for slot projection
1392 // create a node to represent where the original
1393 // content was first placed, which is useful later on
1394 let crName;
1395 {
1396 crName = '';
1397 }
1398 contentRefElm = elm['s-cr'] = doc.createComment(crName);
1399 contentRefElm['s-cn'] = true;
1400 elm.insertBefore(contentRefElm, elm.firstChild);
1401};
1402
1403const bootstrapLazy = (lazyBundles, options = {}) => {
1404 const cmpTags = [];
1405 const exclude = options.exclude || [];
1406 const head = doc.head;
1407 const customElements = win.customElements;
1408 const y = /*@__PURE__*/ head.querySelector('meta[charset]');
1409 const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
1410 Object.assign(plt, options);
1411 plt.$resourcesUrl$ = new URL(options.resourcesUrl || '/', win.location.href).href;
1412 if (options.syncQueue) {
1413 plt.$flags$ |= 4 /* queueSync */;
1414 }
1415 lazyBundles.forEach(lazyBundle => lazyBundle[1].forEach(compactMeta => {
1416 const cmpMeta = {
1417 $flags$: compactMeta[0],
1418 $tagName$: compactMeta[1],
1419 $members$: compactMeta[2],
1420 $listeners$: compactMeta[3],
1421 };
1422 {
1423 cmpMeta.$attrsToReflect$ = [];
1424 }
1425 {
1426 cmpMeta.$watchers$ = {};
1427 }
1428 const tagName = cmpMeta.$tagName$;
1429 const HostElement = class extends HTMLElement {
1430 // StencilLazyHost
1431 constructor(self) {
1432 // @ts-ignore
1433 super(self);
1434 self = this;
1435 {
1436 this['s-lr'] = false;
1437 this['s-rc'] = [];
1438 }
1439 registerHost(self);
1440 }
1441 connectedCallback() {
1442 connectedCallback(this, cmpMeta);
1443 }
1444 disconnectedCallback() {
1445 disconnectedCallback(this);
1446 }
1447 's-init'() {
1448 const hostRef = getHostRef(this);
1449 if (hostRef.$lazyInstance$) {
1450 postUpdateComponent(this, hostRef);
1451 }
1452 }
1453 's-hmr'(hmrVersionId) {
1454 }
1455 forceUpdate() {
1456 {
1457 const hostRef = getHostRef(this);
1458 scheduleUpdate(this, hostRef, cmpMeta, false);
1459 }
1460 }
1461 componentOnReady() {
1462 return getHostRef(this).$onReadyPromise$;
1463 }
1464 };
1465 cmpMeta.$lazyBundleIds$ = lazyBundle[0];
1466 if (!exclude.includes(tagName) && !customElements.get(tagName)) {
1467 cmpTags.push(tagName);
1468 customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
1469 }
1470 }));
1471 // visibilityStyle.innerHTML = cmpTags.map(t => `${t}:not(.hydrated)`) + '{display:none}';
1472 visibilityStyle.innerHTML = cmpTags + '{visibility:hidden}.hydrated{visibility:inherit}';
1473 visibilityStyle.setAttribute('data-styles', '');
1474 head.insertBefore(visibilityStyle, y ? y.nextSibling : head.firstChild);
1475};
1476
1477const getAssetPath = (path) => {
1478 const assetUrl = new URL(path, plt.$resourcesUrl$);
1479 return (assetUrl.origin !== win.location.origin)
1480 ? assetUrl.href
1481 : assetUrl.pathname;
1482};
1483
1484const getContext = (_elm, context) => {
1485 if (context in Context) {
1486 return Context[context];
1487 }
1488 else if (context === 'window') {
1489 return win;
1490 }
1491 else if (context === 'document') {
1492 return doc;
1493 }
1494 else if (context === 'isServer' || context === 'isPrerender') {
1495 return !!BUILD.hydrateServerSide;
1496 }
1497 else if (context === 'isClient') {
1498 return !BUILD.hydrateServerSide;
1499 }
1500 else if (context === 'resourcesUrl' || context === 'publicPath') {
1501 return getAssetPath('.');
1502 }
1503 else if (context === 'queue') {
1504 return {
1505 write: writeTask,
1506 read: readTask,
1507 tick: {
1508 then(cb) {
1509 return nextTick(cb);
1510 }
1511 }
1512 };
1513 }
1514 return undefined;
1515};
1516
1517const getElement = (ref) => getHostRef(ref).$hostElement$;
1518
1519export { patchEsm as a, bootstrapLazy as b, getContext as c, getElement as g, h, patchBrowser as p, registerInstance as r };