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

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';

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);
+    });
   });
 });

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