@stencil/core 3.0.0-beta.1 → 3.0.0-rc.1

package/internal/client/index.js

@@ -19,7 +19,7 @@ let renderingRef = null;
 let queueCongestion = 0;
 let queuePending = false;
 /*
- Stencil Client Platform v3.0.0-beta.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v3.0.0-rc.1 | MIT Licensed | https://stenciljs.com
  */
 import { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';
 const Build = {
@@ -50,11 +50,11 @@ const createTime = (fnName, tagName = '') => {
 };
 const uniqueTime = (key, measureText) => {
     if (BUILD.profile && performance.mark) {
-        if (performance.getEntriesByName(key).length === 0) {
+        if (performance.getEntriesByName(key, 'mark').length === 0) {
             performance.mark(key);
         }
         return () => {
-            if (performance.getEntriesByName(measureText).length === 0) {
+            if (performance.getEntriesByName(measureText, 'measure').length === 0) {
                 performance.measure(measureText, key);
             }
         };
@@ -148,6 +148,18 @@ const isComplexType = (o) => {
     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)
@@ -238,6 +250,14 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
     }
     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,
@@ -258,6 +278,12 @@ const newVNode = (tag, text) => {
     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.
@@ -270,6 +296,13 @@ 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$,
@@ -278,6 +311,15 @@ const convertToPublic = (node) => ({
     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);
@@ -298,6 +340,7 @@ const convertToPrivate = (node) => {
 };
 /**
  * Validates the ordering of attributes on an input element
+ *
  * @param inputElm the element to validate
  */
 const validateInputProperties = (inputElm) => {
@@ -618,6 +661,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
     styles.set(scopeId, style);
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    var _a;
     let scopeId = getScopeId(cmpMeta, mode);
     const style = styles.get(scopeId);
     if (!BUILD.attachStyles) {
@@ -661,6 +705,11 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
                         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);
                     }
@@ -1009,6 +1058,21 @@ const putBackInOriginalLocation = (parentElm, 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;
@@ -1025,6 +1089,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
         }
     }
 };
+/**
+ * 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)
+ * @param vnode a VNode
+ * @param elm an element
+ */
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
@@ -1306,7 +1383,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * So, in other words, if `key` attrs are not set on VNodes which may be
  * changing order within a `children` array or something along those lines then
- * we could obtain a false positive and then have to do needless re-rendering.
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
@@ -1535,6 +1613,18 @@ const callNodeRefs = (vNode) => {
         vNode.$children$ && vNode.$children$.map(callNodeRefs);
     }
 };
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
@@ -2677,6 +2767,7 @@ const hmrStart = (elm, cmpMeta, hmrVersionId) => {
     initializeComponent(elm, hostRef, cmpMeta, hmrVersionId);
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
+    var _a;
     if (BUILD.profile && performance.mark) {
         performance.mark('st:app:start');
     }
@@ -2812,6 +2903,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) {
         visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
         visibilityStyle.setAttribute('data-styles', '');
+        // 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) {
+            visibilityStyle.setAttribute('nonce', nonce);
+        }
         head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
@@ -2947,6 +3043,13 @@ const hostListenerOpts = (flags) => supportsListenerOptions
         capture: (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0,
     })
     : (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
+/**
+ * Assigns the given value to the nonce property on the runtime platform object.
+ * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
+ * @param nonce The value to be assigned to the platform nonce property.
+ * @returns void
+ */
+const setNonce = (nonce) => (plt.$nonce$ = nonce);
 const setPlatformOptions = (opts) => Object.assign(plt, opts);
 const insertVdomAnnotations = (doc, staticComponents) => {
     if (doc != null) {
@@ -3282,4 +3385,4 @@ const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 export { BUILD, Env, NAMESPACE } from '@stencil/core/internal/app-data';
-export { Build, CSS, Context, Fragment, H, H as HTMLElement, Host, STENCIL_DEV_MODE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceModeUpdate, forceUpdate, getAssetPath, getConnect, getContext, getElement, getHostRef, getMode, getRenderingRef, getValue, h, insertVdomAnnotations, isMemberInElement, loadModule, modeResolutionChain, nextTick, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setPlatformHelpers, setPlatformOptions, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };
+export { Build, CSS, Context, Fragment, H, H as HTMLElement, Host, STENCIL_DEV_MODE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceModeUpdate, forceUpdate, getAssetPath, getConnect, getContext, getElement, getHostRef, getMode, getRenderingRef, getValue, h, insertVdomAnnotations, isMemberInElement, loadModule, modeResolutionChain, nextTick, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };

package/internal/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/client",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-rc.1",
   "description": "Stencil internal client platform to be imported by the Stencil Compiler and internal runtime. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "private": true,

package/internal/client/patch-browser.js

@@ -1,8 +1,20 @@
 /*
- Stencil Client Patch Browser v3.0.0-beta.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v3.0.0-rc.1 | MIT Licensed | https://stenciljs.com
  */
 import { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';
 import { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';
+/**
+ * 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;
+}
 // TODO(STENCIL-661): Remove code related to the dynamic import shim
 const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
 const patchBrowser = () => {
@@ -93,6 +105,7 @@ const patchDynamicImport = (base, orgScriptElm) => {
         // basically this code is for old Edge, v18 and below
         const moduleMap = new Map();
         win[importFunctionName] = (src) => {
+            var _a;
             const url = new URL(src, base).href;
             let mod = moduleMap.get(url);
             if (!mod) {
@@ -102,6 +115,11 @@ const patchDynamicImport = (base, orgScriptElm) => {
                 script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {
                     type: 'application/javascript',
                 }));
+                // Apply CSP nonce to the script tag if it exists
+                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+                if (nonce != null) {
+                    script.setAttribute('nonce', nonce);
+                }
                 mod = new Promise((resolve) => {
                     script.onload = () => {
                         resolve(win[importFunctionName].m);

package/internal/client/patch-esm.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Patch Esm v3.0.0-beta.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v3.0.0-rc.1 | MIT Licensed | https://stenciljs.com
  */
 import { BUILD } from '@stencil/core/internal/app-data';
 import { CSS, plt, win, promiseResolve } from '@stencil/core';

package/internal/client/shadow-css.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Platform v3.0.0-beta.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v3.0.0-rc.1 | MIT Licensed | https://stenciljs.com
  */
 /**
  * @license

package/internal/hydrate/index.js

@@ -1,3 +1,8 @@
+function queryNonceMetaTagContent(e) {
+ var t, o, n;
+ return null !== (n = null === (o = null === (t = e.head) || void 0 === t ? void 0 : t.querySelector('meta[name="csp-nonce"]')) || void 0 === o ? void 0 : o.getAttribute("content")) && void 0 !== n ? n : void 0;
+}
+
 function componentOnReady() {
  return getHostRef(this).$onReadyPromise$;
 }
@@ -316,26 +321,28 @@ const createTime = (e, t = "") => {
  let n = styles.get(e);
  n = t, styles.set(e, n);
 }, addStyle = (e, t, o, n) => {
- let s = getScopeId(t, o);
- const l = styles.get(s);
- if (!BUILD.attachStyles) return s;
- if (e = 11 === e.nodeType ? e : doc, l) if ("string" == typeof l) {
+ var s;
+ let l = getScopeId(t, o);
+ const a = styles.get(l);
+ if (!BUILD.attachStyles) return l;
+ if (e = 11 === e.nodeType ? e : doc, a) if ("string" == typeof a) {
   e = e.head || e;
-  let o, a = rootAppliedStyles.get(e);
-  if (a || rootAppliedStyles.set(e, a = new Set), !a.has(s)) {
-   if (BUILD.hydrateClientSide && e.host && (o = e.querySelector(`[sty-id="${s}"]`))) o.innerHTML = l; else {
+  let o, r = rootAppliedStyles.get(e);
+  if (r || rootAppliedStyles.set(e, r = new Set), !r.has(l)) {
+   if (BUILD.hydrateClientSide && e.host && (o = e.querySelector(`[sty-id="${l}"]`))) o.innerHTML = a; else {
     if (BUILD.cssVarShim && plt.$cssShim$) {
-     o = plt.$cssShim$.createHostStyle(n, s, l, !!(10 & t.$flags$));
+     o = plt.$cssShim$.createHostStyle(n, l, a, !!(10 & t.$flags$));
      const e = o["s-sc"];
-     e && (s = e, a = null);
-    } else o = doc.createElement("style"), o.innerHTML = l;
-    (BUILD.hydrateServerSide || BUILD.hotModuleReplacement) && o.setAttribute("sty-id", s), 
+     e && (l = e, r = null);
+    } else o = doc.createElement("style"), o.innerHTML = a;
+    const i = null !== (s = plt.$nonce$) && void 0 !== s ? s : queryNonceMetaTagContent(doc);
+    null != i && o.setAttribute("nonce", i), (BUILD.hydrateServerSide || BUILD.hotModuleReplacement) && o.setAttribute("sty-id", l), 
     e.insertBefore(o, e.querySelector("link"));
    }
-   a && a.add(s);
+   r && r.add(l);
   }
- } else BUILD.constructableCSS && !e.adoptedStyleSheets.includes(l) && (e.adoptedStyleSheets = [ ...e.adoptedStyleSheets, l ]);
- return s;
+ } else BUILD.constructableCSS && !e.adoptedStyleSheets.includes(a) && (e.adoptedStyleSheets = [ ...e.adoptedStyleSheets, a ]);
+ return l;
 }, attachStyles = e => {
  const t = e.$cmpMeta$, o = e.$hostElement$, n = t.$flags$, s = createTime("attachStyles", t.$tagName$), l = addStyle(BUILD.shadowDom && supportsShadow && o.shadowRoot ? o.shadowRoot : o.getRootNode(), t, e.$modeName$, o);
  (BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && 10 & n && (o["s-sc"] = l, 
@@ -653,9 +660,9 @@ const callRender = (e, t, o) => {
   if (BUILD.lazyLoad || BUILD.hydrateClientSide) {
    if (t.$flags$ |= 32, (s = loadModule(o)).then) {
     const e = (l = `st:load:${o.$tagName$}:${t.$modeName$}`, a = `[Stencil] Load module for <${o.$tagName$}>`, 
-    BUILD.profile && performance.mark ? (0 === performance.getEntriesByName(l).length && performance.mark(l), 
+    BUILD.profile && performance.mark ? (0 === performance.getEntriesByName(l, "mark").length && performance.mark(l), 
     () => {
-     0 === performance.getEntriesByName(a).length && performance.measure(a, l);
+     0 === performance.getEntriesByName(a, "measure").length && performance.measure(a, l);
     }) : () => {});
     s = await s, e();
    }
@@ -855,6 +862,7 @@ const callRender = (e, t, o) => {
  for (;(e = e.nextSibling) && e["s-sn"] === t; ) o.push(e);
  return o;
 }, bootstrapLazy = (e, t = {}) => {
+ var o;
  BUILD.profile && performance.mark && performance.mark("st:app:start"), (() => {
   if (BUILD.devTools) {
    const e = win.stencil = win.stencil || {}, t = e.inspect;
@@ -902,29 +910,29 @@ const callRender = (e, t, o) => {
    };
   }
  })();
- const o = createTime("bootstrapLazy"), n = [], s = t.exclude || [], l = win.customElements, a = doc.head, r = a.querySelector("meta[charset]"), i = doc.createElement("style"), d = [], c = doc.querySelectorAll("[sty-id]");
- let $, m = !0, p = 0;
+ const n = createTime("bootstrapLazy"), s = [], l = t.exclude || [], a = win.customElements, r = doc.head, i = r.querySelector("meta[charset]"), d = doc.createElement("style"), c = [], $ = doc.querySelectorAll("[sty-id]");
+ let m, p = !0, h = 0;
  if (Object.assign(plt, t), plt.$resourcesUrl$ = new URL(t.resourcesUrl || "./", doc.baseURI).href, 
  BUILD.asyncQueue && t.syncQueue && (plt.$flags$ |= 4), BUILD.hydrateClientSide && (plt.$flags$ |= 2), 
- BUILD.hydrateClientSide && BUILD.shadowDom) for (;p < c.length; p++) registerStyle(c[p].getAttribute("sty-id"), c[p].innerHTML.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{"));
- e.map((e => {
+ BUILD.hydrateClientSide && BUILD.shadowDom) for (;h < $.length; h++) registerStyle($[h].getAttribute("sty-id"), $[h].innerHTML.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{"));
+ if (e.map((e => {
   e[1].map((o => {
-   const a = {
+   const n = {
     $flags$: o[0],
     $tagName$: o[1],
     $members$: o[2],
     $listeners$: o[3]
    };
-   BUILD.member && (a.$members$ = o[2]), BUILD.hostListener && (a.$listeners$ = o[3]), 
-   BUILD.reflect && (a.$attrsToReflect$ = []), BUILD.watchCallback && (a.$watchers$ = {}), 
-   BUILD.shadowDom && !supportsShadow && 1 & a.$flags$ && (a.$flags$ |= 8);
-   const r = BUILD.transformTagName && t.transformTagName ? t.transformTagName(a.$tagName$) : a.$tagName$, i = class extends HTMLElement {
+   BUILD.member && (n.$members$ = o[2]), BUILD.hostListener && (n.$listeners$ = o[3]), 
+   BUILD.reflect && (n.$attrsToReflect$ = []), BUILD.watchCallback && (n.$watchers$ = {}), 
+   BUILD.shadowDom && !supportsShadow && 1 & n.$flags$ && (n.$flags$ |= 8);
+   const r = BUILD.transformTagName && t.transformTagName ? t.transformTagName(n.$tagName$) : n.$tagName$, i = class extends HTMLElement {
     constructor(e) {
-     super(e), registerHost(e = this, a), BUILD.shadowDom && 1 & a.$flags$ && (BUILD.hydrateServerSide || "shadowRoot" in e || (e.shadowRoot = e)), 
-     BUILD.slotChildNodesFix && patchChildSlotNodes(e, a);
+     super(e), registerHost(e = this, n), BUILD.shadowDom && 1 & n.$flags$ && (BUILD.hydrateServerSide || "shadowRoot" in e || (e.shadowRoot = e)), 
+     BUILD.slotChildNodesFix && patchChildSlotNodes(e, n);
     }
     connectedCallback() {
-     $ && (clearTimeout($), $ = null), m ? d.push(this) : plt.jmp((() => connectedCallback(this)));
+     m && (clearTimeout(m), m = null), p ? c.push(this) : plt.jmp((() => connectedCallback(this)));
     }
     disconnectedCallback() {
      plt.jmp((() => disconnectedCallback(this)));
@@ -940,14 +948,17 @@ const callRender = (e, t, o) => {
      n.$flags$ = 1, e["s-hmr-load"] = () => {
       delete e["s-hmr-load"];
      }, initializeComponent(e, n, t);
-    })(this, a);
-   }), BUILD.scopedSlotTextContentFix && patchTextContent(i.prototype, a), a.$lazyBundleId$ = e[0], 
-   s.includes(r) || l.get(r) || (n.push(r), l.define(r, proxyComponent(i, a, 1)));
+    })(this, n);
+   }), BUILD.scopedSlotTextContentFix && patchTextContent(i.prototype, n), n.$lazyBundleId$ = e[0], 
+   l.includes(r) || a.get(r) || (s.push(r), a.define(r, proxyComponent(i, n, 1)));
   }));
- })), BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute) && (i.innerHTML = n + "{visibility:hidden}.hydrated{visibility:inherit}", 
- i.setAttribute("data-styles", ""), a.insertBefore(i, r ? r.nextSibling : a.firstChild)), 
- m = !1, d.length ? d.map((e => e.connectedCallback())) : BUILD.profile ? plt.jmp((() => $ = setTimeout(appDidLoad, 30, "timeout"))) : plt.jmp((() => $ = setTimeout(appDidLoad, 30))), 
- o();
+ })), BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) {
+  d.innerHTML = s + "{visibility:hidden}.hydrated{visibility:inherit}", d.setAttribute("data-styles", "");
+  const e = null !== (o = plt.$nonce$) && void 0 !== o ? o : queryNonceMetaTagContent(doc);
+  null != e && d.setAttribute("nonce", e), r.insertBefore(d, i ? i.nextSibling : r.firstChild);
+ }
+ p = !1, c.length ? c.map((e => e.connectedCallback())) : BUILD.profile ? plt.jmp((() => m = setTimeout(appDidLoad, 30, "timeout"))) : plt.jmp((() => m = setTimeout(appDidLoad, 30))), 
+ n();
 }, getConnect = (e, t) => {
  const o = () => {
   let e = doc.querySelector(t);
@@ -975,7 +986,7 @@ const callRender = (e, t, o) => {
  } catch (e) {
   consoleError(e);
  }
-}, getHostListenerTarget = (e, t) => BUILD.hostListenerTargetDocument && 4 & t ? doc : BUILD.hostListenerTargetWindow && 8 & t ? win : BUILD.hostListenerTargetBody && 16 & t ? doc.body : BUILD.hostListenerTargetParent && 32 & t ? e.parentElement : e, hostListenerOpts = e => 0 != (2 & e), insertVdomAnnotations = (e, t) => {
+}, getHostListenerTarget = (e, t) => BUILD.hostListenerTargetDocument && 4 & t ? doc : BUILD.hostListenerTargetWindow && 8 & t ? win : BUILD.hostListenerTargetBody && 16 & t ? doc.body : BUILD.hostListenerTargetParent && 32 & t ? e.parentElement : e, hostListenerOpts = e => 0 != (2 & e), setNonce = e => plt.$nonce$ = e, insertVdomAnnotations = (e, t) => {
  if (null != e) {
   const o = {
    hostIds: 0,
@@ -1129,4 +1140,4 @@ const cmpModules = new Map, getModule = e => {
  isTesting: !1
 }, styles = new Map, modeResolutionChain = [];
 
-export { Build, Context, Fragment, Host, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceModeUpdate, forceUpdate$1 as forceUpdate, getAssetPath, getConnect, getContext, getElement, getHostRef, getMode, getRenderingRef, getValue, hAsync as h, hydrateApp, insertVdomAnnotations, isMemberInElement, loadModule, modeResolutionChain, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setPlatformHelpers, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };
+export { Build, Context, Fragment, Host, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceModeUpdate, forceUpdate$1 as forceUpdate, getAssetPath, getConnect, getContext, getElement, getHostRef, getMode, getRenderingRef, getValue, hAsync as h, hydrateApp, insertVdomAnnotations, isMemberInElement, loadModule, modeResolutionChain, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };

package/internal/hydrate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/hydrate",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-rc.1",
   "description": "Stencil internal hydrate platform to be imported by the Stencil Compiler. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "private": true

package/internal/hydrate/runner.d.ts

@@ -141,24 +141,25 @@ export interface HydrateFactoryOptions extends SerializeDocumentOptions {
 	destroyDocument: boolean;
 }
 export interface Diagnostic {
-	level: "error" | "warn" | "info" | "log" | "debug";
-	type: string;
+	absFilePath?: string | undefined;
+	code?: string;
+	columnNumber?: number | undefined;
+	debugText?: string;
 	header?: string;
 	language?: string;
+	level: "error" | "warn" | "info" | "log" | "debug";
+	lineNumber?: number | undefined;
+	lines: PrintLine[];
 	messageText: string;
-	debugText?: string;
-	code?: string;
-	absFilePath?: string;
-	relFilePath?: string;
-	lineNumber?: number;
-	columnNumber?: number;
-	lines?: {
-		lineIndex: number;
-		lineNumber: number;
-		text?: string;
-		errorCharStart: number;
-		errorLength?: number;
-	}[];
+	relFilePath?: string | undefined;
+	type: string;
+}
+export interface PrintLine {
+	lineIndex: number;
+	lineNumber: number;
+	text?: string;
+	errorCharStart: number;
+	errorLength?: number;
 }
 export interface HydrateResults {
 	buildId: string;

package/internal/hydrate/runner.js

@@ -757,7 +757,8 @@ const templateWindows = new Map, isPromise = e => !!e && ("object" == typeof e |
     level: "warn",
     type: "css",
     header: "CSS Stringify",
-    messageText: e
+    messageText: e,
+    lines: []
    });
   }
  } catch (e) {
@@ -765,7 +766,8 @@ const templateWindows = new Map, isPromise = e => !!e && ("object" == typeof e |
    level: "warn",
    type: "css",
    header: "CSS Parse",
-   messageText: e
+   messageText: e,
+   lines: []
   });
  }
 }, SKIP_ATTRS = new Set([ "s-id", "c-id" ]), createHydrateBuildId = () => {

package/internal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-rc.1",
   "description": "Stencil internals only to be imported by the Stencil Compiler. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "types": "./index.d.ts",

package/internal/stencil-core/index.d.ts

@@ -43,6 +43,7 @@ export {
   setAssetPath,
   setErrorHandler,
   setMode,
+  setNonce,
   setPlatformHelpers,
   State,
   Watch,

package/internal/stencil-private.d.ts

@@ -1445,6 +1445,11 @@ export interface PlatformRuntime {
     $flags$: number;
     $orgLocNodes$?: Map<string, RenderNode>;
     $resourcesUrl$: string;
+    /**
+     * The nonce value to be applied to all script/style tags at runtime.
+     * If `null`, the nonce attribute will not be applied.
+     */
+    $nonce$?: string | null;
     jmp: (c: Function) => any;
     raf: (c: FrameRequestCallback) => number;
     ael: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
@@ -2072,6 +2077,11 @@ export interface NewSpecPageOptions {
      */
     attachStyles?: boolean;
     strictBuild?: boolean;
+    /**
+     * Default values to be set on the platform runtime object (@see PlatformRuntime) when creating
+     * the spec page.
+     */
+    platform?: Partial<PlatformRuntime>;
 }
 /**
  * A record of `TypesMemberNameData` entities.

package/internal/stencil-public-compiler.d.ts

@@ -1,5 +1,5 @@
 import type { ConfigFlags } from '../cli/config-flags';
-import type { PrerenderUrlResults } from '../internal';
+import type { PrerenderUrlResults, PrintLine } from '../internal';
 import type { JsonDocs } from './stencil-public-docs';
 export * from './stencil-public-docs';
 /**
@@ -151,7 +151,7 @@ export interface StencilConfig {
      * type of CSS properties and values are assigned before and after hydrating. This config
      * can also be used to not include the hydrated flag at all by setting it to `null`.
      */
-    hydratedFlag?: HydratedFlag;
+    hydratedFlag?: HydratedFlag | null;
     /**
      * Ionic prefers to hide all components prior to hydration with a style tag appended
      * to the head of the document containing some `visibility: hidden;` css rules.
@@ -382,7 +382,7 @@ type RequireFields<T, K extends keyof T> = T & {
 /**
  * Fields in {@link Config} to make required for {@link ValidatedConfig}
  */
-type StrictConfigFields = 'flags' | 'logger' | 'outputTargets' | 'rootDir' | 'sys' | 'testing';
+type StrictConfigFields = 'flags' | 'hydratedFlag' | 'logger' | 'outputTargets' | 'packageJsonFilePath' | 'rootDir' | 'sys' | 'testing';
 /**
  * A version of {@link Config} that makes certain fields required. This type represents a valid configuration entity.
  * When a configuration is received by the user, it is a bag of unverified data. In order to make stricter guarantees
@@ -2067,24 +2067,18 @@ export interface LoadConfigResults {
     };
 }
 export interface Diagnostic {
-    level: 'error' | 'warn' | 'info' | 'log' | 'debug';
-    type: string;
+    absFilePath?: string | undefined;
+    code?: string;
+    columnNumber?: number | undefined;
+    debugText?: string;
     header?: string;
     language?: string;
+    level: 'error' | 'warn' | 'info' | 'log' | 'debug';
+    lineNumber?: number | undefined;
+    lines: PrintLine[];
     messageText: string;
-    debugText?: string;
-    code?: string;
-    absFilePath?: string;
-    relFilePath?: string;
-    lineNumber?: number;
-    columnNumber?: number;
-    lines?: {
-        lineIndex: number;
-        lineNumber: number;
-        text?: string;
-        errorCharStart: number;
-        errorLength?: number;
-    }[];
+    relFilePath?: string | undefined;
+    type: string;
 }
 export interface CacheStorage {
     get(key: string): Promise<any>;