React 19 Support (#1968)

* feat: add React 19 support with automatic JSX transform

* chore: update yarn.lock

* feat!: add React 19 support with automatic JSX transform

* chore(demo): upgrade @react-spring/web to v10

* chore: configure ESLint for TypeScript type/value separation

* chore: add package exports field to all packages for better module resolution

* feat: add explicit type exports and migrate to package root imports

* test(xychart): fix React 19 warnings by avoiding key prop spread

* demo: upgrade to React 19 and Next.js 15, simplify config

* demo: replace deep imports with package root imports and improve types

* chore: update yarn.lock for React 19 and Next.js 15 upgrade

* fix(xychart): fix React 19 key prop spread warning in Tooltip

* prettier: fix formatting

* demo: configure transpilePackages for production builds

* chore: convert to type-only React imports with automatic JSX transform

* refactor: replace React.* with direct named imports

* build: drop IE11 support and target modern browsers

- Removed IE 11 from targets
- Added specific modern browser versions (Chrome 108+, Firefox 133+, Safari 15.6+, etc.)
- Changed loose: false for stricter transpilation
- Added useBuiltIns and useSpread optimizations to React preset

Author: hshoff

.eslintrc.js

@@ -53,6 +53,7 @@ module.exports = {
         'react/jsx-sort-props': 'off',
         'react/no-array-index-key': 'off',
         'react/no-children-prop': 'off',
+        'react/react-in-jsx-scope': 'off', // Not needed with automatic JSX transform (React 16.14+)
         'react/require-default-props': 'off',
         'react/sort-comp': 'off',
         'react/sort-prop-types': 'off',

babel.config.js

@@ -1,18 +1,25 @@
 const esm = process.env.ESM;
 
 const envOptions = {
-  loose: true,
+  loose: false,
   modules: esm ? false : 'commonjs',
   shippedProposals: true,
   targets: {
-    ie: 11,
+    browsers: [
+      'chrome >= 108',
+      'edge >= 108',
+      'firefox >= 133',
+      'safari >= 15.6',
+      'ios_saf >= 15.6',
+      'samsung >= 27',
+    ],
   },
   bugfixes: false,
 };
 
 const presets = [
   ['@babel/preset-env', envOptions],
-  '@babel/preset-react',
+  ['@babel/preset-react', { runtime: 'automatic', useBuiltIns: true, useSpread: true }],
   '@babel/preset-typescript',
 ];
 

config-eslint/typescript.js

@@ -31,6 +31,8 @@ module.exports = {
         'no-unused-vars': 'off',
 
         // IMPORT (Conflicts with TS patterns)
+        'no-duplicate-imports': 'off', // Disabled in favor of import/no-duplicates
+        'import/export': 'off', // TypeScript allows same name for type and value exports
         'import/extensions': [
           'error',
           'never',
@@ -40,6 +42,7 @@ module.exports = {
         ],
         'import/named': 'off',
         'import/no-cycle': 'off',
+        'import/no-duplicates': 'error', // Handles TS type/value namespace separation
         'import/no-named-as-default': 'off',
         'import/no-extraneous-dependencies': [
           'error',
@@ -80,6 +83,7 @@ module.exports = {
           'error',
           { assertionStyle: 'as', objectLiteralTypeAssertions: 'allow-as-parameter' },
         ],
+        '@typescript-eslint/consistent-type-exports': ['error', { fixMixedExportsWithInlineTypeSpecifier: true }],
         '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
         '@typescript-eslint/explicit-function-return-type': 'off', // Allow inferrence
         '@typescript-eslint/func-call-spacing': ['error', 'never'],

package.json

@@ -76,8 +76,8 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jsdom": "27.0.0",
     "@types/node": "^22.10.2",
-    "@types/react": "18.3.26",
-    "@types/react-dom": "18.3.7",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.18.1",
     "@typescript-eslint/parser": "^8.18.1",
     "@vitest/coverage-v8": "4",
@@ -100,8 +100,8 @@
     "jsdom": "27.0.0",
     "lerna": "^7.0.2",
     "prettier": "^2.8.1",
-    "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0",
-    "react-dom": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0",
+    "react": "^16.14.0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0",
+    "react-dom": "^16.14.0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0",
     "timezone-mock": "^1.1.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.7.0",
@@ -114,10 +114,10 @@
     ]
   },
   "resolutions": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "@types/react": "18.3.26",
-    "@types/react-dom": "18.3.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "wrap-ansi": "7.0.0",
     "string-width": "4.2.3",
     "strip-ansi": "6.0.1",

packages/visx-annotation/package.json

@@ -6,6 +6,13 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./esm/index.js",
+      "require": "./lib/index.js"
+    }
+  },
   "files": [
     "lib",
     "esm"
@@ -28,7 +35,7 @@
   },
   "homepage": "https://github.com/airbnb/visx#readme",
   "peerDependencies": {
-    "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
+    "react": "^16.14.0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
   },
   "dependencies": {
     "@types/react": "*",

packages/visx-annotation/src/components/Annotation.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo } from 'react';
+import { useMemo, type ReactNode } from 'react';
 import AnnotationContext from '../context/AnnotationContext';
 import type { AnnotationContextType } from '../types';
 
 export type AnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {
   /** Annotation children (Subject, Label, Connector) */
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export default function Annotation({ x, y, dx, dy, children }: AnnotationProps) {

packages/visx-annotation/src/components/CircleSubject.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext, type SVGProps } from 'react';
 import cx from 'classnames';
 import type { AnnotationContextType } from '../types';
 import AnnotationContext from '../context/AnnotationContext';
@@ -19,7 +19,7 @@ export default function CircleSubject({
   stroke = '#222',
   radius = 16,
   ...restProps
-}: CircleSubjectProps & Omit<React.SVGProps<SVGCircleElement>, keyof CircleSubjectProps>) {
+}: CircleSubjectProps & Omit<SVGProps<SVGCircleElement>, keyof CircleSubjectProps>) {
   // if props are provided, they take precedence over context
   const annotationContext = useContext(AnnotationContext);
 

packages/visx-annotation/src/components/Connector.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext, type SVGProps } from 'react';
 import cx from 'classnames';
 import type { AnnotationContextType } from '../types';
 import AnnotationContext from '../context/AnnotationContext';
@@ -14,7 +14,7 @@ export type ConnectorProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'
   /** Color of the connector line. */
   stroke?: string;
   /** Optional additional props. */
-  pathProps?: React.SVGProps<SVGPathElement>;
+  pathProps?: SVGProps<SVGPathElement>;
 };
 
 export default function Connector({

packages/visx-annotation/src/components/EditableAnnotation.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/jsx-handler-names */
-import React, { useCallback, useRef } from 'react';
-import type { UseDrag, HandlerArgs as DragHandlerArgs } from '@visx/drag/lib/useDrag';
-import useDrag from '@visx/drag/lib/useDrag';
+import { useCallback, useRef } from 'react';
+import type { SVGProps, ReactNode, MouseEvent, TouchEvent } from 'react';
+import type { UseDrag, HandlerArgs as DragHandlerArgs } from '@visx/drag';
+import { useDrag } from '@visx/drag';
 import type { AnnotationContextType } from '../types';
 import Annotation from './Annotation';
 
@@ -11,15 +12,15 @@ export type EditableAnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'd
   /** Height of the possible drag canvas (e.g., SVG container). */
   height: number;
   /** Annotation children (Subject, Label, Connector) */
-  children: React.ReactNode;
+  children: ReactNode;
   /** Whether the Label position (dx, dy) is editable. */
   canEditLabel?: boolean;
   /** Whether the Subject position (x, y) is editable. */
   canEditSubject?: boolean;
   /** Optional circle props to set on the subject drag handle. */
-  subjectDragHandleProps?: React.SVGProps<SVGCircleElement>;
+  subjectDragHandleProps?: SVGProps<SVGCircleElement>;
   /** Optional circle props to set on the label drag handle. */
-  labelDragHandleProps?: React.SVGProps<SVGCircleElement>;
+  labelDragHandleProps?: SVGProps<SVGCircleElement>;
   /** Callback invoked on drag start. */
   onDragStart?: ({ x, y, dx, dy, event }: HandlerArgs) => void;
   /** Callback invoked on drag move. */
@@ -33,7 +34,7 @@ export type HandlerArgs = {
   y: number;
   dx: number;
   dy: number;
-  event: React.MouseEvent | React.TouchEvent;
+  event: MouseEvent | TouchEvent;
 };
 
 const defaultDragHandleProps = {
@@ -62,8 +63,8 @@ export default function EditableAnnotation({
 }: EditableAnnotationProps) {
   // chicken before the egg, we need these to reference drag state
   // in drag callbacks which are defined before useDrag() state is available
-  const subjectDragRef = useRef<UseDrag>();
-  const labelDragRef = useRef<UseDrag>();
+  const subjectDragRef = useRef<UseDrag | undefined>(undefined);
+  const labelDragRef = useRef<UseDrag | undefined>(undefined);
 
   const handleDragStart = useCallback(
     ({ event }: DragHandlerArgs) => {

packages/visx-annotation/src/components/HtmlLabel.tsx

@@ -1,4 +1,5 @@
-import React, { useContext, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
+import type { ReactNode, CSSProperties } from 'react';
 import cx from 'classnames';
 import useMeasure from 'react-use-measure';
 import { Group } from '@visx/group';
@@ -20,9 +21,9 @@ export type HtmlLabelProps = Pick<
   | 'y'
 > & {
   /** Pass in a custom element as the label to style as you like. Renders inside a <foreignObject>, be aware that most non-browser SVG renderers will not render HTML <foreignObject>s. See: https://github.com/airbnb/visx/issues/1173#issuecomment-1014380545.  */
-  children?: React.ReactNode;
+  children?: ReactNode;
   /** Optional styles to apply to the HTML container. */
-  containerStyle?: React.CSSProperties;
+  containerStyle?: CSSProperties;
 };
 export default function HtmlLabel({
   anchorLineStroke = '#222',