From 45e9b734fe368b17576d2c5784927e375c589616 Mon Sep 17 00:00:00 2001 From: earthspacon Date: Sun, 4 May 2025 16:55:52 +0500 Subject: [PATCH 1/2] feat: added react 19 support --- .gitignore | 1 + package.json | 2 +- playground/index.tsx | 14 +++++++------- src/create-route-view.tsx | 1 - src/create-routes-view.tsx | 2 +- src/link.tsx | 2 +- src/route.tsx | 1 - src/router-provider.tsx | 14 ++++++++++---- tsconfig.json | 2 +- 9 files changed, 22 insertions(+), 17 deletions(-) diff --git a/.gitignore b/.gitignore index 89eff09..40dbb00 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ node_modules dist .idea +.vscode diff --git a/package.json b/package.json index c1d94fe..9141c6d 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "atomic-router": "^0.10.0", "effector": "^22.8.8 || ^23", "effector-react": "^22.1.0 || ^23", - "react": "^17 || ^18" + "react": "^17 || ^18 || ^19" }, "devDependencies": { "@babel/cli": "^7.23.4", diff --git a/playground/index.tsx b/playground/index.tsx index 0960ddb..eac40f0 100644 --- a/playground/index.tsx +++ b/playground/index.tsx @@ -1,9 +1,9 @@ -import { createRoot } from "react-dom/client"; -import { useEffect, useRef, useState } from "react"; +import { createHistoryRouter, createRoute } from "atomic-router"; import { createBrowserHistory } from "history"; -import { createRoute, createHistoryRouter } from "atomic-router"; +import React, { useEffect, useRef } from "react"; +import { createRoot } from "react-dom/client"; -import { Link, createRoutesView, RouterProvider } from "../src"; +import { Link, RouterProvider, createRoutesView } from "../src"; const foo = createRoute(); const bar = createRoute(); @@ -32,9 +32,9 @@ const Bar = ({ children }) => { }; const routes = [ - { path: "/", route: foo, layout: Foo }, - { path: "/bar", route: bar, layout: Bar }, - { path: "/bar-baz", route: barBaz, layout: Bar }, + { path: "/", route: foo }, + { path: "/bar", route: bar }, + { path: "/bar-baz", route: barBaz }, ]; const router = createHistoryRouter({ diff --git a/src/create-route-view.tsx b/src/create-route-view.tsx index 4bb2512..b01e780 100644 --- a/src/create-route-view.tsx +++ b/src/create-route-view.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { RouteInstance, RouteParams } from "atomic-router"; import { useIsOpened } from "./use-is-opened"; diff --git a/src/create-routes-view.tsx b/src/create-routes-view.tsx index aae33da..34b7c1f 100644 --- a/src/create-routes-view.tsx +++ b/src/create-routes-view.tsx @@ -1,4 +1,4 @@ -import React, { FC, ReactNode } from "react"; +import { FC, ReactNode } from "react"; import { RouteInstance, RouteParams } from "atomic-router"; import { useIsOpened } from "./use-is-opened"; diff --git a/src/link.tsx b/src/link.tsx index 9db51a1..72e9f64 100644 --- a/src/link.tsx +++ b/src/link.tsx @@ -1,7 +1,7 @@ import clsx from "clsx"; import { useUnit } from "effector-react"; import { buildPath, RouteParams, RouteQuery, RouteInstance } from "atomic-router"; -import React, { AnchorHTMLAttributes, ForwardedRef, forwardRef } from "react"; +import { AnchorHTMLAttributes, ForwardedRef, forwardRef } from "react"; import { useRouter } from "./router-provider"; diff --git a/src/route.tsx b/src/route.tsx index fe58ff3..9001224 100644 --- a/src/route.tsx +++ b/src/route.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { RouteInstance, RouteParams } from "atomic-router"; import { useIsOpened } from "./use-is-opened"; diff --git a/src/router-provider.tsx b/src/router-provider.tsx index 4b29dd2..863a36e 100644 --- a/src/router-provider.tsx +++ b/src/router-provider.tsx @@ -1,14 +1,20 @@ import { createHistoryRouter } from "atomic-router"; -import React, { createContext, ReactNode, useContext } from "react"; +import { createContext, ReactNode, useContext } from "react"; type Router = ReturnType; -export const RouterContext = createContext(null); +export const RouterContext: React.Context = createContext(null); export function RouterProvider({ router, children }: { router: Router; children: ReactNode }) { return {children}; } -export function useRouter() { - return useContext(RouterContext) as Router; +export function useRouter(): Router { + const router = useContext(RouterContext); + + if (router === null) { + throw new Error("useRouter must be used within a "); + } + + return router; } diff --git a/tsconfig.json b/tsconfig.json index 2d7419f..73716a7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,7 +22,7 @@ // use Node's module resolution algorithm, instead of the legacy TS one "moduleResolution": "node", // transpile JSX to React.createElement - "jsx": "react", + "jsx": "react-jsx", // interop between ESM and CJS modules. Recommended by TS "esModuleInterop": true, // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS From 7e61125ca2b98773bda24845868ae3de90d07f42 Mon Sep 17 00:00:00 2001 From: earthspacon Date: Sun, 4 May 2025 17:18:45 +0500 Subject: [PATCH 2/2] feat: updated devDependencies to react 19 --- package.json | 7 ++-- pnpm-lock.yaml | 88 +++++++++++++++++++++++++++----------------------- 2 files changed, 51 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index 9141c6d..7354c54 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,8 @@ "@testing-library/jest-dom": "^6.2.0", "@testing-library/react": "^14.1.2", "@types/jest": "^29.5.11", - "@types/react": "^17 || ^18", + "@types/react": "19.1.2", + "@types/react-dom": "^19.1.3", "@vitejs/plugin-react": "^4.2.1", "atomic-router": "^0.11.0", "effector": "^23.3.0", @@ -87,8 +88,8 @@ "jest-environment-jsdom": "^29.7.0", "prettier": "^3.2.2", "publint": "^0.2.6", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.1.0", + "react-dom": "^19.1.0", "rollup": "^4.9.5", "rollup-plugin-dts": "^6.1.0", "ts-jest": "^29.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7e2fe0e..fe3763a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -56,13 +56,16 @@ importers: version: 6.2.0(@jest/globals@29.7.0)(@types/jest@29.5.11)(jest@29.7.0(@types/node@18.7.18)) '@testing-library/react': specifier: ^14.1.2 - version: 14.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + version: 14.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@types/jest': specifier: ^29.5.11 version: 29.5.11 '@types/react': - specifier: ^17 || ^18 - version: 18.0.20 + specifier: 19.1.2 + version: 19.1.2 + '@types/react-dom': + specifier: ^19.1.3 + version: 19.1.3(@types/react@19.1.2) '@vitejs/plugin-react': specifier: ^4.2.1 version: 4.2.1(vite@5.0.11(@types/node@18.7.18)(terser@5.26.0)) @@ -74,7 +77,7 @@ importers: version: 23.3.0 effector-react: specifier: ^23.3.0 - version: 23.3.0(effector@23.3.0)(react@18.2.0) + version: 23.3.0(effector@23.3.0)(react@19.1.0) history: specifier: ^5.3.0 version: 5.3.0 @@ -91,11 +94,11 @@ importers: specifier: ^0.2.6 version: 0.2.6 react: - specifier: ^18.2.0 - version: 18.2.0 + specifier: ^19.1.0 + version: 19.1.0 react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) + specifier: ^19.1.0 + version: 19.1.0(react@19.1.0) rollup: specifier: ^4.9.5 version: 4.9.5 @@ -1256,9 +1259,17 @@ packages: '@types/react-dom@18.0.6': resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==} + '@types/react-dom@19.1.3': + resolution: {integrity: sha512-rJXC08OG0h3W6wDMFxQrZF00Kq6qQvw0djHRdzl3U5DnIERz0MRce3WVc7IS6JYBwtaP/DwYtRRjVlvivNveKg==} + peerDependencies: + '@types/react': ^19.0.0 + '@types/react@18.0.20': resolution: {integrity: sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==} + '@types/react@19.1.2': + resolution: {integrity: sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==} + '@types/resolve@1.20.2': resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==} @@ -2203,10 +2214,6 @@ packages: lodash@4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} - loose-envify@1.4.0: - resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} - hasBin: true - lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} @@ -2443,10 +2450,10 @@ packages: randombytes@2.1.0: resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} - react-dom@18.2.0: - resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} + react-dom@19.1.0: + resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==} peerDependencies: - react: ^18.2.0 + react: ^19.1.0 react-is@17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} @@ -2458,8 +2465,8 @@ packages: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} - react@18.2.0: - resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} + react@19.1.0: + resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==} engines: {node: '>=0.10.0'} readdirp@3.6.0: @@ -2551,8 +2558,8 @@ packages: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} - scheduler@0.23.0: - resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} + scheduler@0.26.0: + resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==} semver@5.7.1: resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==} @@ -4141,13 +4148,13 @@ snapshots: '@types/jest': 29.5.11 jest: 29.7.0(@types/node@18.7.18) - '@testing-library/react@14.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': + '@testing-library/react@14.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': dependencies: '@babel/runtime': 7.19.0 '@testing-library/dom': 9.3.4 '@types/react-dom': 18.0.6 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 19.1.0 + react-dom: 19.1.0(react@19.1.0) '@tootallnate/once@2.0.0': {} @@ -4211,12 +4218,20 @@ snapshots: dependencies: '@types/react': 18.0.20 + '@types/react-dom@19.1.3(@types/react@19.1.2)': + dependencies: + '@types/react': 19.1.2 + '@types/react@18.0.20': dependencies: '@types/prop-types': 15.7.5 '@types/scheduler': 0.16.2 csstype: 3.1.1 + '@types/react@19.1.2': + dependencies: + csstype: 3.1.1 + '@types/resolve@1.20.2': {} '@types/scheduler@0.16.2': {} @@ -4611,11 +4626,11 @@ snapshots: dependencies: webidl-conversions: 7.0.0 - effector-react@23.3.0(effector@23.3.0)(react@18.2.0): + effector-react@23.3.0(effector@23.3.0)(react@19.1.0): dependencies: effector: 23.3.0 - react: 18.2.0 - use-sync-external-store: 1.2.0(react@18.2.0) + react: 19.1.0 + use-sync-external-store: 1.2.0(react@19.1.0) effector@23.3.0: {} @@ -5420,10 +5435,6 @@ snapshots: lodash@4.17.21: {} - loose-envify@1.4.0: - dependencies: - js-tokens: 4.0.0 - lru-cache@5.1.1: dependencies: yallist: 3.1.1 @@ -5636,11 +5647,10 @@ snapshots: dependencies: safe-buffer: 5.1.2 - react-dom@18.2.0(react@18.2.0): + react-dom@19.1.0(react@19.1.0): dependencies: - loose-envify: 1.4.0 - react: 18.2.0 - scheduler: 0.23.0 + react: 19.1.0 + scheduler: 0.26.0 react-is@17.0.2: {} @@ -5648,9 +5658,7 @@ snapshots: react-refresh@0.14.0: {} - react@18.2.0: - dependencies: - loose-envify: 1.4.0 + react@19.1.0: {} readdirp@3.6.0: dependencies: @@ -5761,9 +5769,7 @@ snapshots: dependencies: xmlchars: 2.2.0 - scheduler@0.23.0: - dependencies: - loose-envify: 1.4.0 + scheduler@0.26.0: {} semver@5.7.1: {} @@ -5965,9 +5971,9 @@ snapshots: querystringify: 2.2.0 requires-port: 1.0.0 - use-sync-external-store@1.2.0(react@18.2.0): + use-sync-external-store@1.2.0(react@19.1.0): dependencies: - react: 18.2.0 + react: 19.1.0 v8-to-istanbul@9.0.1: dependencies: