feat(config): add enableImportInjection flag (#4156)

this commit introduces a new flag to `config#extras`, `enableImportInjection`.
`enableImportInjection` is meant to be a drop-in replacement for
`experimentalImportInjection`. both flags control the same functionality for
enabling import statements to be generated when using a bundler such as
vite. `enableImportInjection` is introduced in this commit to begin to
phase out the "experimental" wording of `experimentalImportInjection`.
`experimentalImportInjection` will continue to function as it has until stencil v4.0.
at which time, it is intended to remove the flag. however, `enableImportInjection`
is intended to be a drop-in replacement, that can be migrated to at any given time.

Author: sandrooco

src/compiler/config/test/fixtures/stencil.config2.ts

@@ -6,6 +6,6 @@ export const config: Config = {
     dev: true,
   },
   extras: {
-    experimentalImportInjection: true,
+    enableImportInjection: true,
   },
 };

src/compiler/config/test/load-config.spec.ts

@@ -42,7 +42,7 @@ describe('load config', () => {
     // these fields are defined in the config file on disk, and should be present
     expect<ConfigFlags>(actualConfig.flags).toEqual({ dev: true });
     expect(actualConfig.extras).toBeDefined();
-    expect(actualConfig.extras!.experimentalImportInjection).toBe(true);
+    expect(actualConfig.extras!.enableImportInjection).toBe(true);
   });
 
   it('uses the provided config path when no initial config provided', async () => {

src/compiler/output-targets/dist-lazy/generate-lazy-module.ts

@@ -48,7 +48,7 @@ export const generateLazyModules = async (
     })
   );
 
-  if (!!config.extras?.experimentalImportInjection && !isBrowserBuild) {
+  if ((!!config.extras?.experimentalImportInjection || !!config.extras?.enableImportInjection) && !isBrowserBuild) {
     addStaticImports(rollupResults, bundleModules);
   }
 

src/declarations/stencil-public-compiler.ts

@@ -302,9 +302,19 @@ export interface ConfigExtras {
    * loading components when using a bundler such as Vite or Parcel. Setting this flag to `true` will change how Stencil
    * lazily loads components in a way that works with additional bundlers. Setting this flag to `true` will increase
    * the size of the compiled output. Defaults to `false`.
+   * @deprecated This flag has been deprecated in favor of `enableImportInjection`, which provides the same
+   * functionality. `experimentalImportInjection` will be removed in a future major version of Stencil.
    */
   experimentalImportInjection?: boolean;
 
+  /**
+   * Projects that use a Stencil library built using the `dist` output target may have trouble lazily
+   * loading components when using a bundler such as Vite or Parcel. Setting this flag to `true` will change how Stencil
+   * lazily loads components in a way that works with additional bundlers. Setting this flag to `true` will increase
+   * the size of the compiled output. Defaults to `false`.
+   */
+  enableImportInjection?: boolean;
+
   /**
    * Dispatches component lifecycle events. Mainly used for testing. Defaults to `false`.
    */

test/bundler/component-library/stencil.config.ts

@@ -16,6 +16,6 @@ export const config: Config = {
     },
   ],
   extras: {
-    experimentalImportInjection: true,
+    enableImportInjection: true,
   },
 };