ku4web-components 6.4.34 → 6.4.38

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 (278) hide show
  1. package/dist/cjs/{index-fabdc7d0.js → index-38fe0039.js} +1 -1
  2. package/dist/cjs/ku4-carousel-controls.cjs.entry.js +3 -3
  3. package/dist/cjs/ku4-carousel-slide.cjs.entry.js +2 -2
  4. package/dist/cjs/ku4-carousel.cjs.entry.js +15 -9
  5. package/dist/cjs/ku4-col.cjs.entry.js +2 -2
  6. package/dist/cjs/ku4-drawer.cjs.entry.js +2 -2
  7. package/dist/cjs/ku4-feature.cjs.entry.js +3 -3
  8. package/dist/cjs/ku4-focus-trap.cjs.entry.js +27 -27
  9. package/dist/cjs/ku4-form.cjs.entry.js +4 -4
  10. package/dist/cjs/ku4-grid.cjs.entry.js +2 -2
  11. package/dist/cjs/ku4-label.cjs.entry.js +3 -3
  12. package/dist/cjs/ku4-mask.cjs.entry.js +3 -3
  13. package/dist/cjs/ku4-modal.cjs.entry.js +4 -4
  14. package/dist/cjs/ku4-panel.cjs.entry.js +2 -2
  15. package/dist/cjs/ku4-preview.cjs.entry.js +15 -44
  16. package/dist/cjs/ku4-tab-list.cjs.entry.js +5 -5
  17. package/dist/cjs/ku4-tab-panel.cjs.entry.js +4 -4
  18. package/dist/cjs/ku4-tab.cjs.entry.js +4 -4
  19. package/dist/cjs/ku4-table.cjs.entry.js +2 -2
  20. package/dist/cjs/ku4-tooltip.cjs.entry.js +3 -3
  21. package/dist/cjs/ku4-validation.cjs.entry.js +4 -4
  22. package/dist/cjs/ku4web-components.cjs.js +8 -99
  23. package/dist/cjs/loader.cjs.js +3 -19
  24. package/dist/cjs/{shadow-css-4bfd7bfa.js → shadow-css-d8ee70b1.js} +1 -1
  25. package/dist/esm/{index-d14f31b2.js → index-52020db7.js} +1 -1
  26. package/dist/esm/ku4-carousel-controls.entry.js +3 -3
  27. package/dist/esm/ku4-carousel-slide.entry.js +2 -2
  28. package/dist/esm/ku4-carousel.entry.js +15 -9
  29. package/dist/esm/ku4-col.entry.js +2 -2
  30. package/dist/esm/ku4-drawer.entry.js +2 -2
  31. package/dist/esm/ku4-feature.entry.js +3 -3
  32. package/dist/esm/ku4-focus-trap.entry.js +4 -4
  33. package/dist/esm/ku4-form.entry.js +4 -4
  34. package/dist/esm/ku4-grid.entry.js +2 -2
  35. package/dist/esm/ku4-label.entry.js +3 -3
  36. package/dist/esm/ku4-mask.entry.js +3 -3
  37. package/dist/esm/ku4-modal.entry.js +4 -4
  38. package/dist/esm/ku4-panel.entry.js +2 -2
  39. package/dist/esm/ku4-preview.entry.js +6 -35
  40. package/dist/esm/ku4-tab-list.entry.js +5 -5
  41. package/dist/esm/ku4-tab-panel.entry.js +4 -4
  42. package/dist/esm/ku4-tab.entry.js +4 -4
  43. package/dist/esm/ku4-table.entry.js +2 -2
  44. package/dist/esm/ku4-tooltip.entry.js +3 -3
  45. package/dist/esm/ku4-validation.entry.js +4 -4
  46. package/dist/esm/ku4web-components.js +8 -99
  47. package/dist/esm/loader.js +3 -19
  48. package/dist/{ku4web-components/shadow-css-bc14d9fd.js → esm/shadow-css-c1fdfa9f.js} +1 -1
  49. package/dist/esm-es5/{index-d14f31b2.js → index-52020db7.js} +1 -1
  50. package/dist/esm-es5/ku4-carousel-controls.entry.js +1 -1
  51. package/dist/esm-es5/ku4-carousel-slide.entry.js +1 -1
  52. package/dist/esm-es5/ku4-carousel.entry.js +1 -1
  53. package/dist/esm-es5/ku4-col.entry.js +1 -1
  54. package/dist/esm-es5/ku4-drawer.entry.js +1 -1
  55. package/dist/esm-es5/ku4-feature.entry.js +1 -1
  56. package/dist/esm-es5/ku4-focus-trap.entry.js +1 -1
  57. package/dist/esm-es5/ku4-form.entry.js +1 -1
  58. package/dist/esm-es5/ku4-grid.entry.js +1 -1
  59. package/dist/esm-es5/ku4-label.entry.js +1 -1
  60. package/dist/esm-es5/ku4-mask.entry.js +1 -1
  61. package/dist/esm-es5/ku4-modal.entry.js +1 -1
  62. package/dist/esm-es5/ku4-panel.entry.js +1 -1
  63. package/dist/esm-es5/ku4-preview.entry.js +1 -1
  64. package/dist/esm-es5/ku4-tab-list.entry.js +1 -1
  65. package/dist/esm-es5/ku4-tab-panel.entry.js +1 -1
  66. package/dist/esm-es5/ku4-tab.entry.js +1 -1
  67. package/dist/esm-es5/ku4-table.entry.js +1 -1
  68. package/dist/esm-es5/ku4-tooltip.entry.js +1 -1
  69. package/dist/esm-es5/ku4-validation.entry.js +1 -1
  70. package/dist/esm-es5/ku4web-components.js +1 -1
  71. package/dist/esm-es5/loader.js +1 -1
  72. package/dist/esm-es5/{shadow-css-bc14d9fd.js → shadow-css-c1fdfa9f.js} +0 -0
  73. package/dist/index.js +1 -1
  74. package/dist/ku4web-components/index.esm.js +0 -1
  75. package/dist/ku4web-components/ku4web-components.css +1 -283
  76. package/dist/ku4web-components/ku4web-components.esm.js +1 -125
  77. package/dist/ku4web-components/ku4web-components.js +1 -1
  78. package/dist/ku4web-components/{p-967f8f4b.system.entry.js → p-19147286.system.entry.js} +1 -1
  79. package/dist/ku4web-components/p-1fb8966a.entry.js +1 -0
  80. package/dist/ku4web-components/{p-c72b3ced.system.entry.js → p-2bbea5f3.system.entry.js} +1 -1
  81. package/dist/ku4web-components/p-4986dc9a.entry.js +1 -0
  82. package/dist/ku4web-components/{p-176273d5.system.js → p-4de687d8.system.js} +1 -1
  83. package/dist/ku4web-components/p-5848719e.system.js +1 -0
  84. package/dist/ku4web-components/p-5ad4d525.entry.js +1 -0
  85. package/dist/ku4web-components/{p-e0558b2b.system.entry.js → p-60512677.system.entry.js} +1 -1
  86. package/dist/ku4web-components/{p-cb0f32a7.js → p-670d415c.js} +1 -1
  87. package/dist/ku4web-components/{p-c3c31235.system.entry.js → p-67b90b07.system.entry.js} +1 -1
  88. package/dist/ku4web-components/{p-435478fa.system.entry.js → p-6a6ebdd6.system.entry.js} +1 -1
  89. package/dist/ku4web-components/p-6f56d780.entry.js +1 -0
  90. package/dist/ku4web-components/p-7587e933.entry.js +1 -0
  91. package/dist/ku4web-components/{p-3ad57422.system.entry.js → p-769237d3.system.entry.js} +1 -1
  92. package/dist/ku4web-components/p-7a5e62fd.entry.js +1 -0
  93. package/dist/ku4web-components/{p-46d73124.system.entry.js → p-8645d86f.system.entry.js} +1 -1
  94. package/dist/ku4web-components/{p-cb6b67f2.entry.js → p-867d74d6.entry.js} +1 -1
  95. package/dist/ku4web-components/p-911a6cc5.entry.js +1 -0
  96. package/dist/ku4web-components/{p-7bbd50d6.system.entry.js → p-93417cb8.system.entry.js} +1 -1
  97. package/dist/ku4web-components/p-98548901.system.entry.js +1 -0
  98. package/dist/ku4web-components/{p-44f9a1a9.system.entry.js → p-9b9fb5a2.system.entry.js} +1 -1
  99. package/dist/ku4web-components/p-9e2c3988.entry.js +1 -0
  100. package/dist/ku4web-components/{p-64f6379d.system.entry.js → p-ac86618a.system.entry.js} +1 -1
  101. package/dist/ku4web-components/p-af5d8c77.system.entry.js +1 -0
  102. package/dist/ku4web-components/p-b2db2c0b.entry.js +1 -0
  103. package/dist/ku4web-components/p-b9cf48d6.entry.js +1 -0
  104. package/dist/ku4web-components/p-bfd8c04e.entry.js +1 -0
  105. package/dist/ku4web-components/p-c11d7118.entry.js +1 -0
  106. package/dist/ku4web-components/p-c194ee9c.entry.js +1 -0
  107. package/dist/ku4web-components/{p-c2285d3c.system.entry.js → p-c48ff8d2.system.entry.js} +1 -1
  108. package/dist/ku4web-components/p-cdaa80f7.entry.js +1 -0
  109. package/dist/ku4web-components/{ku4-col.entry.js → p-d0579e6f.entry.js} +1 -75
  110. package/dist/ku4web-components/p-d248862c.entry.js +1 -0
  111. package/dist/ku4web-components/{p-9f159c4b.system.entry.js → p-d312c8ae.system.entry.js} +1 -1
  112. package/dist/ku4web-components/{p-110de527.system.entry.js → p-d3dad5b5.system.entry.js} +1 -1
  113. package/dist/ku4web-components/{p-d3379ca9.system.entry.js → p-dda45242.system.entry.js} +1 -1
  114. package/dist/ku4web-components/p-e63f2453.entry.js +1 -0
  115. package/dist/ku4web-components/{p-4e89d6bc.system.entry.js → p-e89bc35d.system.entry.js} +1 -1
  116. package/dist/ku4web-components/{p-308941a0.system.entry.js → p-e9c1a470.system.entry.js} +1 -1
  117. package/dist/ku4web-components/p-ebc49910.entry.js +1 -0
  118. package/dist/ku4web-components/{p-a025c941.system.js → p-f4d979bb.system.js} +0 -0
  119. package/dist/ku4web-components/{p-3fb7c6ff.js → p-f566887e.js} +0 -0
  120. package/dist/ku4web-components/{p-7a3a3b7f.system.entry.js → p-faef0a79.system.entry.js} +1 -1
  121. package/dist/ku4web-components/p-fbba3322.entry.js +1 -0
  122. package/dist/ku4web-components/{p-d8836783.system.entry.js → p-ff4c04f5.system.entry.js} +1 -1
  123. package/dist/types/components/ku4-carousel/ku4-carousel.d.ts +4 -0
  124. package/dist/types/components/ku4-validation/ku4-validation.d.ts +5 -0
  125. package/dist/types/components.d.ts +16 -0
  126. package/loader/index.d.ts +0 -1
  127. package/package.json +1 -1
  128. package/dist/cjs/app-globals-3a1e7e63.js +0 -5
  129. package/dist/cjs/css-shim-a6998297.js +0 -6
  130. package/dist/cjs/dom-66f79778.js +0 -75
  131. package/dist/cjs/index-51b7a610.js +0 -14
  132. package/dist/cjs/index-c52d450b.js +0 -10
  133. package/dist/cjs/index-ff13b651.js +0 -3046
  134. package/dist/cjs/uid-3dd31175.js +0 -11
  135. package/dist/collection/capabilities/a11y/aria.js +0 -26
  136. package/dist/collection/capabilities/angular/index.js +0 -24
  137. package/dist/collection/capabilities/decorators/deprecated.js +0 -20
  138. package/dist/collection/capabilities/decorators/index.js +0 -3
  139. package/dist/collection/capabilities/decorators/memoize.js +0 -7
  140. package/dist/collection/capabilities/dom/isFocusable.js +0 -7
  141. package/dist/collection/capabilities/dom/queryFocusable.js +0 -2
  142. package/dist/collection/capabilities/identity/uid.js +0 -6
  143. package/dist/collection/capabilities/mask/index.js +0 -5
  144. package/dist/collection/capabilities/mask/patterns/date.js +0 -40
  145. package/dist/collection/capabilities/mask/patterns/index.js +0 -7
  146. package/dist/collection/capabilities/react/index.js +0 -25
  147. package/dist/collection/capabilities/testing/html.js +0 -14
  148. package/dist/collection/capabilities/testing/styles.js +0 -14
  149. package/dist/collection/capabilities/vue/index.js +0 -28
  150. package/dist/collection/capabilities/vue3/index.js +0 -26
  151. package/dist/collection/collection-manifest.json +0 -31
  152. package/dist/collection/components/ku4-carousel/ku4-carousel.css +0 -215
  153. package/dist/collection/components/ku4-carousel/ku4-carousel.js +0 -335
  154. package/dist/collection/components/ku4-carousel-controls/ku4-carousel-controls.css +0 -32
  155. package/dist/collection/components/ku4-carousel-controls/ku4-carousel-controls.js +0 -93
  156. package/dist/collection/components/ku4-carousel-slide/ku4-carousel-slide.css +0 -3
  157. package/dist/collection/components/ku4-carousel-slide/ku4-carousel-slide.js +0 -140
  158. package/dist/collection/components/ku4-col/ku4-col.css +0 -601
  159. package/dist/collection/components/ku4-col/ku4-col.js +0 -288
  160. package/dist/collection/components/ku4-drawer/ku4-drawer.css +0 -56
  161. package/dist/collection/components/ku4-drawer/ku4-drawer.js +0 -163
  162. package/dist/collection/components/ku4-feature/ku4-feature.js +0 -70
  163. package/dist/collection/components/ku4-focus-trap/ku4-focus-trap.css +0 -3
  164. package/dist/collection/components/ku4-focus-trap/ku4-focus-trap.js +0 -441
  165. package/dist/collection/components/ku4-form/ku4-form.js +0 -194
  166. package/dist/collection/components/ku4-grid/ku4-grid.css +0 -751
  167. package/dist/collection/components/ku4-grid/ku4-grid.js +0 -408
  168. package/dist/collection/components/ku4-label/ku4-label.css +0 -36
  169. package/dist/collection/components/ku4-label/ku4-label.js +0 -115
  170. package/dist/collection/components/ku4-mask/ku4-mask.css +0 -3
  171. package/dist/collection/components/ku4-mask/ku4-mask.js +0 -427
  172. package/dist/collection/components/ku4-modal/ku4-modal.css +0 -85
  173. package/dist/collection/components/ku4-modal/ku4-modal.js +0 -186
  174. package/dist/collection/components/ku4-panel/ku4-panel.css +0 -14
  175. package/dist/collection/components/ku4-panel/ku4-panel.js +0 -119
  176. package/dist/collection/components/ku4-preview/ku4-preview.css +0 -23
  177. package/dist/collection/components/ku4-preview/ku4-preview.js +0 -249
  178. package/dist/collection/components/ku4-tab/ku4-tab.css +0 -82
  179. package/dist/collection/components/ku4-tab/ku4-tab.js +0 -191
  180. package/dist/collection/components/ku4-tab-list/ku4-tab-list.css +0 -6
  181. package/dist/collection/components/ku4-tab-list/ku4-tab-list.js +0 -118
  182. package/dist/collection/components/ku4-tab-panel/ku4-tab-panel.css +0 -26
  183. package/dist/collection/components/ku4-tab-panel/ku4-tab-panel.js +0 -166
  184. package/dist/collection/components/ku4-table/ku4-table.css +0 -116
  185. package/dist/collection/components/ku4-table/ku4-table.js +0 -120
  186. package/dist/collection/components/ku4-tooltip/ku4-tooltip.css +0 -56
  187. package/dist/collection/components/ku4-tooltip/ku4-tooltip.js +0 -274
  188. package/dist/collection/components/ku4-validation/ku4-validation.css +0 -7
  189. package/dist/collection/components/ku4-validation/ku4-validation.js +0 -309
  190. package/dist/collection/components/ku4-validation/validate.js +0 -14
  191. package/dist/collection/index.js +0 -1
  192. package/dist/collection/security.js +0 -27
  193. package/dist/esm/app-globals-0f993ce5.js +0 -3
  194. package/dist/esm/css-shim-a64b8820.js +0 -4
  195. package/dist/esm/dom-d08ba8aa.js +0 -73
  196. package/dist/esm/index-4693d116.js +0 -3
  197. package/dist/esm/index-88e7b9d4.js +0 -3010
  198. package/dist/esm/index-89916128.js +0 -3
  199. package/dist/esm/shadow-css-bc14d9fd.js +0 -389
  200. package/dist/esm/uid-5355229f.js +0 -9
  201. package/dist/ku4web-components/app-globals-0f993ce5.js +0 -3
  202. package/dist/ku4web-components/app-globals-497eb362.system.js +0 -1
  203. package/dist/ku4web-components/css-shim-00dc76e5.system.js +0 -1
  204. package/dist/ku4web-components/css-shim-a64b8820.js +0 -4
  205. package/dist/ku4web-components/dom-59f9ee66.system.js +0 -21
  206. package/dist/ku4web-components/dom-d08ba8aa.js +0 -73
  207. package/dist/ku4web-components/index-3127d7f7.system.js +0 -1
  208. package/dist/ku4web-components/index-4693d116.js +0 -3
  209. package/dist/ku4web-components/index-7624f416.system.js +0 -1
  210. package/dist/ku4web-components/index-88e7b9d4.js +0 -3010
  211. package/dist/ku4web-components/index-89916128.js +0 -3
  212. package/dist/ku4web-components/index-aea7f048.system.js +0 -1
  213. package/dist/ku4web-components/index.system.js +0 -1
  214. package/dist/ku4web-components/ku4-carousel-controls.entry.js +0 -70
  215. package/dist/ku4web-components/ku4-carousel-controls.system.entry.js +0 -1
  216. package/dist/ku4web-components/ku4-carousel-slide.entry.js +0 -47
  217. package/dist/ku4web-components/ku4-carousel-slide.system.entry.js +0 -1
  218. package/dist/ku4web-components/ku4-carousel.entry.js +0 -159
  219. package/dist/ku4web-components/ku4-carousel.system.entry.js +0 -1
  220. package/dist/ku4web-components/ku4-col.system.entry.js +0 -1
  221. package/dist/ku4web-components/ku4-drawer.entry.js +0 -35
  222. package/dist/ku4web-components/ku4-drawer.system.entry.js +0 -1
  223. package/dist/ku4web-components/ku4-feature.entry.js +0 -29
  224. package/dist/ku4web-components/ku4-feature.system.entry.js +0 -1
  225. package/dist/ku4web-components/ku4-focus-trap.entry.js +0 -323
  226. package/dist/ku4web-components/ku4-focus-trap.system.entry.js +0 -1
  227. package/dist/ku4web-components/ku4-form.entry.js +0 -97
  228. package/dist/ku4web-components/ku4-form.system.entry.js +0 -1
  229. package/dist/ku4web-components/ku4-grid.entry.js +0 -108
  230. package/dist/ku4web-components/ku4-grid.system.entry.js +0 -1
  231. package/dist/ku4web-components/ku4-label.entry.js +0 -70
  232. package/dist/ku4web-components/ku4-label.system.entry.js +0 -1
  233. package/dist/ku4web-components/ku4-mask.entry.js +0 -311
  234. package/dist/ku4web-components/ku4-mask.system.entry.js +0 -1
  235. package/dist/ku4web-components/ku4-modal.entry.js +0 -71
  236. package/dist/ku4web-components/ku4-modal.system.entry.js +0 -1
  237. package/dist/ku4web-components/ku4-panel.entry.js +0 -49
  238. package/dist/ku4web-components/ku4-panel.system.entry.js +0 -1
  239. package/dist/ku4web-components/ku4-preview.entry.js +0 -128
  240. package/dist/ku4web-components/ku4-preview.system.entry.js +0 -1
  241. package/dist/ku4web-components/ku4-tab-list.entry.js +0 -76
  242. package/dist/ku4web-components/ku4-tab-list.system.entry.js +0 -1
  243. package/dist/ku4web-components/ku4-tab-panel.entry.js +0 -72
  244. package/dist/ku4web-components/ku4-tab-panel.system.entry.js +0 -1
  245. package/dist/ku4web-components/ku4-tab.entry.js +0 -63
  246. package/dist/ku4web-components/ku4-tab.system.entry.js +0 -1
  247. package/dist/ku4web-components/ku4-table.entry.js +0 -79
  248. package/dist/ku4web-components/ku4-table.system.entry.js +0 -1
  249. package/dist/ku4web-components/ku4-tooltip.entry.js +0 -120
  250. package/dist/ku4web-components/ku4-tooltip.system.entry.js +0 -1
  251. package/dist/ku4web-components/ku4-validation.entry.js +0 -158
  252. package/dist/ku4web-components/ku4-validation.system.entry.js +0 -1
  253. package/dist/ku4web-components/ku4web-components.system.js +0 -1
  254. package/dist/ku4web-components/p-026e04d8.entry.js +0 -1
  255. package/dist/ku4web-components/p-0a7ce92f.entry.js +0 -1
  256. package/dist/ku4web-components/p-10a643bb.system.js +0 -1
  257. package/dist/ku4web-components/p-288c6e27.entry.js +0 -1
  258. package/dist/ku4web-components/p-417f04e9.entry.js +0 -1
  259. package/dist/ku4web-components/p-4c117404.entry.js +0 -1
  260. package/dist/ku4web-components/p-5299172c.entry.js +0 -1
  261. package/dist/ku4web-components/p-6b080fd7.entry.js +0 -1
  262. package/dist/ku4web-components/p-731d15d8.entry.js +0 -1
  263. package/dist/ku4web-components/p-7760e8b4.entry.js +0 -1
  264. package/dist/ku4web-components/p-7764c6f2.entry.js +0 -1
  265. package/dist/ku4web-components/p-7ffb5116.entry.js +0 -1
  266. package/dist/ku4web-components/p-8063491d.entry.js +0 -1
  267. package/dist/ku4web-components/p-8b7e72eb.entry.js +0 -1
  268. package/dist/ku4web-components/p-92ddb4be.entry.js +0 -1
  269. package/dist/ku4web-components/p-c7dc83c3.entry.js +0 -1
  270. package/dist/ku4web-components/p-cb142835.system.entry.js +0 -1
  271. package/dist/ku4web-components/p-cb746d07.entry.js +0 -1
  272. package/dist/ku4web-components/p-da065955.entry.js +0 -1
  273. package/dist/ku4web-components/p-e7698568.system.entry.js +0 -1
  274. package/dist/ku4web-components/p-e8367ca4.entry.js +0 -1
  275. package/dist/ku4web-components/p-fb68de75.entry.js +0 -1
  276. package/dist/ku4web-components/shadow-css-c015bba2.system.js +0 -13
  277. package/dist/ku4web-components/uid-5355229f.js +0 -9
  278. package/dist/ku4web-components/uid-93975202.system.js +0 -1
