1 | const NAMESPACE = 'bulmil';
|
2 | const BUILD = { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, cssVarShim: true, devTools: false, disconnectedCallback: false, dynamicImportShim: true, element: false, event: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: true, isDebug: false, isDev: true, isTesting: true, lazyLoad: true, lifecycle: false, lifecycleDOMEvents: true, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: true, scoped: false, scriptDataOpts: true, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
|
3 |
|
4 | let scopeId;
|
5 | let contentRef;
|
6 | let hostTagName;
|
7 | let i = 0;
|
8 | let useNativeShadowDom = false;
|
9 | let checkSlotFallbackVisibility = false;
|
10 | let checkSlotRelocate = false;
|
11 | let isSvgMode = false;
|
12 | let renderingRef = null;
|
13 | let queueCongestion = 0;
|
14 | let queuePending = false;
|
15 | const win = typeof window !== 'undefined' ? window : {};
|
16 | const CSS = BUILD.cssVarShim ? win.CSS : null;
|
17 | const doc = win.document || { head: {} };
|
18 | const H = (win.HTMLElement || class {
|
19 | });
|
20 | const plt = {
|
21 | $flags$: 0,
|
22 | $resourcesUrl$: '',
|
23 | jmp: h => h(),
|
24 | raf: h => requestAnimationFrame(h),
|
25 | ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
|
26 | rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
|
27 | ce: (eventName, opts) => new CustomEvent(eventName, opts),
|
28 | };
|
29 | const supportsShadow = BUILD.shadowDomShim && BUILD.shadowDom ? (() => (doc.head.attachShadow + '').indexOf('[native') > -1)() : true;
|
30 | const supportsListenerOptions = (() => {
|
31 | let supportsListenerOptions = false;
|
32 | try {
|
33 | doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
|
34 | get() {
|
35 | supportsListenerOptions = true;
|
36 | },
|
37 | }));
|
38 | }
|
39 | catch (e) { }
|
40 | return supportsListenerOptions;
|
41 | })();
|
42 | const promiseResolve = (v) => Promise.resolve(v);
|
43 | const supportsConstructibleStylesheets = BUILD.constructableCSS
|
44 | ? (() => {
|
45 | try {
|
46 | new CSSStyleSheet();
|
47 | return true;
|
48 | }
|
49 | catch (e) { }
|
50 | return false;
|
51 | })()
|
52 | : false;
|
53 | const Context = {};
|
54 | const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
55 | if (BUILD.hostListener && listeners) {
|
56 |
|
57 |
|
58 |
|
59 |
|
60 | if (BUILD.hostListenerTargetParent) {
|
61 |
|
62 | if (attachParentListeners) {
|
63 |
|
64 |
|
65 |
|
66 | listeners = listeners.filter(([flags]) => flags & 16 );
|
67 | }
|
68 | else {
|
69 |
|
70 |
|
71 |
|
72 | listeners = listeners.filter(([flags]) => !(flags & 16 ));
|
73 | }
|
74 | }
|
75 | listeners.map(([flags, name, method]) => {
|
76 | const target = BUILD.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;
|
77 | const handler = hostListenerProxy(hostRef, method);
|
78 | const opts = hostListenerOpts(flags);
|
79 | plt.ael(target, name, handler, opts);
|
80 | (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
|
81 | });
|
82 | }
|
83 | };
|
84 | const hostListenerProxy = (hostRef, methodName) => (ev) => {
|
85 | if (BUILD.lazyLoad) {
|
86 | if (hostRef.$flags$ & 256 ) {
|
87 |
|
88 | hostRef.$lazyInstance$[methodName](ev);
|
89 | }
|
90 | else {
|
91 | (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
|
92 | }
|
93 | }
|
94 | else {
|
95 | hostRef.$hostElement$[methodName](ev);
|
96 | }
|
97 | };
|
98 | const getHostListenerTarget = (elm, flags) => {
|
99 | if (BUILD.hostListenerTargetDocument && flags & 4 )
|
100 | return doc;
|
101 | if (BUILD.hostListenerTargetWindow && flags & 8 )
|
102 | return win;
|
103 | if (BUILD.hostListenerTargetBody && flags & 32 )
|
104 | return doc.body;
|
105 | if (BUILD.hostListenerTargetParent && flags & 16 )
|
106 | return elm.parentElement;
|
107 | return elm;
|
108 | };
|
109 |
|
110 | const hostListenerOpts = (flags) => supportsListenerOptions
|
111 | ? ({
|
112 | passive: (flags & 1 ) !== 0,
|
113 | capture: (flags & 2 ) !== 0,
|
114 | })
|
115 | : (flags & 2 ) !== 0;
|
116 | const CONTENT_REF_ID = 'r';
|
117 | const ORG_LOCATION_ID = 'o';
|
118 | const SLOT_NODE_ID = 's';
|
119 | const TEXT_NODE_ID = 't';
|
120 | const HYDRATE_ID = 's-id';
|
121 | const HYDRATED_STYLE_ID = 'sty-id';
|
122 | const HYDRATE_CHILD_ID = 'c-id';
|
123 | const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
|
124 | const XLINK_NS = 'http://www.w3.org/1999/xlink';
|
125 | const createTime = (fnName, tagName = '') => {
|
126 | if (BUILD.profile && performance.mark) {
|
127 | const key = `st:${fnName}:${tagName}:${i++}`;
|
128 |
|
129 | performance.mark(key);
|
130 |
|
131 | return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key);
|
132 | }
|
133 | else {
|
134 | return () => {
|
135 | return;
|
136 | };
|
137 | }
|
138 | };
|
139 | const uniqueTime = (key, measureText) => {
|
140 | if (BUILD.profile && performance.mark) {
|
141 | if (performance.getEntriesByName(key).length === 0) {
|
142 | performance.mark(key);
|
143 | }
|
144 | return () => {
|
145 | if (performance.getEntriesByName(measureText).length === 0) {
|
146 | performance.measure(measureText, key);
|
147 | }
|
148 | };
|
149 | }
|
150 | else {
|
151 | return () => {
|
152 | return;
|
153 | };
|
154 | }
|
155 | };
|
156 | const inspect = (ref) => {
|
157 | const hostRef = getHostRef(ref);
|
158 | if (!hostRef) {
|
159 | return undefined;
|
160 | }
|
161 | const flags = hostRef.$flags$;
|
162 | const hostElement = hostRef.$hostElement$;
|
163 | return {
|
164 | renderCount: hostRef.$renderCount$,
|
165 | flags: {
|
166 | hasRendered: !!(flags & 2 ),
|
167 | hasConnected: !!(flags & 1 ),
|
168 | isWaitingForChildren: !!(flags & 4 ),
|
169 | isConstructingInstance: !!(flags & 8 ),
|
170 | isQueuedForUpdate: !!(flags & 16 ),
|
171 | hasInitializedComponent: !!(flags & 32 ),
|
172 | hasLoadedComponent: !!(flags & 64 ),
|
173 | isWatchReady: !!(flags & 128 ),
|
174 | isListenReady: !!(flags & 256 ),
|
175 | needsRerender: !!(flags & 512 ),
|
176 | },
|
177 | instanceValues: hostRef.$instanceValues$,
|
178 | ancestorComponent: hostRef.$ancestorComponent$,
|
179 | hostElement,
|
180 | lazyInstance: hostRef.$lazyInstance$,
|
181 | vnode: hostRef.$vnode$,
|
182 | modeName: hostRef.$modeName$,
|
183 | onReadyPromise: hostRef.$onReadyPromise$,
|
184 | onReadyResolve: hostRef.$onReadyResolve$,
|
185 | onInstancePromise: hostRef.$onInstancePromise$,
|
186 | onInstanceResolve: hostRef.$onInstanceResolve$,
|
187 | onRenderResolve: hostRef.$onRenderResolve$,
|
188 | queuedListeners: hostRef.$queuedListeners$,
|
189 | rmListeners: hostRef.$rmListeners$,
|
190 | ['s-id']: hostElement['s-id'],
|
191 | ['s-cr']: hostElement['s-cr'],
|
192 | ['s-lr']: hostElement['s-lr'],
|
193 | ['s-p']: hostElement['s-p'],
|
194 | ['s-rc']: hostElement['s-rc'],
|
195 | ['s-sc']: hostElement['s-sc'],
|
196 | };
|
197 | };
|
198 | const installDevTools = () => {
|
199 | if (BUILD.devTools) {
|
200 | const stencil = (win.stencil = win.stencil || {});
|
201 | const originalInspect = stencil.inspect;
|
202 | stencil.inspect = (ref) => {
|
203 | let result = inspect(ref);
|
204 | if (!result && typeof originalInspect === 'function') {
|
205 | result = originalInspect(ref);
|
206 | }
|
207 | return result;
|
208 | };
|
209 | }
|
210 | };
|
211 | const rootAppliedStyles = new WeakMap();
|
212 | const registerStyle = (scopeId, cssText, allowCS) => {
|
213 | let style = styles.get(scopeId);
|
214 | if (supportsConstructibleStylesheets && allowCS) {
|
215 | style = (style || new CSSStyleSheet());
|
216 | style.replace(cssText);
|
217 | }
|
218 | else {
|
219 | style = cssText;
|
220 | }
|
221 | styles.set(scopeId, style);
|
222 | };
|
223 | const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
|
224 | let scopeId = getScopeId(cmpMeta, mode);
|
225 | let style = styles.get(scopeId);
|
226 | if (!BUILD.attachStyles) {
|
227 | return scopeId;
|
228 | }
|
229 |
|
230 |
|
231 | styleContainerNode = styleContainerNode.nodeType === 11 ? styleContainerNode : doc;
|
232 | if (style) {
|
233 | if (typeof style === 'string') {
|
234 | styleContainerNode = styleContainerNode.head || styleContainerNode;
|
235 | let appliedStyles = rootAppliedStyles.get(styleContainerNode);
|
236 | let styleElm;
|
237 | if (!appliedStyles) {
|
238 | rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
|
239 | }
|
240 | if (!appliedStyles.has(scopeId)) {
|
241 | if (BUILD.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) {
|
242 |
|
243 | styleElm.innerHTML = style;
|
244 | }
|
245 | else {
|
246 | if (BUILD.cssVarShim && plt.$cssShim$) {
|
247 | styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 ));
|
248 | const newScopeId = styleElm['s-sc'];
|
249 | if (newScopeId) {
|
250 | scopeId = newScopeId;
|
251 |
|
252 |
|
253 |
|
254 | appliedStyles = null;
|
255 | }
|
256 | }
|
257 | else {
|
258 | styleElm = doc.createElement('style');
|
259 | styleElm.innerHTML = style;
|
260 | }
|
261 | if (BUILD.hydrateServerSide || BUILD.hotModuleReplacement) {
|
262 | styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
|
263 | }
|
264 | styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
|
265 | }
|
266 | if (appliedStyles) {
|
267 | appliedStyles.add(scopeId);
|
268 | }
|
269 | }
|
270 | }
|
271 | else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
|
272 | styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
|
273 | }
|
274 | }
|
275 | return scopeId;
|
276 | };
|
277 | const attachStyles = (hostRef) => {
|
278 | const cmpMeta = hostRef.$cmpMeta$;
|
279 | const elm = hostRef.$hostElement$;
|
280 | const flags = cmpMeta.$flags$;
|
281 | const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
|
282 | const scopeId = addStyle(BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$, elm);
|
283 | if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & 10 ) {
|
284 |
|
285 |
|
286 |
|
287 |
|
288 |
|
289 |
|
290 |
|
291 | elm['s-sc'] = scopeId;
|
292 | elm.classList.add(scopeId + '-h');
|
293 | if (BUILD.scoped && flags & 2 ) {
|
294 | elm.classList.add(scopeId + '-s');
|
295 | }
|
296 | }
|
297 | endAttachStyles();
|
298 | };
|
299 | const getScopeId = (cmp, mode) => 'sc-' + (BUILD.mode && mode && cmp.$flags$ & 32 ? cmp.$tagName$ + '-' + mode : cmp.$tagName$);
|
300 | const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
|
301 |
|
302 | const computeMode = (elm) => modeResolutionChain.map(h => h(elm)).find(m => !!m);
|
303 |
|
304 | const setMode = (handler) => modeResolutionChain.push(handler);
|
305 | const getMode = (ref) => getHostRef(ref).$modeName$;
|
306 |
|
307 |
|
308 |
|
309 |
|
310 |
|
311 |
|
312 |
|
313 | const EMPTY_OBJ = {};
|
314 |
|
315 |
|
316 |
|
317 | const SVG_NS = 'http://www.w3.org/2000/svg';
|
318 | const HTML_NS = 'http://www.w3.org/1999/xhtml';
|
319 | const isDef = (v) => v != null;
|
320 | const noop = () => {
|
321 |
|
322 | };
|
323 | const isComplexType = (o) => {
|
324 |
|
325 | o = typeof o;
|
326 | return o === 'object' || o === 'function';
|
327 | };
|
328 | const IS_DENO_ENV = typeof Deno !== 'undefined';
|
329 | const IS_NODE_ENV = !IS_DENO_ENV &&
|
330 | typeof global !== 'undefined' &&
|
331 | typeof require === 'function' &&
|
332 | !!global.process &&
|
333 | typeof __filename === 'string' &&
|
334 | (!global.origin || typeof global.origin !== 'string');
|
335 | const IS_DENO_WINDOWS_ENV = IS_DENO_ENV && Deno.build.os === 'windows';
|
336 | const getCurrentDirectory = IS_NODE_ENV ? process.cwd : IS_DENO_ENV ? Deno.cwd : () => '/';
|
337 | const exit = IS_NODE_ENV ? process.exit : IS_DENO_ENV ? Deno.exit : noop;
|
338 |
|
339 |
|
340 |
|
341 |
|
342 |
|
343 |
|
344 |
|
345 |
|
346 |
|
347 |
|
348 |
|
349 | const h = (nodeName, vnodeData, ...children) => {
|
350 | let child = null;
|
351 | let key = null;
|
352 | let slotName = null;
|
353 | let simple = false;
|
354 | let lastSimple = false;
|
355 | let vNodeChildren = [];
|
356 | const walk = (c) => {
|
357 | for (let i = 0; i < c.length; i++) {
|
358 | child = c[i];
|
359 | if (Array.isArray(child)) {
|
360 | walk(child);
|
361 | }
|
362 | else if (child != null && typeof child !== 'boolean') {
|
363 | if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {
|
364 | child = String(child);
|
365 | }
|
366 | else if (BUILD.isDev && typeof nodeName !== 'function' && child.$flags$ === undefined) {
|
367 | consoleDevError(`vNode passed as children has unexpected type.
|
368 | Make sure it's using the correct h() function.
|
369 | Empty objects can also be the cause, look for JSX comments that became objects.`);
|
370 | }
|
371 | if (simple && lastSimple) {
|
372 |
|
373 | vNodeChildren[vNodeChildren.length - 1].$text$ += child;
|
374 | }
|
375 | else {
|
376 |
|
377 | vNodeChildren.push(simple ? newVNode(null, child) : child);
|
378 | }
|
379 | lastSimple = simple;
|
380 | }
|
381 | }
|
382 | };
|
383 | walk(children);
|
384 | if (vnodeData) {
|
385 | if (BUILD.isDev && nodeName === 'input') {
|
386 | validateInputProperties(vnodeData);
|
387 | }
|
388 |
|
389 | if (BUILD.vdomKey && vnodeData.key) {
|
390 | key = vnodeData.key;
|
391 | }
|
392 | if (BUILD.slotRelocation && vnodeData.name) {
|
393 | slotName = vnodeData.name;
|
394 | }
|
395 | if (BUILD.vdomClass) {
|
396 | const classData = vnodeData.className || vnodeData.class;
|
397 | if (classData) {
|
398 | vnodeData.class =
|
399 | typeof classData !== 'object'
|
400 | ? classData
|
401 | : Object.keys(classData)
|
402 | .filter(k => classData[k])
|
403 | .join(' ');
|
404 | }
|
405 | }
|
406 | }
|
407 | if (BUILD.isDev && vNodeChildren.some(isHost)) {
|
408 | consoleDevError(`The <Host> must be the single root component. Make sure:
|
409 | - You are NOT using hostData() and <Host> in the same component.
|
410 | - <Host> is used once, and it's the single root component of the render() function.`);
|
411 | }
|
412 | if (BUILD.vdomFunctional && typeof nodeName === 'function') {
|
413 |
|
414 | return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
|
415 | }
|
416 | const vnode = newVNode(nodeName, null);
|
417 | vnode.$attrs$ = vnodeData;
|
418 | if (vNodeChildren.length > 0) {
|
419 | vnode.$children$ = vNodeChildren;
|
420 | }
|
421 | if (BUILD.vdomKey) {
|
422 | vnode.$key$ = key;
|
423 | }
|
424 | if (BUILD.slotRelocation) {
|
425 | vnode.$name$ = slotName;
|
426 | }
|
427 | return vnode;
|
428 | };
|
429 | const newVNode = (tag, text) => {
|
430 | const vnode = {
|
431 | $flags$: 0,
|
432 | $tag$: tag,
|
433 | $text$: text,
|
434 | $elm$: null,
|
435 | $children$: null,
|
436 | };
|
437 | if (BUILD.vdomAttribute) {
|
438 | vnode.$attrs$ = null;
|
439 | }
|
440 | if (BUILD.vdomKey) {
|
441 | vnode.$key$ = null;
|
442 | }
|
443 | if (BUILD.slotRelocation) {
|
444 | vnode.$name$ = null;
|
445 | }
|
446 | return vnode;
|
447 | };
|
448 | const Host = {};
|
449 | const isHost = (node) => node && node.$tag$ === Host;
|
450 | const vdomFnUtils = {
|
451 | forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
|
452 | map: (children, cb) => children
|
453 | .map(convertToPublic)
|
454 | .map(cb)
|
455 | .map(convertToPrivate),
|
456 | };
|
457 | const convertToPublic = (node) => ({
|
458 | vattrs: node.$attrs$,
|
459 | vchildren: node.$children$,
|
460 | vkey: node.$key$,
|
461 | vname: node.$name$,
|
462 | vtag: node.$tag$,
|
463 | vtext: node.$text$,
|
464 | });
|
465 | const convertToPrivate = (node) => {
|
466 | if (typeof node.vtag === 'function') {
|
467 | const vnodeData = Object.assign({}, node.vattrs);
|
468 | if (node.vkey) {
|
469 | vnodeData.key = node.vkey;
|
470 | }
|
471 | if (node.vname) {
|
472 | vnodeData.name = node.vname;
|
473 | }
|
474 | return h(node.vtag, vnodeData, ...node.vchildren || []);
|
475 | }
|
476 | const vnode = newVNode(node.vtag, node.vtext);
|
477 | vnode.$attrs$ = node.vattrs;
|
478 | vnode.$children$ = node.vchildren;
|
479 | vnode.$key$ = node.vkey;
|
480 | vnode.$name$ = node.vname;
|
481 | return vnode;
|
482 | };
|
483 | const validateInputProperties = (vnodeData) => {
|
484 | const props = Object.keys(vnodeData);
|
485 | const typeIndex = props.indexOf('type');
|
486 | const minIndex = props.indexOf('min');
|
487 | const maxIndex = props.indexOf('max');
|
488 | const stepIndex = props.indexOf('min');
|
489 | const value = props.indexOf('value');
|
490 | if (value === -1) {
|
491 | return;
|
492 | }
|
493 | if (value < typeIndex || value < minIndex || value < maxIndex || value < stepIndex) {
|
494 | consoleDevWarn(`The "value" prop of <input> should be set after "min", "max", "type" and "step"`);
|
495 | }
|
496 | };
|
497 |
|
498 |
|
499 |
|
500 |
|
501 |
|
502 |
|
503 |
|
504 |
|
505 | const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
506 | if (oldValue !== newValue) {
|
507 | let isProp = isMemberInElement(elm, memberName);
|
508 | let ln = memberName.toLowerCase();
|
509 | if (BUILD.vdomClass && memberName === 'class') {
|
510 | const classList = elm.classList;
|
511 | const oldClasses = parseClassList(oldValue);
|
512 | const newClasses = parseClassList(newValue);
|
513 | classList.remove(...oldClasses.filter(c => c && !newClasses.includes(c)));
|
514 | classList.add(...newClasses.filter(c => c && !oldClasses.includes(c)));
|
515 | }
|
516 | else if (BUILD.vdomStyle && memberName === 'style') {
|
517 |
|
518 | if (BUILD.updatable) {
|
519 | for (const prop in oldValue) {
|
520 | if (!newValue || newValue[prop] == null) {
|
521 | if (!BUILD.hydrateServerSide && prop.includes('-')) {
|
522 | elm.style.removeProperty(prop);
|
523 | }
|
524 | else {
|
525 | elm.style[prop] = '';
|
526 | }
|
527 | }
|
528 | }
|
529 | }
|
530 | for (const prop in newValue) {
|
531 | if (!oldValue || newValue[prop] !== oldValue[prop]) {
|
532 | if (!BUILD.hydrateServerSide && prop.includes('-')) {
|
533 | elm.style.setProperty(prop, newValue[prop]);
|
534 | }
|
535 | else {
|
536 | elm.style[prop] = newValue[prop];
|
537 | }
|
538 | }
|
539 | }
|
540 | }
|
541 | else if (BUILD.vdomKey && memberName === 'key')
|
542 | ;
|
543 | else if (BUILD.vdomRef && memberName === 'ref') {
|
544 |
|
545 | if (newValue) {
|
546 | newValue(elm);
|
547 | }
|
548 | }
|
549 | else if (BUILD.vdomListener && (BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === 'o' && memberName[1] === 'n') {
|
550 |
|
551 |
|
552 |
|
553 |
|
554 | if (memberName[2] === '-') {
|
555 |
|
556 |
|
557 |
|
558 |
|
559 |
|
560 |
|
561 |
|
562 | memberName = memberName.slice(3);
|
563 | }
|
564 | else if (isMemberInElement(win, ln)) {
|
565 |
|
566 |
|
567 |
|
568 |
|
569 | memberName = ln.slice(2);
|
570 | }
|
571 | else {
|
572 |
|
573 |
|
574 |
|
575 |
|
576 |
|
577 | memberName = ln[2] + memberName.slice(3);
|
578 | }
|
579 | if (oldValue) {
|
580 | plt.rel(elm, memberName, oldValue, false);
|
581 | }
|
582 | if (newValue) {
|
583 | plt.ael(elm, memberName, newValue, false);
|
584 | }
|
585 | }
|
586 | else if (BUILD.vdomPropOrAttr) {
|
587 |
|
588 | const isComplex = isComplexType(newValue);
|
589 | if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
|
590 | try {
|
591 | if (!elm.tagName.includes('-')) {
|
592 | let n = newValue == null ? '' : newValue;
|
593 |
|
594 | if (memberName === 'list') {
|
595 | isProp = false;
|
596 |
|
597 | }
|
598 | else if (oldValue == null || elm[memberName] != n) {
|
599 | elm[memberName] = n;
|
600 | }
|
601 | }
|
602 | else {
|
603 | elm[memberName] = newValue;
|
604 | }
|
605 | }
|
606 | catch (e) { }
|
607 | }
|
608 | |
609 |
|
610 |
|
611 |
|
612 |
|
613 |
|
614 |
|
615 | let xlink = false;
|
616 | if (BUILD.vdomXlink) {
|
617 | if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
|
618 | memberName = ln;
|
619 | xlink = true;
|
620 | }
|
621 | }
|
622 | if (newValue == null || newValue === false) {
|
623 | if (newValue !== false || elm.getAttribute(memberName) === '') {
|
624 | if (BUILD.vdomXlink && xlink) {
|
625 | elm.removeAttributeNS(XLINK_NS, memberName);
|
626 | }
|
627 | else {
|
628 | elm.removeAttribute(memberName);
|
629 | }
|
630 | }
|
631 | }
|
632 | else if ((!isProp || flags & 4 || isSvg) && !isComplex) {
|
633 | newValue = newValue === true ? '' : newValue;
|
634 | if (BUILD.vdomXlink && xlink) {
|
635 | elm.setAttributeNS(XLINK_NS, memberName, newValue);
|
636 | }
|
637 | else {
|
638 | elm.setAttribute(memberName, newValue);
|
639 | }
|
640 | }
|
641 | }
|
642 | }
|
643 | };
|
644 | const parseClassListRegex = /\s/;
|
645 | const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
|
646 | const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
|
647 |
|
648 |
|
649 |
|
650 | const elm = newVnode.$elm$.nodeType === 11 && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
|
651 | const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
|
652 | const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
|
653 | if (BUILD.updatable) {
|
654 |
|
655 | for (memberName in oldVnodeAttrs) {
|
656 | if (!(memberName in newVnodeAttrs)) {
|
657 | setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
|
658 | }
|
659 | }
|
660 | }
|
661 |
|
662 | for (memberName in newVnodeAttrs) {
|
663 | setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
|
664 | }
|
665 | };
|
666 | const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
667 |
|
668 | let newVNode = newParentVNode.$children$[childIndex];
|
669 | let i = 0;
|
670 | let elm;
|
671 | let childNode;
|
672 | let oldVNode;
|
673 | if (BUILD.slotRelocation && !useNativeShadowDom) {
|
674 |
|
675 | checkSlotRelocate = true;
|
676 | if (newVNode.$tag$ === 'slot') {
|
677 | if (scopeId) {
|
678 |
|
679 | parentElm.classList.add(scopeId + '-s');
|
680 | }
|
681 | newVNode.$flags$ |= newVNode.$children$
|
682 | ?
|
683 | 2
|
684 | :
|
685 | 1 ;
|
686 | }
|
687 | }
|
688 | if (BUILD.isDev && newVNode.$elm$) {
|
689 | consoleError(`The JSX ${newVNode.$text$ !== null ? `"${newVNode.$text$}" text` : `"${newVNode.$tag$}" element`} node should not be shared within the same renderer. The renderer caches element lookups in order to improve performance. However, a side effect from this is that the exact same JSX node should not be reused. For more information please see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes`);
|
690 | }
|
691 | if (BUILD.vdomText && newVNode.$text$ !== null) {
|
692 |
|
693 | elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
|
694 | }
|
695 | else if (BUILD.slotRelocation && newVNode.$flags$ & 1 ) {
|
696 |
|
697 | elm = newVNode.$elm$ = BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : doc.createTextNode('');
|
698 | }
|
699 | else {
|
700 | if (BUILD.svg && !isSvgMode) {
|
701 | isSvgMode = newVNode.$tag$ === 'svg';
|
702 | }
|
703 |
|
704 | elm = newVNode.$elm$ = (BUILD.svg
|
705 | ? doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, BUILD.slotRelocation && newVNode.$flags$ & 2 ? 'slot-fb' : newVNode.$tag$)
|
706 | : doc.createElement(BUILD.slotRelocation && newVNode.$flags$ & 2 ? 'slot-fb' : newVNode.$tag$));
|
707 | if (BUILD.svg && isSvgMode && newVNode.$tag$ === 'foreignObject') {
|
708 | isSvgMode = false;
|
709 | }
|
710 |
|
711 | if (BUILD.vdomAttribute) {
|
712 | updateElement(null, newVNode, isSvgMode);
|
713 | }
|
714 | if ((BUILD.shadowDom || BUILD.scoped) && isDef(scopeId) && elm['s-si'] !== scopeId) {
|
715 |
|
716 |
|
717 | elm.classList.add((elm['s-si'] = scopeId));
|
718 | }
|
719 | if (newVNode.$children$) {
|
720 | for (i = 0; i < newVNode.$children$.length; ++i) {
|
721 |
|
722 | childNode = createElm(oldParentVNode, newVNode, i, elm);
|
723 |
|
724 | if (childNode) {
|
725 |
|
726 | elm.appendChild(childNode);
|
727 | }
|
728 | }
|
729 | }
|
730 | if (BUILD.svg) {
|
731 | if (newVNode.$tag$ === 'svg') {
|
732 |
|
733 | isSvgMode = false;
|
734 | }
|
735 | else if (elm.tagName === 'foreignObject') {
|
736 |
|
737 | isSvgMode = true;
|
738 | }
|
739 | }
|
740 | }
|
741 | if (BUILD.slotRelocation) {
|
742 | elm['s-hn'] = hostTagName;
|
743 | if (newVNode.$flags$ & (2 | 1 )) {
|
744 |
|
745 | elm['s-sr'] = true;
|
746 |
|
747 | elm['s-cr'] = contentRef;
|
748 |
|
749 | elm['s-sn'] = newVNode.$name$ || '';
|
750 |
|
751 | oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
|
752 | if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
|
753 |
|
754 |
|
755 | putBackInOriginalLocation(oldParentVNode.$elm$, false);
|
756 | }
|
757 | }
|
758 | }
|
759 | return elm;
|
760 | };
|
761 | const putBackInOriginalLocation = (parentElm, recursive) => {
|
762 | plt.$flags$ |= 1 ;
|
763 | const oldSlotChildNodes = parentElm.childNodes;
|
764 | for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
|
765 | const childNode = oldSlotChildNodes[i];
|
766 | if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
|
767 |
|
768 |
|
769 |
|
770 |
|
771 | parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
|
772 |
|
773 |
|
774 |
|
775 | childNode['s-ol'].remove();
|
776 | childNode['s-ol'] = undefined;
|
777 | checkSlotRelocate = true;
|
778 | }
|
779 | if (recursive) {
|
780 | putBackInOriginalLocation(childNode, recursive);
|
781 | }
|
782 | }
|
783 | plt.$flags$ &= ~1 ;
|
784 | };
|
785 | const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
|
786 | let containerElm = ((BUILD.slotRelocation && parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
|
787 | let childNode;
|
788 | if (BUILD.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
|
789 | containerElm = containerElm.shadowRoot;
|
790 | }
|
791 | for (; startIdx <= endIdx; ++startIdx) {
|
792 | if (vnodes[startIdx]) {
|
793 | childNode = createElm(null, parentVNode, startIdx, parentElm);
|
794 | if (childNode) {
|
795 | vnodes[startIdx].$elm$ = childNode;
|
796 | containerElm.insertBefore(childNode, BUILD.slotRelocation ? referenceNode(before) : before);
|
797 | }
|
798 | }
|
799 | }
|
800 | };
|
801 | const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
|
802 | for (; startIdx <= endIdx; ++startIdx) {
|
803 | if ((vnode = vnodes[startIdx])) {
|
804 | elm = vnode.$elm$;
|
805 | callNodeRefs(vnode);
|
806 | if (BUILD.slotRelocation) {
|
807 |
|
808 |
|
809 | checkSlotFallbackVisibility = true;
|
810 | if (elm['s-ol']) {
|
811 |
|
812 | elm['s-ol'].remove();
|
813 | }
|
814 | else {
|
815 |
|
816 |
|
817 | putBackInOriginalLocation(elm, true);
|
818 | }
|
819 | }
|
820 |
|
821 | elm.remove();
|
822 | }
|
823 | }
|
824 | };
|
825 | const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
826 | let oldStartIdx = 0;
|
827 | let newStartIdx = 0;
|
828 | let idxInOld = 0;
|
829 | let i = 0;
|
830 | let oldEndIdx = oldCh.length - 1;
|
831 | let oldStartVnode = oldCh[0];
|
832 | let oldEndVnode = oldCh[oldEndIdx];
|
833 | let newEndIdx = newCh.length - 1;
|
834 | let newStartVnode = newCh[0];
|
835 | let newEndVnode = newCh[newEndIdx];
|
836 | let node;
|
837 | let elmToMove;
|
838 | while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
|
839 | if (oldStartVnode == null) {
|
840 |
|
841 | oldStartVnode = oldCh[++oldStartIdx];
|
842 | }
|
843 | else if (oldEndVnode == null) {
|
844 | oldEndVnode = oldCh[--oldEndIdx];
|
845 | }
|
846 | else if (newStartVnode == null) {
|
847 | newStartVnode = newCh[++newStartIdx];
|
848 | }
|
849 | else if (newEndVnode == null) {
|
850 | newEndVnode = newCh[--newEndIdx];
|
851 | }
|
852 | else if (isSameVnode(oldStartVnode, newStartVnode)) {
|
853 | patch(oldStartVnode, newStartVnode);
|
854 | oldStartVnode = oldCh[++oldStartIdx];
|
855 | newStartVnode = newCh[++newStartIdx];
|
856 | }
|
857 | else if (isSameVnode(oldEndVnode, newEndVnode)) {
|
858 | patch(oldEndVnode, newEndVnode);
|
859 | oldEndVnode = oldCh[--oldEndIdx];
|
860 | newEndVnode = newCh[--newEndIdx];
|
861 | }
|
862 | else if (isSameVnode(oldStartVnode, newEndVnode)) {
|
863 |
|
864 | if (BUILD.slotRelocation && (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
|
865 | putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
|
866 | }
|
867 | patch(oldStartVnode, newEndVnode);
|
868 | parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
|
869 | oldStartVnode = oldCh[++oldStartIdx];
|
870 | newEndVnode = newCh[--newEndIdx];
|
871 | }
|
872 | else if (isSameVnode(oldEndVnode, newStartVnode)) {
|
873 |
|
874 | if (BUILD.slotRelocation && (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
|
875 | putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
|
876 | }
|
877 | patch(oldEndVnode, newStartVnode);
|
878 | parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
|
879 | oldEndVnode = oldCh[--oldEndIdx];
|
880 | newStartVnode = newCh[++newStartIdx];
|
881 | }
|
882 | else {
|
883 |
|
884 | idxInOld = -1;
|
885 | if (BUILD.vdomKey) {
|
886 | for (i = oldStartIdx; i <= oldEndIdx; ++i) {
|
887 | if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
|
888 | idxInOld = i;
|
889 | break;
|
890 | }
|
891 | }
|
892 | }
|
893 | if (BUILD.vdomKey && idxInOld >= 0) {
|
894 | elmToMove = oldCh[idxInOld];
|
895 | if (elmToMove.$tag$ !== newStartVnode.$tag$) {
|
896 | node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
|
897 | }
|
898 | else {
|
899 | patch(elmToMove, newStartVnode);
|
900 | oldCh[idxInOld] = undefined;
|
901 | node = elmToMove.$elm$;
|
902 | }
|
903 | newStartVnode = newCh[++newStartIdx];
|
904 | }
|
905 | else {
|
906 |
|
907 | node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
|
908 | newStartVnode = newCh[++newStartIdx];
|
909 | }
|
910 | if (node) {
|
911 | if (BUILD.slotRelocation) {
|
912 | parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
|
913 | }
|
914 | else {
|
915 | oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
|
916 | }
|
917 | }
|
918 | }
|
919 | }
|
920 | if (oldStartIdx > oldEndIdx) {
|
921 | addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
|
922 | }
|
923 | else if (BUILD.updatable && newStartIdx > newEndIdx) {
|
924 | removeVnodes(oldCh, oldStartIdx, oldEndIdx);
|
925 | }
|
926 | };
|
927 | const isSameVnode = (vnode1, vnode2) => {
|
928 |
|
929 |
|
930 | if (vnode1.$tag$ === vnode2.$tag$) {
|
931 | if (BUILD.slotRelocation && vnode1.$tag$ === 'slot') {
|
932 | return vnode1.$name$ === vnode2.$name$;
|
933 | }
|
934 | if (BUILD.vdomKey) {
|
935 | return vnode1.$key$ === vnode2.$key$;
|
936 | }
|
937 | return true;
|
938 | }
|
939 | return false;
|
940 | };
|
941 | const referenceNode = (node) => {
|
942 |
|
943 |
|
944 |
|
945 |
|
946 | return (node && node['s-ol']) || node;
|
947 | };
|
948 | const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
|
949 | const patch = (oldVNode, newVNode) => {
|
950 | const elm = (newVNode.$elm$ = oldVNode.$elm$);
|
951 | const oldChildren = oldVNode.$children$;
|
952 | const newChildren = newVNode.$children$;
|
953 | const tag = newVNode.$tag$;
|
954 | const text = newVNode.$text$;
|
955 | let defaultHolder;
|
956 | if (!BUILD.vdomText || text === null) {
|
957 | if (BUILD.svg) {
|
958 |
|
959 |
|
960 | isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
|
961 | }
|
962 |
|
963 | if (BUILD.vdomAttribute || BUILD.reflect) {
|
964 | if (BUILD.slot && tag === 'slot')
|
965 | ;
|
966 | else {
|
967 |
|
968 |
|
969 |
|
970 | updateElement(oldVNode, newVNode, isSvgMode);
|
971 | }
|
972 | }
|
973 | if (BUILD.updatable && oldChildren !== null && newChildren !== null) {
|
974 |
|
975 | updateChildren(elm, oldChildren, newVNode, newChildren);
|
976 | }
|
977 | else if (newChildren !== null) {
|
978 |
|
979 | if (BUILD.updatable && BUILD.vdomText && oldVNode.$text$ !== null) {
|
980 |
|
981 | elm.textContent = '';
|
982 | }
|
983 |
|
984 | addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
|
985 | }
|
986 | else if (BUILD.updatable && oldChildren !== null) {
|
987 |
|
988 | removeVnodes(oldChildren, 0, oldChildren.length - 1);
|
989 | }
|
990 | if (BUILD.svg && isSvgMode && tag === 'svg') {
|
991 | isSvgMode = false;
|
992 | }
|
993 | }
|
994 | else if (BUILD.vdomText && BUILD.slotRelocation && (defaultHolder = elm['s-cr'])) {
|
995 |
|
996 | defaultHolder.parentNode.textContent = text;
|
997 | }
|
998 | else if (BUILD.vdomText && oldVNode.$text$ !== text) {
|
999 |
|
1000 |
|
1001 | elm.data = text;
|
1002 | }
|
1003 | };
|
1004 | const updateFallbackSlotVisibility = (elm) => {
|
1005 |
|
1006 | let childNodes = elm.childNodes;
|
1007 | let childNode;
|
1008 | let i;
|
1009 | let ilen;
|
1010 | let j;
|
1011 | let slotNameAttr;
|
1012 | let nodeType;
|
1013 | for (i = 0, ilen = childNodes.length; i < ilen; i++) {
|
1014 | childNode = childNodes[i];
|
1015 | if (childNode.nodeType === 1 ) {
|
1016 | if (childNode['s-sr']) {
|
1017 |
|
1018 |
|
1019 | slotNameAttr = childNode['s-sn'];
|
1020 |
|
1021 |
|
1022 | childNode.hidden = false;
|
1023 | for (j = 0; j < ilen; j++) {
|
1024 | if (childNodes[j]['s-hn'] !== childNode['s-hn']) {
|
1025 |
|
1026 | nodeType = childNodes[j].nodeType;
|
1027 | if (slotNameAttr !== '') {
|
1028 |
|
1029 | if (nodeType === 1 && slotNameAttr === childNodes[j].getAttribute('slot')) {
|
1030 | childNode.hidden = true;
|
1031 | break;
|
1032 | }
|
1033 | }
|
1034 | else {
|
1035 |
|
1036 |
|
1037 |
|
1038 | if (nodeType === 1 || (nodeType === 3 && childNodes[j].textContent.trim() !== '')) {
|
1039 | childNode.hidden = true;
|
1040 | break;
|
1041 | }
|
1042 | }
|
1043 | }
|
1044 | }
|
1045 | }
|
1046 |
|
1047 | updateFallbackSlotVisibility(childNode);
|
1048 | }
|
1049 | }
|
1050 | };
|
1051 | const relocateNodes = [];
|
1052 | const relocateSlotContent = (elm) => {
|
1053 |
|
1054 | let childNode;
|
1055 | let node;
|
1056 | let hostContentNodes;
|
1057 | let slotNameAttr;
|
1058 | let relocateNodeData;
|
1059 | let j;
|
1060 | let i = 0;
|
1061 | let childNodes = elm.childNodes;
|
1062 | let ilen = childNodes.length;
|
1063 | for (; i < ilen; i++) {
|
1064 | childNode = childNodes[i];
|
1065 | if (childNode['s-sr'] && (node = childNode['s-cr'])) {
|
1066 |
|
1067 |
|
1068 | hostContentNodes = node.parentNode.childNodes;
|
1069 | slotNameAttr = childNode['s-sn'];
|
1070 | for (j = hostContentNodes.length - 1; j >= 0; j--) {
|
1071 | node = hostContentNodes[j];
|
1072 | if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
|
1073 |
|
1074 |
|
1075 |
|
1076 | if (isNodeLocatedInSlot(node, slotNameAttr)) {
|
1077 |
|
1078 | relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
|
1079 |
|
1080 |
|
1081 |
|
1082 | checkSlotFallbackVisibility = true;
|
1083 | node['s-sn'] = node['s-sn'] || slotNameAttr;
|
1084 | if (relocateNodeData) {
|
1085 |
|
1086 |
|
1087 | relocateNodeData.$slotRefNode$ = childNode;
|
1088 | }
|
1089 | else {
|
1090 |
|
1091 | relocateNodes.push({
|
1092 | $slotRefNode$: childNode,
|
1093 | $nodeToRelocate$: node,
|
1094 | });
|
1095 | }
|
1096 | if (node['s-sr']) {
|
1097 | relocateNodes.map(relocateNode => {
|
1098 | if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
|
1099 | relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
|
1100 | if (relocateNodeData && !relocateNode.$slotRefNode$) {
|
1101 | relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
|
1102 | }
|
1103 | }
|
1104 | });
|
1105 | }
|
1106 | }
|
1107 | else if (!relocateNodes.some(r => r.$nodeToRelocate$ === node)) {
|
1108 |
|
1109 |
|
1110 | relocateNodes.push({
|
1111 | $nodeToRelocate$: node,
|
1112 | });
|
1113 | }
|
1114 | }
|
1115 | }
|
1116 | }
|
1117 | if (childNode.nodeType === 1 ) {
|
1118 | relocateSlotContent(childNode);
|
1119 | }
|
1120 | }
|
1121 | };
|
1122 | const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
|
1123 | if (nodeToRelocate.nodeType === 1 ) {
|
1124 | if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
|
1125 | return true;
|
1126 | }
|
1127 | if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
|
1128 | return true;
|
1129 | }
|
1130 | return false;
|
1131 | }
|
1132 | if (nodeToRelocate['s-sn'] === slotNameAttr) {
|
1133 | return true;
|
1134 | }
|
1135 | return slotNameAttr === '';
|
1136 | };
|
1137 | const callNodeRefs = (vNode) => {
|
1138 | if (BUILD.vdomRef) {
|
1139 | vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
|
1140 | vNode.$children$ && vNode.$children$.map(callNodeRefs);
|
1141 | }
|
1142 | };
|
1143 | const renderVdom = (hostRef, renderFnResults) => {
|
1144 | const hostElm = hostRef.$hostElement$;
|
1145 | const cmpMeta = hostRef.$cmpMeta$;
|
1146 | const oldVNode = hostRef.$vnode$ || newVNode(null, null);
|
1147 | const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
|
1148 | hostTagName = hostElm.tagName;
|
1149 |
|
1150 | if (BUILD.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) {
|
1151 | throw new Error(`The <Host> must be the single root component.
|
1152 | Looks like the render() function of "${hostTagName.toLowerCase()}" is returning an array that contains the <Host>.
|
1153 |
|
1154 | The render() function should look like this instead:
|
1155 |
|
1156 | render() {
|
1157 | // Do not return an array
|
1158 | return (
|
1159 | <Host>{content}</Host>
|
1160 | );
|
1161 | }
|
1162 | `);
|
1163 | }
|
1164 | if (BUILD.reflect && cmpMeta.$attrsToReflect$) {
|
1165 | rootVnode.$attrs$ = rootVnode.$attrs$ || {};
|
1166 | cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
|
1167 | }
|
1168 | rootVnode.$tag$ = null;
|
1169 | rootVnode.$flags$ |= 4 ;
|
1170 | hostRef.$vnode$ = rootVnode;
|
1171 | rootVnode.$elm$ = oldVNode.$elm$ = (BUILD.shadowDom ? hostElm.shadowRoot || hostElm : hostElm);
|
1172 | if (BUILD.scoped || BUILD.shadowDom) {
|
1173 | scopeId = hostElm['s-sc'];
|
1174 | }
|
1175 | if (BUILD.slotRelocation) {
|
1176 | contentRef = hostElm['s-cr'];
|
1177 | useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 ) !== 0;
|
1178 |
|
1179 | checkSlotFallbackVisibility = false;
|
1180 | }
|
1181 |
|
1182 | patch(oldVNode, rootVnode);
|
1183 | if (BUILD.slotRelocation) {
|
1184 |
|
1185 |
|
1186 | plt.$flags$ |= 1 ;
|
1187 | if (checkSlotRelocate) {
|
1188 | relocateSlotContent(rootVnode.$elm$);
|
1189 | let relocateData;
|
1190 | let nodeToRelocate;
|
1191 | let orgLocationNode;
|
1192 | let parentNodeRef;
|
1193 | let insertBeforeNode;
|
1194 | let refNode;
|
1195 | let i = 0;
|
1196 | for (; i < relocateNodes.length; i++) {
|
1197 | relocateData = relocateNodes[i];
|
1198 | nodeToRelocate = relocateData.$nodeToRelocate$;
|
1199 | if (!nodeToRelocate['s-ol']) {
|
1200 |
|
1201 |
|
1202 | orgLocationNode = BUILD.isDebug || BUILD.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : doc.createTextNode('');
|
1203 | orgLocationNode['s-nr'] = nodeToRelocate;
|
1204 | nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
|
1205 | }
|
1206 | }
|
1207 | for (i = 0; i < relocateNodes.length; i++) {
|
1208 | relocateData = relocateNodes[i];
|
1209 | nodeToRelocate = relocateData.$nodeToRelocate$;
|
1210 | if (relocateData.$slotRefNode$) {
|
1211 |
|
1212 |
|
1213 | parentNodeRef = relocateData.$slotRefNode$.parentNode;
|
1214 | insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
|
1215 | orgLocationNode = nodeToRelocate['s-ol'];
|
1216 | while ((orgLocationNode = orgLocationNode.previousSibling)) {
|
1217 | refNode = orgLocationNode['s-nr'];
|
1218 | if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
|
1219 | refNode = refNode.nextSibling;
|
1220 | if (!refNode || !refNode['s-nr']) {
|
1221 | insertBeforeNode = refNode;
|
1222 | break;
|
1223 | }
|
1224 | }
|
1225 | }
|
1226 | if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) || nodeToRelocate.nextSibling !== insertBeforeNode) {
|
1227 |
|
1228 |
|
1229 |
|
1230 | if (nodeToRelocate !== insertBeforeNode) {
|
1231 | if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
|
1232 |
|
1233 | nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
|
1234 | }
|
1235 |
|
1236 | parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
|
1237 | }
|
1238 | }
|
1239 | }
|
1240 | else {
|
1241 |
|
1242 | if (nodeToRelocate.nodeType === 1 ) {
|
1243 | nodeToRelocate.hidden = true;
|
1244 | }
|
1245 | }
|
1246 | }
|
1247 | }
|
1248 | if (checkSlotFallbackVisibility) {
|
1249 | updateFallbackSlotVisibility(rootVnode.$elm$);
|
1250 | }
|
1251 |
|
1252 |
|
1253 | plt.$flags$ &= ~1 ;
|
1254 |
|
1255 | relocateNodes.length = 0;
|
1256 | }
|
1257 | };
|
1258 |
|
1259 |
|
1260 | const slotReferenceDebugNode = (slotVNode) => doc.createComment(`<slot${slotVNode.$name$ ? ' name="' + slotVNode.$name$ + '"' : ''}> (host=${hostTagName.toLowerCase()})`);
|
1261 | const originalLocationDebugNode = (nodeToRelocate) => doc.createComment(`org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate['s-hn']})` : `[${nodeToRelocate.textContent}]`));
|
1262 | const getElement = (ref) => (BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref);
|
1263 | const createEvent = (ref, name, flags) => {
|
1264 | const elm = getElement(ref);
|
1265 | return {
|
1266 | emit: (detail) => {
|
1267 | if (BUILD.isDev && !elm.isConnected) {
|
1268 | consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
|
1269 | }
|
1270 | return emitEvent(elm, name, {
|
1271 | bubbles: !!(flags & 4 ),
|
1272 | composed: !!(flags & 2 ),
|
1273 | cancelable: !!(flags & 1 ),
|
1274 | detail,
|
1275 | });
|
1276 | },
|
1277 | };
|
1278 | };
|
1279 | const emitEvent = (elm, name, opts) => {
|
1280 | const ev = plt.ce(name, opts);
|
1281 | elm.dispatchEvent(ev);
|
1282 | return ev;
|
1283 | };
|
1284 | const attachToAncestor = (hostRef, ancestorComponent) => {
|
1285 | if (BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
|
1286 | ancestorComponent['s-p'].push(new Promise(r => (hostRef.$onRenderResolve$ = r)));
|
1287 | }
|
1288 | };
|
1289 | const scheduleUpdate = (hostRef, isInitialLoad) => {
|
1290 | if (BUILD.taskQueue && BUILD.updatable) {
|
1291 | hostRef.$flags$ |= 16 ;
|
1292 | }
|
1293 | if (BUILD.asyncLoading && hostRef.$flags$ & 4 ) {
|
1294 | hostRef.$flags$ |= 512 ;
|
1295 | return;
|
1296 | }
|
1297 | attachToAncestor(hostRef, hostRef.$ancestorComponent$);
|
1298 |
|
1299 |
|
1300 |
|
1301 | const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
|
1302 | return BUILD.taskQueue ? writeTask(dispatch) : dispatch;
|
1303 | };
|
1304 | const dispatchHooks = (hostRef, isInitialLoad) => {
|
1305 | const elm = hostRef.$hostElement$;
|
1306 | const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
|
1307 | const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
|
1308 | let promise;
|
1309 | if (isInitialLoad) {
|
1310 | if (BUILD.lazyLoad && BUILD.hostListener) {
|
1311 | hostRef.$flags$ |= 256 ;
|
1312 | if (hostRef.$queuedListeners$) {
|
1313 | hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
|
1314 | hostRef.$queuedListeners$ = null;
|
1315 | }
|
1316 | }
|
1317 | emitLifecycleEvent(elm, 'componentWillLoad');
|
1318 | if (BUILD.cmpWillLoad) {
|
1319 | promise = safeCall(instance, 'componentWillLoad');
|
1320 | }
|
1321 | }
|
1322 | else {
|
1323 | emitLifecycleEvent(elm, 'componentWillUpdate');
|
1324 | if (BUILD.cmpWillUpdate) {
|
1325 | promise = safeCall(instance, 'componentWillUpdate');
|
1326 | }
|
1327 | }
|
1328 | emitLifecycleEvent(elm, 'componentWillRender');
|
1329 | if (BUILD.cmpWillRender) {
|
1330 | promise = then(promise, () => safeCall(instance, 'componentWillRender'));
|
1331 | }
|
1332 | endSchedule();
|
1333 | return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
|
1334 | };
|
1335 | const updateComponent = (hostRef, instance, isInitialLoad) => {
|
1336 |
|
1337 | const elm = hostRef.$hostElement$;
|
1338 | const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
|
1339 | const rc = elm['s-rc'];
|
1340 | if (BUILD.style && isInitialLoad) {
|
1341 |
|
1342 | attachStyles(hostRef);
|
1343 | }
|
1344 | const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
|
1345 | if (BUILD.isDev) {
|
1346 | hostRef.$flags$ |= 1024 ;
|
1347 | }
|
1348 | if (BUILD.hasRenderFn || BUILD.reflect) {
|
1349 | if (BUILD.vdomRender || BUILD.reflect) {
|
1350 |
|
1351 |
|
1352 |
|
1353 | renderVdom(hostRef, callRender(hostRef, instance));
|
1354 | }
|
1355 | else {
|
1356 | elm.textContent = callRender(hostRef, instance);
|
1357 | }
|
1358 | }
|
1359 | if (BUILD.cssVarShim && plt.$cssShim$) {
|
1360 | plt.$cssShim$.updateHost(elm);
|
1361 | }
|
1362 | if (BUILD.isDev) {
|
1363 | hostRef.$renderCount$++;
|
1364 | hostRef.$flags$ &= ~1024 ;
|
1365 | }
|
1366 | if (BUILD.hydrateServerSide) {
|
1367 | try {
|
1368 |
|
1369 | serverSideConnected(elm);
|
1370 | if (isInitialLoad) {
|
1371 |
|
1372 | if (hostRef.$cmpMeta$.$flags$ & 1 ) {
|
1373 | elm['s-en'] = '';
|
1374 | }
|
1375 | else if (hostRef.$cmpMeta$.$flags$ & 2 ) {
|
1376 | elm['s-en'] = 'c';
|
1377 | }
|
1378 | }
|
1379 | }
|
1380 | catch (e) {
|
1381 | consoleError(e);
|
1382 | }
|
1383 | }
|
1384 | if (BUILD.asyncLoading && rc) {
|
1385 |
|
1386 |
|
1387 |
|
1388 | rc.map(cb => cb());
|
1389 | elm['s-rc'] = undefined;
|
1390 | }
|
1391 | endRender();
|
1392 | endUpdate();
|
1393 | if (BUILD.asyncLoading) {
|
1394 | const childrenPromises = elm['s-p'];
|
1395 | const postUpdate = () => postUpdateComponent(hostRef);
|
1396 | if (childrenPromises.length === 0) {
|
1397 | postUpdate();
|
1398 | }
|
1399 | else {
|
1400 | Promise.all(childrenPromises).then(postUpdate);
|
1401 | hostRef.$flags$ |= 4 ;
|
1402 | childrenPromises.length = 0;
|
1403 | }
|
1404 | }
|
1405 | else {
|
1406 | postUpdateComponent(hostRef);
|
1407 | }
|
1408 | };
|
1409 | const callRender = (hostRef, instance) => {
|
1410 |
|
1411 |
|
1412 |
|
1413 | const allRenderFn = BUILD.allRenderFn ? true : false;
|
1414 | const lazyLoad = BUILD.lazyLoad ? true : false;
|
1415 | const taskQueue = BUILD.taskQueue ? true : false;
|
1416 | const updatable = BUILD.updatable ? true : false;
|
1417 | try {
|
1418 | renderingRef = instance;
|
1419 | instance = allRenderFn ? instance.render() : instance.render && instance.render();
|
1420 | if (updatable && taskQueue) {
|
1421 | hostRef.$flags$ &= ~16 ;
|
1422 | }
|
1423 | if (updatable || lazyLoad) {
|
1424 | hostRef.$flags$ |= 2 ;
|
1425 | }
|
1426 | }
|
1427 | catch (e) {
|
1428 | consoleError(e);
|
1429 | }
|
1430 | renderingRef = null;
|
1431 | return instance;
|
1432 | };
|
1433 | const getRenderingRef = () => renderingRef;
|
1434 | const postUpdateComponent = (hostRef) => {
|
1435 | const tagName = hostRef.$cmpMeta$.$tagName$;
|
1436 | const elm = hostRef.$hostElement$;
|
1437 | const endPostUpdate = createTime('postUpdate', tagName);
|
1438 | const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
|
1439 | const ancestorComponent = hostRef.$ancestorComponent$;
|
1440 | if (BUILD.cmpDidRender) {
|
1441 | if (BUILD.isDev) {
|
1442 | hostRef.$flags$ |= 1024 ;
|
1443 | }
|
1444 | safeCall(instance, 'componentDidRender');
|
1445 | if (BUILD.isDev) {
|
1446 | hostRef.$flags$ &= ~1024 ;
|
1447 | }
|
1448 | }
|
1449 | emitLifecycleEvent(elm, 'componentDidRender');
|
1450 | if (!(hostRef.$flags$ & 64 )) {
|
1451 | hostRef.$flags$ |= 64 ;
|
1452 | if (BUILD.asyncLoading && BUILD.cssAnnotations) {
|
1453 |
|
1454 | addHydratedFlag(elm);
|
1455 | }
|
1456 | if (BUILD.cmpDidLoad) {
|
1457 | if (BUILD.isDev) {
|
1458 | hostRef.$flags$ |= 2048 ;
|
1459 | }
|
1460 | safeCall(instance, 'componentDidLoad');
|
1461 | if (BUILD.isDev) {
|
1462 | hostRef.$flags$ &= ~2048 ;
|
1463 | }
|
1464 | }
|
1465 | emitLifecycleEvent(elm, 'componentDidLoad');
|
1466 | endPostUpdate();
|
1467 | if (BUILD.asyncLoading) {
|
1468 | hostRef.$onReadyResolve$(elm);
|
1469 | if (!ancestorComponent) {
|
1470 | appDidLoad(tagName);
|
1471 | }
|
1472 | }
|
1473 | }
|
1474 | else {
|
1475 | if (BUILD.cmpDidUpdate) {
|
1476 |
|
1477 |
|
1478 |
|
1479 |
|
1480 | if (BUILD.isDev) {
|
1481 | hostRef.$flags$ |= 1024 ;
|
1482 | }
|
1483 | safeCall(instance, 'componentDidUpdate');
|
1484 | if (BUILD.isDev) {
|
1485 | hostRef.$flags$ &= ~1024 ;
|
1486 | }
|
1487 | }
|
1488 | emitLifecycleEvent(elm, 'componentDidUpdate');
|
1489 | endPostUpdate();
|
1490 | }
|
1491 | if (BUILD.hotModuleReplacement) {
|
1492 | elm['s-hmr-load'] && elm['s-hmr-load']();
|
1493 | }
|
1494 | if (BUILD.method && BUILD.lazyLoad) {
|
1495 | hostRef.$onInstanceResolve$(elm);
|
1496 | }
|
1497 |
|
1498 |
|
1499 | if (BUILD.asyncLoading) {
|
1500 | if (hostRef.$onRenderResolve$) {
|
1501 | hostRef.$onRenderResolve$();
|
1502 | hostRef.$onRenderResolve$ = undefined;
|
1503 | }
|
1504 | if (hostRef.$flags$ & 512 ) {
|
1505 | nextTick(() => scheduleUpdate(hostRef, false));
|
1506 | }
|
1507 | hostRef.$flags$ &= ~(4 | 512 );
|
1508 | }
|
1509 |
|
1510 |
|
1511 |
|
1512 | };
|
1513 | const forceUpdate = (ref) => {
|
1514 | if (BUILD.updatable) {
|
1515 | const hostRef = getHostRef(ref);
|
1516 | const isConnected = hostRef.$hostElement$.isConnected;
|
1517 | if (isConnected && (hostRef.$flags$ & (2 | 16 )) === 2 ) {
|
1518 | scheduleUpdate(hostRef, false);
|
1519 | }
|
1520 |
|
1521 | return isConnected;
|
1522 | }
|
1523 | return false;
|
1524 | };
|
1525 | const appDidLoad = (who) => {
|
1526 |
|
1527 |
|
1528 | if (BUILD.cssAnnotations) {
|
1529 | addHydratedFlag(doc.documentElement);
|
1530 | }
|
1531 | if (BUILD.asyncQueue) {
|
1532 | plt.$flags$ |= 2 ;
|
1533 | }
|
1534 | nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
|
1535 | if (BUILD.profile && performance.measure) {
|
1536 | performance.measure(`[Stencil] ${NAMESPACE} initial load (by ${who})`, 'st:app:start');
|
1537 | }
|
1538 | };
|
1539 | const safeCall = (instance, method, arg) => {
|
1540 | if (instance && instance[method]) {
|
1541 | try {
|
1542 | return instance[method](arg);
|
1543 | }
|
1544 | catch (e) {
|
1545 | consoleError(e);
|
1546 | }
|
1547 | }
|
1548 | return undefined;
|
1549 | };
|
1550 | const then = (promise, thenFn) => {
|
1551 | return promise && promise.then ? promise.then(thenFn) : thenFn();
|
1552 | };
|
1553 | const emitLifecycleEvent = (elm, lifecycleName) => {
|
1554 | if (BUILD.lifecycleDOMEvents) {
|
1555 | emitEvent(elm, 'stencil_' + lifecycleName, {
|
1556 | bubbles: true,
|
1557 | composed: true,
|
1558 | detail: {
|
1559 | namespace: NAMESPACE,
|
1560 | },
|
1561 | });
|
1562 | }
|
1563 | };
|
1564 | const addHydratedFlag = (elm) => (BUILD.hydratedClass ? elm.classList.add('hydrated') : BUILD.hydratedAttribute ? elm.setAttribute('hydrated', '') : undefined);
|
1565 | const serverSideConnected = (elm) => {
|
1566 | const children = elm.children;
|
1567 | if (children != null) {
|
1568 | for (let i = 0, ii = children.length; i < ii; i++) {
|
1569 | const childElm = children[i];
|
1570 | if (typeof childElm.connectedCallback === 'function') {
|
1571 | childElm.connectedCallback();
|
1572 | }
|
1573 | serverSideConnected(childElm);
|
1574 | }
|
1575 | }
|
1576 | };
|
1577 | const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
|
1578 | const endHydrate = createTime('hydrateClient', tagName);
|
1579 | const shadowRoot = hostElm.shadowRoot;
|
1580 | const childRenderNodes = [];
|
1581 | const slotNodes = [];
|
1582 | const shadowRootNodes = BUILD.shadowDom && shadowRoot ? [] : null;
|
1583 | const vnode = (hostRef.$vnode$ = newVNode(tagName, null));
|
1584 | if (!plt.$orgLocNodes$) {
|
1585 | initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));
|
1586 | }
|
1587 | hostElm[HYDRATE_ID] = hostId;
|
1588 | hostElm.removeAttribute(HYDRATE_ID);
|
1589 | clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
|
1590 | childRenderNodes.map(c => {
|
1591 | const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
|
1592 | const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
|
1593 | const node = c.$elm$;
|
1594 | if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
|
1595 | orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
|
1596 | }
|
1597 | if (!shadowRoot) {
|
1598 | node['s-hn'] = tagName;
|
1599 | if (orgLocationNode) {
|
1600 | node['s-ol'] = orgLocationNode;
|
1601 | node['s-ol']['s-nr'] = node;
|
1602 | }
|
1603 | }
|
1604 | plt.$orgLocNodes$.delete(orgLocationId);
|
1605 | });
|
1606 | if (BUILD.shadowDom && shadowRoot) {
|
1607 | shadowRootNodes.map(shadowRootNode => {
|
1608 | if (shadowRootNode) {
|
1609 | shadowRoot.appendChild(shadowRootNode);
|
1610 | }
|
1611 | });
|
1612 | }
|
1613 | endHydrate();
|
1614 | };
|
1615 | const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
|
1616 | let childNodeType;
|
1617 | let childIdSplt;
|
1618 | let childVNode;
|
1619 | let i;
|
1620 | if (node.nodeType === 1 ) {
|
1621 | childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
|
1622 | if (childNodeType) {
|
1623 |
|
1624 |
|
1625 | childIdSplt = childNodeType.split('.');
|
1626 | if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
|
1627 | childVNode = {
|
1628 | $flags$: 0,
|
1629 | $hostId$: childIdSplt[0],
|
1630 | $nodeId$: childIdSplt[1],
|
1631 | $depth$: childIdSplt[2],
|
1632 | $index$: childIdSplt[3],
|
1633 | $tag$: node.tagName.toLowerCase(),
|
1634 | $elm$: node,
|
1635 | $attrs$: null,
|
1636 | $children$: null,
|
1637 | $key$: null,
|
1638 | $name$: null,
|
1639 | $text$: null,
|
1640 | };
|
1641 | childRenderNodes.push(childVNode);
|
1642 | node.removeAttribute(HYDRATE_CHILD_ID);
|
1643 |
|
1644 |
|
1645 | if (!parentVNode.$children$) {
|
1646 | parentVNode.$children$ = [];
|
1647 | }
|
1648 |
|
1649 | parentVNode.$children$[childVNode.$index$] = childVNode;
|
1650 |
|
1651 | parentVNode = childVNode;
|
1652 | if (shadowRootNodes && childVNode.$depth$ === '0') {
|
1653 | shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
|
1654 | }
|
1655 | }
|
1656 | }
|
1657 |
|
1658 | for (i = node.childNodes.length - 1; i >= 0; i--) {
|
1659 | clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);
|
1660 | }
|
1661 | if (node.shadowRoot) {
|
1662 |
|
1663 | for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
|
1664 | clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);
|
1665 | }
|
1666 | }
|
1667 | }
|
1668 | else if (node.nodeType === 8 ) {
|
1669 |
|
1670 | childIdSplt = node.nodeValue.split('.');
|
1671 | if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
|
1672 |
|
1673 | childNodeType = childIdSplt[0];
|
1674 | childVNode = {
|
1675 | $flags$: 0,
|
1676 | $hostId$: childIdSplt[1],
|
1677 | $nodeId$: childIdSplt[2],
|
1678 | $depth$: childIdSplt[3],
|
1679 | $index$: childIdSplt[4],
|
1680 | $elm$: node,
|
1681 | $attrs$: null,
|
1682 | $children$: null,
|
1683 | $key$: null,
|
1684 | $name$: null,
|
1685 | $tag$: null,
|
1686 | $text$: null,
|
1687 | };
|
1688 | if (childNodeType === TEXT_NODE_ID) {
|
1689 | childVNode.$elm$ = node.nextSibling;
|
1690 | if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 ) {
|
1691 | childVNode.$text$ = childVNode.$elm$.textContent;
|
1692 | childRenderNodes.push(childVNode);
|
1693 |
|
1694 | node.remove();
|
1695 | if (!parentVNode.$children$) {
|
1696 | parentVNode.$children$ = [];
|
1697 | }
|
1698 | parentVNode.$children$[childVNode.$index$] = childVNode;
|
1699 | if (shadowRootNodes && childVNode.$depth$ === '0') {
|
1700 | shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
|
1701 | }
|
1702 | }
|
1703 | }
|
1704 | else if (childVNode.$hostId$ === hostId) {
|
1705 |
|
1706 | if (childNodeType === SLOT_NODE_ID) {
|
1707 |
|
1708 | childVNode.$tag$ = 'slot';
|
1709 | if (childIdSplt[5]) {
|
1710 | node['s-sn'] = childVNode.$name$ = childIdSplt[5];
|
1711 | }
|
1712 | else {
|
1713 | node['s-sn'] = '';
|
1714 | }
|
1715 | node['s-sr'] = true;
|
1716 | if (BUILD.shadowDom && shadowRootNodes) {
|
1717 |
|
1718 |
|
1719 | childVNode.$elm$ = doc.createElement(childVNode.$tag$);
|
1720 | if (childVNode.$name$) {
|
1721 |
|
1722 | childVNode.$elm$.setAttribute('name', childVNode.$name$);
|
1723 | }
|
1724 |
|
1725 | node.parentNode.insertBefore(childVNode.$elm$, node);
|
1726 |
|
1727 | node.remove();
|
1728 | if (childVNode.$depth$ === '0') {
|
1729 | shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
|
1730 | }
|
1731 | }
|
1732 | slotNodes.push(childVNode);
|
1733 | if (!parentVNode.$children$) {
|
1734 | parentVNode.$children$ = [];
|
1735 | }
|
1736 | parentVNode.$children$[childVNode.$index$] = childVNode;
|
1737 | }
|
1738 | else if (childNodeType === CONTENT_REF_ID) {
|
1739 |
|
1740 | if (BUILD.shadowDom && shadowRootNodes) {
|
1741 |
|
1742 | node.remove();
|
1743 | }
|
1744 | else if (BUILD.slotRelocation) {
|
1745 | hostElm['s-cr'] = node;
|
1746 | node['s-cn'] = true;
|
1747 | }
|
1748 | }
|
1749 | }
|
1750 | }
|
1751 | }
|
1752 | else if (parentVNode && parentVNode.$tag$ === 'style') {
|
1753 | const vnode = newVNode(null, node.textContent);
|
1754 | vnode.$elm$ = node;
|
1755 | vnode.$index$ = '0';
|
1756 | parentVNode.$children$ = [vnode];
|
1757 | }
|
1758 | };
|
1759 | const initializeDocumentHydrate = (node, orgLocNodes) => {
|
1760 | if (node.nodeType === 1 ) {
|
1761 | let i = 0;
|
1762 | for (; i < node.childNodes.length; i++) {
|
1763 | initializeDocumentHydrate(node.childNodes[i], orgLocNodes);
|
1764 | }
|
1765 | if (node.shadowRoot) {
|
1766 | for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
|
1767 | initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
|
1768 | }
|
1769 | }
|
1770 | }
|
1771 | else if (node.nodeType === 8 ) {
|
1772 | const childIdSplt = node.nodeValue.split('.');
|
1773 | if (childIdSplt[0] === ORG_LOCATION_ID) {
|
1774 | orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
|
1775 | node.nodeValue = '';
|
1776 |
|
1777 |
|
1778 | node['s-en'] = childIdSplt[3];
|
1779 | }
|
1780 | }
|
1781 | };
|
1782 | const parsePropertyValue = (propValue, propType) => {
|
1783 |
|
1784 | if (propValue != null && !isComplexType(propValue)) {
|
1785 | if (BUILD.propBoolean && propType & 4 ) {
|
1786 |
|
1787 |
|
1788 | return propValue === 'false' ? false : propValue === '' || !!propValue;
|
1789 | }
|
1790 | if (BUILD.propNumber && propType & 2 ) {
|
1791 |
|
1792 | return parseFloat(propValue);
|
1793 | }
|
1794 | if (BUILD.propString && propType & 1 ) {
|
1795 |
|
1796 |
|
1797 | return String(propValue);
|
1798 | }
|
1799 |
|
1800 | return propValue;
|
1801 | }
|
1802 |
|
1803 |
|
1804 | return propValue;
|
1805 | };
|
1806 | const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
|
1807 | const setValue = (ref, propName, newVal, cmpMeta) => {
|
1808 |
|
1809 | const hostRef = getHostRef(ref);
|
1810 | const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : ref;
|
1811 | const oldVal = hostRef.$instanceValues$.get(propName);
|
1812 | const flags = hostRef.$flags$;
|
1813 | const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
|
1814 | newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
|
1815 | if ((!BUILD.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
|
1816 |
|
1817 |
|
1818 | hostRef.$instanceValues$.set(propName, newVal);
|
1819 | if (BUILD.isDev) {
|
1820 | if (hostRef.$flags$ & 1024 ) {
|
1821 | consoleDevWarn(`The state/prop "${propName}" changed during rendering. This can potentially lead to infinite-loops and other bugs.`, '\nElement', elm, '\nNew value', newVal, '\nOld value', oldVal);
|
1822 | }
|
1823 | else if (hostRef.$flags$ & 2048 ) {
|
1824 | consoleDevWarn(`The state/prop "${propName}" changed during "componentDidLoad()", this triggers extra re-renders, try to setup on "componentWillLoad()"`, '\nElement', elm, '\nNew value', newVal, '\nOld value', oldVal);
|
1825 | }
|
1826 | }
|
1827 | if (!BUILD.lazyLoad || instance) {
|
1828 |
|
1829 | if (BUILD.watchCallback && cmpMeta.$watchers$ && flags & 128 ) {
|
1830 | const watchMethods = cmpMeta.$watchers$[propName];
|
1831 | if (watchMethods) {
|
1832 |
|
1833 | watchMethods.map(watchMethodName => {
|
1834 | try {
|
1835 |
|
1836 | instance[watchMethodName](newVal, oldVal, propName);
|
1837 | }
|
1838 | catch (e) {
|
1839 | consoleError(e);
|
1840 | }
|
1841 | });
|
1842 | }
|
1843 | }
|
1844 | if (BUILD.updatable && (flags & (2 | 16 )) === 2 ) {
|
1845 | if (BUILD.cmpShouldUpdate && instance.componentShouldUpdate) {
|
1846 | if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
|
1847 | return;
|
1848 | }
|
1849 | }
|
1850 |
|
1851 |
|
1852 |
|
1853 |
|
1854 | scheduleUpdate(hostRef, false);
|
1855 | }
|
1856 | }
|
1857 | }
|
1858 | };
|
1859 | const proxyComponent = (Cstr, cmpMeta, flags) => {
|
1860 | if (BUILD.member && cmpMeta.$members$) {
|
1861 | if (BUILD.watchCallback && Cstr.watchers) {
|
1862 | cmpMeta.$watchers$ = Cstr.watchers;
|
1863 | }
|
1864 |
|
1865 | const members = Object.entries(cmpMeta.$members$);
|
1866 | const prototype = Cstr.prototype;
|
1867 | members.map(([memberName, [memberFlags]]) => {
|
1868 | if ((BUILD.prop || BUILD.state) && (memberFlags & 31 || ((!BUILD.lazyLoad || flags & 2 ) && memberFlags & 32 ))) {
|
1869 |
|
1870 | Object.defineProperty(prototype, memberName, {
|
1871 | get() {
|
1872 |
|
1873 | return getValue(this, memberName);
|
1874 | },
|
1875 | set(newValue) {
|
1876 | if (
|
1877 |
|
1878 | BUILD.isDev &&
|
1879 |
|
1880 | (flags & 1 ) === 0 &&
|
1881 |
|
1882 | (memberFlags & (31 | 1024 )) === 31 ) {
|
1883 | consoleDevWarn(`@Prop() "${memberName}" on "${cmpMeta.$tagName$}" cannot be modified.\nFurther information: https://stenciljs.com/docs/properties#prop-mutability`);
|
1884 | }
|
1885 |
|
1886 | setValue(this, memberName, newValue, cmpMeta);
|
1887 | },
|
1888 | configurable: true,
|
1889 | enumerable: true,
|
1890 | });
|
1891 | }
|
1892 | else if (BUILD.lazyLoad && BUILD.method && flags & 1 && memberFlags & 64 ) {
|
1893 |
|
1894 | Object.defineProperty(prototype, memberName, {
|
1895 | value(...args) {
|
1896 | const ref = getHostRef(this);
|
1897 | return ref.$onInstancePromise$.then(() => ref.$lazyInstance$[memberName](...args));
|
1898 | },
|
1899 | });
|
1900 | }
|
1901 | });
|
1902 | if (BUILD.observeAttribute && (!BUILD.lazyLoad || flags & 1 )) {
|
1903 | const attrNameToPropName = new Map();
|
1904 | prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
|
1905 | plt.jmp(() => {
|
1906 | const propName = attrNameToPropName.get(attrName);
|
1907 | this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
|
1908 | });
|
1909 | };
|
1910 |
|
1911 |
|
1912 | Cstr.observedAttributes = members
|
1913 | .filter(([_, m]) => m[0] & 15 )
|
1914 | .map(([propName, m]) => {
|
1915 | const attrName = m[1] || propName;
|
1916 | attrNameToPropName.set(attrName, propName);
|
1917 | if (BUILD.reflect && m[0] & 512 ) {
|
1918 | cmpMeta.$attrsToReflect$.push([propName, attrName]);
|
1919 | }
|
1920 | return attrName;
|
1921 | });
|
1922 | }
|
1923 | }
|
1924 | return Cstr;
|
1925 | };
|
1926 | const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
|
1927 |
|
1928 | if ((BUILD.lazyLoad || BUILD.hydrateServerSide || BUILD.style) && (hostRef.$flags$ & 32 ) === 0) {
|
1929 | if (BUILD.lazyLoad || BUILD.hydrateClientSide) {
|
1930 |
|
1931 | hostRef.$flags$ |= 32 ;
|
1932 |
|
1933 |
|
1934 |
|
1935 | Cstr = loadModule(cmpMeta, hostRef, hmrVersionId);
|
1936 | if (Cstr.then) {
|
1937 |
|
1938 | const endLoad = uniqueTime(`st:load:${cmpMeta.$tagName$}:${hostRef.$modeName$}`, `[Stencil] Load module for <${cmpMeta.$tagName$}>`);
|
1939 | Cstr = await Cstr;
|
1940 | endLoad();
|
1941 | }
|
1942 | if ((BUILD.isDev || BUILD.isDebug) && !Cstr) {
|
1943 | throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
|
1944 | }
|
1945 | if (BUILD.member && !Cstr.isProxied) {
|
1946 |
|
1947 |
|
1948 |
|
1949 | if (BUILD.watchCallback) {
|
1950 | cmpMeta.$watchers$ = Cstr.watchers;
|
1951 | }
|
1952 | proxyComponent(Cstr, cmpMeta, 2 );
|
1953 | Cstr.isProxied = true;
|
1954 | }
|
1955 | const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);
|
1956 |
|
1957 |
|
1958 |
|
1959 | if (BUILD.member) {
|
1960 | hostRef.$flags$ |= 8 ;
|
1961 | }
|
1962 |
|
1963 |
|
1964 |
|
1965 |
|
1966 | try {
|
1967 | new Cstr(hostRef);
|
1968 | }
|
1969 | catch (e) {
|
1970 | consoleError(e);
|
1971 | }
|
1972 | if (BUILD.member) {
|
1973 | hostRef.$flags$ &= ~8 ;
|
1974 | }
|
1975 | if (BUILD.watchCallback) {
|
1976 | hostRef.$flags$ |= 128 ;
|
1977 | }
|
1978 | endNewInstance();
|
1979 | fireConnectedCallback(hostRef.$lazyInstance$);
|
1980 | }
|
1981 | else {
|
1982 |
|
1983 | Cstr = elm.constructor;
|
1984 | hostRef.$flags$ |= 128 | 32 ;
|
1985 | }
|
1986 | if (BUILD.style && Cstr.style) {
|
1987 |
|
1988 | let style = Cstr.style;
|
1989 | if (BUILD.mode && typeof style !== 'string') {
|
1990 | style = style[(hostRef.$modeName$ = computeMode(elm))];
|
1991 | if (BUILD.hydrateServerSide && hostRef.$modeName$) {
|
1992 | elm.setAttribute('s-mode', hostRef.$modeName$);
|
1993 | }
|
1994 | }
|
1995 | const scopeId = getScopeId(cmpMeta, hostRef.$modeName$);
|
1996 | if (!styles.has(scopeId)) {
|
1997 | const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
|
1998 | if (!BUILD.hydrateServerSide && BUILD.shadowDom && BUILD.shadowDomShim && cmpMeta.$flags$ & 8 ) {
|
1999 | style = await __sc_import_bulmil('./shadow-css-14c84b0b.js').then(m => m.scopeCss(style, scopeId, false));
|
2000 | }
|
2001 | registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 ));
|
2002 | endRegisterStyles();
|
2003 | }
|
2004 | }
|
2005 | }
|
2006 |
|
2007 | const ancestorComponent = hostRef.$ancestorComponent$;
|
2008 | const schedule = () => scheduleUpdate(hostRef, true);
|
2009 | if (BUILD.asyncLoading && ancestorComponent && ancestorComponent['s-rc']) {
|
2010 |
|
2011 |
|
2012 |
|
2013 |
|
2014 |
|
2015 |
|
2016 | ancestorComponent['s-rc'].push(schedule);
|
2017 | }
|
2018 | else {
|
2019 | schedule();
|
2020 | }
|
2021 | };
|
2022 | const fireConnectedCallback = (instance) => {
|
2023 | if (BUILD.lazyLoad && BUILD.connectedCallback) {
|
2024 | safeCall(instance, 'connectedCallback');
|
2025 | }
|
2026 | };
|
2027 | const connectedCallback = (elm) => {
|
2028 | if ((plt.$flags$ & 1 ) === 0) {
|
2029 | const hostRef = getHostRef(elm);
|
2030 | const cmpMeta = hostRef.$cmpMeta$;
|
2031 | const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
|
2032 | if (BUILD.hostListenerTargetParent) {
|
2033 |
|
2034 | addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
|
2035 | }
|
2036 | if (!(hostRef.$flags$ & 1 )) {
|
2037 |
|
2038 | hostRef.$flags$ |= 1 ;
|
2039 | let hostId;
|
2040 | if (BUILD.hydrateClientSide) {
|
2041 | hostId = elm.getAttribute(HYDRATE_ID);
|
2042 | if (hostId) {
|
2043 | if (BUILD.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 ) {
|
2044 | const scopeId = BUILD.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute('s-mode')) : addStyle(elm.shadowRoot, cmpMeta);
|
2045 | elm.classList.remove(scopeId + '-h', scopeId + '-s');
|
2046 | }
|
2047 | initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
|
2048 | }
|
2049 | }
|
2050 | if (BUILD.slotRelocation && !hostId) {
|
2051 |
|
2052 |
|
2053 |
|
2054 |
|
2055 | if (BUILD.hydrateServerSide || ((BUILD.slot || BUILD.shadowDom) && cmpMeta.$flags$ & (4 | 8 ))) {
|
2056 | setContentReference(elm);
|
2057 | }
|
2058 | }
|
2059 | if (BUILD.asyncLoading) {
|
2060 |
|
2061 |
|
2062 | let ancestorComponent = elm;
|
2063 | while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
|
2064 |
|
2065 |
|
2066 | if ((BUILD.hydrateClientSide && ancestorComponent.nodeType === 1 && ancestorComponent.hasAttribute('s-id') && ancestorComponent['s-p']) ||
|
2067 | ancestorComponent['s-p']) {
|
2068 |
|
2069 |
|
2070 | attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
|
2071 | break;
|
2072 | }
|
2073 | }
|
2074 | }
|
2075 |
|
2076 |
|
2077 | if (BUILD.prop && BUILD.lazyLoad && !BUILD.hydrateServerSide && cmpMeta.$members$) {
|
2078 | Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
|
2079 | if (memberFlags & 31 && elm.hasOwnProperty(memberName)) {
|
2080 | const value = elm[memberName];
|
2081 | delete elm[memberName];
|
2082 | elm[memberName] = value;
|
2083 | }
|
2084 | });
|
2085 | }
|
2086 | if (BUILD.initializeNextTick) {
|
2087 |
|
2088 |
|
2089 |
|
2090 |
|
2091 | nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
|
2092 | }
|
2093 | else {
|
2094 | initializeComponent(elm, hostRef, cmpMeta);
|
2095 | }
|
2096 | }
|
2097 | else {
|
2098 |
|
2099 |
|
2100 |
|
2101 | addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
|
2102 |
|
2103 | fireConnectedCallback(hostRef.$lazyInstance$);
|
2104 | }
|
2105 | endConnected();
|
2106 | }
|
2107 | };
|
2108 | const setContentReference = (elm) => {
|
2109 |
|
2110 |
|
2111 |
|
2112 |
|
2113 |
|
2114 |
|
2115 | const contentRefElm = (elm['s-cr'] = doc.createComment(BUILD.isDebug ? `content-ref (host=${elm.localName})` : ''));
|
2116 | contentRefElm['s-cn'] = true;
|
2117 | elm.insertBefore(contentRefElm, elm.firstChild);
|
2118 | };
|
2119 | const disconnectedCallback = (elm) => {
|
2120 | if ((plt.$flags$ & 1 ) === 0) {
|
2121 | const hostRef = getHostRef(elm);
|
2122 | const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
|
2123 | if (BUILD.hostListener) {
|
2124 | if (hostRef.$rmListeners$) {
|
2125 | hostRef.$rmListeners$.map(rmListener => rmListener());
|
2126 | hostRef.$rmListeners$ = undefined;
|
2127 | }
|
2128 | }
|
2129 |
|
2130 | if (BUILD.cssVarShim && plt.$cssShim$) {
|
2131 | plt.$cssShim$.removeHost(elm);
|
2132 | }
|
2133 | if (BUILD.lazyLoad && BUILD.disconnectedCallback) {
|
2134 | safeCall(instance, 'disconnectedCallback');
|
2135 | }
|
2136 | if (BUILD.cmpDidUnload) {
|
2137 | safeCall(instance, 'componentDidUnload');
|
2138 | }
|
2139 | }
|
2140 | };
|
2141 | const defineCustomElement = (Cstr, compactMeta) => {
|
2142 | customElements.define(compactMeta[1], proxyCustomElement(Cstr, compactMeta));
|
2143 | };
|
2144 | const proxyCustomElement = (Cstr, compactMeta) => {
|
2145 | const cmpMeta = {
|
2146 | $flags$: compactMeta[0],
|
2147 | $tagName$: compactMeta[1],
|
2148 | };
|
2149 | if (BUILD.member) {
|
2150 | cmpMeta.$members$ = compactMeta[2];
|
2151 | }
|
2152 | if (BUILD.hostListener) {
|
2153 | cmpMeta.$listeners$ = compactMeta[3];
|
2154 | }
|
2155 | if (BUILD.watchCallback) {
|
2156 | cmpMeta.$watchers$ = Cstr.$watchers$;
|
2157 | }
|
2158 | if (BUILD.reflect) {
|
2159 | cmpMeta.$attrsToReflect$ = [];
|
2160 | }
|
2161 | if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 ) {
|
2162 | cmpMeta.$flags$ |= 8 ;
|
2163 | }
|
2164 | const originalConnectedCallback = Cstr.prototype.connectedCallback;
|
2165 | const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
|
2166 | Object.assign(Cstr.prototype, {
|
2167 | __registerHost() {
|
2168 | registerHost(this, cmpMeta);
|
2169 | },
|
2170 | connectedCallback() {
|
2171 | connectedCallback(this);
|
2172 | if (BUILD.connectedCallback && originalConnectedCallback) {
|
2173 | originalConnectedCallback.call(this);
|
2174 | }
|
2175 | },
|
2176 | disconnectedCallback() {
|
2177 | disconnectedCallback(this);
|
2178 | if (BUILD.disconnectedCallback && originalDisconnectedCallback) {
|
2179 | originalDisconnectedCallback.call(this);
|
2180 | }
|
2181 | },
|
2182 | });
|
2183 | Cstr.is = cmpMeta.$tagName$;
|
2184 | return proxyComponent(Cstr, cmpMeta, 1 | 2 );
|
2185 | };
|
2186 | const forceModeUpdate = (elm) => {
|
2187 | if (BUILD.style && BUILD.mode && !BUILD.lazyLoad) {
|
2188 | const mode = computeMode(elm);
|
2189 | const hostRef = getHostRef(elm);
|
2190 | if (hostRef.$modeName$ !== mode) {
|
2191 | const cmpMeta = hostRef.$cmpMeta$;
|
2192 | const oldScopeId = elm['s-sc'];
|
2193 | const scopeId = getScopeId(cmpMeta, mode);
|
2194 | const style = elm.constructor.style[mode];
|
2195 | const flags = cmpMeta.$flags$;
|
2196 | if (style) {
|
2197 | if (!styles.has(scopeId)) {
|
2198 | registerStyle(scopeId, style, !!(flags & 1 ));
|
2199 | }
|
2200 | hostRef.$modeName$ = mode;
|
2201 | elm.classList.remove(oldScopeId + '-h', oldScopeId + '-s');
|
2202 | attachStyles(hostRef);
|
2203 | forceUpdate(elm);
|
2204 | }
|
2205 | }
|
2206 | }
|
2207 | };
|
2208 | const attachShadow = (el) => {
|
2209 | if (supportsShadow) {
|
2210 | el.attachShadow({ mode: 'open' });
|
2211 | }
|
2212 | else {
|
2213 | el.shadowRoot = el;
|
2214 | }
|
2215 | };
|
2216 | const hmrStart = (elm, cmpMeta, hmrVersionId) => {
|
2217 |
|
2218 | const hostRef = getHostRef(elm);
|
2219 |
|
2220 | hostRef.$flags$ = 1 ;
|
2221 |
|
2222 |
|
2223 |
|
2224 |
|
2225 |
|
2226 | elm['s-hmr-load'] = () => {
|
2227 |
|
2228 | delete elm['s-hmr-load'];
|
2229 | };
|
2230 |
|
2231 | initializeComponent(elm, hostRef, cmpMeta, hmrVersionId);
|
2232 | };
|
2233 | const patchCloneNode = (HostElementPrototype) => {
|
2234 | const orgCloneNode = HostElementPrototype.cloneNode;
|
2235 | HostElementPrototype.cloneNode = function (deep) {
|
2236 | const srcNode = this;
|
2237 | const isShadowDom = BUILD.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
|
2238 | const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
|
2239 | if (BUILD.slot && !isShadowDom && deep) {
|
2240 | let i = 0;
|
2241 | let slotted;
|
2242 | for (; i < srcNode.childNodes.length; i++) {
|
2243 | slotted = srcNode.childNodes[i]['s-nr'];
|
2244 | if (slotted) {
|
2245 | if (BUILD.appendChildSlotFix && clonedNode.__appendChild) {
|
2246 | clonedNode.__appendChild(slotted.cloneNode(true));
|
2247 | }
|
2248 | else {
|
2249 | clonedNode.appendChild(slotted.cloneNode(true));
|
2250 | }
|
2251 | }
|
2252 | }
|
2253 | }
|
2254 | return clonedNode;
|
2255 | };
|
2256 | };
|
2257 | const patchSlotAppendChild = (HostElementPrototype) => {
|
2258 | HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
|
2259 | HostElementPrototype.appendChild = function (newChild) {
|
2260 | const slotName = (newChild['s-sn'] = getSlotName(newChild));
|
2261 | const slotNode = getHostSlotNode(this.childNodes, slotName);
|
2262 | if (slotNode) {
|
2263 | const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
|
2264 | const appendAfter = slotChildNodes[slotChildNodes.length - 1];
|
2265 | return appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
|
2266 | }
|
2267 | return this.__appendChild(newChild);
|
2268 | };
|
2269 | };
|
2270 | const patchChildSlotNodes = (elm, cmpMeta) => {
|
2271 | class FakeNodeList extends Array {
|
2272 | item(n) {
|
2273 | return this[n];
|
2274 | }
|
2275 | }
|
2276 | if (cmpMeta.$flags$ & 8 ) {
|
2277 | const childNodesFn = elm.__lookupGetter__('childNodes');
|
2278 | Object.defineProperty(elm, 'children', {
|
2279 | get() {
|
2280 | return this.childNodes.map((n) => n.nodeType === 1);
|
2281 | },
|
2282 | });
|
2283 | Object.defineProperty(elm, 'childElementCount', {
|
2284 | get() {
|
2285 | return elm.children.length;
|
2286 | },
|
2287 | });
|
2288 | Object.defineProperty(elm, 'childNodes', {
|
2289 | get() {
|
2290 | const childNodes = childNodesFn.call(this);
|
2291 | if ((plt.$flags$ & 1 ) === 0 && getHostRef(this).$flags$ & 2 ) {
|
2292 | const result = new FakeNodeList();
|
2293 | for (let i = 0; i < childNodes.length; i++) {
|
2294 | const slot = childNodes[i]['s-nr'];
|
2295 | if (slot) {
|
2296 | result.push(slot);
|
2297 | }
|
2298 | }
|
2299 | return result;
|
2300 | }
|
2301 | return FakeNodeList.from(childNodes);
|
2302 | },
|
2303 | });
|
2304 | }
|
2305 | };
|
2306 | const getSlotName = (node) => node['s-sn'] || (node.nodeType === 1 && node.getAttribute('slot')) || '';
|
2307 | const getHostSlotNode = (childNodes, slotName) => {
|
2308 | let i = 0;
|
2309 | let childNode;
|
2310 | for (; i < childNodes.length; i++) {
|
2311 | childNode = childNodes[i];
|
2312 | if (childNode['s-sr'] && childNode['s-sn'] === slotName) {
|
2313 | return childNode;
|
2314 | }
|
2315 | childNode = getHostSlotNode(childNode.childNodes, slotName);
|
2316 | if (childNode) {
|
2317 | return childNode;
|
2318 | }
|
2319 | }
|
2320 | return null;
|
2321 | };
|
2322 | const getHostSlotChildNodes = (n, slotName) => {
|
2323 | const childNodes = [n];
|
2324 | while ((n = n.nextSibling) && n['s-sn'] === slotName) {
|
2325 | childNodes.push(n);
|
2326 | }
|
2327 | return childNodes;
|
2328 | };
|
2329 | const bootstrapLazy = (lazyBundles, options = {}) => {
|
2330 | if (BUILD.profile && performance.mark) {
|
2331 | performance.mark('st:app:start');
|
2332 | }
|
2333 | installDevTools();
|
2334 | const endBootstrap = createTime('bootstrapLazy');
|
2335 | const cmpTags = [];
|
2336 | const exclude = options.exclude || [];
|
2337 | const customElements = win.customElements;
|
2338 | const head = doc.head;
|
2339 | const metaCharset = head.querySelector('meta[charset]');
|
2340 | const visibilityStyle = doc.createElement('style');
|
2341 | const deferredConnectedCallbacks = [];
|
2342 | const styles = doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
|
2343 | let appLoadFallback;
|
2344 | let isBootstrapping = true;
|
2345 | let i = 0;
|
2346 | Object.assign(plt, options);
|
2347 | plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
|
2348 | if (BUILD.asyncQueue) {
|
2349 | if (options.syncQueue) {
|
2350 | plt.$flags$ |= 4 ;
|
2351 | }
|
2352 | }
|
2353 | if (BUILD.hydrateClientSide) {
|
2354 |
|
2355 |
|
2356 | plt.$flags$ |= 2 ;
|
2357 | }
|
2358 | if (BUILD.hydrateClientSide && BUILD.shadowDom) {
|
2359 | for (; i < styles.length; i++) {
|
2360 | registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
|
2361 | }
|
2362 | }
|
2363 | lazyBundles.map(lazyBundle => lazyBundle[1].map(compactMeta => {
|
2364 | const cmpMeta = {
|
2365 | $flags$: compactMeta[0],
|
2366 | $tagName$: compactMeta[1],
|
2367 | $members$: compactMeta[2],
|
2368 | $listeners$: compactMeta[3],
|
2369 | };
|
2370 | if (BUILD.member) {
|
2371 | cmpMeta.$members$ = compactMeta[2];
|
2372 | }
|
2373 | if (BUILD.hostListener) {
|
2374 | cmpMeta.$listeners$ = compactMeta[3];
|
2375 | }
|
2376 | if (BUILD.reflect) {
|
2377 | cmpMeta.$attrsToReflect$ = [];
|
2378 | }
|
2379 | if (BUILD.watchCallback) {
|
2380 | cmpMeta.$watchers$ = {};
|
2381 | }
|
2382 | if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 ) {
|
2383 | cmpMeta.$flags$ |= 8 ;
|
2384 | }
|
2385 | const tagName = BUILD.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
|
2386 | const HostElement = class extends HTMLElement {
|
2387 |
|
2388 | constructor(self) {
|
2389 |
|
2390 | super(self);
|
2391 | self = this;
|
2392 | registerHost(self, cmpMeta);
|
2393 | if (BUILD.shadowDom && cmpMeta.$flags$ & 1 ) {
|
2394 |
|
2395 |
|
2396 |
|
2397 |
|
2398 | if (supportsShadow) {
|
2399 | if (BUILD.shadowDelegatesFocus) {
|
2400 | self.attachShadow({
|
2401 | mode: 'open',
|
2402 | delegatesFocus: !!(cmpMeta.$flags$ & 16 ),
|
2403 | });
|
2404 | }
|
2405 | else {
|
2406 | self.attachShadow({ mode: 'open' });
|
2407 | }
|
2408 | }
|
2409 | else if (!BUILD.hydrateServerSide && !('shadowRoot' in self)) {
|
2410 | self.shadowRoot = self;
|
2411 | }
|
2412 | }
|
2413 | if (BUILD.slotChildNodesFix) {
|
2414 | patchChildSlotNodes(self, cmpMeta);
|
2415 | }
|
2416 | }
|
2417 | connectedCallback() {
|
2418 | if (appLoadFallback) {
|
2419 | clearTimeout(appLoadFallback);
|
2420 | appLoadFallback = null;
|
2421 | }
|
2422 | if (isBootstrapping) {
|
2423 |
|
2424 | deferredConnectedCallbacks.push(this);
|
2425 | }
|
2426 | else {
|
2427 | plt.jmp(() => connectedCallback(this));
|
2428 | }
|
2429 | }
|
2430 | disconnectedCallback() {
|
2431 | plt.jmp(() => disconnectedCallback(this));
|
2432 | }
|
2433 | forceUpdate() {
|
2434 | if (BUILD.isDev) {
|
2435 | consoleDevWarn(`element.forceUpdate() is deprecated, use the "forceUpdate" function from "@stencil/core" instead:
|
2436 |
|
2437 | import { forceUpdate } from ‘@stencil/core’;
|
2438 |
|
2439 | forceUpdate(this);
|
2440 | forceUpdate(element);`);
|
2441 | }
|
2442 | forceUpdate(this);
|
2443 | }
|
2444 | componentOnReady() {
|
2445 | return getHostRef(this).$onReadyPromise$;
|
2446 | }
|
2447 | };
|
2448 | if (BUILD.cloneNodeFix) {
|
2449 | patchCloneNode(HostElement.prototype);
|
2450 | }
|
2451 | if (BUILD.appendChildSlotFix) {
|
2452 | patchSlotAppendChild(HostElement.prototype);
|
2453 | }
|
2454 | if (BUILD.hotModuleReplacement) {
|
2455 | HostElement.prototype['s-hmr'] = function (hmrVersionId) {
|
2456 | hmrStart(this, cmpMeta, hmrVersionId);
|
2457 | };
|
2458 | }
|
2459 | cmpMeta.$lazyBundleId$ = lazyBundle[0];
|
2460 | if (!exclude.includes(tagName) && !customElements.get(tagName)) {
|
2461 | cmpTags.push(tagName);
|
2462 | customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 ));
|
2463 | }
|
2464 | }));
|
2465 | if (BUILD.hydratedClass || BUILD.hydratedAttribute) {
|
2466 | visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
|
2467 | visibilityStyle.setAttribute('data-styles', '');
|
2468 | head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
|
2469 | }
|
2470 |
|
2471 | isBootstrapping = false;
|
2472 | if (deferredConnectedCallbacks.length) {
|
2473 | deferredConnectedCallbacks.map(host => host.connectedCallback());
|
2474 | }
|
2475 | else {
|
2476 | if (BUILD.profile) {
|
2477 | plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30, 'timeout')));
|
2478 | }
|
2479 | else {
|
2480 | plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30)));
|
2481 | }
|
2482 | }
|
2483 |
|
2484 | endBootstrap();
|
2485 | };
|
2486 | const getAssetPath = (path) => {
|
2487 | const assetUrl = new URL(path, plt.$resourcesUrl$);
|
2488 | return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
|
2489 | };
|
2490 | const setAssetPath = (path) => (plt.$resourcesUrl$ = path);
|
2491 | const getConnect = (_ref, tagName) => {
|
2492 | const componentOnReady = () => {
|
2493 | let elm = doc.querySelector(tagName);
|
2494 | if (!elm) {
|
2495 | elm = doc.createElement(tagName);
|
2496 | doc.body.appendChild(elm);
|
2497 | }
|
2498 | return typeof elm.componentOnReady === 'function' ? elm.componentOnReady() : Promise.resolve(elm);
|
2499 | };
|
2500 | const create = (...args) => {
|
2501 | return componentOnReady().then(el => el.create(...args));
|
2502 | };
|
2503 | return {
|
2504 | create,
|
2505 | componentOnReady,
|
2506 | };
|
2507 | };
|
2508 | const getContext = (_elm, context) => {
|
2509 | if (context in Context) {
|
2510 | return Context[context];
|
2511 | }
|
2512 | else if (context === 'window') {
|
2513 | return win;
|
2514 | }
|
2515 | else if (context === 'document') {
|
2516 | return doc;
|
2517 | }
|
2518 | else if (context === 'isServer' || context === 'isPrerender') {
|
2519 | return BUILD.hydrateServerSide ? true : false;
|
2520 | }
|
2521 | else if (context === 'isClient') {
|
2522 | return BUILD.hydrateServerSide ? false : true;
|
2523 | }
|
2524 | else if (context === 'resourcesUrl' || context === 'publicPath') {
|
2525 | return getAssetPath('.');
|
2526 | }
|
2527 | else if (context === 'queue') {
|
2528 | return {
|
2529 | write: writeTask,
|
2530 | read: readTask,
|
2531 | tick: {
|
2532 | then(cb) {
|
2533 | return nextTick(cb);
|
2534 | },
|
2535 | },
|
2536 | };
|
2537 | }
|
2538 | return undefined;
|
2539 | };
|
2540 | const insertVdomAnnotations = (doc, staticComponents) => {
|
2541 | if (doc != null) {
|
2542 | const docData = {
|
2543 | hostIds: 0,
|
2544 | rootLevelIds: 0,
|
2545 | staticComponents: new Set(staticComponents),
|
2546 | };
|
2547 | const orgLocationNodes = [];
|
2548 | parseVNodeAnnotations(doc, doc.body, docData, orgLocationNodes);
|
2549 | orgLocationNodes.forEach(orgLocationNode => {
|
2550 | if (orgLocationNode != null) {
|
2551 | const nodeRef = orgLocationNode['s-nr'];
|
2552 | let hostId = nodeRef['s-host-id'];
|
2553 | let nodeId = nodeRef['s-node-id'];
|
2554 | let childId = `${hostId}.${nodeId}`;
|
2555 | if (hostId == null) {
|
2556 | hostId = 0;
|
2557 | docData.rootLevelIds++;
|
2558 | nodeId = docData.rootLevelIds;
|
2559 | childId = `${hostId}.${nodeId}`;
|
2560 | if (nodeRef.nodeType === 1 ) {
|
2561 | nodeRef.setAttribute(HYDRATE_CHILD_ID, childId);
|
2562 | }
|
2563 | else if (nodeRef.nodeType === 3 ) {
|
2564 | if (hostId === 0) {
|
2565 | const textContent = nodeRef.nodeValue.trim();
|
2566 | if (textContent === '') {
|
2567 |
|
2568 | orgLocationNode.remove();
|
2569 | return;
|
2570 | }
|
2571 | }
|
2572 | const commentBeforeTextNode = doc.createComment(childId);
|
2573 | commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`;
|
2574 | nodeRef.parentNode.insertBefore(commentBeforeTextNode, nodeRef);
|
2575 | }
|
2576 | }
|
2577 | let orgLocationNodeId = `${ORG_LOCATION_ID}.${childId}`;
|
2578 | const orgLocationParentNode = orgLocationNode.parentElement;
|
2579 | if (orgLocationParentNode) {
|
2580 | if (orgLocationParentNode['s-en'] === '') {
|
2581 |
|
2582 |
|
2583 |
|
2584 | orgLocationNodeId += `.`;
|
2585 | }
|
2586 | else if (orgLocationParentNode['s-en'] === 'c') {
|
2587 |
|
2588 |
|
2589 |
|
2590 | orgLocationNodeId += `.c`;
|
2591 | }
|
2592 | }
|
2593 | orgLocationNode.nodeValue = orgLocationNodeId;
|
2594 | }
|
2595 | });
|
2596 | }
|
2597 | };
|
2598 | const parseVNodeAnnotations = (doc, node, docData, orgLocationNodes) => {
|
2599 | if (node == null) {
|
2600 | return;
|
2601 | }
|
2602 | if (node['s-nr'] != null) {
|
2603 | orgLocationNodes.push(node);
|
2604 | }
|
2605 | if (node.nodeType === 1 ) {
|
2606 | node.childNodes.forEach(childNode => {
|
2607 | const hostRef = getHostRef(childNode);
|
2608 | if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) {
|
2609 | const cmpData = {
|
2610 | nodeIds: 0,
|
2611 | };
|
2612 | insertVNodeAnnotations(doc, childNode, hostRef.$vnode$, docData, cmpData);
|
2613 | }
|
2614 | parseVNodeAnnotations(doc, childNode, docData, orgLocationNodes);
|
2615 | });
|
2616 | }
|
2617 | };
|
2618 | const insertVNodeAnnotations = (doc, hostElm, vnode, docData, cmpData) => {
|
2619 | if (vnode != null) {
|
2620 | const hostId = ++docData.hostIds;
|
2621 | hostElm.setAttribute(HYDRATE_ID, hostId);
|
2622 | if (hostElm['s-cr'] != null) {
|
2623 | hostElm['s-cr'].nodeValue = `${CONTENT_REF_ID}.${hostId}`;
|
2624 | }
|
2625 | if (vnode.$children$ != null) {
|
2626 | const depth = 0;
|
2627 | vnode.$children$.forEach((vnodeChild, index) => {
|
2628 | insertChildVNodeAnnotations(doc, vnodeChild, cmpData, hostId, depth, index);
|
2629 | });
|
2630 | }
|
2631 | if (hostElm && vnode && vnode.$elm$ && !hostElm.hasAttribute('c-id')) {
|
2632 | const parent = hostElm.parentElement;
|
2633 | if (parent && parent.childNodes) {
|
2634 | const parentChildNodes = Array.from(parent.childNodes);
|
2635 | const comment = parentChildNodes.find(node => node.nodeType === 8 && node['s-sr']);
|
2636 | if (comment) {
|
2637 | const index = parentChildNodes.indexOf(hostElm) - 1;
|
2638 | vnode.$elm$.setAttribute(HYDRATE_CHILD_ID, `${comment['s-host-id']}.${comment['s-node-id']}.0.${index}`);
|
2639 | }
|
2640 | }
|
2641 | }
|
2642 | }
|
2643 | };
|
2644 | const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, index) => {
|
2645 | const childElm = vnodeChild.$elm$;
|
2646 | if (childElm == null) {
|
2647 | return;
|
2648 | }
|
2649 | const nodeId = cmpData.nodeIds++;
|
2650 | const childId = `${hostId}.${nodeId}.${depth}.${index}`;
|
2651 | childElm['s-host-id'] = hostId;
|
2652 | childElm['s-node-id'] = nodeId;
|
2653 | if (childElm.nodeType === 1 ) {
|
2654 | childElm.setAttribute(HYDRATE_CHILD_ID, childId);
|
2655 | }
|
2656 | else if (childElm.nodeType === 3 ) {
|
2657 | const parentNode = childElm.parentNode;
|
2658 | if (parentNode.nodeName !== 'STYLE') {
|
2659 | const textNodeId = `${TEXT_NODE_ID}.${childId}`;
|
2660 | const commentBeforeTextNode = doc.createComment(textNodeId);
|
2661 | parentNode.insertBefore(commentBeforeTextNode, childElm);
|
2662 | }
|
2663 | }
|
2664 | else if (childElm.nodeType === 8 ) {
|
2665 | if (childElm['s-sr']) {
|
2666 | const slotName = childElm['s-sn'] || '';
|
2667 | const slotNodeId = `${SLOT_NODE_ID}.${childId}.${slotName}`;
|
2668 | childElm.nodeValue = slotNodeId;
|
2669 | }
|
2670 | }
|
2671 | if (vnodeChild.$children$ != null) {
|
2672 | const childDepth = depth + 1;
|
2673 | vnodeChild.$children$.forEach((vnode, index) => {
|
2674 | insertChildVNodeAnnotations(doc, vnode, cmpData, hostId, childDepth, index);
|
2675 | });
|
2676 | }
|
2677 | };
|
2678 | const hostRefs = new WeakMap();
|
2679 | const getHostRef = (ref) => hostRefs.get(ref);
|
2680 | const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
|
2681 | const registerHost = (elm, cmpMeta) => {
|
2682 | const hostRef = {
|
2683 | $flags$: 0,
|
2684 | $hostElement$: elm,
|
2685 | $cmpMeta$: cmpMeta,
|
2686 | $instanceValues$: new Map(),
|
2687 | };
|
2688 | if (BUILD.isDev) {
|
2689 | hostRef.$renderCount$ = 0;
|
2690 | }
|
2691 | if (BUILD.method && BUILD.lazyLoad) {
|
2692 | hostRef.$onInstancePromise$ = new Promise(r => (hostRef.$onInstanceResolve$ = r));
|
2693 | }
|
2694 | if (BUILD.asyncLoading) {
|
2695 | hostRef.$onReadyPromise$ = new Promise(r => (hostRef.$onReadyResolve$ = r));
|
2696 | elm['s-p'] = [];
|
2697 | elm['s-rc'] = [];
|
2698 | }
|
2699 | addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
|
2700 | return hostRefs.set(elm, hostRef);
|
2701 | };
|
2702 | const isMemberInElement = (elm, memberName) => memberName in elm;
|
2703 | const STENCIL_DEV_MODE = BUILD.isTesting
|
2704 | ? ['STENCIL:']
|
2705 | : ['%cstencil', 'color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px'];
|
2706 | const consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);
|
2707 | const consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
|
2708 | const consoleDevInfo = (...m) => console.info(...STENCIL_DEV_MODE, ...m);
|
2709 | const consoleError = (e) => console.error(e);
|
2710 | const cmpModules = new Map();
|
2711 | const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
2712 |
|
2713 | const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
|
2714 | const bundleId = cmpMeta.$lazyBundleId$;
|
2715 | if (BUILD.isDev && typeof bundleId !== 'string') {
|
2716 | consoleDevError(`Trying to lazily load component <${cmpMeta.$tagName$}> with style mode "${hostRef.$modeName$}", but it does not exist.`);
|
2717 | return undefined;
|
2718 | }
|
2719 | const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;
|
2720 | if (module) {
|
2721 | return module[exportName];
|
2722 | }
|
2723 | return __sc_import_bulmil(
|
2724 |
|
2725 |
|
2726 |
|
2727 | `./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''}`).then(importedModule => {
|
2728 | if (!BUILD.hotModuleReplacement) {
|
2729 | cmpModules.set(bundleId, importedModule);
|
2730 | }
|
2731 | return importedModule[exportName];
|
2732 | }, consoleError);
|
2733 | };
|
2734 | const styles = new Map();
|
2735 | const modeResolutionChain = [];
|
2736 | const queueDomReads = [];
|
2737 | const queueDomWrites = [];
|
2738 | const queueDomWritesLow = [];
|
2739 | const queueTask = (queue, write) => (cb) => {
|
2740 | queue.push(cb);
|
2741 | if (!queuePending) {
|
2742 | queuePending = true;
|
2743 | if (write && plt.$flags$ & 4 ) {
|
2744 | nextTick(flush);
|
2745 | }
|
2746 | else {
|
2747 | plt.raf(flush);
|
2748 | }
|
2749 | }
|
2750 | };
|
2751 | const consume = (queue) => {
|
2752 | for (let i = 0; i < queue.length; i++) {
|
2753 | try {
|
2754 | queue[i](performance.now());
|
2755 | }
|
2756 | catch (e) {
|
2757 | consoleError(e);
|
2758 | }
|
2759 | }
|
2760 | queue.length = 0;
|
2761 | };
|
2762 | const consumeTimeout = (queue, timeout) => {
|
2763 | let i = 0;
|
2764 | let ts = 0;
|
2765 | while (i < queue.length && (ts = performance.now()) < timeout) {
|
2766 | try {
|
2767 | queue[i++](ts);
|
2768 | }
|
2769 | catch (e) {
|
2770 | consoleError(e);
|
2771 | }
|
2772 | }
|
2773 | if (i === queue.length) {
|
2774 | queue.length = 0;
|
2775 | }
|
2776 | else if (i !== 0) {
|
2777 | queue.splice(0, i);
|
2778 | }
|
2779 | };
|
2780 | const flush = () => {
|
2781 | if (BUILD.asyncQueue) {
|
2782 | queueCongestion++;
|
2783 | }
|
2784 |
|
2785 |
|
2786 |
|
2787 | consume(queueDomReads);
|
2788 |
|
2789 | if (BUILD.asyncQueue) {
|
2790 | const timeout = (plt.$flags$ & 6 ) === 2 ? performance.now() + 14 * Math.ceil(queueCongestion * (1.0 / 10.0)) : Infinity;
|
2791 | consumeTimeout(queueDomWrites, timeout);
|
2792 | consumeTimeout(queueDomWritesLow, timeout);
|
2793 | if (queueDomWrites.length > 0) {
|
2794 | queueDomWritesLow.push(...queueDomWrites);
|
2795 | queueDomWrites.length = 0;
|
2796 | }
|
2797 | if ((queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0)) {
|
2798 |
|
2799 |
|
2800 | plt.raf(flush);
|
2801 | }
|
2802 | else {
|
2803 | queueCongestion = 0;
|
2804 | }
|
2805 | }
|
2806 | else {
|
2807 | consume(queueDomWrites);
|
2808 | if ((queuePending = queueDomReads.length > 0)) {
|
2809 |
|
2810 |
|
2811 | plt.raf(flush);
|
2812 | }
|
2813 | }
|
2814 | };
|
2815 | const nextTick = (cb) => promiseResolve().then(cb);
|
2816 | const readTask = queueTask(queueDomReads, false);
|
2817 | const writeTask = queueTask(queueDomWrites, true);
|
2818 | const Build = {
|
2819 | isDev: BUILD.isDev ? true : false,
|
2820 | isBrowser: true,
|
2821 | isServer: false,
|
2822 | isTesting: BUILD.isTesting ? true : false,
|
2823 | };
|
2824 |
|
2825 | export { BUILD as B, CSS as C, H, NAMESPACE as N, promiseResolve as a, bootstrapLazy as b, consoleDevInfo as c, doc as d, Host as e, h, plt as p, registerInstance as r, win as w };
|