Add agent V4 support

.github/workflows/coverage-diff.yml

@@ -10,3 +10,5 @@ jobs:
       checks: write
       pull-requests: write
     uses: fingerprintjs/dx-team-toolkit/.github/workflows/coverage-diff.yml@v1
+    with:
+      testScript: pnpm test:coverage:diff

README.md

@@ -29,7 +29,7 @@ Fingerprint is a device intelligence platform offering industry-leading accuracy
   - [Requirements](#requirements)
   - [Installation](#installation)
   - [Getting started](#getting-started)
-    - [1. Wrap your application (or component) in `<FpjsProvider>`.](#1-wrap-your-application-or-component-in-fpjsprovider)
+    - [1. Wrap your application (or component) in `<FpProvider>`.](#1-wrap-your-application-or-component-in-FpProvider)
     - [2. Use the `useVisitorData()` hook in your components to identify visitors](#2-use-the-usevisitordata-hook-in-your-components-to-identify-visitors)
   - [Linking and tagging information](#linking-and-tagging-information)
   - [Caching strategy](#caching-strategy)
@@ -46,7 +46,7 @@ Fingerprint is a device intelligence platform offering industry-leading accuracy
 - For Typescript users: Typescript 4.8 or higher
 
 > [!NOTE]
-> This package assumes you have a Fingerprint Pro subscription or trial, it is not compatible with the [source-available FingerprintJS](https://github.com/fingerprintjs/fingerprintjs). See our documentation to learn more about the [differences between Fingerprint Pro and FingerprintJS](https://dev.fingerprint.com/docs/identification-vs-fingerprintjs).
+> This package assumes you have a Fingerprint Pro subscription or trial, it is not compatible with the [source-available FingerprintJS](https://github.com/fingerprintjs/fingerprintjs). See our documentation to learn more about the [differences between Fingerprint Pro and FingerprintJS](https://docs.fingerprint.com/docs/identification-vs-fingerprintjs).
 
 ## Installation
 
@@ -71,14 +71,14 @@ pnpm add @fingerprintjs/fingerprintjs-pro-react
 ## Getting started
 
 In order to identify visitors, you'll need a Fingerprint Pro account (you can [sign up for free](https://dashboard.fingerprint.com/signup/)).
-To get your API key and get started, see the [Fingerprint Pro Quick Start Guide](https://dev.fingerprint.com/docs/quick-start-guide).
+To get your API key and get started, see the [Fingerprint Pro Quick Start Guide](https://docs.fingerprint.com/docs/quick-start-guide).
 
-### 1. Wrap your application (or component) in `<FpjsProvider>`.
+### 1. Wrap your application (or component) in `<FpProvider>`.
 
 - Set `apiKey` to your Fingerprint [Public API Key](https://dashboard.fingerprint.com/api-keys).
-- Set `region` if you have chosen a non-global [region](https://dev.fingerprint.com/docs/regions) during registration.
-- Set `endpoint` and `scriptUrlPattern` if you are using [one of our proxy integrations to increase accuracy](https://dev.fingerprint.com/docs/protecting-the-javascript-agent-from-adblockers) and effectiveness of visitor identification.
-- You can use all the [load options](https://dev.fingerprint.com/reference/load-function#load-options) available in the JavaScript agent `load` function.
+- Set `region` if you have chosen a non-global [region](https://docs.fingerprint.com/docs/regions) during registration.
+- Set `endpoint`` if you are using [one of our proxy integrations to increase accuracy](https://docs.fingerprint.com/docs/protecting-the-javascript-agent-from-adblockers) and effectiveness of visitor identification.
+- You can use all the [start options](https://docs.fingerprint.com/reference/js-agent-v4-start-function#start-options) available in the JavaScript agent `load` function.
 
 ```jsx
 // src/index.js
@@ -133,7 +133,7 @@ The `useVisitorData` hook also returns a `getData` method you can use to make an
 
 - You can pass `{ immediate: false }` to `useVisitorData` to disable automatic visitor identification on render.
 
-Both `useVisitorData` and `getData` accept all the [get options](https://dev.fingerprint.com/reference/get-function#get-options) available in the JavaScript agent `get` function.
+Both `useVisitorData` and `getData` accept all the [get options](https://docs.fingerprint.com/reference/get-function#get-options) available in the JavaScript agent `get` function.
 
 ```jsx
 // src/App.js
@@ -189,7 +189,7 @@ export default App
 
 ## Linking and tagging information
 
-The `visitorId` provided by Fingerprint Identification is especially useful when combined with information you already know about your users, for example, account IDs, order IDs, etc. To learn more about various applications of the `linkedId` and `tag`, see [Linking and tagging information](https://dev.fingerprint.com/docs/tagging-information).
+The `visitorId` provided by Fingerprint Identification is especially useful when combined with information you already know about your users, for example, account IDs, order IDs, etc. To learn more about various applications of the `linkedId` and `tag`, see [Linking and tagging information](https://docs.fingerprint.com/docs/tagging-information).
 
 Associate the visitor ID with your data using the `linkedId` or `tag` parameter of the options object passed into the `useVisitorData()` hook or the `getData` function:
 
@@ -209,7 +209,7 @@ function App() {
 
 ## Error handling
 
-The `getData` function throws errors directly from the JS Agent without changing them. See [JS Agent error handling](https://dev.fingerprint.com/reference/error-handling) for more details.
+The `getData` function throws errors directly from the JS Agent without changing them. See [JS Agent error handling](https://docs.fingerprint.com/reference/js-agent-v4-error-handling) for more details.
 
 ## API Reference
 

__tests__/detect-env.test.ts

@@ -1,5 +1,6 @@
 import { detectEnvironment } from '../src/detect-env'
 import { Env } from '../src/env.types'
+import { describe, it, expect } from 'vitest'
 
 describe('Detect user env', () => {
   describe('Preact', () => {

__tests__/fpjs-provider.test.tsx

@@ -3,15 +3,12 @@ import { renderHook } from '@testing-library/react'
 import { FpContext } from '../src'
 import { createWrapper, getDefaultLoadOptions } from './helpers'
 import { version } from '../package.json'
+import { describe, it, expect, vi } from 'vitest'
+import * as agent from '@fingerprint/agent'
 
-jest.mock('@fingerprint/agent', () => {
-  return {
-    ...jest.requireActual<any>('@fingerprint/agent'),
-    start: jest.fn(),
-  }
-})
+vi.mock('@fingerprint/agent', { spy: true })
 
-const mockStart = jest.requireMock('@fingerprint/agent').start as jest.Mock
+const mockStart = vi.mocked(agent.start)
 
 describe('FpProvider', () => {
   it('should configure an instance of the Fp Agent', async () => {

__tests__/helpers.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react'
 import { FpProvider, FpProviderOptions } from '../src'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 
 export const getDefaultLoadOptions = () => ({
   apiKey: 'test_api_key',

__tests__/use-visitor-data.test.tsx

@@ -1,10 +1,11 @@
 import { useVisitorData, UseVisitorDataReturn } from '../src'
-import { render, renderHook } from '@testing-library/react'
-import { actWait, createWrapper } from './helpers'
-import { act } from 'react-dom/test-utils'
+import { act, render, renderHook } from '@testing-library/react'
+import { actWait, createWrapper, wait } from './helpers'
 import { useEffect, useState } from 'react'
 import userEvent from '@testing-library/user-event'
+import * as agent from '@fingerprint/agent'
 import { GetResult } from '@fingerprint/agent'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 const mockGetResult = {
   visitor_id: 'kOzFgO0kw2Eivvb14mRL',
@@ -14,23 +15,19 @@ const mockGetResult = {
   suspect_score: 0.5,
 } satisfies GetResult
 
-const mockGet = jest.fn()
+const mockGet = vi.fn()
 const mockAgent = {
   get: mockGet,
+  collect: vi.fn(),
 }
 
-const mockStart = jest.requireMock('@fingerprint/agent').start as jest.Mock
+vi.mock('@fingerprint/agent', { spy: true })
 
-jest.mock('@fingerprint/agent', () => {
-  return {
-    ...jest.requireActual('@fingerprint/agent'),
-    start: jest.fn(),
-  }
-})
+const mockStart = vi.mocked(agent.start)
 
 describe('useVisitorData', () => {
   beforeEach(() => {
-    jest.resetAllMocks()
+    vi.resetAllMocks()
 
     mockStart.mockReturnValue(mockAgent)
   })
@@ -71,6 +68,35 @@ describe('useVisitorData', () => {
     )
   })
 
+  it('should avoid duplicate requests if one is already pending', async () => {
+    mockGet.mockImplementation(async () => {
+      await wait(250)
+      return mockGetResult
+    })
+
+    const wrapper = createWrapper()
+    const { result } = renderHook(() => useVisitorData({ immediate: false }), { wrapper })
+    expect(result.current).toMatchObject(
+      expect.objectContaining({
+        isLoading: false,
+        data: undefined,
+      })
+    )
+
+    await Promise.all([result.current.getData(), result.current.getData()])
+
+    await actWait(500)
+
+    expect(mockStart).toHaveBeenCalled()
+    expect(mockGet).toHaveBeenCalledTimes(1)
+    expect(result.current).toMatchObject(
+      expect.objectContaining({
+        isLoading: false,
+        data: mockGetResult,
+      })
+    )
+  })
+
   it("shouldn't call getData on mount if 'immediate' option is set to false", async () => {
     mockGet.mockImplementation(() => mockGetResult)
 

__tests__/with-environment.preact.test.tsx

@@ -1,21 +1,23 @@
 import { render as preactRender } from '@testing-library/preact'
 import { h } from 'preact'
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+import * as compat from 'preact/compat'
 
 describe('WithEnvironment', () => {
   describe('when running within Preact', () => {
     beforeEach(() => {
-      jest.doMock('react-dom', () => require('preact/compat'))
-      jest.doMock('react', () => require('preact/compat'))
+      vi.doMock('react', () => compat)
+      vi.doMock('react-dom', () => compat)
     })
 
     afterEach(() => {
-      jest.resetModules()
+      vi.resetAllMocks()
     })
-
-    it('should detect env as "preact"', () => {
-      const { WithEnvironment } = require('../src/components/with-environment')
+    it('should detect env as "preact"', async () => {
+      const { WithEnvironment } = await import('../src/components/with-environment')
       const PrintEnv = (props: any) => h('div', null, props?.env?.name)
 
+      // @ts-ignore
       const { container } = preactRender(h(WithEnvironment, null, h(PrintEnv, null)))
 
       expect(container.innerHTML).toContain('preact')

__tests__/with-environment.test.tsx

@@ -4,10 +4,11 @@ import { WithEnvironment } from '../src/components/with-environment'
 import { Link, MemoryRouter, Route, Routes } from 'react-router-dom'
 import userEvent from '@testing-library/user-event'
 import { actWait } from './helpers'
+import { describe, it, expect, vi } from 'vitest'
 
 describe('WithEnvironment', () => {
   it('enhances provided element with `env` prop', () => {
-    const Mock = jest.fn(() => <div>foo</div>) as FunctionComponent
+    const Mock = vi.fn(() => <div>foo</div>) as FunctionComponent
 
     render(
       <WithEnvironment>

contributing.md

@@ -16,9 +16,7 @@ There are 4 demo pages for this integration:
 4. In `/examples/preact` folder. It is a demo built with Preact. You can find more info about configuration and starting demo in the [readme](examples/preact/README.md).
 5. In `/examples/webpack-based` folder. It is a simple demo built with raw webpack.
 
-If you want to test integration with [fingerprintjs-pro-spa](https://github.com/fingerprintjs/fingerprintjs-pro-spa), just [link the package](https://pnpm.io/cli/link#replace-an-installed-package-with-a-local-version-of-it) with the `pnpm link <spa-directory>`.
-
-❗ Build projects before testing integration. First build `fingerprintjs-pro-spa`, then `fingerprintjs-pro-react`, and then start spa example app.
+❗ Build projects before testing integration. First build `fingerprintjs-pro-react`, and then start any of the example apps.
 
 ### How to build
 
@@ -44,7 +42,7 @@ pnpm lint:fix
 
 ### How to test
 
-Tests are located in `__tests__` folder and run by [jest](https://jestjs.io/) in [jsdom](https://github.com/jsdom/jsdom) environment.
+Tests are located in `__tests__` folder and run by [vitest](https://vitest.dev/) in [jsdom](https://github.com/jsdom/jsdom) environment.
 
 To run tests you can use IDE instruments or just run:
 

examples/next-appDir/app/layout.tsx

@@ -1,5 +1,5 @@
 import '../styles/globals.css'
-import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react'
+import { FpProvider } from '@fingerprintjs/fingerprintjs-pro-react'
 import { PropsWithChildren } from 'react'
 
 const fpjsPublicApiKey = process.env.NEXT_PUBLIC_FPJS_PUBLIC_API_KEY as string
@@ -8,13 +8,7 @@ function RootLayout({ children }: PropsWithChildren) {
   return (
     <html>
       <body>
-        <FpjsProvider
-          loadOptions={{
-            apiKey: fpjsPublicApiKey,
-          }}
-        >
-          {children}
-        </FpjsProvider>
+        <FpProvider apiKey={fpjsPublicApiKey}>{children}</FpProvider>
       </body>
     </html>
   )

examples/next-appDir/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

package.json

@@ -2,15 +2,14 @@
   "name": "@fingerprintjs/fingerprintjs-pro-react",
   "version": "2.7.1",
   "description": "FingerprintJS Pro React SDK",
-  "main": "dist/fp-pro-react.cjs.js",
-  "module": "dist/fp-pro-react.esm.js",
+  "main": "dist/fp-pro-react.js",
+  "module": "dist/fp-pro-react.mjs",
   "types": "dist/fp-pro-react.d.ts",
   "exports": {
     ".": {
       "types": "./dist/fp-pro-react.d.ts",
-      "import": "./dist/fp-pro-react.esm.js",
-      "require": "./dist/fp-pro-react.cjs.js",
-      "node": "./dist/fp-pro-react.esm.js"
+      "import": "./dist/fp-pro-react.mjs",
+      "require": "./dist/fp-pro-react.js"
     }
   },
   "keywords": [
@@ -28,13 +27,14 @@
   "scripts": {
     "postinstall": "node scripts/detect-env.js",
     "prepare": "husky install",
-    "watch": "rollup -c rollup.config.js -w",
-    "build": "rimraf dist && rollup -c rollup.config.js --bundleConfigAsCjs",
+    "watch": "vite build --watch",
+    "build": "vite build",
     "start:spa": "pnpm start --prefix=examples/spa",
     "lint": "eslint --ext .js,.ts,.tsx --ignore-path .gitignore --max-warnings 0 .",
     "lint:fix": "pnpm lint --fix",
-    "test": "jest",
-    "test:coverage": "jest --coverage",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:coverage:diff": "vitest run --coverage --reporter json --outputFile.json=report.json",
     "test:dts": "tsc --noEmit --isolatedModules dist/fp-pro-react.d.ts",
     "docs": "typedoc src/index.ts --out docs"
   },
@@ -53,7 +53,7 @@
   },
   "homepage": "https://github.com/fingerprintjs/fingerprintjs-pro-react#readme",
   "dependencies": {
-    "@fingerprint/agent": "4.0.0-beta.5",
+    "@fingerprint/agent": "^4.0.0",
     "fast-deep-equal": "3.1.3"
   },
   "devDependencies": {
@@ -63,15 +63,13 @@
     "@fingerprintjs/eslint-config-dx-team": "^0.1.0",
     "@fingerprintjs/prettier-config-dx-team": "^0.2.0",
     "@fingerprintjs/tsconfig-dx-team": "^0.0.2",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/preact": "^3.2.3",
-    "@testing-library/react": "^14.2.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
+    "@testing-library/preact": "^3.2.4",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20.11.28",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "@vitest/coverage-istanbul": "^4.0.18",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "8.57.0",
@@ -80,23 +78,20 @@
     "eslint-plugin-react": "7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^9.0.11",
-    "jest": "^27.5.1",
-    "jest-environment-jsdom": "^27.5.1",
     "lint-staged": "^15.2.2",
     "preact": "^10.19.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "rimraf": "^5.0.5",
-    "rollup": "^4.43.0",
     "rollup-plugin-banner2": "^1.3.1",
-    "rollup-plugin-dts": "^6.2.1",
-    "rollup-plugin-license": "^3.6.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "typedoc": "^0.25.12",
-    "typescript": "^5.4.2"
+    "typescript": "^5.4.2",
+    "vite": "^7.3.0",
+    "vite-plugin-banner": "^0.8.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
   },
   "lint-staged": {
     "*.ts": "pnpm lint:fix",