feat: React19 (#120)

* chore: update libraries

* feat: remove recoil

* chore: update wasm libraries

web/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

web/package.json

@@ -13,37 +13,36 @@
     "e2e": "playwright test"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "@mui/icons-material": "^6.1.8",
-    "@mui/material": "^6.1.8",
-    "axios": "^1.7.8",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.3.0",
+    "@mui/material": "^6.3.0",
+    "axios": "^1.7.9",
     "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
-    "next": "^15.0.3",
+    "next": "^15.1.2",
     "pretty-bytes": "^6.1.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.2",
-    "recoil": "^0.7.7",
-    "swr": "^2.2.5"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "swr": "^2.3.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.12.0",
-    "@playwright/test": "^1.49.0",
-    "@types/node": "^22.9.4",
-    "@types/react": "^18.3.12",
+    "@eslint/js": "^9.17.0",
+    "@playwright/test": "^1.49.1",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "^8.10.0",
     "@typescript-eslint/parser": "^8.10.0",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.15",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "globals": "^15.12.0",
-    "husky": "^9.1.6",
-    "lint-staged": "^15.2.10",
-    "prettier": "^3.3.3",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.2.11",
+    "prettier": "^3.4.2",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.10.0",
     "wasm-pack": "^0.13.1"

web/src/components/[crate_names]/CrateSizeChart.tsx

@@ -4,7 +4,7 @@ import { css } from '@emotion/react';
 import prettyBytes from 'pretty-bytes';
 import type { EChartsOption } from 'echarts';
 import { Typography } from '@mui/material';
-import { useMemo } from 'react';
+import { JSX, useMemo } from 'react';
 
 interface Props {
   versionList: Version[];

web/src/components/[crate_names]/CrateTableRow.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useState } from 'react';
+import { JSX, useState } from 'react';
 import dayjs from 'dayjs';
 import { useRouter } from 'next/router';
 import { css } from '@emotion/react';

web/src/components/[crate_names]/CratesTable.tsx

@@ -10,6 +10,7 @@ import StatsTableHead from 'components/shared/table/StatsTableHead';
 import CrateTableRow from './CrateTableRow';
 import { useCrateDataResultsQuery } from 'api';
 import TableSkelton from 'components/skelton/table/TableSkelton';
+import { JSX } from 'react';
 
 interface Props {
   crateNames: string[];

web/src/components/[crate_names]/DownloadChart.tsx

@@ -5,16 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useMemo } from 'react';
-import { useRecoilValue } from 'recoil';
+import { JSX, useEffect, useMemo, useState } from 'react';
 import { css } from '@emotion/react';
 import { Typography } from '@mui/material';
 import ReactECharts from 'components/echarts/ReactEChart';
 import type { EChartsOption } from 'echarts';
 import { uniform_data } from 'web_assembly/pkg/web_assembly';
-import { wasmInitSelector } from 'recoil/selectors';
 import { useCrateDownloadDataResultsQuery } from 'api';
 import ChartSkelton from 'components/skelton/chart/ChartSkelton';
+import wasmInitializer from 'web_assembly/pkg';
 
 interface Props {
   crateNames: string[];
@@ -30,16 +29,38 @@ interface ChartData {
 }
 
 const DownloadChart = ({ crateNames }: Props): JSX.Element => {
+  const [isWasmLoaded, setIsWasmLoaded] = useState<boolean>(false);
   const { crateDownloadDataResults, isLoading } = useCrateDownloadDataResultsQuery(crateNames);
-  const isWasmLoaded = useRecoilValue(wasmInitSelector);
-
   const uniformedData: ChartData = useMemo(() => {
+    if (!isWasmLoaded) {
+      return { dates: [], data: [] };
+    }
     const t1 = performance.now();
     const data: ChartData = JSON.parse(uniform_data(crateNames, JSON.stringify(crateDownloadDataResults ?? [])));
     const t2 = performance.now();
     console.log(t2 - t1);
     return data;
-  }, [crateNames, crateDownloadDataResults]);
+  }, [isWasmLoaded, crateNames, crateDownloadDataResults]);
+
+  // load wasm (web assembly)
+  useEffect(() => {
+    let ignore = false;
+    const loadWasm = async () => {
+      if (ignore) {
+        return;
+      }
+      try {
+        await wasmInitializer();
+        setIsWasmLoaded(true);
+      } catch {
+        setIsWasmLoaded(false);
+      }
+    };
+    loadWasm();
+    return () => {
+      ignore = true;
+    };
+  }, []);
 
   const option: EChartsOption = {
     animation: false,

web/src/components/shared/CratesView.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useEffect, useState, startTransition, Suspense } from 'react';
+import { useEffect, useState, startTransition, Suspense, JSX } from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { css } from '@emotion/react';

web/src/components/shared/ExtraInfo.tsx

@@ -8,6 +8,7 @@
 import { useRouter } from 'next/router';
 import { css } from '@emotion/react';
 import { Typography, Link } from '@mui/material';
+import { JSX } from 'react';
 
 const ExtraInfo = (): JSX.Element => {
   const router = useRouter();

web/src/components/shared/Footer.tsx

@@ -7,6 +7,7 @@
 
 import { css } from '@emotion/react';
 import { Divider, Link } from '@mui/material';
+import { JSX } from 'react';
 
 const Footer = (): JSX.Element => {
   return (

web/src/components/shared/Header.tsx

@@ -7,6 +7,7 @@
 
 import Link from 'next/link';
 import { css } from '@emotion/react';
+import { JSX } from 'react';
 
 const Header = (): JSX.Element => {
   return (

web/src/components/shared/InputForm.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { JSX } from 'react';
 import { useRouter } from 'next/router';
 import { Typography, Link, FormControl, InputAdornment, IconButton, OutlinedInput } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';

web/src/components/shared/Spinner.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { JSX } from 'react';
 
 interface Props {
   loadingMessage?: string;

web/src/hooks/useResize.ts

@@ -7,7 +7,7 @@
 
 import { RefObject, useCallback, useEffect, useState } from 'react';
 
-const useResize = (ref: RefObject<HTMLElement>): [width: number, height: number] => {
+const useResize = (ref: RefObject<HTMLElement | null>): [width: number, height: number] => {
   const [height, setHeight] = useState<number>(0);
   const [width, setWidth] = useState<number>(0);
 

web/src/pages/[crate_names].tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { JSX } from 'react';
 import CratesView from 'components/shared/CratesView';
 import Spinner from 'components/shared/Spinner';
 

web/src/pages/_app.tsx

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useEffect } from 'react';
-import { RecoilRoot } from 'recoil';
+import React, { useState, useEffect, JSX } from 'react';
 import { AppProps } from 'next/app';
 import { useRouter } from 'next/router';
 import Head from 'next/head';
@@ -36,22 +35,20 @@ const MyApp = (props: AppProps): JSX.Element => {
 
   return (
     <React.StrictMode>
-      <RecoilRoot>
-        <div css={Wrapper}>
-          <Head>
-            <link rel="icon" href="/favicon.png" type="image/png" sizes="32x32" />
-          </Head>
-          <Header />
-          {isLoading && (
-            <div css={PageIndicator}>
-              <img src="/ferris.png" alt="ferris icon" />
-              <CircularProgress size={36} />
-            </div>
-          )}
-          <Component {...pageProps} />
-          <Footer />
-        </div>
-      </RecoilRoot>
+      <div css={Wrapper}>
+        <Head>
+          <link rel="icon" href="/favicon.png" type="image/png" sizes="32x32" />
+        </Head>
+        <Header />
+        {isLoading && (
+          <div css={PageIndicator}>
+            <img src="/ferris.png" alt="ferris icon" />
+            <CircularProgress size={36} />
+          </div>
+        )}
+        <Component {...pageProps} />
+        <Footer />
+      </div>
     </React.StrictMode>
   );
 };

web/src/pages/index.tsx

@@ -9,6 +9,7 @@ import Head from 'next/head';
 import { css } from '@emotion/react';
 import InputForm from 'components/shared/InputForm';
 import ExtraInfo from 'components/shared/ExtraInfo';
+import { JSX } from 'react';
 
 const Index = (): JSX.Element => {
   return (