fix(custom-elements): hydrate on client side (#5317)

* fix(custom-elements): hydrate on client side when hydrate app is enabled * fix(runtime): lazyload only when lazyBundleId is present
ionic-team · Mar 1, 2024 · d809658 · d809658
1 parent 24623d7
commit d809658
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/src/compiler/output-targets/dist-custom-elements/custom-elements-build-conditionals.ts b/src/compiler/output-targets/dist-custom-elements/custom-elements-build-conditionals.ts
@@ -1,6 +1,7 @@
+import { isOutputTargetHydrate } from '@utils';
+
 import type * as d from '../../../declarations';
 import { getBuildFeatures, updateBuildConditionals } from '../../app-core/app-data';
-
 /**
  * Get build conditions appropriate for the `dist-custom-elements` Output
  * Target, including disabling lazy loading and hydration.
@@ -17,9 +18,10 @@ export const getCustomElementsBuildConditionals = (
   // then the default in "import { BUILD, NAMESPACE } from '@stencil/core/internal/app-data'"
   // needs to have the static build conditionals set for the custom elements build
   const build = getBuildFeatures(cmps) as d.BuildConditionals;
+  const hasHydrateOutputTargets = config.outputTargets.some(isOutputTargetHydrate);
 
   build.lazyLoad = false;
-  build.hydrateClientSide = false;
+  build.hydrateClientSide = hasHydrateOutputTargets;
   build.hydrateServerSide = false;
   build.asyncQueue = config.taskQueue === 'congestionAsync';
   build.taskQueue = config.taskQueue !== 'immediate';

diff --git a/src/compiler/output-targets/test/build-conditionals.spec.ts b/src/compiler/output-targets/test/build-conditionals.spec.ts
@@ -15,6 +15,16 @@ describe('build-conditionals', () => {
   });
 
   describe('getCustomElementsBuildConditionals', () => {
+    it('default', () => {
+      const { config } = validateConfig(userConfig, mockLoadConfigInit());
+      const bc = getCustomElementsBuildConditionals(config, cmps);
+      expect(bc).toMatchObject({
+        lazyLoad: false,
+        hydrateClientSide: false,
+        hydrateServerSide: false,
+      });
+    });
+
     it('taskQueue async', () => {
       userConfig.taskQueue = 'async';
       const { config } = validateConfig(userConfig, mockLoadConfigInit());
@@ -49,9 +59,28 @@ describe('build-conditionals', () => {
       expect(bc.taskQueue).toBe(true);
       expect(config.taskQueue).toBe('async');
     });
+
+    it('hydrateClientSide true', () => {
+      const hydrateOutputTarget: d.OutputTargetHydrate = {
+        type: 'dist-hydrate-script',
+      };
+      userConfig.outputTargets = [hydrateOutputTarget];
+      const { config } = validateConfig(userConfig, mockLoadConfigInit());
+      const bc = getCustomElementsBuildConditionals(config, cmps);
+      expect(bc.hydrateClientSide).toBe(true);
+    });
   });
 
   describe('getLazyBuildConditionals', () => {
+    it('default', () => {
+      const { config } = validateConfig(userConfig, mockLoadConfigInit());
+      const bc = getLazyBuildConditionals(config, cmps);
+      expect(bc).toMatchObject({
+        lazyLoad: true,
+        hydrateServerSide: false,
+      });
+    });
+
     it('taskQueue async', () => {
       userConfig.taskQueue = 'async';
       const { config } = validateConfig(userConfig, mockLoadConfigInit());
@@ -99,5 +128,21 @@ describe('build-conditionals', () => {
       const bc = getLazyBuildConditionals(config, cmps);
       expect(bc.transformTagName).toBe(true);
     });
+
+    it('hydrateClientSide default', () => {
+      const { config } = validateConfig(userConfig, mockLoadConfigInit());
+      const bc = getLazyBuildConditionals(config, cmps);
+      expect(bc.hydrateClientSide).toBe(false);
+    });
+
+    it('hydrateClientSide true', () => {
+      const hydrateOutputTarget: d.OutputTargetHydrate = {
+        type: 'dist-hydrate-script',
+      };
+      userConfig.outputTargets = [hydrateOutputTarget];
+      const { config } = validateConfig(userConfig, mockLoadConfigInit());
+      const bc = getLazyBuildConditionals(config, cmps);
+      expect(bc.hydrateClientSide).toBe(true);
+    });
   });
 });
diff --git a/src/runtime/initialize-component.ts b/src/runtime/initialize-component.ts
@@ -32,7 +32,8 @@ export const initializeComponent = async (
     // Let the runtime know that the component has been initialized
     hostRef.$flags$ |= HOST_FLAGS.hasInitializedComponent;
 
-    if (BUILD.lazyLoad || BUILD.hydrateClientSide) {
+    const bundleId = cmpMeta.$lazyBundleId$;
+    if ((BUILD.lazyLoad || BUILD.hydrateClientSide) && bundleId) {
       // lazy loaded components
       // request the component's implementation to be
       // wired up with the host element