@stencil/core
Version:
A Compiler for Web Components and Progressive Web Apps
1,181 lines • 164 kB
JavaScript
/**
* Virtual DOM patching algorithm based on Snabbdom by
* Simon Friis Vindum (@paldepind)
* Licensed under the MIT License
* https://github.com/snabbdom/snabbdom/blob/master/LICENSE
*
* Modified for Stencil's renderer and slot projection
*/
let scopeId;
let contentRef;
let hostTagName;
let customError;
let i = 0;
let useNativeShadowDom = false;
let checkSlotFallbackVisibility = false;
let checkSlotRelocate = false;
let isSvgMode = false;
let renderingRef = null;
let queueCongestion = 0;
let queuePending = false;
/*
Stencil Client Platform v4.3.0 | MIT Licensed | https://stenciljs.com
*/
import { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';
const Build = {
isDev: BUILD.isDev ? true : false,
isBrowser: true,
isServer: false,
isTesting: BUILD.isTesting ? true : false,
};
const getAssetPath = (path) => {
const assetUrl = new URL(path, plt.$resourcesUrl$);
return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
};
const setAssetPath = (path) => (plt.$resourcesUrl$ = path);
const createTime = (fnName, tagName = '') => {
if (BUILD.profile && performance.mark) {
const key = `st:${fnName}:${tagName}:${i++}`;
// Start
performance.mark(key);
// End
return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key);
}
else {
return () => {
return;
};
}
};
const uniqueTime = (key, measureText) => {
if (BUILD.profile && performance.mark) {
if (performance.getEntriesByName(key, 'mark').length === 0) {
performance.mark(key);
}
return () => {
if (performance.getEntriesByName(measureText, 'measure').length === 0) {
performance.measure(measureText, key);
}
};
}
else {
return () => {
return;
};
}
};
const inspect = (ref) => {
const hostRef = getHostRef(ref);
if (!hostRef) {
return undefined;
}
const flags = hostRef.$flags$;
const hostElement = hostRef.$hostElement$;
return {
renderCount: hostRef.$renderCount$,
flags: {
hasRendered: !!(flags & 2 /* HOST_FLAGS.hasRendered */),
hasConnected: !!(flags & 1 /* HOST_FLAGS.hasConnected */),
isWaitingForChildren: !!(flags & 4 /* HOST_FLAGS.isWaitingForChildren */),
isConstructingInstance: !!(flags & 8 /* HOST_FLAGS.isConstructingInstance */),
isQueuedForUpdate: !!(flags & 16 /* HOST_FLAGS.isQueuedForUpdate */),
hasInitializedComponent: !!(flags & 32 /* HOST_FLAGS.hasInitializedComponent */),
hasLoadedComponent: !!(flags & 64 /* HOST_FLAGS.hasLoadedComponent */),
isWatchReady: !!(flags & 128 /* HOST_FLAGS.isWatchReady */),
isListenReady: !!(flags & 256 /* HOST_FLAGS.isListenReady */),
needsRerender: !!(flags & 512 /* HOST_FLAGS.needsRerender */),
},
instanceValues: hostRef.$instanceValues$,
ancestorComponent: hostRef.$ancestorComponent$,
hostElement,
lazyInstance: hostRef.$lazyInstance$,
vnode: hostRef.$vnode$,
modeName: hostRef.$modeName$,
onReadyPromise: hostRef.$onReadyPromise$,
onReadyResolve: hostRef.$onReadyResolve$,
onInstancePromise: hostRef.$onInstancePromise$,
onInstanceResolve: hostRef.$onInstanceResolve$,
onRenderResolve: hostRef.$onRenderResolve$,
queuedListeners: hostRef.$queuedListeners$,
rmListeners: hostRef.$rmListeners$,
['s-id']: hostElement['s-id'],
['s-cr']: hostElement['s-cr'],
['s-lr']: hostElement['s-lr'],
['s-p']: hostElement['s-p'],
['s-rc']: hostElement['s-rc'],
['s-sc']: hostElement['s-sc'],
};
};
const installDevTools = () => {
if (BUILD.devTools) {
const stencil = (win.stencil = win.stencil || {});
const originalInspect = stencil.inspect;
stencil.inspect = (ref) => {
let result = inspect(ref);
if (!result && typeof originalInspect === 'function') {
result = originalInspect(ref);
}
return result;
};
}
};
const CONTENT_REF_ID = 'r';
const ORG_LOCATION_ID = 'o';
const SLOT_NODE_ID = 's';
const TEXT_NODE_ID = 't';
const HYDRATE_ID = 's-id';
const HYDRATED_STYLE_ID = 'sty-id';
const HYDRATE_CHILD_ID = 'c-id';
const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
const XLINK_NS = 'http://www.w3.org/1999/xlink';
/**
* Default style mode id
*/
/**
* Reusable empty obj/array
* Don't add values to these!!
*/
const EMPTY_OBJ = {};
/**
* Namespaces
*/
const SVG_NS = 'http://www.w3.org/2000/svg';
const HTML_NS = 'http://www.w3.org/1999/xhtml';
const isDef = (v) => v != null;
/**
* Check whether a value is a 'complex type', defined here as an object or a
* function.
*
* @param o the value to check
* @returns whether it's a complex type or not
*/
const isComplexType = (o) => {
// https://jsperf.com/typeof-fn-object/5
o = typeof o;
return o === 'object' || o === 'function';
};
/**
* Helper method for querying a `meta` tag that contains a nonce value
* out of a DOM's head.
*
* @param doc The DOM containing the `head` to query against
* @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
* exists or the tag has no content.
*/
function queryNonceMetaTagContent(doc) {
var _a, _b, _c;
return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;
}
/**
* Production h() function based on Preact by
* Jason Miller (@developit)
* Licensed under the MIT License
* https://github.com/developit/preact/blob/master/LICENSE
*
* Modified for Stencil's compiler and vdom
*/
// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
const h = (nodeName, vnodeData, ...children) => {
let child = null;
let key = null;
let slotName = null;
let simple = false;
let lastSimple = false;
const vNodeChildren = [];
const walk = (c) => {
for (let i = 0; i < c.length; i++) {
child = c[i];
if (Array.isArray(child)) {
walk(child);
}
else if (child != null && typeof child !== 'boolean') {
if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {
child = String(child);
}
else if (BUILD.isDev && typeof nodeName !== 'function' && child.$flags$ === undefined) {
consoleDevError(`vNode passed as children has unexpected type.
Make sure it's using the correct h() function.
Empty objects can also be the cause, look for JSX comments that became objects.`);
}
if (simple && lastSimple) {
// If the previous child was simple (string), we merge both
vNodeChildren[vNodeChildren.length - 1].$text$ += child;
}
else {
// Append a new vNode, if it's text, we create a text vNode
vNodeChildren.push(simple ? newVNode(null, child) : child);
}
lastSimple = simple;
}
}
};
walk(children);
if (vnodeData) {
if (BUILD.isDev && nodeName === 'input') {
validateInputProperties(vnodeData);
}
if (BUILD.vdomKey && vnodeData.key) {
key = vnodeData.key;
}
if (BUILD.slotRelocation && vnodeData.name) {
slotName = vnodeData.name;
}
// normalize class / className attributes
if (BUILD.vdomClass) {
const classData = vnodeData.className || vnodeData.class;
if (classData) {
vnodeData.class =
typeof classData !== 'object'
? classData
: Object.keys(classData)
.filter((k) => classData[k])
.join(' ');
}
}
}
if (BUILD.isDev && vNodeChildren.some(isHost)) {
consoleDevError(`The <Host> must be the single root component. Make sure:
- You are NOT using hostData() and <Host> in the same component.
- <Host> is used once, and it's the single root component of the render() function.`);
}
if (BUILD.vdomFunctional && typeof nodeName === 'function') {
// nodeName is a functional component
return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
}
const vnode = newVNode(nodeName, null);
vnode.$attrs$ = vnodeData;
if (vNodeChildren.length > 0) {
vnode.$children$ = vNodeChildren;
}
if (BUILD.vdomKey) {
vnode.$key$ = key;
}
if (BUILD.slotRelocation) {
vnode.$name$ = slotName;
}
return vnode;
};
/**
* A utility function for creating a virtual DOM node from a tag and some
* possible text content.
*
* @param tag the tag for this element
* @param text possible text content for the node
* @returns a newly-minted virtual DOM node
*/
const newVNode = (tag, text) => {
const vnode = {
$flags$: 0,
$tag$: tag,
$text$: text,
$elm$: null,
$children$: null,
};
if (BUILD.vdomAttribute) {
vnode.$attrs$ = null;
}
if (BUILD.vdomKey) {
vnode.$key$ = null;
}
if (BUILD.slotRelocation) {
vnode.$name$ = null;
}
return vnode;
};
const Host = {};
/**
* Check whether a given node is a Host node or not
*
* @param node the virtual DOM node to check
* @returns whether it's a Host node or not
*/
const isHost = (node) => node && node.$tag$ === Host;
/**
* Implementation of {@link d.FunctionalUtilities} for Stencil's VDom.
*
* Note that these functions convert from {@link d.VNode} to
* {@link d.ChildNode} to give functional component developers a friendly
* interface.
*/
const vdomFnUtils = {
forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate),
};
/**
* Convert a {@link d.VNode} to a {@link d.ChildNode} in order to present a
* friendlier public interface (hence, 'convertToPublic').
*
* @param node the virtual DOM node to convert
* @returns a converted child node
*/
const convertToPublic = (node) => ({
vattrs: node.$attrs$,
vchildren: node.$children$,
vkey: node.$key$,
vname: node.$name$,
vtag: node.$tag$,
vtext: node.$text$,
});
/**
* Convert a {@link d.ChildNode} back to an equivalent {@link d.VNode} in
* order to use the resulting object in the virtual DOM. The initial object was
* likely created as part of presenting a public API, so converting it back
* involved making it 'private' again (hence, `convertToPrivate`).
*
* @param node the child node to convert
* @returns a converted virtual DOM node
*/
const convertToPrivate = (node) => {
if (typeof node.vtag === 'function') {
const vnodeData = Object.assign({}, node.vattrs);
if (node.vkey) {
vnodeData.key = node.vkey;
}
if (node.vname) {
vnodeData.name = node.vname;
}
return h(node.vtag, vnodeData, ...(node.vchildren || []));
}
const vnode = newVNode(node.vtag, node.vtext);
vnode.$attrs$ = node.vattrs;
vnode.$children$ = node.vchildren;
vnode.$key$ = node.vkey;
vnode.$name$ = node.vname;
return vnode;
};
/**
* Validates the ordering of attributes on an input element
*
* @param inputElm the element to validate
*/
const validateInputProperties = (inputElm) => {
const props = Object.keys(inputElm);
const value = props.indexOf('value');
if (value === -1) {
return;
}
const typeIndex = props.indexOf('type');
const minIndex = props.indexOf('min');
const maxIndex = props.indexOf('max');
const stepIndex = props.indexOf('step');
if (value < typeIndex || value < minIndex || value < maxIndex || value < stepIndex) {
consoleDevWarn(`The "value" prop of <input> should be set after "min", "max", "type" and "step"`);
}
};
const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
const endHydrate = createTime('hydrateClient', tagName);
const shadowRoot = hostElm.shadowRoot;
const childRenderNodes = [];
const slotNodes = [];
const shadowRootNodes = BUILD.shadowDom && shadowRoot ? [] : null;
const vnode = (hostRef.$vnode$ = newVNode(tagName, null));
if (!plt.$orgLocNodes$) {
initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));
}
hostElm[HYDRATE_ID] = hostId;
hostElm.removeAttribute(HYDRATE_ID);
clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
childRenderNodes.map((c) => {
const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
const node = c.$elm$;
if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
}
if (!shadowRoot) {
node['s-hn'] = tagName;
if (orgLocationNode) {
node['s-ol'] = orgLocationNode;
node['s-ol']['s-nr'] = node;
}
}
plt.$orgLocNodes$.delete(orgLocationId);
});
if (BUILD.shadowDom && shadowRoot) {
shadowRootNodes.map((shadowRootNode) => {
if (shadowRootNode) {
shadowRoot.appendChild(shadowRootNode);
}
});
}
endHydrate();
};
const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
let childNodeType;
let childIdSplt;
let childVNode;
let i;
if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
if (childNodeType) {
// got the node data from the element's attribute
// `${hostId}.${nodeId}.${depth}.${index}`
childIdSplt = childNodeType.split('.');
if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
childVNode = {
$flags$: 0,
$hostId$: childIdSplt[0],
$nodeId$: childIdSplt[1],
$depth$: childIdSplt[2],
$index$: childIdSplt[3],
$tag$: node.tagName.toLowerCase(),
$elm$: node,
$attrs$: null,
$children$: null,
$key$: null,
$name$: null,
$text$: null,
};
childRenderNodes.push(childVNode);
node.removeAttribute(HYDRATE_CHILD_ID);
// this is a new child vnode
// so ensure its parent vnode has the vchildren array
if (!parentVNode.$children$) {
parentVNode.$children$ = [];
}
// add our child vnode to a specific index of the vnode's children
parentVNode.$children$[childVNode.$index$] = childVNode;
// this is now the new parent vnode for all the next child checks
parentVNode = childVNode;
if (shadowRootNodes && childVNode.$depth$ === '0') {
shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
}
}
}
// recursively drill down, end to start so we can remove nodes
for (i = node.childNodes.length - 1; i >= 0; i--) {
clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);
}
if (node.shadowRoot) {
// keep drilling down through the shadow root nodes
for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);
}
}
}
else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
// `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`
childIdSplt = node.nodeValue.split('.');
if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
// comment node for either the host id or a 0 host id
childNodeType = childIdSplt[0];
childVNode = {
$flags$: 0,
$hostId$: childIdSplt[1],
$nodeId$: childIdSplt[2],
$depth$: childIdSplt[3],
$index$: childIdSplt[4],
$elm$: node,
$attrs$: null,
$children$: null,
$key$: null,
$name$: null,
$tag$: null,
$text$: null,
};
if (childNodeType === TEXT_NODE_ID) {
childVNode.$elm$ = node.nextSibling;
if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* NODE_TYPE.TextNode */) {
childVNode.$text$ = childVNode.$elm$.textContent;
childRenderNodes.push(childVNode);
// remove the text comment since it's no longer needed
node.remove();
if (!parentVNode.$children$) {
parentVNode.$children$ = [];
}
parentVNode.$children$[childVNode.$index$] = childVNode;
if (shadowRootNodes && childVNode.$depth$ === '0') {
shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
}
}
}
else if (childVNode.$hostId$ === hostId) {
// this comment node is specifically for this host id
if (childNodeType === SLOT_NODE_ID) {
// `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
childVNode.$tag$ = 'slot';
if (childIdSplt[5]) {
node['s-sn'] = childVNode.$name$ = childIdSplt[5];
}
else {
node['s-sn'] = '';
}
node['s-sr'] = true;
if (BUILD.shadowDom && shadowRootNodes) {
// browser support shadowRoot and this is a shadow dom component
// create an actual slot element
childVNode.$elm$ = doc.createElement(childVNode.$tag$);
if (childVNode.$name$) {
// add the slot name attribute
childVNode.$elm$.setAttribute('name', childVNode.$name$);
}
// insert the new slot element before the slot comment
node.parentNode.insertBefore(childVNode.$elm$, node);
// remove the slot comment since it's not needed for shadow
node.remove();
if (childVNode.$depth$ === '0') {
shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
}
}
slotNodes.push(childVNode);
if (!parentVNode.$children$) {
parentVNode.$children$ = [];
}
parentVNode.$children$[childVNode.$index$] = childVNode;
}
else if (childNodeType === CONTENT_REF_ID) {
// `${CONTENT_REF_ID}.${hostId}`;
if (BUILD.shadowDom && shadowRootNodes) {
// remove the content ref comment since it's not needed for shadow
node.remove();
}
else if (BUILD.slotRelocation) {
hostElm['s-cr'] = node;
node['s-cn'] = true;
}
}
}
}
}
else if (parentVNode && parentVNode.$tag$ === 'style') {
const vnode = newVNode(null, node.textContent);
vnode.$elm$ = node;
vnode.$index$ = '0';
parentVNode.$children$ = [vnode];
}
};
const initializeDocumentHydrate = (node, orgLocNodes) => {
if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
let i = 0;
for (; i < node.childNodes.length; i++) {
initializeDocumentHydrate(node.childNodes[i], orgLocNodes);
}
if (node.shadowRoot) {
for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
}
}
}
else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
const childIdSplt = node.nodeValue.split('.');
if (childIdSplt[0] === ORG_LOCATION_ID) {
orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
node.nodeValue = '';
// useful to know if the original location is
// the root light-dom of a shadow dom component
node['s-en'] = childIdSplt[3];
}
}
};
// Private
const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
// Public
const setMode = (handler) => modeResolutionChain.push(handler);
const getMode = (ref) => getHostRef(ref).$modeName$;
/**
* Parse a new property value for a given property type.
*
* While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
* it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
* 1. `any`, the type given to `propValue` in the function signature
* 2. the type stored from `propType`.
*
* This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
*
* Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
* a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
* based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
* ```tsx
* <my-cmp prop-val={0}></my-cmp>
* ```
*
* HTML prop values on the other hand, will always a string
*
* @param propValue the new value to coerce to some type
* @param propType the type of the prop, expressed as a binary number
* @returns the parsed/coerced value
*/
const parsePropertyValue = (propValue, propType) => {
// ensure this value is of the correct prop type
if (propValue != null && !isComplexType(propValue)) {
if (BUILD.propBoolean && propType & 4 /* MEMBER_FLAGS.Boolean */) {
// per the HTML spec, any string value means it is a boolean true value
// but we'll cheat here and say that the string "false" is the boolean false
return propValue === 'false' ? false : propValue === '' || !!propValue;
}
if (BUILD.propNumber && propType & 2 /* MEMBER_FLAGS.Number */) {
// force it to be a number
return parseFloat(propValue);
}
if (BUILD.propString && propType & 1 /* MEMBER_FLAGS.String */) {
// could have been passed as a number or boolean
// but we still want it as a string
return String(propValue);
}
// redundant return here for better minification
return propValue;
}
// not sure exactly what type we want
// so no need to change to a different type
return propValue;
};
const getElement = (ref) => (BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref);
const createEvent = (ref, name, flags) => {
const elm = getElement(ref);
return {
emit: (detail) => {
if (BUILD.isDev && !elm.isConnected) {
consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
}
return emitEvent(elm, name, {
bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
detail,
});
},
};
};
/**
* Helper function to create & dispatch a custom Event on a provided target
* @param elm the target of the Event
* @param name the name to give the custom Event
* @param opts options for configuring a custom Event
* @returns the custom Event
*/
const emitEvent = (elm, name, opts) => {
const ev = plt.ce(name, opts);
elm.dispatchEvent(ev);
return ev;
};
const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
const registerStyle = (scopeId, cssText, allowCS) => {
let style = styles.get(scopeId);
if (supportsConstructableStylesheets && allowCS) {
style = (style || new CSSStyleSheet());
if (typeof style === 'string') {
style = cssText;
}
else {
style.replaceSync(cssText);
}
}
else {
style = cssText;
}
styles.set(scopeId, style);
};
const addStyle = (styleContainerNode, cmpMeta, mode) => {
var _a;
const scopeId = getScopeId(cmpMeta, mode);
const style = styles.get(scopeId);
if (!BUILD.attachStyles) {
return scopeId;
}
// if an element is NOT connected then getRootNode() will return the wrong root node
// so the fallback is to always use the document for the root node in those cases
styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
if (style) {
if (typeof style === 'string') {
styleContainerNode = styleContainerNode.head || styleContainerNode;
let appliedStyles = rootAppliedStyles.get(styleContainerNode);
let styleElm;
if (!appliedStyles) {
rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
}
if (!appliedStyles.has(scopeId)) {
if (BUILD.hydrateClientSide &&
styleContainerNode.host &&
(styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) {
// This is only happening on native shadow-dom, do not needs CSS var shim
styleElm.innerHTML = style;
}
else {
styleElm = doc.createElement('style');
styleElm.innerHTML = style;
// Apply CSP nonce to the style tag if it exists
const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
if (nonce != null) {
styleElm.setAttribute('nonce', nonce);
}
if (BUILD.hydrateServerSide || BUILD.hotModuleReplacement) {
styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
}
styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
}
if (appliedStyles) {
appliedStyles.add(scopeId);
}
}
}
else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
}
}
return scopeId;
};
const attachStyles = (hostRef) => {
const cmpMeta = hostRef.$cmpMeta$;
const elm = hostRef.$hostElement$;
const flags = cmpMeta.$flags$;
const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
const scopeId = addStyle(BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$);
if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
// only required when we're NOT using native shadow dom (slot)
// or this browser doesn't support native shadow dom
// and this host element was NOT created with SSR
// let's pick out the inner content for slot projection
// create a node to represent where the original
// content was first placed, which is useful later on
// DOM WRITE!!
elm['s-sc'] = scopeId;
elm.classList.add(scopeId + '-h');
if (BUILD.scoped && flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
elm.classList.add(scopeId + '-s');
}
}
endAttachStyles();
};
const getScopeId = (cmp, mode) => 'sc-' + (BUILD.mode && mode && cmp.$flags$ & 32 /* CMP_FLAGS.hasMode */ ? cmp.$tagName$ + '-' + mode : cmp.$tagName$);
const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
/**
* Production setAccessor() function based on Preact by
* Jason Miller (@developit)
* Licensed under the MIT License
* https://github.com/developit/preact/blob/master/LICENSE
*
* Modified for Stencil's compiler and vdom
*/
/**
* When running a VDom render set properties present on a VDom node onto the
* corresponding HTML element.
*
* Note that this function has special functionality for the `class`,
* `style`, `key`, and `ref` attributes, as well as event handlers (like
* `onClick`, etc). All others are just passed through as-is.
*
* @param elm the HTMLElement onto which attributes should be set
* @param memberName the name of the attribute to set
* @param oldValue the old value for the attribute
* @param newValue the new value for the attribute
* @param isSvg whether we're in an svg context or not
* @param flags bitflags for Vdom variables
*/
const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
if (oldValue !== newValue) {
let isProp = isMemberInElement(elm, memberName);
let ln = memberName.toLowerCase();
if (BUILD.vdomClass && memberName === 'class') {
const classList = elm.classList;
const oldClasses = parseClassList(oldValue);
const newClasses = parseClassList(newValue);
classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
}
else if (BUILD.vdomStyle && memberName === 'style') {
// update style attribute, css properties and values
if (BUILD.updatable) {
for (const prop in oldValue) {
if (!newValue || newValue[prop] == null) {
if (!BUILD.hydrateServerSide && prop.includes('-')) {
elm.style.removeProperty(prop);
}
else {
elm.style[prop] = '';
}
}
}
}
for (const prop in newValue) {
if (!oldValue || newValue[prop] !== oldValue[prop]) {
if (!BUILD.hydrateServerSide && prop.includes('-')) {
elm.style.setProperty(prop, newValue[prop]);
}
else {
elm.style[prop] = newValue[prop];
}
}
}
}
else if (BUILD.vdomKey && memberName === 'key')
;
else if (BUILD.vdomRef && memberName === 'ref') {
// minifier will clean this up
if (newValue) {
newValue(elm);
}
}
else if (BUILD.vdomListener &&
(BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) &&
memberName[0] === 'o' &&
memberName[1] === 'n') {
// Event Handlers
// so if the member name starts with "on" and the 3rd characters is
// a capital letter, and it's not already a member on the element,
// then we're assuming it's an event listener
if (memberName[2] === '-') {
// on- prefixed events
// allows to be explicit about the dom event to listen without any magic
// under the hood:
// <my-cmp on-click> // listens for "click"
// <my-cmp on-Click> // listens for "Click"
// <my-cmp on-ionChange> // listens for "ionChange"
// <my-cmp on-EVENTS> // listens for "EVENTS"
memberName = memberName.slice(3);
}
else if (isMemberInElement(win, ln)) {
// standard event
// the JSX attribute could have been "onMouseOver" and the
// member name "onmouseover" is on the window's prototype
// so let's add the listener "mouseover", which is all lowercased
memberName = ln.slice(2);
}
else {
// custom event
// the JSX attribute could have been "onMyCustomEvent"
// so let's trim off the "on" prefix and lowercase the first character
// and add the listener "myCustomEvent"
// except for the first character, we keep the event name case
memberName = ln[2] + memberName.slice(3);
}
if (oldValue) {
plt.rel(elm, memberName, oldValue, false);
}
if (newValue) {
plt.ael(elm, memberName, newValue, false);
}
}
else if (BUILD.vdomPropOrAttr) {
// Set property if it exists and it's not a SVG
const isComplex = isComplexType(newValue);
if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
try {
if (!elm.tagName.includes('-')) {
const n = newValue == null ? '' : newValue;
// Workaround for Safari, moving the <input> caret when re-assigning the same valued
if (memberName === 'list') {
isProp = false;
}
else if (oldValue == null || elm[memberName] != n) {
elm[memberName] = n;
}
}
else {
elm[memberName] = newValue;
}
}
catch (e) { }
}
/**
* Need to manually update attribute if:
* - memberName is not an attribute
* - if we are rendering the host element in order to reflect attribute
* - if it's a SVG, since properties might not work in <svg>
* - if the newValue is null/undefined or 'false'.
*/
let xlink = false;
if (BUILD.vdomXlink) {
if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
memberName = ln;
xlink = true;
}
}
if (newValue == null || newValue === false) {
if (newValue !== false || elm.getAttribute(memberName) === '') {
if (BUILD.vdomXlink && xlink) {
elm.removeAttributeNS(XLINK_NS, memberName);
}
else {
elm.removeAttribute(memberName);
}
}
}
else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
newValue = newValue === true ? '' : newValue;
if (BUILD.vdomXlink && xlink) {
elm.setAttributeNS(XLINK_NS, memberName, newValue);
}
else {
elm.setAttribute(memberName, newValue);
}
}
}
}
};
const parseClassListRegex = /\s/;
const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
// if the element passed in is a shadow root, which is a document fragment
// then we want to be adding attrs/props to the shadow root's "host" element
// if it's not a shadow root, then we add attrs/props to the same element
const elm = newVnode.$elm$.nodeType === 11 /* NODE_TYPE.DocumentFragment */ && newVnode.$elm$.host
? newVnode.$elm$.host
: newVnode.$elm$;
const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
if (BUILD.updatable) {
// remove attributes no longer present on the vnode by setting them to undefined
for (memberName in oldVnodeAttrs) {
if (!(memberName in newVnodeAttrs)) {
setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
}
}
}
// add new & update changed attributes
for (memberName in newVnodeAttrs) {
setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
}
};
/**
* Create a DOM Node corresponding to one of the children of a given VNode.
*
* @param oldParentVNode the parent VNode from the previous render
* @param newParentVNode the parent VNode from the current render
* @param childIndex the index of the VNode, in the _new_ parent node's
* children, for which we will create a new DOM node
* @param parentElm the parent DOM node which our new node will be a child of
* @returns the newly created node
*/
const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
// tslint:disable-next-line: prefer-const
const newVNode = newParentVNode.$children$[childIndex];
let i = 0;
let elm;
let childNode;
let oldVNode;
if (BUILD.slotRelocation && !useNativeShadowDom) {
// remember for later we need to check to relocate nodes
checkSlotRelocate = true;
if (newVNode.$tag$ === 'slot') {
if (scopeId) {
// scoped css needs to add its scoped id to the parent element
parentElm.classList.add(scopeId + '-s');
}
newVNode.$flags$ |= newVNode.$children$
? // slot element has fallback content
2 /* VNODE_FLAGS.isSlotFallback */
: // slot element does not have fallback content
1 /* VNODE_FLAGS.isSlotReference */;
}
}
if (BUILD.isDev && newVNode.$elm$) {
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`);
}
if (BUILD.vdomText && newVNode.$text$ !== null) {
// create text node
elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
}
else if (BUILD.slotRelocation && newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) {
// create a slot reference node
elm = newVNode.$elm$ =
BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : doc.createTextNode('');
}
else {
if (BUILD.svg && !isSvgMode) {
isSvgMode = newVNode.$tag$ === 'svg';
}
// create element
elm = newVNode.$elm$ = (BUILD.svg
? doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, BUILD.slotRelocation && newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */
? 'slot-fb'
: newVNode.$tag$)
: doc.createElement(BUILD.slotRelocation && newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */
? 'slot-fb'
: newVNode.$tag$));
if (BUILD.svg && isSvgMode && newVNode.$tag$ === 'foreignObject') {
isSvgMode = false;
}
// add css classes, attrs, props, listeners, etc.
if (BUILD.vdomAttribute) {
updateElement(null, newVNode, isSvgMode);
}
if ((BUILD.shadowDom || BUILD.scoped) && isDef(scopeId) && elm['s-si'] !== scopeId) {
// if there is a scopeId and this is the initial render
// then let's add the scopeId as a css class
elm.classList.add((elm['s-si'] = scopeId));
}
if (newVNode.$children$) {
for (i = 0; i < newVNode.$children$.length; ++i) {
// create the node
childNode = createElm(oldParentVNode, newVNode, i, elm);
// return node could have been null
if (childNode) {
// append our new node
elm.appendChild(childNode);
}
}
}
if (BUILD.svg) {
if (newVNode.$tag$ === 'svg') {
// Only reset the SVG context when we're exiting <svg> element
isSvgMode = false;
}
else if (elm.tagName === 'foreignObject') {
// Reenter SVG context when we're exiting <foreignObject> element
isSvgMode = true;
}
}
}
if (BUILD.slotRelocation) {
elm['s-hn'] = hostTagName;
if (newVNode.$flags$ & (2 /* VNODE_FLAGS.isSlotFallback */ | 1 /* VNODE_FLAGS.isSlotReference */)) {
// remember the content reference comment
elm['s-sr'] = true;
// remember the content reference comment
elm['s-cr'] = contentRef;
// remember the slot name, or empty string for default slot
elm['s-sn'] = newVNode.$name$ || '';
// check if we've got an old vnode for this slot
oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
// we've got an old slot vnode and the wrapper is being replaced
// so let's move the old slot content back to it's original location
putBackInOriginalLocation(oldParentVNode.$elm$, false);
}
}
}
return elm;
};
const putBackInOriginalLocation = (parentElm, recursive) => {
plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
const oldSlotChildNodes = parentElm.childNodes;
for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
const childNode = oldSlotChildNodes[i];
if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
// // this child node in the old element is from another component
// // remove this node from the old slot's parent
// childNode.remove();
// and relocate it back to it's original location
parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
// remove the old original location comment entirely
// later on the patch function will know what to do
// and move this to the correct spot in need be
childNode['s-ol'].remove();
childNode['s-ol'] = undefined;
checkSlotRelocate = true;
}
if (recursive) {
putBackInOriginalLocation(childNode, recursive);
}
}
plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
};
/**
* Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
* add them to the DOM in the appropriate place.
*
* @param parentElm the DOM node which should be used as a parent for the new
* DOM nodes
* @param before a child of the `parentElm` which the new children should be
* inserted before (optional)
* @param parentVNode the parent virtual DOM node
* @param vnodes the new child virtual DOM nodes to produce DOM nodes for
* @param startIdx the index in the child virtual DOM nodes at which to start
* creating DOM nodes (inclusive)
* @param endIdx the index in the child virtual DOM nodes at which to stop
* creating DOM nodes (inclusive)
*/
const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
let containerElm = ((BUILD.slotRelocation && parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
let childNode;
if (BUILD.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
containerElm = containerElm.shadowRoot;
}
for (; startIdx <= endIdx; ++startIdx) {
if (vnodes[startIdx]) {
childNode = createElm(null, parentVNode, startIdx, parentElm);
if (childNode) {
vnodes[startIdx].$elm$ = childNode;
containerElm.insertBefore(childNode, BUILD.slotRelocation ? referenceNode(before) : before);
}
}
}
};
/**
* Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
* This can be used to, for instance, clean up after a list of children which
* should no longer be shown.
*
* This function also handles some of Stencil's slot relocation logic.
*
* @param vnodes a list of virtual DOM nodes to remove
* @param startIdx the index at which to start removing nodes (inclusive)
* @param endIdx the index at which to stop removing nodes (inclusive)
*/
const removeVnodes = (vnodes, startIdx, endIdx) => {
for (let index = startIdx; index <= endIdx; ++index) {
const vnode = vnodes[index];
if (vnode) {
const elm = vnode.$elm$;
nullifyVNodeRefs(vnode);
if (elm) {
if (BUILD.slotRelocation) {
// we're removing this element
// so it's possible we need to show slot fallback content now
checkSlotFallbackVisibility = true;
if (elm['s-ol']) {
// remove the original location comment
elm['s-ol'].remove();
}
else {
// it's possible that child nodes of the node
// that's being removed are slot nodes
putBackInOriginalLocation(elm, true);
}
}
// remove the vnode's element from the dom
elm.remove();
}
}
}
};
/**
* Reconcile the children of a new VNode with the children of an old VNode by
* traversing the two collections of children, identifying nodes that are
* conserved or changed, calling out to `patch` to make any necessary
* updates to the DOM, and rearranging DOM nodes as needed.
*
* The algorithm for reconciling children works by analyzing two 'windows' onto
* the two arrays of children (`oldCh` and `newCh`). We keep track of the
* 'windows' by storing start and end indices and references to the
* corresponding array entries. Initially the two 'windows' are basically equal
* to the entire array, but we progressively narrow the windows until there are
* no children left to update by doing the following:
*
* 1. Skip any `null` entries at the beginning or end of the two arrays, so
* that if we have an initial array like the following we'll end up dealing
* only with a window bounded by the highlighted elements:
*
* [null, null, VNode1 , ... , VNode2, null, null]
* ^^^^^^ ^^^^^^
*
* 2. Check to see if the elements at the head and tail positions are equal
* across the windows. This will basically detect elements which haven't
* been added, removed, or changed position, i.e. if you had the following
* VNode elements (represented as HTML):
*
* oldVNode: `<div><p><span>HEY</span></p></div>`
* newVNode: `<div><p><span>THERE</span></p></div>`
*
* Then when comparing the children of the `<div>` tag we check the equality
* of the VNodes corresponding to the `<p>` tags and, since they are the
* same tag in the same position, we'd be able to avoid completely
* re-rendering the subtree under them with a new DOM element and would just
* call out to `patch` to handle reconciling their children and so on.
*
* 3. Check, for both windows, to see if the element at the beginning of the
* window corresponds to the element at the end of the other window. This is
* a heuristic which will let us identify _some_ situations in which
* elements have changed position, for instance it _should_ detect that the
* children nodes themselves have not changed but merely moved in the
* following example:
*
* oldVNode: `<div><element-one /><element-two /></div>`
* newVNode: `<div><element-two /><element-one /></div>`
*
* If we find cases like this then we also need to move the concrete DOM
* elements corresponding to the moved children to write the re-order to the
* DOM.
*
* 4. Finally, if VNodes have the `key` attrib