Skip to main content
Version: 4.x

Migrating to v4

The goal of v4 is to make ForesightJS easier to set up. In v3 there were no official React, Vue, or Angular packages - the docs handed you a hook, composable, and directives to copy into your own project. v4 replaces that with official wrapper packages: @foresightjs/react, @foresightjs/vue, and @foresightjs/angular. Install one, delete your copied files, and update a couple of names.

The breaking changes in core js.foresight exist to support these wrappers: frameworks like React, Vue, and Angular need immutable state snapshots and a subscription model to render reactively, so the core's element data was reworked into exactly that. These changes affect you even if you don't use the wrapper packages - see Core below.

Core​

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.

React, Vue, and Angular​

Using one of the wrapper packages? Switch framework with the dropdown at the top of the sidebar to get the package migration guide: React, Vue, or Angular.