feat(config): add experimentalSlotFixes config value (#4652)

This adds a new configuration option inside of the `extras` object called `experimentalSlotFixes`. If this is set to `true` then all slot fix configuration options will be automatically set to `true` as well. Furthermore, when new slot fixes are added in the future they'll be automatically enabled if you have this flag enabled.
ionic-team · Aug 18, 2023 · 392af26 · 392af26
1 parent 0e94772
commit 392af26
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/src/compiler/config/test/validate-config.spec.ts b/src/compiler/config/test/validate-config.spec.ts
@@ -394,6 +394,31 @@ describe('validation', () => {
     expect(config.extras.tagNameTransform).toBe(false);
   });
 
+  it('should set slot config based on `experimentalSlotFixes`', () => {
+    userConfig.extras = {};
+    userConfig.extras.experimentalSlotFixes = true;
+    const { config } = validateConfig(userConfig, bootstrapConfig);
+    expect(config.extras.appendChildSlotFix).toBe(true);
+    expect(config.extras.cloneNodeFix).toBe(true);
+    expect(config.extras.slotChildNodesFix).toBe(true);
+    expect(config.extras.scopedSlotTextContentFix).toBe(true);
+  });
+
+  it('should override slot fix config based on `experimentalSlotFixes`', () => {
+    userConfig.extras = {
+      appendChildSlotFix: false,
+      slotChildNodesFix: false,
+      cloneNodeFix: false,
+      scopedSlotTextContentFix: false,
+    };
+    userConfig.extras.experimentalSlotFixes = true;
+    const { config } = validateConfig(userConfig, bootstrapConfig);
+    expect(config.extras.appendChildSlotFix).toBe(true);
+    expect(config.extras.cloneNodeFix).toBe(true);
+    expect(config.extras.slotChildNodesFix).toBe(true);
+    expect(config.extras.scopedSlotTextContentFix).toBe(true);
+  });
+
   it('should set taskQueue "async" by default', () => {
     const { config } = validateConfig(userConfig, bootstrapConfig);
     expect(config.taskQueue).toBe('async');

diff --git a/src/compiler/config/validate-config.ts b/src/compiler/config/validate-config.ts
@@ -111,6 +111,18 @@ export const validateConfig = (
   validatedConfig.extras.slotChildNodesFix = !!validatedConfig.extras.slotChildNodesFix;
   validatedConfig.extras.initializeNextTick = !!validatedConfig.extras.initializeNextTick;
   validatedConfig.extras.tagNameTransform = !!validatedConfig.extras.tagNameTransform;
+  // TODO(STENCIL-914): remove `experimentalSlotFixes` when it's the default behavior
+  validatedConfig.extras.experimentalSlotFixes = !!validatedConfig.extras.experimentalSlotFixes;
+
+  // if the user has set `extras.experimentalSlotFixes` then we turn on all of
+  // the slot-related fixes automatically.
+  // TODO(STENCIL-914): remove `experimentalSlotFixes` when it's the default behavior
+  if (validatedConfig.extras.experimentalSlotFixes) {
+    validatedConfig.extras.appendChildSlotFix = true;
+    validatedConfig.extras.cloneNodeFix = true;
+    validatedConfig.extras.slotChildNodesFix = true;
+    validatedConfig.extras.scopedSlotTextContentFix = true;
+  }
 
   validatedConfig.buildEs5 =
     validatedConfig.buildEs5 === true || (!validatedConfig.devMode && validatedConfig.buildEs5 === 'prod');

diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts
@@ -368,6 +368,13 @@ export interface ConfigExtras {
    * can be customized at runtime. Defaults to `false`.
    */
   tagNameTransform?: boolean;
+
+  // TODO(STENCIL-914): remove `experimentalSlotFixes` when it's the default behavior
+  /**
+   * Enables all slot-related fixes such as {@link slotChildNodesFix}, and
+   * {@link scopedSlotTextContentFix}.
+   */
+  experimentalSlotFixes?: boolean;
 }
 
 export interface Config extends StencilConfig {