Migrating to v4

The goal of v4 is to make ForesightJS easier to set up. In v3 there was no React or Vue package - the docs handed you a hook, composable and directive to copy into your own project. v4 replaces that with official wrapper packages: @foresightjs/react and @foresightjs/vue. 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 and Vue 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.

Angular has no official package yet; the copy-paste directive from the 3.5 docs still works.

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

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