@ptcwebops/ptcw-design 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/icon-asset_5.cjs.entry.js +207 -0
- package/dist/{ptcw-design/index-f7043a90.js → cjs/index-ac192914.js} +195 -1311
- package/dist/cjs/index.cjs.js +2 -0
- package/dist/cjs/list-item.cjs.entry.js +27 -0
- package/dist/cjs/loader.cjs.js +21 -0
- package/dist/cjs/lottie-player.cjs.entry.js +13476 -0
- package/dist/cjs/my-component.cjs.entry.js +26 -0
- package/dist/cjs/ptc-card.cjs.entry.js +75 -0
- package/dist/cjs/ptc-date.cjs.entry.js +48 -0
- package/dist/cjs/ptc-footer.cjs.entry.js +19 -0
- package/dist/cjs/ptc-image.cjs.entry.js +58 -0
- package/dist/cjs/ptc-img.cjs.entry.js +160 -0
- package/dist/cjs/ptc-link.cjs.entry.js +53 -0
- package/dist/cjs/ptc-list.cjs.entry.js +32 -0
- package/dist/cjs/ptc-lottie.cjs.entry.js +23 -0
- package/dist/cjs/ptc-nav-item.cjs.entry.js +94 -0
- package/dist/cjs/ptc-nav.cjs.entry.js +19 -0
- package/dist/cjs/ptc-overlay.cjs.entry.js +19 -0
- package/dist/cjs/ptc-picture.cjs.entry.js +26 -0
- package/dist/cjs/ptc-spacer.cjs.entry.js +46 -0
- package/dist/cjs/ptc-span.cjs.entry.js +31 -0
- package/dist/cjs/ptc-title.cjs.entry.js +49 -0
- package/dist/cjs/ptcw-design.cjs.js +19 -0
- package/dist/collection/assets/svg-imgs/close.svg +11 -0
- package/dist/collection/collection-manifest.json +40 -0
- package/dist/collection/components/icon-asset/assets/brands.svg +1381 -0
- package/dist/collection/components/icon-asset/assets/footer-social.svg +0 -0
- package/dist/collection/components/icon-asset/assets/ptc-sprite.svg +144 -0
- package/dist/collection/components/icon-asset/assets/regular.svg +463 -0
- package/dist/collection/components/icon-asset/assets/solid.svg +3013 -0
- package/dist/collection/components/icon-asset/assets/svg-with-js.min.css +5 -0
- package/dist/collection/components/icon-asset/icon-asset.css +30 -0
- package/dist/collection/components/icon-asset/icon-asset.js +177 -0
- package/dist/collection/components/list-item/list-item.css +3 -0
- package/dist/collection/components/list-item/list-item.js +63 -0
- package/dist/collection/components/my-component/my-component.css +3 -0
- package/dist/collection/components/my-component/my-component.js +74 -0
- package/dist/collection/components/ptc-announcement/ptc-announcement.css +87 -0
- package/dist/collection/components/ptc-announcement/ptc-announcement.js +127 -0
- package/dist/collection/components/ptc-button/ptc-button.css +155 -0
- package/dist/collection/components/ptc-button/ptc-button.js +223 -0
- package/dist/collection/components/ptc-card/ptc-card.css +239 -0
- package/dist/collection/components/ptc-card/ptc-card.js +260 -0
- package/dist/collection/components/ptc-date/ptc-date.css +3 -0
- package/dist/collection/components/ptc-date/ptc-date.js +155 -0
- package/dist/collection/components/ptc-footer/ptc-footer.css +40 -0
- package/dist/collection/components/ptc-footer/ptc-footer.js +25 -0
- package/dist/collection/components/ptc-image/ptc-image.css +4 -0
- package/dist/collection/components/ptc-image/ptc-image.js +92 -0
- package/dist/collection/components/ptc-img/ptc-img.css +65 -0
- package/dist/collection/components/ptc-img/ptc-img.js +315 -0
- package/dist/collection/components/ptc-link/ptc-link.css +168 -0
- package/dist/collection/components/ptc-link/ptc-link.js +197 -0
- package/dist/collection/components/ptc-list/ptc-list.css +24 -0
- package/dist/collection/components/ptc-list/ptc-list.js +66 -0
- package/dist/collection/components/ptc-lottie/ptc-lottie.css +5 -0
- package/dist/collection/components/ptc-lottie/ptc-lottie.js +58 -0
- package/dist/collection/components/ptc-nav/ptc-nav.css +29 -0
- package/dist/collection/components/ptc-nav/ptc-nav.js +21 -0
- package/dist/collection/components/ptc-nav-item/ptc-nav-item.css +81 -0
- package/dist/collection/components/ptc-nav-item/ptc-nav-item.js +252 -0
- package/dist/collection/components/ptc-overlay/ptc-overlay.css +3 -0
- package/dist/collection/components/ptc-overlay/ptc-overlay.js +14 -0
- package/dist/collection/components/ptc-para/ptc-para.css +64 -0
- package/dist/collection/components/ptc-para/ptc-para.js +111 -0
- package/dist/collection/components/ptc-picture/ptc-picture.css +3 -0
- package/dist/collection/components/ptc-picture/ptc-picture.js +44 -0
- package/dist/collection/components/ptc-spacer/ptc-spacer.css +307 -0
- package/dist/collection/components/ptc-spacer/ptc-spacer.js +99 -0
- package/dist/collection/components/ptc-span/ptc-span.css +36 -0
- package/dist/collection/components/ptc-span/ptc-span.js +86 -0
- package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.css +77 -0
- package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.js +34 -0
- package/dist/collection/components/ptc-title/ptc-title.css +64 -0
- package/dist/collection/components/ptc-title/ptc-title.js +105 -0
- package/dist/collection/index.js +1 -0
- package/dist/collection/utils/interfaces.js +6 -0
- package/dist/collection/utils/utils.js +3 -0
- package/dist/custom-elements/index.js +14452 -0
- package/dist/{ptcw-design/ptc-announcement.entry.js → esm/icon-asset_5.entry.js} +170 -2
- package/dist/esm/index-7a3883ee.js +1687 -0
- package/dist/esm/index.js +1 -0
- package/dist/{ptcw-design → esm}/list-item.entry.js +1 -1
- package/dist/esm/loader.js +17 -0
- package/dist/{ptcw-design → esm}/lottie-player.entry.js +31 -782
- package/dist/{ptcw-design → esm}/my-component.entry.js +1 -1
- package/dist/esm/polyfills/core-js.js +11 -0
- package/dist/esm/polyfills/css-shim.js +1 -0
- package/dist/esm/polyfills/dom.js +79 -0
- package/dist/esm/polyfills/es5-html-element.js +1 -0
- package/dist/esm/polyfills/index.js +34 -0
- package/dist/esm/polyfills/system.js +6 -0
- package/dist/{ptcw-design → esm}/ptc-card.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-date.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-footer.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-image.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-img.entry.js +2 -16
- package/dist/{ptcw-design → esm}/ptc-link.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-list.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-lottie.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-nav-item.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-nav.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-overlay.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-picture.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-spacer.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-span.entry.js +1 -1
- package/dist/{ptcw-design → esm}/ptc-title.entry.js +1 -1
- package/dist/esm/ptcw-design.js +17 -0
- package/dist/index.cjs.js +1 -0
- package/dist/index.js +1 -0
- package/dist/node_modules/@teamhive/lottie-player/dist/collection/components/lottie-player/lottie-player.css +187 -0
- package/dist/ptcw-design/index.esm.js +0 -1
- package/dist/ptcw-design/p-0c8df906.entry.js +1 -0
- package/dist/ptcw-design/p-186beb2c.entry.js +1 -0
- package/dist/ptcw-design/p-1df1006b.entry.js +1 -0
- package/dist/ptcw-design/p-2d5f8cff.entry.js +1 -0
- package/dist/ptcw-design/p-4586b0f5.entry.js +1 -0
- package/dist/ptcw-design/p-50923c9a.js +1 -0
- package/dist/ptcw-design/p-51a3e9e6.entry.js +1 -0
- package/dist/ptcw-design/p-56f6f900.entry.js +1 -0
- package/dist/ptcw-design/p-5f776886.entry.js +1 -0
- package/dist/ptcw-design/p-66ffa30c.entry.js +1 -0
- package/dist/ptcw-design/p-6b1a35e1.entry.js +1 -0
- package/dist/ptcw-design/p-796b8287.entry.js +1 -0
- package/dist/ptcw-design/p-90402319.entry.js +1 -0
- package/dist/ptcw-design/p-919311d2.entry.js +1 -0
- package/dist/ptcw-design/p-97a61538.entry.js +1 -0
- package/dist/ptcw-design/p-ac449734.entry.js +1 -0
- package/dist/ptcw-design/p-d6553853.entry.js +1 -0
- package/dist/ptcw-design/p-dddd4d6e.entry.js +1 -0
- package/dist/ptcw-design/p-ef250898.entry.js +1 -0
- package/dist/ptcw-design/p-f80152dc.entry.js +1 -0
- package/dist/ptcw-design/ptcw-design.css +2 -1030
- package/dist/ptcw-design/ptcw-design.esm.js +1 -122
- package/package.json +2 -2
- package/dist/ptcw-design/app-globals-0f993ce5.js +0 -3
- package/dist/ptcw-design/css-shim-003e9264.js +0 -4
- package/dist/ptcw-design/dom-1b195079.js +0 -73
- package/dist/ptcw-design/icon-asset.entry.js +0 -60
- package/dist/ptcw-design/ptc-button.entry.js +0 -57
- package/dist/ptcw-design/ptc-para.entry.js +0 -36
- package/dist/ptcw-design/ptc-svg-btn.entry.js +0 -27
- package/dist/ptcw-design/shadow-css-c1ad5fdc.js +0 -383
|
@@ -1,24 +1,37 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function _interopNamespace(e) {
|
|
4
|
+
if (e && e.__esModule) return e;
|
|
5
|
+
var n = Object.create(null);
|
|
6
|
+
if (e) {
|
|
7
|
+
Object.keys(e).forEach(function (k) {
|
|
8
|
+
if (k !== 'default') {
|
|
9
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
10
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return e[k];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
n['default'] = e;
|
|
20
|
+
return Object.freeze(n);
|
|
21
|
+
}
|
|
22
|
+
|
|
1
23
|
const NAMESPACE = 'ptcw-design';
|
|
2
|
-
const BUILD = /* ptcw-design */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: true, cmpWillUpdate: true, connectedCallback: false, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: true, disconnectedCallback: false, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: true, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, isDebug: false, isDev: true, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: true, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: false, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: false, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
|
|
3
|
-
const Env = /* ptcw-design */ {};
|
|
4
24
|
|
|
5
25
|
let scopeId;
|
|
6
26
|
let contentRef;
|
|
7
27
|
let hostTagName;
|
|
8
|
-
let customError;
|
|
9
|
-
let i = 0;
|
|
10
28
|
let useNativeShadowDom = false;
|
|
11
29
|
let checkSlotFallbackVisibility = false;
|
|
12
30
|
let checkSlotRelocate = false;
|
|
13
31
|
let isSvgMode = false;
|
|
14
|
-
let renderingRef = null;
|
|
15
|
-
let queueCongestion = 0;
|
|
16
32
|
let queuePending = false;
|
|
17
33
|
const win = typeof window !== 'undefined' ? window : {};
|
|
18
|
-
const CSS = BUILD.cssVarShim ? win.CSS : null;
|
|
19
34
|
const doc = win.document || { head: {} };
|
|
20
|
-
const H = (win.HTMLElement || class {
|
|
21
|
-
});
|
|
22
35
|
const plt = {
|
|
23
36
|
$flags$: 0,
|
|
24
37
|
$resourcesUrl$: '',
|
|
@@ -28,25 +41,8 @@ const plt = {
|
|
|
28
41
|
rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
|
|
29
42
|
ce: (eventName, opts) => new CustomEvent(eventName, opts),
|
|
30
43
|
};
|
|
31
|
-
const setPlatformHelpers = (helpers) => {
|
|
32
|
-
Object.assign(plt, helpers);
|
|
33
|
-
};
|
|
34
|
-
const supportsShadow = BUILD.shadowDomShim && BUILD.shadowDom ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)() : true;
|
|
35
|
-
const supportsListenerOptions = /*@__PURE__*/ (() => {
|
|
36
|
-
let supportsListenerOptions = false;
|
|
37
|
-
try {
|
|
38
|
-
doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
|
|
39
|
-
get() {
|
|
40
|
-
supportsListenerOptions = true;
|
|
41
|
-
},
|
|
42
|
-
}));
|
|
43
|
-
}
|
|
44
|
-
catch (e) { }
|
|
45
|
-
return supportsListenerOptions;
|
|
46
|
-
})();
|
|
47
44
|
const promiseResolve = (v) => Promise.resolve(v);
|
|
48
|
-
const supportsConstructibleStylesheets =
|
|
49
|
-
? /*@__PURE__*/ (() => {
|
|
45
|
+
const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
|
|
50
46
|
try {
|
|
51
47
|
new CSSStyleSheet();
|
|
52
48
|
return typeof (new CSSStyleSheet()).replace === 'function';
|
|
@@ -54,31 +50,11 @@ const supportsConstructibleStylesheets = BUILD.constructableCSS
|
|
|
54
50
|
catch (e) { }
|
|
55
51
|
return false;
|
|
56
52
|
})()
|
|
57
|
-
|
|
58
|
-
const Context = {};
|
|
53
|
+
;
|
|
59
54
|
const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
60
|
-
if (
|
|
61
|
-
// this is called immediately within the element's constructor
|
|
62
|
-
// initialize our event listeners on the host element
|
|
63
|
-
// we do this now so that we can listen to events that may
|
|
64
|
-
// have fired even before the instance is ready
|
|
65
|
-
if (BUILD.hostListenerTargetParent) {
|
|
66
|
-
// this component may have event listeners that should be attached to the parent
|
|
67
|
-
if (attachParentListeners) {
|
|
68
|
-
// this is being ran from within the connectedCallback
|
|
69
|
-
// which is important so that we know the host element actually has a parent element
|
|
70
|
-
// filter out the listeners to only have the ones that ARE being attached to the parent
|
|
71
|
-
listeners = listeners.filter(([flags]) => flags & 32 /* TargetParent */);
|
|
72
|
-
}
|
|
73
|
-
else {
|
|
74
|
-
// this is being ran from within the component constructor
|
|
75
|
-
// everything BUT the parent element listeners should be attached at this time
|
|
76
|
-
// filter out the listeners that are NOT being attached to the parent
|
|
77
|
-
listeners = listeners.filter(([flags]) => !(flags & 32 /* TargetParent */));
|
|
78
|
-
}
|
|
79
|
-
}
|
|
55
|
+
if (listeners) {
|
|
80
56
|
listeners.map(([flags, name, method]) => {
|
|
81
|
-
const target =
|
|
57
|
+
const target = getHostListenerTarget(elm, flags) ;
|
|
82
58
|
const handler = hostListenerProxy(hostRef, method);
|
|
83
59
|
const opts = hostListenerOpts(flags);
|
|
84
60
|
plt.ael(target, name, handler, opts);
|
|
@@ -88,7 +64,7 @@ const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) =
|
|
|
88
64
|
};
|
|
89
65
|
const hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
90
66
|
try {
|
|
91
|
-
|
|
67
|
+
{
|
|
92
68
|
if (hostRef.$flags$ & 256 /* isListenReady */) {
|
|
93
69
|
// instance is ready, let's call it's member method for this event
|
|
94
70
|
hostRef.$lazyInstance$[methodName](ev);
|
|
@@ -97,127 +73,34 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
|
97
73
|
(hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
|
|
98
74
|
}
|
|
99
75
|
}
|
|
100
|
-
else {
|
|
101
|
-
hostRef.$hostElement$[methodName](ev);
|
|
102
|
-
}
|
|
103
76
|
}
|
|
104
77
|
catch (e) {
|
|
105
78
|
consoleError(e);
|
|
106
79
|
}
|
|
107
80
|
};
|
|
108
81
|
const getHostListenerTarget = (elm, flags) => {
|
|
109
|
-
if (
|
|
110
|
-
return doc;
|
|
111
|
-
if (BUILD.hostListenerTargetWindow && flags & 8 /* TargetWindow */)
|
|
82
|
+
if (flags & 8 /* TargetWindow */)
|
|
112
83
|
return win;
|
|
113
|
-
if (BUILD.hostListenerTargetBody && flags & 16 /* TargetBody */)
|
|
114
|
-
return doc.body;
|
|
115
|
-
if (BUILD.hostListenerTargetParent && flags & 32 /* TargetParent */)
|
|
116
|
-
return elm.parentElement;
|
|
117
84
|
return elm;
|
|
118
85
|
};
|
|
119
86
|
// prettier-ignore
|
|
120
|
-
const hostListenerOpts = (flags) =>
|
|
121
|
-
? ({
|
|
122
|
-
passive: (flags & 1 /* Passive */) !== 0,
|
|
123
|
-
capture: (flags & 2 /* Capture */) !== 0,
|
|
124
|
-
})
|
|
125
|
-
: (flags & 2 /* Capture */) !== 0;
|
|
126
|
-
const CONTENT_REF_ID = 'r';
|
|
127
|
-
const ORG_LOCATION_ID = 'o';
|
|
128
|
-
const SLOT_NODE_ID = 's';
|
|
129
|
-
const TEXT_NODE_ID = 't';
|
|
130
|
-
const HYDRATE_ID = 's-id';
|
|
131
|
-
const HYDRATED_STYLE_ID = 'sty-id';
|
|
132
|
-
const HYDRATE_CHILD_ID = 'c-id';
|
|
87
|
+
const hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
|
|
133
88
|
const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
|
|
134
89
|
const XLINK_NS = 'http://www.w3.org/1999/xlink';
|
|
135
90
|
const createTime = (fnName, tagName = '') => {
|
|
136
|
-
|
|
137
|
-
const key = `st:${fnName}:${tagName}:${i++}`;
|
|
138
|
-
// Start
|
|
139
|
-
performance.mark(key);
|
|
140
|
-
// End
|
|
141
|
-
return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key);
|
|
142
|
-
}
|
|
143
|
-
else {
|
|
91
|
+
{
|
|
144
92
|
return () => {
|
|
145
93
|
return;
|
|
146
94
|
};
|
|
147
95
|
}
|
|
148
96
|
};
|
|
149
97
|
const uniqueTime = (key, measureText) => {
|
|
150
|
-
|
|
151
|
-
if (performance.getEntriesByName(key).length === 0) {
|
|
152
|
-
performance.mark(key);
|
|
153
|
-
}
|
|
154
|
-
return () => {
|
|
155
|
-
if (performance.getEntriesByName(measureText).length === 0) {
|
|
156
|
-
performance.measure(measureText, key);
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
}
|
|
160
|
-
else {
|
|
98
|
+
{
|
|
161
99
|
return () => {
|
|
162
100
|
return;
|
|
163
101
|
};
|
|
164
102
|
}
|
|
165
103
|
};
|
|
166
|
-
const inspect = (ref) => {
|
|
167
|
-
const hostRef = getHostRef(ref);
|
|
168
|
-
if (!hostRef) {
|
|
169
|
-
return undefined;
|
|
170
|
-
}
|
|
171
|
-
const flags = hostRef.$flags$;
|
|
172
|
-
const hostElement = hostRef.$hostElement$;
|
|
173
|
-
return {
|
|
174
|
-
renderCount: hostRef.$renderCount$,
|
|
175
|
-
flags: {
|
|
176
|
-
hasRendered: !!(flags & 2 /* hasRendered */),
|
|
177
|
-
hasConnected: !!(flags & 1 /* hasConnected */),
|
|
178
|
-
isWaitingForChildren: !!(flags & 4 /* isWaitingForChildren */),
|
|
179
|
-
isConstructingInstance: !!(flags & 8 /* isConstructingInstance */),
|
|
180
|
-
isQueuedForUpdate: !!(flags & 16 /* isQueuedForUpdate */),
|
|
181
|
-
hasInitializedComponent: !!(flags & 32 /* hasInitializedComponent */),
|
|
182
|
-
hasLoadedComponent: !!(flags & 64 /* hasLoadedComponent */),
|
|
183
|
-
isWatchReady: !!(flags & 128 /* isWatchReady */),
|
|
184
|
-
isListenReady: !!(flags & 256 /* isListenReady */),
|
|
185
|
-
needsRerender: !!(flags & 512 /* needsRerender */),
|
|
186
|
-
},
|
|
187
|
-
instanceValues: hostRef.$instanceValues$,
|
|
188
|
-
ancestorComponent: hostRef.$ancestorComponent$,
|
|
189
|
-
hostElement,
|
|
190
|
-
lazyInstance: hostRef.$lazyInstance$,
|
|
191
|
-
vnode: hostRef.$vnode$,
|
|
192
|
-
modeName: hostRef.$modeName$,
|
|
193
|
-
onReadyPromise: hostRef.$onReadyPromise$,
|
|
194
|
-
onReadyResolve: hostRef.$onReadyResolve$,
|
|
195
|
-
onInstancePromise: hostRef.$onInstancePromise$,
|
|
196
|
-
onInstanceResolve: hostRef.$onInstanceResolve$,
|
|
197
|
-
onRenderResolve: hostRef.$onRenderResolve$,
|
|
198
|
-
queuedListeners: hostRef.$queuedListeners$,
|
|
199
|
-
rmListeners: hostRef.$rmListeners$,
|
|
200
|
-
['s-id']: hostElement['s-id'],
|
|
201
|
-
['s-cr']: hostElement['s-cr'],
|
|
202
|
-
['s-lr']: hostElement['s-lr'],
|
|
203
|
-
['s-p']: hostElement['s-p'],
|
|
204
|
-
['s-rc']: hostElement['s-rc'],
|
|
205
|
-
['s-sc']: hostElement['s-sc'],
|
|
206
|
-
};
|
|
207
|
-
};
|
|
208
|
-
const installDevTools = () => {
|
|
209
|
-
if (BUILD.devTools) {
|
|
210
|
-
const stencil = (win.stencil = win.stencil || {});
|
|
211
|
-
const originalInspect = stencil.inspect;
|
|
212
|
-
stencil.inspect = (ref) => {
|
|
213
|
-
let result = inspect(ref);
|
|
214
|
-
if (!result && typeof originalInspect === 'function') {
|
|
215
|
-
result = originalInspect(ref);
|
|
216
|
-
}
|
|
217
|
-
return result;
|
|
218
|
-
};
|
|
219
|
-
}
|
|
220
|
-
};
|
|
221
104
|
const rootAppliedStyles = new WeakMap();
|
|
222
105
|
const registerStyle = (scopeId, cssText, allowCS) => {
|
|
223
106
|
let style = styles.get(scopeId);
|
|
@@ -231,11 +114,8 @@ const registerStyle = (scopeId, cssText, allowCS) => {
|
|
|
231
114
|
styles.set(scopeId, style);
|
|
232
115
|
};
|
|
233
116
|
const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
|
|
234
|
-
let scopeId = getScopeId(cmpMeta
|
|
117
|
+
let scopeId = getScopeId(cmpMeta);
|
|
235
118
|
let style = styles.get(scopeId);
|
|
236
|
-
if (!BUILD.attachStyles) {
|
|
237
|
-
return scopeId;
|
|
238
|
-
}
|
|
239
119
|
// if an element is NOT connected then getRootNode() will return the wrong root node
|
|
240
120
|
// so the fallback is to always use the document for the root node in those cases
|
|
241
121
|
styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
|
|
@@ -248,29 +128,11 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
|
|
|
248
128
|
rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
|
|
249
129
|
}
|
|
250
130
|
if (!appliedStyles.has(scopeId)) {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
styleElm.innerHTML = style;
|
|
254
|
-
}
|
|
255
|
-
else {
|
|
256
|
-
if (BUILD.cssVarShim && plt.$cssShim$) {
|
|
257
|
-
styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */));
|
|
258
|
-
const newScopeId = styleElm['s-sc'];
|
|
259
|
-
if (newScopeId) {
|
|
260
|
-
scopeId = newScopeId;
|
|
261
|
-
// we don't want to add this styleID to the appliedStyles Set
|
|
262
|
-
// since the cssVarShim might need to apply several different
|
|
263
|
-
// stylesheets for the same component
|
|
264
|
-
appliedStyles = null;
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
else {
|
|
131
|
+
{
|
|
132
|
+
{
|
|
268
133
|
styleElm = doc.createElement('style');
|
|
269
134
|
styleElm.innerHTML = style;
|
|
270
135
|
}
|
|
271
|
-
if (BUILD.hydrateServerSide || BUILD.hotModuleReplacement) {
|
|
272
|
-
styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
|
|
273
|
-
}
|
|
274
136
|
styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
|
|
275
137
|
}
|
|
276
138
|
if (appliedStyles) {
|
|
@@ -278,7 +140,7 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
|
|
|
278
140
|
}
|
|
279
141
|
}
|
|
280
142
|
}
|
|
281
|
-
else if (
|
|
143
|
+
else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
|
|
282
144
|
styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
|
|
283
145
|
}
|
|
284
146
|
}
|
|
@@ -289,8 +151,8 @@ const attachStyles = (hostRef) => {
|
|
|
289
151
|
const elm = hostRef.$hostElement$;
|
|
290
152
|
const flags = cmpMeta.$flags$;
|
|
291
153
|
const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
|
|
292
|
-
const scopeId = addStyle(
|
|
293
|
-
if (
|
|
154
|
+
const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
|
|
155
|
+
if (flags & 10 /* needsScopedEncapsulation */) {
|
|
294
156
|
// only required when we're NOT using native shadow dom (slot)
|
|
295
157
|
// or this browser doesn't support native shadow dom
|
|
296
158
|
// and this host element was NOT created with SSR
|
|
@@ -300,19 +162,10 @@ const attachStyles = (hostRef) => {
|
|
|
300
162
|
// DOM WRITE!!
|
|
301
163
|
elm['s-sc'] = scopeId;
|
|
302
164
|
elm.classList.add(scopeId + '-h');
|
|
303
|
-
if (BUILD.scoped && flags & 2 /* scopedCssEncapsulation */) {
|
|
304
|
-
elm.classList.add(scopeId + '-s');
|
|
305
|
-
}
|
|
306
165
|
}
|
|
307
166
|
endAttachStyles();
|
|
308
167
|
};
|
|
309
|
-
const getScopeId = (cmp, mode) => 'sc-' + (
|
|
310
|
-
const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
|
|
311
|
-
// Private
|
|
312
|
-
const computeMode = (elm) => modeResolutionChain.map(h => h(elm)).find(m => !!m);
|
|
313
|
-
// Public
|
|
314
|
-
const setMode = (handler) => modeResolutionChain.push(handler);
|
|
315
|
-
const getMode = (ref) => getHostRef(ref).$modeName$;
|
|
168
|
+
const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
|
|
316
169
|
/**
|
|
317
170
|
* Default style mode id
|
|
318
171
|
*/
|
|
@@ -360,11 +213,6 @@ const h = (nodeName, vnodeData, ...children) => {
|
|
|
360
213
|
if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {
|
|
361
214
|
child = String(child);
|
|
362
215
|
}
|
|
363
|
-
else if (BUILD.isDev && typeof nodeName !== 'function' && child.$flags$ === undefined) {
|
|
364
|
-
consoleDevError(`vNode passed as children has unexpected type.
|
|
365
|
-
Make sure it's using the correct h() function.
|
|
366
|
-
Empty objects can also be the cause, look for JSX comments that became objects.`);
|
|
367
|
-
}
|
|
368
216
|
if (simple && lastSimple) {
|
|
369
217
|
// If the previous child was simple (string), we merge both
|
|
370
218
|
vNodeChildren[vNodeChildren.length - 1].$text$ += child;
|
|
@@ -379,17 +227,14 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
|
|
|
379
227
|
};
|
|
380
228
|
walk(children);
|
|
381
229
|
if (vnodeData) {
|
|
382
|
-
if (BUILD.isDev && nodeName === 'input') {
|
|
383
|
-
validateInputProperties(vnodeData);
|
|
384
|
-
}
|
|
385
230
|
// normalize class / classname attributes
|
|
386
|
-
if (
|
|
231
|
+
if (vnodeData.key) {
|
|
387
232
|
key = vnodeData.key;
|
|
388
233
|
}
|
|
389
|
-
if (
|
|
234
|
+
if (vnodeData.name) {
|
|
390
235
|
slotName = vnodeData.name;
|
|
391
236
|
}
|
|
392
|
-
|
|
237
|
+
{
|
|
393
238
|
const classData = vnodeData.className || vnodeData.class;
|
|
394
239
|
if (classData) {
|
|
395
240
|
vnodeData.class =
|
|
@@ -401,12 +246,7 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
|
|
|
401
246
|
}
|
|
402
247
|
}
|
|
403
248
|
}
|
|
404
|
-
if (
|
|
405
|
-
consoleDevError(`The <Host> must be the single root component. Make sure:
|
|
406
|
-
- You are NOT using hostData() and <Host> in the same component.
|
|
407
|
-
- <Host> is used once, and it's the single root component of the render() function.`);
|
|
408
|
-
}
|
|
409
|
-
if (BUILD.vdomFunctional && typeof nodeName === 'function') {
|
|
249
|
+
if (typeof nodeName === 'function') {
|
|
410
250
|
// nodeName is a functional component
|
|
411
251
|
return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
|
|
412
252
|
}
|
|
@@ -415,10 +255,10 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
|
|
|
415
255
|
if (vNodeChildren.length > 0) {
|
|
416
256
|
vnode.$children$ = vNodeChildren;
|
|
417
257
|
}
|
|
418
|
-
|
|
258
|
+
{
|
|
419
259
|
vnode.$key$ = key;
|
|
420
260
|
}
|
|
421
|
-
|
|
261
|
+
{
|
|
422
262
|
vnode.$name$ = slotName;
|
|
423
263
|
}
|
|
424
264
|
return vnode;
|
|
@@ -431,13 +271,13 @@ const newVNode = (tag, text) => {
|
|
|
431
271
|
$elm$: null,
|
|
432
272
|
$children$: null,
|
|
433
273
|
};
|
|
434
|
-
|
|
274
|
+
{
|
|
435
275
|
vnode.$attrs$ = null;
|
|
436
276
|
}
|
|
437
|
-
|
|
277
|
+
{
|
|
438
278
|
vnode.$key$ = null;
|
|
439
279
|
}
|
|
440
|
-
|
|
280
|
+
{
|
|
441
281
|
vnode.$name$ = null;
|
|
442
282
|
}
|
|
443
283
|
return vnode;
|
|
@@ -474,20 +314,6 @@ const convertToPrivate = (node) => {
|
|
|
474
314
|
vnode.$name$ = node.vname;
|
|
475
315
|
return vnode;
|
|
476
316
|
};
|
|
477
|
-
const validateInputProperties = (vnodeData) => {
|
|
478
|
-
const props = Object.keys(vnodeData);
|
|
479
|
-
const typeIndex = props.indexOf('type');
|
|
480
|
-
const minIndex = props.indexOf('min');
|
|
481
|
-
const maxIndex = props.indexOf('max');
|
|
482
|
-
const stepIndex = props.indexOf('min');
|
|
483
|
-
const value = props.indexOf('value');
|
|
484
|
-
if (value === -1) {
|
|
485
|
-
return;
|
|
486
|
-
}
|
|
487
|
-
if (value < typeIndex || value < minIndex || value < maxIndex || value < stepIndex) {
|
|
488
|
-
consoleDevWarn(`The "value" prop of <input> should be set after "min", "max", "type" and "step"`);
|
|
489
|
-
}
|
|
490
|
-
};
|
|
491
317
|
/**
|
|
492
318
|
* Production setAccessor() function based on Preact by
|
|
493
319
|
* Jason Miller (@developit)
|
|
@@ -500,19 +326,19 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
500
326
|
if (oldValue !== newValue) {
|
|
501
327
|
let isProp = isMemberInElement(elm, memberName);
|
|
502
328
|
let ln = memberName.toLowerCase();
|
|
503
|
-
if (
|
|
329
|
+
if (memberName === 'class') {
|
|
504
330
|
const classList = elm.classList;
|
|
505
331
|
const oldClasses = parseClassList(oldValue);
|
|
506
332
|
const newClasses = parseClassList(newValue);
|
|
507
333
|
classList.remove(...oldClasses.filter(c => c && !newClasses.includes(c)));
|
|
508
334
|
classList.add(...newClasses.filter(c => c && !oldClasses.includes(c)));
|
|
509
335
|
}
|
|
510
|
-
else if (
|
|
336
|
+
else if (memberName === 'style') {
|
|
511
337
|
// update style attribute, css properties and values
|
|
512
|
-
|
|
338
|
+
{
|
|
513
339
|
for (const prop in oldValue) {
|
|
514
340
|
if (!newValue || newValue[prop] == null) {
|
|
515
|
-
if (
|
|
341
|
+
if (prop.includes('-')) {
|
|
516
342
|
elm.style.removeProperty(prop);
|
|
517
343
|
}
|
|
518
344
|
else {
|
|
@@ -523,7 +349,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
523
349
|
}
|
|
524
350
|
for (const prop in newValue) {
|
|
525
351
|
if (!oldValue || newValue[prop] !== oldValue[prop]) {
|
|
526
|
-
if (
|
|
352
|
+
if (prop.includes('-')) {
|
|
527
353
|
elm.style.setProperty(prop, newValue[prop]);
|
|
528
354
|
}
|
|
529
355
|
else {
|
|
@@ -532,15 +358,15 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
532
358
|
}
|
|
533
359
|
}
|
|
534
360
|
}
|
|
535
|
-
else if (
|
|
361
|
+
else if (memberName === 'key')
|
|
536
362
|
;
|
|
537
|
-
else if (
|
|
363
|
+
else if (memberName === 'ref') {
|
|
538
364
|
// minifier will clean this up
|
|
539
365
|
if (newValue) {
|
|
540
366
|
newValue(elm);
|
|
541
367
|
}
|
|
542
368
|
}
|
|
543
|
-
else if (
|
|
369
|
+
else if ((!isProp ) && memberName[0] === 'o' && memberName[1] === 'n') {
|
|
544
370
|
// Event Handlers
|
|
545
371
|
// so if the member name starts with "on" and the 3rd characters is
|
|
546
372
|
// a capital letter, and it's not already a member on the element,
|
|
@@ -577,7 +403,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
577
403
|
plt.ael(elm, memberName, newValue, false);
|
|
578
404
|
}
|
|
579
405
|
}
|
|
580
|
-
else
|
|
406
|
+
else {
|
|
581
407
|
// Set property if it exists and it's not a SVG
|
|
582
408
|
const isComplex = isComplexType(newValue);
|
|
583
409
|
if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
|
|
@@ -607,7 +433,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
607
433
|
* - if the newValue is null/undefined or 'false'.
|
|
608
434
|
*/
|
|
609
435
|
let xlink = false;
|
|
610
|
-
|
|
436
|
+
{
|
|
611
437
|
if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
|
|
612
438
|
memberName = ln;
|
|
613
439
|
xlink = true;
|
|
@@ -615,7 +441,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
615
441
|
}
|
|
616
442
|
if (newValue == null || newValue === false) {
|
|
617
443
|
if (newValue !== false || elm.getAttribute(memberName) === '') {
|
|
618
|
-
if (
|
|
444
|
+
if (xlink) {
|
|
619
445
|
elm.removeAttributeNS(XLINK_NS, memberName);
|
|
620
446
|
}
|
|
621
447
|
else {
|
|
@@ -625,7 +451,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
|
625
451
|
}
|
|
626
452
|
else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
|
|
627
453
|
newValue = newValue === true ? '' : newValue;
|
|
628
|
-
if (
|
|
454
|
+
if (xlink) {
|
|
629
455
|
elm.setAttributeNS(XLINK_NS, memberName, newValue);
|
|
630
456
|
}
|
|
631
457
|
else {
|
|
@@ -644,7 +470,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
|
|
|
644
470
|
const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
|
|
645
471
|
const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
|
|
646
472
|
const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
|
|
647
|
-
|
|
473
|
+
{
|
|
648
474
|
// remove attributes no longer present on the vnode by setting them to undefined
|
|
649
475
|
for (memberName in oldVnodeAttrs) {
|
|
650
476
|
if (!(memberName in newVnodeAttrs)) {
|
|
@@ -664,7 +490,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
664
490
|
let elm;
|
|
665
491
|
let childNode;
|
|
666
492
|
let oldVNode;
|
|
667
|
-
if (
|
|
493
|
+
if (!useNativeShadowDom) {
|
|
668
494
|
// remember for later we need to check to relocate nodes
|
|
669
495
|
checkSlotRelocate = true;
|
|
670
496
|
if (newVNode.$tag$ === 'slot') {
|
|
@@ -679,33 +505,29 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
679
505
|
1 /* isSlotReference */;
|
|
680
506
|
}
|
|
681
507
|
}
|
|
682
|
-
if (
|
|
683
|
-
consoleDevError(`The JSX ${newVNode.$text$ !== null ? `"${newVNode.$text$}" text` : `"${newVNode.$tag$}" element`} node should not be shared within the same renderer. The renderer caches element lookups in order to improve performance. However, a side effect from this is that the exact same JSX node should not be reused. For more information please see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes`);
|
|
684
|
-
}
|
|
685
|
-
if (BUILD.vdomText && newVNode.$text$ !== null) {
|
|
508
|
+
if (newVNode.$text$ !== null) {
|
|
686
509
|
// create text node
|
|
687
510
|
elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
|
|
688
511
|
}
|
|
689
|
-
else if (
|
|
512
|
+
else if (newVNode.$flags$ & 1 /* isSlotReference */) {
|
|
690
513
|
// create a slot reference node
|
|
691
|
-
elm = newVNode.$elm$ =
|
|
514
|
+
elm = newVNode.$elm$ = doc.createTextNode('');
|
|
692
515
|
}
|
|
693
516
|
else {
|
|
694
|
-
if (
|
|
517
|
+
if (!isSvgMode) {
|
|
695
518
|
isSvgMode = newVNode.$tag$ === 'svg';
|
|
696
519
|
}
|
|
697
520
|
// create element
|
|
698
|
-
elm = newVNode.$elm$ = (
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
if (BUILD.svg && isSvgMode && newVNode.$tag$ === 'foreignObject') {
|
|
521
|
+
elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$flags$ & 2 /* isSlotFallback */ ? 'slot-fb' : newVNode.$tag$)
|
|
522
|
+
);
|
|
523
|
+
if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
|
|
702
524
|
isSvgMode = false;
|
|
703
525
|
}
|
|
704
526
|
// add css classes, attrs, props, listeners, etc.
|
|
705
|
-
|
|
527
|
+
{
|
|
706
528
|
updateElement(null, newVNode, isSvgMode);
|
|
707
529
|
}
|
|
708
|
-
if (
|
|
530
|
+
if (isDef(scopeId) && elm['s-si'] !== scopeId) {
|
|
709
531
|
// if there is a scopeId and this is the initial render
|
|
710
532
|
// then let's add the scopeId as a css class
|
|
711
533
|
elm.classList.add((elm['s-si'] = scopeId));
|
|
@@ -721,7 +543,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
721
543
|
}
|
|
722
544
|
}
|
|
723
545
|
}
|
|
724
|
-
|
|
546
|
+
{
|
|
725
547
|
if (newVNode.$tag$ === 'svg') {
|
|
726
548
|
// Only reset the SVG context when we're exiting <svg> element
|
|
727
549
|
isSvgMode = false;
|
|
@@ -732,7 +554,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
732
554
|
}
|
|
733
555
|
}
|
|
734
556
|
}
|
|
735
|
-
|
|
557
|
+
{
|
|
736
558
|
elm['s-hn'] = hostTagName;
|
|
737
559
|
if (newVNode.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
|
|
738
560
|
// remember the content reference comment
|
|
@@ -777,9 +599,9 @@ const putBackInOriginalLocation = (parentElm, recursive) => {
|
|
|
777
599
|
plt.$flags$ &= ~1 /* isTmpDisconnected */;
|
|
778
600
|
};
|
|
779
601
|
const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
|
|
780
|
-
let containerElm = ((
|
|
602
|
+
let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
|
|
781
603
|
let childNode;
|
|
782
|
-
if (
|
|
604
|
+
if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
|
|
783
605
|
containerElm = containerElm.shadowRoot;
|
|
784
606
|
}
|
|
785
607
|
for (; startIdx <= endIdx; ++startIdx) {
|
|
@@ -787,7 +609,7 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
|
|
|
787
609
|
childNode = createElm(null, parentVNode, startIdx, parentElm);
|
|
788
610
|
if (childNode) {
|
|
789
611
|
vnodes[startIdx].$elm$ = childNode;
|
|
790
|
-
containerElm.insertBefore(childNode,
|
|
612
|
+
containerElm.insertBefore(childNode, referenceNode(before) );
|
|
791
613
|
}
|
|
792
614
|
}
|
|
793
615
|
}
|
|
@@ -797,7 +619,7 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
|
|
|
797
619
|
if ((vnode = vnodes[startIdx])) {
|
|
798
620
|
elm = vnode.$elm$;
|
|
799
621
|
callNodeRefs(vnode);
|
|
800
|
-
|
|
622
|
+
{
|
|
801
623
|
// we're removing this element
|
|
802
624
|
// so it's possible we need to show slot fallback content now
|
|
803
625
|
checkSlotFallbackVisibility = true;
|
|
@@ -855,7 +677,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
855
677
|
}
|
|
856
678
|
else if (isSameVnode(oldStartVnode, newEndVnode)) {
|
|
857
679
|
// Vnode moved right
|
|
858
|
-
if (
|
|
680
|
+
if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
|
|
859
681
|
putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
|
|
860
682
|
}
|
|
861
683
|
patch(oldStartVnode, newEndVnode);
|
|
@@ -865,7 +687,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
865
687
|
}
|
|
866
688
|
else if (isSameVnode(oldEndVnode, newStartVnode)) {
|
|
867
689
|
// Vnode moved left
|
|
868
|
-
if (
|
|
690
|
+
if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
|
|
869
691
|
putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
|
|
870
692
|
}
|
|
871
693
|
patch(oldEndVnode, newStartVnode);
|
|
@@ -876,7 +698,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
876
698
|
else {
|
|
877
699
|
// createKeyToOldIdx
|
|
878
700
|
idxInOld = -1;
|
|
879
|
-
|
|
701
|
+
{
|
|
880
702
|
for (i = oldStartIdx; i <= oldEndIdx; ++i) {
|
|
881
703
|
if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
|
|
882
704
|
idxInOld = i;
|
|
@@ -884,7 +706,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
884
706
|
}
|
|
885
707
|
}
|
|
886
708
|
}
|
|
887
|
-
if (
|
|
709
|
+
if (idxInOld >= 0) {
|
|
888
710
|
elmToMove = oldCh[idxInOld];
|
|
889
711
|
if (elmToMove.$tag$ !== newStartVnode.$tag$) {
|
|
890
712
|
node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
|
|
@@ -902,19 +724,16 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
902
724
|
newStartVnode = newCh[++newStartIdx];
|
|
903
725
|
}
|
|
904
726
|
if (node) {
|
|
905
|
-
|
|
727
|
+
{
|
|
906
728
|
parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
|
|
907
729
|
}
|
|
908
|
-
else {
|
|
909
|
-
oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
|
|
910
|
-
}
|
|
911
730
|
}
|
|
912
731
|
}
|
|
913
732
|
}
|
|
914
733
|
if (oldStartIdx > oldEndIdx) {
|
|
915
734
|
addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
|
|
916
735
|
}
|
|
917
|
-
else if (
|
|
736
|
+
else if (newStartIdx > newEndIdx) {
|
|
918
737
|
removeVnodes(oldCh, oldStartIdx, oldEndIdx);
|
|
919
738
|
}
|
|
920
739
|
};
|
|
@@ -922,13 +741,12 @@ const isSameVnode = (vnode1, vnode2) => {
|
|
|
922
741
|
// compare if two vnode to see if they're "technically" the same
|
|
923
742
|
// need to have the same element tag, and same key to be the same
|
|
924
743
|
if (vnode1.$tag$ === vnode2.$tag$) {
|
|
925
|
-
if (
|
|
744
|
+
if (vnode1.$tag$ === 'slot') {
|
|
926
745
|
return vnode1.$name$ === vnode2.$name$;
|
|
927
746
|
}
|
|
928
|
-
|
|
747
|
+
{
|
|
929
748
|
return vnode1.$key$ === vnode2.$key$;
|
|
930
749
|
}
|
|
931
|
-
return true;
|
|
932
750
|
}
|
|
933
751
|
return false;
|
|
934
752
|
};
|
|
@@ -947,15 +765,15 @@ const patch = (oldVNode, newVNode) => {
|
|
|
947
765
|
const tag = newVNode.$tag$;
|
|
948
766
|
const text = newVNode.$text$;
|
|
949
767
|
let defaultHolder;
|
|
950
|
-
if (
|
|
951
|
-
|
|
768
|
+
if (text === null) {
|
|
769
|
+
{
|
|
952
770
|
// test if we're rendering an svg element, or still rendering nodes inside of one
|
|
953
771
|
// only add this to the when the compiler sees we're using an svg somewhere
|
|
954
772
|
isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
|
|
955
773
|
}
|
|
956
774
|
// element node
|
|
957
|
-
|
|
958
|
-
if (
|
|
775
|
+
{
|
|
776
|
+
if (tag === 'slot')
|
|
959
777
|
;
|
|
960
778
|
else {
|
|
961
779
|
// either this is the first render of an element OR it's an update
|
|
@@ -964,32 +782,32 @@ const patch = (oldVNode, newVNode) => {
|
|
|
964
782
|
updateElement(oldVNode, newVNode, isSvgMode);
|
|
965
783
|
}
|
|
966
784
|
}
|
|
967
|
-
if (
|
|
785
|
+
if (oldChildren !== null && newChildren !== null) {
|
|
968
786
|
// looks like there's child vnodes for both the old and new vnodes
|
|
969
787
|
updateChildren(elm, oldChildren, newVNode, newChildren);
|
|
970
788
|
}
|
|
971
789
|
else if (newChildren !== null) {
|
|
972
790
|
// no old child vnodes, but there are new child vnodes to add
|
|
973
|
-
if (
|
|
791
|
+
if (oldVNode.$text$ !== null) {
|
|
974
792
|
// the old vnode was text, so be sure to clear it out
|
|
975
793
|
elm.textContent = '';
|
|
976
794
|
}
|
|
977
795
|
// add the new vnode children
|
|
978
796
|
addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
|
|
979
797
|
}
|
|
980
|
-
else if (
|
|
798
|
+
else if (oldChildren !== null) {
|
|
981
799
|
// no new child vnodes, but there are old child vnodes to remove
|
|
982
800
|
removeVnodes(oldChildren, 0, oldChildren.length - 1);
|
|
983
801
|
}
|
|
984
|
-
if (
|
|
802
|
+
if (isSvgMode && tag === 'svg') {
|
|
985
803
|
isSvgMode = false;
|
|
986
804
|
}
|
|
987
805
|
}
|
|
988
|
-
else if (
|
|
806
|
+
else if ((defaultHolder = elm['s-cr'])) {
|
|
989
807
|
// this element has slotted content
|
|
990
808
|
defaultHolder.parentNode.textContent = text;
|
|
991
809
|
}
|
|
992
|
-
else if (
|
|
810
|
+
else if (oldVNode.$text$ !== text) {
|
|
993
811
|
// update the text content for the text only vnode
|
|
994
812
|
// and also only if the text is different than before
|
|
995
813
|
elm.data = text;
|
|
@@ -1127,7 +945,7 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
|
|
|
1127
945
|
return slotNameAttr === '';
|
|
1128
946
|
};
|
|
1129
947
|
const callNodeRefs = (vNode) => {
|
|
1130
|
-
|
|
948
|
+
{
|
|
1131
949
|
vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
|
|
1132
950
|
vNode.$children$ && vNode.$children$.map(callNodeRefs);
|
|
1133
951
|
}
|
|
@@ -1138,41 +956,26 @@ const renderVdom = (hostRef, renderFnResults) => {
|
|
|
1138
956
|
const oldVNode = hostRef.$vnode$ || newVNode(null, null);
|
|
1139
957
|
const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
|
|
1140
958
|
hostTagName = hostElm.tagName;
|
|
1141
|
-
|
|
1142
|
-
if (BUILD.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) {
|
|
1143
|
-
throw new Error(`The <Host> must be the single root component.
|
|
1144
|
-
Looks like the render() function of "${hostTagName.toLowerCase()}" is returning an array that contains the <Host>.
|
|
1145
|
-
|
|
1146
|
-
The render() function should look like this instead:
|
|
1147
|
-
|
|
1148
|
-
render() {
|
|
1149
|
-
// Do not return an array
|
|
1150
|
-
return (
|
|
1151
|
-
<Host>{content}</Host>
|
|
1152
|
-
);
|
|
1153
|
-
}
|
|
1154
|
-
`);
|
|
1155
|
-
}
|
|
1156
|
-
if (BUILD.reflect && cmpMeta.$attrsToReflect$) {
|
|
959
|
+
if (cmpMeta.$attrsToReflect$) {
|
|
1157
960
|
rootVnode.$attrs$ = rootVnode.$attrs$ || {};
|
|
1158
961
|
cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
|
|
1159
962
|
}
|
|
1160
963
|
rootVnode.$tag$ = null;
|
|
1161
964
|
rootVnode.$flags$ |= 4 /* isHost */;
|
|
1162
965
|
hostRef.$vnode$ = rootVnode;
|
|
1163
|
-
rootVnode.$elm$ = oldVNode.$elm$ = (
|
|
1164
|
-
|
|
966
|
+
rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
|
|
967
|
+
{
|
|
1165
968
|
scopeId = hostElm['s-sc'];
|
|
1166
969
|
}
|
|
1167
|
-
|
|
970
|
+
{
|
|
1168
971
|
contentRef = hostElm['s-cr'];
|
|
1169
|
-
useNativeShadowDom =
|
|
972
|
+
useNativeShadowDom = (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
|
|
1170
973
|
// always reset
|
|
1171
974
|
checkSlotFallbackVisibility = false;
|
|
1172
975
|
}
|
|
1173
976
|
// synchronous patch
|
|
1174
977
|
patch(oldVNode, rootVnode);
|
|
1175
|
-
|
|
978
|
+
{
|
|
1176
979
|
// while we're moving nodes around existing nodes, temporarily disable
|
|
1177
980
|
// the disconnectCallback from working
|
|
1178
981
|
plt.$flags$ |= 1 /* isTmpDisconnected */;
|
|
@@ -1191,7 +994,7 @@ render() {
|
|
|
1191
994
|
if (!nodeToRelocate['s-ol']) {
|
|
1192
995
|
// add a reference node marking this node's original location
|
|
1193
996
|
// keep a reference to this node for later lookups
|
|
1194
|
-
orgLocationNode =
|
|
997
|
+
orgLocationNode = doc.createTextNode('');
|
|
1195
998
|
orgLocationNode['s-nr'] = nodeToRelocate;
|
|
1196
999
|
nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
|
|
1197
1000
|
}
|
|
@@ -1247,18 +1050,11 @@ render() {
|
|
|
1247
1050
|
relocateNodes.length = 0;
|
|
1248
1051
|
}
|
|
1249
1052
|
};
|
|
1250
|
-
|
|
1251
|
-
// otherwise these nodes are text nodes w/out content
|
|
1252
|
-
const slotReferenceDebugNode = (slotVNode) => doc.createComment(`<slot${slotVNode.$name$ ? ' name="' + slotVNode.$name$ + '"' : ''}> (host=${hostTagName.toLowerCase()})`);
|
|
1253
|
-
const originalLocationDebugNode = (nodeToRelocate) => doc.createComment(`org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate['s-hn']})` : `[${nodeToRelocate.textContent}]`));
|
|
1254
|
-
const getElement = (ref) => (BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref);
|
|
1053
|
+
const getElement = (ref) => (getHostRef(ref).$hostElement$ );
|
|
1255
1054
|
const createEvent = (ref, name, flags) => {
|
|
1256
1055
|
const elm = getElement(ref);
|
|
1257
1056
|
return {
|
|
1258
1057
|
emit: (detail) => {
|
|
1259
|
-
if (BUILD.isDev && !elm.isConnected) {
|
|
1260
|
-
consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
|
|
1261
|
-
}
|
|
1262
1058
|
return emitEvent(elm, name, {
|
|
1263
1059
|
bubbles: !!(flags & 4 /* Bubbles */),
|
|
1264
1060
|
composed: !!(flags & 2 /* Composed */),
|
|
@@ -1274,15 +1070,15 @@ const emitEvent = (elm, name, opts) => {
|
|
|
1274
1070
|
return ev;
|
|
1275
1071
|
};
|
|
1276
1072
|
const attachToAncestor = (hostRef, ancestorComponent) => {
|
|
1277
|
-
if (
|
|
1073
|
+
if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
|
|
1278
1074
|
ancestorComponent['s-p'].push(new Promise(r => (hostRef.$onRenderResolve$ = r)));
|
|
1279
1075
|
}
|
|
1280
1076
|
};
|
|
1281
1077
|
const scheduleUpdate = (hostRef, isInitialLoad) => {
|
|
1282
|
-
|
|
1078
|
+
{
|
|
1283
1079
|
hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
|
|
1284
1080
|
}
|
|
1285
|
-
if (
|
|
1081
|
+
if (hostRef.$flags$ & 4 /* isWaitingForChildren */) {
|
|
1286
1082
|
hostRef.$flags$ |= 512 /* needsRerender */;
|
|
1287
1083
|
return;
|
|
1288
1084
|
}
|
|
@@ -1291,34 +1087,27 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
|
|
|
1291
1087
|
// has already fired off its lifecycle update then
|
|
1292
1088
|
// fire off the initial update
|
|
1293
1089
|
const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
|
|
1294
|
-
return
|
|
1090
|
+
return writeTask(dispatch) ;
|
|
1295
1091
|
};
|
|
1296
1092
|
const dispatchHooks = (hostRef, isInitialLoad) => {
|
|
1297
|
-
const elm = hostRef.$hostElement$;
|
|
1298
1093
|
const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
|
|
1299
|
-
const instance =
|
|
1094
|
+
const instance = hostRef.$lazyInstance$ ;
|
|
1300
1095
|
let promise;
|
|
1301
1096
|
if (isInitialLoad) {
|
|
1302
|
-
|
|
1097
|
+
{
|
|
1303
1098
|
hostRef.$flags$ |= 256 /* isListenReady */;
|
|
1304
1099
|
if (hostRef.$queuedListeners$) {
|
|
1305
1100
|
hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
|
|
1306
1101
|
hostRef.$queuedListeners$ = null;
|
|
1307
1102
|
}
|
|
1308
1103
|
}
|
|
1309
|
-
emitLifecycleEvent(elm, 'componentWillLoad');
|
|
1310
|
-
if (BUILD.cmpWillLoad) {
|
|
1311
|
-
promise = safeCall(instance, 'componentWillLoad');
|
|
1312
|
-
}
|
|
1313
1104
|
}
|
|
1314
1105
|
else {
|
|
1315
|
-
|
|
1316
|
-
if (BUILD.cmpWillUpdate) {
|
|
1106
|
+
{
|
|
1317
1107
|
promise = safeCall(instance, 'componentWillUpdate');
|
|
1318
1108
|
}
|
|
1319
1109
|
}
|
|
1320
|
-
|
|
1321
|
-
if (BUILD.cmpWillRender) {
|
|
1110
|
+
{
|
|
1322
1111
|
promise = then(promise, () => safeCall(instance, 'componentWillRender'));
|
|
1323
1112
|
}
|
|
1324
1113
|
endSchedule();
|
|
@@ -1329,46 +1118,15 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
|
|
|
1329
1118
|
const elm = hostRef.$hostElement$;
|
|
1330
1119
|
const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
|
|
1331
1120
|
const rc = elm['s-rc'];
|
|
1332
|
-
if (
|
|
1121
|
+
if (isInitialLoad) {
|
|
1333
1122
|
// DOM WRITE!
|
|
1334
1123
|
attachStyles(hostRef);
|
|
1335
1124
|
}
|
|
1336
1125
|
const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
|
|
1337
|
-
|
|
1338
|
-
hostRef
|
|
1339
|
-
}
|
|
1340
|
-
if (BUILD.hydrateServerSide) {
|
|
1341
|
-
await callRender(hostRef, instance, elm);
|
|
1342
|
-
}
|
|
1343
|
-
else {
|
|
1344
|
-
callRender(hostRef, instance, elm);
|
|
1345
|
-
}
|
|
1346
|
-
if (BUILD.cssVarShim && plt.$cssShim$) {
|
|
1347
|
-
plt.$cssShim$.updateHost(elm);
|
|
1126
|
+
{
|
|
1127
|
+
callRender(hostRef, instance);
|
|
1348
1128
|
}
|
|
1349
|
-
if (
|
|
1350
|
-
hostRef.$renderCount$++;
|
|
1351
|
-
hostRef.$flags$ &= ~1024 /* devOnRender */;
|
|
1352
|
-
}
|
|
1353
|
-
if (BUILD.hydrateServerSide) {
|
|
1354
|
-
try {
|
|
1355
|
-
// manually connected child components during server-side hydrate
|
|
1356
|
-
serverSideConnected(elm);
|
|
1357
|
-
if (isInitialLoad) {
|
|
1358
|
-
// using only during server-side hydrate
|
|
1359
|
-
if (hostRef.$cmpMeta$.$flags$ & 1 /* shadowDomEncapsulation */) {
|
|
1360
|
-
elm['s-en'] = '';
|
|
1361
|
-
}
|
|
1362
|
-
else if (hostRef.$cmpMeta$.$flags$ & 2 /* scopedCssEncapsulation */) {
|
|
1363
|
-
elm['s-en'] = 'c';
|
|
1364
|
-
}
|
|
1365
|
-
}
|
|
1366
|
-
}
|
|
1367
|
-
catch (e) {
|
|
1368
|
-
consoleError(e, elm);
|
|
1369
|
-
}
|
|
1370
|
-
}
|
|
1371
|
-
if (BUILD.asyncLoading && rc) {
|
|
1129
|
+
if (rc) {
|
|
1372
1130
|
// ok, so turns out there are some child host elements
|
|
1373
1131
|
// waiting on this parent element to load
|
|
1374
1132
|
// let's fire off all update callbacks waiting
|
|
@@ -1377,7 +1135,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
|
|
|
1377
1135
|
}
|
|
1378
1136
|
endRender();
|
|
1379
1137
|
endUpdate();
|
|
1380
|
-
|
|
1138
|
+
{
|
|
1381
1139
|
const childrenPromises = elm['s-p'];
|
|
1382
1140
|
const postUpdate = () => postUpdateComponent(hostRef);
|
|
1383
1141
|
if (childrenPromises.length === 0) {
|
|
@@ -1389,117 +1147,64 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
|
|
|
1389
1147
|
childrenPromises.length = 0;
|
|
1390
1148
|
}
|
|
1391
1149
|
}
|
|
1392
|
-
else {
|
|
1393
|
-
postUpdateComponent(hostRef);
|
|
1394
|
-
}
|
|
1395
1150
|
};
|
|
1396
1151
|
const callRender = (hostRef, instance, elm) => {
|
|
1397
|
-
// in order for bundlers to correctly treeshake the BUILD object
|
|
1398
|
-
// we need to ensure BUILD is not deoptimized within a try/catch
|
|
1399
|
-
// https://rollupjs.org/guide/en/#treeshake tryCatchDeoptimization
|
|
1400
|
-
const allRenderFn = BUILD.allRenderFn ? true : false;
|
|
1401
|
-
const lazyLoad = BUILD.lazyLoad ? true : false;
|
|
1402
|
-
const taskQueue = BUILD.taskQueue ? true : false;
|
|
1403
|
-
const updatable = BUILD.updatable ? true : false;
|
|
1404
1152
|
try {
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
if (updatable && taskQueue) {
|
|
1153
|
+
instance = instance.render() ;
|
|
1154
|
+
{
|
|
1408
1155
|
hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
|
|
1409
1156
|
}
|
|
1410
|
-
|
|
1157
|
+
{
|
|
1411
1158
|
hostRef.$flags$ |= 2 /* hasRendered */;
|
|
1412
1159
|
}
|
|
1413
|
-
|
|
1414
|
-
|
|
1160
|
+
{
|
|
1161
|
+
{
|
|
1415
1162
|
// looks like we've got child nodes to render into this host element
|
|
1416
1163
|
// or we need to update the css class/attrs on the host element
|
|
1417
1164
|
// DOM WRITE!
|
|
1418
|
-
|
|
1419
|
-
return Promise.resolve(instance).then(value => renderVdom(hostRef, value));
|
|
1420
|
-
}
|
|
1421
|
-
else {
|
|
1165
|
+
{
|
|
1422
1166
|
renderVdom(hostRef, instance);
|
|
1423
1167
|
}
|
|
1424
1168
|
}
|
|
1425
|
-
else {
|
|
1426
|
-
elm.textContent = instance;
|
|
1427
|
-
}
|
|
1428
1169
|
}
|
|
1429
1170
|
}
|
|
1430
1171
|
catch (e) {
|
|
1431
1172
|
consoleError(e, hostRef.$hostElement$);
|
|
1432
1173
|
}
|
|
1433
|
-
renderingRef = null;
|
|
1434
1174
|
return null;
|
|
1435
1175
|
};
|
|
1436
|
-
const getRenderingRef = () => renderingRef;
|
|
1437
1176
|
const postUpdateComponent = (hostRef) => {
|
|
1438
1177
|
const tagName = hostRef.$cmpMeta$.$tagName$;
|
|
1439
1178
|
const elm = hostRef.$hostElement$;
|
|
1440
1179
|
const endPostUpdate = createTime('postUpdate', tagName);
|
|
1441
|
-
const instance =
|
|
1180
|
+
const instance = hostRef.$lazyInstance$ ;
|
|
1442
1181
|
const ancestorComponent = hostRef.$ancestorComponent$;
|
|
1443
|
-
if (BUILD.cmpDidRender) {
|
|
1444
|
-
if (BUILD.isDev) {
|
|
1445
|
-
hostRef.$flags$ |= 1024 /* devOnRender */;
|
|
1446
|
-
}
|
|
1447
|
-
safeCall(instance, 'componentDidRender');
|
|
1448
|
-
if (BUILD.isDev) {
|
|
1449
|
-
hostRef.$flags$ &= ~1024 /* devOnRender */;
|
|
1450
|
-
}
|
|
1451
|
-
}
|
|
1452
|
-
emitLifecycleEvent(elm, 'componentDidRender');
|
|
1453
1182
|
if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
|
|
1454
1183
|
hostRef.$flags$ |= 64 /* hasLoadedComponent */;
|
|
1455
|
-
|
|
1184
|
+
{
|
|
1456
1185
|
// DOM WRITE!
|
|
1457
1186
|
addHydratedFlag(elm);
|
|
1458
1187
|
}
|
|
1459
|
-
|
|
1460
|
-
if (BUILD.isDev) {
|
|
1461
|
-
hostRef.$flags$ |= 2048 /* devOnDidLoad */;
|
|
1462
|
-
}
|
|
1188
|
+
{
|
|
1463
1189
|
safeCall(instance, 'componentDidLoad');
|
|
1464
|
-
if (BUILD.isDev) {
|
|
1465
|
-
hostRef.$flags$ &= ~2048 /* devOnDidLoad */;
|
|
1466
|
-
}
|
|
1467
1190
|
}
|
|
1468
|
-
emitLifecycleEvent(elm, 'componentDidLoad');
|
|
1469
1191
|
endPostUpdate();
|
|
1470
|
-
|
|
1192
|
+
{
|
|
1471
1193
|
hostRef.$onReadyResolve$(elm);
|
|
1472
1194
|
if (!ancestorComponent) {
|
|
1473
|
-
appDidLoad(
|
|
1195
|
+
appDidLoad();
|
|
1474
1196
|
}
|
|
1475
1197
|
}
|
|
1476
1198
|
}
|
|
1477
1199
|
else {
|
|
1478
|
-
if (BUILD.cmpDidUpdate) {
|
|
1479
|
-
// we've already loaded this component
|
|
1480
|
-
// fire off the user's componentDidUpdate method (if one was provided)
|
|
1481
|
-
// componentDidUpdate runs AFTER render() has been called
|
|
1482
|
-
// and all child components have finished updating
|
|
1483
|
-
if (BUILD.isDev) {
|
|
1484
|
-
hostRef.$flags$ |= 1024 /* devOnRender */;
|
|
1485
|
-
}
|
|
1486
|
-
safeCall(instance, 'componentDidUpdate');
|
|
1487
|
-
if (BUILD.isDev) {
|
|
1488
|
-
hostRef.$flags$ &= ~1024 /* devOnRender */;
|
|
1489
|
-
}
|
|
1490
|
-
}
|
|
1491
|
-
emitLifecycleEvent(elm, 'componentDidUpdate');
|
|
1492
1200
|
endPostUpdate();
|
|
1493
1201
|
}
|
|
1494
|
-
|
|
1495
|
-
elm['s-hmr-load'] && elm['s-hmr-load']();
|
|
1496
|
-
}
|
|
1497
|
-
if (BUILD.method && BUILD.lazyLoad) {
|
|
1202
|
+
{
|
|
1498
1203
|
hostRef.$onInstanceResolve$(elm);
|
|
1499
1204
|
}
|
|
1500
1205
|
// load events fire from bottom to top
|
|
1501
1206
|
// the deepest elements load first then bubbles up
|
|
1502
|
-
|
|
1207
|
+
{
|
|
1503
1208
|
if (hostRef.$onRenderResolve$) {
|
|
1504
1209
|
hostRef.$onRenderResolve$();
|
|
1505
1210
|
hostRef.$onRenderResolve$ = undefined;
|
|
@@ -1513,31 +1218,13 @@ const postUpdateComponent = (hostRef) => {
|
|
|
1513
1218
|
// ( •_•)>⌐■-■
|
|
1514
1219
|
// (⌐■_■)
|
|
1515
1220
|
};
|
|
1516
|
-
const forceUpdate = (ref) => {
|
|
1517
|
-
if (BUILD.updatable) {
|
|
1518
|
-
const hostRef = getHostRef(ref);
|
|
1519
|
-
const isConnected = hostRef.$hostElement$.isConnected;
|
|
1520
|
-
if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
|
|
1521
|
-
scheduleUpdate(hostRef, false);
|
|
1522
|
-
}
|
|
1523
|
-
// Returns "true" when the forced update was successfully scheduled
|
|
1524
|
-
return isConnected;
|
|
1525
|
-
}
|
|
1526
|
-
return false;
|
|
1527
|
-
};
|
|
1528
1221
|
const appDidLoad = (who) => {
|
|
1529
1222
|
// on appload
|
|
1530
1223
|
// we have finish the first big initial render
|
|
1531
|
-
|
|
1224
|
+
{
|
|
1532
1225
|
addHydratedFlag(doc.documentElement);
|
|
1533
1226
|
}
|
|
1534
|
-
if (BUILD.asyncQueue) {
|
|
1535
|
-
plt.$flags$ |= 2 /* appLoaded */;
|
|
1536
|
-
}
|
|
1537
1227
|
nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
|
|
1538
|
-
if (BUILD.profile && performance.measure) {
|
|
1539
|
-
performance.measure(`[Stencil] ${NAMESPACE} initial load (by ${who})`, 'st:app:start');
|
|
1540
|
-
}
|
|
1541
1228
|
};
|
|
1542
1229
|
const safeCall = (instance, method, arg) => {
|
|
1543
1230
|
if (instance && instance[method]) {
|
|
@@ -1553,248 +1240,20 @@ const safeCall = (instance, method, arg) => {
|
|
|
1553
1240
|
const then = (promise, thenFn) => {
|
|
1554
1241
|
return promise && promise.then ? promise.then(thenFn) : thenFn();
|
|
1555
1242
|
};
|
|
1556
|
-
const
|
|
1557
|
-
if (BUILD.lifecycleDOMEvents) {
|
|
1558
|
-
emitEvent(elm, 'stencil_' + lifecycleName, {
|
|
1559
|
-
bubbles: true,
|
|
1560
|
-
composed: true,
|
|
1561
|
-
detail: {
|
|
1562
|
-
namespace: NAMESPACE,
|
|
1563
|
-
},
|
|
1564
|
-
});
|
|
1565
|
-
}
|
|
1566
|
-
};
|
|
1567
|
-
const addHydratedFlag = (elm) => (BUILD.hydratedClass ? elm.classList.add('hydrated') : BUILD.hydratedAttribute ? elm.setAttribute('hydrated', '') : undefined);
|
|
1568
|
-
const serverSideConnected = (elm) => {
|
|
1569
|
-
const children = elm.children;
|
|
1570
|
-
if (children != null) {
|
|
1571
|
-
for (let i = 0, ii = children.length; i < ii; i++) {
|
|
1572
|
-
const childElm = children[i];
|
|
1573
|
-
if (typeof childElm.connectedCallback === 'function') {
|
|
1574
|
-
childElm.connectedCallback();
|
|
1575
|
-
}
|
|
1576
|
-
serverSideConnected(childElm);
|
|
1577
|
-
}
|
|
1578
|
-
}
|
|
1579
|
-
};
|
|
1580
|
-
const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
|
|
1581
|
-
const endHydrate = createTime('hydrateClient', tagName);
|
|
1582
|
-
const shadowRoot = hostElm.shadowRoot;
|
|
1583
|
-
const childRenderNodes = [];
|
|
1584
|
-
const slotNodes = [];
|
|
1585
|
-
const shadowRootNodes = BUILD.shadowDom && shadowRoot ? [] : null;
|
|
1586
|
-
const vnode = (hostRef.$vnode$ = newVNode(tagName, null));
|
|
1587
|
-
if (!plt.$orgLocNodes$) {
|
|
1588
|
-
initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));
|
|
1589
|
-
}
|
|
1590
|
-
hostElm[HYDRATE_ID] = hostId;
|
|
1591
|
-
hostElm.removeAttribute(HYDRATE_ID);
|
|
1592
|
-
clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
|
|
1593
|
-
childRenderNodes.map(c => {
|
|
1594
|
-
const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
|
|
1595
|
-
const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
|
|
1596
|
-
const node = c.$elm$;
|
|
1597
|
-
if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
|
|
1598
|
-
orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
|
|
1599
|
-
}
|
|
1600
|
-
if (!shadowRoot) {
|
|
1601
|
-
node['s-hn'] = tagName;
|
|
1602
|
-
if (orgLocationNode) {
|
|
1603
|
-
node['s-ol'] = orgLocationNode;
|
|
1604
|
-
node['s-ol']['s-nr'] = node;
|
|
1605
|
-
}
|
|
1606
|
-
}
|
|
1607
|
-
plt.$orgLocNodes$.delete(orgLocationId);
|
|
1608
|
-
});
|
|
1609
|
-
if (BUILD.shadowDom && shadowRoot) {
|
|
1610
|
-
shadowRootNodes.map(shadowRootNode => {
|
|
1611
|
-
if (shadowRootNode) {
|
|
1612
|
-
shadowRoot.appendChild(shadowRootNode);
|
|
1613
|
-
}
|
|
1614
|
-
});
|
|
1615
|
-
}
|
|
1616
|
-
endHydrate();
|
|
1617
|
-
};
|
|
1618
|
-
const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
|
|
1619
|
-
let childNodeType;
|
|
1620
|
-
let childIdSplt;
|
|
1621
|
-
let childVNode;
|
|
1622
|
-
let i;
|
|
1623
|
-
if (node.nodeType === 1 /* ElementNode */) {
|
|
1624
|
-
childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
|
|
1625
|
-
if (childNodeType) {
|
|
1626
|
-
// got the node data from the element's attribute
|
|
1627
|
-
// `${hostId}.${nodeId}.${depth}.${index}`
|
|
1628
|
-
childIdSplt = childNodeType.split('.');
|
|
1629
|
-
if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
|
|
1630
|
-
childVNode = {
|
|
1631
|
-
$flags$: 0,
|
|
1632
|
-
$hostId$: childIdSplt[0],
|
|
1633
|
-
$nodeId$: childIdSplt[1],
|
|
1634
|
-
$depth$: childIdSplt[2],
|
|
1635
|
-
$index$: childIdSplt[3],
|
|
1636
|
-
$tag$: node.tagName.toLowerCase(),
|
|
1637
|
-
$elm$: node,
|
|
1638
|
-
$attrs$: null,
|
|
1639
|
-
$children$: null,
|
|
1640
|
-
$key$: null,
|
|
1641
|
-
$name$: null,
|
|
1642
|
-
$text$: null,
|
|
1643
|
-
};
|
|
1644
|
-
childRenderNodes.push(childVNode);
|
|
1645
|
-
node.removeAttribute(HYDRATE_CHILD_ID);
|
|
1646
|
-
// this is a new child vnode
|
|
1647
|
-
// so ensure its parent vnode has the vchildren array
|
|
1648
|
-
if (!parentVNode.$children$) {
|
|
1649
|
-
parentVNode.$children$ = [];
|
|
1650
|
-
}
|
|
1651
|
-
// add our child vnode to a specific index of the vnode's children
|
|
1652
|
-
parentVNode.$children$[childVNode.$index$] = childVNode;
|
|
1653
|
-
// this is now the new parent vnode for all the next child checks
|
|
1654
|
-
parentVNode = childVNode;
|
|
1655
|
-
if (shadowRootNodes && childVNode.$depth$ === '0') {
|
|
1656
|
-
shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
|
|
1657
|
-
}
|
|
1658
|
-
}
|
|
1659
|
-
}
|
|
1660
|
-
// recursively drill down, end to start so we can remove nodes
|
|
1661
|
-
for (i = node.childNodes.length - 1; i >= 0; i--) {
|
|
1662
|
-
clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);
|
|
1663
|
-
}
|
|
1664
|
-
if (node.shadowRoot) {
|
|
1665
|
-
// keep drilling down through the shadow root nodes
|
|
1666
|
-
for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
|
|
1667
|
-
clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);
|
|
1668
|
-
}
|
|
1669
|
-
}
|
|
1670
|
-
}
|
|
1671
|
-
else if (node.nodeType === 8 /* CommentNode */) {
|
|
1672
|
-
// `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`
|
|
1673
|
-
childIdSplt = node.nodeValue.split('.');
|
|
1674
|
-
if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
|
|
1675
|
-
// comment node for either the host id or a 0 host id
|
|
1676
|
-
childNodeType = childIdSplt[0];
|
|
1677
|
-
childVNode = {
|
|
1678
|
-
$flags$: 0,
|
|
1679
|
-
$hostId$: childIdSplt[1],
|
|
1680
|
-
$nodeId$: childIdSplt[2],
|
|
1681
|
-
$depth$: childIdSplt[3],
|
|
1682
|
-
$index$: childIdSplt[4],
|
|
1683
|
-
$elm$: node,
|
|
1684
|
-
$attrs$: null,
|
|
1685
|
-
$children$: null,
|
|
1686
|
-
$key$: null,
|
|
1687
|
-
$name$: null,
|
|
1688
|
-
$tag$: null,
|
|
1689
|
-
$text$: null,
|
|
1690
|
-
};
|
|
1691
|
-
if (childNodeType === TEXT_NODE_ID) {
|
|
1692
|
-
childVNode.$elm$ = node.nextSibling;
|
|
1693
|
-
if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* TextNode */) {
|
|
1694
|
-
childVNode.$text$ = childVNode.$elm$.textContent;
|
|
1695
|
-
childRenderNodes.push(childVNode);
|
|
1696
|
-
// remove the text comment since it's no longer needed
|
|
1697
|
-
node.remove();
|
|
1698
|
-
if (!parentVNode.$children$) {
|
|
1699
|
-
parentVNode.$children$ = [];
|
|
1700
|
-
}
|
|
1701
|
-
parentVNode.$children$[childVNode.$index$] = childVNode;
|
|
1702
|
-
if (shadowRootNodes && childVNode.$depth$ === '0') {
|
|
1703
|
-
shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
|
|
1704
|
-
}
|
|
1705
|
-
}
|
|
1706
|
-
}
|
|
1707
|
-
else if (childVNode.$hostId$ === hostId) {
|
|
1708
|
-
// this comment node is specifcally for this host id
|
|
1709
|
-
if (childNodeType === SLOT_NODE_ID) {
|
|
1710
|
-
// `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
|
|
1711
|
-
childVNode.$tag$ = 'slot';
|
|
1712
|
-
if (childIdSplt[5]) {
|
|
1713
|
-
node['s-sn'] = childVNode.$name$ = childIdSplt[5];
|
|
1714
|
-
}
|
|
1715
|
-
else {
|
|
1716
|
-
node['s-sn'] = '';
|
|
1717
|
-
}
|
|
1718
|
-
node['s-sr'] = true;
|
|
1719
|
-
if (BUILD.shadowDom && shadowRootNodes) {
|
|
1720
|
-
// browser support shadowRoot and this is a shadow dom component
|
|
1721
|
-
// create an actual slot element
|
|
1722
|
-
childVNode.$elm$ = doc.createElement(childVNode.$tag$);
|
|
1723
|
-
if (childVNode.$name$) {
|
|
1724
|
-
// add the slot name attribute
|
|
1725
|
-
childVNode.$elm$.setAttribute('name', childVNode.$name$);
|
|
1726
|
-
}
|
|
1727
|
-
// insert the new slot element before the slot comment
|
|
1728
|
-
node.parentNode.insertBefore(childVNode.$elm$, node);
|
|
1729
|
-
// remove the slot comment since it's not needed for shadow
|
|
1730
|
-
node.remove();
|
|
1731
|
-
if (childVNode.$depth$ === '0') {
|
|
1732
|
-
shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
|
|
1733
|
-
}
|
|
1734
|
-
}
|
|
1735
|
-
slotNodes.push(childVNode);
|
|
1736
|
-
if (!parentVNode.$children$) {
|
|
1737
|
-
parentVNode.$children$ = [];
|
|
1738
|
-
}
|
|
1739
|
-
parentVNode.$children$[childVNode.$index$] = childVNode;
|
|
1740
|
-
}
|
|
1741
|
-
else if (childNodeType === CONTENT_REF_ID) {
|
|
1742
|
-
// `${CONTENT_REF_ID}.${hostId}`;
|
|
1743
|
-
if (BUILD.shadowDom && shadowRootNodes) {
|
|
1744
|
-
// remove the content ref comment since it's not needed for shadow
|
|
1745
|
-
node.remove();
|
|
1746
|
-
}
|
|
1747
|
-
else if (BUILD.slotRelocation) {
|
|
1748
|
-
hostElm['s-cr'] = node;
|
|
1749
|
-
node['s-cn'] = true;
|
|
1750
|
-
}
|
|
1751
|
-
}
|
|
1752
|
-
}
|
|
1753
|
-
}
|
|
1754
|
-
}
|
|
1755
|
-
else if (parentVNode && parentVNode.$tag$ === 'style') {
|
|
1756
|
-
const vnode = newVNode(null, node.textContent);
|
|
1757
|
-
vnode.$elm$ = node;
|
|
1758
|
-
vnode.$index$ = '0';
|
|
1759
|
-
parentVNode.$children$ = [vnode];
|
|
1760
|
-
}
|
|
1761
|
-
};
|
|
1762
|
-
const initializeDocumentHydrate = (node, orgLocNodes) => {
|
|
1763
|
-
if (node.nodeType === 1 /* ElementNode */) {
|
|
1764
|
-
let i = 0;
|
|
1765
|
-
for (; i < node.childNodes.length; i++) {
|
|
1766
|
-
initializeDocumentHydrate(node.childNodes[i], orgLocNodes);
|
|
1767
|
-
}
|
|
1768
|
-
if (node.shadowRoot) {
|
|
1769
|
-
for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
|
|
1770
|
-
initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
|
|
1771
|
-
}
|
|
1772
|
-
}
|
|
1773
|
-
}
|
|
1774
|
-
else if (node.nodeType === 8 /* CommentNode */) {
|
|
1775
|
-
const childIdSplt = node.nodeValue.split('.');
|
|
1776
|
-
if (childIdSplt[0] === ORG_LOCATION_ID) {
|
|
1777
|
-
orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
|
|
1778
|
-
node.nodeValue = '';
|
|
1779
|
-
// useful to know if the original location is
|
|
1780
|
-
// the root light-dom of a shadow dom component
|
|
1781
|
-
node['s-en'] = childIdSplt[3];
|
|
1782
|
-
}
|
|
1783
|
-
}
|
|
1784
|
-
};
|
|
1243
|
+
const addHydratedFlag = (elm) => (elm.classList.add('hydrated') );
|
|
1785
1244
|
const parsePropertyValue = (propValue, propType) => {
|
|
1786
1245
|
// ensure this value is of the correct prop type
|
|
1787
1246
|
if (propValue != null && !isComplexType(propValue)) {
|
|
1788
|
-
if (
|
|
1247
|
+
if (propType & 4 /* Boolean */) {
|
|
1789
1248
|
// per the HTML spec, any string value means it is a boolean true value
|
|
1790
1249
|
// but we'll cheat here and say that the string "false" is the boolean false
|
|
1791
1250
|
return propValue === 'false' ? false : propValue === '' || !!propValue;
|
|
1792
1251
|
}
|
|
1793
|
-
if (
|
|
1252
|
+
if (propType & 2 /* Number */) {
|
|
1794
1253
|
// force it to be a number
|
|
1795
1254
|
return parseFloat(propValue);
|
|
1796
1255
|
}
|
|
1797
|
-
if (
|
|
1256
|
+
if (propType & 1 /* String */) {
|
|
1798
1257
|
// could have been passed as a number or boolean
|
|
1799
1258
|
// but we still want it as a string
|
|
1800
1259
|
return String(propValue);
|
|
@@ -1810,26 +1269,18 @@ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propNam
|
|
|
1810
1269
|
const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
1811
1270
|
// check our new property value against our internal value
|
|
1812
1271
|
const hostRef = getHostRef(ref);
|
|
1813
|
-
const elm =
|
|
1272
|
+
const elm = hostRef.$hostElement$ ;
|
|
1814
1273
|
const oldVal = hostRef.$instanceValues$.get(propName);
|
|
1815
1274
|
const flags = hostRef.$flags$;
|
|
1816
|
-
const instance =
|
|
1275
|
+
const instance = hostRef.$lazyInstance$ ;
|
|
1817
1276
|
newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
|
|
1818
|
-
if ((!
|
|
1277
|
+
if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
|
|
1819
1278
|
// gadzooks! the property's value has changed!!
|
|
1820
1279
|
// set our new value!
|
|
1821
1280
|
hostRef.$instanceValues$.set(propName, newVal);
|
|
1822
|
-
if (
|
|
1823
|
-
if (hostRef.$flags$ & 1024 /* devOnRender */) {
|
|
1824
|
-
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);
|
|
1825
|
-
}
|
|
1826
|
-
else if (hostRef.$flags$ & 2048 /* devOnDidLoad */) {
|
|
1827
|
-
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);
|
|
1828
|
-
}
|
|
1829
|
-
}
|
|
1830
|
-
if (!BUILD.lazyLoad || instance) {
|
|
1281
|
+
if (instance) {
|
|
1831
1282
|
// get an array of method names of watch functions to call
|
|
1832
|
-
if (
|
|
1283
|
+
if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
|
|
1833
1284
|
const watchMethods = cmpMeta.$watchers$[propName];
|
|
1834
1285
|
if (watchMethods) {
|
|
1835
1286
|
// this instance is watching for when this property changed
|
|
@@ -1844,12 +1295,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
1844
1295
|
});
|
|
1845
1296
|
}
|
|
1846
1297
|
}
|
|
1847
|
-
if (
|
|
1848
|
-
if (BUILD.cmpShouldUpdate && instance.componentShouldUpdate) {
|
|
1849
|
-
if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
|
|
1850
|
-
return;
|
|
1851
|
-
}
|
|
1852
|
-
}
|
|
1298
|
+
if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
|
|
1853
1299
|
// looks like this value actually changed, so we've got work to do!
|
|
1854
1300
|
// but only if we've already rendered, otherwise just chill out
|
|
1855
1301
|
// queue that we need to do an update, but don't worry about queuing
|
|
@@ -1860,15 +1306,15 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
1860
1306
|
}
|
|
1861
1307
|
};
|
|
1862
1308
|
const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
1863
|
-
if (
|
|
1864
|
-
if (
|
|
1309
|
+
if (cmpMeta.$members$) {
|
|
1310
|
+
if (Cstr.watchers) {
|
|
1865
1311
|
cmpMeta.$watchers$ = Cstr.watchers;
|
|
1866
1312
|
}
|
|
1867
1313
|
// It's better to have a const than two Object.entries()
|
|
1868
1314
|
const members = Object.entries(cmpMeta.$members$);
|
|
1869
1315
|
const prototype = Cstr.prototype;
|
|
1870
1316
|
members.map(([memberName, [memberFlags]]) => {
|
|
1871
|
-
if ((
|
|
1317
|
+
if ((memberFlags & 31 /* Prop */ || ((flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
|
|
1872
1318
|
// proxyComponent - prop
|
|
1873
1319
|
Object.defineProperty(prototype, memberName, {
|
|
1874
1320
|
get() {
|
|
@@ -1876,21 +1322,6 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1876
1322
|
return getValue(this, memberName);
|
|
1877
1323
|
},
|
|
1878
1324
|
set(newValue) {
|
|
1879
|
-
// only during dev time
|
|
1880
|
-
if (BUILD.isDev) {
|
|
1881
|
-
const ref = getHostRef(this);
|
|
1882
|
-
if (
|
|
1883
|
-
// we are proxying the instance (not element)
|
|
1884
|
-
(flags & 1 /* isElementConstructor */) === 0 &&
|
|
1885
|
-
// the element is not constructing
|
|
1886
|
-
(ref.$flags$ & 8 /* isConstructingInstance */) === 0 &&
|
|
1887
|
-
// the member is a prop
|
|
1888
|
-
(memberFlags & 31 /* Prop */) !== 0 &&
|
|
1889
|
-
// the member is not mutable
|
|
1890
|
-
(memberFlags & 1024 /* Mutable */) === 0) {
|
|
1891
|
-
consoleDevWarn(`@Prop() "${memberName}" on <${cmpMeta.$tagName$}> is immutable but was modified from within the component.\nMore information: https://stenciljs.com/docs/properties#prop-mutability`);
|
|
1892
|
-
}
|
|
1893
|
-
}
|
|
1894
1325
|
// proxyComponent, set value
|
|
1895
1326
|
setValue(this, memberName, newValue, cmpMeta);
|
|
1896
1327
|
},
|
|
@@ -1898,7 +1329,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1898
1329
|
enumerable: true,
|
|
1899
1330
|
});
|
|
1900
1331
|
}
|
|
1901
|
-
else if (
|
|
1332
|
+
else if (flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
|
|
1902
1333
|
// proxyComponent - method
|
|
1903
1334
|
Object.defineProperty(prototype, memberName, {
|
|
1904
1335
|
value(...args) {
|
|
@@ -1908,7 +1339,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1908
1339
|
});
|
|
1909
1340
|
}
|
|
1910
1341
|
});
|
|
1911
|
-
if (
|
|
1342
|
+
if ((flags & 1 /* isElementConstructor */)) {
|
|
1912
1343
|
const attrNameToPropName = new Map();
|
|
1913
1344
|
prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
|
|
1914
1345
|
plt.jmp(() => {
|
|
@@ -1923,7 +1354,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1923
1354
|
.map(([propName, m]) => {
|
|
1924
1355
|
const attrName = m[1] || propName;
|
|
1925
1356
|
attrNameToPropName.set(attrName, propName);
|
|
1926
|
-
if (
|
|
1357
|
+
if (m[0] & 512 /* ReflectAttr */) {
|
|
1927
1358
|
cmpMeta.$attrsToReflect$.push([propName, attrName]);
|
|
1928
1359
|
}
|
|
1929
1360
|
return attrName;
|
|
@@ -1934,28 +1365,25 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1934
1365
|
};
|
|
1935
1366
|
const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
|
|
1936
1367
|
// initializeComponent
|
|
1937
|
-
if ((
|
|
1938
|
-
|
|
1368
|
+
if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
|
|
1369
|
+
{
|
|
1939
1370
|
// we haven't initialized this element yet
|
|
1940
1371
|
hostRef.$flags$ |= 32 /* hasInitializedComponent */;
|
|
1941
1372
|
// lazy loaded components
|
|
1942
1373
|
// request the component's implementation to be
|
|
1943
1374
|
// wired up with the host element
|
|
1944
|
-
Cstr = loadModule(cmpMeta
|
|
1375
|
+
Cstr = loadModule(cmpMeta);
|
|
1945
1376
|
if (Cstr.then) {
|
|
1946
1377
|
// Await creates a micro-task avoid if possible
|
|
1947
|
-
const endLoad = uniqueTime(
|
|
1378
|
+
const endLoad = uniqueTime();
|
|
1948
1379
|
Cstr = await Cstr;
|
|
1949
1380
|
endLoad();
|
|
1950
1381
|
}
|
|
1951
|
-
if (
|
|
1952
|
-
throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
|
|
1953
|
-
}
|
|
1954
|
-
if (BUILD.member && !Cstr.isProxied) {
|
|
1382
|
+
if (!Cstr.isProxied) {
|
|
1955
1383
|
// we'eve never proxied this Constructor before
|
|
1956
1384
|
// let's add the getters/setters to its prototype before
|
|
1957
1385
|
// the first time we create an instance of the implementation
|
|
1958
|
-
|
|
1386
|
+
{
|
|
1959
1387
|
cmpMeta.$watchers$ = Cstr.watchers;
|
|
1960
1388
|
}
|
|
1961
1389
|
proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
|
|
@@ -1965,7 +1393,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
1965
1393
|
// ok, time to construct the instance
|
|
1966
1394
|
// but let's keep track of when we start and stop
|
|
1967
1395
|
// so that the getters/setters don't incorrectly step on data
|
|
1968
|
-
|
|
1396
|
+
{
|
|
1969
1397
|
hostRef.$flags$ |= 8 /* isConstructingInstance */;
|
|
1970
1398
|
}
|
|
1971
1399
|
// construct the lazy-loaded component implementation
|
|
@@ -1978,35 +1406,20 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
1978
1406
|
catch (e) {
|
|
1979
1407
|
consoleError(e);
|
|
1980
1408
|
}
|
|
1981
|
-
|
|
1409
|
+
{
|
|
1982
1410
|
hostRef.$flags$ &= ~8 /* isConstructingInstance */;
|
|
1983
1411
|
}
|
|
1984
|
-
|
|
1412
|
+
{
|
|
1985
1413
|
hostRef.$flags$ |= 128 /* isWatchReady */;
|
|
1986
1414
|
}
|
|
1987
1415
|
endNewInstance();
|
|
1988
|
-
fireConnectedCallback(hostRef.$lazyInstance$);
|
|
1989
1416
|
}
|
|
1990
|
-
|
|
1991
|
-
// sync constructor component
|
|
1992
|
-
Cstr = elm.constructor;
|
|
1993
|
-
hostRef.$flags$ |= 128 /* isWatchReady */ | 32 /* hasInitializedComponent */;
|
|
1994
|
-
}
|
|
1995
|
-
if (BUILD.style && Cstr.style) {
|
|
1417
|
+
if (Cstr.style) {
|
|
1996
1418
|
// this component has styles but we haven't registered them yet
|
|
1997
1419
|
let style = Cstr.style;
|
|
1998
|
-
|
|
1999
|
-
style = style[(hostRef.$modeName$ = computeMode(elm))];
|
|
2000
|
-
if (BUILD.hydrateServerSide && hostRef.$modeName$) {
|
|
2001
|
-
elm.setAttribute('s-mode', hostRef.$modeName$);
|
|
2002
|
-
}
|
|
2003
|
-
}
|
|
2004
|
-
const scopeId = getScopeId(cmpMeta, hostRef.$modeName$);
|
|
1420
|
+
const scopeId = getScopeId(cmpMeta);
|
|
2005
1421
|
if (!styles.has(scopeId)) {
|
|
2006
1422
|
const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
|
|
2007
|
-
if (!BUILD.hydrateServerSide && BUILD.shadowDom && BUILD.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
|
|
2008
|
-
style = await import('./shadow-css-c1ad5fdc.js').then(m => m.scopeCss(style, scopeId, false));
|
|
2009
|
-
}
|
|
2010
1423
|
registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
|
|
2011
1424
|
endRegisterStyles();
|
|
2012
1425
|
}
|
|
@@ -2015,7 +1428,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
2015
1428
|
// we've successfully created a lazy instance
|
|
2016
1429
|
const ancestorComponent = hostRef.$ancestorComponent$;
|
|
2017
1430
|
const schedule = () => scheduleUpdate(hostRef, true);
|
|
2018
|
-
if (
|
|
1431
|
+
if (ancestorComponent && ancestorComponent['s-rc']) {
|
|
2019
1432
|
// this is the intial load and this component it has an ancestor component
|
|
2020
1433
|
// but the ancestor component has NOT fired its will update lifecycle yet
|
|
2021
1434
|
// so let's just cool our jets and wait for the ancestor to continue first
|
|
@@ -2028,52 +1441,31 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
2028
1441
|
schedule();
|
|
2029
1442
|
}
|
|
2030
1443
|
};
|
|
2031
|
-
const fireConnectedCallback = (instance) => {
|
|
2032
|
-
if (BUILD.lazyLoad && BUILD.connectedCallback) {
|
|
2033
|
-
safeCall(instance, 'connectedCallback');
|
|
2034
|
-
}
|
|
2035
|
-
};
|
|
2036
1444
|
const connectedCallback = (elm) => {
|
|
2037
1445
|
if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
|
|
2038
1446
|
const hostRef = getHostRef(elm);
|
|
2039
1447
|
const cmpMeta = hostRef.$cmpMeta$;
|
|
2040
1448
|
const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
|
|
2041
|
-
if (BUILD.hostListenerTargetParent) {
|
|
2042
|
-
// only run if we have listeners being attached to a parent
|
|
2043
|
-
addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
|
|
2044
|
-
}
|
|
2045
1449
|
if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
|
|
2046
1450
|
// first time this component has connected
|
|
2047
1451
|
hostRef.$flags$ |= 1 /* hasConnected */;
|
|
2048
|
-
|
|
2049
|
-
if (BUILD.hydrateClientSide) {
|
|
2050
|
-
hostId = elm.getAttribute(HYDRATE_ID);
|
|
2051
|
-
if (hostId) {
|
|
2052
|
-
if (BUILD.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
|
|
2053
|
-
const scopeId = BUILD.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute('s-mode')) : addStyle(elm.shadowRoot, cmpMeta);
|
|
2054
|
-
elm.classList.remove(scopeId + '-h', scopeId + '-s');
|
|
2055
|
-
}
|
|
2056
|
-
initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
|
|
2057
|
-
}
|
|
2058
|
-
}
|
|
2059
|
-
if (BUILD.slotRelocation && !hostId) {
|
|
1452
|
+
{
|
|
2060
1453
|
// initUpdate
|
|
2061
1454
|
// if the slot polyfill is required we'll need to put some nodes
|
|
2062
1455
|
// in here to act as original content anchors as we move nodes around
|
|
2063
1456
|
// host element has been connected to the DOM
|
|
2064
|
-
if (
|
|
1457
|
+
if ((cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */))) {
|
|
2065
1458
|
setContentReference(elm);
|
|
2066
1459
|
}
|
|
2067
1460
|
}
|
|
2068
|
-
|
|
1461
|
+
{
|
|
2069
1462
|
// find the first ancestor component (if there is one) and register
|
|
2070
1463
|
// this component as one of the actively loading child components for its ancestor
|
|
2071
1464
|
let ancestorComponent = elm;
|
|
2072
1465
|
while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
|
|
2073
1466
|
// climb up the ancestors looking for the first
|
|
2074
1467
|
// component that hasn't finished its lifecycle update yet
|
|
2075
|
-
if (
|
|
2076
|
-
ancestorComponent['s-p']) {
|
|
1468
|
+
if (ancestorComponent['s-p']) {
|
|
2077
1469
|
// we found this components first ancestor component
|
|
2078
1470
|
// keep a reference to this component's ancestor component
|
|
2079
1471
|
attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
|
|
@@ -2083,7 +1475,7 @@ const connectedCallback = (elm) => {
|
|
|
2083
1475
|
}
|
|
2084
1476
|
// Lazy properties
|
|
2085
1477
|
// https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
|
|
2086
|
-
if (
|
|
1478
|
+
if (cmpMeta.$members$) {
|
|
2087
1479
|
Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
|
|
2088
1480
|
if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
|
|
2089
1481
|
const value = elm[memberName];
|
|
@@ -2092,14 +1484,7 @@ const connectedCallback = (elm) => {
|
|
|
2092
1484
|
}
|
|
2093
1485
|
});
|
|
2094
1486
|
}
|
|
2095
|
-
|
|
2096
|
-
// connectedCallback, taskQueue, initialLoad
|
|
2097
|
-
// angular sets attribute AFTER connectCallback
|
|
2098
|
-
// https://github.com/angular/angular/issues/18909
|
|
2099
|
-
// https://github.com/angular/angular/issues/19940
|
|
2100
|
-
nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
|
|
2101
|
-
}
|
|
2102
|
-
else {
|
|
1487
|
+
{
|
|
2103
1488
|
initializeComponent(elm, hostRef, cmpMeta);
|
|
2104
1489
|
}
|
|
2105
1490
|
}
|
|
@@ -2107,9 +1492,7 @@ const connectedCallback = (elm) => {
|
|
|
2107
1492
|
// not the first time this has connected
|
|
2108
1493
|
// reattach any event listeners to the host
|
|
2109
1494
|
// since they would have been removed when disconnected
|
|
2110
|
-
addHostEventListeners(elm, hostRef, cmpMeta.$listeners
|
|
2111
|
-
// fire off connectedCallback() on component instance
|
|
2112
|
-
fireConnectedCallback(hostRef.$lazyInstance$);
|
|
1495
|
+
addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
|
|
2113
1496
|
}
|
|
2114
1497
|
endConnected();
|
|
2115
1498
|
}
|
|
@@ -2121,231 +1504,23 @@ const setContentReference = (elm) => {
|
|
|
2121
1504
|
// let's pick out the inner content for slot projection
|
|
2122
1505
|
// create a node to represent where the original
|
|
2123
1506
|
// content was first placed, which is useful later on
|
|
2124
|
-
const contentRefElm = (elm['s-cr'] = doc.createComment(
|
|
1507
|
+
const contentRefElm = (elm['s-cr'] = doc.createComment(''));
|
|
2125
1508
|
contentRefElm['s-cn'] = true;
|
|
2126
1509
|
elm.insertBefore(contentRefElm, elm.firstChild);
|
|
2127
1510
|
};
|
|
2128
1511
|
const disconnectedCallback = (elm) => {
|
|
2129
1512
|
if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
|
|
2130
1513
|
const hostRef = getHostRef(elm);
|
|
2131
|
-
|
|
2132
|
-
if (BUILD.hostListener) {
|
|
1514
|
+
{
|
|
2133
1515
|
if (hostRef.$rmListeners$) {
|
|
2134
1516
|
hostRef.$rmListeners$.map(rmListener => rmListener());
|
|
2135
1517
|
hostRef.$rmListeners$ = undefined;
|
|
2136
1518
|
}
|
|
2137
1519
|
}
|
|
2138
|
-
// clear CSS var-shim tracking
|
|
2139
|
-
if (BUILD.cssVarShim && plt.$cssShim$) {
|
|
2140
|
-
plt.$cssShim$.removeHost(elm);
|
|
2141
|
-
}
|
|
2142
|
-
if (BUILD.lazyLoad && BUILD.disconnectedCallback) {
|
|
2143
|
-
safeCall(instance, 'disconnectedCallback');
|
|
2144
|
-
}
|
|
2145
|
-
if (BUILD.cmpDidUnload) {
|
|
2146
|
-
safeCall(instance, 'componentDidUnload');
|
|
2147
|
-
}
|
|
2148
|
-
}
|
|
2149
|
-
};
|
|
2150
|
-
const defineCustomElement = (Cstr, compactMeta) => {
|
|
2151
|
-
customElements.define(compactMeta[1], proxyCustomElement(Cstr, compactMeta));
|
|
2152
|
-
};
|
|
2153
|
-
const proxyCustomElement = (Cstr, compactMeta) => {
|
|
2154
|
-
const cmpMeta = {
|
|
2155
|
-
$flags$: compactMeta[0],
|
|
2156
|
-
$tagName$: compactMeta[1],
|
|
2157
|
-
};
|
|
2158
|
-
if (BUILD.member) {
|
|
2159
|
-
cmpMeta.$members$ = compactMeta[2];
|
|
2160
|
-
}
|
|
2161
|
-
if (BUILD.hostListener) {
|
|
2162
|
-
cmpMeta.$listeners$ = compactMeta[3];
|
|
2163
|
-
}
|
|
2164
|
-
if (BUILD.watchCallback) {
|
|
2165
|
-
cmpMeta.$watchers$ = Cstr.$watchers$;
|
|
2166
|
-
}
|
|
2167
|
-
if (BUILD.reflect) {
|
|
2168
|
-
cmpMeta.$attrsToReflect$ = [];
|
|
2169
|
-
}
|
|
2170
|
-
if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
|
|
2171
|
-
cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
|
|
2172
|
-
}
|
|
2173
|
-
const originalConnectedCallback = Cstr.prototype.connectedCallback;
|
|
2174
|
-
const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
|
|
2175
|
-
Object.assign(Cstr.prototype, {
|
|
2176
|
-
__registerHost() {
|
|
2177
|
-
registerHost(this, cmpMeta);
|
|
2178
|
-
},
|
|
2179
|
-
connectedCallback() {
|
|
2180
|
-
connectedCallback(this);
|
|
2181
|
-
if (BUILD.connectedCallback && originalConnectedCallback) {
|
|
2182
|
-
originalConnectedCallback.call(this);
|
|
2183
|
-
}
|
|
2184
|
-
},
|
|
2185
|
-
disconnectedCallback() {
|
|
2186
|
-
disconnectedCallback(this);
|
|
2187
|
-
if (BUILD.disconnectedCallback && originalDisconnectedCallback) {
|
|
2188
|
-
originalDisconnectedCallback.call(this);
|
|
2189
|
-
}
|
|
2190
|
-
},
|
|
2191
|
-
});
|
|
2192
|
-
Cstr.is = cmpMeta.$tagName$;
|
|
2193
|
-
return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
|
|
2194
|
-
};
|
|
2195
|
-
const forceModeUpdate = (elm) => {
|
|
2196
|
-
if (BUILD.style && BUILD.mode && !BUILD.lazyLoad) {
|
|
2197
|
-
const mode = computeMode(elm);
|
|
2198
|
-
const hostRef = getHostRef(elm);
|
|
2199
|
-
if (hostRef.$modeName$ !== mode) {
|
|
2200
|
-
const cmpMeta = hostRef.$cmpMeta$;
|
|
2201
|
-
const oldScopeId = elm['s-sc'];
|
|
2202
|
-
const scopeId = getScopeId(cmpMeta, mode);
|
|
2203
|
-
const style = elm.constructor.style[mode];
|
|
2204
|
-
const flags = cmpMeta.$flags$;
|
|
2205
|
-
if (style) {
|
|
2206
|
-
if (!styles.has(scopeId)) {
|
|
2207
|
-
registerStyle(scopeId, style, !!(flags & 1 /* shadowDomEncapsulation */));
|
|
2208
|
-
}
|
|
2209
|
-
hostRef.$modeName$ = mode;
|
|
2210
|
-
elm.classList.remove(oldScopeId + '-h', oldScopeId + '-s');
|
|
2211
|
-
attachStyles(hostRef);
|
|
2212
|
-
forceUpdate(elm);
|
|
2213
|
-
}
|
|
2214
|
-
}
|
|
2215
|
-
}
|
|
2216
|
-
};
|
|
2217
|
-
const attachShadow = (el) => {
|
|
2218
|
-
if (supportsShadow) {
|
|
2219
|
-
el.attachShadow({ mode: 'open' });
|
|
2220
|
-
}
|
|
2221
|
-
else {
|
|
2222
|
-
el.shadowRoot = el;
|
|
2223
|
-
}
|
|
2224
|
-
};
|
|
2225
|
-
const hmrStart = (elm, cmpMeta, hmrVersionId) => {
|
|
2226
|
-
// ¯\_(ツ)_/¯
|
|
2227
|
-
const hostRef = getHostRef(elm);
|
|
2228
|
-
// reset state flags to only have been connected
|
|
2229
|
-
hostRef.$flags$ = 1 /* hasConnected */;
|
|
2230
|
-
// TODO
|
|
2231
|
-
// detatch any event listeners that may have been added
|
|
2232
|
-
// because we're not passing an exact event name it'll
|
|
2233
|
-
// remove all of this element's event, which is good
|
|
2234
|
-
// create a callback for when this component finishes hmr
|
|
2235
|
-
elm['s-hmr-load'] = () => {
|
|
2236
|
-
// finished hmr for this element
|
|
2237
|
-
delete elm['s-hmr-load'];
|
|
2238
|
-
};
|
|
2239
|
-
// re-initialize the component
|
|
2240
|
-
initializeComponent(elm, hostRef, cmpMeta, hmrVersionId);
|
|
2241
|
-
};
|
|
2242
|
-
const patchCloneNode = (HostElementPrototype) => {
|
|
2243
|
-
const orgCloneNode = HostElementPrototype.cloneNode;
|
|
2244
|
-
HostElementPrototype.cloneNode = function (deep) {
|
|
2245
|
-
const srcNode = this;
|
|
2246
|
-
const isShadowDom = BUILD.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
|
|
2247
|
-
const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
|
|
2248
|
-
if (BUILD.slot && !isShadowDom && deep) {
|
|
2249
|
-
let i = 0;
|
|
2250
|
-
let slotted, nonStencilNode;
|
|
2251
|
-
let stencilPrivates = ['s-id', 's-cr', 's-lr', 's-rc', 's-sc', 's-p', 's-cn', 's-sr', 's-sn', 's-hn', 's-ol', 's-nr', 's-si'];
|
|
2252
|
-
for (; i < srcNode.childNodes.length; i++) {
|
|
2253
|
-
slotted = srcNode.childNodes[i]['s-nr'];
|
|
2254
|
-
nonStencilNode = stencilPrivates.every((privateField) => !srcNode.childNodes[i][privateField]);
|
|
2255
|
-
if (slotted) {
|
|
2256
|
-
if (BUILD.appendChildSlotFix && clonedNode.__appendChild) {
|
|
2257
|
-
clonedNode.__appendChild(slotted.cloneNode(true));
|
|
2258
|
-
}
|
|
2259
|
-
else {
|
|
2260
|
-
clonedNode.appendChild(slotted.cloneNode(true));
|
|
2261
|
-
}
|
|
2262
|
-
}
|
|
2263
|
-
if (nonStencilNode) {
|
|
2264
|
-
clonedNode.appendChild(srcNode.childNodes[i].cloneNode(true));
|
|
2265
|
-
}
|
|
2266
|
-
}
|
|
2267
|
-
}
|
|
2268
|
-
return clonedNode;
|
|
2269
|
-
};
|
|
2270
|
-
};
|
|
2271
|
-
const patchSlotAppendChild = (HostElementPrototype) => {
|
|
2272
|
-
HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
|
|
2273
|
-
HostElementPrototype.appendChild = function (newChild) {
|
|
2274
|
-
const slotName = (newChild['s-sn'] = getSlotName(newChild));
|
|
2275
|
-
const slotNode = getHostSlotNode(this.childNodes, slotName);
|
|
2276
|
-
if (slotNode) {
|
|
2277
|
-
const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
|
|
2278
|
-
const appendAfter = slotChildNodes[slotChildNodes.length - 1];
|
|
2279
|
-
return appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
|
|
2280
|
-
}
|
|
2281
|
-
return this.__appendChild(newChild);
|
|
2282
|
-
};
|
|
2283
|
-
};
|
|
2284
|
-
const patchChildSlotNodes = (elm, cmpMeta) => {
|
|
2285
|
-
class FakeNodeList extends Array {
|
|
2286
|
-
item(n) {
|
|
2287
|
-
return this[n];
|
|
2288
|
-
}
|
|
2289
|
-
}
|
|
2290
|
-
if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
|
|
2291
|
-
const childNodesFn = elm.__lookupGetter__('childNodes');
|
|
2292
|
-
Object.defineProperty(elm, 'children', {
|
|
2293
|
-
get() {
|
|
2294
|
-
return this.childNodes.map((n) => n.nodeType === 1);
|
|
2295
|
-
},
|
|
2296
|
-
});
|
|
2297
|
-
Object.defineProperty(elm, 'childElementCount', {
|
|
2298
|
-
get() {
|
|
2299
|
-
return elm.children.length;
|
|
2300
|
-
},
|
|
2301
|
-
});
|
|
2302
|
-
Object.defineProperty(elm, 'childNodes', {
|
|
2303
|
-
get() {
|
|
2304
|
-
const childNodes = childNodesFn.call(this);
|
|
2305
|
-
if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0 && getHostRef(this).$flags$ & 2 /* hasRendered */) {
|
|
2306
|
-
const result = new FakeNodeList();
|
|
2307
|
-
for (let i = 0; i < childNodes.length; i++) {
|
|
2308
|
-
const slot = childNodes[i]['s-nr'];
|
|
2309
|
-
if (slot) {
|
|
2310
|
-
result.push(slot);
|
|
2311
|
-
}
|
|
2312
|
-
}
|
|
2313
|
-
return result;
|
|
2314
|
-
}
|
|
2315
|
-
return FakeNodeList.from(childNodes);
|
|
2316
|
-
},
|
|
2317
|
-
});
|
|
2318
1520
|
}
|
|
2319
1521
|
};
|
|
2320
|
-
const getSlotName = (node) => node['s-sn'] || (node.nodeType === 1 && node.getAttribute('slot')) || '';
|
|
2321
|
-
const getHostSlotNode = (childNodes, slotName) => {
|
|
2322
|
-
let i = 0;
|
|
2323
|
-
let childNode;
|
|
2324
|
-
for (; i < childNodes.length; i++) {
|
|
2325
|
-
childNode = childNodes[i];
|
|
2326
|
-
if (childNode['s-sr'] && childNode['s-sn'] === slotName) {
|
|
2327
|
-
return childNode;
|
|
2328
|
-
}
|
|
2329
|
-
childNode = getHostSlotNode(childNode.childNodes, slotName);
|
|
2330
|
-
if (childNode) {
|
|
2331
|
-
return childNode;
|
|
2332
|
-
}
|
|
2333
|
-
}
|
|
2334
|
-
return null;
|
|
2335
|
-
};
|
|
2336
|
-
const getHostSlotChildNodes = (n, slotName) => {
|
|
2337
|
-
const childNodes = [n];
|
|
2338
|
-
while ((n = n.nextSibling) && n['s-sn'] === slotName) {
|
|
2339
|
-
childNodes.push(n);
|
|
2340
|
-
}
|
|
2341
|
-
return childNodes;
|
|
2342
|
-
};
|
|
2343
1522
|
const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
2344
|
-
|
|
2345
|
-
performance.mark('st:app:start');
|
|
2346
|
-
}
|
|
2347
|
-
installDevTools();
|
|
2348
|
-
const endBootstrap = createTime('bootstrapLazy');
|
|
1523
|
+
const endBootstrap = createTime();
|
|
2349
1524
|
const cmpTags = [];
|
|
2350
1525
|
const exclude = options.exclude || [];
|
|
2351
1526
|
const customElements = win.customElements;
|
|
@@ -2353,27 +1528,10 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
2353
1528
|
const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
|
|
2354
1529
|
const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
|
|
2355
1530
|
const deferredConnectedCallbacks = [];
|
|
2356
|
-
const styles = /*@__PURE__*/ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
|
|
2357
1531
|
let appLoadFallback;
|
|
2358
1532
|
let isBootstrapping = true;
|
|
2359
|
-
let i = 0;
|
|
2360
1533
|
Object.assign(plt, options);
|
|
2361
1534
|
plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
|
|
2362
|
-
if (BUILD.asyncQueue) {
|
|
2363
|
-
if (options.syncQueue) {
|
|
2364
|
-
plt.$flags$ |= 4 /* queueSync */;
|
|
2365
|
-
}
|
|
2366
|
-
}
|
|
2367
|
-
if (BUILD.hydrateClientSide) {
|
|
2368
|
-
// If the app is already hydrated there is not point to disable the
|
|
2369
|
-
// async queue. This will improve the first input delay
|
|
2370
|
-
plt.$flags$ |= 2 /* appLoaded */;
|
|
2371
|
-
}
|
|
2372
|
-
if (BUILD.hydrateClientSide && BUILD.shadowDom) {
|
|
2373
|
-
for (; i < styles.length; i++) {
|
|
2374
|
-
registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
|
|
2375
|
-
}
|
|
2376
|
-
}
|
|
2377
1535
|
lazyBundles.map(lazyBundle => lazyBundle[1].map(compactMeta => {
|
|
2378
1536
|
const cmpMeta = {
|
|
2379
1537
|
$flags$: compactMeta[0],
|
|
@@ -2381,22 +1539,19 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
2381
1539
|
$members$: compactMeta[2],
|
|
2382
1540
|
$listeners$: compactMeta[3],
|
|
2383
1541
|
};
|
|
2384
|
-
|
|
1542
|
+
{
|
|
2385
1543
|
cmpMeta.$members$ = compactMeta[2];
|
|
2386
1544
|
}
|
|
2387
|
-
|
|
1545
|
+
{
|
|
2388
1546
|
cmpMeta.$listeners$ = compactMeta[3];
|
|
2389
1547
|
}
|
|
2390
|
-
|
|
1548
|
+
{
|
|
2391
1549
|
cmpMeta.$attrsToReflect$ = [];
|
|
2392
1550
|
}
|
|
2393
|
-
|
|
1551
|
+
{
|
|
2394
1552
|
cmpMeta.$watchers$ = {};
|
|
2395
1553
|
}
|
|
2396
|
-
|
|
2397
|
-
cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
|
|
2398
|
-
}
|
|
2399
|
-
const tagName = BUILD.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
|
|
1554
|
+
const tagName = cmpMeta.$tagName$;
|
|
2400
1555
|
const HostElement = class extends HTMLElement {
|
|
2401
1556
|
// StencilLazyHost
|
|
2402
1557
|
constructor(self) {
|
|
@@ -2404,28 +1559,16 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
2404
1559
|
super(self);
|
|
2405
1560
|
self = this;
|
|
2406
1561
|
registerHost(self, cmpMeta);
|
|
2407
|
-
if (
|
|
1562
|
+
if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
|
|
2408
1563
|
// this component is using shadow dom
|
|
2409
1564
|
// and this browser supports shadow dom
|
|
2410
1565
|
// add the read-only property "shadowRoot" to the host element
|
|
2411
1566
|
// adding the shadow root build conditionals to minimize runtime
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
self.attachShadow({
|
|
2415
|
-
mode: 'open',
|
|
2416
|
-
delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */),
|
|
2417
|
-
});
|
|
2418
|
-
}
|
|
2419
|
-
else {
|
|
1567
|
+
{
|
|
1568
|
+
{
|
|
2420
1569
|
self.attachShadow({ mode: 'open' });
|
|
2421
1570
|
}
|
|
2422
1571
|
}
|
|
2423
|
-
else if (!BUILD.hydrateServerSide && !('shadowRoot' in self)) {
|
|
2424
|
-
self.shadowRoot = self;
|
|
2425
|
-
}
|
|
2426
|
-
}
|
|
2427
|
-
if (BUILD.slotChildNodesFix) {
|
|
2428
|
-
patchChildSlotNodes(self, cmpMeta);
|
|
2429
1572
|
}
|
|
2430
1573
|
}
|
|
2431
1574
|
connectedCallback() {
|
|
@@ -2448,24 +1591,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
2448
1591
|
return getHostRef(this).$onReadyPromise$;
|
|
2449
1592
|
}
|
|
2450
1593
|
};
|
|
2451
|
-
if (BUILD.cloneNodeFix) {
|
|
2452
|
-
patchCloneNode(HostElement.prototype);
|
|
2453
|
-
}
|
|
2454
|
-
if (BUILD.appendChildSlotFix) {
|
|
2455
|
-
patchSlotAppendChild(HostElement.prototype);
|
|
2456
|
-
}
|
|
2457
|
-
if (BUILD.hotModuleReplacement) {
|
|
2458
|
-
HostElement.prototype['s-hmr'] = function (hmrVersionId) {
|
|
2459
|
-
hmrStart(this, cmpMeta, hmrVersionId);
|
|
2460
|
-
};
|
|
2461
|
-
}
|
|
2462
1594
|
cmpMeta.$lazyBundleId$ = lazyBundle[0];
|
|
2463
1595
|
if (!exclude.includes(tagName) && !customElements.get(tagName)) {
|
|
2464
1596
|
cmpTags.push(tagName);
|
|
2465
1597
|
customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
|
|
2466
1598
|
}
|
|
2467
1599
|
}));
|
|
2468
|
-
|
|
1600
|
+
{
|
|
2469
1601
|
visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
|
|
2470
1602
|
visibilityStyle.setAttribute('data-styles', '');
|
|
2471
1603
|
head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
|
|
@@ -2476,10 +1608,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
2476
1608
|
deferredConnectedCallbacks.map(host => host.connectedCallback());
|
|
2477
1609
|
}
|
|
2478
1610
|
else {
|
|
2479
|
-
|
|
2480
|
-
plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30, 'timeout')));
|
|
2481
|
-
}
|
|
2482
|
-
else {
|
|
1611
|
+
{
|
|
2483
1612
|
plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30)));
|
|
2484
1613
|
}
|
|
2485
1614
|
}
|
|
@@ -2490,197 +1619,6 @@ const getAssetPath = (path) => {
|
|
|
2490
1619
|
const assetUrl = new URL(path, plt.$resourcesUrl$);
|
|
2491
1620
|
return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
|
|
2492
1621
|
};
|
|
2493
|
-
const setAssetPath = (path) => (plt.$resourcesUrl$ = path);
|
|
2494
|
-
const getConnect = (_ref, tagName) => {
|
|
2495
|
-
const componentOnReady = () => {
|
|
2496
|
-
let elm = doc.querySelector(tagName);
|
|
2497
|
-
if (!elm) {
|
|
2498
|
-
elm = doc.createElement(tagName);
|
|
2499
|
-
doc.body.appendChild(elm);
|
|
2500
|
-
}
|
|
2501
|
-
return typeof elm.componentOnReady === 'function' ? elm.componentOnReady() : Promise.resolve(elm);
|
|
2502
|
-
};
|
|
2503
|
-
const create = (...args) => {
|
|
2504
|
-
return componentOnReady().then(el => el.create(...args));
|
|
2505
|
-
};
|
|
2506
|
-
return {
|
|
2507
|
-
create,
|
|
2508
|
-
componentOnReady,
|
|
2509
|
-
};
|
|
2510
|
-
};
|
|
2511
|
-
const getContext = (_elm, context) => {
|
|
2512
|
-
if (context in Context) {
|
|
2513
|
-
return Context[context];
|
|
2514
|
-
}
|
|
2515
|
-
else if (context === 'window') {
|
|
2516
|
-
return win;
|
|
2517
|
-
}
|
|
2518
|
-
else if (context === 'document') {
|
|
2519
|
-
return doc;
|
|
2520
|
-
}
|
|
2521
|
-
else if (context === 'isServer' || context === 'isPrerender') {
|
|
2522
|
-
return BUILD.hydrateServerSide ? true : false;
|
|
2523
|
-
}
|
|
2524
|
-
else if (context === 'isClient') {
|
|
2525
|
-
return BUILD.hydrateServerSide ? false : true;
|
|
2526
|
-
}
|
|
2527
|
-
else if (context === 'resourcesUrl' || context === 'publicPath') {
|
|
2528
|
-
return getAssetPath('.');
|
|
2529
|
-
}
|
|
2530
|
-
else if (context === 'queue') {
|
|
2531
|
-
return {
|
|
2532
|
-
write: writeTask,
|
|
2533
|
-
read: readTask,
|
|
2534
|
-
tick: {
|
|
2535
|
-
then(cb) {
|
|
2536
|
-
return nextTick(cb);
|
|
2537
|
-
},
|
|
2538
|
-
},
|
|
2539
|
-
};
|
|
2540
|
-
}
|
|
2541
|
-
return undefined;
|
|
2542
|
-
};
|
|
2543
|
-
const insertVdomAnnotations = (doc, staticComponents) => {
|
|
2544
|
-
if (doc != null) {
|
|
2545
|
-
const docData = {
|
|
2546
|
-
hostIds: 0,
|
|
2547
|
-
rootLevelIds: 0,
|
|
2548
|
-
staticComponents: new Set(staticComponents),
|
|
2549
|
-
};
|
|
2550
|
-
const orgLocationNodes = [];
|
|
2551
|
-
parseVNodeAnnotations(doc, doc.body, docData, orgLocationNodes);
|
|
2552
|
-
orgLocationNodes.forEach(orgLocationNode => {
|
|
2553
|
-
if (orgLocationNode != null) {
|
|
2554
|
-
const nodeRef = orgLocationNode['s-nr'];
|
|
2555
|
-
let hostId = nodeRef['s-host-id'];
|
|
2556
|
-
let nodeId = nodeRef['s-node-id'];
|
|
2557
|
-
let childId = `${hostId}.${nodeId}`;
|
|
2558
|
-
if (hostId == null) {
|
|
2559
|
-
hostId = 0;
|
|
2560
|
-
docData.rootLevelIds++;
|
|
2561
|
-
nodeId = docData.rootLevelIds;
|
|
2562
|
-
childId = `${hostId}.${nodeId}`;
|
|
2563
|
-
if (nodeRef.nodeType === 1 /* ElementNode */) {
|
|
2564
|
-
nodeRef.setAttribute(HYDRATE_CHILD_ID, childId);
|
|
2565
|
-
}
|
|
2566
|
-
else if (nodeRef.nodeType === 3 /* TextNode */) {
|
|
2567
|
-
if (hostId === 0) {
|
|
2568
|
-
const textContent = nodeRef.nodeValue.trim();
|
|
2569
|
-
if (textContent === '') {
|
|
2570
|
-
// useless whitespace node at the document root
|
|
2571
|
-
orgLocationNode.remove();
|
|
2572
|
-
return;
|
|
2573
|
-
}
|
|
2574
|
-
}
|
|
2575
|
-
const commentBeforeTextNode = doc.createComment(childId);
|
|
2576
|
-
commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`;
|
|
2577
|
-
nodeRef.parentNode.insertBefore(commentBeforeTextNode, nodeRef);
|
|
2578
|
-
}
|
|
2579
|
-
}
|
|
2580
|
-
let orgLocationNodeId = `${ORG_LOCATION_ID}.${childId}`;
|
|
2581
|
-
const orgLocationParentNode = orgLocationNode.parentElement;
|
|
2582
|
-
if (orgLocationParentNode) {
|
|
2583
|
-
if (orgLocationParentNode['s-en'] === '') {
|
|
2584
|
-
// ending with a "." means that the parent element
|
|
2585
|
-
// of this node's original location is a SHADOW dom element
|
|
2586
|
-
// and this node is apart of the root level light dom
|
|
2587
|
-
orgLocationNodeId += `.`;
|
|
2588
|
-
}
|
|
2589
|
-
else if (orgLocationParentNode['s-en'] === 'c') {
|
|
2590
|
-
// ending with a ".c" means that the parent element
|
|
2591
|
-
// of this node's original location is a SCOPED element
|
|
2592
|
-
// and this node is apart of the root level light dom
|
|
2593
|
-
orgLocationNodeId += `.c`;
|
|
2594
|
-
}
|
|
2595
|
-
}
|
|
2596
|
-
orgLocationNode.nodeValue = orgLocationNodeId;
|
|
2597
|
-
}
|
|
2598
|
-
});
|
|
2599
|
-
}
|
|
2600
|
-
};
|
|
2601
|
-
const parseVNodeAnnotations = (doc, node, docData, orgLocationNodes) => {
|
|
2602
|
-
if (node == null) {
|
|
2603
|
-
return;
|
|
2604
|
-
}
|
|
2605
|
-
if (node['s-nr'] != null) {
|
|
2606
|
-
orgLocationNodes.push(node);
|
|
2607
|
-
}
|
|
2608
|
-
if (node.nodeType === 1 /* ElementNode */) {
|
|
2609
|
-
node.childNodes.forEach(childNode => {
|
|
2610
|
-
const hostRef = getHostRef(childNode);
|
|
2611
|
-
if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) {
|
|
2612
|
-
const cmpData = {
|
|
2613
|
-
nodeIds: 0,
|
|
2614
|
-
};
|
|
2615
|
-
insertVNodeAnnotations(doc, childNode, hostRef.$vnode$, docData, cmpData);
|
|
2616
|
-
}
|
|
2617
|
-
parseVNodeAnnotations(doc, childNode, docData, orgLocationNodes);
|
|
2618
|
-
});
|
|
2619
|
-
}
|
|
2620
|
-
};
|
|
2621
|
-
const insertVNodeAnnotations = (doc, hostElm, vnode, docData, cmpData) => {
|
|
2622
|
-
if (vnode != null) {
|
|
2623
|
-
const hostId = ++docData.hostIds;
|
|
2624
|
-
hostElm.setAttribute(HYDRATE_ID, hostId);
|
|
2625
|
-
if (hostElm['s-cr'] != null) {
|
|
2626
|
-
hostElm['s-cr'].nodeValue = `${CONTENT_REF_ID}.${hostId}`;
|
|
2627
|
-
}
|
|
2628
|
-
if (vnode.$children$ != null) {
|
|
2629
|
-
const depth = 0;
|
|
2630
|
-
vnode.$children$.forEach((vnodeChild, index) => {
|
|
2631
|
-
insertChildVNodeAnnotations(doc, vnodeChild, cmpData, hostId, depth, index);
|
|
2632
|
-
});
|
|
2633
|
-
}
|
|
2634
|
-
if (hostElm && vnode && vnode.$elm$ && !hostElm.hasAttribute('c-id')) {
|
|
2635
|
-
const parent = hostElm.parentElement;
|
|
2636
|
-
if (parent && parent.childNodes) {
|
|
2637
|
-
const parentChildNodes = Array.from(parent.childNodes);
|
|
2638
|
-
const comment = parentChildNodes.find(node => node.nodeType === 8 /* CommentNode */ && node['s-sr']);
|
|
2639
|
-
if (comment) {
|
|
2640
|
-
const index = parentChildNodes.indexOf(hostElm) - 1;
|
|
2641
|
-
vnode.$elm$.setAttribute(HYDRATE_CHILD_ID, `${comment['s-host-id']}.${comment['s-node-id']}.0.${index}`);
|
|
2642
|
-
}
|
|
2643
|
-
}
|
|
2644
|
-
}
|
|
2645
|
-
}
|
|
2646
|
-
};
|
|
2647
|
-
const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, index) => {
|
|
2648
|
-
const childElm = vnodeChild.$elm$;
|
|
2649
|
-
if (childElm == null) {
|
|
2650
|
-
return;
|
|
2651
|
-
}
|
|
2652
|
-
const nodeId = cmpData.nodeIds++;
|
|
2653
|
-
const childId = `${hostId}.${nodeId}.${depth}.${index}`;
|
|
2654
|
-
childElm['s-host-id'] = hostId;
|
|
2655
|
-
childElm['s-node-id'] = nodeId;
|
|
2656
|
-
if (childElm.nodeType === 1 /* ElementNode */) {
|
|
2657
|
-
childElm.setAttribute(HYDRATE_CHILD_ID, childId);
|
|
2658
|
-
}
|
|
2659
|
-
else if (childElm.nodeType === 3 /* TextNode */) {
|
|
2660
|
-
const parentNode = childElm.parentNode;
|
|
2661
|
-
const nodeName = parentNode.nodeName;
|
|
2662
|
-
if (nodeName !== 'STYLE' && nodeName !== 'SCRIPT') {
|
|
2663
|
-
const textNodeId = `${TEXT_NODE_ID}.${childId}`;
|
|
2664
|
-
const commentBeforeTextNode = doc.createComment(textNodeId);
|
|
2665
|
-
parentNode.insertBefore(commentBeforeTextNode, childElm);
|
|
2666
|
-
}
|
|
2667
|
-
}
|
|
2668
|
-
else if (childElm.nodeType === 8 /* CommentNode */) {
|
|
2669
|
-
if (childElm['s-sr']) {
|
|
2670
|
-
const slotName = childElm['s-sn'] || '';
|
|
2671
|
-
const slotNodeId = `${SLOT_NODE_ID}.${childId}.${slotName}`;
|
|
2672
|
-
childElm.nodeValue = slotNodeId;
|
|
2673
|
-
}
|
|
2674
|
-
}
|
|
2675
|
-
if (vnodeChild.$children$ != null) {
|
|
2676
|
-
const childDepth = depth + 1;
|
|
2677
|
-
vnodeChild.$children$.forEach((vnode, index) => {
|
|
2678
|
-
insertChildVNodeAnnotations(doc, vnode, cmpData, hostId, childDepth, index);
|
|
2679
|
-
});
|
|
2680
|
-
}
|
|
2681
|
-
};
|
|
2682
|
-
const setPlatformOptions = (opts) => Object.assign(plt, opts);
|
|
2683
|
-
const Fragment = (_, children) => children;
|
|
2684
1622
|
const hostRefs = new WeakMap();
|
|
2685
1623
|
const getHostRef = (ref) => hostRefs.get(ref);
|
|
2686
1624
|
const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
|
|
@@ -2691,58 +1629,42 @@ const registerHost = (elm, cmpMeta) => {
|
|
|
2691
1629
|
$cmpMeta$: cmpMeta,
|
|
2692
1630
|
$instanceValues$: new Map(),
|
|
2693
1631
|
};
|
|
2694
|
-
|
|
2695
|
-
hostRef.$renderCount$ = 0;
|
|
2696
|
-
}
|
|
2697
|
-
if (BUILD.method && BUILD.lazyLoad) {
|
|
1632
|
+
{
|
|
2698
1633
|
hostRef.$onInstancePromise$ = new Promise(r => (hostRef.$onInstanceResolve$ = r));
|
|
2699
1634
|
}
|
|
2700
|
-
|
|
1635
|
+
{
|
|
2701
1636
|
hostRef.$onReadyPromise$ = new Promise(r => (hostRef.$onReadyResolve$ = r));
|
|
2702
1637
|
elm['s-p'] = [];
|
|
2703
1638
|
elm['s-rc'] = [];
|
|
2704
1639
|
}
|
|
2705
|
-
addHostEventListeners(elm, hostRef, cmpMeta.$listeners
|
|
1640
|
+
addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
|
|
2706
1641
|
return hostRefs.set(elm, hostRef);
|
|
2707
1642
|
};
|
|
2708
1643
|
const isMemberInElement = (elm, memberName) => memberName in elm;
|
|
2709
|
-
const consoleError = (e, el) => (
|
|
2710
|
-
const STENCIL_DEV_MODE = BUILD.isTesting
|
|
2711
|
-
? ['STENCIL:'] // E2E testing
|
|
2712
|
-
: ['%cstencil', 'color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px'];
|
|
2713
|
-
const consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);
|
|
2714
|
-
const consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
|
|
2715
|
-
const consoleDevInfo = (...m) => console.info(...STENCIL_DEV_MODE, ...m);
|
|
2716
|
-
const setErrorHandler = (handler) => customError = handler;
|
|
1644
|
+
const consoleError = (e, el) => (0, console.error)(e, el);
|
|
2717
1645
|
const cmpModules = /*@__PURE__*/ new Map();
|
|
2718
1646
|
const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
2719
1647
|
// loadModuleImport
|
|
2720
1648
|
const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
|
|
2721
1649
|
const bundleId = cmpMeta.$lazyBundleId$;
|
|
2722
|
-
|
|
2723
|
-
consoleDevError(`Trying to lazily load component <${cmpMeta.$tagName$}> with style mode "${hostRef.$modeName$}", but it does not exist.`);
|
|
2724
|
-
return undefined;
|
|
2725
|
-
}
|
|
2726
|
-
const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;
|
|
1650
|
+
const module = cmpModules.get(bundleId) ;
|
|
2727
1651
|
if (module) {
|
|
2728
1652
|
return module[exportName];
|
|
2729
1653
|
}
|
|
2730
|
-
return
|
|
1654
|
+
return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
|
|
2731
1655
|
/* webpackInclude: /\.entry\.js$/ */
|
|
2732
1656
|
/* webpackExclude: /\.system\.entry\.js$/ */
|
|
2733
1657
|
/* webpackMode: "lazy" */
|
|
2734
|
-
`./${bundleId}.entry.js${
|
|
2735
|
-
|
|
1658
|
+
`./${bundleId}.entry.js${''}`)); }).then(importedModule => {
|
|
1659
|
+
{
|
|
2736
1660
|
cmpModules.set(bundleId, importedModule);
|
|
2737
1661
|
}
|
|
2738
1662
|
return importedModule[exportName];
|
|
2739
1663
|
}, consoleError);
|
|
2740
1664
|
};
|
|
2741
1665
|
const styles = new Map();
|
|
2742
|
-
const modeResolutionChain = [];
|
|
2743
1666
|
const queueDomReads = [];
|
|
2744
1667
|
const queueDomWrites = [];
|
|
2745
|
-
const queueDomWritesLow = [];
|
|
2746
1668
|
const queueTask = (queue, write) => (cb) => {
|
|
2747
1669
|
queue.push(cb);
|
|
2748
1670
|
if (!queuePending) {
|
|
@@ -2766,51 +1688,13 @@ const consume = (queue) => {
|
|
|
2766
1688
|
}
|
|
2767
1689
|
queue.length = 0;
|
|
2768
1690
|
};
|
|
2769
|
-
const consumeTimeout = (queue, timeout) => {
|
|
2770
|
-
let i = 0;
|
|
2771
|
-
let ts = 0;
|
|
2772
|
-
while (i < queue.length && (ts = performance.now()) < timeout) {
|
|
2773
|
-
try {
|
|
2774
|
-
queue[i++](ts);
|
|
2775
|
-
}
|
|
2776
|
-
catch (e) {
|
|
2777
|
-
consoleError(e);
|
|
2778
|
-
}
|
|
2779
|
-
}
|
|
2780
|
-
if (i === queue.length) {
|
|
2781
|
-
queue.length = 0;
|
|
2782
|
-
}
|
|
2783
|
-
else if (i !== 0) {
|
|
2784
|
-
queue.splice(0, i);
|
|
2785
|
-
}
|
|
2786
|
-
};
|
|
2787
1691
|
const flush = () => {
|
|
2788
|
-
if (BUILD.asyncQueue) {
|
|
2789
|
-
queueCongestion++;
|
|
2790
|
-
}
|
|
2791
1692
|
// always force a bunch of medium callbacks to run, but still have
|
|
2792
1693
|
// a throttle on how many can run in a certain time
|
|
2793
1694
|
// DOM READS!!!
|
|
2794
1695
|
consume(queueDomReads);
|
|
2795
1696
|
// DOM WRITES!!!
|
|
2796
|
-
|
|
2797
|
-
const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */ ? performance.now() + 14 * Math.ceil(queueCongestion * (1.0 / 10.0)) : Infinity;
|
|
2798
|
-
consumeTimeout(queueDomWrites, timeout);
|
|
2799
|
-
consumeTimeout(queueDomWritesLow, timeout);
|
|
2800
|
-
if (queueDomWrites.length > 0) {
|
|
2801
|
-
queueDomWritesLow.push(...queueDomWrites);
|
|
2802
|
-
queueDomWrites.length = 0;
|
|
2803
|
-
}
|
|
2804
|
-
if ((queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0)) {
|
|
2805
|
-
// still more to do yet, but we've run out of time
|
|
2806
|
-
// let's let this thing cool off and try again in the next tick
|
|
2807
|
-
plt.raf(flush);
|
|
2808
|
-
}
|
|
2809
|
-
else {
|
|
2810
|
-
queueCongestion = 0;
|
|
2811
|
-
}
|
|
2812
|
-
}
|
|
2813
|
-
else {
|
|
1697
|
+
{
|
|
2814
1698
|
consume(queueDomWrites);
|
|
2815
1699
|
if ((queuePending = queueDomReads.length > 0)) {
|
|
2816
1700
|
// still more to do yet, but we've run out of time
|
|
@@ -2820,13 +1704,13 @@ const flush = () => {
|
|
|
2820
1704
|
}
|
|
2821
1705
|
};
|
|
2822
1706
|
const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
|
|
2823
|
-
const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
|
|
2824
1707
|
const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
|
|
2825
|
-
const Build = {
|
|
2826
|
-
isDev: BUILD.isDev ? true : false,
|
|
2827
|
-
isBrowser: true,
|
|
2828
|
-
isServer: false,
|
|
2829
|
-
isTesting: BUILD.isTesting ? true : false,
|
|
2830
|
-
};
|
|
2831
1708
|
|
|
2832
|
-
|
|
1709
|
+
exports.Host = Host;
|
|
1710
|
+
exports.bootstrapLazy = bootstrapLazy;
|
|
1711
|
+
exports.createEvent = createEvent;
|
|
1712
|
+
exports.getAssetPath = getAssetPath;
|
|
1713
|
+
exports.getElement = getElement;
|
|
1714
|
+
exports.h = h;
|
|
1715
|
+
exports.promiseResolve = promiseResolve;
|
|
1716
|
+
exports.registerInstance = registerInstance;
|