From 89c25e91865987f35a0bc0eb164be927086c2c07 Mon Sep 17 00:00:00 2001 From: Tanner Reits <47483144+tanner-reits@users.noreply.github.com> Date: Mon, 19 Sep 2022 13:33:22 -0400 Subject: [PATCH] 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 --- src/cli/telemetry/test/telemetry.spec.ts | 4 ++-- .../add-define-custom-element-function.ts | 2 +- src/declarations/stencil-public-compiler.ts | 15 ++++++++------- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/cli/telemetry/test/telemetry.spec.ts b/src/cli/telemetry/test/telemetry.spec.ts index d9be7dce87f4..c2fd541c1227 100644 --- a/src/cli/telemetry/test/telemetry.spec.ts +++ b/src/cli/telemetry/test/telemetry.spec.ts @@ -262,7 +262,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' }, ], @@ -271,7 +271,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' }, ]); diff --git a/src/compiler/transformers/component-native/add-define-custom-element-function.ts b/src/compiler/transformers/component-native/add-define-custom-element-function.ts index 506b856c1281..bf74ad11ee5e 100644 --- a/src/compiler/transformers/component-native/add-define-custom-element-function.ts +++ b/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 ); diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts index 8cec4de1541f..c7d3d1d19287 100644 --- a/src/declarations/stencil-public-compiler.ts +++ b/src/declarations/stencil-public-compiler.ts @@ -2027,9 +2027,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. @@ -2045,12 +2052,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. */