Skip to content

feat: upgrade to React 19 with new JSX runtime #632

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shlensky wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat: upgrade to React 19 with new JSX runtime #632

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4231d41
feat: upgrade to React 19 with new JSX runtime
shlensky Feb 3, 2026
ee9d711
fix(pack): add skipLibCheck to fix @types/node compatibility
shlensky Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@
},
"settings": {
"react": {
"pragma": "React",
"version": "16.0"
"version": "19.0"
}
},
"rules": {
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion environment.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* Eenvironment flag for development.
* Environment flag for development.
* @internal
*/
declare const __DEV__: boolean
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
34 changes: 14 additions & 20 deletions packages/core/core.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -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 (;;)`.
Expand All @@ -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]
Expand All @@ -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') {
Expand All @@ -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, {
Expand All @@ -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
Expand Down Expand Up @@ -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]
Expand All @@ -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)
Expand Down Expand Up @@ -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))
Expand Down
2 changes: 1 addition & 1 deletion packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 3 additions & 11 deletions packages/di/di.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>

Expand Down Expand Up @@ -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>
)
}}
Expand Down
2 changes: 1 addition & 1 deletion packages/di/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions packages/pack/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"target": "ES2017",
"module": "CommonJS",
"declaration": true,
"skipLibCheck": true,
/* Module Resolution Options */
"esModuleInterop": true,
/* Strict Type-Checking Options */
Expand Down
6 changes: 5 additions & 1 deletion scripts/rollup/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"compilerOptions": {
/* Basic Options */
"declaration": true,
"jsx": "react",
"jsx": "react-jsx",
"lib": ["es6", "dom"],
"module": "esnext",
"moduleResolution": "node",
Expand Down