BREAKING CHANGE: new react runtime

VKCOM · May 24, 2024 · 857558e · 857558e
1 parent c0b7e1b
commit 857558e
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 52 deletions.
diff --git a/packages/icons-scripts/scripts/configs/.swcrc b/packages/icons-scripts/scripts/configs/.swcrc
@@ -4,6 +4,11 @@
     "parser": {
       "syntax": "typescript",
       "tsx": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
     }
   },
   "env": {

diff --git a/packages/icons-scripts/tsconfig.json b/packages/icons-scripts/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "target": "esnext",
     "lib": ["es6", "dom"],
     "outDir": "dist",

diff --git a/packages/icons-sprite/package.json b/packages/icons-sprite/package.json
@@ -31,17 +31,17 @@
     "@swc/core": "^1.5.7",
     "@swc/jest": "^0.2.36",
     "@types/node": "^20.12.12",
-    "@types/react": "16.14.34",
+    "@types/react": "^18.3.3",
     "concurrently": "^8.2.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "react": "16.10.0",
+    "react": "^18.3.1",
     "size-limit": "^11.1.4",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "react": "^16.9.34 || ^17 || ^18"
+    "react": "^18"
   },
   "packageManager": "[email protected]",
   "size-limit": [

diff --git a/packages/icons-sprite/package.swcrc b/packages/icons-sprite/package.swcrc
@@ -10,6 +10,11 @@
       "syntax": "typescript",
       "tsx": true
     },
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    },
     "target": "es5",
     "preserveAllComments": true
   },

