From c05fafe84b81ace7dc20cb5446b396b70da897d0 Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Thu, 15 Sep 2022 16:09:48 -0400 Subject: [PATCH 1/3] feat(compiler): moves `autoDefineCustomElements` to an export behavior 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. --- 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 0d2c97ea3fc..7060c73c8c7 100644 --- a/src/cli/telemetry/test/telemetry.spec.ts +++ b/src/cli/telemetry/test/telemetry.spec.ts @@ -261,7 +261,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' }, ], @@ -270,7 +270,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 1cab0fe88ab..482c070af55 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 @@ -41,7 +41,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 bc10975dff1..95fde53dc51 100644 --- a/src/declarations/stencil-public-compiler.ts +++ b/src/declarations/stencil-public-compiler.ts @@ -2028,8 +2028,15 @@ export interface OutputTargetBaseNext { * * - `default`: No additional export or definition behavior will happen. * - `single-export-module`: All components will be re-exported from the specified directory's root `index.js` file. + * - `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. */ -export const CustomElementsExportBehaviorOptions = ['default', 'single-export-module'] as const; +export const CustomElementsExportBehaviorOptions = [ + 'default', + 'single-export-module', + 'auto-define-custom-elements', +] 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. */ From f8800485b65c5d05d954d9f6be3e1df9962de574 Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Mon, 19 Sep 2022 09:36:00 -0400 Subject: [PATCH 2/3] misc(): order export options --- src/declarations/stencil-public-compiler.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts index 95fde53dc51..eb7fa1f0b7b 100644 --- a/src/declarations/stencil-public-compiler.ts +++ b/src/declarations/stencil-public-compiler.ts @@ -2026,16 +2026,16 @@ export interface OutputTargetBaseNext { * Adding a value to this const array will automatically add it as a valid option on the * output target configuration for `customElementsExportBehavior`. * - * - `default`: No additional export or definition behavior will happen. - * - `single-export-module`: All components will be re-exported from the specified directory's root `index.js` file. * - `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. + * - `default`: No additional export or definition behavior will happen. + * - `single-export-module`: All components will be re-exported from the specified directory's root `index.js` file. */ export const CustomElementsExportBehaviorOptions = [ + 'auto-define-custom-elements', 'default', 'single-export-module', - 'auto-define-custom-elements', ] as const; /** From 2cce1eadfbb3545404398632bb7d1ea2357fcf24 Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Mon, 19 Sep 2022 09:40:31 -0400 Subject: [PATCH 3/3] misc(): order export options --- src/declarations/stencil-public-compiler.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts index eb7fa1f0b7b..75c6bce6162 100644 --- a/src/declarations/stencil-public-compiler.ts +++ b/src/declarations/stencil-public-compiler.ts @@ -2026,15 +2026,15 @@ export interface OutputTargetBaseNext { * Adding a value to this const array will automatically add it as a valid option on the * 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. - * - `default`: No additional export or definition behavior will happen. * - `single-export-module`: All components will be re-exported from the specified directory's root `index.js` file. */ export const CustomElementsExportBehaviorOptions = [ - 'auto-define-custom-elements', 'default', + 'auto-define-custom-elements', 'single-export-module', ] as const;