UNPKG

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