refactor: change React imports to type imports and update chunks for splitting

Author: aeltorio

src/components/GasSelector.tsx

@@ -15,7 +15,8 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import React from "react";
+import type React from "react";
+
 import { Select, SelectItem } from "@heroui/select";
 import { pureGasMixtures, type GasMixtureExt } from "@sctg/aga8-js";
 

src/components/OrificeSelector.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import type React from "react";
+
 import { Select, SelectItem } from "@heroui/select";
 
 interface OrificeSelectorProps {

src/components/PressureSlider.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import type React from "react";
+
 import { Slider } from "@heroui/slider";
 
 interface PressureSliderProps {
@@ -27,4 +28,4 @@ export const PressureSlider: React.FC<PressureSliderProps> = ({
       }
     />
   );
-};
+};

src/components/SonicNozzleTable.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import type React from "react";
+
 import {
   Table,
   TableHeader,

src/components/icons.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type React from "react";
 
 import { IconSvgProps } from "@/types";
 

src/components/theme-switch.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from "react";
+import { type FC, useState, useEffect } from "react";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { SwitchProps, useSwitch } from "@heroui/switch";
 import clsx from "clsx";

src/main.tsx

@@ -1,17 +1,17 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 
 import App from "./App.tsx";
 import { Provider } from "./provider.tsx";
 import "@/styles/globals.css";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
     <BrowserRouter basename={import.meta.env.BASE_URL}>
       <Provider>
         <App />
       </Provider>
     </BrowserRouter>
-  </React.StrictMode>,
+  </StrictMode>,
 );

src/pages/index.tsx

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import { Button } from "@heroui/button";
 import { Input } from "@heroui/input";
 import {
@@ -30,26 +31,28 @@ import {
   PropertiesGERGResult,
   type GasMixtureExt,
 } from "@sctg/aga8-js";
-import React from "react";
 import { ScientificNotation } from "@sctg/scientific-notation";
+import { useState } from "react";
 
 import { FlowData, GasInlet } from "@/components/GasInlet";
 import { title } from "@/components/primitives";
 import { SonicNozzleTable } from "@/components/SonicNozzleTable";
 import DefaultLayout from "@/layouts/default";
 
 export default function DilutionPage() {
-  const [selectedGasInlet1, setSelectedGasInlet1] =
-    React.useState<GasMixtureExt>(availableGasMixtures[0]);
-  const [selectedGasInlet2, setSelectedGasInlet2] =
-    React.useState<GasMixtureExt>(availableGasMixtures[0]);
+  const [selectedGasInlet1, setSelectedGasInlet1] = useState<GasMixtureExt>(
+    availableGasMixtures[0],
+  );
+  const [selectedGasInlet2, setSelectedGasInlet2] = useState<GasMixtureExt>(
+    availableGasMixtures[0],
+  );
   const [selectedOrificeInlet1, setSelectedOrificeInlet1] =
-    React.useState<number>(0.02);
+    useState<number>(0.02);
   const [selectedOrificeInlet2, setSelectedOrificeInlet2] =
-    React.useState<number>(0.02);
-  const [inlet1Pressure, setInlet1Pressure] = React.useState<number>(400);
-  const [inlet2Pressure, setInlet2Pressure] = React.useState<number>(400);
-  const [inlet1FlowData, setInlet1FlowData] = React.useState<FlowData>({
+    useState<number>(0.02);
+  const [inlet1Pressure, setInlet1Pressure] = useState<number>(400);
+  const [inlet2Pressure, setInlet2Pressure] = useState<number>(400);
+  const [inlet1FlowData, setInlet1FlowData] = useState<FlowData>({
     massFlow: 0,
     p_crit: 0,
     A: 0,
@@ -59,7 +62,7 @@ export default function DilutionPage() {
     rho: 0,
     rho_out: 0,
   });
-  const [inlet2FlowData, setInlet2FlowData] = React.useState<FlowData>({
+  const [inlet2FlowData, setInlet2FlowData] = useState<FlowData>({
     massFlow: 0,
     p_crit: 0,
     A: 0,
@@ -69,12 +72,10 @@ export default function DilutionPage() {
     rho: 0,
     rho_out: 0,
   });
-  const [temperature, setTemperature] = React.useState<number>(293.15);
-  const [gas1DetailsVisible, setGas1DetailsVisible] =
-    React.useState<boolean>(false);
+  const [temperature, setTemperature] = useState<number>(293.15);
+  const [gas1DetailsVisible, setGas1DetailsVisible] = useState<boolean>(false);
 
-  const [gas2DetailsVisible, setGas2DetailsVisible] =
-    React.useState<boolean>(false);
+  const [gas2DetailsVisible, setGas2DetailsVisible] = useState<boolean>(false);
 
   return (
     <DefaultLayout>

src/types/index.ts

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { type SVGProps } from "react";
 
 export type IconSvgProps = SVGProps<SVGSVGElement> & {
   size?: number;

vite.config.ts

@@ -9,4 +9,26 @@ export default defineConfig({
   optimizeDeps: {
     exclude: ["@sctg/aga8-js"],
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("react")) {
+            return "react";
+          }
+          if (id.includes("heroui")) {
+            return "heroui";
+          }
+          if (id.includes("sctg")) {
+            return "sctg";
+          }
+          if (id.includes("tailwind")) {
+            return "tailwind";
+          }
+
+          return null;
+        },
+      },
+    },
+  },
 });