fix(hydrate): respect HydratedFlag configuration in hydrate script (#…

…5741)

This changes how BUILD conditionals get set for the Hydrate script to
ensure that configuration set by users using `hydratedFlag` is
respected.

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,17 @@ 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)
+export 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/bundle/test/app-data-plugin.spec.ts

@@ -0,0 +1,46 @@
+import * as d from '@stencil/core/declarations';
+import { mockValidatedConfig } from '@stencil/core/testing';
+import MagicString from 'magic-string';
+
+import { appendBuildConditionals } from '../app-data-plugin';
+
+function setup() {
+ const config = mockValidatedConfig();
+ const magicString = new MagicString('');
+ return { config, magicString };
+}
+
+describe('app data plugin', () => {
+ it('should include the fsNamespace in the appended BUILD constant', () => {
+ const { config, magicString } = setup();
+ appendBuildConditionals(config, {}, magicString);
+ expect(magicString.toString().includes(`export const BUILD = /* ${config.fsNamespace} */`)).toBe(true);
+ });
+
+ it.each([true, false])('should include hydratedAttribute when %p', (hydratedAttribute) => {
+ const conditionals: d.BuildConditionals = {
+ hydratedAttribute,
+ };
+ const { config, magicString } = setup();
+ appendBuildConditionals(config, conditionals, magicString);
+ expect(magicString.toString().includes(`hydratedAttribute: ${String(hydratedAttribute)}`)).toBe(true);
+ });
+
+ it.each([true, false])('should include hydratedClass when %p', (hydratedClass) => {
+ const conditionals: d.BuildConditionals = {
+ hydratedClass,
+ };
+ const { config, magicString } = setup();
+ appendBuildConditionals(config, conditionals, magicString);
+ expect(magicString.toString().includes(`hydratedClass: ${String(hydratedClass)}`)).toBe(true);
+ });
+
+ it('should append hydratedSelectorName', () => {
+ const conditionals: d.BuildConditionals = {
+ hydratedSelectorName: 'boop',
+ };
+ const { config, magicString } = setup();
+ appendBuildConditionals(config, conditionals, magicString);
+ expect(magicString.toString().includes('hydratedSelectorName: "boop"')).toBe(true);
+ });
+});

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

@@ -11,6 +11,16 @@ import { rewriteAliasedSourceFileImportPaths } from '../../transformers/rewrite-
 import { updateStencilCoreImports } from '../../transformers/update-stencil-core-import';
 import { getHydrateBuildConditionals } from './hydrate-build-conditionals';
 
+/**
+ * Marshall some Rollup options for the hydrate factory and then pass it to our
+ * {@link bundleOutput} helper
+ *
+ * @param config a validated Stencil configuration
+ * @param compilerCtx the current compiler context
+ * @param buildCtx the current build context
+ * @param appFactoryEntryCode an entry code for the app factory
+ * @returns a promise wrapping a rollup build object
+ */
 export const bundleHydrateFactory = async (
  config: d.ValidatedConfig,
  compilerCtx: d.CompilerCtx,
@@ -21,7 +31,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,14 @@ import { HYDRATE_FACTORY_INTRO, HYDRATE_FACTORY_OUTRO } from './hydrate-factory-
 import { updateToHydrateComponents } from './update-to-hydrate-components';
 import { writeHydrateOutputs } from './write-hydrate-outputs';
 
+/**
+ * Generate and build the hydrate app and then write it to disk
+ *
+ * @param config a validated Stencil configuration
+ * @param compilerCtx the current compiler context
+ * @param buildCtx the current build context
+ * @param outputTargets the output targets for the current build
+ */
 export const generateHydrateApp = async (
  config: d.ValidatedConfig,
  compilerCtx: d.CompilerCtx,

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

@@ -1,8 +1,19 @@
 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[]) => {
+/**
+ * Get the `BUILD` conditionals for the hydrate build based on the current
+ * project
+ *
+ * @param config a validated Stencil configuration
+ * @param cmps component metadata
+ * @returns a populated build conditional object
+ */
+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 +43,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/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', () => {
@@ -69,6 +70,15 @@ describe('build-conditionals', () => {
  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', () => {
@@ -144,5 +154,45 @@ describe('build-conditionals', () => {
  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/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,17 @@ const emitLifecycleEvent = (elm: EventTarget, lifecycleName: string) => {
  }
 };
 
+/**
+ * Set the hydrated flag on a DOM element
+ *
+ * @param elm a reference to a DOM element
+ * @returns undefined
+ */
 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) => {