Merge branch 'main' into cb/fix-windows-build

CHANGELOG.md

@@ -1,3 +1,26 @@
+# 🐷 [4.21.0](https://github.com/ionic-team/stencil/compare/v4.20.0...v4.21.0) (2024-08-26)
+
+
+### Bug Fixes
+
+* **compiler:** default `asyncLoading` build conditional to `true` ([#5941](https://github.com/ionic-team/stencil/issues/5941)) ([0e261d6](https://github.com/ionic-team/stencil/commit/0e261d653b03fd55a975f4e56e2fae258c3dcd88)), closes [#3580](https://github.com/ionic-team/stencil/issues/3580)
+* **compiler:** prefer `localName` over `originalName` by running an empty check on `originalName` ([#5943](https://github.com/ionic-team/stencil/issues/5943)) ([0f42656](https://github.com/ionic-team/stencil/commit/0f42656f00a84be52e1c2497159c27cbfb0fba2a)), closes [#5882](https://github.com/ionic-team/stencil/issues/5882)
+* **compiler:** verify parent node when validating component members ([#5942](https://github.com/ionic-team/stencil/issues/5942)) ([37a0aaf](https://github.com/ionic-team/stencil/commit/37a0aaf176db2ad620fad18a3ddc1e64764c237c)), closes [#5940](https://github.com/ionic-team/stencil/issues/5940)
+* **runtime:** have fallback for style setting ([#5948](https://github.com/ionic-team/stencil/issues/5948)) ([ae19d7a](https://github.com/ionic-team/stencil/commit/ae19d7ad736ee1ae4989a4d0ed08a607ea208b78))
+* **runtime:** only use setter if existing ([#5947](https://github.com/ionic-team/stencil/issues/5947)) ([7e9fa60](https://github.com/ionic-team/stencil/commit/7e9fa60d7692e630134618f1186386c0cc0b3a29)), closes [#2703](https://github.com/ionic-team/stencil/issues/2703)
+* **runtime:** place scoped component styles after preconnect links but before custom styles ([#5938](https://github.com/ionic-team/stencil/issues/5938)) ([8f92b11](https://github.com/ionic-team/stencil/commit/8f92b11c1940b86b460c2f3a574208b88e1bbecd))
+* **runtime:** provide second arg to `insertBefore` ([#5933](https://github.com/ionic-team/stencil/issues/5933)) ([afcc9a5](https://github.com/ionic-team/stencil/commit/afcc9a5ee7fba408c1be3f9ed594dcddae3fdb7b))
+* **runtime:** render component styles at the end of the head tag ([#5926](https://github.com/ionic-team/stencil/issues/5926)) ([90da726](https://github.com/ionic-team/stencil/commit/90da726789be4d26c35ad86cb1441ad7f440dce6)), closes [#5915](https://github.com/ionic-team/stencil/issues/5915)
+* **runtime:** update call to `prepend` to remove `null` node ([#5946](https://github.com/ionic-team/stencil/issues/5946)) ([970c5d2](https://github.com/ionic-team/stencil/commit/970c5d25fba3b82df262a154980cc0f25fdd315c))
+* **typescript:** fix documentation on 'serializeShadowRoot' flag ([#5927](https://github.com/ionic-team/stencil/issues/5927)) ([277e3e3](https://github.com/ionic-team/stencil/commit/277e3e35730e37b028d2f2ed32960d5f947d7dd4)), closes [#5914](https://github.com/ionic-team/stencil/issues/5914)
+
+
+### Features
+
+* **compiler:** allow ignore pattern for copy task ([#5899](https://github.com/ionic-team/stencil/issues/5899)) ([f89c6a3](https://github.com/ionic-team/stencil/commit/f89c6a356bdcd78fc6427d3cb75776d749196eea)), closes [#5781](https://github.com/ionic-team/stencil/issues/5781)
+
+
+
 ## 🚐 [4.20.0](https://github.com/ionic-team/stencil/compare/v4.19.2...v4.20.0) (2024-08-02)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core",
-  "version": "4.20.0",
+  "version": "4.21.0",
   "license": "MIT",
   "main": "./internal/stencil-core/index.cjs",
   "module": "./internal/stencil-core/index.js",
@@ -190,7 +190,7 @@
     "semver": "^7.3.7",
     "terser": "5.31.1",
     "tsx": "^4.10.3",
-    "typescript": "~5.5.3",
+    "typescript": "~5.5.4",
     "webpack": "^5.75.0",
     "ws": "8.17.1"
   },

src/compiler/output-targets/dist-hydrate-script/generate-hydrate-app.ts

@@ -5,12 +5,17 @@ import { RollupOptions } from 'rollup';
 import { rollup, type RollupBuild } from 'rollup';
 
 import {
+  STENCIL_APP_DATA_ID,
   STENCIL_HYDRATE_FACTORY_ID,
   STENCIL_INTERNAL_HYDRATE_ID,
   STENCIL_MOCK_DOC_ID,
 } from '../../bundle/entry-alias-ids';
 import { bundleHydrateFactory } from './bundle-hydrate-factory';
-import { HYDRATE_FACTORY_INTRO, HYDRATE_FACTORY_OUTRO } from './hydrate-factory-closure';
+import {
+  HYDRATE_FACTORY_INTRO,
+  HYDRATE_FACTORY_OUTRO,
+  MODE_RESOLUTION_CHAIN_DECLARATION,
+} from './hydrate-factory-closure';
 import { updateToHydrateComponents } from './update-to-hydrate-components';
 import { writeHydrateOutputs } from './write-hydrate-outputs';
 
@@ -50,6 +55,7 @@ export const generateHydrateApp = async (
     const packageDir = join(config.sys.getCompilerExecutingPath(), '..', '..');
     const input = join(packageDir, 'internal', 'hydrate', 'runner.js');
     const mockDoc = join(packageDir, 'mock-doc', 'index.js');
+    const appData = join(packageDir, 'internal', 'app-data', 'index.js');
 
     const rollupOptions: RollupOptions = {
       ...config.rollupConfig.inputOptions,
@@ -67,6 +73,9 @@ export const generateHydrateApp = async (
             if (id === STENCIL_MOCK_DOC_ID) {
               return mockDoc;
             }
+            if (id === STENCIL_APP_DATA_ID) {
+              return appData;
+            }
             return null;
           },
           load(id) {
@@ -75,6 +84,14 @@ export const generateHydrateApp = async (
             }
             return null;
           },
+          transform(code) {
+            /**
+             * Remove the modeResolutionChain variable from the generated code.
+             * This variable is redefined in `HYDRATE_FACTORY_INTRO` to ensure we can
+             * use it within the hydrate and global runtime.
+             */
+            return code.replace(`var ${MODE_RESOLUTION_CHAIN_DECLARATION}`, '');
+          },
         },
       ],
       treeshake: false,

src/compiler/output-targets/dist-hydrate-script/hydrate-factory-closure.ts

@@ -1,6 +1,17 @@
 export const HYDRATE_APP_CLOSURE_START = `/*hydrateAppClosure start*/`;
 
+export const MODE_RESOLUTION_CHAIN_DECLARATION = `modeResolutionChain = [];`;
+
+/**
+ * This is the entry point for the hydrate factory.
+ *
+ * __Note:__ the `modeResolutionChain` will be uncommented in the
+ * `src/compiler/output-targets/dist-hydrate-script/write-hydrate-outputs.ts` file. This enables us to use
+ * one module resolution chain across hydrate and core runtime.
+ */
 export const HYDRATE_FACTORY_INTRO = `
+// const ${MODE_RESOLUTION_CHAIN_DECLARATION}
+
 export function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResults, $stencilAfterHydrate, $stencilHydrateResolve) {
   var globalThis = $stencilWindow;
   var self = $stencilWindow;

src/compiler/output-targets/dist-hydrate-script/write-hydrate-outputs.ts

@@ -3,6 +3,7 @@ import { basename } from 'path';
 import type { RollupOutput } from 'rollup';
 
 import type * as d from '../../../declarations';
+import { MODE_RESOLUTION_CHAIN_DECLARATION } from './hydrate-factory-closure';
 import { relocateHydrateContextConst } from './relocate-hydrate-context';
 
 export const writeHydrateOutputs = (
@@ -58,6 +59,15 @@ const writeHydrateOutput = async (
     rollupOutput.output.map(async (output) => {
       if (output.type === 'chunk') {
         output.code = relocateHydrateContextConst(config, compilerCtx, output.code);
+
+        /**
+         * Enable the line where we define `modeResolutionChain` for the hydrate module.
+         */
+        output.code = output.code.replace(
+          `// const ${MODE_RESOLUTION_CHAIN_DECLARATION}`,
+          `const ${MODE_RESOLUTION_CHAIN_DECLARATION}`,
+        );
+
         const filePath = join(hydrateAppDirPath, output.fileName);
         await compilerCtx.fs.writeFile(filePath, output.code, { immediateWrite: true });
       }

src/compiler/output-targets/output-custom.ts

@@ -4,6 +4,10 @@ import type * as d from '../../declarations';
 import { generateDocData } from '../docs/generate-doc-data';
 
 export const outputCustom = async (config: d.ValidatedConfig, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx) => {
+  if (config._isTesting) {
+    return;
+  }
+
   const task = config.watch ? 'always' : 'onBuildOnly';
   const customOutputTargets = config.outputTargets
     .filter(isOutputTargetCustom)

src/declarations/stencil-public-compiler.ts

@@ -2,6 +2,7 @@ import type { ConfigFlags } from '../cli/config-flags';
 import type { PrerenderUrlResults, PrintLine } from '../internal';
 import type { BuildCtx, CompilerCtx } from './stencil-private';
 import type { JsonDocs } from './stencil-public-docs';
+import type { ResolutionHandler } from './stencil-public-runtime';
 
 export * from './stencil-public-docs';
 
@@ -955,6 +956,11 @@ export interface SerializeDocumentOptions extends HydrateDocumentOptions {
    * @default true
    */
   fullDocument?: boolean;
+  /**
+   * Style modes to render the component in.
+   * @see https://stenciljs.com/docs/styling#style-modes
+   */
+  modes?: ResolutionHandler[];
 }
 
 export interface HydrateFactoryOptions extends SerializeDocumentOptions {

src/declarations/stencil-public-runtime.ts

@@ -1737,6 +1737,10 @@ export namespace JSXBase {
     onSubmitCapture?: (event: Event) => void;
     onInvalid?: (event: Event) => void;
     onInvalidCapture?: (event: Event) => void;
+    onBeforeToggle?: (event: Event) => void;
+    onBeforeToggleCapture?: (event: Event) => void;
+    onToggle?: (event: Event) => void;
+    onToggleCapture?: (event: Event) => void;
 
     // Image Events
     onLoad?: (event: Event) => void;

src/hydrate/runner/render.ts

@@ -1,6 +1,7 @@
 import { Readable } from 'node:stream';
 
 import { hydrateFactory } from '@hydrate-factory';
+import { modeResolutionChain, setMode } from '@platform';
 import { MockWindow, serializeNodeToHtml } from '@stencil/core/mock-doc';
 import { hasError } from '@utils';
 
@@ -133,7 +134,17 @@ async function render(win: MockWindow, opts: HydrateFactoryOptions, results: Hyd
   const beforeHydrateFn = typeof opts.beforeHydrate === 'function' ? opts.beforeHydrate : NOOP;
   try {
     await Promise.resolve(beforeHydrateFn(win.document));
-    return new Promise<HydrateResults>((resolve) => hydrateFactory(win, opts, results, afterHydrate, resolve));
+    return new Promise<HydrateResults>((resolve) => {
+      if (Array.isArray(opts.modes)) {
+        /**
+         * Reset the mode resolution chain as we expect every `renderToString` call to render
+         * the components in new environment/document.
+         */
+        modeResolutionChain.length = 0;
+        opts.modes.forEach((mode) => setMode(mode));
+      }
+      return hydrateFactory(win, opts, results, afterHydrate, resolve);
+    });
   } catch (e) {
     renderCatchError(results, e);
     return finalizeHydrate(win, win.document, opts, results);

test/end-to-end/src/declarative-shadow-dom/test.e2e.ts

@@ -290,4 +290,33 @@ describe('renderToString', () => {
     });
     expect(html).toBe('<cmp-with-slot custom-hydrate-flag="" s-id="1"><!--r.1-->Hello World</cmp-with-slot>');
   });
+
+  describe('modes in declarative shadow dom', () => {
+    it('renders components in ios mode', async () => {
+      const { html } = await renderToString('<prop-cmp first="Max" last="Mustermann"></prop-cmp>', {
+        fullDocument: false,
+        prettyHtml: true,
+        modes: [() => 'ios'],
+      });
+      expect(html).toContain('<style>');
+      expect(html).toContain(';color:white;');
+      const page = await newE2EPage({ html, url: 'https://stencil.com' });
+      const div = await page.find('>>>div');
+      const { color } = await div.getComputedStyle();
+      expect(color).toBe('rgb(255, 255, 255)');
+    });
+
+    it('renders components in md mode', async () => {
+      const { html } = await renderToString('<prop-cmp first="Max" last="Mustermann"></prop-cmp>', {
+        fullDocument: false,
+        prettyHtml: true,
+        modes: [() => 'md'],
+      });
+      expect(html).toContain(';color:black;');
+      const page = await newE2EPage({ html, url: 'https://stencil.com' });
+      const div = await page.find('>>>div');
+      const { color } = await div.getComputedStyle();
+      expect(color).toBe('rgb(0, 0, 0)');
+    });
+  });
 });

test/end-to-end/src/prop-cmp/prop-cmp.md.css

@@ -12,7 +12,7 @@
   font-size: 24px;
   font-weight: bold;
   background: #047aff;
-  color: white;
+  color: black;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 

test/end-to-end/src/prop-cmp/prop-cmp.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, h, Host } from '@stencil/core';
+import { Component, h, Host, Prop } from '@stencil/core';
 import { saveAs } from 'file-saver';
 
 /**