@eagami/ui 5.74.0 → 5.76.0

package/README.md

@@ -36,7 +36,7 @@
 ng add @eagami/ui
 ```
 
-The schematic installs the package and registers the global stylesheet and fonts. To wire it up by hand, see [Setup](https://eagami.com/ui/setup).
+The schematic installs the package and registers the global stylesheet, the fonts, and `provideStaleBuildReload()`. To wire it up by hand, see [Setup](https://eagami.com/ui/setup).
 
 ## Use
 
@@ -87,6 +87,18 @@ Set it app-wide with `forms`, or on a single field with the `showErrorsOn` input
 provideEagamiUi({ forms: { showErrorsOn: 'touch' } });
 ```
 
+## Deploys
+
+A tab left open across a deploy still runs the old build, so the next page it lazy loads asks for a file the deploy removed. `provideStaleBuildReload()` from `@eagami/ui/router` loads that page in full on the new build instead, and tries only once:
+
+```ts
+bootstrapApplication(AppComponent, {
+  providers: [provideRouter(routes), provideStaleBuildReload()],
+});
+```
+
+Pass `version` and `onReport` to log how each reload turned out, and check `isStaleBuildReloadError(error)` to keep the error it answered out of your error reporting.
+
 ## Testing
 
 `<ea-dialog>` and `<ea-drawer>` are built on the native `<dialog>` element, and `@eagami/ui/testing` keeps them working in jsdom, which lacks `showModal()` and `close()`. Call `installNativeDialogShim()` once from your test setup file:

package/fesm2022/eagami-ui-router.mjs

