js.foresight

• bumped tabbable to 6.3.0

js.foresight-devtools (V1.3.3)

• Small bug fix

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 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 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

V3.2.0 js.foresight

In this update we changed the lifecycle of an registered element. Nothing will change for most applications but it is nice to know.

Before:
Register → callback hit → unregister

Now:
Register → callback hit → isCallbackActive prop set to false → wait for reactivateAfter ms (default infinitely) → set isCallbackActive back to true → Go back to callback hit step

With this new lifecycle it is now possible to refetch again after reactivateAfter ms, this is usefull for when you know your data that you prefetched earlier is stale. You can also programmatically reset isCallbackActive by calling ForesightManager.instance.reactivate().

Elements will still automatically be unregistered on DOM removal

Changes

• ForesightManager.instance.unregister() is now a public API for unregistering elements
• unregister() as return from ForesightManager.instance.register() has been deprecated

Features

• added elementReactivatedEvent which emits after an element is reactivated (if isCallbackActive is true)
• added callbackInfo to ForesightElementData with the following props for debugging purposes:
  • callbackFiredCount
  • lastCallbackInvokedAt
  • lastCallbackCompletedAt
  • lastCallbackRuntime
  • lastCallbackStatus
  • lastCallbackErrorMessage
  • reactivateAfter
  • isCallbackActive
  • isRunningCallback

V1.1.0 js.foresight-devtools

Features

• Element tab now distinguishes between active/unactive elements
• Element tab shows countdown of when the callback will be reactivated by setting isCallbackActive to true. Which is reactivateAfter ms after the callback is completed not invoked.
• Element tab allows you to unregister an element by clicking the trash icon
• Log tab now has the elementReactivatedEvent
• Both the json in the logs and element tab now show the full callbackInfo from ForesightElementData

All updates can be viewed in the Playground

js.foresight V3.1.3

Features

• Added new meta prop when registering an element as Record<string, unknown>.

Example:

ForesightManager.instance.register({
  element: elementRef.current,
  callback: () => {},
  meta: {path: "/about"} // For example store the path to the fetchable page
})

js.foresight-devtools V1.0.6

• Added meta prop to all log events and the element tab

js.foresight V3.1.2

Features

• When all elements are unregistered automatically turn of all event listeners
• Only turn on event listeners after the first element has been registered
• Smarter event listener setup. e.g. if enableTabPrediction is off dont listen to keydown and focusin instead of instantly returning.
• Added wasLastElement boolean to elementUnregistered event
• Added circularbuffer for faster array manipulations

js.foresight-devtools V1.0.5

Features

• Added log button for the current manager state in the log tab.

Overview

With the release of v3.0.0, the DevTools have been decoupled from the core Foresight package. This separation means that enhancements to the DevTools no longer impact the size of the core package shipped to users. Taking advantage of this flexibility, the DevTools have been completely rewritten from plain JavaScript to LIT. This migration improves maintainability and code structure, while still keeping the tool lightweight and efficient.

Foresight DevTools

IMPORTANT:
ForesightDebugger has been renamed to ForesightDevtools. Also you no langer need to pass it the ForesightManager instance.

   // Previously
   ForesightDebugger.initialize(ForesightManager.instance)

   // New
   ForesightDevtools.initialize()

General

• Initialization of the DevTools is now ForesightDevtools.initialize({}) instead of ForesightDebugger.initialize(ForesightManager.instance,{}).

Control Panel

• Fully rewritten in LIT.
• Redesigned the control panel visually.
• Added a new "Logs" tab, which logs all events emitted by the ForesightManager, viewable in the control panel or the console.
• Callbacks in the "Elements" tab now turn yellow when they are between the callbackInvoked and callbackCompleted states, making it visually clear how long your prefetch takes.
• Elements and logs are now expandable, displaying their information in JSON format with a copy button for easy sharing.

Debug Overlays

