@runopencode/rx-stencil 0.4.1 → 0.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/README.md +12 -11
  2. package/dist/cjs/app-globals-V2Kpy_OQ.js +5 -0
  3. package/dist/cjs/index-CbERigo8.js +1211 -0
  4. package/dist/cjs/index.cjs.js +166 -447
  5. package/dist/cjs/loader.cjs.js +4 -6
  6. package/dist/cjs/rx-async.cjs.entry.js +29 -63
  7. package/dist/cjs/rx-stencil.cjs.js +14 -14
  8. package/dist/cjs/set-property-BZHuI0P5.js +9525 -0
  9. package/dist/collection/collection-manifest.json +2 -2
  10. package/dist/collection/components/async/async.css +3 -0
  11. package/dist/collection/components/async/async.js +62 -61
  12. package/dist/collection/index.js +0 -1
  13. package/dist/collection/rx/decorator/index.js +0 -1
  14. package/dist/collection/rx/decorator/query-selector-all.js +26 -27
  15. package/dist/collection/rx/decorator/query-selector.js +32 -33
  16. package/dist/collection/rx/index.js +0 -1
  17. package/dist/collection/rx/observable/index.js +1 -1
  18. package/dist/collection/rx/observable/mutation-observable.js +8 -9
  19. package/dist/collection/rx/observable/properties-observable.js +13 -0
  20. package/dist/collection/rx/observable/property-observable.js +20 -21
  21. package/dist/collection/rx/observable/render-observable.js +15 -16
  22. package/dist/collection/rx/operator/index.js +0 -1
  23. package/dist/collection/rx/operator/schedule-render.js +9 -10
  24. package/dist/collection/rx/operator/to-property.js +8 -9
  25. package/dist/collection/rx/operator/until-disconnected.js +56 -57
  26. package/dist/collection/rx/subscriber/index.js +0 -1
  27. package/dist/collection/rx/subscriber/set-property.js +12 -13
  28. package/dist/collection/utils/get-property-descriptor.js +10 -11
  29. package/dist/collection/utils/index.js +0 -1
  30. package/dist/components/index.d.ts +2 -0
  31. package/dist/components/index.js +1 -562
  32. package/dist/components/rx-async.d.ts +2 -2
  33. package/dist/components/rx-async.js +1 -86
  34. package/dist/components/set-property.js +1 -1150
  35. package/dist/esm/app-globals-DQuL1Twl.js +3 -0
  36. package/dist/esm/index-BIBww8qU.js +1202 -0
  37. package/dist/esm/index.js +167 -447
  38. package/dist/esm/loader.js +5 -5
  39. package/dist/esm/rx-async.entry.js +29 -61
  40. package/dist/esm/rx-stencil.js +14 -13
  41. package/dist/esm/set-property-CpZKE-Xu.js +9520 -0
  42. package/dist/rx-stencil/index.esm.js +1 -2
  43. package/dist/rx-stencil/p-77100dee.entry.js +1 -0
  44. package/dist/rx-stencil/p-BIBww8qU.js +2 -0
  45. package/dist/rx-stencil/p-DQuL1Twl.js +1 -0
  46. package/dist/rx-stencil/p-IbpJ_cRo.js +1 -0
  47. package/dist/rx-stencil/rx-stencil.esm.js +1 -2
  48. package/dist/types/components/async/async.d.ts +5 -5
  49. package/dist/types/components.d.ts +7 -1
  50. package/dist/types/rx/decorator/query-selector-all.d.ts +9 -9
  51. package/dist/types/rx/decorator/query-selector.d.ts +9 -9
  52. package/dist/types/rx/observable/index.d.ts +1 -0
  53. package/dist/types/rx/observable/properties-observable.d.ts +6 -0
  54. package/dist/types/rx/subscriber/set-property.d.ts +12 -12
  55. package/dist/types/stencil-public-runtime.d.ts +225 -17
  56. package/docs/creation-operators.md +62 -3
  57. package/loader/cdn.js +1 -3
  58. package/loader/index.cjs.js +1 -3
  59. package/loader/index.d.ts +3 -0
  60. package/loader/index.es2017.js +1 -3
  61. package/loader/index.js +1 -3
  62. package/package.json +11 -10
  63. package/dist/cjs/index-5f6f12ab.js +0 -1265
  64. package/dist/cjs/index-5f6f12ab.js.map +0 -1
  65. package/dist/cjs/index.cjs.js.map +0 -1
  66. package/dist/cjs/loader.cjs.js.map +0 -1
  67. package/dist/cjs/rx-async.cjs.entry.js.map +0 -1
  68. package/dist/cjs/rx-stencil.cjs.js.map +0 -1
  69. package/dist/cjs/set-property-88176225.js +0 -1167
  70. package/dist/cjs/set-property-88176225.js.map +0 -1
  71. package/dist/collection/components/async/async.js.map +0 -1
  72. package/dist/collection/components/async/async.scss +0 -3
  73. package/dist/collection/index.js.map +0 -1
  74. package/dist/collection/rx/decorator/index.js.map +0 -1
  75. package/dist/collection/rx/decorator/query-selector-all.js.map +0 -1
  76. package/dist/collection/rx/decorator/query-selector.js.map +0 -1
  77. package/dist/collection/rx/index.js.map +0 -1
  78. package/dist/collection/rx/observable/index.js.map +0 -1
  79. package/dist/collection/rx/observable/mutation-observable.js.map +0 -1
  80. package/dist/collection/rx/observable/property-observable.js.map +0 -1
  81. package/dist/collection/rx/observable/render-observable.js.map +0 -1
  82. package/dist/collection/rx/operator/index.js.map +0 -1
  83. package/dist/collection/rx/operator/schedule-render.js.map +0 -1
  84. package/dist/collection/rx/operator/to-property.js.map +0 -1
  85. package/dist/collection/rx/operator/until-disconnected.js.map +0 -1
  86. package/dist/collection/rx/subscriber/index.js.map +0 -1
  87. package/dist/collection/rx/subscriber/set-property.js.map +0 -1
  88. package/dist/collection/utils/get-property-descriptor.js.map +0 -1
  89. package/dist/collection/utils/index.js.map +0 -1
  90. package/dist/components/index.js.map +0 -1
  91. package/dist/components/rx-async.js.map +0 -1
  92. package/dist/components/set-property.js.map +0 -1
  93. package/dist/esm/index-9102de09.js +0 -1236
  94. package/dist/esm/index-9102de09.js.map +0 -1
  95. package/dist/esm/index.js.map +0 -1
  96. package/dist/esm/loader.js.map +0 -1
  97. package/dist/esm/polyfills/core-js.js +0 -11
  98. package/dist/esm/polyfills/dom.js +0 -79
  99. package/dist/esm/polyfills/es5-html-element.js +0 -1
  100. package/dist/esm/polyfills/index.js +0 -34
  101. package/dist/esm/polyfills/system.js +0 -6
  102. package/dist/esm/rx-async.entry.js.map +0 -1
  103. package/dist/esm/rx-stencil.js.map +0 -1
  104. package/dist/esm/set-property-7fa82bef.js +0 -1150
  105. package/dist/esm/set-property-7fa82bef.js.map +0 -1
  106. package/dist/rx-stencil/index.esm.js.map +0 -1
  107. package/dist/rx-stencil/p-01af4414.entry.js +0 -2
  108. package/dist/rx-stencil/p-01af4414.entry.js.map +0 -1
  109. package/dist/rx-stencil/p-0cd0b2da.js +0 -2
  110. package/dist/rx-stencil/p-0cd0b2da.js.map +0 -1
  111. package/dist/rx-stencil/p-8411601b.js +0 -3
  112. package/dist/rx-stencil/p-8411601b.js.map +0 -1
  113. package/dist/rx-stencil/rx-stencil.esm.js.map +0 -1
  114. package/loader/package.json +0 -11
