From 89a20d76225b506c09189f5d75ff56ab4e7bebc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A1s=20Kaufmann?= <andraskaufmann@gmail.com>
Date: Wed, 31 Jan 2024 14:47:40 +0100
Subject: [PATCH 1/2] fix(custom-elements): hydrate on client side when hydrate
 app is enabled

---
 .../custom-elements-build-conditionals.ts     |  6 ++-
 .../test/build-conditionals.spec.ts           | 45 +++++++++++++++++++
 2 files changed, 49 insertions(+), 2 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
index 223d94491b8..9f2b8519a27 100644
--- 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
index ce1356c6283..e23ade86c24 100644
--- 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);
+    });
   });
 });

From 2bc0a544267fd83f8de25a9c7a897fd9eacbb83c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A1s=20Kaufmann?= <andraskaufmann@gmail.com>
Date: Wed, 31 Jan 2024 14:48:40 +0100
Subject: [PATCH 2/2] fix(runtime): lazyload only when lazyBundleId is present

---
 src/runtime/initialize-component.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/runtime/initialize-component.ts b/src/runtime/initialize-component.ts
index e80b5e94884..72e7c546a4c 100644
--- 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