Upgrade to React 19

apps/demo-app-video/package.json

@@ -37,9 +37,9 @@
     "@monkvision/types": "5.1.4",
     "@types/babel__core": "^7",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.18",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1",
+    "@types/react-dom": "^19.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/sort-by": "^1",
     "axios": "^1.5.0",
@@ -48,14 +48,14 @@
     "jest-watch-typeahead": "^2.2.2",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.1",
+    "react-dom": "^19.1",
     "react-i18next": "^13.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "sort-by": "^1.2.0",
     "source-map-explorer": "^2.5.3",
-    "typescript": "^4.9.5",
+    "typescript": "^5.9.2",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

apps/demo-app-video/src/index.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { MonitoringProvider } from '@monkvision/monitoring';
 import { AnalyticsProvider } from '@monkvision/analytics';
 import { Auth0Provider } from '@auth0/auth0-react';
@@ -9,7 +9,12 @@ import { AppRouter } from './components';
 import './index.css';
 import './i18n';
 
-ReactDOM.render(
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('Root container not found.');
+}
+const root = createRoot(container);
+root.render(
   <MonitoringProvider adapter={sentryMonitoringAdapter}>
     <AnalyticsProvider adapter={posthogAnalyticsAdapter}>
       <Auth0Provider
@@ -25,5 +30,4 @@ ReactDOM.render(
       </Auth0Provider>
     </AnalyticsProvider>
   </MonitoringProvider>,
-  document.getElementById('root'),
 );

apps/demo-app/package.json

@@ -37,9 +37,9 @@
     "@monkvision/types": "5.1.4",
     "@types/babel__core": "^7",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.18",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1",
+    "@types/react-dom": "^19.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/sort-by": "^1",
     "axios": "^1.5.0",
@@ -48,14 +48,14 @@
     "jest-watch-typeahead": "^2.2.2",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.1",
+    "react-dom": "^19.1",
     "react-i18next": "^13.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "sort-by": "^1.2.0",
     "source-map-explorer": "^2.5.3",
-    "typescript": "^4.9.5",
+    "typescript": "^5.9.2",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
@@ -67,10 +67,9 @@
     "@monkvision/prettier-config": "5.1.4",
     "@monkvision/test-utils": "5.1.4",
     "@monkvision/typescript-config": "5.1.4",
-    "@testing-library/dom": "^8.20.0",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^12.1.5",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
@@ -88,7 +87,7 @@
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-utils": "^3.0.0",
-    "jest": "^29.3.1",
+    "jest": "^29.6",
     "prettier": "^2.7.1",
     "regexpp": "^3.2.0",
     "ts-jest": "^29.0.3"

apps/demo-app/src/index.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { MonitoringProvider } from '@monkvision/monitoring';
 import { AnalyticsProvider } from '@monkvision/analytics';
 import { Auth0Provider } from '@auth0/auth0-react';
@@ -9,7 +9,12 @@ import { AppRouter } from './components';
 import './index.css';
 import './i18n';
 
-ReactDOM.render(
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('Root container not found.');
+}
+const root = createRoot(container);
+root.render(
   <MonitoringProvider adapter={sentryMonitoringAdapter}>
     <AnalyticsProvider adapter={posthogAnalyticsAdapter}>
       <Auth0Provider
@@ -25,5 +30,4 @@ ReactDOM.render(
       </Auth0Provider>
     </AnalyticsProvider>
   </MonitoringProvider>,
-  document.getElementById('root'),
 );

configs/eslint-config-typescript/package.json

@@ -15,7 +15,7 @@
     "@monkvision/eslint-config-base": "*",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
-    "typescript": "^4.8.4"
+    "typescript": "^5.9.2"
   },
   "publishConfig": {
     "access": "public"

configs/jest-config/base.js

@@ -1,17 +1,19 @@
-const esModules = ['@monkvision/test-utils', 'ky'].join('|');
+const esModules = ["@monkvision/test-utils", "ky"].join("|");
 
 module.exports = (options) => ({
-  rootDir: './',
-  roots: options?.monorepo ? ['<rootDir>', '<rootDir>/../../configs/test-utils/src/__mocks__'] : ['<rootDir>'],
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-  testMatch: ['**/test/**/*.test.ts'],
-  coverageDirectory: 'coverage',
-  coverageReporters: ['lcov'],
-  collectCoverageFrom: [
-    'src/**/*.ts',
-  ],
-  transformIgnorePatterns: options?.monorepo ? [] : [`node_modules/(?!${esModules})`],
+  rootDir: "./",
+  roots: options?.monorepo
+    ? ["<rootDir>", "<rootDir>/../../configs/test-utils/src/__mocks__"]
+    : ["<rootDir>"],
+  preset: "ts-jest",
+  testEnvironment: "node",
+  testMatch: ["**/test/**/*.test.ts"],
+  coverageDirectory: "coverage",
+  coverageReporters: ["lcov"],
+  collectCoverageFrom: ["src/**/*.ts"],
+  transformIgnorePatterns: options?.monorepo
+    ? []
+    : [`node_modules/(?!${esModules})`],
   coverageThreshold: {
     global: {
       branches: 60,
@@ -20,4 +22,4 @@ module.exports = (options) => ({
       statements: 60,
     },
   },
-})
+});

configs/jest-config/index.js

@@ -1,5 +1,5 @@
-const base = require('./base');
-const react = require('./react');
+const base = require("./base");
+const react = require("./react");
 
 module.exports = {
   base,

configs/jest-config/setupTests.js

@@ -1,12 +1,15 @@
-const fs = require('fs');
-const path = require('path');
+const fs = require("fs");
+const path = require("path");
 
-const mocks = fs.readdirSync(
-  path.join(__dirname, '..', 'test-utils', 'src', '__mocks__'),
-  { recursive: true },
-).filter((name) => !name.startsWith('imports') && !name.match(/^@[^/]+$/g))
-  .map((name) => name.substring(0, name.length - (name.endsWith('x') ? 4 : 3)));
+const mocks = fs
+  .readdirSync(path.join(__dirname, "..", "test-utils", "src", "__mocks__"), {
+    recursive: true,
+  })
+  .filter((name) => !name.startsWith("imports") && !name.match(/^@[^/]+$/g))
+  .map((name) => name.substring(0, name.length - (name.endsWith("x") ? 4 : 3)));
 
 mocks.forEach((mock) => {
-  jest.mock(mock, () => require('@monkvision/test-utils/src/__mocks__/' + mock));
+  jest.mock(mock, () =>
+    require("@monkvision/test-utils/src/__mocks__/" + mock)
+  );
 });

configs/test-utils/package.json

@@ -28,8 +28,7 @@
     "@monkvision/jest-config": "5.1.4",
     "@monkvision/prettier-config": "5.1.4",
     "@monkvision/typescript-config": "5.1.4",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.2.2",
     "@types/node": "^18.11.9",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
@@ -50,8 +49,8 @@
     "jest": "^29.3.1",
     "mkdirp": "^1.0.4",
     "prettier": "^2.7.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.1",
+    "react-dom": "^19.1",
     "regexpp": "^3.2.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.0.3",

configs/test-utils/src/expects/props.tsx

@@ -21,7 +21,23 @@ export function expectPropsOnChildMock(
   Component: jest.Mock | FC<any> | ForwardedRef<any>,
   props: { [key: string]: unknown },
 ): void {
-  expect(Component).toHaveBeenCalledWith(expect.objectContaining(props), expect.anything());
+  const mock = Component as jest.Mock;
+  expect(mock).toHaveBeenCalled();
+
+  const matched = mock.mock.calls.some(([callProps]) =>
+    expect.objectContaining(props).asymmetricMatch(callProps),
+  );
+
+  if (!matched) {
+    throw new Error(
+      `Expected child mock to have been called with props matching ${JSON.stringify(props)},\n` +
+        `but received calls:\n${JSON.stringify(
+          mock.mock.calls.map((c) => c[0]),
+          null,
+          2,
+        )}`,
+    );
+  }
 }
 
 /**

documentation/docs/getting-started.md

@@ -4,11 +4,11 @@ sidebar_position: 2
 
 # Getting Started
 ## Creating Your App
-The current React version supported by the MonkJs SDK is [React 17](https://react.dev/versions#react-17). We do not
+The current React version supported by the MonkJs SDK is [React 19](https://react.dev/versions#react-19). We do not
 guarantee proper functioning of the SDK on other React versions than this one. TypeScript is supported by default in the
 SDK, and you do not need to install any additional package to use the MonkJs type definitions in your app.
 
 We do not require any specific loader like Webpack etc. Our SDK can be used on virtually any project as long as you're
-using React 17. We plan on creating Create-React-App templates to allow developers to bootstrap new MonkJs webapps more
+using React 19. We plan on creating Create-React-App templates to allow developers to bootstrap new MonkJs webapps more
 easily. Until then, you can either create your app manually, or start by copying our official
 [Demo App](https://github.com/monkvision/monkjs/tree/main/apps/demo-app) to start your project.

documentation/docs/v3-docs/apis/react-native/damage-annotation.md

@@ -89,7 +89,7 @@ Set the background image opacity (works only if clip is `true`)
 
 Set the style of the ellipse by defining the stroke's color and width
 
-### ellipse.anchor.{ x | y | o }
+### ellipse.anchor.{`x`} | {`y`} | {`o`}
 `PropsTypes.shape({ color: PropsTypes.string, radius: PropsTypes.number })`
 
 Set the color of the ellipse's anchor icon of the `x` or `y` axis or the origin `o`'s color and size

documentation/docs/v3-docs/monitoring.md

@@ -32,14 +32,14 @@ The configuration options are listed below :
 
 ### Monitoring Config
 
-| **Config option**  | **Required** | **Type**                  | **Description**                                                                                                                                                                                   |
-| ------------------ | ------------ | --------                  | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `dsn`              | ✓            | string                    | DSN (Data Source Name) key for sentry.io application. A DSN tells a Sentry SDK where to send events so the events are associated with the correct project.                                        |
-| `environment`      | ✓            | string                    | The current environment of your application , such as _development_, _testing_, _staging_, or _production_. Environments help you better filter issues and transactions among other uses.         |
-| `debug`            | ✓            | boolean                   | Enable debug functionality in the SDK itself. If debug is enabled SDK will attempt to print out useful debugging information in browser's console if something goes wrong with sending the event. |
-| `tracesSampleRate` | ✓            | number                    | Sample rate to determine trace sampling. The default is 1.0 which means that 100% of error events are sent.                                                                                       |
-| `tracingOrigins`   | ✓            | string[]                  | Array of all the origin to browser trace                                                                                                                                                          |
-| `customTags`       |              | { [tag: string]: string } | Add custom tags in all transactions for better tracking                                                                                                                                           |
+| **Config option**  | **Required** | **Type**                    | **Description**                                                                                                                                                                                   |
+|--------------------|--------------|-----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `dsn`              | ✓            | `string`                    | DSN (Data Source Name) key for sentry.io application. A DSN tells a Sentry SDK where to send events so the events are associated with the correct project.                                        |
+| `environment`      | ✓            | `string`                    | The current environment of your application , such as _development_, _testing_, _staging_, or _production_. Environments help you better filter issues and transactions among other uses.         |
+| `debug`            | ✓            | `boolean`                   | Enable debug functionality in the SDK itself. If debug is enabled SDK will attempt to print out useful debugging information in browser's console if something goes wrong with sending the event. |
+| `tracesSampleRate` | ✓            | `number`                    | Sample rate to determine trace sampling. The default is 1.0 which means that 100% of error events are sent.                                                                                       |
+| `tracingOrigins`   | ✓            | `string[]`                  | Array of all the origin to browser trace                                                                                                                                                          |
+| `customTags`       |              | `{ [tag: string]: string }` | Add custom tags in all transactions for better tracking                                                                                                                                           |
 
 ### Note
 
@@ -93,12 +93,12 @@ Where name is the module name for which we want to measure performance. Operatio
 
 ### SentryTransactionObject
 
-| **Config option** | **Params**                                                    | **Description**                                                                              |
-| ----------------- | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| `setTag`          | name: string, value: string                                   | Set tag in a transaction instance                                                            |
-| `startSpan`       | op: string, data: { [key: string]: number \| string } \| null | Create a span in a transaction instance to measure the performance for a sub event           |
-| `finishSpan`      | op: string                                                    | Finish a running span in a transaction instance and complete the measurement for a sub event |
-| `finish`          | status: string                                                | Finish a running transaction instance and complete the measurement for a main event          |
+| **Config option** | **Params**                                                      | **Description**                                                                              |
+|-------------------|-----------------------------------------------------------------|----------------------------------------------------------------------------------------------|
+| `setTag`          | `name: string, value: string`                                   | Set tag in a transaction instance                                                            |
+| `startSpan`       | `op: string, data: { [key: string]: number \| string } \| null` | Create a span in a transaction instance to measure the performance for a sub event           |
+| `finishSpan`      | `op: string`                                                    | Finish a running span in a transaction instance and complete the measurement for a sub event |
+| `finish`          | `status: string`                                                | Finish a running transaction instance and complete the measurement for a main event          |
 
 User can set tags, create new span and finish span & transaction at the end to send measured data to sentry. `capture.finish('Ok')`
 

documentation/docusaurus.config.js

@@ -1,8 +1,8 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const lightCodeTheme = require('prism-react-renderer').themes.github;
+const darkCodeTheme = require('prism-react-renderer').themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -26,8 +26,7 @@ const config = {
       ({
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
-          editUrl:
-            'https://github.com/monkvision/monkjs/blob/main/documentation/',
+          editUrl: 'https://github.com/monkvision/monkjs/blob/main/documentation/',
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
@@ -69,9 +68,9 @@ const config = {
             position: 'left',
             label: 'Docs',
           },
-          { to: 'sights', label: 'Sights', position: 'left' },
-          { to: 'icons', label: 'Icons', position: 'left' },
-          { to: 'configValidator', label: 'Config Validator', position: 'left' },
+          { to: '/Sights', label: 'Sights', position: 'left' },
+          { to: '/Icons', label: 'Icons', position: 'left' },
+          { to: '/ConfigValidator', label: 'Config Validator', position: 'left' },
           {
             href: 'https://github.com/monkvision/monkjs',
             label: 'GitHub',