@@ -1,1236 +0,0 @@
1
- const NAMESPACE = 'rx-stencil';
2
-
3
- /**
4
- * Virtual DOM patching algorithm based on Snabbdom by
5
- * Simon Friis Vindum (@paldepind)
6
- * Licensed under the MIT License
7
- * https://github.com/snabbdom/snabbdom/blob/master/LICENSE
8
- *
9
- * Modified for Stencil's renderer and slot projection
10
- */
11
- let queuePending = false;
12
- const createTime = (fnName, tagName = '') => {
13
- {
14
- return () => {
15
- return;
16
- };
17
- }
18
- };
19
- const uniqueTime = (key, measureText) => {
20
- {
21
- return () => {
22
- return;
23
- };
24
- }
25
- };
26
- const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
27
- /**
28
- * Check whether a value is a 'complex type', defined here as an object or a
29
- * function.
30
- *
31
- * @param o the value to check
32
- * @returns whether it's a complex type or not
33
- */
34
- const isComplexType = (o) => {
35
- // https://jsperf.com/typeof-fn-object/5
36
- o = typeof o;
37
- return o === 'object' || o === 'function';
38
- };
39
- /**
40
- * Helper method for querying a `meta` tag that contains a nonce value
41
- * out of a DOM's head.
42
- *
43
- * @param doc The DOM containing the `head` to query against
44
- * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
45
- * exists or the tag has no content.
46
- */
47
- function queryNonceMetaTagContent(doc) {
48
- var _a, _b, _c;
49
- return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;
50
- }
51
- /**
52
- * Production h() function based on Preact by
53
- * Jason Miller (@developit)
54
- * Licensed under the MIT License
55
- * https://github.com/developit/preact/blob/master/LICENSE
56
- *
57
- * Modified for Stencil's compiler and vdom
58
- */
59
- // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
60
- // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
61
- const h = (nodeName, vnodeData, ...children) => {
62
- let child = null;
63
- let simple = false;
64
- let lastSimple = false;
65
- const vNodeChildren = [];
66
- const walk = (c) => {
67
- for (let i = 0; i < c.length; i++) {
68
- child = c[i];
69
- if (Array.isArray(child)) {
70
- walk(child);
71
- }
72
- else if (child != null && typeof child !== 'boolean') {
73
- if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {
74
- child = String(child);
75
- }
76
- if (simple && lastSimple) {
77
- // If the previous child was simple (string), we merge both
78
- vNodeChildren[vNodeChildren.length - 1].$text$ += child;
79
- }
80
- else {
81
- // Append a new vNode, if it's text, we create a text vNode
82
- vNodeChildren.push(simple ? newVNode(null, child) : child);
83
- }
84
- lastSimple = simple;
85
- }
86
- }
87
- };
88
- walk(children);
89
- const vnode = newVNode(nodeName, null);
90
- vnode.$attrs$ = vnodeData;
91
- if (vNodeChildren.length > 0) {
92
- vnode.$children$ = vNodeChildren;
93
- }
94
- return vnode;
95
- };
96
- /**
97
- * A utility function for creating a virtual DOM node from a tag and some
98
- * possible text content.
99
- *
100
- * @param tag the tag for this element
101
- * @param text possible text content for the node
102
- * @returns a newly-minted virtual DOM node
103
- */
104
- const newVNode = (tag, text) => {
105
- const vnode = {
106
- $flags$: 0,
107
- $tag$: tag,
108
- $text$: text,
109
- $elm$: null,
110
- $children$: null,
111
- };
112
- return vnode;
113
- };
114
- const Host = {};
115
- /**
116
- * Check whether a given node is a Host node or not
117
- *
118
- * @param node the virtual DOM node to check
119
- * @returns whether it's a Host node or not
120
- */
121
- const isHost = (node) => node && node.$tag$ === Host;
122
- /**
123
- * Parse a new property value for a given property type.
124
- *
125
- * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
126
- * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
127
- * 1. `any`, the type given to `propValue` in the function signature
128
- * 2. the type stored from `propType`.
129
- *
130
- * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
131
- *
132
- * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
133
- * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
134
- * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
135
- * ```tsx
136
- * <my-cmp prop-val={0}></my-cmp>
137
- * ```
138
- *
139
- * HTML prop values on the other hand, will always a string
140
- *
141
- * @param propValue the new value to coerce to some type
142
- * @param propType the type of the prop, expressed as a binary number
143
- * @returns the parsed/coerced value
144
- */
145
- const parsePropertyValue = (propValue, propType) => {
146
- // ensure this value is of the correct prop type
147
- if (propValue != null && !isComplexType(propValue)) {
148
- // redundant return here for better minification
149
- return propValue;
150
- }
151
- // not sure exactly what type we want
152
- // so no need to change to a different type
153
- return propValue;
154
- };
155
- const getElement = (ref) => (getHostRef(ref).$hostElement$ );
156
- /**
157
- * Helper function to create & dispatch a custom Event on a provided target
158
- * @param elm the target of the Event
159
- * @param name the name to give the custom Event
160
- * @param opts options for configuring a custom Event
161
- * @returns the custom Event
162
- */
163
- const emitEvent = (elm, name, opts) => {
164
- const ev = plt.ce(name, opts);
165
- elm.dispatchEvent(ev);
166
- return ev;
167
- };
168
- const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
169
- const registerStyle = (scopeId, cssText, allowCS) => {
170
- let style = styles.get(scopeId);
171
- if (supportsConstructableStylesheets && allowCS) {
172
- style = (style || new CSSStyleSheet());
173
- if (typeof style === 'string') {
174
- style = cssText;
175
- }
176
- else {
177
- style.replaceSync(cssText);
178
- }
179
- }
180
- else {
181
- style = cssText;
182
- }
183
- styles.set(scopeId, style);
184
- };
185
- const addStyle = (styleContainerNode, cmpMeta, mode) => {
186
- var _a;
187
- const scopeId = getScopeId(cmpMeta);
188
- const style = styles.get(scopeId);
189
- // if an element is NOT connected then getRootNode() will return the wrong root node
190
- // so the fallback is to always use the document for the root node in those cases
191
- styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
192
- if (style) {
193
- if (typeof style === 'string') {
194
- styleContainerNode = styleContainerNode.head || styleContainerNode;
195
- let appliedStyles = rootAppliedStyles.get(styleContainerNode);
196
- let styleElm;
197
- if (!appliedStyles) {
198
- rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
199
- }
200
- if (!appliedStyles.has(scopeId)) {
201
- {
202
- styleElm = doc.createElement('style');
203
- styleElm.innerHTML = style;
204
- // Apply CSP nonce to the style tag if it exists
205
- const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
206
- if (nonce != null) {
207
- styleElm.setAttribute('nonce', nonce);
208
- }
209
- styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
210
- }
211
- if (appliedStyles) {
212
- appliedStyles.add(scopeId);
213
- }
214
- }
215
- }
216
- else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
217
- styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
218
- }
219
- }
220
- return scopeId;
221
- };
222
- const attachStyles = (hostRef) => {
223
- const cmpMeta = hostRef.$cmpMeta$;
224
- const elm = hostRef.$hostElement$;
225
- const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
226
- addStyle(elm.getRootNode(), cmpMeta);
227
- endAttachStyles();
228
- };
229
- const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
230
- /**
231
- * Create a DOM Node corresponding to one of the children of a given VNode.
232
- *
233
- * @param oldParentVNode the parent VNode from the previous render
234
- * @param newParentVNode the parent VNode from the current render
235
- * @param childIndex the index of the VNode, in the _new_ parent node's
236
- * children, for which we will create a new DOM node
237
- * @param parentElm the parent DOM node which our new node will be a child of
238
- * @returns the newly created node
239
- */
240
- const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
241
- // tslint:disable-next-line: prefer-const
242
- const newVNode = newParentVNode.$children$[childIndex];
243
- let i = 0;
244
- let elm;
245
- let childNode;
246
- if (newVNode.$text$ !== null) {
247
- // create text node
248
- elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
249
- }
250
- else {
251
- // create element
252
- elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$));
253
- if (newVNode.$children$) {
254
- for (i = 0; i < newVNode.$children$.length; ++i) {
255
- // create the node
256
- childNode = createElm(oldParentVNode, newVNode, i);
257
- // return node could have been null
258
- if (childNode) {
259
- // append our new node
260
- elm.appendChild(childNode);
261
- }
262
- }
263
- }
264
- }
265
- return elm;
266
- };
267
- /**
268
- * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
269
- * add them to the DOM in the appropriate place.
270
- *
271
- * @param parentElm the DOM node which should be used as a parent for the new
272
- * DOM nodes
273
- * @param before a child of the `parentElm` which the new children should be
274
- * inserted before (optional)
275
- * @param parentVNode the parent virtual DOM node
276
- * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
277
- * @param startIdx the index in the child virtual DOM nodes at which to start
278
- * creating DOM nodes (inclusive)
279
- * @param endIdx the index in the child virtual DOM nodes at which to stop
280
- * creating DOM nodes (inclusive)
281
- */
282
- const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
283
- let containerElm = (parentElm);
284
- let childNode;
285
- for (; startIdx <= endIdx; ++startIdx) {
286
- if (vnodes[startIdx]) {
287
- childNode = createElm(null, parentVNode, startIdx);
288
- if (childNode) {
289
- vnodes[startIdx].$elm$ = childNode;
290
- containerElm.insertBefore(childNode, before);
291
- }
292
- }
293
- }
294
- };
295
- /**
296
- * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
297
- * This can be used to, for instance, clean up after a list of children which
298
- * should no longer be shown.
299
- *
300
- * This function also handles some of Stencil's slot relocation logic.
301
- *
302
- * @param vnodes a list of virtual DOM nodes to remove
303
- * @param startIdx the index at which to start removing nodes (inclusive)
304
- * @param endIdx the index at which to stop removing nodes (inclusive)
305
- */
306
- const removeVnodes = (vnodes, startIdx, endIdx) => {
307
- for (let index = startIdx; index <= endIdx; ++index) {
308
- const vnode = vnodes[index];
309
- if (vnode) {
310
- const elm = vnode.$elm$;
311
- if (elm) {
312
- // remove the vnode's element from the dom
313
- elm.remove();
314
- }
315
- }
316
- }
317
- };
318
- /**
319
- * Reconcile the children of a new VNode with the children of an old VNode by
320
- * traversing the two collections of children, identifying nodes that are
321
- * conserved or changed, calling out to `patch` to make any necessary
322
- * updates to the DOM, and rearranging DOM nodes as needed.
323
- *
324
- * The algorithm for reconciling children works by analyzing two 'windows' onto
325
- * the two arrays of children (`oldCh` and `newCh`). We keep track of the
326
- * 'windows' by storing start and end indices and references to the
327
- * corresponding array entries. Initially the two 'windows' are basically equal
328
- * to the entire array, but we progressively narrow the windows until there are
329
- * no children left to update by doing the following:
330
- *
331
- * 1. Skip any `null` entries at the beginning or end of the two arrays, so
332
- * that if we have an initial array like the following we'll end up dealing
333
- * only with a window bounded by the highlighted elements:
334
- *
335
- * [null, null, VNode1 , ... , VNode2, null, null]
336
- * ^^^^^^ ^^^^^^
337
- *
338
- * 2. Check to see if the elements at the head and tail positions are equal
339
- * across the windows. This will basically detect elements which haven't
340
- * been added, removed, or changed position, i.e. if you had the following
341
- * VNode elements (represented as HTML):
342
- *
343
- * oldVNode: `<div><p><span>HEY</span></p></div>`
344
- * newVNode: `<div><p><span>THERE</span></p></div>`
345
- *
346
- * Then when comparing the children of the `<div>` tag we check the equality
347
- * of the VNodes corresponding to the `<p>` tags and, since they are the
348
- * same tag in the same position, we'd be able to avoid completely
349
- * re-rendering the subtree under them with a new DOM element and would just
350
- * call out to `patch` to handle reconciling their children and so on.
351
- *
352
- * 3. Check, for both windows, to see if the element at the beginning of the
353
- * window corresponds to the element at the end of the other window. This is
354
- * a heuristic which will let us identify _some_ situations in which
355
- * elements have changed position, for instance it _should_ detect that the
356
- * children nodes themselves have not changed but merely moved in the
357
- * following example:
358
- *
359
- * oldVNode: `<div><element-one /><element-two /></div>`
360
- * newVNode: `<div><element-two /><element-one /></div>`
361
- *
362
- * If we find cases like this then we also need to move the concrete DOM
363
- * elements corresponding to the moved children to write the re-order to the
364
- * DOM.
365
- *
366
- * 4. Finally, if VNodes have the `key` attribute set on them we check for any
367
- * nodes in the old children which have the same key as the first element in
368
- * our window on the new children. If we find such a node we handle calling
369
- * out to `patch`, moving relevant DOM nodes, and so on, in accordance with
370
- * what we find.
371
- *
372
- * Finally, once we've narrowed our 'windows' to the point that either of them
373
- * collapse (i.e. they have length 0) we then handle any remaining VNode
374
- * insertion or deletion that needs to happen to get a DOM state that correctly
375
- * reflects the new child VNodes. If, for instance, after our window on the old
376
- * children has collapsed we still have more nodes on the new children that
377
- * we haven't dealt with yet then we need to add them, or if the new children
378
- * collapse but we still have unhandled _old_ children then we need to make
379
- * sure the corresponding DOM nodes are removed.
380
- *
381
- * @param parentElm the node into which the parent VNode is rendered
382
- * @param oldCh the old children of the parent node
383
- * @param newVNode the new VNode which will replace the parent
384
- * @param newCh the new children of the parent node
385
- */
386
- const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
387
- let oldStartIdx = 0;
388
- let newStartIdx = 0;
389
- let oldEndIdx = oldCh.length - 1;
390
- let oldStartVnode = oldCh[0];
391
- let oldEndVnode = oldCh[oldEndIdx];
392
- let newEndIdx = newCh.length - 1;
393
- let newStartVnode = newCh[0];
394
- let newEndVnode = newCh[newEndIdx];
395
- let node;
396
- while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
397
- if (oldStartVnode == null) {
398
- // VNode might have been moved left
399
- oldStartVnode = oldCh[++oldStartIdx];
400
- }
401
- else if (oldEndVnode == null) {
402
- oldEndVnode = oldCh[--oldEndIdx];
403
- }
404
- else if (newStartVnode == null) {
405
- newStartVnode = newCh[++newStartIdx];
406
- }
407
- else if (newEndVnode == null) {
408
- newEndVnode = newCh[--newEndIdx];
409
- }
410
- else if (isSameVnode(oldStartVnode, newStartVnode)) {
411
- // if the start nodes are the same then we should patch the new VNode
412
- // onto the old one, and increment our `newStartIdx` and `oldStartIdx`
413
- // indices to reflect that. We don't need to move any DOM Nodes around
414
- // since things are matched up in order.
415
- patch(oldStartVnode, newStartVnode);
416
- oldStartVnode = oldCh[++oldStartIdx];
417
- newStartVnode = newCh[++newStartIdx];
418
- }
419
- else if (isSameVnode(oldEndVnode, newEndVnode)) {
420
- // likewise, if the end nodes are the same we patch new onto old and
421
- // decrement our end indices, and also likewise in this case we don't
422
- // need to move any DOM Nodes.
423
- patch(oldEndVnode, newEndVnode);
424
- oldEndVnode = oldCh[--oldEndIdx];
425
- newEndVnode = newCh[--newEndIdx];
426
- }
427
- else if (isSameVnode(oldStartVnode, newEndVnode)) {
428
- patch(oldStartVnode, newEndVnode);
429
- // We need to move the element for `oldStartVnode` into a position which
430
- // will be appropriate for `newEndVnode`. For this we can use
431
- // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
432
- // sibling for `oldEndVnode.$elm$` then we want to move the DOM node for
433
- // `oldStartVnode` between `oldEndVnode` and it's sibling, like so:
434
- //
435
- // <old-start-node />
436
- // <some-intervening-node />
437
- // <old-end-node />
438
- // <!-- -> <-- `oldStartVnode.$elm$` should be inserted here
439
- // <next-sibling />
440
- //
441
- // If instead `oldEndVnode.$elm$` has no sibling then we just want to put
442
- // the node for `oldStartVnode` at the end of the children of
443
- // `parentElm`. Luckily, `Node.nextSibling` will return `null` if there
444
- // aren't any siblings, and passing `null` to `Node.insertBefore` will
445
- // append it to the children of the parent element.
446
- parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
447
- oldStartVnode = oldCh[++oldStartIdx];
448
- newEndVnode = newCh[--newEndIdx];
449
- }
450
- else if (isSameVnode(oldEndVnode, newStartVnode)) {
451
- patch(oldEndVnode, newStartVnode);
452
- // We've already checked above if `oldStartVnode` and `newStartVnode` are
453
- // the same node, so since we're here we know that they are not. Thus we
454
- // can move the element for `oldEndVnode` _before_ the element for
455
- // `oldStartVnode`, leaving `oldStartVnode` to be reconciled in the
456
- // future.
457
- parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
458
- oldEndVnode = oldCh[--oldEndIdx];
459
- newStartVnode = newCh[++newStartIdx];
460
- }
461
- else {
462
- {
463
- // We either didn't find an element in the old children that matches
464
- // the key of the first new child OR the build is not using `key`
465
- // attributes at all. In either case we need to create a new element
466
- // for the new node.
467
- node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
468
- newStartVnode = newCh[++newStartIdx];
469
- }
470
- if (node) {
471
- // if we created a new node then handle inserting it to the DOM
472
- {
473
- oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
474
- }
475
- }
476
- }
477
- }
478
- if (oldStartIdx > oldEndIdx) {
479
- // we have some more new nodes to add which don't match up with old nodes
480
- addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
481
- }
482
- else if (newStartIdx > newEndIdx) {
483
- // there are nodes in the `oldCh` array which no longer correspond to nodes
484
- // in the new array, so lets remove them (which entails cleaning up the
485
- // relevant DOM nodes)
486
- removeVnodes(oldCh, oldStartIdx, oldEndIdx);
487
- }
488
- };
489
- /**
490
- * Compare two VNodes to determine if they are the same
491
- *
492
- * **NB**: This function is an equality _heuristic_ based on the available
493
- * information set on the two VNodes and can be misleading under certain
494
- * circumstances. In particular, if the two nodes do not have `key` attrs
495
- * (available under `$key$` on VNodes) then the function falls back on merely
496
- * checking that they have the same tag.
497
- *
498
- * So, in other words, if `key` attrs are not set on VNodes which may be
499
- * changing order within a `children` array or something along those lines then
500
- * we could obtain a false negative and then have to do needless re-rendering
501
- * (i.e. we'd say two VNodes aren't equal when in fact they should be).
502
- *
503
- * @param leftVNode the first VNode to check
504
- * @param rightVNode the second VNode to check
505
- * @returns whether they're equal or not
506
- */
507
- const isSameVnode = (leftVNode, rightVNode) => {
508
- // compare if two vnode to see if they're "technically" the same
509
- // need to have the same element tag, and same key to be the same
510
- if (leftVNode.$tag$ === rightVNode.$tag$) {
511
- return true;
512
- }
513
- return false;
514
- };
515
- /**
516
- * Handle reconciling an outdated VNode with a new one which corresponds to
517
- * it. This function handles flushing updates to the DOM and reconciling the
518
- * children of the two nodes (if any).
519
- *
520
- * @param oldVNode an old VNode whose DOM element and children we want to update
521
- * @param newVNode a new VNode representing an updated version of the old one
522
- */
523
- const patch = (oldVNode, newVNode) => {
524
- const elm = (newVNode.$elm$ = oldVNode.$elm$);
525
- const oldChildren = oldVNode.$children$;
526
- const newChildren = newVNode.$children$;
527
- const text = newVNode.$text$;
528
- if (text === null) {
529
- if (oldChildren !== null && newChildren !== null) {
530
- // looks like there's child vnodes for both the old and new vnodes
531
- // so we need to call `updateChildren` to reconcile them
532
- updateChildren(elm, oldChildren, newVNode, newChildren);
533
- }
534
- else if (newChildren !== null) {
535
- // no old child vnodes, but there are new child vnodes to add
536
- if (oldVNode.$text$ !== null) {
537
- // the old vnode was text, so be sure to clear it out
538
- elm.textContent = '';
539
- }
540
- // add the new vnode children
541
- addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
542
- }
543
- else if (oldChildren !== null) {
544
- // no new child vnodes, but there are old child vnodes to remove
545
- removeVnodes(oldChildren, 0, oldChildren.length - 1);
546
- }
547
- }
548
- else if (oldVNode.$text$ !== text) {
549
- // update the text content for the text only vnode
550
- // and also only if the text is different than before
551
- elm.data = text;
552
- }
553
- };
554
- /**
555
- * The main entry point for Stencil's virtual DOM-based rendering engine
556
- *
557
- * Given a {@link d.HostRef} container and some virtual DOM nodes, this
558
- * function will handle creating a virtual DOM tree with a single root, patching
559
- * the current virtual DOM tree onto an old one (if any), dealing with slot
560
- * relocation, and reflecting attributes.
561
- *
562
- * @param hostRef data needed to root and render the virtual DOM tree, such as
563
- * the DOM node into which it should be rendered.
564
- * @param renderFnResults the virtual DOM nodes to be rendered
565
- * @param isInitialLoad whether or not this is the first call after page load
566
- */
567
- const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
568
- const hostElm = hostRef.$hostElement$;
569
- const oldVNode = hostRef.$vnode$ || newVNode(null, null);
570
- // if `renderFnResults` is a Host node then we can use it directly. If not,
571
- // we need to call `h` again to wrap the children of our component in a
572
- // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
573
- // implicitly that the top-level vdom node is 1) an only child and 2)
574
- // contains attrs that need to be set on the host element.
575
- const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
576
- // On the first render and *only* on the first render we want to check for
577
- // any attributes set on the host element which are also set on the vdom
578
- // node. If we find them, we override the value on the VDom node attrs with
579
- // the value from the host element, which allows developers building apps
580
- // with Stencil components to override e.g. the `role` attribute on a
581
- // component even if it's already set on the `Host`.
582
- if (isInitialLoad && rootVnode.$attrs$) {
583
- for (const key of Object.keys(rootVnode.$attrs$)) {
584
- // We have a special implementation in `setAccessor` for `style` and
585
- // `class` which reconciles values coming from the VDom with values
586
- // already present on the DOM element, so we don't want to override those
587
- // attributes on the VDom tree with values from the host element if they
588
- // are present.
589
- //
590
- // Likewise, `ref` and `key` are special internal values for the Stencil
591
- // runtime and we don't want to override those either.
592
- if (hostElm.hasAttribute(key) && !['key', 'ref', 'style', 'class'].includes(key)) {
593
- rootVnode.$attrs$[key] = hostElm[key];
594
- }
595
- }
596
- }
597
- rootVnode.$tag$ = null;
598
- rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
599
- hostRef.$vnode$ = rootVnode;
600
- rootVnode.$elm$ = oldVNode.$elm$ = (hostElm);
601
- // synchronous patch
602
- patch(oldVNode, rootVnode);
603
- };
604
- const attachToAncestor = (hostRef, ancestorComponent) => {
605
- if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
606
- ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
607
- }
608
- };
609
- const scheduleUpdate = (hostRef, isInitialLoad) => {
610
- {
611
- hostRef.$flags$ |= 16 /* HOST_FLAGS.isQueuedForUpdate */;
612
- }
613
- if (hostRef.$flags$ & 4 /* HOST_FLAGS.isWaitingForChildren */) {
614
- hostRef.$flags$ |= 512 /* HOST_FLAGS.needsRerender */;
615
- return;
616
- }
617
- attachToAncestor(hostRef, hostRef.$ancestorComponent$);
618
- // there is no ancestor component or the ancestor component
619
- // has already fired off its lifecycle update then
620
- // fire off the initial update
621
- const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
622
- return writeTask(dispatch) ;
623
- };
624
- /**
625
- * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
626
- * component lifecycle methods like `componentWillLoad` as well as
627
- * {@link updateComponent}, which will kick off the virtual DOM re-render.
628
- *
629
- * @param hostRef a reference to a host DOM node
630
- * @param isInitialLoad whether we're on the initial load or not
631
- * @returns an empty Promise which is used to enqueue a series of operations for
632
- * the component
633
- */
634
- const dispatchHooks = (hostRef, isInitialLoad) => {
635
- const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
636
- const instance = hostRef.$lazyInstance$ ;
637
- // We're going to use this variable together with `enqueue` to implement a
638
- // little promise-based queue. We start out with it `undefined`. When we add
639
- // the first function to the queue we'll set this variable to be that
640
- // function's return value. When we attempt to add subsequent values to the
641
- // queue we'll check that value and, if it was a `Promise`, we'll then chain
642
- // the new function off of that `Promise` using `.then()`. This will give our
643
- // queue two nice properties:
644
- //
645
- // 1. If all functions added to the queue are synchronous they'll be called
646
- // synchronously right away.
647
- // 2. If all functions added to the queue are asynchronous they'll all be
648
- // called in order after `dispatchHooks` exits.
649
- let maybePromise;
650
- endSchedule();
651
- return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
652
- };
653
- /**
654
- * This function uses a Promise to implement a simple first-in, first-out queue
655
- * of functions to be called.
656
- *
657
- * The queue is ordered on the basis of the first argument. If it's
658
- * `undefined`, then nothing is on the queue yet, so the provided function can
659
- * be called synchronously (although note that this function may return a
660
- * `Promise`). The idea is that then the return value of that enqueueing
661
- * operation is kept around, so that if it was a `Promise` then subsequent
662
- * functions can be enqueued by calling this function again with that `Promise`
663
- * as the first argument.
664
- *
665
- * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
666
- * @param fn a function to enqueue
667
- * @returns either a `Promise` or the return value of the provided function
668
- */
669
- const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
670
- /**
671
- * Check that a value is a `Promise`. To check, we first see if the value is an
672
- * instance of the `Promise` global. In a few circumstances, in particular if
673
- * the global has been overwritten, this is could be misleading, so we also do
674
- * a little 'duck typing' check to see if the `.then` property of the value is
675
- * defined and a function.
676
- *
677
- * @param maybePromise it might be a promise!
678
- * @returns whether it is or not
679
- */
680
- const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
681
- (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
682
- /**
683
- * Update a component given reference to its host elements and so on.
684
- *
685
- * @param hostRef an object containing references to the element's host node,
686
- * VDom nodes, and other metadata
687
- * @param instance a reference to the underlying host element where it will be
688
- * rendered
689
- * @param isInitialLoad whether or not this function is being called as part of
690
- * the first render cycle
691
- */
692
- const updateComponent = async (hostRef, instance, isInitialLoad) => {
693
- var _a;
694
- const elm = hostRef.$hostElement$;
695
- const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
696
- const rc = elm['s-rc'];
697
- if (isInitialLoad) {
698
- // DOM WRITE!
699
- attachStyles(hostRef);
700
- }
701
- const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
702
- {
703
- callRender(hostRef, instance, elm, isInitialLoad);
704
- }
705
- if (rc) {
706
- // ok, so turns out there are some child host elements
707
- // waiting on this parent element to load
708
- // let's fire off all update callbacks waiting
709
- rc.map((cb) => cb());
710
- elm['s-rc'] = undefined;
711
- }
712
- endRender();
713
- endUpdate();
714
- {
715
- const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
716
- const postUpdate = () => postUpdateComponent(hostRef);
717
- if (childrenPromises.length === 0) {
718
- postUpdate();
719
- }
720
- else {
721
- Promise.all(childrenPromises).then(postUpdate);
722
- hostRef.$flags$ |= 4 /* HOST_FLAGS.isWaitingForChildren */;
723
- childrenPromises.length = 0;
724
- }
725
- }
726
- };
727
- /**
728
- * Handle making the call to the VDom renderer with the proper context given
729
- * various build variables
730
- *
731
- * @param hostRef an object containing references to the element's host node,
732
- * VDom nodes, and other metadata
733
- * @param instance a reference to the underlying host element where it will be
734
- * rendered
735
- * @param elm the Host element for the component
736
- * @param isInitialLoad whether or not this function is being called as part of
737
- * @returns an empty promise
738
- */
739
- const callRender = (hostRef, instance, elm, isInitialLoad) => {
740
- try {
741
- instance = instance.render() ;
742
- {
743
- hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
744
- }
745
- {
746
- hostRef.$flags$ |= 2 /* HOST_FLAGS.hasRendered */;
747
- }
748
- {
749
- {
750
- // looks like we've got child nodes to render into this host element
751
- // or we need to update the css class/attrs on the host element
752
- // DOM WRITE!
753
- {
754
- renderVdom(hostRef, instance, isInitialLoad);
755
- }
756
- }
757
- }
758
- }
759
- catch (e) {
760
- consoleError(e, hostRef.$hostElement$);
761
- }
762
- return null;
763
- };
764
- const postUpdateComponent = (hostRef) => {
765
- const tagName = hostRef.$cmpMeta$.$tagName$;
766
- const elm = hostRef.$hostElement$;
767
- const endPostUpdate = createTime('postUpdate', tagName);
768
- const ancestorComponent = hostRef.$ancestorComponent$;
769
- if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
770
- hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
771
- {
772
- // DOM WRITE!
773
- addHydratedFlag(elm);
774
- }
775
- endPostUpdate();
776
- {
777
- hostRef.$onReadyResolve$(elm);
778
- if (!ancestorComponent) {
779
- appDidLoad();
780
- }
781
- }
782
- }
783
- else {
784
- endPostUpdate();
785
- }
786
- // load events fire from bottom to top
787
- // the deepest elements load first then bubbles up
788
- {
789
- if (hostRef.$onRenderResolve$) {
790
- hostRef.$onRenderResolve$();
791
- hostRef.$onRenderResolve$ = undefined;
792
- }
793
- if (hostRef.$flags$ & 512 /* HOST_FLAGS.needsRerender */) {
794
- nextTick(() => scheduleUpdate(hostRef, false));
795
- }
796
- hostRef.$flags$ &= ~(4 /* HOST_FLAGS.isWaitingForChildren */ | 512 /* HOST_FLAGS.needsRerender */);
797
- }
798
- // ( •_•)
799
- // ( •_•)>⌐■-■
800
- // (⌐■_■)
801
- };
802
- const forceUpdate = (ref) => {
803
- {
804
- const hostRef = getHostRef(ref);
805
- const isConnected = hostRef.$hostElement$.isConnected;
806
- if (isConnected &&
807
- (hostRef.$flags$ & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
808
- scheduleUpdate(hostRef, false);
809
- }
810
- // Returns "true" when the forced update was successfully scheduled
811
- return isConnected;
812
- }
813
- };
814
- const appDidLoad = (who) => {
815
- // on appload
816
- // we have finish the first big initial render
817
- {
818
- addHydratedFlag(doc.documentElement);
819
- }
820
- nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
821
- };
822
- const safeCall = (instance, method, arg) => {
823
- if (instance && instance[method]) {
824
- try {
825
- return instance[method](arg);
826
- }
827
- catch (e) {
828
- consoleError(e);
829
- }
830
- }
831
- return undefined;
832
- };
833
- const addHydratedFlag = (elm) => elm.classList.add('hydrated')
834
- ;
835
- const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
836
- const setValue = (ref, propName, newVal, cmpMeta) => {
837
- // check our new property value against our internal value
838
- const hostRef = getHostRef(ref);
839
- const oldVal = hostRef.$instanceValues$.get(propName);
840
- const flags = hostRef.$flags$;
841
- const instance = hostRef.$lazyInstance$ ;
842
- newVal = parsePropertyValue(newVal);
843
- // explicitly check for NaN on both sides, as `NaN === NaN` is always false
844
- const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
845
- const didValueChange = newVal !== oldVal && !areBothNaN;
846
- if ((!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) || oldVal === undefined) && didValueChange) {
847
- // gadzooks! the property's value has changed!!
848
- // set our new value!
849
- hostRef.$instanceValues$.set(propName, newVal);
850
- if (instance) {
851
- if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
852
- // looks like this value actually changed, so we've got work to do!
853
- // but only if we've already rendered, otherwise just chill out
854
- // queue that we need to do an update, but don't worry about queuing
855
- // up millions cuz this function ensures it only runs once
856
- scheduleUpdate(hostRef, false);
857
- }
858
- }
859
- }
860
- };
861
- /**
862
- * Attach a series of runtime constructs to a compiled Stencil component
863
- * constructor, including getters and setters for the `@Prop` and `@State`
864
- * decorators, callbacks for when attributes change, and so on.
865
- *
866
- * @param Cstr the constructor for a component that we need to process
867
- * @param cmpMeta metadata collected previously about the component
868
- * @param flags a number used to store a series of bit flags
869
- * @returns a reference to the same constructor passed in (but now mutated)
870
- */
871
- const proxyComponent = (Cstr, cmpMeta, flags) => {
872
- if (cmpMeta.$members$) {
873
- // It's better to have a const than two Object.entries()
874
- const members = Object.entries(cmpMeta.$members$);
875
- const prototype = Cstr.prototype;
876
- members.map(([memberName, [memberFlags]]) => {
877
- if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
878
- ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
879
- // proxyComponent - prop
880
- Object.defineProperty(prototype, memberName, {
881
- get() {
882
- // proxyComponent, get value
883
- return getValue(this, memberName);
884
- },
885
- set(newValue) {
886
- // proxyComponent, set value
887
- setValue(this, memberName, newValue);
888
- },
889
- configurable: true,
890
- enumerable: true,
891
- });
892
- }
893
- });
894
- }
895
- return Cstr;
896
- };
897
- const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
898
- // initializeComponent
899
- if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
900
- // Let the runtime know that the component has been initialized
901
- hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
902
- {
903
- // lazy loaded components
904
- // request the component's implementation to be
905
- // wired up with the host element
906
- Cstr = loadModule(cmpMeta);
907
- if (Cstr.then) {
908
- // Await creates a micro-task avoid if possible
909
- const endLoad = uniqueTime();
910
- Cstr = await Cstr;
911
- endLoad();
912
- }
913
- if (!Cstr.isProxied) {
914
- proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */);
915
- Cstr.isProxied = true;
916
- }
917
- const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);
918
- // ok, time to construct the instance
919
- // but let's keep track of when we start and stop
920
- // so that the getters/setters don't incorrectly step on data
921
- {
922
- hostRef.$flags$ |= 8 /* HOST_FLAGS.isConstructingInstance */;
923
- }
924
- // construct the lazy-loaded component implementation
925
- // passing the hostRef is very important during
926
- // construction in order to directly wire together the
927
- // host element and the lazy-loaded instance
928
- try {
929
- new Cstr(hostRef);
930
- }
931
- catch (e) {
932
- consoleError(e);
933
- }
934
- {
935
- hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
936
- }
937
- endNewInstance();
938
- fireConnectedCallback(hostRef.$lazyInstance$);
939
- }
940
- if (Cstr.style) {
941
- // this component has styles but we haven't registered them yet
942
- let style = Cstr.style;
943
- const scopeId = getScopeId(cmpMeta);
944
- if (!styles.has(scopeId)) {
945
- const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
946
- registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */));
947
- endRegisterStyles();
948
- }
949
- }
950
- }
951
- // we've successfully created a lazy instance
952
- const ancestorComponent = hostRef.$ancestorComponent$;
953
- const schedule = () => scheduleUpdate(hostRef, true);
954
- if (ancestorComponent && ancestorComponent['s-rc']) {
955
- // this is the initial load and this component it has an ancestor component
956
- // but the ancestor component has NOT fired its will update lifecycle yet
957
- // so let's just cool our jets and wait for the ancestor to continue first
958
- // this will get fired off when the ancestor component
959
- // finally gets around to rendering its lazy self
960
- // fire off the initial update
961
- ancestorComponent['s-rc'].push(schedule);
962
- }
963
- else {
964
- schedule();
965
- }
966
- };
967
- const fireConnectedCallback = (instance) => {
968
- {
969
- safeCall(instance, 'connectedCallback');
970
- }
971
- };
972
- const connectedCallback = (elm) => {
973
- if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
974
- const hostRef = getHostRef(elm);
975
- const cmpMeta = hostRef.$cmpMeta$;
976
- const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
977
- if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
978
- // first time this component has connected
979
- hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
980
- {
981
- // find the first ancestor component (if there is one) and register
982
- // this component as one of the actively loading child components for its ancestor
983
- let ancestorComponent = elm;
984
- while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
985
- // climb up the ancestors looking for the first
986
- // component that hasn't finished its lifecycle update yet
987
- if (ancestorComponent['s-p']) {
988
- // we found this components first ancestor component
989
- // keep a reference to this component's ancestor component
990
- attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
991
- break;
992
- }
993
- }
994
- }
995
- // Lazy properties
996
- // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
997
- if (cmpMeta.$members$) {
998
- Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
999
- if (memberFlags & 31 /* MEMBER_FLAGS.Prop */ && elm.hasOwnProperty(memberName)) {
1000
- const value = elm[memberName];
1001
- delete elm[memberName];
1002
- elm[memberName] = value;
1003
- }
1004
- });
1005
- }
1006
- {
1007
- initializeComponent(elm, hostRef, cmpMeta);
1008
- }
1009
- }
1010
- else {
1011
- // fire off connectedCallback() on component instance
1012
- if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
1013
- fireConnectedCallback(hostRef.$lazyInstance$);
1014
- }
1015
- else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
1016
- hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));
1017
- }
1018
- }
1019
- endConnected();
1020
- }
1021
- };
1022
- const disconnectInstance = (instance) => {
1023
- {
1024
- safeCall(instance, 'disconnectedCallback');
1025
- }
1026
- };
1027
- const disconnectedCallback = async (elm) => {
1028
- if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1029
- const hostRef = getHostRef(elm);
1030
- if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
1031
- disconnectInstance(hostRef.$lazyInstance$);
1032
- }
1033
- else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
1034
- hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
1035
- }
1036
- }
1037
- };
1038
- const bootstrapLazy = (lazyBundles, options = {}) => {
1039
- var _a;
1040
- const endBootstrap = createTime();
1041
- const cmpTags = [];
1042
- const exclude = options.exclude || [];
1043
- const customElements = win.customElements;
1044
- const head = doc.head;
1045
- const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
1046
- const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
1047
- const deferredConnectedCallbacks = [];
1048
- let appLoadFallback;
1049
- let isBootstrapping = true;
1050
- Object.assign(plt, options);
1051
- plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
1052
- lazyBundles.map((lazyBundle) => {
1053
- lazyBundle[1].map((compactMeta) => {
1054
- const cmpMeta = {
1055
- $flags$: compactMeta[0],
1056
- $tagName$: compactMeta[1],
1057
- $members$: compactMeta[2],
1058
- $listeners$: compactMeta[3],
1059
- };
1060
- {
1061
- cmpMeta.$members$ = compactMeta[2];
1062
- }
1063
- const tagName = cmpMeta.$tagName$;
1064
- const HostElement = class extends HTMLElement {
1065
- // StencilLazyHost
1066
- constructor(self) {
1067
- // @ts-ignore
1068
- super(self);
1069
- self = this;
1070
- registerHost(self, cmpMeta);
1071
- }
1072
- connectedCallback() {
1073
- if (appLoadFallback) {
1074
- clearTimeout(appLoadFallback);
1075
- appLoadFallback = null;
1076
- }
1077
- if (isBootstrapping) {
1078
- // connectedCallback will be processed once all components have been registered
1079
- deferredConnectedCallbacks.push(this);
1080
- }
1081
- else {
1082
- plt.jmp(() => connectedCallback(this));
1083
- }
1084
- }
1085
- disconnectedCallback() {
1086
- plt.jmp(() => disconnectedCallback(this));
1087
- }
1088
- componentOnReady() {
1089
- return getHostRef(this).$onReadyPromise$;
1090
- }
1091
- };
1092
- cmpMeta.$lazyBundleId$ = lazyBundle[0];
1093
- if (!exclude.includes(tagName) && !customElements.get(tagName)) {
1094
- cmpTags.push(tagName);
1095
- customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* PROXY_FLAGS.isElementConstructor */));
1096
- }
1097
- });
1098
- });
1099
- {
1100
- visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
1101
- visibilityStyle.setAttribute('data-styles', '');
1102
- // Apply CSP nonce to the style tag if it exists
1103
- const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1104
- if (nonce != null) {
1105
- visibilityStyle.setAttribute('nonce', nonce);
1106
- }
1107
- head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
1108
- }
1109
- // Process deferred connectedCallbacks now all components have been registered
1110
- isBootstrapping = false;
1111
- if (deferredConnectedCallbacks.length) {
1112
- deferredConnectedCallbacks.map((host) => host.connectedCallback());
1113
- }
1114
- else {
1115
- {
1116
- plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30)));
1117
- }
1118
- }
1119
- // Fallback appLoad event
1120
- endBootstrap();
1121
- };
1122
- /**
1123
- * Assigns the given value to the nonce property on the runtime platform object.
1124
- * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
1125
- * @param nonce The value to be assigned to the platform nonce property.
1126
- * @returns void
1127
- */
1128
- const setNonce = (nonce) => (plt.$nonce$ = nonce);
1129
- const hostRefs = /*@__PURE__*/ new WeakMap();
1130
- const getHostRef = (ref) => hostRefs.get(ref);
1131
- const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
1132
- const registerHost = (elm, cmpMeta) => {
1133
- const hostRef = {
1134
- $flags$: 0,
1135
- $hostElement$: elm,
1136
- $cmpMeta$: cmpMeta,
1137
- $instanceValues$: new Map(),
1138
- };
1139
- {
1140
- hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
1141
- elm['s-p'] = [];
1142
- elm['s-rc'] = [];
1143
- }
1144
- return hostRefs.set(elm, hostRef);
1145
- };
1146
- const consoleError = (e, el) => (0, console.error)(e, el);
1147
- const cmpModules = /*@__PURE__*/ new Map();
1148
- const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
1149
- // loadModuleImport
1150
- const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
1151
- const bundleId = cmpMeta.$lazyBundleId$;
1152
- const module = cmpModules.get(bundleId) ;
1153
- if (module) {
1154
- return module[exportName];
1155
- }
1156
- /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
1157
- return import(
1158
- /* @vite-ignore */
1159
- /* webpackInclude: /\.entry\.js$/ */
1160
- /* webpackExclude: /\.system\.entry\.js$/ */
1161
- /* webpackMode: "lazy" */
1162
- `./${bundleId}.entry.js${''}`).then((importedModule) => {
1163
- {
1164
- cmpModules.set(bundleId, importedModule);
1165
- }
1166
- return importedModule[exportName];
1167
- }, consoleError);
1168
- };
1169
- const styles = /*@__PURE__*/ new Map();
1170
- const win = typeof window !== 'undefined' ? window : {};
1171
- const doc = win.document || { head: {} };
1172
- const plt = {
1173
- $flags$: 0,
1174
- $resourcesUrl$: '',
1175
- jmp: (h) => h(),
1176
- raf: (h) => requestAnimationFrame(h),
1177
- ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
1178
- rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
1179
- ce: (eventName, opts) => new CustomEvent(eventName, opts),
1180
- };
1181
- const promiseResolve = (v) => Promise.resolve(v);
1182
- const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
1183
- try {
1184
- new CSSStyleSheet();
1185
- return typeof new CSSStyleSheet().replaceSync === 'function';
1186
- }
1187
- catch (e) { }
1188
- return false;
1189
- })()
1190
- ;
1191
- const queueDomReads = [];
1192
- const queueDomWrites = [];
1193
- const queueTask = (queue, write) => (cb) => {
1194
- queue.push(cb);
1195
- if (!queuePending) {
1196
- queuePending = true;
1197
- if (write && plt.$flags$ & 4 /* PLATFORM_FLAGS.queueSync */) {
1198
- nextTick(flush);
1199
- }
1200
- else {
1201
- plt.raf(flush);
1202
- }
1203
- }
1204
- };
1205
- const consume = (queue) => {
1206
- for (let i = 0; i < queue.length; i++) {
1207
- try {
1208
- queue[i](performance.now());
1209
- }
1210
- catch (e) {
1211
- consoleError(e);
1212
- }
1213
- }
1214
- queue.length = 0;
1215
- };
1216
- const flush = () => {
1217
- // always force a bunch of medium callbacks to run, but still have
1218
- // a throttle on how many can run in a certain time
1219
- // DOM READS!!!
1220
- consume(queueDomReads);
1221
- // DOM WRITES!!!
1222
- {
1223
- consume(queueDomWrites);
1224
- if ((queuePending = queueDomReads.length > 0)) {
1225
- // still more to do yet, but we've run out of time
1226
- // let's let this thing cool off and try again in the next tick
1227
- plt.raf(flush);
1228
- }
1229
- }
1230
- };
1231
- const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
1232
- const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1233
-
1234
- export { Host as H, bootstrapLazy as b, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
1235
-
1236
- //# sourceMappingURL=index-9102de09.js.map