@@ -0,0 +1,124 @@
+import { DOCUMENT, Location, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Injectable, InjectionToken, PLATFORM_ID, inject, makeEnvironmentProviders, provideEnvironmentInitializer } from "@angular/core";
+import { NavigationEnd, NavigationError, Router } from "@angular/router";
+const PENDING_RELOAD_KEY = "ea-pending-reload";
+const CHUNK_LOAD_FAILURES = [
+	"Failed to fetch dynamically imported module",
+	"error loading dynamically imported module",
+	"Importing a module script failed",
+	"is not a valid JavaScript MIME type"
+];
+const STALE_BUILD_RELOAD_CONFIG = new InjectionToken("STALE_BUILD_RELOAD_CONFIG");
+const LOAD_PAGE = new InjectionToken("LOAD_PAGE", {
+	providedIn: "root",
+	factory: () => {
+		const location = inject(DOCUMENT).location;
+		return (url, replace) => replace ? location.replace(url) : location.assign(url);
+	}
+});
+const reloadedErrors = /* @__PURE__ */ new WeakSet();
+function isStaleBuildReloadError(error) {
+	return error instanceof Error && reloadedErrors.has(error);
+}
+function isChunkLoadFailure(error) {
+	return error instanceof TypeError && CHUNK_LOAD_FAILURES.some((failure) => error.message.includes(failure));
+}
+function isSessionStorageAvailable() {
+	const probeKey = `${PENDING_RELOAD_KEY}-probe`;
+	try {
+		sessionStorage.setItem(probeKey, probeKey);
+		sessionStorage.removeItem(probeKey);
+		return true;
+	} catch {
+		return false;
+	}
+}
+var StaleBuildReloader = class StaleBuildReloader {
+	config = inject(STALE_BUILD_RELOAD_CONFIG);
+	loadPage = inject(LOAD_PAGE);
+	location = inject(Location);
+	router = inject(Router);
+	canTrackReloads = isSessionStorageAvailable();
+	pageId = Math.random().toString(36).slice(2);
+	constructor() {
+		this.router.events.subscribe((event) => {
+			if (event instanceof NavigationEnd) this.settlePendingReload();
+			else if (event instanceof NavigationError && isChunkLoadFailure(event.error)) this.reloadIntoCurrentBuild(event.url, event.error);
+		});
+	}
+	settlePendingReload() {
+		const pending = this.takePendingReload();
+		if (pending) this.report(pending.pageId === this.pageId ? "stayed" : "recovered", pending);
+	}
+	reloadIntoCurrentBuild(url, error) {
+		const pending = this.takePendingReload();
+		if (pending) {
+			const isAfterReload = pending.pageId !== this.pageId;
+			this.report(isAfterReload ? "failed-after-reload" : "stayed", pending);
+			if (isAfterReload) return;
+		}
+		if (!this.canTrackReloads || !navigator.onLine) return;
+		const navigation = this.router.currentNavigation();
+		const replace = !this.router.navigated || navigation?.trigger !== "imperative" || !!navigation.extras.replaceUrl;
+		const reload = {
+			pageId: this.pageId,
+			route: url.replace(/[?#].*/, ""),
+			version: this.config.version
+		};
+		sessionStorage.setItem(PENDING_RELOAD_KEY, JSON.stringify(reload));
+		reloadedErrors.add(error);
+		this.loadPage(this.location.prepareExternalUrl(url), replace);
+	}
+	takePendingReload() {
+		const value = this.canTrackReloads ? sessionStorage.getItem(PENDING_RELOAD_KEY) : null;
+		if (!value) return null;
+		sessionStorage.removeItem(PENDING_RELOAD_KEY);
+		return JSON.parse(value);
+	}
+	report(outcome, pending) {
+		this.config.onReport?.({
+			outcome,
+			route: pending.route,
+			fromVersion: pending.version,
+			toVersion: this.config.version
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: StaleBuildReloader,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: StaleBuildReloader
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: StaleBuildReloader,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => []
+});
+function provideStaleBuildReload(config = {}) {
+	return makeEnvironmentProviders([
+		{
+			provide: STALE_BUILD_RELOAD_CONFIG,
+			useValue: config
+		},
+		StaleBuildReloader,
+		provideEnvironmentInitializer(() => {
+			if (isPlatformBrowser(inject(PLATFORM_ID))) inject(StaleBuildReloader);
+		})
+	]);
+}
+export { isStaleBuildReloadError, provideStaleBuildReload };
+
+//# sourceMappingURL=eagami-ui-router.mjs.map

package/fesm2022/eagami-ui-router.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"eagami-ui-router.mjs","names":[],"sources":["../../../router/src/stale-build-reload.ts"],"sourcesContent":["import { DOCUMENT, Location, isPlatformBrowser } from '@angular/common';\nimport {\n  type EnvironmentProviders,\n  Injectable,\n  InjectionToken,\n  PLATFORM_ID,\n  inject,\n  makeEnvironmentProviders,\n  provideEnvironmentInitializer,\n} from '@angular/core';\nimport { NavigationEnd, NavigationError, Router } from '@angular/router';\n\n/**\n * How a reload into the current build turned out:\n *\n * - `'recovered'`: the reloaded page opened\n * - `'failed-after-reload'`: the reloaded page failed to open too, so the error is left to surface\n * - `'stayed'`: the visitor chose to stay when the browser asked them to confirm leaving\n */\nexport type StaleBuildReloadOutcome = 'recovered' | 'failed-after-reload' | 'stayed';\n\nexport interface StaleBuildReloadReport {\n  outcome: StaleBuildReloadOutcome;\n  /** The path that failed to open, without its query or fragment. */\n  route: string;\n  /** The `version` configured in the build that failed to open the page. */\n  fromVersion?: string;\n  /** The `version` configured in the build making the report. */\n  toVersion?: string;\n}\n\nexport interface StaleBuildReloadConfig {\n  /** The app's version, carried across the reload so a report names both builds. */\n  version?: string;\n  /** Called once per reload with how it turned out, for example to log it. */\n  onReport?: (report: StaleBuildReloadReport) => void;\n}\n\ninterface PendingReload {\n  pageId: string;\n  route: string;\n  version?: string;\n}\n\nconst PENDING_RELOAD_KEY = 'ea-pending-reload';\n\n// Each browser engine words a failed dynamic import differently\nconst CHUNK_LOAD_FAILURES = [\n  'Failed to fetch dynamically imported module', // Chromium\n  'error loading dynamically imported module', // Firefox\n  'Importing a module script failed', // WebKit\n  'is not a valid JavaScript MIME type', // WebKit, when the host answers a removed file with the app's page\n];\n\nconst STALE_BUILD_RELOAD_CONFIG = new InjectionToken<StaleBuildReloadConfig>(\n  'STALE_BUILD_RELOAD_CONFIG',\n);\n\n// Swappable in tests, since jsdom cannot navigate\nexport const LOAD_PAGE = new InjectionToken<(url: string, replace: boolean) => void>(\n  'LOAD_PAGE',\n  {\n    providedIn: 'root',\n    factory: () => {\n      const location = inject(DOCUMENT).location;\n      return (url, replace) => (replace ? location.replace(url) : location.assign(url));\n    },\n  },\n);\n\nconst reloadedErrors = new WeakSet<Error>();\n\n/**\n * Whether `error` is a failed page load that `provideStaleBuildReload()` has\n * already answered by reloading. Error reporters can drop it, since the\n * reload's outcome reaches `onReport` instead:\n *\n * ```ts\n * Sentry.init({\n *   beforeSend: (event, hint) =>\n *     isStaleBuildReloadError(hint.originalException) ? null : event,\n * });\n * ```\n */\nexport function isStaleBuildReloadError(error: unknown): boolean {\n  return error instanceof Error && reloadedErrors.has(error);\n}\n\nfunction isChunkLoadFailure(error: unknown): error is TypeError {\n  return (\n    error instanceof TypeError &&\n    CHUNK_LOAD_FAILURES.some(failure => error.message.includes(failure))\n  );\n}\n\nfunction isSessionStorageAvailable(): boolean {\n  const probeKey = `${PENDING_RELOAD_KEY}-probe`;\n  try {\n    sessionStorage.setItem(probeKey, probeKey);\n    sessionStorage.removeItem(probeKey);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * A pending reload left by another page means this page is that reload. One\n * left by this same page means the visitor stayed when asked to confirm leaving.\n */\n@Injectable()\nclass StaleBuildReloader {\n  private readonly config = inject(STALE_BUILD_RELOAD_CONFIG);\n  private readonly loadPage = inject(LOAD_PAGE);\n  private readonly location = inject(Location);\n  private readonly router = inject(Router);\n\n  private readonly canTrackReloads = isSessionStorageAvailable();\n  private readonly pageId = Math.random().toString(36).slice(2);\n\n  constructor() {\n    this.router.events.subscribe(event => {\n      if (event instanceof NavigationEnd) {\n        this.settlePendingReload();\n      } else if (event instanceof NavigationError && isChunkLoadFailure(event.error)) {\n        this.reloadIntoCurrentBuild(event.url, event.error);\n      }\n    });\n  }\n\n  private settlePendingReload(): void {\n    const pending = this.takePendingReload();\n\n    if (pending) {\n      this.report(pending.pageId === this.pageId ? 'stayed' : 'recovered', pending);\n    }\n  }\n\n  private reloadIntoCurrentBuild(url: string, error: TypeError): void {\n    const pending = this.takePendingReload();\n\n    if (pending) {\n      const isAfterReload = pending.pageId !== this.pageId;\n      this.report(isAfterReload ? 'failed-after-reload' : 'stayed', pending);\n\n      if (isAfterReload) {\n        return;\n      }\n    }\n\n    // Untracked, a failing reload could repeat forever, and offline it would only leave the app\n    if (!this.canTrackReloads || !navigator.onLine) {\n      return;\n    }\n\n    const navigation = this.router.currentNavigation();\n    // A first load, Back or Forward, or a replacing navigation already has its history entry\n    const replace =\n      !this.router.navigated ||\n      navigation?.trigger !== 'imperative' ||\n      !!navigation.extras.replaceUrl;\n\n    const reload: PendingReload = {\n      pageId: this.pageId,\n      route: url.replace(/[?#].*/, ''),\n      version: this.config.version,\n    };\n    sessionStorage.setItem(PENDING_RELOAD_KEY, JSON.stringify(reload));\n    reloadedErrors.add(error);\n\n    this.loadPage(this.location.prepareExternalUrl(url), replace);\n  }\n\n  private takePendingReload(): PendingReload | null {\n    const value = this.canTrackReloads\n      ? sessionStorage.getItem(PENDING_RELOAD_KEY)\n      : null;\n\n    if (!value) {\n      return null;\n    }\n\n    sessionStorage.removeItem(PENDING_RELOAD_KEY);\n    return JSON.parse(value);\n  }\n\n  private report(outcome: StaleBuildReloadOutcome, pending: PendingReload): void {\n    this.config.onReport?.({\n      outcome,\n      route: pending.route,\n      fromVersion: pending.version,\n      toVersion: this.config.version,\n    });\n  }\n}\n\n/**\n * Loads the current build in full when the code of a page being opened fails\n * to load, which is what a tab still running a build that a deploy has since\n * replaced runs into. The reload opens the page the visitor asked for, and\n * stops after one attempt if the new build fails as well.\n *\n * ```ts\n * bootstrapApplication(AppComponent, {\n *   providers: [provideRouter(routes), provideStaleBuildReload()],\n * });\n * ```\n *\n * Does nothing during server rendering.\n */\nexport function provideStaleBuildReload(\n  config: StaleBuildReloadConfig = {},\n): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: STALE_BUILD_RELOAD_CONFIG, useValue: config },\n    StaleBuildReloader,\n    // Created ahead of the first navigation, which a tab restored on an old build can fail\n    provideEnvironmentInitializer(() => {\n      if (isPlatformBrowser(inject(PLATFORM_ID))) {\n        inject(StaleBuildReloader);\n      }\n    }),\n  ]);\n}\n"],"mappings":"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"}