fix(platform-server): remove event dispatch script from HTML when hydration is disabled (angular#55681)

alan-agius4 · AndrewKushnir · commit cf84acf44c1b · 2024-05-06T12:33:09.000-07:00
Prior to this commit, the included event dispatcher remained in the HTML even when hydration was disabled. PR Close angular#55681
diff --git a/packages/platform-server/src/utils.ts b/packages/platform-server/src/utils.ts
@@ -71,6 +71,38 @@ function removeEventDispatchScript(doc: Document) {
   findEventDispatchScript(doc)?.remove();
 }
 
+/**
+ * Annotate nodes for hydration and remove event dispatch script when not needed.
+ */
+function prepareForHydration(platformState: PlatformState, applicationRef: ApplicationRef): void {
+  const environmentInjector = applicationRef.injector;
+  const doc = platformState.getDocument();
+
+  if (!environmentInjector.get(IS_HYDRATION_DOM_REUSE_ENABLED, false)) {
+    // Hydration is diabled, remove inlined event dispatch script.
+    // (which was injected by the build process) from the HTML.
+    removeEventDispatchScript(doc);
+
+    return;
+  }
+
+  appendSsrContentIntegrityMarker(doc);
+
+  const eventTypesToBeReplayed = annotateForHydration(applicationRef, doc);
+  if (eventTypesToBeReplayed) {
+    insertEventRecordScript(
+      environmentInjector.get(APP_ID),
+      doc,
+      eventTypesToBeReplayed,
+      environmentInjector.get(CSP_NONCE, null),
+    );
+  } else {
+    // No events to replay, we should remove inlined event dispatch script
+    // (which was injected by the build process) from the HTML.
+    removeEventDispatchScript(doc);
+  }
+}
+
 /**
  * Creates a marker comment node and append it into the `<body>`.
  * Some CDNs have mechanisms to remove all comment node from HTML.
@@ -124,31 +156,14 @@ function insertEventRecordScript(
 }
 
 async function _render(platformRef: PlatformRef, applicationRef: ApplicationRef): Promise<string> {
-  const environmentInjector = applicationRef.injector;
-
   // Block until application is stable.
   await whenStable(applicationRef);
 
   const platformState = platformRef.injector.get(PlatformState);
-  if (environmentInjector.get(IS_HYDRATION_DOM_REUSE_ENABLED, false)) {
-    const doc = platformState.getDocument();
-    appendSsrContentIntegrityMarker(doc);
-    const eventTypesToBeReplayed = annotateForHydration(applicationRef, doc);
-    if (eventTypesToBeReplayed) {
-      insertEventRecordScript(
-        environmentInjector.get(APP_ID),
-        doc,
-        eventTypesToBeReplayed,
-        environmentInjector.get(CSP_NONCE, null),
-      );
-    } else {
-      // No events to replay, we should remove inlined event dispatch script
-      // (which was injected by the build process) from the HTML.
-      removeEventDispatchScript(doc);
-    }
-  }
+  prepareForHydration(platformState, applicationRef);
 
   // Run any BEFORE_APP_SERIALIZED callbacks just before rendering to string.
+  const environmentInjector = applicationRef.injector;
   const callbacks = environmentInjector.get(BEFORE_APP_SERIALIZED, null);
   if (callbacks) {
     const asyncCallbacks: Promise<void>[] = [];
diff --git a/packages/platform-server/test/event_replay_spec.ts b/packages/platform-server/test/event_replay_spec.ts
@@ -54,19 +54,27 @@ describe('event replay', () => {
      */
     async function ssr(
       component: Type<unknown>,
-      options?: {doc?: string; enableEventReplay?: boolean},
+      options: {doc?: string; enableEventReplay?: boolean; hydrationDisabled?: boolean} = {},
     ): Promise<string> {
-      const enableEventReplay = options?.enableEventReplay ?? true;
-      const defaultHtml = `<html><head></head><body>${EVENT_DISPATCH_SCRIPT}<app></app></body></html>`;
-      const hydrationProviders = enableEventReplay
-        ? provideClientHydration(withEventReplay())
-        : provideClientHydration();
-      const providers = [provideServerRendering(), hydrationProviders];
-
-      const bootstrap = () => bootstrapApplication(component, {providers});
+      const {
+        enableEventReplay = true,
+        hydrationDisabled,
+        doc = `<html><head></head><body>${EVENT_DISPATCH_SCRIPT}<app></app></body></html>`,
+      } = options;
+
+      const hydrationProviders = hydrationDisabled
+        ? []
+        : enableEventReplay
+          ? provideClientHydration(withEventReplay())
+          : provideClientHydration();
+
+      const bootstrap = () =>
+        bootstrapApplication(component, {
+          providers: [provideServerRendering(), hydrationProviders],
+        });
 
       return renderApplication(bootstrap, {
-        document: options?.doc ?? defaultHtml,
+        document: doc,
       });
     }
 
@@ -208,6 +216,24 @@ describe('event replay', () => {
       });
 
       describe('event dispatch script', () => {
+        it('should not be present on a page when hydration is disabled', async () => {
+          @Component({
+            standalone: true,
+            selector: 'app',
+            template: '<input (click)="onClick()" />',
+          })
+          class SimpleComponent {
+            onClick() {}
+          }
+
+          const doc = `<html><head></head><body>${EVENT_DISPATCH_SCRIPT}<app></app></body></html>`;
+          const html = await ssr(SimpleComponent, {doc, hydrationDisabled: true});
+          const ssrContents = getAppContents(html);
+
+          expect(hasJSActionAttrs(ssrContents)).toBeFalse();
+          expect(hasEventDispatchScript(ssrContents)).toBeFalse();
+        });
+
         it('should not be present on a page if there are no events to replay', async () => {
           @Component({
             standalone: true,
