@ssgoi/angular 5.2.0 → 6.1.0

package/README.md

@@ -1,6 +1,6 @@
 # @ssgoi/angular
 
-Angular bindings for SSGOI that give any Angular 20+ app native-feeling page and element transitions powered by the `@ssgoi/core` animation engine.
+Angular bindings for SSGOI that give any Angular 20+ app native-feeling page transitions powered by the `@ssgoi/core` animation engine.
 
 ## Installation
 
@@ -16,9 +16,8 @@ yarn add @ssgoi/angular
 
 - `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.
-- `TransitionDirective` (selector: `[transition]`) for running element-level in/out animations with spring physics.
-- `injectSsgoi()` helper and `SSGOI_CONTEXT` injection token for retrieving transition definitions anywhere in your component tree.
-- Re-exported transition factories and presets under `@ssgoi/angular/view-transitions`, `@ssgoi/angular/transitions`, and `@ssgoi/angular/presets`.
+- `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`.
 
 ## Quick Start
 
@@ -46,7 +45,7 @@ import { fade } from "@ssgoi/angular/view-transitions";
 })
 export class AppComponent {
   protected readonly ssgoiConfig = signal<SsgoiConfig>({
-    defaultTransition: fade(),
+    transitions: [fade({ paths: ["/home", "/about"] })],
   });
 }
 ```
@@ -72,37 +71,10 @@ export class HomeComponent {}
 
 The value you pass to `[ssgoiTransition]` should uniquely identify the view (commonly the route path).
 
-### 3. (Optional) Add element-level transitions
-
-```typescript
-import { Component } from "@angular/core";
-import { TransitionDirective } from "@ssgoi/angular";
-import { fade } from "@ssgoi/angular/transitions";
-
-@Component({
-  selector: "app-call-to-action",
-  standalone: true,
-  imports: [TransitionDirective],
-  template: `
-    <button
-      [transition]="{
-        key: 'cta',
-        in: fade({ duration: 220 }),
-        out: fade({ duration: 180 })
-      }"
-    >
-      Get Started
-    </button>
-  `,
-})
-export class CallToActionComponent {}
-```
-
 ## 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.
-- `TransitionDirective` lets any element opt into spring-driven enter/leave effects while sharing the same scheduling primitives as view transitions.
 
 Because everything is driven by signals, Angular change detection stays minimal and the bundle remains fully tree-shakeable.
 
@@ -110,37 +82,24 @@ 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.
-- `TransitionDirective`
-  - `transition: TransitionDirectiveConfig` (required input) – accepts any config from `@ssgoi/core`, plus an optional `key` to coordinate enter/leave pairs.
-- `injectSsgoi(): SsgoiContext` – returns a function that looks up transition definitions by id. During SSR it falls back to a no-op implementation so you can call it unconditionally.
+- `injectSsgoi(): SsgoiContext` – returns the adapter context. During SSR it falls back to a no-op implementation so you can call it unconditionally.
 
 ## Available Transitions
 
 View-level factories:
 
-```typescript
-import { fade, scroll, drill, hero, pinterest } from "@ssgoi/angular/view-transitions";
-```
-
-Element-level factories:
-
 ```typescript
 import {
   fade,
+  scroll,
+  drill,
+  hero,
   slide,
-  scale,
-  bounce,
-  blur,
-  rotate,
-} from "@ssgoi/angular/transitions";
-```
-
-Presets that combine common configurations:
-
-```typescript
-import { marketingPreset, dashboardPreset } from "@ssgoi/angular/presets";
+  zoom,
+} from "@ssgoi/angular/view-transitions";
 ```
 
 ## Sample Configuration