@@ -1,3010 +0,0 @@
1
- const NAMESPACE = 'ku4web-components';
2
- const BUILD = /* ku4web-components */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: true, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: true, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: true, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
3
- const Env = /* ku4web-components */ {};
4
-
5
- let scopeId;
6
- let contentRef;
7
- let hostTagName;
8
- let customError;
9
- let i = 0;
10
- let useNativeShadowDom = false;
11
- let checkSlotFallbackVisibility = false;
12
- let checkSlotRelocate = false;
13
- let isSvgMode = false;
14
- let renderingRef = null;
15
- let queueCongestion = 0;
16
- let queuePending = false;
17
- const win = typeof window !== 'undefined' ? window : {};
18
- const CSS = BUILD.cssVarShim ? win.CSS : null;
19
- const doc = win.document || { head: {} };
20
- const H = (win.HTMLElement || class {
21
- });
22
- const plt = {
23
- $flags$: 0,
24
- $resourcesUrl$: '',
25
- jmp: (h) => h(),
26
- raf: (h) => requestAnimationFrame(h),
27
- ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
28
- rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
29
- ce: (eventName, opts) => new CustomEvent(eventName, opts),
30
- };
31
- const setPlatformHelpers = (helpers) => {
32
- Object.assign(plt, helpers);
33
- };
34
- const supportsShadow = BUILD.shadowDomShim && BUILD.shadowDom
35
- ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)()
36
- : true;
37
- const supportsListenerOptions = /*@__PURE__*/ (() => {
38
- let supportsListenerOptions = false;
39
- try {
40
- doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
41
- get() {
42
- supportsListenerOptions = true;
43
- },
44
- }));
45
- }
46
- catch (e) { }
47
- return supportsListenerOptions;
48
- })();
49
- const promiseResolve = (v) => Promise.resolve(v);
50
- const supportsConstructibleStylesheets = BUILD.constructableCSS
51
- ? /*@__PURE__*/ (() => {
52
- try {
53
- new CSSStyleSheet();
54
- return typeof new CSSStyleSheet().replace === 'function';
55
- }
56
- catch (e) { }
57
- return false;
58
- })()
59
- : false;
60
- const Context = {};
61
- const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
62
- if (BUILD.hostListener && listeners) {
63
- // this is called immediately within the element's constructor
64
- // initialize our event listeners on the host element
65
- // we do this now so that we can listen to events that may
66
- // have fired even before the instance is ready
67
- if (BUILD.hostListenerTargetParent) {
68
- // this component may have event listeners that should be attached to the parent
69
- if (attachParentListeners) {
70
- // this is being ran from within the connectedCallback
71
- // which is important so that we know the host element actually has a parent element
72
- // filter out the listeners to only have the ones that ARE being attached to the parent
73
- listeners = listeners.filter(([flags]) => flags & 32 /* TargetParent */);
74
- }
75
- else {
76
- // this is being ran from within the component constructor
77
- // everything BUT the parent element listeners should be attached at this time
78
- // filter out the listeners that are NOT being attached to the parent
79
- listeners = listeners.filter(([flags]) => !(flags & 32 /* TargetParent */));
80
- }
81
- }
82
- listeners.map(([flags, name, method]) => {
83
- const target = BUILD.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;
84
- const handler = hostListenerProxy(hostRef, method);
85
- const opts = hostListenerOpts(flags);
86
- plt.ael(target, name, handler, opts);
87
- (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
88
- });
89
- }
90
- };
91
- const hostListenerProxy = (hostRef, methodName) => (ev) => {
92
- try {
93
- if (BUILD.lazyLoad) {
94
- if (hostRef.$flags$ & 256 /* isListenReady */) {
95
- // instance is ready, let's call it's member method for this event
96
- hostRef.$lazyInstance$[methodName](ev);
97
- }
98
- else {
99
- (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
100
- }
101
- }
102
- else {
103
- hostRef.$hostElement$[methodName](ev);
104
- }
105
- }
106
- catch (e) {
107
- consoleError(e);
108
- }
109
- };
110
- const getHostListenerTarget = (elm, flags) => {
111
- if (BUILD.hostListenerTargetDocument && flags & 4 /* TargetDocument */)
112
- return doc;
113
- if (BUILD.hostListenerTargetWindow && flags & 8 /* TargetWindow */)
114
- return win;
115
- if (BUILD.hostListenerTargetBody && flags & 16 /* TargetBody */)
116
- return doc.body;
117
- if (BUILD.hostListenerTargetParent && flags & 32 /* TargetParent */)
118
- return elm.parentElement;
119
- return elm;
120
- };
121
- // prettier-ignore
122
- const hostListenerOpts = (flags) => supportsListenerOptions
123
- ? ({
124
- passive: (flags & 1 /* Passive */) !== 0,
125
- capture: (flags & 2 /* Capture */) !== 0,
126
- })
127
- : (flags & 2 /* Capture */) !== 0;
128
- const CONTENT_REF_ID = 'r';
129
- const ORG_LOCATION_ID = 'o';
130
- const SLOT_NODE_ID = 's';
131
- const TEXT_NODE_ID = 't';
132
- const HYDRATE_ID = 's-id';
133
- const HYDRATED_STYLE_ID = 'sty-id';
134
- const HYDRATE_CHILD_ID = 'c-id';
135
- const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
136
- const XLINK_NS = 'http://www.w3.org/1999/xlink';
137
- const createTime = (fnName, tagName = '') => {
138
- if (BUILD.profile && performance.mark) {
139
- const key = `st:${fnName}:${tagName}:${i++}`;
140
- // Start
141
- performance.mark(key);
142
- // End
143
- return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key);
144
- }
145
- else {
146
- return () => {
147
- return;
148
- };
149
- }
150
- };
151
- const uniqueTime = (key, measureText) => {
152
- if (BUILD.profile && performance.mark) {
153
- if (performance.getEntriesByName(key).length === 0) {
154
- performance.mark(key);
155
- }
156
- return () => {
157
- if (performance.getEntriesByName(measureText).length === 0) {
158
- performance.measure(measureText, key);
159
- }
160
- };
161
- }
162
- else {
163
- return () => {
164
- return;
165
- };
166
- }
167
- };
168
- const inspect = (ref) => {
169
- const hostRef = getHostRef(ref);
170
- if (!hostRef) {
171
- return undefined;
172
- }
173
- const flags = hostRef.$flags$;
174
- const hostElement = hostRef.$hostElement$;
175
- return {
176
- renderCount: hostRef.$renderCount$,
177
- flags: {
178
- hasRendered: !!(flags & 2 /* hasRendered */),
179
- hasConnected: !!(flags & 1 /* hasConnected */),
180
- isWaitingForChildren: !!(flags & 4 /* isWaitingForChildren */),
181
- isConstructingInstance: !!(flags & 8 /* isConstructingInstance */),
182
- isQueuedForUpdate: !!(flags & 16 /* isQueuedForUpdate */),
183
- hasInitializedComponent: !!(flags & 32 /* hasInitializedComponent */),
184
- hasLoadedComponent: !!(flags & 64 /* hasLoadedComponent */),
185
- isWatchReady: !!(flags & 128 /* isWatchReady */),
186
- isListenReady: !!(flags & 256 /* isListenReady */),
187
- needsRerender: !!(flags & 512 /* needsRerender */),
188
- },
189
- instanceValues: hostRef.$instanceValues$,
190
- ancestorComponent: hostRef.$ancestorComponent$,
191
- hostElement,
192
- lazyInstance: hostRef.$lazyInstance$,
193
- vnode: hostRef.$vnode$,
194
- modeName: hostRef.$modeName$,
195
- onReadyPromise: hostRef.$onReadyPromise$,
196
- onReadyResolve: hostRef.$onReadyResolve$,
197
- onInstancePromise: hostRef.$onInstancePromise$,
198
- onInstanceResolve: hostRef.$onInstanceResolve$,
199
- onRenderResolve: hostRef.$onRenderResolve$,
200
- queuedListeners: hostRef.$queuedListeners$,
201
- rmListeners: hostRef.$rmListeners$,
202
- ['s-id']: hostElement['s-id'],
203
- ['s-cr']: hostElement['s-cr'],
204
- ['s-lr']: hostElement['s-lr'],
205
- ['s-p']: hostElement['s-p'],
206
- ['s-rc']: hostElement['s-rc'],
207
- ['s-sc']: hostElement['s-sc'],
208
- };
209
- };
210
- const installDevTools = () => {
211
- if (BUILD.devTools) {
212
- const stencil = (win.stencil = win.stencil || {});
213
- const originalInspect = stencil.inspect;
214
- stencil.inspect = (ref) => {
215
- let result = inspect(ref);
216
- if (!result && typeof originalInspect === 'function') {
217
- result = originalInspect(ref);
218
- }
219
- return result;
220
- };
221
- }
222
- };
223
- const rootAppliedStyles = new WeakMap();
224
- const registerStyle = (scopeId, cssText, allowCS) => {
225
- let style = styles.get(scopeId);
226
- if (supportsConstructibleStylesheets && allowCS) {
227
- style = (style || new CSSStyleSheet());
228
- style.replace(cssText);
229
- }
230
- else {
231
- style = cssText;
232
- }
233
- styles.set(scopeId, style);
234
- };
235
- const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
236
- let scopeId = getScopeId(cmpMeta, mode);
237
- let style = styles.get(scopeId);
238
- if (!BUILD.attachStyles) {
239
- return scopeId;
240
- }
241
- // if an element is NOT connected then getRootNode() will return the wrong root node
242
- // so the fallback is to always use the document for the root node in those cases
243
- styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
244
- if (style) {
245
- if (typeof style === 'string') {
246
- styleContainerNode = styleContainerNode.head || styleContainerNode;
247
- let appliedStyles = rootAppliedStyles.get(styleContainerNode);
248
- let styleElm;
249
- if (!appliedStyles) {
250
- rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
251
- }
252
- if (!appliedStyles.has(scopeId)) {
253
- if (BUILD.hydrateClientSide &&
254
- styleContainerNode.host &&
255
- (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) {
256
- // This is only happening on native shadow-dom, do not needs CSS var shim
257
- styleElm.innerHTML = style;
258
- }
259
- else {
260
- if (BUILD.cssVarShim && plt.$cssShim$) {
261
- styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */));
262
- const newScopeId = styleElm['s-sc'];
263
- if (newScopeId) {
264
- scopeId = newScopeId;
265
- // we don't want to add this styleID to the appliedStyles Set
266
- // since the cssVarShim might need to apply several different
267
- // stylesheets for the same component
268
- appliedStyles = null;
269
- }
270
- }
271
- else {
272
- styleElm = doc.createElement('style');
273
- styleElm.innerHTML = style;
274
- }
275
- if (BUILD.hydrateServerSide || BUILD.hotModuleReplacement) {
276
- styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
277
- }
278
- styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
279
- }
280
- if (appliedStyles) {
281
- appliedStyles.add(scopeId);
282
- }
283
- }
284
- }
285
- else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
286
- styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
287
- }
288
- }
289
- return scopeId;
290
- };
291
- const attachStyles = (hostRef) => {
292
- const cmpMeta = hostRef.$cmpMeta$;
293
- const elm = hostRef.$hostElement$;
294
- const flags = cmpMeta.$flags$;
295
- const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
296
- const scopeId = addStyle(BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$, elm);
297
- if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & 10 /* needsScopedEncapsulation */) {
298
- // only required when we're NOT using native shadow dom (slot)
299
- // or this browser doesn't support native shadow dom
300
- // and this host element was NOT created with SSR
301
- // let's pick out the inner content for slot projection
302
- // create a node to represent where the original
303
- // content was first placed, which is useful later on
304
- // DOM WRITE!!
305
- elm['s-sc'] = scopeId;
306
- elm.classList.add(scopeId + '-h');
307
- if (BUILD.scoped && flags & 2 /* scopedCssEncapsulation */) {
308
- elm.classList.add(scopeId + '-s');
309
- }
310
- }
311
- endAttachStyles();
312
- };
313
- const getScopeId = (cmp, mode) => 'sc-' + (BUILD.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + '-' + mode : cmp.$tagName$);
314
- const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
315
- // Private
316
- const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
317
- // Public
318
- const setMode = (handler) => modeResolutionChain.push(handler);
319
- const getMode = (ref) => getHostRef(ref).$modeName$;
320
- /**
321
- * Default style mode id
322
- */
323
- /**
324
- * Reusable empty obj/array
325
- * Don't add values to these!!
326
- */
327
- const EMPTY_OBJ = {};
328
- /**
329
- * Namespaces
330
- */
331
- const SVG_NS = 'http://www.w3.org/2000/svg';
332
- const HTML_NS = 'http://www.w3.org/1999/xhtml';
333
- const isDef = (v) => v != null;
334
- const isComplexType = (o) => {
335
- // https://jsperf.com/typeof-fn-object/5
336
- o = typeof o;
337
- return o === 'object' || o === 'function';
338
- };
339
- /**
340
- * Production h() function based on Preact by
341
- * Jason Miller (@developit)
342
- * Licensed under the MIT License
343
- * https://github.com/developit/preact/blob/master/LICENSE
344
- *
345
- * Modified for Stencil's compiler and vdom
346
- */
347
- // const stack: any[] = [];
348
- // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
349
- // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
350
- const h = (nodeName, vnodeData, ...children) => {
351
- let child = null;
352
- let key = null;
353
- let slotName = null;
354
- let simple = false;
355
- let lastSimple = false;
356
- let vNodeChildren = [];
357
- const walk = (c) => {
358
- for (let i = 0; i < c.length; i++) {
359
- child = c[i];
360
- if (Array.isArray(child)) {
361
- walk(child);
362
- }
363
- else if (child != null && typeof child !== 'boolean') {
364
- if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {
365
- child = String(child);
366
- }
367
- else if (BUILD.isDev && typeof nodeName !== 'function' && child.$flags$ === undefined) {
368
- consoleDevError(`vNode passed as children has unexpected type.
369
- Make sure it's using the correct h() function.
370
- Empty objects can also be the cause, look for JSX comments that became objects.`);
371
- }
372
- if (simple && lastSimple) {
373
- // If the previous child was simple (string), we merge both
374
- vNodeChildren[vNodeChildren.length - 1].$text$ += child;
375
- }
376
- else {
377
- // Append a new vNode, if it's text, we create a text vNode
378
- vNodeChildren.push(simple ? newVNode(null, child) : child);
379
- }
380
- lastSimple = simple;
381
- }
382
- }
383
- };
384
- walk(children);
385
- if (vnodeData) {
386
- if (BUILD.isDev && nodeName === 'input') {
387
- validateInputProperties(vnodeData);
388
- }
389
- // normalize class / classname attributes
390
- if (BUILD.vdomKey && vnodeData.key) {
391
- key = vnodeData.key;
392
- }
393
- if (BUILD.slotRelocation && vnodeData.name) {
394
- slotName = vnodeData.name;
395
- }
396
- if (BUILD.vdomClass) {
397
- const classData = vnodeData.className || vnodeData.class;
398
- if (classData) {
399
- vnodeData.class =
400
- typeof classData !== 'object'
401
- ? classData
402
- : Object.keys(classData)
403
- .filter((k) => classData[k])
404
- .join(' ');
405
- }
406
- }
407
- }
408
- if (BUILD.isDev && vNodeChildren.some(isHost)) {
409
- consoleDevError(`The <Host> must be the single root component. Make sure:
410
- - You are NOT using hostData() and <Host> in the same component.
411
- - <Host> is used once, and it's the single root component of the render() function.`);
412
- }
413
- if (BUILD.vdomFunctional && typeof nodeName === 'function') {
414
- // nodeName is a functional component
415
- return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
416
- }
417
- const vnode = newVNode(nodeName, null);
418
- vnode.$attrs$ = vnodeData;
419
- if (vNodeChildren.length > 0) {
420
- vnode.$children$ = vNodeChildren;
421
- }
422
- if (BUILD.vdomKey) {
423
- vnode.$key$ = key;
424
- }
425
- if (BUILD.slotRelocation) {
426
- vnode.$name$ = slotName;
427
- }
428
- return vnode;
429
- };
430
- const newVNode = (tag, text) => {
431
- const vnode = {
432
- $flags$: 0,
433
- $tag$: tag,
434
- $text$: text,
435
- $elm$: null,
436
- $children$: null,
437
- };
438
- if (BUILD.vdomAttribute) {
439
- vnode.$attrs$ = null;
440
- }
441
- if (BUILD.vdomKey) {
442
- vnode.$key$ = null;
443
- }
444
- if (BUILD.slotRelocation) {
445
- vnode.$name$ = null;
446
- }
447
- return vnode;
448
- };
449
- const Host = {};
450
- const isHost = (node) => node && node.$tag$ === Host;
451
- const vdomFnUtils = {
452
- forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
453
- map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate),
454
- };
455
- const convertToPublic = (node) => ({
456
- vattrs: node.$attrs$,
457
- vchildren: node.$children$,
458
- vkey: node.$key$,
459
- vname: node.$name$,
460
- vtag: node.$tag$,
461
- vtext: node.$text$,
462
- });
463
- const convertToPrivate = (node) => {
464
- if (typeof node.vtag === 'function') {
465
- const vnodeData = Object.assign({}, node.vattrs);
466
- if (node.vkey) {
467
- vnodeData.key = node.vkey;
468
- }
469
- if (node.vname) {
470
- vnodeData.name = node.vname;
471
- }
472
- return h(node.vtag, vnodeData, ...(node.vchildren || []));
473
- }
474
- const vnode = newVNode(node.vtag, node.vtext);
475
- vnode.$attrs$ = node.vattrs;
476
- vnode.$children$ = node.vchildren;
477
- vnode.$key$ = node.vkey;
478
- vnode.$name$ = node.vname;
479
- return vnode;
480
- };
481
- const validateInputProperties = (vnodeData) => {
482
- const props = Object.keys(vnodeData);
483
- const typeIndex = props.indexOf('type');
484
- const minIndex = props.indexOf('min');
485
- const maxIndex = props.indexOf('max');
486
- const stepIndex = props.indexOf('min');
487
- const value = props.indexOf('value');
488
- if (value === -1) {
489
- return;
490
- }
491
- if (value < typeIndex || value < minIndex || value < maxIndex || value < stepIndex) {
492
- consoleDevWarn(`The "value" prop of <input> should be set after "min", "max", "type" and "step"`);
493
- }
494
- };
495
- /**
496
- * Production setAccessor() function based on Preact by
497
- * Jason Miller (@developit)
498
- * Licensed under the MIT License
499
- * https://github.com/developit/preact/blob/master/LICENSE
500
- *
501
- * Modified for Stencil's compiler and vdom
502
- */
503
- const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
504
- if (oldValue !== newValue) {
505
- let isProp = isMemberInElement(elm, memberName);
506
- let ln = memberName.toLowerCase();
507
- if (BUILD.vdomClass && memberName === 'class') {
508
- const classList = elm.classList;
509
- const oldClasses = parseClassList(oldValue);
510
- const newClasses = parseClassList(newValue);
511
- classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
512
- classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
513
- }
514
- else if (BUILD.vdomStyle && memberName === 'style') {
515
- // update style attribute, css properties and values
516
- if (BUILD.updatable) {
517
- for (const prop in oldValue) {
518
- if (!newValue || newValue[prop] == null) {
519
- if (!BUILD.hydrateServerSide && prop.includes('-')) {
520
- elm.style.removeProperty(prop);
521
- }
522
- else {
523
- elm.style[prop] = '';
524
- }
525
- }
526
- }
527
- }
528
- for (const prop in newValue) {
529
- if (!oldValue || newValue[prop] !== oldValue[prop]) {
530
- if (!BUILD.hydrateServerSide && prop.includes('-')) {
531
- elm.style.setProperty(prop, newValue[prop]);
532
- }
533
- else {
534
- elm.style[prop] = newValue[prop];
535
- }
536
- }
537
- }
538
- }
539
- else if (BUILD.vdomKey && memberName === 'key')
540
- ;
541
- else if (BUILD.vdomRef && memberName === 'ref') {
542
- // minifier will clean this up
543
- if (newValue) {
544
- newValue(elm);
545
- }
546
- }
547
- else if (BUILD.vdomListener &&
548
- (BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) &&
549
- memberName[0] === 'o' &&
550
- memberName[1] === 'n') {
551
- // Event Handlers
552
- // so if the member name starts with "on" and the 3rd characters is
553
- // a capital letter, and it's not already a member on the element,
554
- // then we're assuming it's an event listener
555
- if (memberName[2] === '-') {
556
- // on- prefixed events
557
- // allows to be explicit about the dom event to listen without any magic
558
- // under the hood:
559
- // <my-cmp on-click> // listens for "click"
560
- // <my-cmp on-Click> // listens for "Click"
561
- // <my-cmp on-ionChange> // listens for "ionChange"
562
- // <my-cmp on-EVENTS> // listens for "EVENTS"
563
- memberName = memberName.slice(3);
564
- }
565
- else if (isMemberInElement(win, ln)) {
566
- // standard event
567
- // the JSX attribute could have been "onMouseOver" and the
568
- // member name "onmouseover" is on the window's prototype
569
- // so let's add the listener "mouseover", which is all lowercased
570
- memberName = ln.slice(2);
571
- }
572
- else {
573
- // custom event
574
- // the JSX attribute could have been "onMyCustomEvent"
575
- // so let's trim off the "on" prefix and lowercase the first character
576
- // and add the listener "myCustomEvent"
577
- // except for the first character, we keep the event name case
578
- memberName = ln[2] + memberName.slice(3);
579
- }
580
- if (oldValue) {
581
- plt.rel(elm, memberName, oldValue, false);
582
- }
583
- if (newValue) {
584
- plt.ael(elm, memberName, newValue, false);
585
- }
586
- }
587
- else if (BUILD.vdomPropOrAttr) {
588
- // Set property if it exists and it's not a SVG
589
- const isComplex = isComplexType(newValue);
590
- if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
591
- try {
592
- if (!elm.tagName.includes('-')) {
593
- let n = newValue == null ? '' : newValue;
594
- // Workaround for Safari, moving the <input> caret when re-assigning the same valued
595
- if (memberName === 'list') {
596
- isProp = false;
597
- // tslint:disable-next-line: triple-equals
598
- }
599
- else if (oldValue == null || elm[memberName] != n) {
600
- elm[memberName] = n;
601
- }
602
- }
603
- else {
604
- elm[memberName] = newValue;
605
- }
606
- }
607
- catch (e) { }
608
- }
609
- /**
610
- * Need to manually update attribute if:
611
- * - memberName is not an attribute
612
- * - if we are rendering the host element in order to reflect attribute
613
- * - if it's a SVG, since properties might not work in <svg>
614
- * - if the newValue is null/undefined or 'false'.
615
- */
616
- let xlink = false;
617
- if (BUILD.vdomXlink) {
618
- if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
619
- memberName = ln;
620
- xlink = true;
621
- }
622
- }
623
- if (newValue == null || newValue === false) {
624
- if (newValue !== false || elm.getAttribute(memberName) === '') {
625
- if (BUILD.vdomXlink && xlink) {
626
- elm.removeAttributeNS(XLINK_NS, memberName);
627
- }
628
- else {
629
- elm.removeAttribute(memberName);
630
- }
631
- }
632
- }
633
- else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
634
- newValue = newValue === true ? '' : newValue;
635
- if (BUILD.vdomXlink && xlink) {
636
- elm.setAttributeNS(XLINK_NS, memberName, newValue);
637
- }
638
- else {
639
- elm.setAttribute(memberName, newValue);
640
- }
641
- }
642
- }
643
- }
644
- };
645
- const parseClassListRegex = /\s/;
646
- const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
647
- const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
648
- // if the element passed in is a shadow root, which is a document fragment
649
- // then we want to be adding attrs/props to the shadow root's "host" element
650
- // if it's not a shadow root, then we add attrs/props to the same element
651
- const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host
652
- ? newVnode.$elm$.host
653
- : newVnode.$elm$;
654
- const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
655
- const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
656
- if (BUILD.updatable) {
657
- // remove attributes no longer present on the vnode by setting them to undefined
658
- for (memberName in oldVnodeAttrs) {
659
- if (!(memberName in newVnodeAttrs)) {
660
- setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
661
- }
662
- }
663
- }
664
- // add new & update changed attributes
665
- for (memberName in newVnodeAttrs) {
666
- setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
667
- }
668
- };
669
- const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
670
- // tslint:disable-next-line: prefer-const
671
- let newVNode = newParentVNode.$children$[childIndex];
672
- let i = 0;
673
- let elm;
674
- let childNode;
675
- let oldVNode;
676
- if (BUILD.slotRelocation && !useNativeShadowDom) {
677
- // remember for later we need to check to relocate nodes
678
- checkSlotRelocate = true;
679
- if (newVNode.$tag$ === 'slot') {
680
- if (scopeId) {
681
- // scoped css needs to add its scoped id to the parent element
682
- parentElm.classList.add(scopeId + '-s');
683
- }
684
- newVNode.$flags$ |= newVNode.$children$
685
- ? // slot element has fallback content
686
- 2 /* isSlotFallback */
687
- : // slot element does not have fallback content
688
- 1 /* isSlotReference */;
689
- }
690
- }
691
- if (BUILD.isDev && newVNode.$elm$) {
692
- consoleDevError(`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`);
693
- }
694
- if (BUILD.vdomText && newVNode.$text$ !== null) {
695
- // create text node
696
- elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
697
- }
698
- else if (BUILD.slotRelocation && newVNode.$flags$ & 1 /* isSlotReference */) {
699
- // create a slot reference node
700
- elm = newVNode.$elm$ =
701
- BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : doc.createTextNode('');
702
- }
703
- else {
704
- if (BUILD.svg && !isSvgMode) {
705
- isSvgMode = newVNode.$tag$ === 'svg';
706
- }
707
- // create element
708
- elm = newVNode.$elm$ = (BUILD.svg
709
- ? doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, BUILD.slotRelocation && newVNode.$flags$ & 2 /* isSlotFallback */
710
- ? 'slot-fb'
711
- : newVNode.$tag$)
712
- : doc.createElement(BUILD.slotRelocation && newVNode.$flags$ & 2 /* isSlotFallback */
713
- ? 'slot-fb'
714
- : newVNode.$tag$));
715
- if (BUILD.svg && isSvgMode && newVNode.$tag$ === 'foreignObject') {
716
- isSvgMode = false;
717
- }
718
- // add css classes, attrs, props, listeners, etc.
719
- if (BUILD.vdomAttribute) {
720
- updateElement(null, newVNode, isSvgMode);
721
- }
722
- if ((BUILD.shadowDom || BUILD.scoped) && isDef(scopeId) && elm['s-si'] !== scopeId) {
723
- // if there is a scopeId and this is the initial render
724
- // then let's add the scopeId as a css class
725
- elm.classList.add((elm['s-si'] = scopeId));
726
- }
727
- if (newVNode.$children$) {
728
- for (i = 0; i < newVNode.$children$.length; ++i) {
729
- // create the node
730
- childNode = createElm(oldParentVNode, newVNode, i, elm);
731
- // return node could have been null
732
- if (childNode) {
733
- // append our new node
734
- elm.appendChild(childNode);
735
- }
736
- }
737
- }
738
- if (BUILD.svg) {
739
- if (newVNode.$tag$ === 'svg') {
740
- // Only reset the SVG context when we're exiting <svg> element
741
- isSvgMode = false;
742
- }
743
- else if (elm.tagName === 'foreignObject') {
744
- // Reenter SVG context when we're exiting <foreignObject> element
745
- isSvgMode = true;
746
- }
747
- }
748
- }
749
- if (BUILD.slotRelocation) {
750
- elm['s-hn'] = hostTagName;
751
- if (newVNode.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
752
- // remember the content reference comment
753
- elm['s-sr'] = true;
754
- // remember the content reference comment
755
- elm['s-cr'] = contentRef;
756
- // remember the slot name, or empty string for default slot
757
- elm['s-sn'] = newVNode.$name$ || '';
758
- // check if we've got an old vnode for this slot
759
- oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
760
- if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
761
- // we've got an old slot vnode and the wrapper is being replaced
762
- // so let's move the old slot content back to it's original location
763
- putBackInOriginalLocation(oldParentVNode.$elm$, false);
764
- }
765
- }
766
- }
767
- return elm;
768
- };
769
- const putBackInOriginalLocation = (parentElm, recursive) => {
770
- plt.$flags$ |= 1 /* isTmpDisconnected */;
771
- const oldSlotChildNodes = parentElm.childNodes;
772
- for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
773
- const childNode = oldSlotChildNodes[i];
774
- if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
775
- // // this child node in the old element is from another component
776
- // // remove this node from the old slot's parent
777
- // childNode.remove();
778
- // and relocate it back to it's original location
779
- parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
780
- // remove the old original location comment entirely
781
- // later on the patch function will know what to do
782
- // and move this to the correct spot in need be
783
- childNode['s-ol'].remove();
784
- childNode['s-ol'] = undefined;
785
- checkSlotRelocate = true;
786
- }
787
- if (recursive) {
788
- putBackInOriginalLocation(childNode, recursive);
789
- }
790
- }
791
- plt.$flags$ &= ~1 /* isTmpDisconnected */;
792
- };
793
- const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
794
- let containerElm = ((BUILD.slotRelocation && parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
795
- let childNode;
796
- if (BUILD.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
797
- containerElm = containerElm.shadowRoot;
798
- }
799
- for (; startIdx <= endIdx; ++startIdx) {
800
- if (vnodes[startIdx]) {
801
- childNode = createElm(null, parentVNode, startIdx, parentElm);
802
- if (childNode) {
803
- vnodes[startIdx].$elm$ = childNode;
804
- containerElm.insertBefore(childNode, BUILD.slotRelocation ? referenceNode(before) : before);
805
- }
806
- }
807
- }
808
- };
809
- const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
810
- for (; startIdx <= endIdx; ++startIdx) {
811
- if ((vnode = vnodes[startIdx])) {
812
- elm = vnode.$elm$;
813
- callNodeRefs(vnode);
814
- if (BUILD.slotRelocation) {
815
- // we're removing this element
816
- // so it's possible we need to show slot fallback content now
817
- checkSlotFallbackVisibility = true;
818
- if (elm['s-ol']) {
819
- // remove the original location comment
820
- elm['s-ol'].remove();
821
- }
822
- else {
823
- // it's possible that child nodes of the node
824
- // that's being removed are slot nodes
825
- putBackInOriginalLocation(elm, true);
826
- }
827
- }
828
- // remove the vnode's element from the dom
829
- elm.remove();
830
- }
831
- }
832
- };
833
- const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
834
- let oldStartIdx = 0;
835
- let newStartIdx = 0;
836
- let idxInOld = 0;
837
- let i = 0;
838
- let oldEndIdx = oldCh.length - 1;
839
- let oldStartVnode = oldCh[0];
840
- let oldEndVnode = oldCh[oldEndIdx];
841
- let newEndIdx = newCh.length - 1;
842
- let newStartVnode = newCh[0];
843
- let newEndVnode = newCh[newEndIdx];
844
- let node;
845
- let elmToMove;
846
- while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
847
- if (oldStartVnode == null) {
848
- // Vnode might have been moved left
849
- oldStartVnode = oldCh[++oldStartIdx];
850
- }
851
- else if (oldEndVnode == null) {
852
- oldEndVnode = oldCh[--oldEndIdx];
853
- }
854
- else if (newStartVnode == null) {
855
- newStartVnode = newCh[++newStartIdx];
856
- }
857
- else if (newEndVnode == null) {
858
- newEndVnode = newCh[--newEndIdx];
859
- }
860
- else if (isSameVnode(oldStartVnode, newStartVnode)) {
861
- patch(oldStartVnode, newStartVnode);
862
- oldStartVnode = oldCh[++oldStartIdx];
863
- newStartVnode = newCh[++newStartIdx];
864
- }
865
- else if (isSameVnode(oldEndVnode, newEndVnode)) {
866
- patch(oldEndVnode, newEndVnode);
867
- oldEndVnode = oldCh[--oldEndIdx];
868
- newEndVnode = newCh[--newEndIdx];
869
- }
870
- else if (isSameVnode(oldStartVnode, newEndVnode)) {
871
- // Vnode moved right
872
- if (BUILD.slotRelocation && (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
873
- putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
874
- }
875
- patch(oldStartVnode, newEndVnode);
876
- parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
877
- oldStartVnode = oldCh[++oldStartIdx];
878
- newEndVnode = newCh[--newEndIdx];
879
- }
880
- else if (isSameVnode(oldEndVnode, newStartVnode)) {
881
- // Vnode moved left
882
- if (BUILD.slotRelocation && (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
883
- putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
884
- }
885
- patch(oldEndVnode, newStartVnode);
886
- parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
887
- oldEndVnode = oldCh[--oldEndIdx];
888
- newStartVnode = newCh[++newStartIdx];
889
- }
890
- else {
891
- // createKeyToOldIdx
892
- idxInOld = -1;
893
- if (BUILD.vdomKey) {
894
- for (i = oldStartIdx; i <= oldEndIdx; ++i) {
895
- if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
896
- idxInOld = i;
897
- break;
898
- }
899
- }
900
- }
901
- if (BUILD.vdomKey && idxInOld >= 0) {
902
- elmToMove = oldCh[idxInOld];
903
- if (elmToMove.$tag$ !== newStartVnode.$tag$) {
904
- node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
905
- }
906
- else {
907
- patch(elmToMove, newStartVnode);
908
- oldCh[idxInOld] = undefined;
909
- node = elmToMove.$elm$;
910
- }
911
- newStartVnode = newCh[++newStartIdx];
912
- }
913
- else {
914
- // new element
915
- node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
916
- newStartVnode = newCh[++newStartIdx];
917
- }
918
- if (node) {
919
- if (BUILD.slotRelocation) {
920
- parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
921
- }
922
- else {
923
- oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
924
- }
925
- }
926
- }
927
- }
928
- if (oldStartIdx > oldEndIdx) {
929
- addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
930
- }
931
- else if (BUILD.updatable && newStartIdx > newEndIdx) {
932
- removeVnodes(oldCh, oldStartIdx, oldEndIdx);
933
- }
934
- };
935
- const isSameVnode = (vnode1, vnode2) => {
936
- // compare if two vnode to see if they're "technically" the same
937
- // need to have the same element tag, and same key to be the same
938
- if (vnode1.$tag$ === vnode2.$tag$) {
939
- if (BUILD.slotRelocation && vnode1.$tag$ === 'slot') {
940
- return vnode1.$name$ === vnode2.$name$;
941
- }
942
- if (BUILD.vdomKey) {
943
- return vnode1.$key$ === vnode2.$key$;
944
- }
945
- return true;
946
- }
947
- return false;
948
- };
949
- const referenceNode = (node) => {
950
- // this node was relocated to a new location in the dom
951
- // because of some other component's slot
952
- // but we still have an html comment in place of where
953
- // it's original location was according to it's original vdom
954
- return (node && node['s-ol']) || node;
955
- };
956
- const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
957
- const patch = (oldVNode, newVNode) => {
958
- const elm = (newVNode.$elm$ = oldVNode.$elm$);
959
- const oldChildren = oldVNode.$children$;
960
- const newChildren = newVNode.$children$;
961
- const tag = newVNode.$tag$;
962
- const text = newVNode.$text$;
963
- let defaultHolder;
964
- if (!BUILD.vdomText || text === null) {
965
- if (BUILD.svg) {
966
- // test if we're rendering an svg element, or still rendering nodes inside of one
967
- // only add this to the when the compiler sees we're using an svg somewhere
968
- isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
969
- }
970
- // element node
971
- if (BUILD.vdomAttribute || BUILD.reflect) {
972
- if (BUILD.slot && tag === 'slot')
973
- ;
974
- else {
975
- // either this is the first render of an element OR it's an update
976
- // AND we already know it's possible it could have changed
977
- // this updates the element's css classes, attrs, props, listeners, etc.
978
- updateElement(oldVNode, newVNode, isSvgMode);
979
- }
980
- }
981
- if (BUILD.updatable && oldChildren !== null && newChildren !== null) {
982
- // looks like there's child vnodes for both the old and new vnodes
983
- updateChildren(elm, oldChildren, newVNode, newChildren);
984
- }
985
- else if (newChildren !== null) {
986
- // no old child vnodes, but there are new child vnodes to add
987
- if (BUILD.updatable && BUILD.vdomText && oldVNode.$text$ !== null) {
988
- // the old vnode was text, so be sure to clear it out
989
- elm.textContent = '';
990
- }
991
- // add the new vnode children
992
- addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
993
- }
994
- else if (BUILD.updatable && oldChildren !== null) {
995
- // no new child vnodes, but there are old child vnodes to remove
996
- removeVnodes(oldChildren, 0, oldChildren.length - 1);
997
- }
998
- if (BUILD.svg && isSvgMode && tag === 'svg') {
999
- isSvgMode = false;
1000
- }
1001
- }
1002
- else if (BUILD.vdomText && BUILD.slotRelocation && (defaultHolder = elm['s-cr'])) {
1003
- // this element has slotted content
1004
- defaultHolder.parentNode.textContent = text;
1005
- }
1006
- else if (BUILD.vdomText && oldVNode.$text$ !== text) {
1007
- // update the text content for the text only vnode
1008
- // and also only if the text is different than before
1009
- elm.data = text;
1010
- }
1011
- };
1012
- const updateFallbackSlotVisibility = (elm) => {
1013
- // tslint:disable-next-line: prefer-const
1014
- let childNodes = elm.childNodes;
1015
- let childNode;
1016
- let i;
1017
- let ilen;
1018
- let j;
1019
- let slotNameAttr;
1020
- let nodeType;
1021
- for (i = 0, ilen = childNodes.length; i < ilen; i++) {
1022
- childNode = childNodes[i];
1023
- if (childNode.nodeType === 1 /* ElementNode */) {
1024
- if (childNode['s-sr']) {
1025
- // this is a slot fallback node
1026
- // get the slot name for this slot reference node
1027
- slotNameAttr = childNode['s-sn'];
1028
- // by default always show a fallback slot node
1029
- // then hide it if there are other slots in the light dom
1030
- childNode.hidden = false;
1031
- for (j = 0; j < ilen; j++) {
1032
- nodeType = childNodes[j].nodeType;
1033
- if (childNodes[j]['s-hn'] !== childNode['s-hn'] || slotNameAttr !== '') {
1034
- // this sibling node is from a different component OR is a named fallback slot node
1035
- if (nodeType === 1 /* ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
1036
- childNode.hidden = true;
1037
- break;
1038
- }
1039
- }
1040
- else {
1041
- // this is a default fallback slot node
1042
- // any element or text node (with content)
1043
- // should hide the default fallback slot node
1044
- if (nodeType === 1 /* ElementNode */ ||
1045
- (nodeType === 3 /* TextNode */ && childNodes[j].textContent.trim() !== '')) {
1046
- childNode.hidden = true;
1047
- break;
1048
- }
1049
- }
1050
- }
1051
- }
1052
- // keep drilling down
1053
- updateFallbackSlotVisibility(childNode);
1054
- }
1055
- }
1056
- };
1057
- const relocateNodes = [];
1058
- const relocateSlotContent = (elm) => {
1059
- // tslint:disable-next-line: prefer-const
1060
- let childNode;
1061
- let node;
1062
- let hostContentNodes;
1063
- let slotNameAttr;
1064
- let relocateNodeData;
1065
- let j;
1066
- let i = 0;
1067
- let childNodes = elm.childNodes;
1068
- let ilen = childNodes.length;
1069
- for (; i < ilen; i++) {
1070
- childNode = childNodes[i];
1071
- if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
1072
- // first got the content reference comment node
1073
- // then we got it's parent, which is where all the host content is in now
1074
- hostContentNodes = node.parentNode.childNodes;
1075
- slotNameAttr = childNode['s-sn'];
1076
- for (j = hostContentNodes.length - 1; j >= 0; j--) {
1077
- node = hostContentNodes[j];
1078
- if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
1079
- // let's do some relocating to its new home
1080
- // but never relocate a content reference node
1081
- // that is suppose to always represent the original content location
1082
- if (isNodeLocatedInSlot(node, slotNameAttr)) {
1083
- // it's possible we've already decided to relocate this node
1084
- relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
1085
- // made some changes to slots
1086
- // let's make sure we also double check
1087
- // fallbacks are correctly hidden or shown
1088
- checkSlotFallbackVisibility = true;
1089
- node['s-sn'] = node['s-sn'] || slotNameAttr;
1090
- if (relocateNodeData) {
1091
- // previously we never found a slot home for this node
1092
- // but turns out we did, so let's remember it now
1093
- relocateNodeData.$slotRefNode$ = childNode;
1094
- }
1095
- else {
1096
- // add to our list of nodes to relocate
1097
- relocateNodes.push({
1098
- $slotRefNode$: childNode,
1099
- $nodeToRelocate$: node,
1100
- });
1101
- }
1102
- if (node['s-sr']) {
1103
- relocateNodes.map((relocateNode) => {
1104
- if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
1105
- relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
1106
- if (relocateNodeData && !relocateNode.$slotRefNode$) {
1107
- relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
1108
- }
1109
- }
1110
- });
1111
- }
1112
- }
1113
- else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
1114
- // so far this element does not have a slot home, not setting slotRefNode on purpose
1115
- // if we never find a home for this element then we'll need to hide it
1116
- relocateNodes.push({
1117
- $nodeToRelocate$: node,
1118
- });
1119
- }
1120
- }
1121
- }
1122
- }
1123
- if (childNode.nodeType === 1 /* ElementNode */) {
1124
- relocateSlotContent(childNode);
1125
- }
1126
- }
1127
- };
1128
- const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
1129
- if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
1130
- if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
1131
- return true;
1132
- }
1133
- if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
1134
- return true;
1135
- }
1136
- return false;
1137
- }
1138
- if (nodeToRelocate['s-sn'] === slotNameAttr) {
1139
- return true;
1140
- }
1141
- return slotNameAttr === '';
1142
- };
1143
- const callNodeRefs = (vNode) => {
1144
- if (BUILD.vdomRef) {
1145
- vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
1146
- vNode.$children$ && vNode.$children$.map(callNodeRefs);
1147
- }
1148
- };
1149
- const renderVdom = (hostRef, renderFnResults) => {
1150
- const hostElm = hostRef.$hostElement$;
1151
- const cmpMeta = hostRef.$cmpMeta$;
1152
- const oldVNode = hostRef.$vnode$ || newVNode(null, null);
1153
- const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
1154
- hostTagName = hostElm.tagName;
1155
- // <Host> runtime check
1156
- if (BUILD.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) {
1157
- throw new Error(`The <Host> must be the single root component.
1158
- Looks like the render() function of "${hostTagName.toLowerCase()}" is returning an array that contains the <Host>.
1159
-
1160
- The render() function should look like this instead:
1161
-
1162
- render() {
1163
- // Do not return an array
1164
- return (
1165
- <Host>{content}</Host>
1166
- );
1167
- }
1168
- `);
1169
- }
1170
- if (BUILD.reflect && cmpMeta.$attrsToReflect$) {
1171
- rootVnode.$attrs$ = rootVnode.$attrs$ || {};
1172
- cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
1173
- }
1174
- rootVnode.$tag$ = null;
1175
- rootVnode.$flags$ |= 4 /* isHost */;
1176
- hostRef.$vnode$ = rootVnode;
1177
- rootVnode.$elm$ = oldVNode.$elm$ = (BUILD.shadowDom ? hostElm.shadowRoot || hostElm : hostElm);
1178
- if (BUILD.scoped || BUILD.shadowDom) {
1179
- scopeId = hostElm['s-sc'];
1180
- }
1181
- if (BUILD.slotRelocation) {
1182
- contentRef = hostElm['s-cr'];
1183
- useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
1184
- // always reset
1185
- checkSlotFallbackVisibility = false;
1186
- }
1187
- // synchronous patch
1188
- patch(oldVNode, rootVnode);
1189
- if (BUILD.slotRelocation) {
1190
- // while we're moving nodes around existing nodes, temporarily disable
1191
- // the disconnectCallback from working
1192
- plt.$flags$ |= 1 /* isTmpDisconnected */;
1193
- if (checkSlotRelocate) {
1194
- relocateSlotContent(rootVnode.$elm$);
1195
- let relocateData;
1196
- let nodeToRelocate;
1197
- let orgLocationNode;
1198
- let parentNodeRef;
1199
- let insertBeforeNode;
1200
- let refNode;
1201
- let i = 0;
1202
- for (; i < relocateNodes.length; i++) {
1203
- relocateData = relocateNodes[i];
1204
- nodeToRelocate = relocateData.$nodeToRelocate$;
1205
- if (!nodeToRelocate['s-ol']) {
1206
- // add a reference node marking this node's original location
1207
- // keep a reference to this node for later lookups
1208
- orgLocationNode =
1209
- BUILD.isDebug || BUILD.hydrateServerSide
1210
- ? originalLocationDebugNode(nodeToRelocate)
1211
- : doc.createTextNode('');
1212
- orgLocationNode['s-nr'] = nodeToRelocate;
1213
- nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
1214
- }
1215
- }
1216
- for (i = 0; i < relocateNodes.length; i++) {
1217
- relocateData = relocateNodes[i];
1218
- nodeToRelocate = relocateData.$nodeToRelocate$;
1219
- if (relocateData.$slotRefNode$) {
1220
- // by default we're just going to insert it directly
1221
- // after the slot reference node
1222
- parentNodeRef = relocateData.$slotRefNode$.parentNode;
1223
- insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
1224
- orgLocationNode = nodeToRelocate['s-ol'];
1225
- while ((orgLocationNode = orgLocationNode.previousSibling)) {
1226
- refNode = orgLocationNode['s-nr'];
1227
- if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
1228
- refNode = refNode.nextSibling;
1229
- if (!refNode || !refNode['s-nr']) {
1230
- insertBeforeNode = refNode;
1231
- break;
1232
- }
1233
- }
1234
- }
1235
- if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
1236
- nodeToRelocate.nextSibling !== insertBeforeNode) {
1237
- // we've checked that it's worth while to relocate
1238
- // since that the node to relocate
1239
- // has a different next sibling or parent relocated
1240
- if (nodeToRelocate !== insertBeforeNode) {
1241
- if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
1242
- // probably a component in the index.html that doesn't have it's hostname set
1243
- nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
1244
- }
1245
- // add it back to the dom but in its new home
1246
- parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
1247
- }
1248
- }
1249
- }
1250
- else {
1251
- // this node doesn't have a slot home to go to, so let's hide it
1252
- if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
1253
- nodeToRelocate.hidden = true;
1254
- }
1255
- }
1256
- }
1257
- }
1258
- if (checkSlotFallbackVisibility) {
1259
- updateFallbackSlotVisibility(rootVnode.$elm$);
1260
- }
1261
- // done moving nodes around
1262
- // allow the disconnect callback to work again
1263
- plt.$flags$ &= ~1 /* isTmpDisconnected */;
1264
- // always reset
1265
- relocateNodes.length = 0;
1266
- }
1267
- };
1268
- // slot comment debug nodes only created with the `--debug` flag
1269
- // otherwise these nodes are text nodes w/out content
1270
- const slotReferenceDebugNode = (slotVNode) => doc.createComment(`<slot${slotVNode.$name$ ? ' name="' + slotVNode.$name$ + '"' : ''}> (host=${hostTagName.toLowerCase()})`);
1271
- const originalLocationDebugNode = (nodeToRelocate) => doc.createComment(`org-location for ` +
1272
- (nodeToRelocate.localName
1273
- ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate['s-hn']})`
1274
- : `[${nodeToRelocate.textContent}]`));
1275
- const getElement = (ref) => (BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref);
1276
- const createEvent = (ref, name, flags) => {
1277
- const elm = getElement(ref);
1278
- return {
1279
- emit: (detail) => {
1280
- if (BUILD.isDev && !elm.isConnected) {
1281
- consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
1282
- }
1283
- return emitEvent(elm, name, {
1284
- bubbles: !!(flags & 4 /* Bubbles */),
1285
- composed: !!(flags & 2 /* Composed */),
1286
- cancelable: !!(flags & 1 /* Cancellable */),
1287
- detail,
1288
- });
1289
- },
1290
- };
1291
- };
1292
- /**
1293
- * Helper function to create & dispatch a custom Event on a provided target
1294
- * @param elm the target of the Event
1295
- * @param name the name to give the custom Event
1296
- * @param opts options for configuring a custom Event
1297
- * @returns the custom Event
1298
- */
1299
- const emitEvent = (elm, name, opts) => {
1300
- const ev = plt.ce(name, opts);
1301
- elm.dispatchEvent(ev);
1302
- return ev;
1303
- };
1304
- const attachToAncestor = (hostRef, ancestorComponent) => {
1305
- if (BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
1306
- ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
1307
- }
1308
- };
1309
- const scheduleUpdate = (hostRef, isInitialLoad) => {
1310
- if (BUILD.taskQueue && BUILD.updatable) {
1311
- hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
1312
- }
1313
- if (BUILD.asyncLoading && hostRef.$flags$ & 4 /* isWaitingForChildren */) {
1314
- hostRef.$flags$ |= 512 /* needsRerender */;
1315
- return;
1316
- }
1317
- attachToAncestor(hostRef, hostRef.$ancestorComponent$);
1318
- // there is no ancestor component or the ancestor component
1319
- // has already fired off its lifecycle update then
1320
- // fire off the initial update
1321
- const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
1322
- return BUILD.taskQueue ? writeTask(dispatch) : dispatch();
1323
- };
1324
- const dispatchHooks = (hostRef, isInitialLoad) => {
1325
- const elm = hostRef.$hostElement$;
1326
- const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
1327
- const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
1328
- let promise;
1329
- if (isInitialLoad) {
1330
- if (BUILD.lazyLoad && BUILD.hostListener) {
1331
- hostRef.$flags$ |= 256 /* isListenReady */;
1332
- if (hostRef.$queuedListeners$) {
1333
- hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
1334
- hostRef.$queuedListeners$ = null;
1335
- }
1336
- }
1337
- emitLifecycleEvent(elm, 'componentWillLoad');
1338
- if (BUILD.cmpWillLoad) {
1339
- promise = safeCall(instance, 'componentWillLoad');
1340
- }
1341
- }
1342
- else {
1343
- emitLifecycleEvent(elm, 'componentWillUpdate');
1344
- if (BUILD.cmpWillUpdate) {
1345
- promise = safeCall(instance, 'componentWillUpdate');
1346
- }
1347
- }
1348
- emitLifecycleEvent(elm, 'componentWillRender');
1349
- if (BUILD.cmpWillRender) {
1350
- promise = then(promise, () => safeCall(instance, 'componentWillRender'));
1351
- }
1352
- endSchedule();
1353
- return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
1354
- };
1355
- const updateComponent = async (hostRef, instance, isInitialLoad) => {
1356
- // updateComponent
1357
- const elm = hostRef.$hostElement$;
1358
- const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
1359
- const rc = elm['s-rc'];
1360
- if (BUILD.style && isInitialLoad) {
1361
- // DOM WRITE!
1362
- attachStyles(hostRef);
1363
- }
1364
- const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
1365
- if (BUILD.isDev) {
1366
- hostRef.$flags$ |= 1024 /* devOnRender */;
1367
- }
1368
- if (BUILD.hydrateServerSide) {
1369
- await callRender(hostRef, instance, elm);
1370
- }
1371
- else {
1372
- callRender(hostRef, instance, elm);
1373
- }
1374
- if (BUILD.cssVarShim && plt.$cssShim$) {
1375
- plt.$cssShim$.updateHost(elm);
1376
- }
1377
- if (BUILD.isDev) {
1378
- hostRef.$renderCount$++;
1379
- hostRef.$flags$ &= ~1024 /* devOnRender */;
1380
- }
1381
- if (BUILD.hydrateServerSide) {
1382
- try {
1383
- // manually connected child components during server-side hydrate
1384
- serverSideConnected(elm);
1385
- if (isInitialLoad) {
1386
- // using only during server-side hydrate
1387
- if (hostRef.$cmpMeta$.$flags$ & 1 /* shadowDomEncapsulation */) {
1388
- elm['s-en'] = '';
1389
- }
1390
- else if (hostRef.$cmpMeta$.$flags$ & 2 /* scopedCssEncapsulation */) {
1391
- elm['s-en'] = 'c';
1392
- }
1393
- }
1394
- }
1395
- catch (e) {
1396
- consoleError(e, elm);
1397
- }
1398
- }
1399
- if (BUILD.asyncLoading && rc) {
1400
- // ok, so turns out there are some child host elements
1401
- // waiting on this parent element to load
1402
- // let's fire off all update callbacks waiting
1403
- rc.map((cb) => cb());
1404
- elm['s-rc'] = undefined;
1405
- }
1406
- endRender();
1407
- endUpdate();
1408
- if (BUILD.asyncLoading) {
1409
- const childrenPromises = elm['s-p'];
1410
- const postUpdate = () => postUpdateComponent(hostRef);
1411
- if (childrenPromises.length === 0) {
1412
- postUpdate();
1413
- }
1414
- else {
1415
- Promise.all(childrenPromises).then(postUpdate);
1416
- hostRef.$flags$ |= 4 /* isWaitingForChildren */;
1417
- childrenPromises.length = 0;
1418
- }
1419
- }
1420
- else {
1421
- postUpdateComponent(hostRef);
1422
- }
1423
- };
1424
- const callRender = (hostRef, instance, elm) => {
1425
- // in order for bundlers to correctly treeshake the BUILD object
1426
- // we need to ensure BUILD is not deoptimized within a try/catch
1427
- // https://rollupjs.org/guide/en/#treeshake tryCatchDeoptimization
1428
- const allRenderFn = BUILD.allRenderFn ? true : false;
1429
- const lazyLoad = BUILD.lazyLoad ? true : false;
1430
- const taskQueue = BUILD.taskQueue ? true : false;
1431
- const updatable = BUILD.updatable ? true : false;
1432
- try {
1433
- renderingRef = instance;
1434
- instance = allRenderFn ? instance.render() : instance.render && instance.render();
1435
- if (updatable && taskQueue) {
1436
- hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
1437
- }
1438
- if (updatable || lazyLoad) {
1439
- hostRef.$flags$ |= 2 /* hasRendered */;
1440
- }
1441
- if (BUILD.hasRenderFn || BUILD.reflect) {
1442
- if (BUILD.vdomRender || BUILD.reflect) {
1443
- // looks like we've got child nodes to render into this host element
1444
- // or we need to update the css class/attrs on the host element
1445
- // DOM WRITE!
1446
- if (BUILD.hydrateServerSide) {
1447
- return Promise.resolve(instance).then((value) => renderVdom(hostRef, value));
1448
- }
1449
- else {
1450
- renderVdom(hostRef, instance);
1451
- }
1452
- }
1453
- else {
1454
- elm.textContent = instance;
1455
- }
1456
- }
1457
- }
1458
- catch (e) {
1459
- consoleError(e, hostRef.$hostElement$);
1460
- }
1461
- renderingRef = null;
1462
- return null;
1463
- };
1464
- const getRenderingRef = () => renderingRef;
1465
- const postUpdateComponent = (hostRef) => {
1466
- const tagName = hostRef.$cmpMeta$.$tagName$;
1467
- const elm = hostRef.$hostElement$;
1468
- const endPostUpdate = createTime('postUpdate', tagName);
1469
- const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
1470
- const ancestorComponent = hostRef.$ancestorComponent$;
1471
- if (BUILD.cmpDidRender) {
1472
- if (BUILD.isDev) {
1473
- hostRef.$flags$ |= 1024 /* devOnRender */;
1474
- }
1475
- safeCall(instance, 'componentDidRender');
1476
- if (BUILD.isDev) {
1477
- hostRef.$flags$ &= ~1024 /* devOnRender */;
1478
- }
1479
- }
1480
- emitLifecycleEvent(elm, 'componentDidRender');
1481
- if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
1482
- hostRef.$flags$ |= 64 /* hasLoadedComponent */;
1483
- if (BUILD.asyncLoading && BUILD.cssAnnotations) {
1484
- // DOM WRITE!
1485
- addHydratedFlag(elm);
1486
- }
1487
- if (BUILD.cmpDidLoad) {
1488
- if (BUILD.isDev) {
1489
- hostRef.$flags$ |= 2048 /* devOnDidLoad */;
1490
- }
1491
- safeCall(instance, 'componentDidLoad');
1492
- if (BUILD.isDev) {
1493
- hostRef.$flags$ &= ~2048 /* devOnDidLoad */;
1494
- }
1495
- }
1496
- emitLifecycleEvent(elm, 'componentDidLoad');
1497
- endPostUpdate();
1498
- if (BUILD.asyncLoading) {
1499
- hostRef.$onReadyResolve$(elm);
1500
- if (!ancestorComponent) {
1501
- appDidLoad(tagName);
1502
- }
1503
- }
1504
- }
1505
- else {
1506
- if (BUILD.cmpDidUpdate) {
1507
- // we've already loaded this component
1508
- // fire off the user's componentDidUpdate method (if one was provided)
1509
- // componentDidUpdate runs AFTER render() has been called
1510
- // and all child components have finished updating
1511
- if (BUILD.isDev) {
1512
- hostRef.$flags$ |= 1024 /* devOnRender */;
1513
- }
1514
- safeCall(instance, 'componentDidUpdate');
1515
- if (BUILD.isDev) {
1516
- hostRef.$flags$ &= ~1024 /* devOnRender */;
1517
- }
1518
- }
1519
- emitLifecycleEvent(elm, 'componentDidUpdate');
1520
- endPostUpdate();
1521
- }
1522
- if (BUILD.hotModuleReplacement) {
1523
- elm['s-hmr-load'] && elm['s-hmr-load']();
1524
- }
1525
- if (BUILD.method && BUILD.lazyLoad) {
1526
- hostRef.$onInstanceResolve$(elm);
1527
- }
1528
- // load events fire from bottom to top
1529
- // the deepest elements load first then bubbles up
1530
- if (BUILD.asyncLoading) {
1531
- if (hostRef.$onRenderResolve$) {
1532
- hostRef.$onRenderResolve$();
1533
- hostRef.$onRenderResolve$ = undefined;
1534
- }
1535
- if (hostRef.$flags$ & 512 /* needsRerender */) {
1536
- nextTick(() => scheduleUpdate(hostRef, false));
1537
- }
1538
- hostRef.$flags$ &= ~(4 /* isWaitingForChildren */ | 512 /* needsRerender */);
1539
- }
1540
- // ( •_•)
1541
- // ( •_•)>⌐■-■
1542
- // (⌐■_■)
1543
- };
1544
- const forceUpdate = (ref) => {
1545
- if (BUILD.updatable) {
1546
- const hostRef = getHostRef(ref);
1547
- const isConnected = hostRef.$hostElement$.isConnected;
1548
- if (isConnected &&
1549
- (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
1550
- scheduleUpdate(hostRef, false);
1551
- }
1552
- // Returns "true" when the forced update was successfully scheduled
1553
- return isConnected;
1554
- }
1555
- return false;
1556
- };
1557
- const appDidLoad = (who) => {
1558
- // on appload
1559
- // we have finish the first big initial render
1560
- if (BUILD.cssAnnotations) {
1561
- addHydratedFlag(doc.documentElement);
1562
- }
1563
- if (BUILD.asyncQueue) {
1564
- plt.$flags$ |= 2 /* appLoaded */;
1565
- }
1566
- nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
1567
- if (BUILD.profile && performance.measure) {
1568
- performance.measure(`[Stencil] ${NAMESPACE} initial load (by ${who})`, 'st:app:start');
1569
- }
1570
- };
1571
- const safeCall = (instance, method, arg) => {
1572
- if (instance && instance[method]) {
1573
- try {
1574
- return instance[method](arg);
1575
- }
1576
- catch (e) {
1577
- consoleError(e);
1578
- }
1579
- }
1580
- return undefined;
1581
- };
1582
- const then = (promise, thenFn) => {
1583
- return promise && promise.then ? promise.then(thenFn) : thenFn();
1584
- };
1585
- const emitLifecycleEvent = (elm, lifecycleName) => {
1586
- if (BUILD.lifecycleDOMEvents) {
1587
- emitEvent(elm, 'stencil_' + lifecycleName, {
1588
- bubbles: true,
1589
- composed: true,
1590
- detail: {
1591
- namespace: NAMESPACE,
1592
- },
1593
- });
1594
- }
1595
- };
1596
- const addHydratedFlag = (elm) => BUILD.hydratedClass
1597
- ? elm.classList.add('hydrated')
1598
- : BUILD.hydratedAttribute
1599
- ? elm.setAttribute('hydrated', '')
1600
- : undefined;
1601
- const serverSideConnected = (elm) => {
1602
- const children = elm.children;
1603
- if (children != null) {
1604
- for (let i = 0, ii = children.length; i < ii; i++) {
1605
- const childElm = children[i];
1606
- if (typeof childElm.connectedCallback === 'function') {
1607
- childElm.connectedCallback();
1608
- }
1609
- serverSideConnected(childElm);
1610
- }
1611
- }
1612
- };
1613
- const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
1614
- const endHydrate = createTime('hydrateClient', tagName);
1615
- const shadowRoot = hostElm.shadowRoot;
1616
- const childRenderNodes = [];
1617
- const slotNodes = [];
1618
- const shadowRootNodes = BUILD.shadowDom && shadowRoot ? [] : null;
1619
- const vnode = (hostRef.$vnode$ = newVNode(tagName, null));
1620
- if (!plt.$orgLocNodes$) {
1621
- initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));
1622
- }
1623
- hostElm[HYDRATE_ID] = hostId;
1624
- hostElm.removeAttribute(HYDRATE_ID);
1625
- clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
1626
- childRenderNodes.map((c) => {
1627
- const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
1628
- const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
1629
- const node = c.$elm$;
1630
- if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
1631
- orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
1632
- }
1633
- if (!shadowRoot) {
1634
- node['s-hn'] = tagName;
1635
- if (orgLocationNode) {
1636
- node['s-ol'] = orgLocationNode;
1637
- node['s-ol']['s-nr'] = node;
1638
- }
1639
- }
1640
- plt.$orgLocNodes$.delete(orgLocationId);
1641
- });
1642
- if (BUILD.shadowDom && shadowRoot) {
1643
- shadowRootNodes.map((shadowRootNode) => {
1644
- if (shadowRootNode) {
1645
- shadowRoot.appendChild(shadowRootNode);
1646
- }
1647
- });
1648
- }
1649
- endHydrate();
1650
- };
1651
- const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
1652
- let childNodeType;
1653
- let childIdSplt;
1654
- let childVNode;
1655
- let i;
1656
- if (node.nodeType === 1 /* ElementNode */) {
1657
- childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
1658
- if (childNodeType) {
1659
- // got the node data from the element's attribute
1660
- // `${hostId}.${nodeId}.${depth}.${index}`
1661
- childIdSplt = childNodeType.split('.');
1662
- if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
1663
- childVNode = {
1664
- $flags$: 0,
1665
- $hostId$: childIdSplt[0],
1666
- $nodeId$: childIdSplt[1],
1667
- $depth$: childIdSplt[2],
1668
- $index$: childIdSplt[3],
1669
- $tag$: node.tagName.toLowerCase(),
1670
- $elm$: node,
1671
- $attrs$: null,
1672
- $children$: null,
1673
- $key$: null,
1674
- $name$: null,
1675
- $text$: null,
1676
- };
1677
- childRenderNodes.push(childVNode);
1678
- node.removeAttribute(HYDRATE_CHILD_ID);
1679
- // this is a new child vnode
1680
- // so ensure its parent vnode has the vchildren array
1681
- if (!parentVNode.$children$) {
1682
- parentVNode.$children$ = [];
1683
- }
1684
- // add our child vnode to a specific index of the vnode's children
1685
- parentVNode.$children$[childVNode.$index$] = childVNode;
1686
- // this is now the new parent vnode for all the next child checks
1687
- parentVNode = childVNode;
1688
- if (shadowRootNodes && childVNode.$depth$ === '0') {
1689
- shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
1690
- }
1691
- }
1692
- }
1693
- // recursively drill down, end to start so we can remove nodes
1694
- for (i = node.childNodes.length - 1; i >= 0; i--) {
1695
- clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);
1696
- }
1697
- if (node.shadowRoot) {
1698
- // keep drilling down through the shadow root nodes
1699
- for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
1700
- clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);
1701
- }
1702
- }
1703
- }
1704
- else if (node.nodeType === 8 /* CommentNode */) {
1705
- // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`
1706
- childIdSplt = node.nodeValue.split('.');
1707
- if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
1708
- // comment node for either the host id or a 0 host id
1709
- childNodeType = childIdSplt[0];
1710
- childVNode = {
1711
- $flags$: 0,
1712
- $hostId$: childIdSplt[1],
1713
- $nodeId$: childIdSplt[2],
1714
- $depth$: childIdSplt[3],
1715
- $index$: childIdSplt[4],
1716
- $elm$: node,
1717
- $attrs$: null,
1718
- $children$: null,
1719
- $key$: null,
1720
- $name$: null,
1721
- $tag$: null,
1722
- $text$: null,
1723
- };
1724
- if (childNodeType === TEXT_NODE_ID) {
1725
- childVNode.$elm$ = node.nextSibling;
1726
- if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* TextNode */) {
1727
- childVNode.$text$ = childVNode.$elm$.textContent;
1728
- childRenderNodes.push(childVNode);
1729
- // remove the text comment since it's no longer needed
1730
- node.remove();
1731
- if (!parentVNode.$children$) {
1732
- parentVNode.$children$ = [];
1733
- }
1734
- parentVNode.$children$[childVNode.$index$] = childVNode;
1735
- if (shadowRootNodes && childVNode.$depth$ === '0') {
1736
- shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
1737
- }
1738
- }
1739
- }
1740
- else if (childVNode.$hostId$ === hostId) {
1741
- // this comment node is specifcally for this host id
1742
- if (childNodeType === SLOT_NODE_ID) {
1743
- // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
1744
- childVNode.$tag$ = 'slot';
1745
- if (childIdSplt[5]) {
1746
- node['s-sn'] = childVNode.$name$ = childIdSplt[5];
1747
- }
1748
- else {
1749
- node['s-sn'] = '';
1750
- }
1751
- node['s-sr'] = true;
1752
- if (BUILD.shadowDom && shadowRootNodes) {
1753
- // browser support shadowRoot and this is a shadow dom component
1754
- // create an actual slot element
1755
- childVNode.$elm$ = doc.createElement(childVNode.$tag$);
1756
- if (childVNode.$name$) {
1757
- // add the slot name attribute
1758
- childVNode.$elm$.setAttribute('name', childVNode.$name$);
1759
- }
1760
- // insert the new slot element before the slot comment
1761
- node.parentNode.insertBefore(childVNode.$elm$, node);
1762
- // remove the slot comment since it's not needed for shadow
1763
- node.remove();
1764
- if (childVNode.$depth$ === '0') {
1765
- shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
1766
- }
1767
- }
1768
- slotNodes.push(childVNode);
1769
- if (!parentVNode.$children$) {
1770
- parentVNode.$children$ = [];
1771
- }
1772
- parentVNode.$children$[childVNode.$index$] = childVNode;
1773
- }
1774
- else if (childNodeType === CONTENT_REF_ID) {
1775
- // `${CONTENT_REF_ID}.${hostId}`;
1776
- if (BUILD.shadowDom && shadowRootNodes) {
1777
- // remove the content ref comment since it's not needed for shadow
1778
- node.remove();
1779
- }
1780
- else if (BUILD.slotRelocation) {
1781
- hostElm['s-cr'] = node;
1782
- node['s-cn'] = true;
1783
- }
1784
- }
1785
- }
1786
- }
1787
- }
1788
- else if (parentVNode && parentVNode.$tag$ === 'style') {
1789
- const vnode = newVNode(null, node.textContent);
1790
- vnode.$elm$ = node;
1791
- vnode.$index$ = '0';
1792
- parentVNode.$children$ = [vnode];
1793
- }
1794
- };
1795
- const initializeDocumentHydrate = (node, orgLocNodes) => {
1796
- if (node.nodeType === 1 /* ElementNode */) {
1797
- let i = 0;
1798
- for (; i < node.childNodes.length; i++) {
1799
- initializeDocumentHydrate(node.childNodes[i], orgLocNodes);
1800
- }
1801
- if (node.shadowRoot) {
1802
- for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
1803
- initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
1804
- }
1805
- }
1806
- }
1807
- else if (node.nodeType === 8 /* CommentNode */) {
1808
- const childIdSplt = node.nodeValue.split('.');
1809
- if (childIdSplt[0] === ORG_LOCATION_ID) {
1810
- orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
1811
- node.nodeValue = '';
1812
- // useful to know if the original location is
1813
- // the root light-dom of a shadow dom component
1814
- node['s-en'] = childIdSplt[3];
1815
- }
1816
- }
1817
- };
1818
- const parsePropertyValue = (propValue, propType) => {
1819
- // ensure this value is of the correct prop type
1820
- if (propValue != null && !isComplexType(propValue)) {
1821
- if (BUILD.propBoolean && propType & 4 /* Boolean */) {
1822
- // per the HTML spec, any string value means it is a boolean true value
1823
- // but we'll cheat here and say that the string "false" is the boolean false
1824
- return propValue === 'false' ? false : propValue === '' || !!propValue;
1825
- }
1826
- if (BUILD.propNumber && propType & 2 /* Number */) {
1827
- // force it to be a number
1828
- return parseFloat(propValue);
1829
- }
1830
- if (BUILD.propString && propType & 1 /* String */) {
1831
- // could have been passed as a number or boolean
1832
- // but we still want it as a string
1833
- return String(propValue);
1834
- }
1835
- // redundant return here for better minification
1836
- return propValue;
1837
- }
1838
- // not sure exactly what type we want
1839
- // so no need to change to a different type
1840
- return propValue;
1841
- };
1842
- const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
1843
- const setValue = (ref, propName, newVal, cmpMeta) => {
1844
- // check our new property value against our internal value
1845
- const hostRef = getHostRef(ref);
1846
- const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : ref;
1847
- const oldVal = hostRef.$instanceValues$.get(propName);
1848
- const flags = hostRef.$flags$;
1849
- const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
1850
- newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
1851
- if ((!BUILD.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
1852
- // gadzooks! the property's value has changed!!
1853
- // set our new value!
1854
- hostRef.$instanceValues$.set(propName, newVal);
1855
- if (BUILD.isDev) {
1856
- if (hostRef.$flags$ & 1024 /* devOnRender */) {
1857
- 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);
1858
- }
1859
- else if (hostRef.$flags$ & 2048 /* devOnDidLoad */) {
1860
- 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);
1861
- }
1862
- }
1863
- if (!BUILD.lazyLoad || instance) {
1864
- // get an array of method names of watch functions to call
1865
- if (BUILD.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
1866
- const watchMethods = cmpMeta.$watchers$[propName];
1867
- if (watchMethods) {
1868
- // this instance is watching for when this property changed
1869
- watchMethods.map((watchMethodName) => {
1870
- try {
1871
- // fire off each of the watch methods that are watching this property
1872
- instance[watchMethodName](newVal, oldVal, propName);
1873
- }
1874
- catch (e) {
1875
- consoleError(e, elm);
1876
- }
1877
- });
1878
- }
1879
- }
1880
- if (BUILD.updatable &&
1881
- (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
1882
- if (BUILD.cmpShouldUpdate && instance.componentShouldUpdate) {
1883
- if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
1884
- return;
1885
- }
1886
- }
1887
- // looks like this value actually changed, so we've got work to do!
1888
- // but only if we've already rendered, otherwise just chill out
1889
- // queue that we need to do an update, but don't worry about queuing
1890
- // up millions cuz this function ensures it only runs once
1891
- scheduleUpdate(hostRef, false);
1892
- }
1893
- }
1894
- }
1895
- };
1896
- const proxyComponent = (Cstr, cmpMeta, flags) => {
1897
- if (BUILD.member && cmpMeta.$members$) {
1898
- if (BUILD.watchCallback && Cstr.watchers) {
1899
- cmpMeta.$watchers$ = Cstr.watchers;
1900
- }
1901
- // It's better to have a const than two Object.entries()
1902
- const members = Object.entries(cmpMeta.$members$);
1903
- const prototype = Cstr.prototype;
1904
- members.map(([memberName, [memberFlags]]) => {
1905
- if ((BUILD.prop || BUILD.state) &&
1906
- (memberFlags & 31 /* Prop */ ||
1907
- ((!BUILD.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
1908
- // proxyComponent - prop
1909
- Object.defineProperty(prototype, memberName, {
1910
- get() {
1911
- // proxyComponent, get value
1912
- return getValue(this, memberName);
1913
- },
1914
- set(newValue) {
1915
- // only during dev time
1916
- if (BUILD.isDev) {
1917
- const ref = getHostRef(this);
1918
- if (
1919
- // we are proxying the instance (not element)
1920
- (flags & 1 /* isElementConstructor */) === 0 &&
1921
- // the element is not constructing
1922
- (ref.$flags$ & 8 /* isConstructingInstance */) === 0 &&
1923
- // the member is a prop
1924
- (memberFlags & 31 /* Prop */) !== 0 &&
1925
- // the member is not mutable
1926
- (memberFlags & 1024 /* Mutable */) === 0) {
1927
- consoleDevWarn(`@Prop() "${memberName}" on <${cmpMeta.$tagName$}> is immutable but was modified from within the component.\nMore information: https://stenciljs.com/docs/properties#prop-mutability`);
1928
- }
1929
- }
1930
- // proxyComponent, set value
1931
- setValue(this, memberName, newValue, cmpMeta);
1932
- },
1933
- configurable: true,
1934
- enumerable: true,
1935
- });
1936
- }
1937
- else if (BUILD.lazyLoad &&
1938
- BUILD.method &&
1939
- flags & 1 /* isElementConstructor */ &&
1940
- memberFlags & 64 /* Method */) {
1941
- // proxyComponent - method
1942
- Object.defineProperty(prototype, memberName, {
1943
- value(...args) {
1944
- const ref = getHostRef(this);
1945
- return ref.$onInstancePromise$.then(() => ref.$lazyInstance$[memberName](...args));
1946
- },
1947
- });
1948
- }
1949
- });
1950
- if (BUILD.observeAttribute && (!BUILD.lazyLoad || flags & 1 /* isElementConstructor */)) {
1951
- const attrNameToPropName = new Map();
1952
- prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
1953
- plt.jmp(() => {
1954
- const propName = attrNameToPropName.get(attrName);
1955
- // In a webcomponent lifecyle the attributeChangedCallback runs prior to connectedCallback
1956
- // in the case where an attribute was set inline.
1957
- // ```html
1958
- // <my-component some-attribute="some-value"></my-component>
1959
- // ```
1960
- //
1961
- // There is an edge case where a developer sets the attribute inline on a custom element and then programatically
1962
- // changes it before it has been upgraded as shown below:
1963
- //
1964
- // ```html
1965
- // <!-- this component has _not_ been upgraded yet -->
1966
- // <my-component id="test" some-attribute="some-value"></my-component>
1967
- // <script>
1968
- // // grab non-upgraded component
1969
- // el = document.querySelector("#test");
1970
- // el.someAttribute = "another-value";
1971
- // // upgrade component
1972
- // cutsomElements.define('my-component', MyComponent);
1973
- // </script>
1974
- // ```
1975
- // In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
1976
- // will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
1977
- // to the value that was set inline i.e. "some-value" from above example. When
1978
- // the connectedCallback attempts to unshadow it will use "some-value" as the intial value rather than "another-value"
1979
- //
1980
- // The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
1981
- // by connectedCallback as this attributeChangedCallback will not fire.
1982
- //
1983
- // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
1984
- //
1985
- // TODO(STENCIL-16) we should think about whether or not we actually want to be reflecting the attributes to
1986
- // properties here given that this goes against best practices outlined here
1987
- // https://developers.google.com/web/fundamentals/web-components/best-practices#avoid-reentrancy
1988
- if (this.hasOwnProperty(propName)) {
1989
- newValue = this[propName];
1990
- delete this[propName];
1991
- }
1992
- this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
1993
- });
1994
- };
1995
- // create an array of attributes to observe
1996
- // and also create a map of html attribute name to js property name
1997
- Cstr.observedAttributes = members
1998
- .filter(([_, m]) => m[0] & 15 /* HasAttribute */) // filter to only keep props that should match attributes
1999
- .map(([propName, m]) => {
2000
- const attrName = m[1] || propName;
2001
- attrNameToPropName.set(attrName, propName);
2002
- if (BUILD.reflect && m[0] & 512 /* ReflectAttr */) {
2003
- cmpMeta.$attrsToReflect$.push([propName, attrName]);
2004
- }
2005
- return attrName;
2006
- });
2007
- }
2008
- }
2009
- return Cstr;
2010
- };
2011
- const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
2012
- // initializeComponent
2013
- if ((BUILD.lazyLoad || BUILD.hydrateServerSide || BUILD.style) &&
2014
- (hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
2015
- if (BUILD.lazyLoad || BUILD.hydrateClientSide) {
2016
- // we haven't initialized this element yet
2017
- hostRef.$flags$ |= 32 /* hasInitializedComponent */;
2018
- // lazy loaded components
2019
- // request the component's implementation to be
2020
- // wired up with the host element
2021
- Cstr = loadModule(cmpMeta, hostRef, hmrVersionId);
2022
- if (Cstr.then) {
2023
- // Await creates a micro-task avoid if possible
2024
- const endLoad = uniqueTime(`st:load:${cmpMeta.$tagName$}:${hostRef.$modeName$}`, `[Stencil] Load module for <${cmpMeta.$tagName$}>`);
2025
- Cstr = await Cstr;
2026
- endLoad();
2027
- }
2028
- if ((BUILD.isDev || BUILD.isDebug) && !Cstr) {
2029
- throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
2030
- }
2031
- if (BUILD.member && !Cstr.isProxied) {
2032
- // we've never proxied this Constructor before
2033
- // let's add the getters/setters to its prototype before
2034
- // the first time we create an instance of the implementation
2035
- if (BUILD.watchCallback) {
2036
- cmpMeta.$watchers$ = Cstr.watchers;
2037
- }
2038
- proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
2039
- Cstr.isProxied = true;
2040
- }
2041
- const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);
2042
- // ok, time to construct the instance
2043
- // but let's keep track of when we start and stop
2044
- // so that the getters/setters don't incorrectly step on data
2045
- if (BUILD.member) {
2046
- hostRef.$flags$ |= 8 /* isConstructingInstance */;
2047
- }
2048
- // construct the lazy-loaded component implementation
2049
- // passing the hostRef is very important during
2050
- // construction in order to directly wire together the
2051
- // host element and the lazy-loaded instance
2052
- try {
2053
- new Cstr(hostRef);
2054
- }
2055
- catch (e) {
2056
- consoleError(e);
2057
- }
2058
- if (BUILD.member) {
2059
- hostRef.$flags$ &= ~8 /* isConstructingInstance */;
2060
- }
2061
- if (BUILD.watchCallback) {
2062
- hostRef.$flags$ |= 128 /* isWatchReady */;
2063
- }
2064
- endNewInstance();
2065
- fireConnectedCallback(hostRef.$lazyInstance$);
2066
- }
2067
- else {
2068
- // sync constructor component
2069
- Cstr = elm.constructor;
2070
- hostRef.$flags$ |= 32 /* hasInitializedComponent */;
2071
- // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,
2072
- // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_
2073
- // Stencil has completed instantiating the component.
2074
- customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= 128 /* isWatchReady */));
2075
- }
2076
- if (BUILD.style && Cstr.style) {
2077
- // this component has styles but we haven't registered them yet
2078
- let style = Cstr.style;
2079
- if (BUILD.mode && typeof style !== 'string') {
2080
- style = style[(hostRef.$modeName$ = computeMode(elm))];
2081
- if (BUILD.hydrateServerSide && hostRef.$modeName$) {
2082
- elm.setAttribute('s-mode', hostRef.$modeName$);
2083
- }
2084
- }
2085
- const scopeId = getScopeId(cmpMeta, hostRef.$modeName$);
2086
- if (!styles.has(scopeId)) {
2087
- const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
2088
- if (!BUILD.hydrateServerSide &&
2089
- BUILD.shadowDom &&
2090
- BUILD.shadowDomShim &&
2091
- cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
2092
- style = await import('./shadow-css-bc14d9fd.js').then((m) => m.scopeCss(style, scopeId, false));
2093
- }
2094
- registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
2095
- endRegisterStyles();
2096
- }
2097
- }
2098
- }
2099
- // we've successfully created a lazy instance
2100
- const ancestorComponent = hostRef.$ancestorComponent$;
2101
- const schedule = () => scheduleUpdate(hostRef, true);
2102
- if (BUILD.asyncLoading && ancestorComponent && ancestorComponent['s-rc']) {
2103
- // this is the intial load and this component it has an ancestor component
2104
- // but the ancestor component has NOT fired its will update lifecycle yet
2105
- // so let's just cool our jets and wait for the ancestor to continue first
2106
- // this will get fired off when the ancestor component
2107
- // finally gets around to rendering its lazy self
2108
- // fire off the initial update
2109
- ancestorComponent['s-rc'].push(schedule);
2110
- }
2111
- else {
2112
- schedule();
2113
- }
2114
- };
2115
- const fireConnectedCallback = (instance) => {
2116
- if (BUILD.lazyLoad && BUILD.connectedCallback) {
2117
- safeCall(instance, 'connectedCallback');
2118
- }
2119
- };
2120
- const connectedCallback = (elm) => {
2121
- if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
2122
- const hostRef = getHostRef(elm);
2123
- const cmpMeta = hostRef.$cmpMeta$;
2124
- const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
2125
- if (BUILD.hostListenerTargetParent) {
2126
- // only run if we have listeners being attached to a parent
2127
- addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
2128
- }
2129
- if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
2130
- // first time this component has connected
2131
- hostRef.$flags$ |= 1 /* hasConnected */;
2132
- let hostId;
2133
- if (BUILD.hydrateClientSide) {
2134
- hostId = elm.getAttribute(HYDRATE_ID);
2135
- if (hostId) {
2136
- if (BUILD.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
2137
- const scopeId = BUILD.mode
2138
- ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute('s-mode'))
2139
- : addStyle(elm.shadowRoot, cmpMeta);
2140
- elm.classList.remove(scopeId + '-h', scopeId + '-s');
2141
- }
2142
- initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
2143
- }
2144
- }
2145
- if (BUILD.slotRelocation && !hostId) {
2146
- // initUpdate
2147
- // if the slot polyfill is required we'll need to put some nodes
2148
- // in here to act as original content anchors as we move nodes around
2149
- // host element has been connected to the DOM
2150
- if (BUILD.hydrateServerSide ||
2151
- ((BUILD.slot || BUILD.shadowDom) &&
2152
- cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */))) {
2153
- setContentReference(elm);
2154
- }
2155
- }
2156
- if (BUILD.asyncLoading) {
2157
- // find the first ancestor component (if there is one) and register
2158
- // this component as one of the actively loading child components for its ancestor
2159
- let ancestorComponent = elm;
2160
- while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
2161
- // climb up the ancestors looking for the first
2162
- // component that hasn't finished its lifecycle update yet
2163
- if ((BUILD.hydrateClientSide &&
2164
- ancestorComponent.nodeType === 1 /* ElementNode */ &&
2165
- ancestorComponent.hasAttribute('s-id') &&
2166
- ancestorComponent['s-p']) ||
2167
- ancestorComponent['s-p']) {
2168
- // we found this components first ancestor component
2169
- // keep a reference to this component's ancestor component
2170
- attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
2171
- break;
2172
- }
2173
- }
2174
- }
2175
- // Lazy properties
2176
- // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
2177
- if (BUILD.prop && !BUILD.hydrateServerSide && cmpMeta.$members$) {
2178
- Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
2179
- if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
2180
- const value = elm[memberName];
2181
- delete elm[memberName];
2182
- elm[memberName] = value;
2183
- }
2184
- });
2185
- }
2186
- if (BUILD.initializeNextTick) {
2187
- // connectedCallback, taskQueue, initialLoad
2188
- // angular sets attribute AFTER connectCallback
2189
- // https://github.com/angular/angular/issues/18909
2190
- // https://github.com/angular/angular/issues/19940
2191
- nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
2192
- }
2193
- else {
2194
- initializeComponent(elm, hostRef, cmpMeta);
2195
- }
2196
- }
2197
- else {
2198
- // not the first time this has connected
2199
- // reattach any event listeners to the host
2200
- // since they would have been removed when disconnected
2201
- addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
2202
- // fire off connectedCallback() on component instance
2203
- fireConnectedCallback(hostRef.$lazyInstance$);
2204
- }
2205
- endConnected();
2206
- }
2207
- };
2208
- const setContentReference = (elm) => {
2209
- // only required when we're NOT using native shadow dom (slot)
2210
- // or this browser doesn't support native shadow dom
2211
- // and this host element was NOT created with SSR
2212
- // let's pick out the inner content for slot projection
2213
- // create a node to represent where the original
2214
- // content was first placed, which is useful later on
2215
- const contentRefElm = (elm['s-cr'] = doc.createComment(BUILD.isDebug ? `content-ref (host=${elm.localName})` : ''));
2216
- contentRefElm['s-cn'] = true;
2217
- elm.insertBefore(contentRefElm, elm.firstChild);
2218
- };
2219
- const disconnectedCallback = (elm) => {
2220
- if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
2221
- const hostRef = getHostRef(elm);
2222
- const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
2223
- if (BUILD.hostListener) {
2224
- if (hostRef.$rmListeners$) {
2225
- hostRef.$rmListeners$.map((rmListener) => rmListener());
2226
- hostRef.$rmListeners$ = undefined;
2227
- }
2228
- }
2229
- // clear CSS var-shim tracking
2230
- if (BUILD.cssVarShim && plt.$cssShim$) {
2231
- plt.$cssShim$.removeHost(elm);
2232
- }
2233
- if (BUILD.lazyLoad && BUILD.disconnectedCallback) {
2234
- safeCall(instance, 'disconnectedCallback');
2235
- }
2236
- if (BUILD.cmpDidUnload) {
2237
- safeCall(instance, 'componentDidUnload');
2238
- }
2239
- }
2240
- };
2241
- const defineCustomElement = (Cstr, compactMeta) => {
2242
- customElements.define(compactMeta[1], proxyCustomElement(Cstr, compactMeta));
2243
- };
2244
- const proxyCustomElement = (Cstr, compactMeta) => {
2245
- const cmpMeta = {
2246
- $flags$: compactMeta[0],
2247
- $tagName$: compactMeta[1],
2248
- };
2249
- if (BUILD.member) {
2250
- cmpMeta.$members$ = compactMeta[2];
2251
- }
2252
- if (BUILD.hostListener) {
2253
- cmpMeta.$listeners$ = compactMeta[3];
2254
- }
2255
- if (BUILD.watchCallback) {
2256
- cmpMeta.$watchers$ = Cstr.$watchers$;
2257
- }
2258
- if (BUILD.reflect) {
2259
- cmpMeta.$attrsToReflect$ = [];
2260
- }
2261
- if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
2262
- cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
2263
- }
2264
- const originalConnectedCallback = Cstr.prototype.connectedCallback;
2265
- const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
2266
- Object.assign(Cstr.prototype, {
2267
- __registerHost() {
2268
- registerHost(this, cmpMeta);
2269
- },
2270
- connectedCallback() {
2271
- connectedCallback(this);
2272
- if (BUILD.connectedCallback && originalConnectedCallback) {
2273
- originalConnectedCallback.call(this);
2274
- }
2275
- },
2276
- disconnectedCallback() {
2277
- disconnectedCallback(this);
2278
- if (BUILD.disconnectedCallback && originalDisconnectedCallback) {
2279
- originalDisconnectedCallback.call(this);
2280
- }
2281
- },
2282
- });
2283
- Cstr.is = cmpMeta.$tagName$;
2284
- return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
2285
- };
2286
- const forceModeUpdate = (elm) => {
2287
- if (BUILD.style && BUILD.mode && !BUILD.lazyLoad) {
2288
- const mode = computeMode(elm);
2289
- const hostRef = getHostRef(elm);
2290
- if (hostRef.$modeName$ !== mode) {
2291
- const cmpMeta = hostRef.$cmpMeta$;
2292
- const oldScopeId = elm['s-sc'];
2293
- const scopeId = getScopeId(cmpMeta, mode);
2294
- const style = elm.constructor.style[mode];
2295
- const flags = cmpMeta.$flags$;
2296
- if (style) {
2297
- if (!styles.has(scopeId)) {
2298
- registerStyle(scopeId, style, !!(flags & 1 /* shadowDomEncapsulation */));
2299
- }
2300
- hostRef.$modeName$ = mode;
2301
- elm.classList.remove(oldScopeId + '-h', oldScopeId + '-s');
2302
- attachStyles(hostRef);
2303
- forceUpdate(elm);
2304
- }
2305
- }
2306
- }
2307
- };
2308
- const attachShadow = (el) => {
2309
- if (supportsShadow) {
2310
- el.attachShadow({ mode: 'open' });
2311
- }
2312
- else {
2313
- el.shadowRoot = el;
2314
- }
2315
- };
2316
- const hmrStart = (elm, cmpMeta, hmrVersionId) => {
2317
- // ¯\_(ツ)_/¯
2318
- const hostRef = getHostRef(elm);
2319
- // reset state flags to only have been connected
2320
- hostRef.$flags$ = 1 /* hasConnected */;
2321
- // TODO
2322
- // detatch any event listeners that may have been added
2323
- // because we're not passing an exact event name it'll
2324
- // remove all of this element's event, which is good
2325
- // create a callback for when this component finishes hmr
2326
- elm['s-hmr-load'] = () => {
2327
- // finished hmr for this element
2328
- delete elm['s-hmr-load'];
2329
- };
2330
- // re-initialize the component
2331
- initializeComponent(elm, hostRef, cmpMeta, hmrVersionId);
2332
- };
2333
- const patchCloneNode = (HostElementPrototype) => {
2334
- const orgCloneNode = HostElementPrototype.cloneNode;
2335
- HostElementPrototype.cloneNode = function (deep) {
2336
- const srcNode = this;
2337
- const isShadowDom = BUILD.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
2338
- const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
2339
- if (BUILD.slot && !isShadowDom && deep) {
2340
- let i = 0;
2341
- let slotted, nonStencilNode;
2342
- let stencilPrivates = [
2343
- 's-id',
2344
- 's-cr',
2345
- 's-lr',
2346
- 's-rc',
2347
- 's-sc',
2348
- 's-p',
2349
- 's-cn',
2350
- 's-sr',
2351
- 's-sn',
2352
- 's-hn',
2353
- 's-ol',
2354
- 's-nr',
2355
- 's-si',
2356
- ];
2357
- for (; i < srcNode.childNodes.length; i++) {
2358
- slotted = srcNode.childNodes[i]['s-nr'];
2359
- nonStencilNode = stencilPrivates.every((privateField) => !srcNode.childNodes[i][privateField]);
2360
- if (slotted) {
2361
- if (BUILD.appendChildSlotFix && clonedNode.__appendChild) {
2362
- clonedNode.__appendChild(slotted.cloneNode(true));
2363
- }
2364
- else {
2365
- clonedNode.appendChild(slotted.cloneNode(true));
2366
- }
2367
- }
2368
- if (nonStencilNode) {
2369
- clonedNode.appendChild(srcNode.childNodes[i].cloneNode(true));
2370
- }
2371
- }
2372
- }
2373
- return clonedNode;
2374
- };
2375
- };
2376
- const patchSlotAppendChild = (HostElementPrototype) => {
2377
- HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
2378
- HostElementPrototype.appendChild = function (newChild) {
2379
- const slotName = (newChild['s-sn'] = getSlotName(newChild));
2380
- const slotNode = getHostSlotNode(this.childNodes, slotName);
2381
- if (slotNode) {
2382
- const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
2383
- const appendAfter = slotChildNodes[slotChildNodes.length - 1];
2384
- return appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
2385
- }
2386
- return this.__appendChild(newChild);
2387
- };
2388
- };
2389
- /**
2390
- * Patches the text content of an unnamed slotted node inside a scoped component
2391
- * @param hostElementPrototype the `Element` to be patched
2392
- * @param cmpMeta component runtime metadata used to determine if the component should be patched or not
2393
- */
2394
- const patchTextContent = (hostElementPrototype, cmpMeta) => {
2395
- if (BUILD.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
2396
- const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent');
2397
- Object.defineProperty(hostElementPrototype, '__textContent', descriptor);
2398
- Object.defineProperty(hostElementPrototype, 'textContent', {
2399
- get() {
2400
- var _a;
2401
- // get the 'default slot', which would be the first slot in a shadow tree (if we were using one), whose name is
2402
- // the empty string
2403
- const slotNode = getHostSlotNode(this.childNodes, '');
2404
- // when a slot node is found, the textContent _may_ be found in the next sibling (text) node, depending on how
2405
- // nodes were reordered during the vdom render. first try to get the text content from the sibling.
2406
- if (((_a = slotNode === null || slotNode === void 0 ? void 0 : slotNode.nextSibling) === null || _a === void 0 ? void 0 : _a.nodeType) === 3 /* TEXT_NODE */) {
2407
- return slotNode.nextSibling.textContent;
2408
- }
2409
- else if (slotNode) {
2410
- return slotNode.textContent;
2411
- }
2412
- else {
2413
- // fallback to the original implementation
2414
- return this.__textContent;
2415
- }
2416
- },
2417
- set(value) {
2418
- var _a;
2419
- // get the 'default slot', which would be the first slot in a shadow tree (if we were using one), whose name is
2420
- // the empty string
2421
- const slotNode = getHostSlotNode(this.childNodes, '');
2422
- // when a slot node is found, the textContent _may_ need to be placed in the next sibling (text) node,
2423
- // depending on how nodes were reordered during the vdom render. first try to set the text content on the
2424
- // sibling.
2425
- if (((_a = slotNode === null || slotNode === void 0 ? void 0 : slotNode.nextSibling) === null || _a === void 0 ? void 0 : _a.nodeType) === 3 /* TEXT_NODE */) {
2426
- slotNode.nextSibling.textContent = value;
2427
- }
2428
- else if (slotNode) {
2429
- slotNode.textContent = value;
2430
- }
2431
- else {
2432
- // we couldn't find a slot, but that doesn't mean that there isn't one. if this check ran before the DOM
2433
- // loaded, we could have missed it. check for a content reference element on the scoped component and insert
2434
- // it there
2435
- this.__textContent = value;
2436
- const contentRefElm = this['s-cr'];
2437
- if (contentRefElm) {
2438
- this.insertBefore(contentRefElm, this.firstChild);
2439
- }
2440
- }
2441
- },
2442
- });
2443
- }
2444
- };
2445
- const patchChildSlotNodes = (elm, cmpMeta) => {
2446
- class FakeNodeList extends Array {
2447
- item(n) {
2448
- return this[n];
2449
- }
2450
- }
2451
- if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
2452
- const childNodesFn = elm.__lookupGetter__('childNodes');
2453
- Object.defineProperty(elm, 'children', {
2454
- get() {
2455
- return this.childNodes.map((n) => n.nodeType === 1);
2456
- },
2457
- });
2458
- Object.defineProperty(elm, 'childElementCount', {
2459
- get() {
2460
- return elm.children.length;
2461
- },
2462
- });
2463
- Object.defineProperty(elm, 'childNodes', {
2464
- get() {
2465
- const childNodes = childNodesFn.call(this);
2466
- if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0 &&
2467
- getHostRef(this).$flags$ & 2 /* hasRendered */) {
2468
- const result = new FakeNodeList();
2469
- for (let i = 0; i < childNodes.length; i++) {
2470
- const slot = childNodes[i]['s-nr'];
2471
- if (slot) {
2472
- result.push(slot);
2473
- }
2474
- }
2475
- return result;
2476
- }
2477
- return FakeNodeList.from(childNodes);
2478
- },
2479
- });
2480
- }
2481
- };
2482
- const getSlotName = (node) => node['s-sn'] || (node.nodeType === 1 && node.getAttribute('slot')) || '';
2483
- /**
2484
- * Recursively searches a series of child nodes for a slot with the provided name.
2485
- * @param childNodes the nodes to search for a slot with a specific name.
2486
- * @param slotName the name of the slot to match on.
2487
- * @returns a reference to the slot node that matches the provided name, `null` otherwise
2488
- */
2489
- const getHostSlotNode = (childNodes, slotName) => {
2490
- let i = 0;
2491
- let childNode;
2492
- for (; i < childNodes.length; i++) {
2493
- childNode = childNodes[i];
2494
- if (childNode['s-sr'] && childNode['s-sn'] === slotName) {
2495
- return childNode;
2496
- }
2497
- childNode = getHostSlotNode(childNode.childNodes, slotName);
2498
- if (childNode) {
2499
- return childNode;
2500
- }
2501
- }
2502
- return null;
2503
- };
2504
- const getHostSlotChildNodes = (n, slotName) => {
2505
- const childNodes = [n];
2506
- while ((n = n.nextSibling) && n['s-sn'] === slotName) {
2507
- childNodes.push(n);
2508
- }
2509
- return childNodes;
2510
- };
2511
- const bootstrapLazy = (lazyBundles, options = {}) => {
2512
- if (BUILD.profile && performance.mark) {
2513
- performance.mark('st:app:start');
2514
- }
2515
- installDevTools();
2516
- const endBootstrap = createTime('bootstrapLazy');
2517
- const cmpTags = [];
2518
- const exclude = options.exclude || [];
2519
- const customElements = win.customElements;
2520
- const head = doc.head;
2521
- const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
2522
- const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
2523
- const deferredConnectedCallbacks = [];
2524
- const styles = /*@__PURE__*/ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
2525
- let appLoadFallback;
2526
- let isBootstrapping = true;
2527
- let i = 0;
2528
- Object.assign(plt, options);
2529
- plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
2530
- if (BUILD.asyncQueue) {
2531
- if (options.syncQueue) {
2532
- plt.$flags$ |= 4 /* queueSync */;
2533
- }
2534
- }
2535
- if (BUILD.hydrateClientSide) {
2536
- // If the app is already hydrated there is not point to disable the
2537
- // async queue. This will improve the first input delay
2538
- plt.$flags$ |= 2 /* appLoaded */;
2539
- }
2540
- if (BUILD.hydrateClientSide && BUILD.shadowDom) {
2541
- for (; i < styles.length; i++) {
2542
- registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
2543
- }
2544
- }
2545
- lazyBundles.map((lazyBundle) => lazyBundle[1].map((compactMeta) => {
2546
- const cmpMeta = {
2547
- $flags$: compactMeta[0],
2548
- $tagName$: compactMeta[1],
2549
- $members$: compactMeta[2],
2550
- $listeners$: compactMeta[3],
2551
- };
2552
- if (BUILD.member) {
2553
- cmpMeta.$members$ = compactMeta[2];
2554
- }
2555
- if (BUILD.hostListener) {
2556
- cmpMeta.$listeners$ = compactMeta[3];
2557
- }
2558
- if (BUILD.reflect) {
2559
- cmpMeta.$attrsToReflect$ = [];
2560
- }
2561
- if (BUILD.watchCallback) {
2562
- cmpMeta.$watchers$ = {};
2563
- }
2564
- if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
2565
- cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
2566
- }
2567
- const tagName = BUILD.transformTagName && options.transformTagName
2568
- ? options.transformTagName(cmpMeta.$tagName$)
2569
- : cmpMeta.$tagName$;
2570
- const HostElement = class extends HTMLElement {
2571
- // StencilLazyHost
2572
- constructor(self) {
2573
- // @ts-ignore
2574
- super(self);
2575
- self = this;
2576
- registerHost(self, cmpMeta);
2577
- if (BUILD.shadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
2578
- // this component is using shadow dom
2579
- // and this browser supports shadow dom
2580
- // add the read-only property "shadowRoot" to the host element
2581
- // adding the shadow root build conditionals to minimize runtime
2582
- if (supportsShadow) {
2583
- if (BUILD.shadowDelegatesFocus) {
2584
- self.attachShadow({
2585
- mode: 'open',
2586
- delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */),
2587
- });
2588
- }
2589
- else {
2590
- self.attachShadow({ mode: 'open' });
2591
- }
2592
- }
2593
- else if (!BUILD.hydrateServerSide && !('shadowRoot' in self)) {
2594
- self.shadowRoot = self;
2595
- }
2596
- }
2597
- if (BUILD.slotChildNodesFix) {
2598
- patchChildSlotNodes(self, cmpMeta);
2599
- }
2600
- }
2601
- connectedCallback() {
2602
- if (appLoadFallback) {
2603
- clearTimeout(appLoadFallback);
2604
- appLoadFallback = null;
2605
- }
2606
- if (isBootstrapping) {
2607
- // connectedCallback will be processed once all components have been registered
2608
- deferredConnectedCallbacks.push(this);
2609
- }
2610
- else {
2611
- plt.jmp(() => connectedCallback(this));
2612
- }
2613
- }
2614
- disconnectedCallback() {
2615
- plt.jmp(() => disconnectedCallback(this));
2616
- }
2617
- componentOnReady() {
2618
- return getHostRef(this).$onReadyPromise$;
2619
- }
2620
- };
2621
- if (BUILD.cloneNodeFix) {
2622
- patchCloneNode(HostElement.prototype);
2623
- }
2624
- if (BUILD.appendChildSlotFix) {
2625
- patchSlotAppendChild(HostElement.prototype);
2626
- }
2627
- if (BUILD.hotModuleReplacement) {
2628
- HostElement.prototype['s-hmr'] = function (hmrVersionId) {
2629
- hmrStart(this, cmpMeta, hmrVersionId);
2630
- };
2631
- }
2632
- if (BUILD.scopedSlotTextContentFix) {
2633
- patchTextContent(HostElement.prototype, cmpMeta);
2634
- }
2635
- cmpMeta.$lazyBundleId$ = lazyBundle[0];
2636
- if (!exclude.includes(tagName) && !customElements.get(tagName)) {
2637
- cmpTags.push(tagName);
2638
- customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
2639
- }
2640
- }));
2641
- if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) {
2642
- visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
2643
- visibilityStyle.setAttribute('data-styles', '');
2644
- head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
2645
- }
2646
- // Process deferred connectedCallbacks now all components have been registered
2647
- isBootstrapping = false;
2648
- if (deferredConnectedCallbacks.length) {
2649
- deferredConnectedCallbacks.map((host) => host.connectedCallback());
2650
- }
2651
- else {
2652
- if (BUILD.profile) {
2653
- plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30, 'timeout')));
2654
- }
2655
- else {
2656
- plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30)));
2657
- }
2658
- }
2659
- // Fallback appLoad event
2660
- endBootstrap();
2661
- };
2662
- const getAssetPath = (path) => {
2663
- const assetUrl = new URL(path, plt.$resourcesUrl$);
2664
- return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
2665
- };
2666
- const setAssetPath = (path) => (plt.$resourcesUrl$ = path);
2667
- const getConnect = (_ref, tagName) => {
2668
- const componentOnReady = () => {
2669
- let elm = doc.querySelector(tagName);
2670
- if (!elm) {
2671
- elm = doc.createElement(tagName);
2672
- doc.body.appendChild(elm);
2673
- }
2674
- return typeof elm.componentOnReady === 'function' ? elm.componentOnReady() : Promise.resolve(elm);
2675
- };
2676
- const create = (...args) => {
2677
- return componentOnReady().then((el) => el.create(...args));
2678
- };
2679
- return {
2680
- create,
2681
- componentOnReady,
2682
- };
2683
- };
2684
- const getContext = (_elm, context) => {
2685
- if (context in Context) {
2686
- return Context[context];
2687
- }
2688
- else if (context === 'window') {
2689
- return win;
2690
- }
2691
- else if (context === 'document') {
2692
- return doc;
2693
- }
2694
- else if (context === 'isServer' || context === 'isPrerender') {
2695
- return BUILD.hydrateServerSide ? true : false;
2696
- }
2697
- else if (context === 'isClient') {
2698
- return BUILD.hydrateServerSide ? false : true;
2699
- }
2700
- else if (context === 'resourcesUrl' || context === 'publicPath') {
2701
- return getAssetPath('.');
2702
- }
2703
- else if (context === 'queue') {
2704
- return {
2705
- write: writeTask,
2706
- read: readTask,
2707
- tick: {
2708
- then(cb) {
2709
- return nextTick(cb);
2710
- },
2711
- },
2712
- };
2713
- }
2714
- return undefined;
2715
- };
2716
- const insertVdomAnnotations = (doc, staticComponents) => {
2717
- if (doc != null) {
2718
- const docData = {
2719
- hostIds: 0,
2720
- rootLevelIds: 0,
2721
- staticComponents: new Set(staticComponents),
2722
- };
2723
- const orgLocationNodes = [];
2724
- parseVNodeAnnotations(doc, doc.body, docData, orgLocationNodes);
2725
- orgLocationNodes.forEach((orgLocationNode) => {
2726
- if (orgLocationNode != null) {
2727
- const nodeRef = orgLocationNode['s-nr'];
2728
- let hostId = nodeRef['s-host-id'];
2729
- let nodeId = nodeRef['s-node-id'];
2730
- let childId = `${hostId}.${nodeId}`;
2731
- if (hostId == null) {
2732
- hostId = 0;
2733
- docData.rootLevelIds++;
2734
- nodeId = docData.rootLevelIds;
2735
- childId = `${hostId}.${nodeId}`;
2736
- if (nodeRef.nodeType === 1 /* ElementNode */) {
2737
- nodeRef.setAttribute(HYDRATE_CHILD_ID, childId);
2738
- }
2739
- else if (nodeRef.nodeType === 3 /* TextNode */) {
2740
- if (hostId === 0) {
2741
- const textContent = nodeRef.nodeValue.trim();
2742
- if (textContent === '') {
2743
- // useless whitespace node at the document root
2744
- orgLocationNode.remove();
2745
- return;
2746
- }
2747
- }
2748
- const commentBeforeTextNode = doc.createComment(childId);
2749
- commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`;
2750
- nodeRef.parentNode.insertBefore(commentBeforeTextNode, nodeRef);
2751
- }
2752
- }
2753
- let orgLocationNodeId = `${ORG_LOCATION_ID}.${childId}`;
2754
- const orgLocationParentNode = orgLocationNode.parentElement;
2755
- if (orgLocationParentNode) {
2756
- if (orgLocationParentNode['s-en'] === '') {
2757
- // ending with a "." means that the parent element
2758
- // of this node's original location is a SHADOW dom element
2759
- // and this node is apart of the root level light dom
2760
- orgLocationNodeId += `.`;
2761
- }
2762
- else if (orgLocationParentNode['s-en'] === 'c') {
2763
- // ending with a ".c" means that the parent element
2764
- // of this node's original location is a SCOPED element
2765
- // and this node is apart of the root level light dom
2766
- orgLocationNodeId += `.c`;
2767
- }
2768
- }
2769
- orgLocationNode.nodeValue = orgLocationNodeId;
2770
- }
2771
- });
2772
- }
2773
- };
2774
- const parseVNodeAnnotations = (doc, node, docData, orgLocationNodes) => {
2775
- if (node == null) {
2776
- return;
2777
- }
2778
- if (node['s-nr'] != null) {
2779
- orgLocationNodes.push(node);
2780
- }
2781
- if (node.nodeType === 1 /* ElementNode */) {
2782
- node.childNodes.forEach((childNode) => {
2783
- const hostRef = getHostRef(childNode);
2784
- if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) {
2785
- const cmpData = {
2786
- nodeIds: 0,
2787
- };
2788
- insertVNodeAnnotations(doc, childNode, hostRef.$vnode$, docData, cmpData);
2789
- }
2790
- parseVNodeAnnotations(doc, childNode, docData, orgLocationNodes);
2791
- });
2792
- }
2793
- };
2794
- const insertVNodeAnnotations = (doc, hostElm, vnode, docData, cmpData) => {
2795
- if (vnode != null) {
2796
- const hostId = ++docData.hostIds;
2797
- hostElm.setAttribute(HYDRATE_ID, hostId);
2798
- if (hostElm['s-cr'] != null) {
2799
- hostElm['s-cr'].nodeValue = `${CONTENT_REF_ID}.${hostId}`;
2800
- }
2801
- if (vnode.$children$ != null) {
2802
- const depth = 0;
2803
- vnode.$children$.forEach((vnodeChild, index) => {
2804
- insertChildVNodeAnnotations(doc, vnodeChild, cmpData, hostId, depth, index);
2805
- });
2806
- }
2807
- if (hostElm && vnode && vnode.$elm$ && !hostElm.hasAttribute('c-id')) {
2808
- const parent = hostElm.parentElement;
2809
- if (parent && parent.childNodes) {
2810
- const parentChildNodes = Array.from(parent.childNodes);
2811
- const comment = parentChildNodes.find((node) => node.nodeType === 8 /* CommentNode */ && node['s-sr']);
2812
- if (comment) {
2813
- const index = parentChildNodes.indexOf(hostElm) - 1;
2814
- vnode.$elm$.setAttribute(HYDRATE_CHILD_ID, `${comment['s-host-id']}.${comment['s-node-id']}.0.${index}`);
2815
- }
2816
- }
2817
- }
2818
- }
2819
- };
2820
- const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, index) => {
2821
- const childElm = vnodeChild.$elm$;
2822
- if (childElm == null) {
2823
- return;
2824
- }
2825
- const nodeId = cmpData.nodeIds++;
2826
- const childId = `${hostId}.${nodeId}.${depth}.${index}`;
2827
- childElm['s-host-id'] = hostId;
2828
- childElm['s-node-id'] = nodeId;
2829
- if (childElm.nodeType === 1 /* ElementNode */) {
2830
- childElm.setAttribute(HYDRATE_CHILD_ID, childId);
2831
- }
2832
- else if (childElm.nodeType === 3 /* TextNode */) {
2833
- const parentNode = childElm.parentNode;
2834
- const nodeName = parentNode.nodeName;
2835
- if (nodeName !== 'STYLE' && nodeName !== 'SCRIPT') {
2836
- const textNodeId = `${TEXT_NODE_ID}.${childId}`;
2837
- const commentBeforeTextNode = doc.createComment(textNodeId);
2838
- parentNode.insertBefore(commentBeforeTextNode, childElm);
2839
- }
2840
- }
2841
- else if (childElm.nodeType === 8 /* CommentNode */) {
2842
- if (childElm['s-sr']) {
2843
- const slotName = childElm['s-sn'] || '';
2844
- const slotNodeId = `${SLOT_NODE_ID}.${childId}.${slotName}`;
2845
- childElm.nodeValue = slotNodeId;
2846
- }
2847
- }
2848
- if (vnodeChild.$children$ != null) {
2849
- const childDepth = depth + 1;
2850
- vnodeChild.$children$.forEach((vnode, index) => {
2851
- insertChildVNodeAnnotations(doc, vnode, cmpData, hostId, childDepth, index);
2852
- });
2853
- }
2854
- };
2855
- const setPlatformOptions = (opts) => Object.assign(plt, opts);
2856
- const Fragment = (_, children) => children;
2857
- const hostRefs = new WeakMap();
2858
- const getHostRef = (ref) => hostRefs.get(ref);
2859
- const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
2860
- const registerHost = (elm, cmpMeta) => {
2861
- const hostRef = {
2862
- $flags$: 0,
2863
- $hostElement$: elm,
2864
- $cmpMeta$: cmpMeta,
2865
- $instanceValues$: new Map(),
2866
- };
2867
- if (BUILD.isDev) {
2868
- hostRef.$renderCount$ = 0;
2869
- }
2870
- if (BUILD.method && BUILD.lazyLoad) {
2871
- hostRef.$onInstancePromise$ = new Promise((r) => (hostRef.$onInstanceResolve$ = r));
2872
- }
2873
- if (BUILD.asyncLoading) {
2874
- hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
2875
- elm['s-p'] = [];
2876
- elm['s-rc'] = [];
2877
- }
2878
- addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
2879
- return hostRefs.set(elm, hostRef);
2880
- };
2881
- const isMemberInElement = (elm, memberName) => memberName in elm;
2882
- const consoleError = (e, el) => (customError || console.error)(e, el);
2883
- const STENCIL_DEV_MODE = BUILD.isTesting
2884
- ? ['STENCIL:'] // E2E testing
2885
- : [
2886
- '%cstencil',
2887
- 'color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px',
2888
- ];
2889
- const consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);
2890
- const consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
2891
- const consoleDevInfo = (...m) => console.info(...STENCIL_DEV_MODE, ...m);
2892
- const setErrorHandler = (handler) => (customError = handler);
2893
- const cmpModules = /*@__PURE__*/ new Map();
2894
- const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
2895
- // loadModuleImport
2896
- const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
2897
- const bundleId = cmpMeta.$lazyBundleId$;
2898
- if (BUILD.isDev && typeof bundleId !== 'string') {
2899
- consoleDevError(`Trying to lazily load component <${cmpMeta.$tagName$}> with style mode "${hostRef.$modeName$}", but it does not exist.`);
2900
- return undefined;
2901
- }
2902
- const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;
2903
- if (module) {
2904
- return module[exportName];
2905
- }
2906
- return import(
2907
- /* webpackInclude: /\.entry\.js$/ */
2908
- /* webpackExclude: /\.system\.entry\.js$/ */
2909
- /* webpackMode: "lazy" */
2910
- `./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''}`).then((importedModule) => {
2911
- if (!BUILD.hotModuleReplacement) {
2912
- cmpModules.set(bundleId, importedModule);
2913
- }
2914
- return importedModule[exportName];
2915
- }, consoleError);
2916
- };
2917
- const styles = new Map();
2918
- const modeResolutionChain = [];
2919
- const queueDomReads = [];
2920
- const queueDomWrites = [];
2921
- const queueDomWritesLow = [];
2922
- const queueTask = (queue, write) => (cb) => {
2923
- queue.push(cb);
2924
- if (!queuePending) {
2925
- queuePending = true;
2926
- if (write && plt.$flags$ & 4 /* queueSync */) {
2927
- nextTick(flush);
2928
- }
2929
- else {
2930
- plt.raf(flush);
2931
- }
2932
- }
2933
- };
2934
- const consume = (queue) => {
2935
- for (let i = 0; i < queue.length; i++) {
2936
- try {
2937
- queue[i](performance.now());
2938
- }
2939
- catch (e) {
2940
- consoleError(e);
2941
- }
2942
- }
2943
- queue.length = 0;
2944
- };
2945
- const consumeTimeout = (queue, timeout) => {
2946
- let i = 0;
2947
- let ts = 0;
2948
- while (i < queue.length && (ts = performance.now()) < timeout) {
2949
- try {
2950
- queue[i++](ts);
2951
- }
2952
- catch (e) {
2953
- consoleError(e);
2954
- }
2955
- }
2956
- if (i === queue.length) {
2957
- queue.length = 0;
2958
- }
2959
- else if (i !== 0) {
2960
- queue.splice(0, i);
2961
- }
2962
- };
2963
- const flush = () => {
2964
- if (BUILD.asyncQueue) {
2965
- queueCongestion++;
2966
- }
2967
- // always force a bunch of medium callbacks to run, but still have
2968
- // a throttle on how many can run in a certain time
2969
- // DOM READS!!!
2970
- consume(queueDomReads);
2971
- // DOM WRITES!!!
2972
- if (BUILD.asyncQueue) {
2973
- const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */
2974
- ? performance.now() + 14 * Math.ceil(queueCongestion * (1.0 / 10.0))
2975
- : Infinity;
2976
- consumeTimeout(queueDomWrites, timeout);
2977
- consumeTimeout(queueDomWritesLow, timeout);
2978
- if (queueDomWrites.length > 0) {
2979
- queueDomWritesLow.push(...queueDomWrites);
2980
- queueDomWrites.length = 0;
2981
- }
2982
- if ((queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0)) {
2983
- // still more to do yet, but we've run out of time
2984
- // let's let this thing cool off and try again in the next tick
2985
- plt.raf(flush);
2986
- }
2987
- else {
2988
- queueCongestion = 0;
2989
- }
2990
- }
2991
- else {
2992
- consume(queueDomWrites);
2993
- if ((queuePending = queueDomReads.length > 0)) {
2994
- // still more to do yet, but we've run out of time
2995
- // let's let this thing cool off and try again in the next tick
2996
- plt.raf(flush);
2997
- }
2998
- }
2999
- };
3000
- const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
3001
- const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
3002
- const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
3003
- const Build = {
3004
- isDev: BUILD.isDev ? true : false,
3005
- isBrowser: true,
3006
- isServer: false,
3007
- isTesting: BUILD.isTesting ? true : false,
3008
- };
3009
-
3010
- export { BUILD as B, CSS as C, H, NAMESPACE as N, promiseResolve as a, bootstrapLazy as b, consoleDevInfo as c, doc as d, createEvent as e, Host as f, getElement as g, h, plt as p, registerInstance as r, win as w };