Migrating to v4

In v3 the Angular docs handed you a directive to copy into your own project. v4 replaces that with the official @foresightjs/angular package. Install it, delete your copied directive, and import the standalone directive from the package.

npm install @foresightjs/angular js.foresight

- import { ForesightDirective } from "./directives/foresight.directive"
+ import { ForesightDirective } from "@foresightjs/angular"

The directive selector is [fsForesight]:

<a href="/pricing" [fsForesight]="prefetchPricing">Pricing</a>

For reactive state, export the directive as foresight and read its signal:

<button [fsForesight]="prefetchCheckout" #foresight="foresight">
  {{ foresight.state().isPredicted ? "Ready" : "Checkout" }}
</button>

Core changes

The core js.foresight library also has a few breaking changes. The package handles most of these for you, but they matter if you call register() or listen to events directly.

The register() call itself is unchanged, but element data is now an immutable state snapshot you can subscribe to - the foundation the wrapper packages are built on:

• ForesightElementData is now ForesightElementState. Your callback receives the flat state snapshot: callback: (state: ForesightElementState) => void. See TypeScript.
• register() returns the state plus unregister, subscribe and getSnapshot. isTouchDevice is gone from the result; touch devices are handled internally by the configured touchDeviceStrategy global setting.
• The elementDataUpdated, elementOptionsUpdated and elementReactivated events are removed. Per-element changes are now observed through the subscribe/getSnapshot pair returned by register(). The remaining events carry the state in a state field instead of elementData.
• Detached elements are parked, not unregistered. Removing an element from the DOM no longer emits elementUnregistered with reason disconnected; the element stays registered but inactive and resumes when it reconnects.
• New enabled element option. Set it to false to keep an element registered but excluded from prediction.