• Rewritten in LIT.
• Element callback overlay animations now take the exact same duration as the callback execution time.
• Element callback overlays are now colored depending on the CallbackHitType: Mouse = blue, Tab = orange, Scroll = green.

Foresight

Changes

• Split the callbackFired event into callbackInvoked and callbackCompleted. The callbackCompleted event includes the prefetch duration and returns a status of "success" or "error" along with an error message if applicable.
• managerSettingsChanged event now contains an array of updated settings.
• ForesightElementData type now includes registerCount, which counts how many times an element was registered without triggering its callback.
• Removed onAnyCallbackFired. Users should now use the new events introduced in 3.0.
• Added eventListeners to the getManagerData static method. Read more.
• elementDataUpdated's updatedProps is now an array of changed properties instead of a single property.
• elementDataUpdated is now emitted once per update, instead of twice when both visibility and bounds change.

Bug Fixes

• Fixed a bug where the tabbable elements cache wasn't cleared correctly after all elements were unregistered.
• Fixed a bug where the elementUnregistered event was emitted before the element was unregistered.
• Fixed a bug where the elementDataUpdated event would emit the previous elementData instead of the updated one.

Mentions

Thanks @akshykhade for creating/writing the Angular integrations (#6).

Thanks @Avcharov for creating a demo showcasing Angular Incremental Hydration prediction with Foresight.js. Read more.

Thanks @Hussseinkizz for fixing a bug in the docs (#7).
Thanks @Devon-White for updating @signalwire/docusaurus-plugin-llms-txt, allowing Foresight to generate a llms-full.txt file for llm context.

Overview

This major release focuses on package size reduction by separating development tools from the core package. The biggest change is the introduction of a standalone js.foresight-devtools package, which dramatically reduces the core package size while maintaining all existing functionality.

Features

Standalone Development Tools Package

• NEW: js.foresight-devtools is now a separate package
• BREAKING: Debugger functionality removed from core js.foresight package
• NEW: ForesightDebugger class for managing development tools
• IMPROVED: Development tools are now optional and don't bloat production builds

Event System

• NEW: Event system for monitoring ForesightJS operations
• NEW: Events for element registration, callbacks, trajectory updates, and settings changes
• NEW: Support for AbortController signals for easy event listener cleanup

Monorepo

• NEW: Foresightjs is now a monorepo making it way easier for contributors to make PR's

Documentation

New Documentation Pages

• NEW: Revamped homepage
• NEW: Events documentation - Complete guide to ForesightJS event system
• UPDATED: Development Tools documentation - Updated for standalone package

Migration Guide

If you didnt use the debug functionality, nothing changes and you can safely update

1. Update core package:

   pnpm add js.foresight@latest

2. Install development tools separately (if needed):

   pnpm add -D js.foresight-devtools@latest

3. Update initialization code:

   • Remove debug property from ForesightManager.initialize()
   • Add separate ForesightDebugger.initialize() call if using development tools

4. Use the new ForesightDebugger

   // v2.x (OLD)
   import { ForesightManager } from "js.foresight"
   ForesightManager.initialize({
     debug: true, // This no longer works
   })
   
   // v3.0 (NEW)
   import { ForesightManager } from "js.foresight"
   import { ForesightDebugger } from "js.foresight-devtools"
   
   ForesightManager.initialize({
     // Core settings only
   })
   
   // Separate debugger initialization
   ForesightDebugger.initialize(ForesightManager.instance, {
     showDebugger: true,
     isControlPanelDefaultMinimized: false,
   })

Removed Properties

• REMOVED: debug property from ForesightManagerSettings
• REMOVED: All debugger-related properties from core manager
• MOVED: Debug functionality to js.foresight-devtools package
• REMOVED: unregisterOnCallback

Docs

• Complete redesign of https://foresightjs.com/

Features

• The minimized debug control panel now displays the count of visible and total elements on the page.

Changes

• The mouse and scroll indicator in debug mode now look a bit more modern

Tests

• Added tests for common critical functions