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

package/README.md

@@ -428,7 +428,82 @@ import { HelloComponent } from "../../components/hello.component.ts";
 
 > Important: In `.mdx` files the component import must end with the `.ts` suffix. Otherwise the dynamic import of the component will fail and the component won't be hydrated.
 
+## Content Projection
+
+Children passed to an Angular component in an Astro file are projected into the component's `ng-content` slots. Angular's own `select` semantics apply, so existing components work unchanged.
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-card',
+  template: `
+    <div class="card">
+      <div class="card__header">
+        <ng-content select="[question]"></ng-content>
+      </div>
+      <div class="card__body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+})
+export class CardComponent {}
+```
+
+```html
+---
+import { CardComponent } from '../components/card.component';
+---
+
+<CardComponent client:visible>
+  <p question>Is content projection cool?</p>
+  <p>Let's learn about content projection!</p>
+</CardComponent>
+```
+
+Content that does not match any `select` is projected into the default `<ng-content>`. Without a default slot it is dropped, as in Angular. `ngProjectAs` is honored as well.
+
+Astro's `slot` attribute is not needed to target a slot. Astro removes the attribute before rendering, so use Angular selectors such as attributes, classes, or element names instead.
+
+> Note: for hydrated islands, Astro also emits the projected content in an inert `<template data-astro-template>` so it is available on the client. The slot markup therefore appears twice in the HTML response of hydrated components.
+
+### Components in Projected Content
+
+Angular components used inside the slot are rendered and hydrated as islands of their own, the same way nested React, Vue or Svelte components behave in Astro. The parent component only receives their markup, so `@ContentChild`, `@ContentChildren`, input and output bindings, and dependency injection do not cross the island boundary.
+
+```html
+---
+import { CardComponent } from '../components/card.component';
+import { BadgeComponent } from '../components/badge.component';
+---
+
+<!-- Two separate islands: the card cannot query or bind to the badge -->
+<CardComponent client:visible>
+  <BadgeComponent client:visible label="New" />
+</CardComponent>
+```
+
+For a real parent and child relationship, compose the components in an Angular template and use that component as the island.
+
+```ts
+import { Component } from '@angular/core';
+import { CardComponent } from './card.component';
+import { BadgeComponent } from './badge.component';
+
+@Component({
+  selector: 'app-card-with-badge',
+  imports: [CardComponent, BadgeComponent],
+  template: `
+    <app-card>
+      <app-badge label="New" />
+    </app-card>
+  `,
+})
+export class CardWithBadgeComponent {}
+```
+
 ## Current Limitations
 
 - Only standalone Angular components in version v14.2+ are supported
