feat: upgrade to React 19 with new JSX runtime

- Update react, react-dom to 19.0.0
- Migrate from createElement to jsx from react/jsx-runtime
- Remove forwardRef usage in withBemMod (refs forwarded by default in React 19)
- Update peerDependencies to require React 19
- Update ESLint config for React 19
- Fix typos in comments and variable names

BREAKING CHANGE: drop support for React 16, 17, and 18

Author: shlensky

.eslintrc

@@ -17,8 +17,7 @@
   },
   "settings": {
     "react": {
-      "pragma": "React",
-      "version": "16.0"
+      "version": "19.0"
     }
   },
   "rules": {
@@ -178,7 +177,7 @@
     "react/no-find-dom-node": 2,
     "react/no-multi-comp": 0,
     "react/no-set-state": 0,
-    "react/react-in-jsx-scope": 2,
+    "react/react-in-jsx-scope": 0,
     "react/require-optimization": 0,
     "react/self-closing-comp": 2,
     "react/style-prop-object": 2,

environment.d.ts

@@ -1,5 +1,5 @@
 /**
- * Eenvironment flag for development.
+ * Environment flag for development.
  * @internal
  */
 declare const __DEV__: boolean

package.json

@@ -13,7 +13,7 @@
     "@commitlint/cli": "17.3.0",
     "@commitlint/config-conventional": "17.3.0",
     "@types/jest": "26.0.14",
-    "@types/react": "18.0.26",
+    "@types/react": "19.0.6",
     "@typescript-eslint/eslint-plugin": "2.22.0",
     "@typescript-eslint/parser": "2.22.0",
     "chalk": "2.4.1",
@@ -24,13 +24,13 @@
     "husky": "3.0.5",
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.3.1",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/react": "16.1.0",
     "lerna": "3.5.1",
     "lint-staged": "9.2.5",
     "prettier": "2.8.1",
     "pretty-bytes": "5.2.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "rollup": "1.10.1",
     "rollup-plugin-node-resolve": "4.2.3",
     "rollup-plugin-replace": "2.1.0",

packages/core/core.ts

@@ -1,4 +1,5 @@
-import { ComponentType, FC, createElement, forwardRef } from 'react'
+import { ComponentType, FC, JSX } from 'react'
+import { jsx } from 'react/jsx-runtime'
 import { cn, NoStrictEntityMods, ClassNameFormatter } from '@bem-react/classname'
 import { classnames } from '@bem-react/classnames'
 
@@ -71,7 +72,7 @@ export function withBemMod<T, U extends IClassNameProps = {}>(
     entity = entity || cn(blockName)
     entityClassName = entityClassName || entity()
 
-    const BemMod = forwardRef((props: T & K, ref) => {
+    const BemMod: FC<T & K> = (props) => {
       modNames = modNames || Object.keys(mod)
 
       // TODO: For performance can rewrite `every` to `for (;;)`.
@@ -82,8 +83,6 @@ export function withBemMod<T, U extends IClassNameProps = {}>(
         return modValue === propValue || (modValue === '*' && Boolean(propValue))
       })
 
-      const nextProps = Object.assign({}, props, { ref })
-
       if (isModifierMatched) {
         const modifiers = modNames.reduce((acc: Dictionary, key: string) => {
           if (mod[key] !== '*') acc[key] = mod[key]
@@ -92,8 +91,8 @@ export function withBemMod<T, U extends IClassNameProps = {}>(
         }, {})
         modifierClassName = modifierClassName || entity(modifiers)
 
-        nextProps.className = classnames(modifierClassName, props.className)
-          // Replace first entityClassName for remove duplcates from className.
+        const className = classnames(modifierClassName, props.className)
+          // Replace first entityClassName for remove duplicates from className.
           .replace(`${entityClassName} `, '')
 
         if (typeof enhance === 'function') {
@@ -111,13 +110,11 @@ export function withBemMod<T, U extends IClassNameProps = {}>(
           ModifiedComponent = WrappedComponent as any
         }
 
-        // Use createElement instead of jsx to avoid __assign from tslib.
-        return createElement(ModifiedComponent, nextProps)
+        return jsx(ModifiedComponent, Object.assign({}, props, { className }))
       }
 
-      // Use createElement instead of jsx to avoid __assign from tslib.
-      return createElement(WrappedComponent, nextProps)
-    })
+      return jsx(WrappedComponent, props)
+    }
 
     if (__DEV__) {
       setDisplayName(BemMod, {
@@ -130,11 +127,8 @@ export function withBemMod<T, U extends IClassNameProps = {}>(
     return BemMod
   }
 
-  // Ignore `forwardRef` typings to keep compatibility with `HOC<T>`
-  const withMod = (WithBemMod as any) as {
-    <K extends IClassNameProps = {}>(WrappedComponent: ComponentType<T & K>): (
-      props: T & K,
-    ) => React.ReactElement
+  const withMod = WithBemMod as any as {
+    <K extends IClassNameProps = {}>(WrappedComponent: ComponentType<T & K>): FC<T & K>
 
     __isSimple: boolean
     __blockName: string
@@ -194,7 +188,7 @@ function composeSimple(mods: any[]) {
   return (Base: ComponentType<any>) => {
     function SimpleComposeWrapper(props: Record<string, any>) {
       const modifiers: NoStrictEntityMods = {}
-      const newProps: any = { ...props }
+      const newProps: any = Object.assign({}, props)
 
       for (let key of modNames) {
         const modValues = allMods[key]
@@ -221,7 +215,7 @@ function composeSimple(mods: any[]) {
 
       newProps.className = entity(modifiers, [props.className])
 
-      return createElement(Base, newProps)
+      return jsx(Base, newProps)
     }
     if (__DEV__) {
       const allModsFormatted = Object.keys(allMods)
@@ -320,9 +314,9 @@ export function compose() {
     f.__isSimple ? simple.push(f) : enhanced.push(f)
   }
 
-  const oprimizedFns = simple.length ? [composeSimple(simple), ...enhanced] : enhanced
+  const optimizedFns = simple.length ? [composeSimple(simple), ...enhanced] : enhanced
 
-  return oprimizedFns.reduce(
+  return optimizedFns.reduce(
     (a, b) => {
       return function() {
         return a(b.apply(0, arguments))

packages/core/package.json

@@ -19,7 +19,7 @@
     "@bem-react/classnames": "1.4.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^19.0.0"
   },
   "files": ["build", "core.d.ts"],
   "main": "./build/core.cjs",

packages/di/di.tsx

@@ -1,12 +1,5 @@
-import React, {
-  ReactNode,
-  FC,
-  ComponentType,
-  createContext,
-  useContext,
-  useRef,
-  createElement,
-} from 'react'
+import { ReactNode, FC, ComponentType, createContext, useContext, useRef } from 'react'
+import { jsx } from 'react/jsx-runtime'
 
 export type RegistryContext = Record<string, Registry>
 
@@ -49,8 +42,7 @@ export function withRegistry() {
 
             return (
               <RegistryProvider value={providedRegistriesRef.current}>
-                {/* Use createElement instead of jsx to avoid __assign from tslib. */}
-                {createElement(Component, props)}
+                {jsx(Component, props)}
               </RegistryProvider>
             )
           }}

packages/di/package.json

@@ -15,7 +15,7 @@
     "unit": "../../node_modules/.bin/jest --config ../../.config/jest/jest.config.js"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^19.0.0"
   },
   "files": ["build", "di.d.ts"],
   "main": "./build/di.cjs",

scripts/rollup/build.js

@@ -33,7 +33,11 @@ function getExternalDependencies(packagePath) {
   const content = readFileSync(packageJsonPath, 'utf-8')
   const { dependencies, peerDependencies } = JSON.parse(content)
 
-  return [...Object.keys(Object(dependencies)), ...Object.keys(Object(peerDependencies))]
+  return [
+    ...Object.keys(Object(dependencies)),
+    ...Object.keys(Object(peerDependencies)),
+    'react/jsx-runtime',
+  ]
 }
 
 function getTypescriptConfig(packagePath) {

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     /* Basic Options */
     "declaration": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": ["es6", "dom"],
     "module": "esnext",
     "moduleResolution": "node",