@swimmesberger/elarion-contributions 0.2.3-preview.71.1 → 0.2.3-preview.72.1

package/README.md

@@ -10,6 +10,11 @@ adding a sidebar item or a cross-module action edits one file in the owning modu
 - **React bindings** (`@swimmesberger/elarion-contributions/react`) — `ContributionProvider`,
   `useContributions`, `<ExtensionSlot>`. React is an optional peer dependency; other view frameworks
   can port the bindings in a page of code.
+- **Angular bindings** (`@swimmesberger/elarion-contributions/angular`) — `provideContributions`,
+  `injectContributions` (returns a `Signal`). Idiomatic for Angular 20–22: signal-first, standalone,
+  no NgModule, no shipped directive — you render with `@for`. `@angular/core` is an optional peer
+  dependency, and the bindings are decorator/template-free so they ship in this one package (no
+  ng-packagr).
 - **TanStack Router guard** (`@swimmesberger/elarion-contributions/tanstack-router`) —
   `redirectUnless(when, to)` + the vocabulary-bound `createRouteGuards<V>()`: a `beforeLoad` guard
   evaluating the same `when` clause as a contribution, so a route and its nav entry can never gate
@@ -30,7 +35,8 @@ This package ships the *machinery* with fixed semantics; your application owns t
 | `defineExtensionPoint`, `defineModule`, `contribute` | Your extension points (`sidebarItems`, …) and their payload types |
 | `evaluateWhen` + the `when` AND semantics | The kit instantiation binding your generated vocabulary |
 | `createContributionRegistry` (filter + deterministic order) | The app shell that renders each slot |
-| `ContributionProvider` / `useContributions` / `<ExtensionSlot>` | Route composition and module discovery (e.g. `import.meta.glob`) |
+| `ContributionProvider` / `useContributions` / `<ExtensionSlot>` (React) | Route composition and module discovery (e.g. `import.meta.glob`) |
+| `provideContributions` / `injectContributions` (Angular) | Slot rendering — an `@for` block, or a small `*extensionSlot` directive you own (see below) |
 | `redirectUnless` route guard (`/tanstack-router`) | Everything else routing — the router's own API |
 
 ## Quick start
