fix(hydrate): respect HydratedFlag configuration in hydrate script

fixes #3606
STENCIL-609

src/compiler/app-core/app-data.ts

@@ -187,6 +187,7 @@ export const updateBuildConditionals = (config: ValidatedConfig, b: BuildConditi
   if (config.hydratedFlag) {
     b.hydratedAttribute = config.hydratedFlag.selector === 'attribute';
     b.hydratedClass = config.hydratedFlag.selector === 'class';
+    b.hydratedSelectorName = config.hydratedFlag.name;
   } else {
     b.hydratedAttribute = false;
     b.hydratedClass = false;

src/compiler/bundle/app-data-plugin.ts

@@ -14,15 +14,15 @@ import { APP_DATA_CONDITIONAL, STENCIL_APP_DATA_ID, STENCIL_APP_GLOBALS_ID } fro
  * @param config the Stencil configuration for a particular project
  * @param compilerCtx the current compiler context
  * @param buildCtx the current build context
- * @param build the set build conditionals for the build
+ * @param buildConditionals the set build conditionals for the build
  * @param platform the platform that is being built
  * @returns a Rollup plugin which carries out the necessary work
  */
 export const appDataPlugin = (
   config: d.ValidatedConfig,
   compilerCtx: d.CompilerCtx,
   buildCtx: d.BuildCtx,
-  build: d.BuildConditionals,
+  buildConditionals: d.BuildConditionals,
   platform: 'client' | 'hydrate' | 'worker',
 ): Plugin => {
   if (!platform) {
@@ -68,7 +68,7 @@ export const appDataPlugin = (
         // build custom app-data based off of component metadata
         const s = new MagicString(``);
         appendNamespace(config, s);
-        appendBuildConditionals(config, build, s);
+        appendBuildConditionals(config, buildConditionals, s);
         appendEnv(config, s);
         return s.toString();
       }
@@ -200,13 +200,13 @@ const appendGlobalScripts = (globalScripts: GlobalScript[], s: MagicString) => {
  * **This function mutates the provided {@link MagicString} argument**
  *
  * @param config the configuration associated with the Stencil project
- * @param build the build conditionals to serialize into a JS object
+ * @param buildConditionals the build conditionals to serialize into a JS object
  * @param s a `MagicString` to append the generated constant onto
  */
-const appendBuildConditionals = (config: d.ValidatedConfig, build: d.BuildConditionals, s: MagicString): void => {
-  const buildData = Object.keys(build)
+const appendBuildConditionals = (config: d.ValidatedConfig, buildConditionals: d.BuildConditionals, s: MagicString): void => {
+  const buildData = Object.keys(buildConditionals)
     .sort()
-    .map((key) => key + ': ' + ((build as any)[key] ? 'true' : 'false'))
+    .map((key) => key + ': ' + JSON.stringify((buildConditionals as any)[key]))
     .join(', ');
 
   s.append(`export const BUILD = /* ${config.fsNamespace} */ { ${buildData} };\n`);

src/compiler/output-targets/dist-hydrate-script/bundle-hydrate-factory.ts

@@ -11,6 +11,10 @@ import { rewriteAliasedSourceFileImportPaths } from '../../transformers/rewrite-
 import { updateStencilCoreImports } from '../../transformers/update-stencil-core-import';
 import { getHydrateBuildConditionals } from './hydrate-build-conditionals';
 
+/**
+ * TODO
+ *
+ */
 export const bundleHydrateFactory = async (
   config: d.ValidatedConfig,
   compilerCtx: d.CompilerCtx,
@@ -21,7 +25,7 @@ export const bundleHydrateFactory = async (
     const bundleOpts: BundleOptions = {
       id: 'hydrate',
       platform: 'hydrate',
-      conditionals: getHydrateBuildConditionals(buildCtx.components),
+      conditionals: getHydrateBuildConditionals(config, buildCtx.components),
       customBeforeTransformers: getCustomBeforeTransformers(config, compilerCtx),
       inlineDynamicImports: true,
       inputs: {

src/compiler/output-targets/dist-hydrate-script/generate-hydrate-app.ts

@@ -14,6 +14,9 @@ import { HYDRATE_FACTORY_INTRO, HYDRATE_FACTORY_OUTRO } from './hydrate-factory-
 import { updateToHydrateComponents } from './update-to-hydrate-components';
 import { writeHydrateOutputs } from './write-hydrate-outputs';
 
+/**
+ *
+ */
 export const generateHydrateApp = async (
   config: d.ValidatedConfig,
   compilerCtx: d.CompilerCtx,

src/compiler/output-targets/dist-hydrate-script/hydrate-build-conditionals.ts

@@ -1,8 +1,15 @@
 import type * as d from '../../../declarations';
-import { getBuildFeatures } from '../../app-core/app-data';
+import { getBuildFeatures, updateBuildConditionals } from '../../app-core/app-data';
 
-export const getHydrateBuildConditionals = (cmps: d.ComponentCompilerMeta[]) => {
+/**
+ * TODO
+ *
+ */
+export const getHydrateBuildConditionals = (config: d.ValidatedConfig, cmps: d.ComponentCompilerMeta[]) => {
   const build = getBuildFeatures(cmps) as d.BuildConditionals;
+  // we need to make sure that things like the hydratedClass and flag are
+  // set for the hydrate build
+  updateBuildConditionals(config, build);
 
   build.slotRelocation = true;
   build.lazyLoad = true;
@@ -32,8 +39,6 @@ export const getHydrateBuildConditionals = (cmps: d.ComponentCompilerMeta[]) =>
   build.cssAnnotations = true;
   // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
   build.shadowDomShim = true;
-  build.hydratedAttribute = false;
-  build.hydratedClass = true;
   // TODO(STENCIL-1305): remove this option
   build.scriptDataOpts = false;
   build.attachStyles = true;

src/declarations/stencil-private.ts

@@ -180,6 +180,7 @@ export interface BuildConditionals extends Partial<BuildFeatures> {
   cloneNodeFix?: boolean;
   hydratedAttribute?: boolean;
   hydratedClass?: boolean;
+  hydratedSelectorName?: string;
   initializeNextTick?: boolean;
   // TODO(STENCIL-1305): remove this option
   scriptDataOpts?: boolean;

src/runtime/update-component.ts

@@ -456,11 +456,14 @@ const emitLifecycleEvent = (elm: EventTarget, lifecycleName: string) => {
   }
 };
 
+/**
+ * TODO
+ */
 const addHydratedFlag = (elm: Element) =>
   BUILD.hydratedClass
-    ? elm.classList.add('hydrated')
+    ? elm.classList.add(BUILD.hydratedSelectorName ?? "hydrated")
     : BUILD.hydratedAttribute
-      ? elm.setAttribute('hydrated', '')
+      ? elm.setAttribute(BUILD.hydratedSelectorName ?? "hydrated", '')
       : undefined;
 
 const serverSideConnected = (elm: any) => {