V4.2.0 - The `<Foresight>` Component

v4.2 reworks the React and Vue packages around a single declarative <Foresight> component. Registering a list of elements no longer means wiring up useForesights and juggling callback refs. You wrap your items in <Foresight> and you're done. Under the hood the core also got a round of dedup and cleanup: duplicated settings/registration/logging paths are gone, and data-attribute mirroring is now a single global manager setting instead of a per-element concern.

js.foresight v4.2.0

• New: dataAttributeMirroring global setting. Mirroring registration data to element data-* attributes is now controlled once on the manager instead of per element (#133).
• Changed: active/parked element counts are now derived from state rather than tracked separately, removing a class of drift bugs (#134).
• Fix: changing the touch strategy to its current value no longer triggers a no-op settings change (#125).
• Fix: the desktop handler now respects positionHistorySize on init (#124).
• Performance: only active elements are observed on handler connect; parked elements stay out of the observer until reactivated (#126).
• Internal: removed duplicated settings/registration/logging code paths (#129) and dropped the unused HasListenersFunction type export (#127).

js.foresight-devtools v2.2.0

• Updated for the core changes above; element data-attribute display follows the new global dataAttributeMirroring setting (#133).

@foresightjs/react v0.3.0

• New: <Foresight> component replaces useForesights for registering dynamic lists of elements declaratively (#131).
• Fix: useForesight now handles multiple refs correctly (#135).

@foresightjs/vue v0.3.0

• New: <Foresight> component replaces useForesights for registering dynamic lists of elements declaratively (#132).
• Fix: useForesight now handles multiple refs correctly (#135).

Full Changelog: V4.1.0...V4.2.0

V4.1.0 - Bounds channel & scroll re-render fix

js.foresight v4.1.0

• New: element geometry moved to a dedicated bounds channel -> ForesightRegisterResult now has getBounds() and subscribeToBounds() for position/size updates (fired on every scroll/resize tick while visible) (#120)
• Changed: subscribe()/getSnapshot() now only fire/change on logical state changes, never on scroll/resize —> state snapshots are referentially stable while scrolling (#120)
• Breaking-ish: ForesightElementState.elementBounds removed; hitSlop now lives directly on the state snapshot; new exported ElementBounds type (#120)

js.foresight-devtools v2.1.0

• Performance: log tab rewritten around a dedicated log store, element tab render optimizations, cheaper/batched overlay updates (#119)
• Element overlays read geometry from the new core bounds channel (#120)

@foresightjs/react v0.2.0

• Performance: useForesights coalesces store notifications to one snapshot check per microtask instead of one per element per scroll tick (#120)
• Components no longer re-render on scroll/resize —> only on logical state changes, thanks to the core bounds split (#120)

@foresightjs/vue v0.2.0

• No functional changes; peer dependency bumped to js.foresight ^4.1.0

ForesightJS v4.0 - Official Framework Packages

The goal of v4.0 is to make ForesightJS a lot easier to use with popular frameworks. Until now, the docs handed you premade hooks, composables and directives to copy into your own project. v4 replaces all of that with two official wrapper packages: @foresightjs/react and @foresightjs/vue. Install one, delete your copied files, and you're done.

To make reactive bindings possible, the core element data model was reworked into immutable state snapshots with a subscription model. The same primitives the wrapper packages are built on, and the same ones you can use to build a binding for your own framework (Angular, Svelte, Solid, …).

Upgrading from v3.5? Follow the migration guide. The v3.5 docs stay available via the version dropdown.

js.foresight v4.0.0

• Immutable element state. ForesightElementData is now ForesightElementState: a flat, immutable snapshot whose reference is replaced (never mutated) on every change, so it plugs straight into any reactivity system.
• New register() return value. Besides the element state it now returns unregister, subscribe and getSnapshot
• isTouchDevice is gone from the result; touch devices are handled internally by the touchDeviceStrategy global setting.
• New updateElementOptions(). Change the options of an already-registered element in place. See registration options.
• New enabled element option. Keep an element registered but excluded from prediction.
• Detached elements are parked, not unregistered. Removing an element from the DOM no longer
  unregisters it; it's parked (isParked: true) and resumes automatically when it reconnects.
• Leaner event system. The elementDataUpdated, elementOptionsUpdated and elementReactivated events are removed in favor of the subscriber pattern; the remaining events carry the snapshot in a state field.
• Removed deprecated APIs. The debug global setting (use
  js.foresight-devtools) and unregisterOnCallback (use reactivateAfter) are gone.
• Performance. Pre-allocated trajectory event objects, faster trajectory calculations, error handling around subscriber listeners and extra isConnected guards.

Devtools — js.foresight-devtools v2.0.0

• Updated for the v4 core state model and event system.
• New nested show options to toggle each visualization individually: controlPanel, nameTags, elementOverlays, mouseTrajectory and scrollTrajectory.
• Better Elements tab. Elements are grouped into Active/Inactive with collapsible sections, and
  inactive elements carry reason badges (disabled, parked, limited, fired) explaining why.
• Full docs: Development Tools.

New — @foresightjs/react V0.1.0

Official React (18+) bindings, with dedicated React docs including Next.js and [React Router (https://foresightjs.com/docs/react/react-router) guides.

• useForesight — register a single element and get
  its live state plus a callback ref to bind it.
• useForesights — register a dynamic list of
  elements from one hook call.
• useForesightEvent — subscribe to a
  ForesightManager event for the lifetime of the component.
• Options like hitSlop and enabled are reactive — change a prop and the registration updates.

New — @foresightjs/vue V0.1.0

Official Vue 3 (3.5+) bindings, with [dedicated Vue docs (https://foresightjs.com/docs/vue/installation).

• v-foresight — directive to register an element with a callback or full options object.
• useForesight — register a single element and get reactive refs for its state.
• useForesights — register a dynamic list of elements from a single composable.
• useForesightEvent — subscribe to a ForesightManager event for the lifetime of the calling scope.

Docs

• The docs are now framework-aware: pick React or Vue from the dropdown at the top of the sidebar to get the entire documentation tailored to your framework.
• New Other Frameworks page showing how to build your own thin binding with the subscribe/getSnapshot pattern (Angular, Svelte, Solid examples). If you build one, sharing it is highly appreciated!
• Migration guides for core, React and Vue.

V3.5.0 - NodeList support

js.foresight (V3.5.0)

• Add support for NodeList in register/unregister/reactivate. Thanks for the suggestion @jlukic
  #67
• Bumped Tabbable to 6.4.0

V3.4.0

Added Lazy Loading

ForesightJS is designed to be lightweight. The entire library with all features is only ~32 KB minified. But now we go further with code splitting to minimize your initial bundle even more. Both handlers and predictors are lazy-loaded based on device type and enabled features:

Current chunk sizes:

Chunk	Size	Loaded When
Core	~14 KB	Always (initial load)
DesktopHandler + MousePredictor	~15 KB	Desktop/mouse users
TouchDeviceHandler	~2 KB	Touch device users
TabPredictor + tabbable	~7 KB	enableTabPrediction: true
ScrollPredictor	~1.5 KB	enableScrollPrediction: true
Touch predictors	~1.5 KB	Touch device (based on strategy)

Result:

• Touch devices load only ~19 KB (core + touch handler + touch predictor)
• Desktop with mouse-only loads ~32 KB (core + desktop handler + mouse predictor)
• Additional predictors (Tab, Scroll) load on-demand when enabled

js.foresight (V3.4.0)

• Added lazy loading to the predictors.
• Added loadedModules to getManagerData()

js.foresight-devtool (V1.4.0)

• Update devtools to display loaded modules in state log

V3.3.5

js.foresight (V3.3.5)

Small performance upgrades
Added tests

js.foresight-devtools (V1.3.4)

Small performance upgrades

V3.3.4

js.foresight

• bumped tabbable to 6.3.0

js.foresight-devtools (V1.3.3)

• Small bug fix

V3.3.2 - Configurable minimum connection type

V3.3.2 js.foresight

Features

• Added support for configuring the minimum connection speed with the minimumConnectionType prop. Options include slow-2g, 2g, 3g, and 4g (default: 3g). This replaces the previous fixed value of slow-2g. Thanks to @stijns96 for PR #16.

---

V1.3.2 js.foresight-devtools

Features

• The minimumConnectionType can now be toggled directly from the control panel.
• The control panel can be positioned in any of the four screen corners. This preference is set in the control panel and is stored in localStorage.

V3.3.1 - Manager Logging

V3.3.1 js.foresight

This version introduces a new enableManagerLogging prop for the ForesightManager. It’s primarily intended for maintainers, providing logs about internal manager activity that can’t be observed through event logging alone. These logs cover details such as manager initialization, switching device strategies (e.g., from mouse to pen), aborting controllers, and cache invalidation.

This should also fix #13

Features

• Added enableManagerLogging to the global settings

V3.3.0 - Full Touch Device Support! 📱

V3.3.0 js.foresight

This version introduces first-party touch device support for mobile and pen interactions. While desktop systems use multiple concurrent prediction strategies (mouse trajectory, keyboard navigation, scroll detection), touch devices operate with a single configurable strategy:

• onTouchStart (default) - Fires callbacks immediately when users begin touching an element, providing instant feedback before the touch interaction completes. (Conservative while saving bandwidth)
• Viewport - Triggers callbacks when elements enter the user's viewport. (Aggressive but offers a snappier experience)

The strategy can be configured while initializing the ForesightManager as seen below:

ForesightManager.initialize({
  touchDeviceStrategy: "viewport" // viewport, onTouchStart, none
})

Foresight also automatically switches between pen, mouse, and touch mode. Even mid-session.

---

Features

• Added first-party touch device support (see above)
• Added currentDeviceStrategy and activeElementCount to ForesightManager.instance.getManagerData
• Added new deviceStrategyChanged event.
• Added wasLastActiveElement to callbackCompleted event.
• Added wasLastRegisteredElement to elementUnregistered event

Changes

• Now removes all handlers when there are no active elements anymore.
• Removed trajectoryHitData from ForesightElementData since it is not needed anymore for calculations.

Others

• upped position-observer to version 1.0.1

V1.3.1 js.foresight-devtools

Changes

• Elements in the element tab will turn purple while in touch device mode.
• Log tab now supports the new deviceStrategyChanged event.
• Settings tab allows for real-time altering of the touchDeviceStrategy

Docs:

• Added search to docs!
• Added page on how to give your llm context about Foresight. Read more.
• Added your first element page.
• Split the Global Settings and Element Settings in two seperate pages.
• Made the events page more readable