feat(compiler): remove inlineDynamicImports from custom elements targets (#3897)

* feat(compiler): move inlineDynamicImports option to Rollup output section

This commit updates the Rollup config we generate to have `inlineDynamicImports` defined as a part of the `output` section of the config rather than at the root level. The root-level option has been deprecated in Rollup v3 and will be removed in the future

* feat(compiler): remove inlineDynamicImports from custom-element targets

* docs(): update breaking changes & option JSdoc

* fix(compiler): add fallback for inlineDynamicImports generating bundle opts

* chore(breaking-changes): revert formatting

* fix(): revert removal of field

Author: tanner-reits

BREAKING_CHANGES.md

@@ -26,6 +26,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   * [`dist-custom-elements` Output Target](#dist-custom-elements-output-target)
     * [Add `customElementsExportBehavior` to Control Export Behavior](#add-customelementsexportbehavior-to-control-export-behavior)
     * [Move `autoDefineCustomElements` Configuration](#move-autodefinecustomelements-configuration)
+    * [Remove `inlineDynamicImports` Configuration](#remove-inlinedynamicimports-configuration)
   * [`dist-custom-elements-bundle` Output Target](#dist-custom-elements-bundle-output-target)
 * [Legacy Angular Output Target](#legacy-angular-output-target)
 * [Stencil APIs](#stencil-apis)
@@ -236,6 +237,11 @@ export const config: Config = {
 };
 ```
 
+#### Remove `inlineDynamicImports` Configuration
+
+The `inlineDynamicImports` configuration option on `dist-custom-elements` has been removed. Previously, this option would throw an error at build
+time during the Rollup bundling process if the build contained multiple "inputs" (components).
+
 #### `dist-custom-elements-bundle` Output Target
 The `dist-custom-elements-bundle` has been removed starting with Stencil v3.0.0, following the [RFC process](https://github.com/ionic-team/stencil/issues/3136).
 Users of this output target should migrate to the `dist-custom-elements` output target.

src/compiler/bundle/bundle-interface.ts

@@ -35,6 +35,14 @@ export interface BundleOptions {
    * @see {@link loader-plugin:loaderPlugin}
    */
   loader?: { [id: string]: string };
+  /**
+   * Duplicate of Rollup's `inlineDynamicImports` output option.
+   *
+   * Creates dynamic imports (i.e. `import()` calls) as a part of the same
+   * chunk being bundled. Rather than being created as separate chunks.
+   *
+   * @see {@link https://rollupjs.org/guide/en/#outputinlinedynamicimports}
+   */
   inlineDynamicImports?: boolean;
   inlineWorkers?: boolean;
   /**

src/compiler/bundle/bundle-output.ts

@@ -96,6 +96,9 @@ export const getRollupOptions = (
   const afterPlugins = config.rollupPlugins.after || [];
   const rollupOptions: RollupOptions = {
     input: bundleOpts.inputs,
+    output: {
+      inlineDynamicImports: bundleOpts.inlineDynamicImports ?? false,
+    },
 
     plugins: [
       coreResolvePlugin(config, compilerCtx, bundleOpts.platform, bundleOpts.externalRuntime),
@@ -129,7 +132,6 @@ export const getRollupOptions = (
     ],
 
     treeshake: getTreeshakeOption(config, bundleOpts),
-    inlineDynamicImports: bundleOpts.inlineDynamicImports,
     preserveEntrySignatures: bundleOpts.preserveEntrySignatures ?? 'strict',
 
     onwarn: createOnWarnFn(buildCtx.diagnostics),

src/compiler/output-targets/dist-custom-elements-bundle/index.ts

@@ -64,7 +64,6 @@ const bundleCustomElements = async (
       loader: {
         '\0core': generateEntryPoint(outputTarget, buildCtx),
       },
-      inlineDynamicImports: outputTarget.inlineDynamicImports,
       preserveEntrySignatures: 'allow-extension',
     };
 

src/compiler/output-targets/dist-custom-elements/index.ts

@@ -88,7 +88,6 @@ export const getBundleOptions = (
     index: '\0core',
   },
   loader: {},
-  inlineDynamicImports: outputTarget.inlineDynamicImports,
   preserveEntrySignatures: 'allow-extension',
 });
 

src/compiler/output-targets/test/output-targets-dist-custom-elements.spec.ts

@@ -119,15 +119,6 @@ export * from '${USER_INDEX_ENTRY_ID}';
         expect(options.externalRuntime).toBe(false);
       }
     });
-
-    it.each([true, false, undefined])('should pass through inlineDynamicImports=%p', (inlineDynamicImports) => {
-      const { config, buildCtx, compilerCtx } = setup();
-      const options = getBundleOptions(config, buildCtx, compilerCtx, {
-        type: DIST_CUSTOM_ELEMENTS,
-        inlineDynamicImports,
-      });
-      expect(options.inlineDynamicImports).toBe(inlineDynamicImports);
-    });
   });
 
   describe('bundleCustomElements', () => {

src/declarations/stencil-public-compiler.ts

@@ -2066,7 +2066,6 @@ export interface OutputTargetDistCustomElements extends OutputTargetBaseNext {
    */
   externalRuntime?: boolean;
   copy?: CopyTask[];
-  inlineDynamicImports?: boolean;
   includeGlobalScripts?: boolean;
   minify?: boolean;
   /**
@@ -2086,7 +2085,6 @@ export interface OutputTargetDistCustomElementsBundle extends OutputTargetBaseNe
   empty?: boolean;
   externalRuntime?: boolean;
   copy?: CopyTask[];
-  inlineDynamicImports?: boolean;
   includeGlobalScripts?: boolean;
   minify?: boolean;
 }