@ssgoi/angular 6.2.0 → 6.4.0

package/README.md

@@ -15,7 +15,8 @@ yarn add @ssgoi/angular
 ## What You Get
 
 - `Ssgoi` directive (selector: `[ssgoi]`) that bootstraps the core transition context on the client and gracefully no-ops during SSR.
-- `SsgoiTransition` directive (selector: `[ssgoiTransition]`) that wires individual route containers into the transition system.
+- `data-ssgoi-transition` route markers discovered automatically inside `[ssgoi]`.
+- Deprecated `SsgoiTransition` directive (selector: `[ssgoiTransition]`) kept for backward compatibility.
 - `injectSsgoi()` helper and `SSGOI_CONTEXT` injection token for retrieving the transition context anywhere in your component tree.
 - Re-exported transition factories under `@ssgoi/angular/view-transitions`.
 
@@ -50,18 +51,16 @@ export class AppComponent {
 }
 ```
 
-### 2. Mark each routed view with `SsgoiTransition`
+### 2. Mark each routed view
 
 ```typescript
 import { Component } from "@angular/core";
-import { SsgoiTransition } from "@ssgoi/angular";
 
 @Component({
   selector: "app-home",
   standalone: true,
-  imports: [SsgoiTransition],
   template: `
-    <section [ssgoiTransition]="'/home'">
+    <section data-ssgoi-transition="/home">
       <h1>Home Page</h1>
     </section>
   `,
@@ -69,12 +68,12 @@ import { SsgoiTransition } from "@ssgoi/angular";
 export class HomeComponent {}
 ```
 
-The value you pass to `[ssgoiTransition]` should uniquely identify the view (commonly the route path).
+The `data-ssgoi-transition` value should uniquely identify the view (commonly the route path).
 
 ## How It Works
 
-- `Ssgoi` wraps `createSggoiTransitionContext` from `@ssgoi/core` and injects it via `SSGOI_CONTEXT`. The directive guards against the server platform so SSR renders stay deterministic.
-- `SsgoiTransition` reads that context with `injectSsgoi()`, sets `data-ssgoi-transition` on the host, and subscribes the element to the core transition runner.
+- `Ssgoi` wraps `createSggoiTransitionContext` from `@ssgoi/core`, injects it via `SSGOI_CONTEXT`, and observes `data-ssgoi-transition` elements under the host. The directive guards against the server platform so SSR renders stay deterministic.
+- The deprecated `SsgoiTransition` directive still sets `data-ssgoi-transition` and registers the host directly for backward compatibility.
 
 Because everything is driven by signals, Angular change detection stays minimal and the bundle remains fully tree-shakeable.
 
@@ -83,8 +82,8 @@ Because everything is driven by signals, Angular change detection stays minimal
 - `Ssgoi`
   - `config: SsgoiConfig` (input, optional) – global transition configuration. Uses `{}` as default.
   - `host: HostAnimation | undefined` (input, optional) – external playback host for debug tooling.
-- `SsgoiTransition`
-  - `ssgoiTransition: string` (required input) – identifier for the target view/container.
+- `data-ssgoi-transition` – identifier for the target view/container.
+- `SsgoiTransition` is deprecated; use `data-ssgoi-transition` directly.
 - `injectSsgoi(): SsgoiContext` – returns the adapter context. During SSR it falls back to a no-op implementation so you can call it unconditionally.
 
 ## Available Transitions

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@ssgoi/angular",
-  "version": "6.2.0",
+  "version": "6.4.0",
   "description": "Angular bindings for SSGOI - Native app-like page transitions for Angular applications",
   "private": false,
   "type": "module",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@ssgoi/core": "^6.2.0"
+    "@ssgoi/core": "^6.4.0"
   },
   "peerDependencies": {
     "@angular/common": "^20.0.0",

package/src/lib/index.ts

@@ -1,4 +1,5 @@
 export { Ssgoi } from "./ssgoi.directive";
+/** @deprecated Set `data-ssgoi-transition` directly on an element inside `[ssgoi]` instead. */
 export { SsgoiTransition } from "./ssgoi-transition.directive";
 export { injectSsgoi, SSGOI_CONTEXT } from "./context";
 export * from "./types";

package/src/lib/ssgoi-transition.directive.ts

@@ -10,6 +10,10 @@ import {
 import { isPlatformBrowser } from "@angular/common";
 import { injectSsgoi } from "./context";
 
+/**
+ * @deprecated Set `data-ssgoi-transition` directly on the page boundary
+ * element inside `[ssgoi]` instead.
+ */
 @Directive({
   selector: "[ssgoiTransition]",
   standalone: true,

package/src/lib/ssgoi.directive.ts

@@ -1,27 +1,24 @@
 import {
+  AfterViewInit,
   Directive,
+  ElementRef,
+  OnDestroy,
   input,
   forwardRef,
   PLATFORM_ID,
   inject,
 } from "@angular/core";
 import { isPlatformBrowser } from "@angular/common";
-import { createSggoiTransitionContext } from "@ssgoi/core/internal";
+import {
+  createSggoiTransitionContext,
+  observeSsgoiTransitions,
+} from "@ssgoi/core/internal";
 import type { HostAnimation } from "@ssgoi/core/internal";
 import type { SsgoiConfig, SsgoiContext } from "@ssgoi/core/types";
 import { SSGOI_CONTEXT } from "./context";
 
 function createSsgoiContext(component: Ssgoi): SsgoiContext | undefined {
-  const platformId = inject(PLATFORM_ID);
-
-  // Only create context in browser environment
-  if (!isPlatformBrowser(platformId)) {
-    // Return a no-op context for SSR
-    return undefined;
-  }
-  return createSggoiTransitionContext(component.config(), {
-    host: component.host(),
-  });
+  return component.getContext();
 }
 
 @Directive({
@@ -35,7 +32,34 @@ function createSsgoiContext(component: Ssgoi): SsgoiContext | undefined {
     },
   ],
 })
-export class Ssgoi {
+export class Ssgoi implements AfterViewInit, OnDestroy {
   readonly config = input<SsgoiConfig>({});
   readonly host = input<HostAnimation | undefined>(undefined);
+
+  private readonly el = inject(ElementRef<HTMLElement>);
+  private readonly platformId = inject(PLATFORM_ID);
+  private contextValue?: SsgoiContext;
+  private stopObserving?: () => void;
+
+  getContext(): SsgoiContext | undefined {
+    if (!isPlatformBrowser(this.platformId)) {
+      return undefined;
+    }
+
+    this.contextValue ??= createSggoiTransitionContext(this.config(), {
+      host: this.host(),
+    });
+    return this.contextValue;
+  }
+
+  ngAfterViewInit(): void {
+    const ssgoi = this.getContext();
+    if (!ssgoi) return;
+
+    this.stopObserving = observeSsgoiTransitions(this.el.nativeElement, ssgoi);
+  }
+
+  ngOnDestroy(): void {
+    this.stopObserving?.();
+  }
 }