diff --git a/packages/icons-sprite/src/IconSettings.tsx b/packages/icons-sprite/src/IconSettings.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 type Props = {
   children?: React.ReactNode;

diff --git a/packages/icons-sprite/src/SvgIcon.tsx b/packages/icons-sprite/src/SvgIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { BrowserSymbol } from './browser-symbol';
 import { addSpriteSymbol, useIsomorphicLayoutEffect } from './sprite';
 import { warnOnce } from './warnOnce';

diff --git a/packages/icons-sprite/src/raster/components/IconAppearanceProvider/IconAppearanceProvider.ts b/packages/icons-sprite/src/raster/components/IconAppearanceProvider/IconAppearanceProvider.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export type IconAppearance = 'light' | 'dark';
 export const appearanceTypes: IconAppearance[] = ['light', 'dark'];

diff --git a/packages/icons-sprite/src/raster/components/RasterIcon/RasterIcon.tsx b/packages/icons-sprite/src/raster/components/RasterIcon/RasterIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   appearanceTypes,
   useIconAppearance,

diff --git a/packages/icons-sprite/tsconfig.json b/packages/icons-sprite/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "target": "esnext",
     "lib": ["es6", "dom"],
     "outDir": "dist",

diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -34,23 +34,23 @@
     "@size-limit/webpack": "^11.1.4",
     "@swc/cli": "^0.3.12",
     "@swc/core": "^1.5.7",
-    "@types/react": "16.14.34",
+    "@types/react": "^18.3.3",
     "@vkontakte/icons-scripts": "workspace:*",
     "css-loader": "^7.1.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.0",
     "pre-commit": "^1.2.2",
-    "react": "16.10.0",
+    "react": "^18.3.1",
     "react-color": "^2.18.0",
-    "react-dom": "^16.9.0",
+    "react-dom": "^18.3.1",
     "size-limit": "^11.1.4",
     "style-loader": "^4.0.0",
     "swc-loader": "0.2.6",
     "typescript": "^5.4.5",
     "webpack": "^5.91.0"
   },
   "peerDependencies": {
-    "react": "^16.9.34 || ^17 || ^18"
+    "react": "^18"
   },
   "packageManager": "[email protected]",
   "size-limit": [

diff --git a/yarn.lock b/yarn.lock
@@ -1315,14 +1315,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:16.14.34":
-  version: 16.14.34
-  resolution: "@types/react@npm:16.14.34"
+"@types/react@npm:^18.3.3":
+  version: 18.3.3
+  resolution: "@types/react@npm:18.3.3"
   dependencies:
     "@types/prop-types": "*"
-    "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: a1a105c131bd7fd5cae693c641b3a05eb03c079875fe8e780e616afc54d86e3fa1e8c6433e7a30d2a7f8a1a7681cf1a4f652e9eb48b6abe1f80f7cafe858ebf2
+  checksum: c63d6a78163244e2022b01ef79b0baec4fe4da3475dc4a90bb8accefad35ef0c43560fd0312e5974f92a0f1108aa4d669ac72d73d66396aa060ea03b5d2e3873
   languageName: node
   linkType: hard
 
@@ -1335,13 +1334,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/scheduler@npm:*":
-  version: 0.16.2
-  resolution: "@types/scheduler@npm:0.16.2"
-  checksum: b6b4dcfeae6deba2e06a70941860fb1435730576d3689225a421280b7742318d1548b3d22c1f66ab68e414f346a9542f29240bc955b6332c5b11e561077583bc
-  languageName: node
-  linkType: hard
-
 "@types/stack-utils@npm:^2.0.0":
   version: 2.0.1
   resolution: "@types/stack-utils@npm:2.0.1"
@@ -1405,16 +1397,16 @@ __metadata:
     "@swc/helpers": ^0.5.11
     "@swc/jest": ^0.2.36
     "@types/node": ^20.12.12
-    "@types/react": 16.14.34
+    "@types/react": ^18.3.3
     concurrently: ^8.2.2
     jest: ^29.7.0
     jest-environment-jsdom: ^29.7.0
-    react: 16.10.0
+    react: ^18.3.1
     size-limit: ^11.1.4
     ts-node: ^10.9.2
     typescript: ^5.4.5
   peerDependencies:
-    react: ^16.9.34 || ^17 || ^18
+    react: ^18
   languageName: unknown
   linkType: soft
 
@@ -1426,23 +1418,23 @@ __metadata:
     "@size-limit/webpack": ^11.1.4
     "@swc/cli": ^0.3.12
     "@swc/core": ^1.5.7
-    "@types/react": 16.14.34
+    "@types/react": ^18.3.3
     "@vkontakte/icons-scripts": "workspace:*"
     "@vkontakte/icons-sprite": "workspace:*"
     css-loader: ^7.1.1
     file-loader: ^6.2.0
     html-webpack-plugin: ^5.6.0
     pre-commit: ^1.2.2
-    react: 16.10.0
+    react: ^18.3.1
     react-color: ^2.18.0
-    react-dom: ^16.9.0
+    react-dom: ^18.3.1
     size-limit: ^11.1.4
     style-loader: ^4.0.0
     swc-loader: 0.2.6
     typescript: ^5.4.5
     webpack: ^5.91.0
   peerDependencies:
-    react: ^16.9.34 || ^17 || ^18
+    react: ^18
   languageName: unknown
   linkType: soft
 
@@ -6219,7 +6211,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.5.10, prop-types@npm:^15.6.2":
+"prop-types@npm:^15.5.10":
   version: 15.7.2
   resolution: "prop-types@npm:15.7.2"
   dependencies:
@@ -6325,17 +6317,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^16.9.0":
-  version: 16.13.1
-  resolution: "react-dom@npm:16.13.1"
+"react-dom@npm:^18.3.1":
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    prop-types: ^15.6.2
-    scheduler: ^0.19.1
+    scheduler: ^0.23.2
   peerDependencies:
-    react: ^16.13.1
-  checksum: 5009f3ee9bca06d6d4b9cf92c832eca102c284e6d019e832179c8de3e353534571474c95b7ab975935b22823726710dcd73783596c11dd71304beb11c19281c5
+    react: ^18.3.1
+  checksum: 298954ecd8f78288dcaece05e88b570014d8f6dce5db6f66e6ee91448debeb59dcd31561dddb354eee47e6c1bb234669459060deb238ed0213497146e555a0b9
   languageName: node
   linkType: hard
 
@@ -6353,14 +6343,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:16.10.0":
-  version: 16.10.0
-  resolution: "react@npm:16.10.0"
+"react@npm:^18.3.1":
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    prop-types: ^15.6.2
-  checksum: 47425dde7f5e6b965c395857a1ff297b8c7d4dddbb9ea06d53987e1635b632c789d0acc996d2074faff37a03b3672e4308d5e36195a438ed78dd401c472948ad
+  checksum: a27bcfa8ff7c15a1e50244ad0d0c1cb2ad4375eeffefd266a64889beea6f6b64c4966c9b37d14ee32d6c9fcd5aa6ba183b6988167ab4d127d13e7cb5b386a376
   languageName: node
   linkType: hard
 
@@ -6632,13 +6620,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.19.1":
-  version: 0.19.1
-  resolution: "scheduler@npm:0.19.1"
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: 73e185a59e2ff5aa3609f5b9cb97ddd376f89e1610579d29939d952411ca6eb7a24907a4ea4556569dacb931467a1a4a56d94fe809ef713aa76748642cd96a6c
+  checksum: 3e82d1f419e240ef6219d794ff29c7ee415fbdc19e038f680a10c067108e06284f1847450a210b29bbaf97b9d8a97ced5f624c31c681248ac84c80d56ad5a2c4
   languageName: node
   linkType: hard