feat: added react 19 support

.gitignore

@@ -3,3 +3,4 @@
 node_modules
 dist
 .idea
+.vscode

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",
@@ -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",

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({

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";

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";

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";
 

src/route.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { RouteInstance, RouteParams } from "atomic-router";
 
 import { useIsOpened } from "./use-is-opened";

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<typeof createHistoryRouter>;
 
-export const RouterContext = createContext<Router | null>(null);
+export const RouterContext: React.Context<Router | null> = createContext<Router | null>(null);
 
 export function RouterProvider({ router, children }: { router: Router; children: ReactNode }) {
   return <RouterContext.Provider value={router}>{children}</RouterContext.Provider>;
 }
 
-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 <RouterProvider>");
+  }
+
+  return router;
 }

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