feat(compiler): moves autoDefineCustomElements to an export behavior (#3615)

This commit moves `autoDefineCustomElements` from a config flag to a `customElementsExportBehavior` option on the `dist-custom-elements` output target. This prevents treeshaking issues that were possible when barrel exporting and this option were both enabled.

This is some initial work before we move into STENCIL-457

Author: tanner-reits

src/cli/telemetry/test/telemetry.spec.ts

@@ -286,7 +286,7 @@ describe('anonymizeConfigForTelemetry', () => {
       outputTargets: [
         { type: WWW, baseUrl: 'https://example.com' },
         { type: DIST_HYDRATE_SCRIPT, external: ['beep', 'boop'], dir: 'shoud/go/away' },
-        { type: DIST_CUSTOM_ELEMENTS, autoDefineCustomElements: false },
+        { type: DIST_CUSTOM_ELEMENTS },
         { type: DIST_CUSTOM_ELEMENTS, generateTypeDeclarations: true },
         { type: DIST, typesDir: 'my-types' },
       ],
@@ -295,7 +295,7 @@ describe('anonymizeConfigForTelemetry', () => {
     expect(anonymizedConfig.outputTargets).toEqual([
       { type: WWW, baseUrl: 'omitted' },
       { type: DIST_HYDRATE_SCRIPT, external: ['beep', 'boop'], dir: 'omitted' },
-      { type: DIST_CUSTOM_ELEMENTS, autoDefineCustomElements: false },
+      { type: DIST_CUSTOM_ELEMENTS },
       { type: DIST_CUSTOM_ELEMENTS, generateTypeDeclarations: true },
       { type: DIST, typesDir: 'omitted' },
     ]);

src/compiler/transformers/component-native/add-define-custom-element-function.ts

@@ -42,7 +42,7 @@ export const addDefineCustomElementFunctions = (
         setupComponentDependencies(moduleFile, components, newStatements, caseStatements, tagNames);
         addDefineCustomElementFunction(tagNames, newStatements, caseStatements);
 
-        if (outputTarget.autoDefineCustomElements) {
+        if (outputTarget.customElementsExportBehavior === 'auto-define-custom-elements') {
           const conditionalDefineCustomElementCall = createAutoDefinitionExpression(
             principalComponent.componentClassName
           );

src/declarations/stencil-public-compiler.ts

@@ -2032,9 +2032,16 @@ export interface OutputTargetBaseNext {
  * output target configuration for `customElementsExportBehavior`.
  *
  * - `default`: No additional export or definition behavior will happen.
+ * - `auto-define-custom-elements`: Enables the auto-definition of a component and its children (recursively) in the custom elements registry. This
+ * functionality allows consumers to bypass the explicit call to define a component, its children, its children's
+ * children, etc. Users of this flag should be aware that enabling this functionality may increase bundle size.
  * - `single-export-module`: All components will be re-exported from the specified directory's root `index.js` file.
  */
-export const CustomElementsExportBehaviorOptions = ['default', 'single-export-module'] as const;
+export const CustomElementsExportBehaviorOptions = [
+  'default',
+  'auto-define-custom-elements',
+  'single-export-module',
+] as const;
 
 /**
  * This type is auto-generated based on the values in `CustomElementsExportBehaviorOptions` array.
@@ -2056,12 +2063,6 @@ export interface OutputTargetDistCustomElements extends OutputTargetBaseNext {
   inlineDynamicImports?: boolean;
   includeGlobalScripts?: boolean;
   minify?: boolean;
-  /**
-   * Enables the auto-definition of a component and its children (recursively) in the custom elements registry. This
-   * functionality allows consumers to bypass the explicit call to define a component, its children, its children's
-   * children, etc. Users of this flag should be aware that enabling this functionality may increase bundle size.
-   */
-  autoDefineCustomElements?: boolean;
   /**
    * Enables the generation of type definition files for the output target.
    */