angular · thePunderWoman · Oct 17, 2024
diff --git a/goldens/public-api/platform-browser/index.api.md b/goldens/public-api/platform-browser/index.api.md
@@ -248,6 +248,9 @@ export function withHttpTransferCacheOptions(options: HttpTransferCacheOptions):
 // @public
 export function withI18nSupport(): HydrationFeature<HydrationFeatureKind.I18nSupport>;
 
+// @public
+export function withIncrementalHydration(): HydrationFeature<HydrationFeatureKind.IncrementalHydration>;
+
 // @public
 export function withNoHttpTransferCache(): HydrationFeature<HydrationFeatureKind.NoHttpTransferCache>;
 

diff --git a/packages/platform-browser/src/hydration.ts b/packages/platform-browser/src/hydration.ts
@@ -20,6 +20,7 @@ import {
   ɵwithEventReplay,
   ɵwithI18nSupport,
   ɵZONELESS_ENABLED as ZONELESS_ENABLED,
+  ɵwithIncrementalHydration,
 } from '@angular/core';
 
 import {RuntimeErrorCode} from './errors';
@@ -120,6 +121,26 @@ export function withEventReplay(): HydrationFeature<HydrationFeatureKind.EventRe
   return hydrationFeature(HydrationFeatureKind.EventReplay, ɵwithEventReplay());
 }
 
+/**
+ * Enables support for incremental hydration using the `hydrate` trigger syntax.
+ *
+ * @usageNotes
+ *
+ * Basic example of how you can enable event replay in your application when
+ * `bootstrapApplication` function is used:
+ * ```
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideClientHydration(withIncrementalHydration())]
+ * });
+ * ```
+ * @experimental
+ * @publicApi
+ * @see {@link provideClientHydration}
+ */
+export function withIncrementalHydration(): HydrationFeature<HydrationFeatureKind.IncrementalHydration> {
+  return hydrationFeature(HydrationFeatureKind.IncrementalHydration, ɵwithIncrementalHydration());
+}
+
 /**
  * Returns an `ENVIRONMENT_INITIALIZER` token setup with a function
  * that verifies whether compatible ZoneJS was used in an application

diff --git a/packages/platform-browser/src/platform-browser.ts b/packages/platform-browser/src/platform-browser.ts
@@ -44,6 +44,7 @@ export {
   withHttpTransferCacheOptions,
   withI18nSupport,
   withNoHttpTransferCache,
+  withIncrementalHydration,
 } from './hydration';
 
 export * from './private_export';

diff --git a/packages/platform-server/test/hydration_utils.ts b/packages/platform-server/test/hydration_utils.ts
@@ -13,7 +13,6 @@ import {
   Injectable,
   Provider,
   Type,
-  ɵwithIncrementalHydration,
 } from '@angular/core';
 import {Console} from '@angular/core/src/console';
 import {
@@ -277,24 +276,3 @@ export function clearConsole(appRef: ApplicationRef) {
   const console = appRef.injector.get(Console) as DebugConsole;
   console.logs = [];
 }
-
-// The following 2 functions are temporary for landing incremental hydration code
-// before the feature commit that adds the public api. These will be removed
-// in favor of the real API.
-
-// TODO(incremental-hydration): remove this once the public api lands
-/**
- * Helper function to create an object that represents a Hydration feature.
- */
-function hydrationFeature<FeatureKind extends HydrationFeatureKind>(
-  ɵkind: FeatureKind,
-  ɵproviders: Provider[] = [],
-  ɵoptions: unknown = {},
-): HydrationFeature<FeatureKind> {
-  return {ɵkind, ɵproviders};
-}
-
-// TODO(incremental-hydration): remove this once the public api lands
-export function withIncrementalHydration(): HydrationFeature<HydrationFeatureKind.IncrementalHydration> {
-  return hydrationFeature(HydrationFeatureKind.IncrementalHydration, ɵwithIncrementalHydration());
-}
diff --git a/packages/platform-server/test/incremental_hydration_spec.ts b/packages/platform-server/test/incremental_hydration_spec.ts
@@ -19,10 +19,10 @@ import {
 } from '@angular/core';
 
 import {getAppContents, prepareEnvironmentAndHydrate, resetTViewsFor} from './dom_utils';
-import {getComponentRef, ssr, timeout, withIncrementalHydration} from './hydration_utils';
+import {getComponentRef, ssr, timeout} from './hydration_utils';
 import {getDocument} from '@angular/core/src/render3/interfaces/document';
 import {isPlatformServer} from '@angular/common';
-import {withEventReplay} from '@angular/platform-browser';
+import {withEventReplay, withIncrementalHydration} from '@angular/platform-browser';
 
 describe('platform-server partial hydration integration', () => {
   const originalWindow = globalThis.window;