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

…#6111)" (#6144) This reverts commit 375fa8b.
ionic-team · Feb 4, 2025 · 464c1a4 · 464c1a4
1 parent dd51abd
commit 464c1a4
Show file tree

Hide file tree

Showing 3 changed files with 101 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
@@ -3,6 +3,7 @@ import { mockConfig, mockLoadConfigInit } from '@stencil/core/testing';
 import type * as d from '../../../declarations';
 import { validateConfig } from '../../config/validate-config';
 import { getCustomElementsBuildConditionals } from '../dist-custom-elements/custom-elements-build-conditionals';
+import { getHydrateBuildConditionals } from '../dist-hydrate-script/hydrate-build-conditionals';
 import { getLazyBuildConditionals } from '../dist-lazy/lazy-build-conditionals';
 
 describe('build-conditionals', () => {
@@ -15,6 +16,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 +60,37 @@ 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);
+    });
+
+    it('hydratedSelectorName', () => {
+      userConfig.hydratedFlag = {
+        name: 'boooop',
+      };
+      const { config } = validateConfig(userConfig, mockLoadConfigInit());
+      const bc = getCustomElementsBuildConditionals(config, cmps);
+      expect(bc.hydratedSelectorName).toBe('boooop');
+    });
   });
 
   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 +138,61 @@ 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);
+    });
+
+    it('hydratedSelectorName', () => {
+      userConfig.hydratedFlag = {
+        name: 'boooop',
+      };
+      const { config } = validateConfig(userConfig, mockLoadConfigInit());
+      const bc = getLazyBuildConditionals(config, cmps);
+      expect(bc.hydratedSelectorName).toBe('boooop');
+    });
+  });
+
+  describe('getHydrateBuildConditionals', () => {
+    it('hydratedSelectorName', () => {
+      userConfig.hydratedFlag = {
+        name: 'boooop',
+      };
+      const { config } = validateConfig(userConfig, mockLoadConfigInit());
+      const bc = getHydrateBuildConditionals(config, cmps);
+      expect(bc.hydratedSelectorName).toBe('boooop');
+    });
+
+    it('should allow setting to use a class for hydration', () => {
+      userConfig.hydratedFlag = {
+        selector: 'class',
+      };
+      const { config } = validateConfig(userConfig, mockLoadConfigInit());
+      const bc = getHydrateBuildConditionals(config, cmps);
+      expect(bc.hydratedClass).toBe(true);
+      expect(bc.hydratedAttribute).toBe(false);
+    });
+
+    it('should allow setting to use an attr for hydration', () => {
+      userConfig.hydratedFlag = {
+        selector: 'attribute',
+      };
+      const { config } = validateConfig(userConfig, mockLoadConfigInit());
+      const bc = getHydrateBuildConditionals(config, cmps);
+      expect(bc.hydratedClass).toBe(false);
+      expect(bc.hydratedAttribute).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