f_000002 118 KB

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