@analogjs/astro-angular 2.5.0-beta.4 → 2.5.0-beta.6

package/README.md

@@ -191,6 +191,26 @@ export default defineConfig({
 });
 ```
 
+### Angular Client Hydration (Experimental)
+
+By default, `@analogjs/astro-angular` performs hydration by bootstrapping the component on the client, replacing the DOM that was rendered on the server.
+
+To opt-in to Angular's client hydration, enable the `experimental.useAngularHydration` option in the integration config. This will switch the hydration strategy to use [provideClientHydration](https://angular.dev/api/platform-browser/provideClientHydration).
+
+```js
+import { defineConfig } from 'astro/config';
+
+import angular from '@analogjs/astro-angular';
+
+export default defineConfig({
+  integrations: [angular({ useAngularHydration: true })],
+});
+```
+
+#### Skip Hydration
+
+Use the `ngSkipHydration` attribute on any components which do not work properly with hydration enabled. Read more [here](https://angular.dev/guide/hydration#how-to-skip-hydration-for-particular-components).
+
 ## Defining A Component
 
 The Astro Angular integration **only** supports rendering standalone components:
@@ -323,6 +343,43 @@ export class TodosComponent implements OnInit {
 }
 ```
 
+### Client Hydration Features (Experimental)
+
+First, make sure the experimental Angular client hydration option is enabled in the integration config. Read more [here](#angular-client-hydration-experimental).
+
+To add Angular hydration features, add a static property to the component class named `hydrationFeatures`. This should be a function that returns an array of hydration features to enable.
+
+The example below adds the [event replay](https://angular.dev/guide/hydration#how-event-replay-works) feature to the component.
+
+```ts
+import { Component, input, signal } from '@angular/core';
+import { withEventReplay } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-hello',
+  template: `
+    <p>Hello from Angular!!</p>
+
+    @if (show()) {
+      <p>{{ helpText() }}</p>
+    }
+
+    <button (click)="toggle()">Toggle</button>
+  `,
+})
+export class HelloComponent {
+  static hydrationFeatures = () => [withEventReplay()];
+
+  helpText = input('help');
+
+  show = signal(false);
+
+  toggle() {
+    this.show.update((show) => !show);
+  }
+}
+```
+
 ## Using Components in MDX pages
 
 To use components with MDX pages, you must install and configure MDX support by following the Astro integration of [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/). Your `astro.config.mjs` should now include the `@astrojs/mdx` integration.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/astro-angular",
-  "version": "2.5.0-beta.4",
+  "version": "2.5.0-beta.6",
   "description": "Use Angular components within Astro",
   "type": "module",
   "author": "Brandon Roberts <robertsbt@gmail.com>",
@@ -8,7 +8,9 @@
     ".": "./src/index.js",
     "./utils": "./src/utils.js",
     "./client.js": "./src/client.js",
+    "./client-ngh.js": "./src/client-ngh.js",
     "./server.js": "./src/server.js",
+    "./server-ngh.js": "./src/server-ngh.js",
     "./package.json": "./package.json"
   },
   "keywords": [
@@ -32,7 +34,7 @@
     "url": "https://github.com/sponsors/brandonroberts"
   },
   "dependencies": {
-    "@analogjs/vite-plugin-angular": "^2.5.0-beta.4",
+    "@analogjs/vite-plugin-angular": "^2.5.0-beta.6",
     "rehype": "^13.0.2"
   },
   "peerDependencies": {

package/src/client-ngh.d.ts

@@ -0,0 +1,8 @@
+import { type EnvironmentProviders, type Provider, Type } from '@angular/core';
+import { type HydrationFeature, type HydrationFeatureKind } from '@angular/platform-browser';
+declare const _default: (element: HTMLElement) => (Component: Type<unknown> & {
+    clientProviders?: (Provider | EnvironmentProviders)[];
+    hydrationFeatures?: () => HydrationFeature<HydrationFeatureKind>[];
+}, props?: Record<string, unknown>) => void;
+export default _default;
+//# sourceMappingURL=client-ngh.d.ts.map

package/src/client-ngh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-ngh.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/client-ngh.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,QAAQ,EAGb,IAAI,EAIL,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EAE1B,MAAM,2BAA2B,CAAC;yBAQnB,SAAS,WAAW,MAEhC,WAAW,IAAI,CAAC,OAAO,CAAC,GAAG;IACzB,eAAe,CAAC,EAAE,CAAC,QAAQ,GAAG,oBAAoB,CAAC,EAAE,CAAC;IACtD,iBAAiB,CAAC,EAAE,MAAM,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,CAAC;CACpE,EACD,QAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;AANnC,wBA6DE"}

package/src/client-ngh.js

@@ -0,0 +1,53 @@
+import { reflectComponentType, provideZonelessChangeDetection, APP_ID, createComponent, APP_BOOTSTRAP_LISTENER, } from '@angular/core';
+import { createApplication, provideClientHydration, } from '@angular/platform-browser';
+import { createComponentBindings, getComponentElementTag, } from "./create-component.js";
+import { ID_PROP_NAME } from "./id.js";
+import { ensureSsrIntegrityMarker } from "./ssr-integrity.js";
+export default (element) => {
+    return (Component, props) => {
+        const mirror = reflectComponentType(Component);
+        if (!mirror) {
+            // Not an Angular component
+            return;
+        }
+        ensureSsrIntegrityMarker();
+        let hostElement = element.querySelector(mirror.selector);
+        let reuseDom = true;
+        if (!hostElement) {
+            // This is a client-only component
+            hostElement = document.createElement(getComponentElementTag(mirror));
+            element.appendChild(hostElement);
+            reuseDom = false;
+        }
+        const ngAppId = hostElement?.getAttribute(ID_PROP_NAME);
+        createApplication({
+            providers: [
+                provideZonelessChangeDetection(),
+                reuseDom
+                    ? provideClientHydration(...(Component.hydrationFeatures?.() || []))
+                    : [],
+                {
+                    provide: APP_ID,
+                    useValue: ngAppId || 'ng',
+                },
+                ...(Component.clientProviders || []),
+            ],
+        })
+            .then((appRef) => {
+            const componentRef = createComponent(Component, {
+                environmentInjector: appRef.injector,
+                hostElement,
+                bindings: createComponentBindings(mirror, props, hostElement),
+            });
+            appRef.attachView(componentRef.hostView);
+            appRef.components.push(componentRef);
+            appRef.injector
+                .get(APP_BOOTSTRAP_LISTENER, [])
+                .forEach((cb) => cb(componentRef));
+        })
+            .catch((error) => {
+            console.error('Failed to hydrate Angular component:', error);
+        });
+    };
+};
+//# sourceMappingURL=client-ngh.js.map

package/src/client-ngh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-ngh.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/client-ngh.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,oBAAoB,EACpB,8BAA8B,EAE9B,MAAM,EACN,eAAe,EACf,sBAAsB,GACvB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,EAGjB,sBAAsB,GACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,eAAe,CAAC,OAAoB,EAAE,EAAE;IACtC,OAAO,CACL,SAGC,EACD,KAA+B,EAC/B,EAAE;QACF,MAAM,MAAM,GAAG,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAE/C,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,2BAA2B;YAC3B,OAAO;QACT,CAAC;QAED,wBAAwB,EAAE,CAAC;QAE3B,IAAI,WAAW,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACzD,IAAI,QAAQ,GAAG,IAAI,CAAC;QAEpB,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,kCAAkC;YAClC,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC,CAAC;YACrE,OAAO,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;YACjC,QAAQ,GAAG,KAAK,CAAC;QACnB,CAAC;QAED,MAAM,OAAO,GAAG,WAAW,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;QAExD,iBAAiB,CAAC;YAChB,SAAS,EAAE;gBACT,8BAA8B,EAAE;gBAChC,QAAQ;oBACN,CAAC,CAAC,sBAAsB,CAAC,GAAG,CAAC,SAAS,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;oBACpE,CAAC,CAAC,EAAE;gBACN;oBACE,OAAO,EAAE,MAAM;oBACf,QAAQ,EAAE,OAAO,IAAI,IAAI;iBAC1B;gBACD,GAAG,CAAC,SAAS,CAAC,eAAe,IAAI,EAAE,CAAC;aACrC;SACF,CAAC;aACC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YACf,MAAM,YAAY,GAAG,eAAe,CAAC,SAAS,EAAE;gBAC9C,mBAAmB,EAAE,MAAM,CAAC,QAAQ;gBACpC,WAAW;gBACX,QAAQ,EAAE,uBAAuB,CAAC,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC;aAC9D,CAAC,CAAC;YAEH,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YAEzC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAErC,MAAM,CAAC,QAAQ;iBACZ,GAAG,CAAC,sBAAsB,EAAE,EAAE,CAAC;iBAC/B,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;QACvC,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACf,OAAO,CAAC,KAAK,CAAC,sCAAsC,EAAE,KAAK,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  type EnvironmentProviders,\n  type Provider,\n  reflectComponentType,\n  provideZonelessChangeDetection,\n  Type,\n  APP_ID,\n  createComponent,\n  APP_BOOTSTRAP_LISTENER,\n} from '@angular/core';\nimport {\n  createApplication,\n  type HydrationFeature,\n  type HydrationFeatureKind,\n  provideClientHydration,\n} from '@angular/platform-browser';\nimport {\n  createComponentBindings,\n  getComponentElementTag,\n} from './create-component.ts';\nimport { ID_PROP_NAME } from './id.ts';\nimport { ensureSsrIntegrityMarker } from './ssr-integrity.ts';\n\nexport default (element: HTMLElement) => {\n  return (\n    Component: Type<unknown> & {\n      clientProviders?: (Provider | EnvironmentProviders)[];\n      hydrationFeatures?: () => HydrationFeature<HydrationFeatureKind>[];\n    },\n    props?: Record<string, unknown>,\n  ) => {\n    const mirror = reflectComponentType(Component);\n\n    if (!mirror) {\n      // Not an Angular component\n      return;\n    }\n\n    ensureSsrIntegrityMarker();\n\n    let hostElement = element.querySelector(mirror.selector);\n    let reuseDom = true;\n\n    if (!hostElement) {\n      // This is a client-only component\n      hostElement = document.createElement(getComponentElementTag(mirror));\n      element.appendChild(hostElement);\n      reuseDom = false;\n    }\n\n    const ngAppId = hostElement?.getAttribute(ID_PROP_NAME);\n\n    createApplication({\n      providers: [\n        provideZonelessChangeDetection(),\n        reuseDom\n          ? provideClientHydration(...(Component.hydrationFeatures?.() || []))\n          : [],\n        {\n          provide: APP_ID,\n          useValue: ngAppId || 'ng',\n        },\n        ...(Component.clientProviders || []),\n      ],\n    })\n      .then((appRef) => {\n        const componentRef = createComponent(Component, {\n          environmentInjector: appRef.injector,\n          hostElement,\n          bindings: createComponentBindings(mirror, props, hostElement),\n        });\n\n        appRef.attachView(componentRef.hostView);\n\n        appRef.components.push(componentRef);\n\n        appRef.injector\n          .get(APP_BOOTSTRAP_LISTENER, [])\n          .forEach((cb) => cb(componentRef));\n      })\n      .catch((error) => {\n        console.error('Failed to hydrate Angular component:', error);\n      });\n  };\n};\n"]}

package/src/context.d.ts

@@ -0,0 +1,12 @@
+import type { SSRResult } from 'astro';
+export type RendererContext = {
+    result: SSRResult;
+};
+type Context = {
+    c: number;
+    getId(): string;
+};
+export declare function getContext(result: SSRResult): Context;
+export declare function incrementId(ctx: Context): string;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/src/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,IAAI,MAAM,CAAC;CACjB,CAAC;AAIF,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,GAAG,OAAO,CAarD;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAIhD"}

package/src/context.js

@@ -0,0 +1,21 @@
+const contexts = new WeakMap();
+export function getContext(result) {
+    let ctx = contexts.get(result);
+    if (ctx) {
+        return ctx;
+    }
+    ctx = {
+        c: 0,
+        getId() {
+            return 'analog-' + this.c.toString();
+        },
+    };
+    contexts.set(result, ctx);
+    return ctx;
+}
+export function incrementId(ctx) {
+    const id = ctx.getId();
+    ctx.c++;
+    return id;
+}
+//# sourceMappingURL=context.js.map

package/src/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/context.ts"],"names":[],"mappings":"AAWA,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAsB,CAAC;AAEnD,MAAM,UAAU,UAAU,CAAC,MAAiB;IAC1C,IAAI,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,IAAI,GAAG,EAAE,CAAC;QACR,OAAO,GAAG,CAAC;IACb,CAAC;IACD,GAAG,GAAG;QACJ,CAAC,EAAE,CAAC;QACJ,KAAK;YACH,OAAO,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;QACvC,CAAC;KACF,CAAC;IACF,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,GAAY;IACtC,MAAM,EAAE,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC;IACvB,GAAG,CAAC,CAAC,EAAE,CAAC;IACR,OAAO,EAAE,CAAC;AACZ,CAAC","sourcesContent":["import type { SSRResult } from 'astro';\n\nexport type RendererContext = {\n  result: SSRResult;\n};\n\ntype Context = {\n  c: number;\n  getId(): string;\n};\n\nconst contexts = new WeakMap<SSRResult, Context>();\n\nexport function getContext(result: SSRResult): Context {\n  let ctx = contexts.get(result);\n  if (ctx) {\n    return ctx;\n  }\n  ctx = {\n    c: 0,\n    getId() {\n      return 'analog-' + this.c.toString();\n    },\n  };\n  contexts.set(result, ctx);\n  return ctx;\n}\n\nexport function incrementId(ctx: Context): string {\n  const id = ctx.getId();\n  ctx.c++;\n  return id;\n}\n"]}

package/src/create-component.d.ts

@@ -0,0 +1,6 @@
+import { type Binding, type ComponentMirror } from '@angular/core';
+export declare function getComponentElementTag(mirror: ComponentMirror<unknown>): string;
+export declare function createInputBindings(mirror: ComponentMirror<unknown>, props?: Record<string, unknown>): Binding[];
+export declare function createOutputBindings(hostElement: Element, mirror: ComponentMirror<unknown>): Binding[];
+export declare function createComponentBindings(mirror: ComponentMirror<unknown>, props?: Record<string, unknown>, hostElement?: Element): Binding[];
+//# sourceMappingURL=create-component.d.ts.map

package/src/create-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-component.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/create-component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,eAAe,EAGrB,MAAM,eAAe,CAAC;AAGvB,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,GAC/B,MAAM,CAER;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,EAChC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC9B,OAAO,EAAE,CAYX;AAED,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,OAAO,EACpB,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,GAC/B,OAAO,EAAE,CAcX;AAED,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,EAChC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,WAAW,CAAC,EAAE,OAAO,GACpB,OAAO,EAAE,CAUX"}

package/src/create-component.js

@@ -0,0 +1,35 @@
+import { inputBinding, outputBinding, } from '@angular/core';
+import { ID_PROP_NAME } from "./id.js";
+export function getComponentElementTag(mirror) {
+    return mirror.selector.split(',')[0] || 'ng-component';
+}
+export function createInputBindings(mirror, props) {
+    if (!props) {
+        return [];
+    }
+    const inputBindings = Object.entries(props)
+        .filter(([key]) => mirror.inputs.some(({ templateName }) => templateName === key))
+        .map(([key, value]) => inputBinding(key, () => value));
+    return inputBindings;
+}
+export function createOutputBindings(hostElement, mirror) {
+    const outputBindings = mirror.outputs.map(({ templateName }) => outputBinding(templateName, (detail) => {
+        const event = new CustomEvent(templateName, {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail,
+        });
+        hostElement.dispatchEvent(event);
+    }));
+    return outputBindings;
+}
+export function createComponentBindings(mirror, props, hostElement) {
+    const inputBindings = createInputBindings(mirror, props);
+    if (!mirror.outputs.length || !props?.[ID_PROP_NAME] || !hostElement) {
+        return inputBindings;
+    }
+    const outputBindings = createOutputBindings(hostElement, mirror);
+    return [...inputBindings, ...outputBindings];
+}
+//# sourceMappingURL=create-component.js.map

package/src/create-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-component.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/create-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,YAAY,EACZ,aAAa,GACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,UAAU,sBAAsB,CACpC,MAAgC;IAEhC,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,cAAc,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,mBAAmB,CACjC,MAAgC,EAChC,KAA+B;IAE/B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SACxC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAChB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,KAAK,GAAG,CAAC,CAC/D;SACA,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEzD,OAAO,aAAa,CAAC;AACvB,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,WAAoB,EACpB,MAAgC;IAEhC,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAC7D,aAAa,CAAC,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE;QACrC,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,YAAY,EAAE;YAC1C,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,IAAI;YACd,MAAM;SACP,CAAC,CAAC;QACH,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC,CACH,CAAC;IAEF,OAAO,cAAc,CAAC;AACxB,CAAC;AAED,MAAM,UAAU,uBAAuB,CACrC,MAAgC,EAChC,KAA+B,EAC/B,WAAqB;IAErB,MAAM,aAAa,GAAG,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAEzD,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QACrE,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,MAAM,cAAc,GAAG,oBAAoB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAEjE,OAAO,CAAC,GAAG,aAAa,EAAE,GAAG,cAAc,CAAC,CAAC;AAC/C,CAAC","sourcesContent":["import {\n  type Binding,\n  type ComponentMirror,\n  inputBinding,\n  outputBinding,\n} from '@angular/core';\nimport { ID_PROP_NAME } from './id.ts';\n\nexport function getComponentElementTag(\n  mirror: ComponentMirror<unknown>,\n): string {\n  return mirror.selector.split(',')[0] || 'ng-component';\n}\n\nexport function createInputBindings(\n  mirror: ComponentMirror<unknown>,\n  props?: Record<string, unknown>,\n): Binding[] {\n  if (!props) {\n    return [];\n  }\n\n  const inputBindings = Object.entries(props)\n    .filter(([key]) =>\n      mirror.inputs.some(({ templateName }) => templateName === key),\n    )\n    .map(([key, value]) => inputBinding(key, () => value));\n\n  return inputBindings;\n}\n\nexport function createOutputBindings(\n  hostElement: Element,\n  mirror: ComponentMirror<unknown>,\n): Binding[] {\n  const outputBindings = mirror.outputs.map(({ templateName }) =>\n    outputBinding(templateName, (detail) => {\n      const event = new CustomEvent(templateName, {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail,\n      });\n      hostElement.dispatchEvent(event);\n    }),\n  );\n\n  return outputBindings;\n}\n\nexport function createComponentBindings(\n  mirror: ComponentMirror<unknown>,\n  props?: Record<string, unknown>,\n  hostElement?: Element,\n): Binding[] {\n  const inputBindings = createInputBindings(mirror, props);\n\n  if (!mirror.outputs.length || !props?.[ID_PROP_NAME] || !hostElement) {\n    return inputBindings;\n  }\n\n  const outputBindings = createOutputBindings(hostElement, mirror);\n\n  return [...inputBindings, ...outputBindings];\n}\n"]}

package/src/id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Property name used to serialize the APP_ID of each component.
+ */
+export declare const ID_PROP_NAME = "data-analog-id";
+//# sourceMappingURL=id.d.ts.map

package/src/id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"id.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/id.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,YAAY,mBAAmB,CAAC"}

package/src/id.js

@@ -0,0 +1,5 @@
+/**
+ * Property name used to serialize the APP_ID of each component.
+ */
+export const ID_PROP_NAME = 'data-analog-id';
+//# sourceMappingURL=id.js.map

package/src/id.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"id.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/id.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["/**\n * Property name used to serialize the APP_ID of each component.\n */\nexport const ID_PROP_NAME = 'data-analog-id';\n"]}

package/src/index.d.ts

@@ -9,6 +9,10 @@ interface AngularOptions {
      * Enabling this option disables astro's streaming under SSR.
      */
     strictStylePlacement?: boolean;
+    /**
+     * Use Angular's `provideClientHydration` to hydrate components.
+     */
+    useAngularHydration?: boolean;
 }
 export default function (options?: AngularOptions): AstroIntegration;
 export {};

package/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/index.ts"],"names":[],"mappings":"AACA,OAAoB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE3E,OAAO,KAAK,EAAE,gBAAgB,EAAiC,MAAM,OAAO,CAAC;AAE7E,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAmED,MAAM,CAAC,OAAO,WAAW,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,CA2BnE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/index.ts"],"names":[],"mappings":"AACA,OAAoB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE3E,OAAO,KAAK,EAAE,gBAAgB,EAAiC,MAAM,OAAO,CAAC;AAE7E,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AA0ED,MAAM,CAAC,OAAO,WAAW,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAyBnE"}

package/src/index.js

@@ -1,14 +1,18 @@
 import { fileURLToPath } from 'node:url';
 import viteAngular from '@analogjs/vite-plugin-angular';
 import { enableProdMode } from '@angular/core';
-function getRenderer() {
+function getRenderer(ngHydration) {
     return {
         name: '@analogjs/astro-angular',
-        clientEntrypoint: '@analogjs/astro-angular/client.js',
-        serverEntrypoint: '@analogjs/astro-angular/server.js',
+        clientEntrypoint: ngHydration
+            ? '@analogjs/astro-angular/client-ngh.js'
+            : '@analogjs/astro-angular/client.js',
+        serverEntrypoint: ngHydration
+            ? '@analogjs/astro-angular/server-ngh.js'
+            : '@analogjs/astro-angular/server.js',
     };
 }
-function getViteConfiguration(vite) {
+function getViteConfiguration(options) {
     return {
         esbuild: {
             jsxDev: true,
@@ -17,15 +21,18 @@ function getViteConfiguration(vite) {
             include: [
                 '@angular/platform-browser',
                 '@angular/core',
-                '@analogjs/astro-angular/client.js',
+                options?.useAngularHydration
+                    ? '@analogjs/astro-angular/client-ngh.js'
+                    : '@analogjs/astro-angular/client.js',
             ],
             exclude: [
                 '@angular/platform-server',
                 '@analogjs/astro-angular/server.js',
+                '@analogjs/astro-angular/server-ngh.js',
             ],
         },
         plugins: [
-            viteAngular(vite),
+            viteAngular(options?.vite),
             {
                 name: '@analogjs/astro-angular-platform-server',
                 transform(code, id) {
@@ -63,9 +70,9 @@ export default function (options) {
         name: '@analogjs/astro-angular',
         hooks: {
             'astro:config:setup': ({ addRenderer, updateConfig, addMiddleware }) => {
-                addRenderer(getRenderer());
+                addRenderer(getRenderer(options?.useAngularHydration));
                 updateConfig({
-                    vite: getViteConfiguration(options?.vite),
+                    vite: getViteConfiguration(options),
                 });
                 if (options?.strictStylePlacement) {
                     addMiddleware({

package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,WAA8B,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAc/C,SAAS,WAAW;IAClB,OAAO;QACL,IAAI,EAAE,yBAAyB;QAC/B,gBAAgB,EAAE,mCAAmC;QACrD,gBAAgB,EAAE,mCAAmC;KACtD,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,IAAoB;IAChD,OAAO;QACL,OAAO,EAAE;YACP,MAAM,EAAE,IAAI;SACb;QACD,YAAY,EAAE;YACZ,OAAO,EAAE;gBACP,2BAA2B;gBAC3B,eAAe;gBACf,mCAAmC;aACpC;YACD,OAAO,EAAE;gBACP,0BAA0B;gBAC1B,mCAAmC;aACpC;SACF;QAED,OAAO,EAAE;YACP,WAAW,CAAC,IAAI,CAAC;YACjB;gBACE,IAAI,EAAE,yCAAyC;gBAC/C,SAAS,CAAC,IAAY,EAAE,EAAU;oBAChC,IAAI,EAAE,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC;wBACnC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;wBAEhD,OAAO;4BACL,IAAI,EAAE,IAAI,CAAC,OAAO,CAChB,yBAAyB,EACzB,mDAAmD,CACpD;yBACF,CAAC;oBACJ,CAAC;oBAED,OAAO;gBACT,CAAC;aACF;YACD;gBACE,IAAI,EAAE,oCAAoC;gBAC1C,iBAAiB,CAAC,IAAY;oBAC5B,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;wBACtB,OAAO;4BACL,MAAM,EAAE;gCACN,YAAY,EAAE,OAAO;6BACtB;yBACF,CAAC;oBACJ,CAAC;oBAED,OAAO,SAAS,CAAC;gBACnB,CAAC;aACF;SACF;QACD,GAAG,EAAE;YACH,UAAU,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC;SAC5C;KACF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,WAAW,OAAwB;IAC/C,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC;IAErC,OAAO;QACL,IAAI,EAAE,yBAAyB;QAC/B,KAAK,EAAE;YACL,oBAAoB,EAAE,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,EAAE,EAAE;gBACrE,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC;gBAC3B,YAAY,CAAC;oBACX,IAAI,EAAE,oBAAoB,CACxB,OAAO,EAAE,IAAI,CACe;iBAC/B,CAAC,CAAC;gBACH,IAAI,OAAO,EAAE,oBAAoB,EAAE,CAAC;oBAClC,aAAa,CAAC;wBACZ,KAAK,EAAE,KAAK;wBACZ,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;qBAClE,CAAC,CAAC;gBACL,CAAC;YACH,CAAC;YACD,mBAAmB,EAAE,GAAG,EAAE;gBACxB,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,YAAY,EAAE,CAAC;oBAC7C,cAAc,EAAE,CAAC;gBACnB,CAAC;YACH,CAAC;SACF;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { fileURLToPath } from 'node:url';\nimport viteAngular, { PluginOptions } from '@analogjs/vite-plugin-angular';\nimport { enableProdMode } from '@angular/core';\nimport type { AstroIntegration, AstroRenderer, ViteUserConfig } from 'astro';\n\ninterface AngularOptions {\n  vite?: PluginOptions;\n  /**\n   * Enable stricter rendering, which ensures Angular style tags are added to the document head instead of next to the\n   * component in the body.\n   *\n   * Enabling this option disables astro's streaming under SSR.\n   */\n  strictStylePlacement?: boolean;\n}\n\nfunction getRenderer(): AstroRenderer {\n  return {\n    name: '@analogjs/astro-angular',\n    clientEntrypoint: '@analogjs/astro-angular/client.js',\n    serverEntrypoint: '@analogjs/astro-angular/server.js',\n  };\n}\n\nfunction getViteConfiguration(vite?: PluginOptions): ViteUserConfig {\n  return {\n    esbuild: {\n      jsxDev: true,\n    },\n    optimizeDeps: {\n      include: [\n        '@angular/platform-browser',\n        '@angular/core',\n        '@analogjs/astro-angular/client.js',\n      ],\n      exclude: [\n        '@angular/platform-server',\n        '@analogjs/astro-angular/server.js',\n      ],\n    },\n\n    plugins: [\n      viteAngular(vite),\n      {\n        name: '@analogjs/astro-angular-platform-server',\n        transform(code: string, id: string) {\n          if (id.includes('platform-server')) {\n            code = code.replace(/global\\./g, 'globalThis.');\n\n            return {\n              code: code.replace(\n                'new xhr2.XMLHttpRequest',\n                'new (xhr2.default.XMLHttpRequest || xhr2.default)',\n              ),\n            };\n          }\n\n          return;\n        },\n      },\n      {\n        name: 'analogjs-astro-client-ngservermode',\n        configEnvironment(name: string) {\n          if (name === 'client') {\n            return {\n              define: {\n                ngServerMode: 'false',\n              },\n            };\n          }\n\n          return undefined;\n        },\n      },\n    ],\n    ssr: {\n      noExternal: ['@angular/**', '@analogjs/**'],\n    },\n  };\n}\n\nexport default function (options?: AngularOptions): AstroIntegration {\n  process.env['ANALOG_ASTRO'] = 'true';\n\n  return {\n    name: '@analogjs/astro-angular',\n    hooks: {\n      'astro:config:setup': ({ addRenderer, updateConfig, addMiddleware }) => {\n        addRenderer(getRenderer());\n        updateConfig({\n          vite: getViteConfiguration(\n            options?.vite,\n          ) as unknown as ViteUserConfig,\n        });\n        if (options?.strictStylePlacement) {\n          addMiddleware({\n            order: 'pre',\n            entrypoint: fileURLToPath(import.meta.resolve('./middleware.js')),\n          });\n        }\n      },\n      'astro:config:done': () => {\n        if (process.env['NODE_ENV'] === 'production') {\n          enableProdMode();\n        }\n      },\n    },\n  };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,WAA8B,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAkB/C,SAAS,WAAW,CAAC,WAAgC;IACnD,OAAO;QACL,IAAI,EAAE,yBAAyB;QAC/B,gBAAgB,EAAE,WAAW;YAC3B,CAAC,CAAC,uCAAuC;YACzC,CAAC,CAAC,mCAAmC;QACvC,gBAAgB,EAAE,WAAW;YAC3B,CAAC,CAAC,uCAAuC;YACzC,CAAC,CAAC,mCAAmC;KACxC,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,OAAwB;IACpD,OAAO;QACL,OAAO,EAAE;YACP,MAAM,EAAE,IAAI;SACb;QACD,YAAY,EAAE;YACZ,OAAO,EAAE;gBACP,2BAA2B;gBAC3B,eAAe;gBACf,OAAO,EAAE,mBAAmB;oBAC1B,CAAC,CAAC,uCAAuC;oBACzC,CAAC,CAAC,mCAAmC;aACxC;YACD,OAAO,EAAE;gBACP,0BAA0B;gBAC1B,mCAAmC;gBACnC,uCAAuC;aACxC;SACF;QAED,OAAO,EAAE;YACP,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC;YAC1B;gBACE,IAAI,EAAE,yCAAyC;gBAC/C,SAAS,CAAC,IAAY,EAAE,EAAU;oBAChC,IAAI,EAAE,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC;wBACnC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;wBAEhD,OAAO;4BACL,IAAI,EAAE,IAAI,CAAC,OAAO,CAChB,yBAAyB,EACzB,mDAAmD,CACpD;yBACF,CAAC;oBACJ,CAAC;oBAED,OAAO;gBACT,CAAC;aACF;YACD;gBACE,IAAI,EAAE,oCAAoC;gBAC1C,iBAAiB,CAAC,IAAY;oBAC5B,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;wBACtB,OAAO;4BACL,MAAM,EAAE;gCACN,YAAY,EAAE,OAAO;6BACtB;yBACF,CAAC;oBACJ,CAAC;oBAED,OAAO,SAAS,CAAC;gBACnB,CAAC;aACF;SACF;QACD,GAAG,EAAE;YACH,UAAU,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC;SAC5C;KACF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,WAAW,OAAwB;IAC/C,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC;IAErC,OAAO;QACL,IAAI,EAAE,yBAAyB;QAC/B,KAAK,EAAE;YACL,oBAAoB,EAAE,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,EAAE,EAAE;gBACrE,WAAW,CAAC,WAAW,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC;gBACvD,YAAY,CAAC;oBACX,IAAI,EAAE,oBAAoB,CAAC,OAAO,CAAC;iBACpC,CAAC,CAAC;gBACH,IAAI,OAAO,EAAE,oBAAoB,EAAE,CAAC;oBAClC,aAAa,CAAC;wBACZ,KAAK,EAAE,KAAK;wBACZ,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;qBAClE,CAAC,CAAC;gBACL,CAAC;YACH,CAAC;YACD,mBAAmB,EAAE,GAAG,EAAE;gBACxB,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,YAAY,EAAE,CAAC;oBAC7C,cAAc,EAAE,CAAC;gBACnB,CAAC;YACH,CAAC;SACF;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { fileURLToPath } from 'node:url';\nimport viteAngular, { PluginOptions } from '@analogjs/vite-plugin-angular';\nimport { enableProdMode } from '@angular/core';\nimport type { AstroIntegration, AstroRenderer, ViteUserConfig } from 'astro';\n\ninterface AngularOptions {\n  vite?: PluginOptions;\n  /**\n   * Enable stricter rendering, which ensures Angular style tags are added to the document head instead of next to the\n   * component in the body.\n   *\n   * Enabling this option disables astro's streaming under SSR.\n   */\n  strictStylePlacement?: boolean;\n  /**\n   * Use Angular's `provideClientHydration` to hydrate components.\n   */\n  useAngularHydration?: boolean;\n}\n\nfunction getRenderer(ngHydration: boolean | undefined): AstroRenderer {\n  return {\n    name: '@analogjs/astro-angular',\n    clientEntrypoint: ngHydration\n      ? '@analogjs/astro-angular/client-ngh.js'\n      : '@analogjs/astro-angular/client.js',\n    serverEntrypoint: ngHydration\n      ? '@analogjs/astro-angular/server-ngh.js'\n      : '@analogjs/astro-angular/server.js',\n  };\n}\n\nfunction getViteConfiguration(options?: AngularOptions): ViteUserConfig {\n  return {\n    esbuild: {\n      jsxDev: true,\n    },\n    optimizeDeps: {\n      include: [\n        '@angular/platform-browser',\n        '@angular/core',\n        options?.useAngularHydration\n          ? '@analogjs/astro-angular/client-ngh.js'\n          : '@analogjs/astro-angular/client.js',\n      ],\n      exclude: [\n        '@angular/platform-server',\n        '@analogjs/astro-angular/server.js',\n        '@analogjs/astro-angular/server-ngh.js',\n      ],\n    },\n\n    plugins: [\n      viteAngular(options?.vite),\n      {\n        name: '@analogjs/astro-angular-platform-server',\n        transform(code: string, id: string) {\n          if (id.includes('platform-server')) {\n            code = code.replace(/global\\./g, 'globalThis.');\n\n            return {\n              code: code.replace(\n                'new xhr2.XMLHttpRequest',\n                'new (xhr2.default.XMLHttpRequest || xhr2.default)',\n              ),\n            };\n          }\n\n          return;\n        },\n      },\n      {\n        name: 'analogjs-astro-client-ngservermode',\n        configEnvironment(name: string) {\n          if (name === 'client') {\n            return {\n              define: {\n                ngServerMode: 'false',\n              },\n            };\n          }\n\n          return undefined;\n        },\n      },\n    ],\n    ssr: {\n      noExternal: ['@angular/**', '@analogjs/**'],\n    },\n  };\n}\n\nexport default function (options?: AngularOptions): AstroIntegration {\n  process.env['ANALOG_ASTRO'] = 'true';\n\n  return {\n    name: '@analogjs/astro-angular',\n    hooks: {\n      'astro:config:setup': ({ addRenderer, updateConfig, addMiddleware }) => {\n        addRenderer(getRenderer(options?.useAngularHydration));\n        updateConfig({\n          vite: getViteConfiguration(options),\n        });\n        if (options?.strictStylePlacement) {\n          addMiddleware({\n            order: 'pre',\n            entrypoint: fileURLToPath(import.meta.resolve('./middleware.js')),\n          });\n        }\n      },\n      'astro:config:done': () => {\n        if (process.env['NODE_ENV'] === 'production') {\n          enableProdMode();\n        }\n      },\n    },\n  };\n}\n"]}

package/src/middleware.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"middleware.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/middleware.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM/C,eAAO,MAAM,SAAS,EAAE,iBAwEvB,CAAC"}
+{"version":3,"file":"middleware.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/middleware.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM/C,eAAO,MAAM,SAAS,EAAE,iBA8EvB,CAAC"}

package/src/middleware.js

@@ -53,6 +53,8 @@ export const onRequest = async (_ctx, next) => {
         tree.children.unshift(head);
     }
     const newBody = processor.stringify(tree);
-    return new Response(newBody, response);
+    const newResponse = new Response(newBody, response);
+    newResponse.headers.set('content-length', Buffer.byteLength(newBody).toFixed(0));
+    return newResponse;
 };
 //# sourceMappingURL=middleware.js.map

package/src/middleware.js.map

@@ -1 +1 @@
-{"version":3,"file":"middleware.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/middleware.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;AAE3B,MAAM,CAAC,MAAM,SAAS,GAAsB,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAC/D,MAAM,QAAQ,GAAG,MAAM,IAAI,EAAE,CAAC;IAC9B,IAAI,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE,CAAC;QACzE,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,8EAA8E;IAE9E,MAAM,YAAY,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;IAE3C,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAE3C,MAAM,KAAK,GAA2B,CAAC,IAAI,CAAC,CAAC;IAE7C,MAAM,SAAS,GAAc,EAAE,CAAC;IAChC,IAAI,IAAI,GAAmB,IAAI,CAAC;IAEhC,OAAO,KAAK,CAAC,MAAM,EAAE,CAAC;QACpB,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,EAAG,CAAC;QAEzB,IAAI,GAAG,CAAC,IAAI,KAAK,SAAS,IAAI,GAAG,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;YACzD,yEAAyE;YACzE,SAAS;QACX,CAAC;QAED,IAAI,GAAG,CAAC,IAAI,KAAK,SAAS,IAAI,GAAG,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YACtD,IAAI,WAAW,IAAI,GAAG,CAAC,UAAU,EAAE,CAAC;gBAClC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACtB,CAAC;YACD,SAAS;QACX,CAAC;QAED,IAAI,GAAG,CAAC,IAAI,KAAK,SAAS,IAAI,GAAG,CAAC,OAAO,KAAK,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;YAC9D,IAAI,GAAG,GAAG,CAAC;YACX,SAAS;QACX,CAAC;QAED,IAAI,GAAG,CAAC,IAAI,KAAK,MAAM,IAAI,GAAG,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAClD,SAAS;QACX,CAAC;QAED,KAAK,IAAI,KAAK,GAAG,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;YAC9D,MAAM,KAAK,GAAG,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAElC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAElB,IACE,KAAK,CAAC,IAAI,KAAK,SAAS;gBACxB,KAAK,CAAC,OAAO,KAAK,OAAO;gBACzB,WAAW,IAAI,KAAK,CAAC,UAAU,EAC/B,CAAC;gBACD,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAChC,CAAC;QACH,CAAC;IACH,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,CAAC;IACnC,CAAC;SAAM,CAAC;QACN,MAAM,IAAI,GAAY;YACpB,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,SAAS;YACnB,UAAU,EAAE,EAAE;YACd,OAAO,EAAE,MAAM;SAChB,CAAC;QAEF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM,OAAO,GAAG,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAE1C,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AACzC,CAAC,CAAC","sourcesContent":["import type { MiddlewareHandler } from 'astro';\nimport type { Root, RootContent, Element } from 'hast';\nimport { rehype } from 'rehype';\n\nconst processor = rehype();\n\nexport const onRequest: MiddlewareHandler = async (_ctx, next) => {\n  const response = await next();\n  if (response.headers.get('content-type')?.includes('text/html') !== true) {\n    return response;\n  }\n\n  // Find all <style ng-app-id=\"...\"> tags in the body and move them to the head\n\n  const responseBody = await response.text();\n\n  const tree = processor.parse(responseBody);\n\n  const stack: (Root | RootContent)[] = [tree];\n\n  const styleTags: Element[] = [];\n  let head: Element | null = null;\n\n  while (stack.length) {\n    const top = stack.pop()!;\n\n    if (top.type === 'element' && top.tagName === 'template') {\n      // Templates create a shadow-root, so styles should not be moved outside.\n      continue;\n    }\n\n    if (top.type === 'element' && top.tagName === 'style') {\n      if ('ng-app-id' in top.properties) {\n        styleTags.push(top);\n      }\n      continue;\n    }\n\n    if (top.type === 'element' && top.tagName === 'head' && !head) {\n      head = top;\n      continue;\n    }\n\n    if (top.type !== 'root' && top.type !== 'element') {\n      continue;\n    }\n\n    for (let index = top.children.length - 1; index >= 0; index--) {\n      const child = top.children[index];\n\n      stack.push(child);\n\n      if (\n        child.type === 'element' &&\n        child.tagName === 'style' &&\n        'ng-app-id' in child.properties\n      ) {\n        top.children.splice(index, 1);\n      }\n    }\n  }\n\n  if (head) {\n    head.children.push(...styleTags);\n  } else {\n    const head: Element = {\n      type: 'element',\n      children: styleTags,\n      properties: {},\n      tagName: 'head',\n    };\n\n    tree.children.unshift(head);\n  }\n\n  const newBody = processor.stringify(tree);\n\n  return new Response(newBody, response);\n};\n"]}
+{"version":3,"file":"middleware.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/middleware.ts"],"names":[],"mappings":"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","sourcesContent":["import type { MiddlewareHandler } from 'astro';\nimport type { Root, RootContent, Element } from 'hast';\nimport { rehype } from 'rehype';\n\nconst processor = rehype();\n\nexport const onRequest: MiddlewareHandler = async (_ctx, next) => {\n  const response = await next();\n  if (response.headers.get('content-type')?.includes('text/html') !== true) {\n    return response;\n  }\n\n  // Find all <style ng-app-id=\"...\"> tags in the body and move them to the head\n\n  const responseBody = await response.text();\n\n  const tree = processor.parse(responseBody);\n\n  const stack: (Root | RootContent)[] = [tree];\n\n  const styleTags: Element[] = [];\n  let head: Element | null = null;\n\n  while (stack.length) {\n    const top = stack.pop()!;\n\n    if (top.type === 'element' && top.tagName === 'template') {\n      // Templates create a shadow-root, so styles should not be moved outside.\n      continue;\n    }\n\n    if (top.type === 'element' && top.tagName === 'style') {\n      if ('ng-app-id' in top.properties) {\n        styleTags.push(top);\n      }\n      continue;\n    }\n\n    if (top.type === 'element' && top.tagName === 'head' && !head) {\n      head = top;\n      continue;\n    }\n\n    if (top.type !== 'root' && top.type !== 'element') {\n      continue;\n    }\n\n    for (let index = top.children.length - 1; index >= 0; index--) {\n      const child = top.children[index];\n\n      stack.push(child);\n\n      if (\n        child.type === 'element' &&\n        child.tagName === 'style' &&\n        'ng-app-id' in child.properties\n      ) {\n        top.children.splice(index, 1);\n      }\n    }\n  }\n\n  if (head) {\n    head.children.push(...styleTags);\n  } else {\n    const head: Element = {\n      type: 'element',\n      children: styleTags,\n      properties: {},\n      tagName: 'head',\n    };\n\n    tree.children.unshift(head);\n  }\n\n  const newBody = processor.stringify(tree);\n\n  const newResponse = new Response(newBody, response);\n  newResponse.headers.set(\n    'content-length',\n    Buffer.byteLength(newBody).toFixed(0),\n  );\n\n  return newResponse;\n};\n"]}

package/src/server-ngh.d.ts

@@ -0,0 +1,18 @@
+import type { EnvironmentProviders, Provider, Type } from '@angular/core';
+import { type HydrationFeature, type HydrationFeatureKind } from '@angular/platform-browser';
+import type { AstroComponentMetadata } from 'astro';
+import { type RendererContext } from './context.ts';
+declare function check(Component: Type<unknown>): Promise<boolean>;
+declare function renderToStaticMarkup(this: RendererContext, Component: Type<unknown> & {
+    renderProviders?: (Provider | EnvironmentProviders)[];
+    hydrationFeatures?: () => HydrationFeature<HydrationFeatureKind>[];
+}, props: Record<string, unknown>, _children: unknown, metadata?: AstroComponentMetadata): Promise<{
+    html: string;
+}>;
+declare const _default: {
+    check: typeof check;
+    renderToStaticMarkup: typeof renderToStaticMarkup;
+    renderHydrationScript: () => string;
+};
+export default _default;
+//# sourceMappingURL=server-ngh.d.ts.map

package/src/server-ngh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-ngh.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server-ngh.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAa1E,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EAG1B,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,sBAAsB,EAA0B,MAAM,OAAO,CAAC;AAC5E,OAAO,EAA2B,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAqB7E,iBAAe,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,oBAE5C;AAED,iBAAe,oBAAoB,CACjC,IAAI,EAAE,eAAe,EACrB,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG;IACzB,eAAe,CAAC,EAAE,CAAC,QAAQ,GAAG,oBAAoB,CAAC,EAAE,CAAC;IACtD,iBAAiB,CAAC,EAAE,MAAM,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,CAAC;CACpE,EACD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,SAAS,EAAE,OAAO,EAClB,QAAQ,CAAC,EAAE,sBAAsB;;GAoElC;;;;;;AAED,wBAImC"}

package/src/server-ngh.js

@@ -0,0 +1,76 @@
+import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { reflectComponentType, provideZonelessChangeDetection, DOCUMENT, APP_ID, } from '@angular/core';
+import { provideServerRendering, renderApplication, ɵSERVER_CONTEXT, platformServer, } from '@angular/platform-server';
+import { bootstrapApplication, provideClientHydration, } from '@angular/platform-browser';
+import { getContext, incrementId } from "./context.js";
+import { provideBootstrapListener } from "./server-providers.js";
+import { ID_PROP_NAME } from "./id.js";
+import { getComponentElementTag } from "./create-component.js";
+const require = createRequire(import.meta.url);
+let jsActionContractScript = undefined;
+const HYDRATION_SCRIPT_ID = 'ng-event-dispatch-contract';
+function getHydrationScript() {
+    jsActionContractScript ??=
+        `<script type="text/javascript" id="${HYDRATION_SCRIPT_ID}">` +
+            readFileSync(require.resolve('@angular/core/event-dispatch-contract.min.js'), 'utf-8') +
+            '</script>';
+    return jsActionContractScript;
+}
+async function check(Component) {
+    return !!reflectComponentType(Component);
+}
+async function renderToStaticMarkup(Component, props, _children, metadata) {
+    const mirror = reflectComponentType(Component);
+    if (!mirror) {
+        // This should be unreachable: the `check` function verifies that Component is an Angular component.
+        throw new Error((metadata?.displayName || '<unknown component>') +
+            ' is not an Angular component');
+    }
+    const elementTag = getComponentElementTag(mirror);
+    const ngAppId = props?.[ID_PROP_NAME] || incrementId(getContext(this.result));
+    // When the platform ref is destroyed, it will reset ngServerMode back to `undefined` if it was not defined when it is
+    // created. See https://github.com/angular/angular/blob/2ce0e98f79a02ddc550d00580e8e232cfed3bfb2/packages/platform-server/src/server.ts#L138
+    globalThis.ngServerMode = true;
+    const platformRef = platformServer();
+    const document = platformRef.injector.get(DOCUMENT);
+    // Incremental hydration requires the event dispatch script to be present.
+    document.body.innerHTML = `${getHydrationScript()}<${elementTag} ${ID_PROP_NAME}="${ngAppId}"></${elementTag}>`;
+    const bootstrap = (context) => bootstrapApplication(Component, {
+        providers: [
+            provideBootstrapListener(mirror, props),
+            provideServerRendering(),
+            { provide: ɵSERVER_CONTEXT, useValue: 'analog' },
+            provideZonelessChangeDetection(),
+            metadata?.hydrate
+                ? provideClientHydration(...(Component.hydrationFeatures?.() || []))
+                : [],
+            {
+                provide: APP_ID,
+                useValue: ngAppId,
+            },
+            ...(Component.renderProviders || []),
+        ],
+    }, context);
+    const html = await renderApplication(bootstrap, {
+        document,
+    });
+    document.documentElement.innerHTML = html;
+    let styleTags = '';
+    document.head.childNodes.forEach((node) => {
+        if (node.nodeName === 'STYLE') {
+            styleTags += node.outerHTML;
+        }
+    });
+    // Remove the hydration script, so only one is present on the page.
+    document.getElementById(HYDRATION_SCRIPT_ID)?.remove();
+    const correctedHtml = styleTags + document.body.innerHTML;
+    platformRef.destroy();
+    return { html: correctedHtml };
+}
+export default {
+    check,
+    renderToStaticMarkup,
+    renderHydrationScript: () => getHydrationScript(),
+};
+//# sourceMappingURL=server-ngh.js.map

package/src/server-ngh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-ngh.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server-ngh.ts"],"names":[],"mappings":"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","sourcesContent":["import { readFileSync } from 'node:fs';\nimport { createRequire } from 'node:module';\n\nimport type { EnvironmentProviders, Provider, Type } from '@angular/core';\nimport {\n  reflectComponentType,\n  provideZonelessChangeDetection,\n  DOCUMENT,\n  APP_ID,\n} from '@angular/core';\nimport {\n  provideServerRendering,\n  renderApplication,\n  ɵSERVER_CONTEXT,\n  platformServer,\n} from '@angular/platform-server';\nimport {\n  bootstrapApplication,\n  type HydrationFeature,\n  type HydrationFeatureKind,\n  provideClientHydration,\n  type BootstrapContext,\n} from '@angular/platform-browser';\nimport type { AstroComponentMetadata, SSRLoadedRendererValue } from 'astro';\nimport { getContext, incrementId, type RendererContext } from './context.ts';\nimport { provideBootstrapListener } from './server-providers.ts';\nimport { ID_PROP_NAME } from './id.ts';\nimport { getComponentElementTag } from './create-component.ts';\n\nconst require = createRequire(import.meta.url);\nlet jsActionContractScript: string | undefined = undefined;\n\nconst HYDRATION_SCRIPT_ID = 'ng-event-dispatch-contract';\n\nfunction getHydrationScript(): string {\n  jsActionContractScript ??=\n    `<script type=\"text/javascript\" id=\"${HYDRATION_SCRIPT_ID}\">` +\n    readFileSync(\n      require.resolve('@angular/core/event-dispatch-contract.min.js'),\n      'utf-8',\n    ) +\n    '</script>';\n  return jsActionContractScript;\n}\n\nasync function check(Component: Type<unknown>) {\n  return !!reflectComponentType(Component);\n}\n\nasync function renderToStaticMarkup(\n  this: RendererContext,\n  Component: Type<unknown> & {\n    renderProviders?: (Provider | EnvironmentProviders)[];\n    hydrationFeatures?: () => HydrationFeature<HydrationFeatureKind>[];\n  },\n  props: Record<string, unknown>,\n  _children: unknown,\n  metadata?: AstroComponentMetadata,\n) {\n  const mirror = reflectComponentType(Component);\n\n  if (!mirror) {\n    // This should be unreachable: the `check` function verifies that Component is an Angular component.\n    throw new Error(\n      (metadata?.displayName || '<unknown component>') +\n        ' is not an Angular component',\n    );\n  }\n\n  const elementTag = getComponentElementTag(mirror);\n  const ngAppId = props?.[ID_PROP_NAME] || incrementId(getContext(this.result));\n\n  // When the platform ref is destroyed, it will reset ngServerMode back to `undefined` if it was not defined when it is\n  // created. See https://github.com/angular/angular/blob/2ce0e98f79a02ddc550d00580e8e232cfed3bfb2/packages/platform-server/src/server.ts#L138\n  globalThis.ngServerMode = true;\n\n  const platformRef = platformServer();\n  const document = platformRef.injector.get(DOCUMENT);\n\n  // Incremental hydration requires the event dispatch script to be present.\n  document.body.innerHTML = `${getHydrationScript()}<${elementTag} ${ID_PROP_NAME}=\"${ngAppId}\"></${elementTag}>`;\n\n  const bootstrap = (context?: BootstrapContext) =>\n    bootstrapApplication(\n      Component,\n      {\n        providers: [\n          provideBootstrapListener(mirror, props),\n          provideServerRendering(),\n          { provide: ɵSERVER_CONTEXT, useValue: 'analog' },\n          provideZonelessChangeDetection(),\n          metadata?.hydrate\n            ? provideClientHydration(...(Component.hydrationFeatures?.() || []))\n            : [],\n          {\n            provide: APP_ID,\n            useValue: ngAppId,\n          },\n          ...(Component.renderProviders || []),\n        ],\n      },\n      context,\n    );\n\n  const html = await renderApplication(bootstrap, {\n    document,\n  });\n\n  document.documentElement.innerHTML = html;\n  let styleTags = '';\n\n  document.head.childNodes.forEach((node) => {\n    if (node.nodeName === 'STYLE') {\n      styleTags += (node as HTMLElement).outerHTML;\n    }\n  });\n\n  // Remove the hydration script, so only one is present on the page.\n  document.getElementById(HYDRATION_SCRIPT_ID)?.remove();\n\n  const correctedHtml = styleTags + document.body.innerHTML;\n\n  platformRef.destroy();\n\n  return { html: correctedHtml };\n}\n\nexport default {\n  check,\n  renderToStaticMarkup,\n  renderHydrationScript: () => getHydrationScript(),\n} satisfies SSRLoadedRendererValue;\n"]}

package/src/server-providers.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentMirror, type Provider } from '@angular/core';
+/**
+ * Provide bootstrap listeners to ensure the rendered state matches the settled component state after applying component inputs.
+ * @param mirror The component mirror, to detect component inputs
+ * @param props Properties applied to the component in the Astro file
+ * @returns A providers array for the server renderer
+ */
+export declare function provideBootstrapListener(mirror: ComponentMirror<unknown>, props: Record<string, unknown>): Provider[];
+//# sourceMappingURL=server-providers.d.ts.map

package/src/server-providers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-providers.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server-providers.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,eAAe,EAEpB,KAAK,QAAQ,EACd,MAAM,eAAe,CAAC;AAEvB;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,EAChC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC7B,QAAQ,EAAE,CAkBZ"}

package/src/server-providers.js

@@ -0,0 +1,25 @@
+import { APP_BOOTSTRAP_LISTENER, } from '@angular/core';
+/**
+ * Provide bootstrap listeners to ensure the rendered state matches the settled component state after applying component inputs.
+ * @param mirror The component mirror, to detect component inputs
+ * @param props Properties applied to the component in the Astro file
+ * @returns A providers array for the server renderer
+ */
+export function provideBootstrapListener(mirror, props) {
+    return [
+        {
+            provide: APP_BOOTSTRAP_LISTENER,
+            useValue: (compRef) => {
+                if (props) {
+                    for (const [key, value] of Object.entries(props)) {
+                        if (mirror.inputs.some(({ templateName }) => templateName === key)) {
+                            compRef.setInput(key, value);
+                        }
+                    }
+                }
+            },
+            multi: true,
+        },
+    ];
+}
+//# sourceMappingURL=server-providers.js.map

package/src/server-providers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-providers.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server-providers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,GAIvB,MAAM,eAAe,CAAC;AAEvB;;;;;GAKG;AACH,MAAM,UAAU,wBAAwB,CACtC,MAAgC,EAChC,KAA8B;IAE9B,OAAO;QACL;YACE,OAAO,EAAE,sBAAsB;YAC/B,QAAQ,EAAE,CAAC,OAA8B,EAAE,EAAE;gBAC3C,IAAI,KAAK,EAAE,CAAC;oBACV,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;wBACjD,IACE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,KAAK,GAAG,CAAC,EAC9D,CAAC;4BACD,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;wBAC/B,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;YACD,KAAK,EAAE,IAAI;SACZ;KACF,CAAC;AACJ,CAAC","sourcesContent":["import {\n  APP_BOOTSTRAP_LISTENER,\n  type ComponentMirror,\n  type ComponentRef,\n  type Provider,\n} from '@angular/core';\n\n/**\n * Provide bootstrap listeners to ensure the rendered state matches the settled component state after applying component inputs.\n * @param mirror The component mirror, to detect component inputs\n * @param props Properties applied to the component in the Astro file\n * @returns A providers array for the server renderer\n */\nexport function provideBootstrapListener(\n  mirror: ComponentMirror<unknown>,\n  props: Record<string, unknown>,\n): Provider[] {\n  return [\n    {\n      provide: APP_BOOTSTRAP_LISTENER,\n      useValue: (compRef: ComponentRef<unknown>) => {\n        if (props) {\n          for (const [key, value] of Object.entries(props)) {\n            if (\n              mirror.inputs.some(({ templateName }) => templateName === key)\n            ) {\n              compRef.setInput(key, value);\n            }\n          }\n        }\n      },\n      multi: true,\n    },\n  ];\n}\n"]}

package/src/ssr-integrity.d.ts

@@ -0,0 +1,2 @@
+export declare function ensureSsrIntegrityMarker(): void;
+//# sourceMappingURL=ssr-integrity.d.ts.map

package/src/ssr-integrity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-integrity.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/ssr-integrity.ts"],"names":[],"mappings":"AAKA,wBAAgB,wBAAwB,IAAI,IAAI,CAe/C"}

package/src/ssr-integrity.js

@@ -0,0 +1,13 @@
+import { ɵCLIENT_RENDER_MODE_FLAG, ɵSSR_CONTENT_INTEGRITY_MARKER, } from '@angular/core';
+export function ensureSsrIntegrityMarker() {
+    // Insert Angular client hydration marker
+    // See https://github.com/angular/angular/issues/67785
+    if (document.body.firstChild?.nodeType !== Node.COMMENT_NODE ||
+        document.body.firstChild.textContent !== ɵSSR_CONTENT_INTEGRITY_MARKER) {
+        document.body.prepend(document.createComment(ɵSSR_CONTENT_INTEGRITY_MARKER));
+    }
+    if (!document.body.hasAttribute(ɵCLIENT_RENDER_MODE_FLAG)) {
+        document.body.setAttribute(ɵCLIENT_RENDER_MODE_FLAG, '');
+    }
+}
+//# sourceMappingURL=ssr-integrity.js.map

package/src/ssr-integrity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-integrity.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/ssr-integrity.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,6BAA6B,GAC9B,MAAM,eAAe,CAAC;AAEvB,MAAM,UAAU,wBAAwB;IACtC,yCAAyC;IACzC,sDAAsD;IACtD,IACE,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY;QACxD,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,KAAK,6BAA6B,EACtE,CAAC;QACD,QAAQ,CAAC,IAAI,CAAC,OAAO,CACnB,QAAQ,CAAC,aAAa,CAAC,6BAA6B,CAAC,CACtD,CAAC;IACJ,CAAC;IAED,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,wBAAwB,CAAC,EAAE,CAAC;QAC1D,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,wBAAwB,EAAE,EAAE,CAAC,CAAC;IAC3D,CAAC;AACH,CAAC","sourcesContent":["import {\n  ɵCLIENT_RENDER_MODE_FLAG,\n  ɵSSR_CONTENT_INTEGRITY_MARKER,\n} from '@angular/core';\n\nexport function ensureSsrIntegrityMarker(): void {\n  // Insert Angular client hydration marker\n  // See https://github.com/angular/angular/issues/67785\n  if (\n    document.body.firstChild?.nodeType !== Node.COMMENT_NODE ||\n    document.body.firstChild.textContent !== ɵSSR_CONTENT_INTEGRITY_MARKER\n  ) {\n    document.body.prepend(\n      document.createComment(ɵSSR_CONTENT_INTEGRITY_MARKER),\n    );\n  }\n\n  if (!document.body.hasAttribute(ɵCLIENT_RENDER_MODE_FLAG)) {\n    document.body.setAttribute(ɵCLIENT_RENDER_MODE_FLAG, '');\n  }\n}\n"]}