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.