@@ -93,6 +99,80 @@ const registry = createContributionRegistry(appModules.map((m) => m.manifest), c
 const items = useContributions(sidebarItems)
 ```
 
+## Angular
+
+Same kernel, idiomatic Angular surface. `provideContributions` is an environment provider (shaped like
+`provideRouter`); `injectContributions` returns a `Signal` your templates track, so refreshing the
+capability snapshot re-resolves every slot by setting one signal:
+
+```ts
+// main.ts — hand the resolved registry to the injector tree
+import { createContributionRegistry } from "@swimmesberger/elarion-contributions"
+import { provideContributions } from "@swimmesberger/elarion-contributions/angular"
+
+const registry = createContributionRegistry(appModules.map((m) => m.manifest), capabilities)
+bootstrapApplication(App, { providers: [provideContributions(registry)] })
+// snapshot can change at runtime? provideContributions(signal(registry)) and .set(...) on login.
+```
+
+```ts
+// any standalone component — read the point as a signal, render with @for
+import { Component } from "@angular/core"
+import { injectContributions } from "@swimmesberger/elarion-contributions/angular"
+import { sidebarItems } from "../platform/points"
+
+@Component({
+  standalone: true,
+  imports: [RouterLink],
+  template: `@for (item of items(); track item.id) {
+    <a [routerLink]="item.to">{{ item.label }}</a>
+  }`,
+})
+export class Sidebar {
+  readonly items = injectContributions(sidebarItems)
+}
+```
+
+### Want a `*extensionSlot` directive? Build it on top
+
+The package deliberately ships no directive (that would need the Angular compiler / ng-packagr and a second
+build). If you prefer slot sugar over an inline `@for`, a structural directive is a few lines in **your**
+app over `injectContributions` — you own the rendering, the kernel stays framework-agnostic:
+
+```ts
+// app/extension-slot.directive.ts
+import {
+  Directive, effect, inject, Injector, input, runInInjectionContext, TemplateRef, ViewContainerRef,
+} from "@angular/core"
+import { injectContributions } from "@swimmesberger/elarion-contributions/angular"
+import type { Contribution, ExtensionPoint } from "@swimmesberger/elarion-contributions"
+
+@Directive({ selector: "[extensionSlot]", standalone: true })
+export class ExtensionSlotDirective<TItem> {
+  // *extensionSlot="point" — the point token to render.
+  readonly point = input.required<ExtensionPoint<TItem, unknown>>({ alias: "extensionSlot" })
+
+  private readonly tpl = inject<TemplateRef<{ $implicit: Contribution<TItem> }>>(TemplateRef)
+  private readonly vcr = inject(ViewContainerRef)
+  private readonly injector = inject(Injector)
+
+  constructor() {
+    // Re-render when the point changes or the snapshot refreshes; each item is the template's $implicit.
+    // injectContributions() calls inject(), so it must run in an injection context — hence runInInjectionContext.
+    effect(() => {
+      const items = runInInjectionContext(this.injector, () => injectContributions(this.point())())
+      this.vcr.clear()
+      for (const item of items) this.vcr.createEmbeddedView(this.tpl, { $implicit: item })
+    })
+  }
+}
+```
+
+```html
+<!-- usage: item is the contribution, typed by the point -->
+<a *extensionSlot="sidebarItems; let item" [routerLink]="item.to">{{ item.label }}</a>
+```
+
 ## Semantics (the part that must not drift)
 
 - **`when` is AND** across its fields (`module`, `permission`, `flag`, `role`), mirroring

package/dist/angular.d.ts

@@ -0,0 +1,32 @@
+import { type EnvironmentProviders, type Signal } from "@angular/core";
+import type { Contribution, ContributionRegistry, ExtensionPoint } from "./index.js";
+/**
+ * Provides the resolved registry to the injector tree — the idiomatic mirror of React's
+ * `<ContributionProvider>`, shaped like `provideRouter`/`provideHttpClient`. Pass a live registry for a
+ * static snapshot, or a `Signal<ContributionRegistry>` when the capability snapshot can change at runtime
+ * (login, tenant switch): rebuilding the registry and setting the signal re-resolves every slot.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [provideContributions(createContributionRegistry(manifests, capabilities))],
+ * })
+ * ```
+ */
+export declare function provideContributions(source: ContributionRegistry | Signal<ContributionRegistry>): EnvironmentProviders;
+/**
+ * Reads a point's resolved contributions as a `Signal` — call from an injection context (a component field,
+ * a `factory`, or inside `runInInjectionContext`). The signal tracks the provided registry, so a snapshot
+ * refresh updates every template reading it. Already filtered by `when` and deterministically ordered.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   template: `@for (item of items(); track item.id) { <a [routerLink]="item.to">{{ item.label }}</a> }`,
+ * })
+ * export class Sidebar {
+ *   readonly items = injectContributions(sidebarItems)
+ * }
+ * ```
+ */
+export declare function injectContributions<TItem, TContext>(point: ExtensionPoint<TItem, TContext>): Signal<ReadonlyArray<Contribution<TItem>>>;

package/dist/angular.js

@@ -0,0 +1,49 @@
+// Angular bindings over the contribution kernel — the `/angular` adapter of ADR-0032, the sibling of the
+// `/react` sub-export. Deliberately decorator- and template-free: it ships only the DI + reactivity seam
+// (`provideContributions`, `injectContributions`) as plain `@angular/core` runtime APIs, so it compiles with
+// the same `tsc` build as the rest of the package — no ng-packagr, no second toolchain, one npm package.
+// Rendering is the app's own `@for` block (idiomatic Angular 20+ control flow); a structural directive is a
+// handful of lines the app writes on top of `injectContributions` (see the README) when it wants slot sugar.
+import { computed, inject, InjectionToken, isSignal, makeEnvironmentProviders, signal, } from "@angular/core";
+// A Signal is held (never a bare registry) so a snapshot refresh — login, context change — re-resolves every
+// slot reactively by setting one signal, the Angular mirror of React swapping the provider value.
+const CONTRIBUTION_REGISTRY = new InjectionToken("elarion.contributions.registry");
+/**
+ * Provides the resolved registry to the injector tree — the idiomatic mirror of React's
+ * `<ContributionProvider>`, shaped like `provideRouter`/`provideHttpClient`. Pass a live registry for a
+ * static snapshot, or a `Signal<ContributionRegistry>` when the capability snapshot can change at runtime
+ * (login, tenant switch): rebuilding the registry and setting the signal re-resolves every slot.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [provideContributions(createContributionRegistry(manifests, capabilities))],
+ * })
+ * ```
+ */
+export function provideContributions(source) {
+    const registry = isSignal(source) ? source : signal(source);
+    return makeEnvironmentProviders([{ provide: CONTRIBUTION_REGISTRY, useValue: registry }]);
+}
+/**
+ * Reads a point's resolved contributions as a `Signal` — call from an injection context (a component field,
+ * a `factory`, or inside `runInInjectionContext`). The signal tracks the provided registry, so a snapshot
+ * refresh updates every template reading it. Already filtered by `when` and deterministically ordered.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   template: `@for (item of items(); track item.id) { <a [routerLink]="item.to">{{ item.label }}</a> }`,
+ * })
+ * export class Sidebar {
+ *   readonly items = injectContributions(sidebarItems)
+ * }
+ * ```
+ */
+export function injectContributions(point) {
+    const registry = inject(CONTRIBUTION_REGISTRY, { optional: true });
+    if (registry === null) {
+        throw new Error("injectContributions requires provideContributions() in the injector tree.");
+    }
+    return computed(() => registry().get(point));
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@swimmesberger/elarion-contributions",
-  "version": "0.2.3-preview.71.1",
-  "description": "The Elarion frontend contribution model: typed extension points, declarative module manifests, and capability-gated resolution — framework-free core with React bindings under /react.",
+  "version": "0.2.3-preview.72.1",
+  "description": "The Elarion frontend contribution model: typed extension points, declarative module manifests, and capability-gated resolution — framework-free core with React bindings under /react and Angular bindings under /angular.",
   "license": "Apache-2.0",
   "type": "module",
   "exports": {
@@ -13,6 +13,10 @@
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js"
     },
+    "./angular": {
+      "types": "./dist/angular.d.ts",
+      "import": "./dist/angular.js"
+    },
     "./tanstack-router": {
       "types": "./dist/tanstack-router.d.ts",
       "import": "./dist/tanstack-router.js"
@@ -46,6 +50,7 @@
     "node": ">=20.11"
   },
   "peerDependencies": {
+    "@angular/core": ">=20",
     "@tanstack/react-router": ">=1",
     "react": ">=18"
   },
@@ -53,13 +58,18 @@
     "react": {
       "optional": true
     },
+    "@angular/core": {
+      "optional": true
+    },
     "@tanstack/react-router": {
       "optional": true
     }
   },
   "devDependencies": {
+    "@angular/core": "^22.0.5",
     "@tanstack/react-router": "^1.170.17",
     "@types/react": "^19.2.17",
+    "rxjs": "^7.8.2",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"
   }