@flyos/design-system 1.6.0 → 1.7.0

package/fesm2022/flyos-design-system.mjs

@@ -48,7 +48,7 @@ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 // tools/publish-library.ps1 at bump time, and asserted by the spec beside this file.
 // Used only for the diagnostic message; the duplicate-instance detection itself is
 // version-agnostic, so a stale literal misnames a fork rather than hiding one.
-const FLY_DS_VERSION = '1.6.0';
+const FLY_DS_VERSION = '1.7.0';
 const FLY_DS_REGISTRY_KEY = '__FLY_DS_INSTANCES__';
 /**
  * Records this design-system instance on the shared `scope` and returns the
@@ -4768,6 +4768,10 @@ function unloadRemoteStyles(appId) {
     _inFlight.delete(appId);
 }
 
+/** Accepts a bare class or a `{ default }` module namespace, like Angular's `loadComponent`. */
+function unwrapLoaded(loaded) {
+    return typeof loaded === 'function' ? loaded : loaded.default;
+}
 /**
  * Outlet for FlyOS-embedded routing. Renders the component associated with the
  * first matching route in the consumer's `FLY_REMOTE_ROUTES` table, reacting to
@@ -4787,13 +4791,13 @@ function unloadRemoteStyles(appId) {
  * ```
  *
  * Why both? Standalone keeps full Angular routing — query params, guards,
- * resolvers, lazy loading, RouterLink. Embedded gets a stripped-down
- * synchronous outlet that matches against the same route table the remote
- * declared via `FLY_REMOTE_ROUTES`. The same `router.navigate(['/foo', id])`
- * call works in both modes; only the rendering surface differs.
+ * resolvers, RouterLink. Embedded gets a stripped-down outlet that matches
+ * against the same route table the remote declared via `FLY_REMOTE_ROUTES`. The
+ * same `router.navigate(['/foo', id])` call works in both modes; only the
+ * rendering surface differs.
  *
  * Limitations vs. `<router-outlet>`:
- * - Synchronous components only (no `loadComponent` / `loadChildren`).
+ * - No `loadChildren` (route-level code splitting only — see `loadComponent`).
  * - No guards / resolvers / data resolution.
  * - No query-param / hash handling — only path segments.
  * - No `RouterLink` directive — use `(click)="router.navigate(...)"`.
@@ -4803,19 +4807,97 @@ function unloadRemoteStyles(appId) {
  * private readonly router = inject(FlyRemoteRouter);
  * readonly id = computed(() => this.router.params()['id'] ?? '');
  * ```
+ *
+ * ## Lazy routes
+ *
+ * A route may supply `loadComponent: () => import('./x').then(m => m.XComponent)`
+ * instead of `component:`. The chunk is fetched on first match and cached for the
+ * lifetime of the outlet, so revisiting a route is synchronous.
+ *
+ * Three behaviours are deliberate, and each exists because the obvious
+ * alternative is worse:
+ *
+ * - **The previous component stays mounted while the next one loads.** Blanking
+ *   the outlet first would flash empty on every navigation, and a remote's chunks
+ *   are served from its own origin — usually a few milliseconds. This matches
+ *   Angular's Router, which does not tear down the current route until the next
+ *   one is ready.
+ * - **A stale resolution never wins.** Navigating A → B → C while B is still in
+ *   flight must not render B over C. Each resolution carries a sequence token and
+ *   is discarded unless it is still the latest.
+ * - **A failed load is reported to `ErrorHandler`, not swallowed.** The
+ *   chunk-404-after-redeploy self-heal (`provideFlyChunkReloadRecovery`) lives in
+ *   the root `ErrorHandler`, and a rejected promise inside an effect would reach
+ *   `unhandledrejection` instead — where that handler never sees it. Routing it
+ *   here is what lets a stale embedded remote recover. The failed loader is
+ *   evicted so a later attempt genuinely retries rather than reusing the
+ *   rejected promise.
  */
 class FlyRemoteRouterOutletComponent {
     router = inject(FlyRemoteRouter);
+    errorHandler = inject(ErrorHandler);
     /**
      * Read directly from FlyRemoteRouter so the outlet re-renders whenever the
      * URL changes (signal-based, OnPush-friendly).
      */
     matched = this.router.matchedRoute;
+    /** Loaders that have resolved — consulted synchronously, so a revisit never flashes. */
+    loaded = new Map();
+    /** Loaders currently in flight, so a param change mid-load doesn't start a second fetch. */
+    inFlight = new Map();
+    /** Bumped per resolution attempt; a late `.then` compares against it and bows out. */
+    seq = 0;
+    component = signal(null, ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
+    /** The component class currently projected into `*ngComponentOutlet`. */
+    rendered = this.component.asReadonly();
+    constructor() {
+        effect(() => {
+            const route = this.matched()?.route ?? null;
+            const token = ++this.seq;
+            if (!route) {
+                this.component.set(null);
+                return;
+            }
+            if (route.component) {
+                this.component.set(route.component);
+                return;
+            }
+            const loader = route.loadComponent;
+            const already = this.loaded.get(loader);
+            if (already) {
+                // Synchronous: no microtask gap, so re-matching the same lazy route on a
+                // param change cannot blank or re-create the component.
+                this.component.set(already);
+                return;
+            }
+            let pending = this.inFlight.get(loader);
+            if (!pending) {
+                pending = Promise.resolve(loader()).then(unwrapLoaded);
+                this.inFlight.set(loader, pending);
+            }
+            pending
+                .then((cmp) => {
+                this.loaded.set(loader, cmp);
+                this.inFlight.delete(loader);
+                if (token === this.seq)
+                    this.component.set(cmp);
+            })
+                .catch((err) => {
+                // Evict so a retry re-runs the import instead of re-awaiting a rejection.
+                this.inFlight.delete(loader);
+                // Leave the previous component mounted — a blank outlet tells the user
+                // nothing, and Angular's Router likewise keeps the current route on a
+                // failed lazy load.
+                if (token === this.seq)
+                    this.errorHandler.handleError(err);
+            });
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyRemoteRouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyRemoteRouterOutletComponent, isStandalone: true, selector: "fly-remote-router-outlet", ngImport: i0, template: `
-    @if (matched(); as m) {
-      <ng-container *ngComponentOutlet="m.route.component" />
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyRemoteRouterOutletComponent, isStandalone: true, selector: "fly-remote-router-outlet", ngImport: i0, template: `
+    @if (rendered(); as cmp) {
+      <ng-container *ngComponentOutlet="cmp" />
+    }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyRemoteRouterOutletComponent, decorators: [{
@@ -4825,13 +4907,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     standalone: true,
                     imports: [NgComponentOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @if (matched(); as m) {
-      <ng-container *ngComponentOutlet="m.route.component" />
-    }
+                    template: `
+    @if (rendered(); as cmp) {
+      <ng-container *ngComponentOutlet="cmp" />
+    }
   `,
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Shared mock AuthService base class for Business App developers.