@@ -150,14 +109,9 @@ import { fade, scroll } from "@ssgoi/angular/view-transitions";
 import type { SsgoiConfig } from "@ssgoi/angular";
 
 export const config: SsgoiConfig = {
-  defaultTransition: fade(),
   transitions: [
-    {
-      from: "/home",
-      to: "/about",
-      transition: scroll({ direction: "up" }),
-      symmetric: true,
-    },
+    fade({ paths: ["/", "/home"] }),
+    scroll({ paths: ["/home", "/about"] }),
   ],
 };
 ```

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@ssgoi/angular",
-  "version": "5.2.0",
+  "version": "6.1.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": "^5.2.0"
+    "@ssgoi/core": "^6.1.0"
   },
   "peerDependencies": {
     "@angular/common": "^20.0.0",
@@ -53,27 +53,6 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/fesm2022/ssgoi-angular.mjs"
-    },
-    "./presets": {
-      "types": "./dist/presets/index.d.ts",
-      "default": "./dist/fesm2022/ssgoi-angular-presets.mjs"
-    },
-    "./transitions": {
-      "types": "./dist/transitions/index.d.ts",
-      "default": "./dist/fesm2022/ssgoi-angular-transitions.mjs"
-    },
-    "./view-transitions": {
-      "types": "./dist/view-transitions/index.d.ts",
-      "default": "./dist/fesm2022/ssgoi-angular-view-transitions.mjs"
-    }
-  },
   "sideEffects": false,
   "scripts": {
     "build": "ng-packagr -p ng-package.json",

package/src/lib/context.ts

@@ -1,21 +1,22 @@
 import { InjectionToken, inject } from "@angular/core";
-import type { SsgoiContext } from "@ssgoi/core";
+import type { SsgoiContext } from "@ssgoi/core/types";
 
 export const SSGOI_CONTEXT = new InjectionToken<SsgoiContext | undefined>(
   "ssgoi-context",
 );
 
+const noopContext: SsgoiContext = {
+  register: () => {},
+  refFor: () => () => {},
+};
+
 export function injectSsgoi(): SsgoiContext {
   const context = inject(SSGOI_CONTEXT, { optional: true });
 
   if (!context) {
     // During SSR or when not wrapped in <ssgoi>, return a no-op context
     // This prevents errors during server-side rendering
-    return () => ({
-      key: "",
-      in: async () => ({}),
-      out: async () => ({}),
-    });
+    return noopContext;
   }
 
   return context;

package/src/lib/index.ts

@@ -1,10 +1,5 @@
 export { Ssgoi } from "./ssgoi.directive";
 export { SsgoiTransition } from "./ssgoi-transition.directive";
-export {
-  TransitionDirective,
-  TransitionDirectiveConfig,
-} from "./transition.directive";
-export { TransitionScopeDirective } from "./transition-scope.directive";
 export { injectSsgoi, SSGOI_CONTEXT } from "./context";
-export { transition } from "@ssgoi/core";
 export * from "./types";
+export * from "@ssgoi/core";

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

@@ -2,28 +2,25 @@ import {
   Directive,
   input,
   OnInit,
-  OnDestroy,
   AfterViewInit,
   ElementRef,
   inject,
   PLATFORM_ID,
 } from "@angular/core";
 import { isPlatformBrowser } from "@angular/common";
-import { transition } from "@ssgoi/core";
 import { injectSsgoi } from "./context";
 
 @Directive({
   selector: "[ssgoiTransition]",
   standalone: true,
 })
-export class SsgoiTransition implements OnInit, OnDestroy, AfterViewInit {
+export class SsgoiTransition implements OnInit, AfterViewInit {
   // The directive attribute value becomes the transition ID
   readonly ssgoiTransition = input.required<string>();
 
-  private readonly getTransition = injectSsgoi();
+  private readonly ssgoi = injectSsgoi();
   private readonly el = inject(ElementRef<HTMLElement>);
   private readonly platformId = inject(PLATFORM_ID);
-  private cleanup?: () => void;
 
   ngOnInit(): void {
     if (!isPlatformBrowser(this.platformId)) {
@@ -44,16 +41,6 @@ export class SsgoiTransition implements OnInit, OnDestroy, AfterViewInit {
 
     // Use the host element itself as the transition target
     const targetElement = this.el.nativeElement;
-
-    const transitionConfig = this.getTransition(this.ssgoiTransition());
-    const cleanupResult = transition(transitionConfig)(targetElement);
-
-    if (cleanupResult) {
-      this.cleanup = cleanupResult;
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.cleanup?.();
+    this.ssgoi.refFor(this.ssgoiTransition())(targetElement);
   }
 }

package/src/lib/ssgoi.directive.ts

@@ -6,8 +6,9 @@ import {
   inject,
 } from "@angular/core";
 import { isPlatformBrowser } from "@angular/common";
-import { createSggoiTransitionContext } from "@ssgoi/core";
-import type { SsgoiConfig, SsgoiContext } from "@ssgoi/core";
+import { createSggoiTransitionContext } 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 {
@@ -18,7 +19,9 @@ function createSsgoiContext(component: Ssgoi): SsgoiContext | undefined {
     // Return a no-op context for SSR
     return undefined;
   }
-  return createSggoiTransitionContext(component.config());
+  return createSggoiTransitionContext(component.config(), {
+    host: component.host(),
+  });
 }
 
 @Directive({
@@ -34,4 +37,5 @@ function createSsgoiContext(component: Ssgoi): SsgoiContext | undefined {
 })
 export class Ssgoi {
   readonly config = input<SsgoiConfig>({});
+  readonly host = input<HostAnimation | undefined>(undefined);
 }

package/src/lib/types.ts

@@ -1 +1 @@
-export type * from "@ssgoi/core";
+export type * from "@ssgoi/core/types";

package/view-transitions/ng-package.json

@@ -1,6 +1,6 @@
 {
-  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
   "lib": {
-    "entryFile": "../src/lib/view-transitions/index.ts"
+    "entryFile": "public-api.ts"
   }
 }

package/view-transitions/public-api.ts

@@ -0,0 +1 @@
+export * from "@ssgoi/core";

package/presets/ng-package.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "../src/lib/presets/index.ts"
-  }
-}

package/src/lib/presets/index.ts

@@ -1 +0,0 @@
-export * from "@ssgoi/core/presets";

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

@@ -1,54 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  OnInit,
-  OnDestroy,
-  inject,
-  PLATFORM_ID,
-} from "@angular/core";
-import { isPlatformBrowser } from "@angular/common";
-import { createTransitionScope } from "@ssgoi/core";
-
-/**
- * TransitionScope creates a boundary for local-scoped transitions.
- *
- * Child elements with `scope: 'local'` will:
- * - Skip IN animation when mounted simultaneously with the scope
- * - Skip OUT animation when unmounted simultaneously with the scope
- *
- * @example
- * ```html
- * <div transitionScope>
- *   <div [transition]="{ scope: 'local', in: ..., out: ... }">
- *     Content
- *   </div>
- * </div>
- * ```
- */
-@Directive({
-  selector: "[transitionScope]",
-  host: {
-    style: "display: contents",
-  },
-})
-export class TransitionScopeDirective implements OnInit, OnDestroy {
-  private readonly el = inject(ElementRef<HTMLElement>);
-  private readonly platformId = inject(PLATFORM_ID);
-  private cleanup?: () => void;
-
-  ngOnInit(): void {
-    if (!isPlatformBrowser(this.platformId)) {
-      return;
-    }
-
-    const cleanupResult = createTransitionScope()(this.el.nativeElement);
-
-    if (cleanupResult) {
-      this.cleanup = cleanupResult;
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.cleanup?.();
-  }
-}

package/src/lib/transition.directive.ts

@@ -1,54 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  input,
-  OnInit,
-  OnDestroy,
-  inject,
-  PLATFORM_ID,
-} from "@angular/core";
-import { isPlatformBrowser } from "@angular/common";
-import { transition as coreTransition } from "@ssgoi/core";
-import type {
-  Transition as CoreTransitionConfig,
-  TransitionKey as CoreTransitionKey,
-  TransitionScope as CoreTransitionScope,
-} from "@ssgoi/core";
-
-export type TransitionDirectiveConfig = CoreTransitionConfig & {
-  key?: CoreTransitionKey;
-  scope?: CoreTransitionScope;
-};
-
-@Directive({
-  selector: "[transition]",
-})
-export class TransitionDirective implements OnInit, OnDestroy {
-  transition = input.required<TransitionDirectiveConfig>();
-
-  private readonly el = inject(ElementRef<HTMLElement>);
-  private readonly platformId = inject(PLATFORM_ID);
-  private cleanup?: () => void;
-
-  ngOnInit(): void {
-    if (!isPlatformBrowser(this.platformId)) {
-      return;
-    }
-
-    const config = this.transition();
-    const cleanupResult = coreTransition({
-      key: config.key,
-      in: config.in,
-      out: config.out,
-      scope: config.scope,
-    })(this.el.nativeElement);
-
-    if (cleanupResult) {
-      this.cleanup = cleanupResult;
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.cleanup?.();
-  }
-}

package/src/lib/transitions/index.ts

@@ -1 +0,0 @@
-export * from "@ssgoi/core/transitions";

package/src/lib/view-transitions/index.ts

@@ -1 +0,0 @@
-export * from "@ssgoi/core/view-transitions";

package/transitions/ng-package.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "../src/lib/transitions/index.ts"
-  }
-}