-- Content projection to island components is not supported
+- Angular components inside projected content are separate islands. Content queries, bindings and dependency injection from the parent component do not reach them, see [Components in Projected Content](#components-in-projected-content)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/astro-angular",
-  "version": "2.8.0-beta.4",
+  "version": "2.8.0-beta.6",
   "description": "Use Angular components within Astro",
   "type": "module",
   "author": "Brandon Roberts <robertsbt@gmail.com>",
@@ -34,7 +34,7 @@
     "url": "https://github.com/sponsors/brandonroberts"
   },
   "dependencies": {
-    "@analogjs/vite-plugin-angular": "^2.8.0-beta.4",
+    "@analogjs/vite-plugin-angular": "^2.8.0-beta.6",
     "rehype": "^13.0.2"
   },
   "peerDependencies": {

package/src/client-ngh.d.ts

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

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

@@ -1 +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"}
+{"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,EAGL,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EAE1B,MAAM,2BAA2B,CAAC;yBAUnB,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,EAC/B,QAAQ,OAAO;AAPnB,wBAkEE"}

package/src/client-ngh.js

@@ -1,10 +1,11 @@
-import { reflectComponentType, provideZonelessChangeDetection, APP_ID, createComponent, APP_BOOTSTRAP_LISTENER, } from '@angular/core';
+import { reflectComponentType, provideZonelessChangeDetection, APP_ID, createComponent, } from '@angular/core';
 import { createApplication, provideClientHydration, } from '@angular/platform-browser';
-import { createComponentBindings, getComponentElementTag, } from "./create-component.js";
+import { createComponentBindings, getComponentElementTag, registerRootComponent, } from "./create-component.js";
 import { ID_PROP_NAME } from "./id.js";
 import { ensureSsrIntegrityMarker } from "./ssr-integrity.js";
+import { buildProjectableNodes, collectProjectedNodes } from "./projection.js";
 export default (element) => {
-    return (Component, props) => {
+    return (Component, props, slots) => {
         const mirror = reflectComponentType(Component);
         if (!mirror) {
             // Not an Angular component
@@ -20,7 +21,12 @@ export default (element) => {
             reuseDom = false;
         }
         const ngAppId = hostElement?.getAttribute(ID_PROP_NAME);
-        createApplication({
+        // Hydration reuses the server-rendered DOM, so hand Angular the projected
+        // nodes it already rendered instead of freshly parsed copies.
+        const projectableNodes = (reuseDom && ngAppId
+            ? collectProjectedNodes(hostElement, mirror, ngAppId)
+            : undefined) ?? buildProjectableNodes(mirror, slots, document);
+        return createApplication({
             providers: [
                 provideZonelessChangeDetection(),
                 reuseDom
@@ -37,13 +43,11 @@ export default (element) => {
             const componentRef = createComponent(Component, {
                 environmentInjector: appRef.injector,
                 hostElement,
+                projectableNodes,
                 bindings: createComponentBindings(mirror, props, hostElement),
             });
-            appRef.attachView(componentRef.hostView);
-            appRef.components.push(componentRef);
-            appRef.injector
-                .get(APP_BOOTSTRAP_LISTENER, [])
-                .forEach((cb) => cb(componentRef));
+            registerRootComponent(appRef, componentRef);
+            return appRef;
         })
             .catch((error) => {
             console.error('Failed to hydrate Angular component:', error);

package/src/client-ngh.js.map

@@ -1 +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"]}
+{"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,GAChB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,EAGjB,sBAAsB,GACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE/E,eAAe,CAAC,OAAoB,EAAE,EAAE;IACtC,OAAO,CACL,SAGC,EACD,KAA+B,EAC/B,KAAe,EACf,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,0EAA0E;QAC1E,8DAA8D;QAC9D,MAAM,gBAAgB,GACpB,CAAC,QAAQ,IAAI,OAAO;YAClB,CAAC,CAAC,qBAAqB,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC;YACrD,CAAC,CAAC,SAAS,CAAC,IAAI,qBAAqB,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QAEnE,OAAO,iBAAiB,CAAC;YACvB,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,gBAAgB;gBAChB,QAAQ,EAAE,uBAAuB,CAAC,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC;aAC9D,CAAC,CAAC;YAEH,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;YAE5C,OAAO,MAAM,CAAC;QAChB,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} 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  registerRootComponent,\n} from './create-component.ts';\nimport { ID_PROP_NAME } from './id.ts';\nimport { ensureSsrIntegrityMarker } from './ssr-integrity.ts';\nimport { buildProjectableNodes, collectProjectedNodes } from './projection.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    slots?: 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    // Hydration reuses the server-rendered DOM, so hand Angular the projected\n    // nodes it already rendered instead of freshly parsed copies.\n    const projectableNodes =\n      (reuseDom && ngAppId\n        ? collectProjectedNodes(hostElement, mirror, ngAppId)\n        : undefined) ?? buildProjectableNodes(mirror, slots, document);\n\n    return 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          projectableNodes,\n          bindings: createComponentBindings(mirror, props, hostElement),\n        });\n\n        registerRootComponent(appRef, componentRef);\n\n        return appRef;\n      })\n      .catch((error) => {\n        console.error('Failed to hydrate Angular component:', error);\n      });\n  };\n};\n"]}

package/src/client.d.ts

@@ -1,6 +1,6 @@
 import { EnvironmentProviders, Provider, ɵComponentType as ComponentType } from '@angular/core';
 declare const _default: (element: HTMLElement) => (Component: ComponentType<unknown> & {
     clientProviders?: (Provider | EnvironmentProviders)[];
-}, props?: Record<string, unknown>, _childHTML?: unknown) => void;
+}, props?: Record<string, unknown>, slots?: unknown) => void;
 export default _default;
 //# sourceMappingURL=client.d.ts.map

package/src/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/client.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,QAAQ,EAER,cAAc,IAAI,aAAa,EAEhC,MAAM,eAAe,CAAC;yBAKP,SAAS,WAAW,MAEhC,WAAW,aAAa,CAAC,OAAO,CAAC,GAAG;IAClC,eAAe,CAAC,EAAE,CAAC,QAAQ,GAAG,oBAAoB,CAAC,EAAE,CAAC;CACvD,EACD,QAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,aAAa,OAAO;AANxB,wBAoEE"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/client.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,QAAQ,EAER,cAAc,IAAI,aAAa,EAEhC,MAAM,eAAe,CAAC;yBAMP,SAAS,WAAW,MAEhC,WAAW,aAAa,CAAC,OAAO,CAAC,GAAG;IAClC,eAAe,CAAC,EAAE,CAAC,QAAQ,GAAG,oBAAoB,CAAC,EAAE,CAAC;CACvD,EACD,QAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,QAAQ,OAAO;AANnB,wBA2EE"}

package/src/client.js

@@ -2,8 +2,14 @@ import { reflectComponentType, provideZonelessChangeDetection, } from '@angular/
 import { createComponent } from '@angular/core';
 import { createApplication } from '@angular/platform-browser';
 import { Subject, takeUntil } from 'rxjs';
+import { buildProjectableNodes } from "./projection.js";
 export default (element) => {
-    return (Component, props, _childHTML) => {
+    return (Component, props, slots) => {
+        const mirror = reflectComponentType(Component);
+        if (!mirror) {
+            // Not an Angular component
+            return;
+        }
         createApplication({
             providers: [
                 provideZonelessChangeDetection(),
@@ -13,16 +19,16 @@ export default (element) => {
             const componentRef = createComponent(Component, {
                 environmentInjector: appRef.injector,
                 hostElement: element,
+                projectableNodes: buildProjectableNodes(mirror, slots, document),
             });
-            const mirror = reflectComponentType(Component);
-            if (props && mirror) {
+            if (props) {
                 for (const [key, value] of Object.entries(props)) {
                     if (mirror.inputs.some(({ templateName, propName }) => templateName === key || propName === key)) {
                         componentRef.setInput(key, value);
                     }
                 }
             }
-            if (mirror?.outputs.length && props?.['data-analog-id']) {
+            if (mirror.outputs.length && props?.['data-analog-id']) {
                 const destroySubject = new Subject();
                 element.setAttribute('data-analog-id', props['data-analog-id']);
                 mirror.outputs.forEach(({ templateName, propName }) => {

package/src/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/client.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,oBAAoB,EAEpB,8BAA8B,GAC/B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAkB,eAAe,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAc,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAEtD,eAAe,CAAC,OAAoB,EAAE,EAAE;IACtC,OAAO,CACL,SAEC,EACD,KAA+B,EAC/B,UAAoB,EACpB,EAAE;QACF,iBAAiB,CAAC;YAChB,SAAS,EAAE;gBACT,8BAA8B,EAAE;gBAChC,GAAG,CAAC,SAAS,CAAC,eAAe,IAAI,EAAE,CAAC;aACrC;SACF,CAAC,CAAC,IAAI,CAAC,CAAC,MAAsB,EAAE,EAAE;YACjC,MAAM,YAAY,GAAG,eAAe,CAAC,SAAS,EAAE;gBAC9C,mBAAmB,EAAE,MAAM,CAAC,QAAQ;gBACpC,WAAW,EAAE,OAAO;aACrB,CAAC,CAAC;YAEH,MAAM,MAAM,GAAG,oBAAoB,CAAC,SAAS,CAAC,CAAC;YAC/C,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;gBACpB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;oBACjD,IACE,MAAM,CAAC,MAAM,CAAC,IAAI,CAChB,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC7B,YAAY,KAAK,GAAG,IAAI,QAAQ,KAAK,GAAG,CAC3C,EACD,CAAC;wBACD,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;oBACpC,CAAC;gBACH,CAAC;YACH,CAAC;YAED,IAAI,MAAM,EAAE,OAAO,CAAC,MAAM,IAAI,KAAK,EAAE,CAAC,gBAAgB,CAAC,EAAE,CAAC;gBACxD,MAAM,cAAc,GAAG,IAAI,OAAO,EAAQ,CAAC;gBAC3C,OAAO,CAAC,YAAY,CAClB,gBAAgB,EAChB,KAAK,CAAC,gBAAgB,CAAW,CAClC,CAAC;gBAEF,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE;oBACpD,MAAM,UAAU,GAAG,YAAY,IAAI,QAAQ,CAAC;oBAC5C,MAAM,SAAS,GAAG,YAAY,CAAC,QAG9B,CAAC;oBACF,SAAS,CAAC,UAAU,CAAC;yBAClB,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;yBAC/B,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE;wBACpB,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,UAAU,EAAE;4BACxC,OAAO,EAAE,IAAI;4BACb,UAAU,EAAE,IAAI;4BAChB,QAAQ,EAAE,IAAI;4BACd,MAAM;yBACP,CAAC,CAAC;wBACH,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBAC/B,CAAC,CAAC,CAAC;gBACP,CAAC,CAAC,CAAC;gBAEH,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE;oBACpB,cAAc,CAAC,IAAI,EAAE,CAAC;oBACtB,cAAc,CAAC,QAAQ,EAAE,CAAC;gBAC5B,CAAC,CAAC,CAAC;YACL,CAAC;YAED,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  EnvironmentProviders,\n  Provider,\n  reflectComponentType,\n  ɵComponentType as ComponentType,\n  provideZonelessChangeDetection,\n} from '@angular/core';\nimport { ApplicationRef, createComponent } from '@angular/core';\nimport { createApplication } from '@angular/platform-browser';\nimport { Observable, Subject, takeUntil } from 'rxjs';\n\nexport default (element: HTMLElement) => {\n  return (\n    Component: ComponentType<unknown> & {\n      clientProviders?: (Provider | EnvironmentProviders)[];\n    },\n    props?: Record<string, unknown>,\n    _childHTML?: unknown,\n  ) => {\n    createApplication({\n      providers: [\n        provideZonelessChangeDetection(),\n        ...(Component.clientProviders || []),\n      ],\n    }).then((appRef: ApplicationRef) => {\n      const componentRef = createComponent(Component, {\n        environmentInjector: appRef.injector,\n        hostElement: element,\n      });\n\n      const mirror = reflectComponentType(Component);\n      if (props && mirror) {\n        for (const [key, value] of Object.entries(props)) {\n          if (\n            mirror.inputs.some(\n              ({ templateName, propName }) =>\n                templateName === key || propName === key,\n            )\n          ) {\n            componentRef.setInput(key, value);\n          }\n        }\n      }\n\n      if (mirror?.outputs.length && props?.['data-analog-id']) {\n        const destroySubject = new Subject<void>();\n        element.setAttribute(\n          'data-analog-id',\n          props['data-analog-id'] as string,\n        );\n\n        mirror.outputs.forEach(({ templateName, propName }) => {\n          const outputName = templateName || propName;\n          const component = componentRef.instance as Record<\n            string,\n            Observable<unknown>\n          >;\n          component[outputName]\n            .pipe(takeUntil(destroySubject))\n            .subscribe((detail) => {\n              const event = new CustomEvent(outputName, {\n                bubbles: true,\n                cancelable: true,\n                composed: true,\n                detail,\n              });\n              element.dispatchEvent(event);\n            });\n        });\n\n        appRef.onDestroy(() => {\n          destroySubject.next();\n          destroySubject.complete();\n        });\n      }\n\n      appRef.attachView(componentRef.hostView);\n    });\n  };\n};\n"]}
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/client.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  EnvironmentProviders,\n  Provider,\n  reflectComponentType,\n  ɵComponentType as ComponentType,\n  provideZonelessChangeDetection,\n} from '@angular/core';\nimport { ApplicationRef, createComponent } from '@angular/core';\nimport { createApplication } from '@angular/platform-browser';\nimport { Observable, Subject, takeUntil } from 'rxjs';\nimport { buildProjectableNodes } from './projection.ts';\n\nexport default (element: HTMLElement) => {\n  return (\n    Component: ComponentType<unknown> & {\n      clientProviders?: (Provider | EnvironmentProviders)[];\n    },\n    props?: Record<string, unknown>,\n    slots?: unknown,\n  ) => {\n    const mirror = reflectComponentType(Component);\n\n    if (!mirror) {\n      // Not an Angular component\n      return;\n    }\n\n    createApplication({\n      providers: [\n        provideZonelessChangeDetection(),\n        ...(Component.clientProviders || []),\n      ],\n    }).then((appRef: ApplicationRef) => {\n      const componentRef = createComponent(Component, {\n        environmentInjector: appRef.injector,\n        hostElement: element,\n        projectableNodes: buildProjectableNodes(mirror, slots, document),\n      });\n\n      if (props) {\n        for (const [key, value] of Object.entries(props)) {\n          if (\n            mirror.inputs.some(\n              ({ templateName, propName }) =>\n                templateName === key || propName === key,\n            )\n          ) {\n            componentRef.setInput(key, value);\n          }\n        }\n      }\n\n      if (mirror.outputs.length && props?.['data-analog-id']) {\n        const destroySubject = new Subject<void>();\n        element.setAttribute(\n          'data-analog-id',\n          props['data-analog-id'] as string,\n        );\n\n        mirror.outputs.forEach(({ templateName, propName }) => {\n          const outputName = templateName || propName;\n          const component = componentRef.instance as Record<\n            string,\n            Observable<unknown>\n          >;\n          component[outputName]\n            .pipe(takeUntil(destroySubject))\n            .subscribe((detail) => {\n              const event = new CustomEvent(outputName, {\n                bubbles: true,\n                cancelable: true,\n                composed: true,\n                detail,\n              });\n              element.dispatchEvent(event);\n            });\n        });\n\n        appRef.onDestroy(() => {\n          destroySubject.next();\n          destroySubject.complete();\n        });\n      }\n\n      appRef.attachView(componentRef.hostView);\n    });\n  };\n};\n"]}

package/src/create-component.d.ts

@@ -1,6 +1,13 @@
-import { type Binding, type ComponentMirror } from '@angular/core';
+import { type ApplicationRef, type Binding, type ComponentMirror, type ComponentRef } 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[];
+/**
+ * Registers a component created with `createComponent` as a root component,
+ * the way `bootstrapApplication` does: attach the view, track it on the
+ * application, run the initial change detection and notify
+ * `APP_BOOTSTRAP_LISTENER`s such as the router's.
+ */
+export declare function registerRootComponent(appRef: ApplicationRef, componentRef: ComponentRef<unknown>): void;
 //# sourceMappingURL=create-component.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"create-component.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/create-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,OAAO,EACZ,KAAK,eAAe,EACpB,KAAK,YAAY,EAGlB,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;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,cAAc,EACtB,YAAY,EAAE,YAAY,CAAC,OAAO,CAAC,GAClC,IAAI,CAON"}

package/src/create-component.js

@@ -1,4 +1,4 @@
-import { inputBinding, outputBinding, } from '@angular/core';
+import { APP_BOOTSTRAP_LISTENER, inputBinding, outputBinding, } from '@angular/core';
 import { ID_PROP_NAME } from "./id.js";
 export function getComponentElementTag(mirror) {
     return mirror.selector.split(',')[0] || 'ng-component';
@@ -32,4 +32,18 @@ export function createComponentBindings(mirror, props, hostElement) {
     const outputBindings = createOutputBindings(hostElement, mirror);
     return [...inputBindings, ...outputBindings];
 }
+/**
+ * Registers a component created with `createComponent` as a root component,
+ * the way `bootstrapApplication` does: attach the view, track it on the
+ * application, run the initial change detection and notify
+ * `APP_BOOTSTRAP_LISTENER`s such as the router's.
+ */
+export function registerRootComponent(appRef, componentRef) {
+    appRef.attachView(componentRef.hostView);
+    appRef.tick();
+    appRef.components.push(componentRef);
+    appRef.injector
+        .get(APP_BOOTSTRAP_LISTENER, [])
+        .forEach((listener) => listener(componentRef));
+}
 //# sourceMappingURL=create-component.js.map

package/src/create-component.js.map

@@ -1 +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"]}
+{"version":3,"file":"create-component.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/create-component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EAKtB,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;AAED;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CACnC,MAAsB,EACtB,YAAmC;IAEnC,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,CAAC,IAAI,EAAE,CAAC;IACd,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACrC,MAAM,CAAC,QAAQ;SACZ,GAAG,CAAC,sBAAsB,EAAE,EAAE,CAAC;SAC/B,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC;AACnD,CAAC","sourcesContent":["import {\n  APP_BOOTSTRAP_LISTENER,\n  type ApplicationRef,\n  type Binding,\n  type ComponentMirror,\n  type ComponentRef,\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\n/**\n * Registers a component created with `createComponent` as a root component,\n * the way `bootstrapApplication` does: attach the view, track it on the\n * application, run the initial change detection and notify\n * `APP_BOOTSTRAP_LISTENER`s such as the router's.\n */\nexport function registerRootComponent(\n  appRef: ApplicationRef,\n  componentRef: ComponentRef<unknown>,\n): void {\n  appRef.attachView(componentRef.hostView);\n  appRef.tick();\n  appRef.components.push(componentRef);\n  appRef.injector\n    .get(APP_BOOTSTRAP_LISTENER, [])\n    .forEach((listener) => listener(componentRef));\n}\n"]}

package/src/projection.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentMirror } from '@angular/core';
+/**
+ * Distributes the HTML Astro rendered for the component's slots across the
+ * component's `<ng-content>` slots, using Angular's own selector semantics.
+ *
+ * The result is indexed to match `mirror.ngContentSelectors`. Angular does not
+ * apply `select` matching to `projectableNodes`, so the matching happens here.
+ * @param mirror The component mirror, to read the `ng-content` selectors
+ * @param slots The slot HTML passed by Astro, keyed by slot name
+ * @param document The document the component is rendered into
+ * @returns The nodes to project, or `undefined` when the component has no `ng-content`
+ */
+export declare function buildProjectableNodes(mirror: ComponentMirror<unknown>, slots: unknown, document: Document): Node[][] | undefined;
+/**
+ * Wraps each non-empty slot in comment markers, so the client can find the
+ * server-rendered nodes again when hydrating. Angular reuses the DOM during
+ * hydration, so it must be handed those nodes rather than freshly parsed ones.
+ * @param projectableNodes The distributed nodes, see `buildProjectableNodes`
+ * @param appId The island's APP_ID, to keep markers apart from nested islands
+ * @param document The document the component is rendered into
+ */
+export declare function markProjectableNodes(projectableNodes: Node[][], appId: string, document: Document): Node[][];
+/**
+ * Collects the server-rendered projected nodes from the host element using the
+ * markers added by `markProjectableNodes`.
+ * @returns The nodes per slot, or `undefined` when the host carries no markers
+ */
+export declare function collectProjectedNodes(hostElement: Element, mirror: ComponentMirror<unknown>, appId: string): Node[][] | undefined;
+//# sourceMappingURL=projection.d.ts.map

package/src/projection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"projection.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/projection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAUrD;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,EAChC,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,QAAQ,GACjB,IAAI,EAAE,EAAE,GAAG,SAAS,CA6BtB;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,gBAAgB,EAAE,IAAI,EAAE,EAAE,EAC1B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,QAAQ,GACjB,IAAI,EAAE,EAAE,CAUV;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,OAAO,EACpB,MAAM,EAAE,eAAe,CAAC,OAAO,CAAC,EAChC,KAAK,EAAE,MAAM,GACZ,IAAI,EAAE,EAAE,GAAG,SAAS,CA4CtB"}

package/src/projection.js

@@ -0,0 +1,124 @@
+import { isSameSelector, parseSelectorList } from "./selector.js";
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+const COMMENT_NODE = 8;
+const SHOW_COMMENT = 128;
+const MARKER_PREFIX = 'analog-slot:';
+/**
+ * Distributes the HTML Astro rendered for the component's slots across the
+ * component's `<ng-content>` slots, using Angular's own selector semantics.
+ *
+ * The result is indexed to match `mirror.ngContentSelectors`. Angular does not
+ * apply `select` matching to `projectableNodes`, so the matching happens here.
+ * @param mirror The component mirror, to read the `ng-content` selectors
+ * @param slots The slot HTML passed by Astro, keyed by slot name
+ * @param document The document the component is rendered into
+ * @returns The nodes to project, or `undefined` when the component has no `ng-content`
+ */
+export function buildProjectableNodes(mirror, slots, document) {
+    const selectors = mirror.ngContentSelectors;
+    if (!selectors.length) {
+        return undefined;
+    }
+    const projectableNodes = selectors.map(() => []);
+    // As in Angular, unmatched content goes to the last default slot.
+    const wildcardIndex = selectors.lastIndexOf('*');
+    for (const node of parseSlots(slots, document)) {
+        // Angular drops whitespace-only text nodes between elements at compile
+        // time, so projecting them would only suppress `ng-content` fallbacks.
+        if (node.nodeType === TEXT_NODE && !node.textContent?.trim()) {
+            continue;
+        }
+        const matched = selectors.findIndex((selector) => selector !== '*' && matches(node, selector));
+        const target = matched > -1 ? matched : wildcardIndex;
+        if (target > -1) {
+            projectableNodes[target].push(node);
+        }
+    }
+    return projectableNodes;
+}
+/**
+ * Wraps each non-empty slot in comment markers, so the client can find the
+ * server-rendered nodes again when hydrating. Angular reuses the DOM during
+ * hydration, so it must be handed those nodes rather than freshly parsed ones.
+ * @param projectableNodes The distributed nodes, see `buildProjectableNodes`
+ * @param appId The island's APP_ID, to keep markers apart from nested islands
+ * @param document The document the component is rendered into
+ */
+export function markProjectableNodes(projectableNodes, appId, document) {
+    return projectableNodes.map((nodes, index) => nodes.length
+        ? [
+            document.createComment(`${MARKER_PREFIX}${appId}:${index}`),
+            ...nodes,
+            document.createComment(`/${MARKER_PREFIX}${appId}:${index}`),
+        ]
+        : nodes);
+}
+/**
+ * Collects the server-rendered projected nodes from the host element using the
+ * markers added by `markProjectableNodes`.
+ * @returns The nodes per slot, or `undefined` when the host carries no markers
+ */
+export function collectProjectedNodes(hostElement, mirror, appId) {
+    const selectors = mirror.ngContentSelectors;
+    if (!selectors.length) {
+        return undefined;
+    }
+    const projectableNodes = selectors.map(() => []);
+    const walker = hostElement.ownerDocument.createTreeWalker(hostElement, SHOW_COMMENT);
+    let found = false;
+    for (let start = walker.nextNode(); start; start = walker.nextNode()) {
+        const match = start.textContent?.startsWith(`${MARKER_PREFIX}${appId}:`)
+            ? Number(start.textContent.slice(`${MARKER_PREFIX}${appId}:`.length))
+            : NaN;
+        if (Number.isNaN(match) || match >= selectors.length) {
+            continue;
+        }
+        const end = `/${MARKER_PREFIX}${appId}:${match}`;
+        const nodes = [start];
+        let node = start.nextSibling;
+        while (node &&
+            !(node.nodeType === COMMENT_NODE && node.textContent === end)) {
+            nodes.push(node);
+            node = node.nextSibling;
+        }
+        if (node) {
+            nodes.push(node);
+        }
+        projectableNodes[match] = nodes;
+        found = true;
+    }
+    return found ? projectableNodes : undefined;
+}
+function parseSlots(slots, document) {
+    const html = slots && typeof slots === 'object'
+        ? Object.values(slots).join('')
+        : String(slots ?? '');
+    if (!html) {
+        return [];
+    }
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    return Array.from(template.content.childNodes);
+}
+function matches(node, selector) {
+    if (node.nodeType !== ELEMENT_NODE) {
+        return false;
+    }
+    const element = node;
+    const projectAs = element.getAttribute('ngProjectAs');
+    // As in Angular, `ngProjectAs` replaces the element's own selector and is
+    // compared structurally against the `select` list.
+    if (projectAs !== null) {
+        const [alias] = parseSelectorList(projectAs);
+        return parseSelectorList(selector).some((candidate) => isSameSelector(alias, candidate));
+    }
+    try {
+        return element.matches(selector);
+    }
+    catch {
+        // `ngContentSelectors` may contain selectors that `matches()` rejects.
+        return false;
+    }
+}
+//# sourceMappingURL=projection.js.map

package/src/projection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"projection.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/projection.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentMirror } from '@angular/core';\nimport { isSameSelector, parseSelectorList } from './selector.ts';\n\nconst ELEMENT_NODE = 1;\nconst TEXT_NODE = 3;\nconst COMMENT_NODE = 8;\nconst SHOW_COMMENT = 128;\n\nconst MARKER_PREFIX = 'analog-slot:';\n\n/**\n * Distributes the HTML Astro rendered for the component's slots across the\n * component's `<ng-content>` slots, using Angular's own selector semantics.\n *\n * The result is indexed to match `mirror.ngContentSelectors`. Angular does not\n * apply `select` matching to `projectableNodes`, so the matching happens here.\n * @param mirror The component mirror, to read the `ng-content` selectors\n * @param slots The slot HTML passed by Astro, keyed by slot name\n * @param document The document the component is rendered into\n * @returns The nodes to project, or `undefined` when the component has no `ng-content`\n */\nexport function buildProjectableNodes(\n  mirror: ComponentMirror<unknown>,\n  slots: unknown,\n  document: Document,\n): Node[][] | undefined {\n  const selectors = mirror.ngContentSelectors;\n\n  if (!selectors.length) {\n    return undefined;\n  }\n\n  const projectableNodes: Node[][] = selectors.map(() => []);\n  // As in Angular, unmatched content goes to the last default slot.\n  const wildcardIndex = selectors.lastIndexOf('*');\n\n  for (const node of parseSlots(slots, document)) {\n    // Angular drops whitespace-only text nodes between elements at compile\n    // time, so projecting them would only suppress `ng-content` fallbacks.\n    if (node.nodeType === TEXT_NODE && !node.textContent?.trim()) {\n      continue;\n    }\n\n    const matched = selectors.findIndex(\n      (selector) => selector !== '*' && matches(node, selector),\n    );\n    const target = matched > -1 ? matched : wildcardIndex;\n\n    if (target > -1) {\n      projectableNodes[target].push(node);\n    }\n  }\n\n  return projectableNodes;\n}\n\n/**\n * Wraps each non-empty slot in comment markers, so the client can find the\n * server-rendered nodes again when hydrating. Angular reuses the DOM during\n * hydration, so it must be handed those nodes rather than freshly parsed ones.\n * @param projectableNodes The distributed nodes, see `buildProjectableNodes`\n * @param appId The island's APP_ID, to keep markers apart from nested islands\n * @param document The document the component is rendered into\n */\nexport function markProjectableNodes(\n  projectableNodes: Node[][],\n  appId: string,\n  document: Document,\n): Node[][] {\n  return projectableNodes.map((nodes, index) =>\n    nodes.length\n      ? [\n          document.createComment(`${MARKER_PREFIX}${appId}:${index}`),\n          ...nodes,\n          document.createComment(`/${MARKER_PREFIX}${appId}:${index}`),\n        ]\n      : nodes,\n  );\n}\n\n/**\n * Collects the server-rendered projected nodes from the host element using the\n * markers added by `markProjectableNodes`.\n * @returns The nodes per slot, or `undefined` when the host carries no markers\n */\nexport function collectProjectedNodes(\n  hostElement: Element,\n  mirror: ComponentMirror<unknown>,\n  appId: string,\n): Node[][] | undefined {\n  const selectors = mirror.ngContentSelectors;\n\n  if (!selectors.length) {\n    return undefined;\n  }\n\n  const projectableNodes: Node[][] = selectors.map(() => []);\n  const walker = hostElement.ownerDocument.createTreeWalker(\n    hostElement,\n    SHOW_COMMENT,\n  );\n  let found = false;\n\n  for (let start = walker.nextNode(); start; start = walker.nextNode()) {\n    const match = start.textContent?.startsWith(`${MARKER_PREFIX}${appId}:`)\n      ? Number(start.textContent.slice(`${MARKER_PREFIX}${appId}:`.length))\n      : NaN;\n\n    if (Number.isNaN(match) || match >= selectors.length) {\n      continue;\n    }\n\n    const end = `/${MARKER_PREFIX}${appId}:${match}`;\n    const nodes: Node[] = [start];\n    let node = start.nextSibling;\n\n    while (\n      node &&\n      !(node.nodeType === COMMENT_NODE && node.textContent === end)\n    ) {\n      nodes.push(node);\n      node = node.nextSibling;\n    }\n\n    if (node) {\n      nodes.push(node);\n    }\n\n    projectableNodes[match] = nodes;\n    found = true;\n  }\n\n  return found ? projectableNodes : undefined;\n}\n\nfunction parseSlots(slots: unknown, document: Document): Node[] {\n  const html =\n    slots && typeof slots === 'object'\n      ? Object.values(slots).join('')\n      : String(slots ?? '');\n\n  if (!html) {\n    return [];\n  }\n\n  const template = document.createElement('template');\n  template.innerHTML = html;\n\n  return Array.from(template.content.childNodes);\n}\n\nfunction matches(node: Node, selector: string): boolean {\n  if (node.nodeType !== ELEMENT_NODE) {\n    return false;\n  }\n\n  const element = node as Element;\n  const projectAs = element.getAttribute('ngProjectAs');\n\n  // As in Angular, `ngProjectAs` replaces the element's own selector and is\n  // compared structurally against the `select` list.\n  if (projectAs !== null) {\n    const [alias] = parseSelectorList(projectAs);\n    return parseSelectorList(selector).some((candidate) =>\n      isSameSelector(alias, candidate),\n    );\n  }\n\n  try {\n    return element.matches(selector);\n  } catch {\n    // `ngContentSelectors` may contain selectors that `matches()` rejects.\n    return false;\n  }\n}\n"]}

package/src/selector.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A CSS selector in the shape Angular's compiler uses for `ng-content` and
+ * `ngProjectAs` matching. Ported from `CssSelector` in `@angular/compiler`.
+ */
+export interface ParsedSelector {
+    element: string;
+    attrs: [string, string][];
+    classNames: string[];
+    notSelectors: ParsedSelector[];
+}
+export declare function parseSelectorList(selector: string): ParsedSelector[];
+/**
+ * Structural equality, matching how Angular compares an `ngProjectAs` selector
+ * against the selectors of an `ng-content`.
+ */
+export declare function isSameSelector(a: ParsedSelector, b: ParsedSelector): boolean;
+//# sourceMappingURL=selector.d.ts.map

package/src/selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/selector.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAC1B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,YAAY,EAAE,cAAc,EAAE,CAAC;CAChC;AAuBD,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,cAAc,EAAE,CA+CpE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE,cAAc,GAAG,OAAO,CAa5E"}

package/src/selector.js

@@ -0,0 +1,78 @@
+const SELECTOR_REGEXP = new RegExp('(\\:not\\()|' + // 1: ":not("
+    '(([\\.\\#]?)[-\\w]+)|' + // 2: "tag"; 3: "."/"#"
+    '(?:\\[([-.\\w*\\\\$]+)(?:=(["\']?)([^\\]"\']*)\\5)?\\])|' + // 4: attribute; 5: quote; 6: value
+    '(\\))|' + // 7: ")"
+    '(\\s*,\\s*)', // 8: ","
+'g');
+const NOT = 1;
+const TAG = 2;
+const PREFIX = 3;
+const ATTRIBUTE = 4;
+const ATTRIBUTE_VALUE = 6;
+const NOT_END = 7;
+const SEPARATOR = 8;
+function createSelector() {
+    return { element: '', attrs: [], classNames: [], notSelectors: [] };
+}
+export function parseSelectorList(selector) {
+    const results = [];
+    let cssSelector = createSelector();
+    let current = cssSelector;
+    let inNot = false;
+    let match;
+    const regexp = new RegExp(SELECTOR_REGEXP.source, 'g');
+    while ((match = regexp.exec(selector))) {
+        if (match[NOT]) {
+            inNot = true;
+            current = createSelector();
+            cssSelector.notSelectors.push(current);
+        }
+        const tag = match[TAG];
+        if (tag) {
+            const prefix = match[PREFIX];
+            if (prefix === '#') {
+                current.attrs.push(['id', tag.slice(1)]);
+            }
+            else if (prefix === '.') {
+                current.classNames.push(tag.slice(1).toLowerCase());
+            }
+            else {
+                current.element = tag;
+            }
+        }
+        const attribute = match[ATTRIBUTE];
+        if (attribute) {
+            current.attrs.push([attribute, match[ATTRIBUTE_VALUE] ?? '']);
+        }
+        if (match[NOT_END]) {
+            inNot = false;
+            current = cssSelector;
+        }
+        if (match[SEPARATOR]) {
+            results.push(cssSelector);
+            cssSelector = current = createSelector();
+        }
+    }
+    results.push(cssSelector);
+    return results;
+}
+/**
+ * Structural equality, matching how Angular compares an `ngProjectAs` selector
+ * against the selectors of an `ng-content`.
+ */
+export function isSameSelector(a, b) {
+    return (normalizeElement(a.element) === normalizeElement(b.element) &&
+        a.attrs.length === b.attrs.length &&
+        a.attrs.every(([name, value], i) => {
+            const [otherName, otherValue] = b.attrs[i];
+            return name === otherName && value === otherValue;
+        }) &&
+        a.classNames.length === b.classNames.length &&
+        a.classNames.every((name, i) => name === b.classNames[i]) &&
+        a.notSelectors.length === b.notSelectors.length &&
+        a.notSelectors.every((not, i) => isSameSelector(not, b.notSelectors[i])));
+}
+function normalizeElement(element) {
+    return element === '*' ? '' : element;
+}
+//# sourceMappingURL=selector.js.map

package/src/selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/selector.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * A CSS selector in the shape Angular's compiler uses for `ng-content` and\n * `ngProjectAs` matching. Ported from `CssSelector` in `@angular/compiler`.\n */\nexport interface ParsedSelector {\n  element: string;\n  attrs: [string, string][];\n  classNames: string[];\n  notSelectors: ParsedSelector[];\n}\n\nconst SELECTOR_REGEXP = new RegExp(\n  '(\\\\:not\\\\()|' + // 1: \":not(\"\n    '(([\\\\.\\\\#]?)[-\\\\w]+)|' + // 2: \"tag\"; 3: \".\"/\"#\"\n    '(?:\\\\[([-.\\\\w*\\\\\\\\$]+)(?:=([\"\\']?)([^\\\\]\"\\']*)\\\\5)?\\\\])|' + // 4: attribute; 5: quote; 6: value\n    '(\\\\))|' + // 7: \")\"\n    '(\\\\s*,\\\\s*)', // 8: \",\"\n  'g',\n);\n\nconst NOT = 1;\nconst TAG = 2;\nconst PREFIX = 3;\nconst ATTRIBUTE = 4;\nconst ATTRIBUTE_VALUE = 6;\nconst NOT_END = 7;\nconst SEPARATOR = 8;\n\nfunction createSelector(): ParsedSelector {\n  return { element: '', attrs: [], classNames: [], notSelectors: [] };\n}\n\nexport function parseSelectorList(selector: string): ParsedSelector[] {\n  const results: ParsedSelector[] = [];\n  let cssSelector = createSelector();\n  let current = cssSelector;\n  let inNot = false;\n  let match: RegExpExecArray | null;\n\n  const regexp = new RegExp(SELECTOR_REGEXP.source, 'g');\n\n  while ((match = regexp.exec(selector))) {\n    if (match[NOT]) {\n      inNot = true;\n      current = createSelector();\n      cssSelector.notSelectors.push(current);\n    }\n\n    const tag = match[TAG];\n    if (tag) {\n      const prefix = match[PREFIX];\n      if (prefix === '#') {\n        current.attrs.push(['id', tag.slice(1)]);\n      } else if (prefix === '.') {\n        current.classNames.push(tag.slice(1).toLowerCase());\n      } else {\n        current.element = tag;\n      }\n    }\n\n    const attribute = match[ATTRIBUTE];\n    if (attribute) {\n      current.attrs.push([attribute, match[ATTRIBUTE_VALUE] ?? '']);\n    }\n\n    if (match[NOT_END]) {\n      inNot = false;\n      current = cssSelector;\n    }\n\n    if (match[SEPARATOR]) {\n      results.push(cssSelector);\n      cssSelector = current = createSelector();\n    }\n  }\n\n  results.push(cssSelector);\n\n  return results;\n}\n\n/**\n * Structural equality, matching how Angular compares an `ngProjectAs` selector\n * against the selectors of an `ng-content`.\n */\nexport function isSameSelector(a: ParsedSelector, b: ParsedSelector): boolean {\n  return (\n    normalizeElement(a.element) === normalizeElement(b.element) &&\n    a.attrs.length === b.attrs.length &&\n    a.attrs.every(([name, value], i) => {\n      const [otherName, otherValue] = b.attrs[i];\n      return name === otherName && value === otherValue;\n    }) &&\n    a.classNames.length === b.classNames.length &&\n    a.classNames.every((name, i) => name === b.classNames[i]) &&\n    a.notSelectors.length === b.notSelectors.length &&\n    a.notSelectors.every((not, i) => isSameSelector(not, b.notSelectors[i]))\n  );\n}\n\nfunction normalizeElement(element: string): string {\n  return element === '*' ? '' : element;\n}\n"]}

package/src/server-ngh.d.ts

@@ -6,7 +6,7 @@ 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<{
+}, props: Record<string, unknown>, children: unknown, metadata?: AstroComponentMetadata): Promise<{
     html: string;
 }>;
 declare const _default: {

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

@@ -1 +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"}
+{"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;AAc1E,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;AAyB7E,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,QAAQ,EAAE,OAAO,EACjB,QAAQ,CAAC,EAAE,sBAAsB;;GAyFlC;;;;;;AAED,wBAImC"}

package/src/server-ngh.js

@@ -1,12 +1,12 @@
 import { readFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
-import { reflectComponentType, provideZonelessChangeDetection, DOCUMENT, APP_ID, } from '@angular/core';
+import { createComponent, 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 { createApplication, 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";
+import { createInputBindings, getComponentElementTag, registerRootComponent, } from "./create-component.js";
+import { buildProjectableNodes, markProjectableNodes } from "./projection.js";
 const require = createRequire(import.meta.url);
 let jsActionContractScript = undefined;
 const HYDRATION_SCRIPT_ID = 'ng-event-dispatch-contract';
@@ -20,7 +20,7 @@ function getHydrationScript() {
 async function check(Component) {
     return !!reflectComponentType(Component);
 }
-async function renderToStaticMarkup(Component, props, _children, metadata) {
+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.
@@ -36,22 +36,36 @@ async function renderToStaticMarkup(Component, props, _children, metadata) {
     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 hostElement = document.querySelector(elementTag);
+    let projectableNodes = buildProjectableNodes(mirror, children, document);
+    if (metadata?.hydrate && projectableNodes) {
+        projectableNodes = markProjectableNodes(projectableNodes, String(ngAppId), document);
+    }
+    const bootstrap = async (context) => {
+        const appRef = await createApplication({
+            providers: [
+                provideServerRendering(),
+                { provide: ɵSERVER_CONTEXT, useValue: 'analog' },
+                provideZonelessChangeDetection(),
+                metadata?.hydrate
+                    ? provideClientHydration(...(Component.hydrationFeatures?.() || []))
+                    : [],
+                {
+                    provide: APP_ID,
+                    useValue: ngAppId,
+                },
+                ...(Component.renderProviders || []),
+            ],
+        }, context);
+        const componentRef = createComponent(Component, {
+            environmentInjector: appRef.injector,
+            hostElement,
+            projectableNodes,
+            bindings: createInputBindings(mirror, props),
+        });
+        registerRootComponent(appRef, componentRef);
+        return appRef;
+    };
     const html = await renderApplication(bootstrap, {
         document,
     });

package/src/server-ngh.js.map

@@ -1 +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"]}
+{"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  createComponent,\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  createApplication,\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 { ID_PROP_NAME } from './id.ts';\nimport {\n  createInputBindings,\n  getComponentElementTag,\n  registerRootComponent,\n} from './create-component.ts';\nimport { buildProjectableNodes, markProjectableNodes } from './projection.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 hostElement = document.querySelector(elementTag) as Element;\n  let projectableNodes = buildProjectableNodes(mirror, children, document);\n\n  if (metadata?.hydrate && projectableNodes) {\n    projectableNodes = markProjectableNodes(\n      projectableNodes,\n      String(ngAppId),\n      document,\n    );\n  }\n\n  const bootstrap = async (context?: BootstrapContext) => {\n    const appRef = await createApplication(\n      {\n        providers: [\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 componentRef = createComponent(Component, {\n      environmentInjector: appRef.injector,\n      hostElement,\n      projectableNodes,\n      bindings: createInputBindings(mirror, props),\n    });\n\n    registerRootComponent(appRef, componentRef);\n\n    return appRef;\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.d.ts

@@ -2,7 +2,7 @@ import type { EnvironmentProviders, Provider, ɵComponentType as ComponentType }
 declare function check(Component: ComponentType<unknown>, _props: Record<string, unknown>, _children: unknown): boolean;
 declare function renderToStaticMarkup(Component: ComponentType<unknown> & {
     renderProviders: (Provider | EnvironmentProviders)[];
-}, props: Record<string, unknown>, _children: unknown): Promise<{
+}, props: Record<string, unknown>, children: unknown): Promise<{
     html: string;
 }>;
 declare const _default: {

package/src/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,oBAAoB,EACpB,QAAQ,EACR,cAAc,IAAI,aAAa,EAChC,MAAM,eAAe,CAAC;AA6BvB,iBAAS,KAAK,CACZ,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,EACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,SAAS,EAAE,OAAO,WAGnB;AAwCD,iBAAe,oBAAoB,CACjC,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG;IAClC,eAAe,EAAE,CAAC,QAAQ,GAAG,oBAAoB,CAAC,EAAE,CAAC;CACtD,EACD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,SAAS,EAAE,OAAO;;GA+CnB;;;;;AAED,wBAGE"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,QAAQ,EACR,cAAc,IAAI,aAAa,EAChC,MAAM,eAAe,CAAC;AAwBvB,iBAAS,KAAK,CACZ,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,EACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,SAAS,EAAE,OAAO,WAGnB;AAED,iBAAe,oBAAoB,CACjC,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG;IAClC,eAAe,EAAE,CAAC,QAAQ,GAAG,oBAAoB,CAAC,EAAE,CAAC;CACtD,EACD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,QAAQ,EAAE,OAAO;;GA6DlB;;;;;AAED,wBAGE"}

package/src/server.js

@@ -1,57 +1,41 @@
-import { ApplicationRef, InjectionToken, reflectComponentType, provideZonelessChangeDetection, DOCUMENT, } from '@angular/core';
-import { BEFORE_APP_SERIALIZED, provideServerRendering, renderApplication, ɵSERVER_CONTEXT, platformServer, } from '@angular/platform-server';
-import { bootstrapApplication, } from '@angular/platform-browser';
-const ANALOG_ASTRO_STATIC_PROPS = new InjectionToken('@analogjs/astro-angular: Static Props w/ Mirror Provider', {
-    factory() {
-        return { props: {}, mirror: {} };
-    },
-});
+import { createComponent, reflectComponentType, provideZonelessChangeDetection, DOCUMENT, } from '@angular/core';
+import { provideServerRendering, renderApplication, ɵSERVER_CONTEXT, platformServer, } from '@angular/platform-server';
+import { createApplication, } from '@angular/platform-browser';
+import { createInputBindings, getComponentElementTag, registerRootComponent, } from "./create-component.js";
+import { buildProjectableNodes } from "./projection.js";
 function check(Component, _props, _children) {
     return !!reflectComponentType(Component);
 }
-// Run beforeAppInitialized hook to set Input on the ComponentRef
-// before the platform renders to string
-const STATIC_PROPS_HOOK_PROVIDER = {
-    provide: BEFORE_APP_SERIALIZED,
-    useFactory: (appRef, { props, mirror, }) => {
-        return () => {
-            const compRef = appRef.components[0];
-            if (compRef && props && mirror) {
-                for (const [key, value] of Object.entries(props)) {
-                    if (
-                    // we double-check inputs on ComponentMirror
-                    // because Astro might add additional props
-                    // that aren't actually Input defined on the Component
-                    mirror.inputs.some(({ templateName, propName }) => templateName === key || propName === key)) {
-                        compRef.setInput(key, value);
-                    }
-                }
-                compRef.changeDetectorRef.detectChanges();
-            }
-        };
-    },
-    deps: [ApplicationRef, ANALOG_ASTRO_STATIC_PROPS],
-    multi: true,
-};
-async function renderToStaticMarkup(Component, props, _children) {
+async function renderToStaticMarkup(Component, props, children) {
     const mirror = reflectComponentType(Component);
-    const appId = mirror?.selector.split(',')[0] || Component.name.toString().toLowerCase();
+    if (!mirror) {
+        // This should be unreachable: the `check` function verifies that Component is an Angular component.
+        throw new Error(Component.name + ' is not an Angular component');
+    }
+    const elementTag = getComponentElementTag(mirror);
     const platformRef = platformServer();
     const document = platformRef.injector.get(DOCUMENT);
-    document.body.innerHTML = `<${appId}></${appId}>`;
-    const bootstrap = (context) => bootstrapApplication(Component, {
-        providers: [
-            {
-                provide: ANALOG_ASTRO_STATIC_PROPS,
-                useValue: { props, mirror },
-            },
-            STATIC_PROPS_HOOK_PROVIDER,
-            provideServerRendering(),
-            { provide: ɵSERVER_CONTEXT, useValue: 'analog' },
-            provideZonelessChangeDetection(),
-            ...(Component.renderProviders || []),
-        ],
-    }, context);
+    document.body.innerHTML = `<${elementTag}></${elementTag}>`;
+    const hostElement = document.querySelector(elementTag);
+    const projectableNodes = buildProjectableNodes(mirror, children, document);
+    const bootstrap = async (context) => {
+        const appRef = await createApplication({
+            providers: [
+                provideServerRendering(),
+                { provide: ɵSERVER_CONTEXT, useValue: 'analog' },
+                provideZonelessChangeDetection(),
+                ...(Component.renderProviders || []),
+            ],
+        }, context);
+        const componentRef = createComponent(Component, {
+            environmentInjector: appRef.injector,
+            hostElement,
+            projectableNodes,
+            bindings: createInputBindings(mirror, props),
+        });
+        registerRootComponent(appRef, componentRef);
+        return appRef;
+    };
     const html = await renderApplication(bootstrap, {
         document,
     });

package/src/server.js.map

@@ -1 +1 @@
-{"version":3,"file":"server.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n  ComponentMirror,\n  EnvironmentProviders,\n  Provider,\n  ɵComponentType as ComponentType,\n} from '@angular/core';\nimport {\n  ApplicationRef,\n  InjectionToken,\n  reflectComponentType,\n  provideZonelessChangeDetection,\n  DOCUMENT,\n} from '@angular/core';\nimport {\n  BEFORE_APP_SERIALIZED,\n  provideServerRendering,\n  renderApplication,\n  ɵSERVER_CONTEXT,\n  platformServer,\n} from '@angular/platform-server';\nimport {\n  bootstrapApplication,\n  type BootstrapContext,\n} from '@angular/platform-browser';\n\nconst ANALOG_ASTRO_STATIC_PROPS = new InjectionToken<{\n  props: Record<string, unknown>;\n  mirror: ComponentMirror<unknown>;\n}>('@analogjs/astro-angular: Static Props w/ Mirror Provider', {\n  factory() {\n    return { props: {}, mirror: {} as ComponentMirror<unknown> };\n  },\n});\n\nfunction check(\n  Component: ComponentType<unknown>,\n  _props: Record<string, unknown>,\n  _children: unknown,\n) {\n  return !!reflectComponentType(Component);\n}\n\n// Run beforeAppInitialized hook to set Input on the ComponentRef\n// before the platform renders to string\nconst STATIC_PROPS_HOOK_PROVIDER: Provider = {\n  provide: BEFORE_APP_SERIALIZED,\n  useFactory: (\n    appRef: ApplicationRef,\n    {\n      props,\n      mirror,\n    }: {\n      props: Record<string, unknown>;\n      mirror: ComponentMirror<unknown>;\n    },\n  ) => {\n    return () => {\n      const compRef = appRef.components[0];\n      if (compRef && props && mirror) {\n        for (const [key, value] of Object.entries(props)) {\n          if (\n            // we double-check inputs on ComponentMirror\n            // because Astro might add additional props\n            // that aren't actually Input defined on the Component\n            mirror.inputs.some(\n              ({ templateName, propName }) =>\n                templateName === key || propName === key,\n            )\n          ) {\n            compRef.setInput(key, value);\n          }\n        }\n        compRef.changeDetectorRef.detectChanges();\n      }\n    };\n  },\n  deps: [ApplicationRef, ANALOG_ASTRO_STATIC_PROPS],\n  multi: true,\n};\n\nasync function renderToStaticMarkup(\n  Component: ComponentType<unknown> & {\n    renderProviders: (Provider | EnvironmentProviders)[];\n  },\n  props: Record<string, unknown>,\n  _children: unknown,\n) {\n  const mirror = reflectComponentType(Component);\n  const appId =\n    mirror?.selector.split(',')[0] || Component.name.toString().toLowerCase();\n\n  const platformRef = platformServer();\n  const document = platformRef.injector.get(DOCUMENT);\n  document.body.innerHTML = `<${appId}></${appId}>`;\n\n  const bootstrap = (context?: BootstrapContext) =>\n    bootstrapApplication(\n      Component,\n      {\n        providers: [\n          {\n            provide: ANALOG_ASTRO_STATIC_PROPS,\n            useValue: { props, mirror },\n          },\n          STATIC_PROPS_HOOK_PROVIDER,\n          provideServerRendering(),\n          { provide: ɵSERVER_CONTEXT, useValue: 'analog' },\n          provideZonelessChangeDetection(),\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  const correctedHtml = styleTags + document.body.innerHTML;\n\n  platformRef.destroy();\n\n  return { html: correctedHtml };\n}\n\nexport default {\n  check,\n  renderToStaticMarkup,\n};\n"]}
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../../../../packages/astro-angular/src/server.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n  EnvironmentProviders,\n  Provider,\n  ɵComponentType as ComponentType,\n} from '@angular/core';\nimport {\n  createComponent,\n  reflectComponentType,\n  provideZonelessChangeDetection,\n  DOCUMENT,\n} from '@angular/core';\nimport {\n  provideServerRendering,\n  renderApplication,\n  ɵSERVER_CONTEXT,\n  platformServer,\n} from '@angular/platform-server';\nimport {\n  createApplication,\n  type BootstrapContext,\n} from '@angular/platform-browser';\nimport {\n  createInputBindings,\n  getComponentElementTag,\n  registerRootComponent,\n} from './create-component.ts';\nimport { buildProjectableNodes } from './projection.ts';\n\nfunction check(\n  Component: ComponentType<unknown>,\n  _props: Record<string, unknown>,\n  _children: unknown,\n) {\n  return !!reflectComponentType(Component);\n}\n\nasync function renderToStaticMarkup(\n  Component: ComponentType<unknown> & {\n    renderProviders: (Provider | EnvironmentProviders)[];\n  },\n  props: Record<string, unknown>,\n  children: unknown,\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(Component.name + ' is not an Angular component');\n  }\n\n  const elementTag = getComponentElementTag(mirror);\n\n  const platformRef = platformServer();\n  const document = platformRef.injector.get(DOCUMENT);\n  document.body.innerHTML = `<${elementTag}></${elementTag}>`;\n\n  const hostElement = document.querySelector(elementTag) as Element;\n  const projectableNodes = buildProjectableNodes(mirror, children, document);\n\n  const bootstrap = async (context?: BootstrapContext) => {\n    const appRef = await createApplication(\n      {\n        providers: [\n          provideServerRendering(),\n          { provide: ɵSERVER_CONTEXT, useValue: 'analog' },\n          provideZonelessChangeDetection(),\n          ...(Component.renderProviders || []),\n        ],\n      },\n      context,\n    );\n\n    const componentRef = createComponent(Component, {\n      environmentInjector: appRef.injector,\n      hostElement,\n      projectableNodes,\n      bindings: createInputBindings(mirror, props),\n    });\n\n    registerRootComponent(appRef, componentRef);\n\n    return appRef;\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  const correctedHtml = styleTags + document.body.innerHTML;\n\n  platformRef.destroy();\n\n  return { html: correctedHtml };\n}\n\nexport default {\n  check,\n  renderToStaticMarkup,\n};\n"]}

package/src/server-providers.d.ts

@@ -1,9 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,25 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"]}