Merge pull request #417 from danditomaso/switch-rsbuild-to-vite

feat: switch to Vite 6.x

package.json

@@ -5,13 +5,13 @@
   "description": "Meshtastic web client",
   "license": "GPL-3.0-only",
   "scripts": {
-    "build": "rsbuild build",
+    "build": "vite build",
-    "build:analyze": "BUNDLE_ANALYZE=true rsbuild build",
+    "build:analyze": "BUNDLE_ANALYZE=true vite build",
     "check": "biome check src/",
     "check:fix": "pnpm check --write src/",
     "format": "biome format --write src/",
-    "dev": "rsbuild dev --open",
+    "dev": "vite dev --open",
-    "preview": "rsbuild preview",
+    "preview": "vite preview",
     "package": "gzipper c -i html,js,css,png,ico,svg,webmanifest,txt dist dist/output && tar -cvf dist/build.tar -C ./dist/output/ $(ls ./dist/output/)",
     "postinstall": "npx simple-git-hooks"
   },
@@ -24,6 +24,10 @@
       "npm run format"
     ]
   },
+  "engines": {
+    "node": ">=20.0.0",
+    "pnpm": ">=10.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/meshtastic/web.git"
@@ -73,8 +77,6 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@rsbuild/core": "^1.2.8",
-    "@rsbuild/plugin-react": "^1.1.0",
     "@tailwindcss/postcss": "^4.0.7",
     "@types/chrome": "^0.0.304",
     "@types/js-cookie": "^3.0.6",
@@ -83,6 +85,8 @@
     "@types/react-dom": "^19.0.4",
     "@types/w3c-web-serial": "^1.0.7",
     "@types/web-bluetooth": "^0.0.20",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
     "gzipper": "^8.2.0",
     "postcss": "^8.5.1",
     "simple-git-hooks": "^2.11.1",
@@ -90,7 +94,7 @@
     "tailwindcss": "^4.0.7",
     "tailwindcss-animate": "^1.0.7",
     "tar": "^7.4.3",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
-  },
+    "vite": "^6.1.1"
-  "packageManager": "[email protected]"
+  }
 }

rsbuild.config.ts

@@ -1,30 +0,0 @@
-import { execSync } from "node:child_process";
-import { defineConfig } from "@rsbuild/core";
-import { pluginReact } from "@rsbuild/plugin-react";
-
-let hash = "";
-
-try {
-  hash = execSync("git rev-parse --short HEAD").toString().trim();
-} catch (error) {
-  hash = "DEV";
-}
-
-export default defineConfig({
-  plugins: [pluginReact()],
-  source: {
-    define: {
-      "process.env.COMMIT_HASH": JSON.stringify(hash),
-    },
-    alias: {
-      "@app": "./src",
-      "@pages": "./src/pages",
-      "@components": "./src/components",
-      "@core": "./src/core",
-      "@layouts": "./src/layouts",
-    },
-  },
-  html: {
-    title: "Meshtastic Web",
-  },
-});

src/components/DeviceSelector.tsx

@@ -1,11 +1,11 @@
 import { DeviceSelectorButton } from "@components/DeviceSelectorButton.tsx";
+import ThemeSwitcher from "@components/ThemeSwitcher.tsx";
 import { Separator } from "@components/UI/Seperator.tsx";
 import { Code } from "@components/UI/Typography/Code.tsx";
 import { useAppStore } from "@core/stores/appStore.ts";
 import { useDeviceStore } from "@core/stores/deviceStore.ts";
 import { HomeIcon, PlusIcon, SearchIcon } from "lucide-react";
 import type { JSX } from "react";
-import ThemeSwitcher from "./ThemeSwitcher";
 import { Avatar } from "./UI/Avatar";
 
 export const DeviceSelector = (): JSX.Element => {
@@ -50,21 +50,14 @@ export const DeviceSelector = (): JSX.Element => {
           <button
             type="button"
             onClick={() => setConnectDialogOpen(true)}
-            className="transition-all duration-300 hover:text-accent"
+            className="transition-all duration-300"
           >
             <PlusIcon />
           </button>
         </ul>
       </div>
-      <div className="flex w-20 flex-col items-center space-y-5 bg-transparent px-5 pb-5">
+      <div className="flex w-20 flex-col items-center space-y-5 px-5 pb-5">
         <ThemeSwitcher />
-        {/* <button
-          type="button"
-          className="transition-all hover:text-accent"
-          onClick={() => setDarkMode(!darkMode)}
-        >
-          {darkMode ? <SunIcon /> : <MoonIcon />}
-        </button> */}
         <button
           type="button"
           className="transition-all hover:text-accent"

src/components/PageComponents/Connect/HTTP.tsx

@@ -12,6 +12,7 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
+  const [https, setHTTPS] = useState(false);
   const { addDevice } = useDeviceStore();
   const { setSelectedDevice } = useAppStore();
   const { register, handleSubmit, control, watch } = useForm<{
@@ -29,7 +30,6 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
   });
 
   const [connectionInProgress, setConnectionInProgress] = useState(false);
-  const https = watch("tls");
 
   const onSubmit = handleSubmit(async (data) => {
     setConnectionInProgress(true);
@@ -57,7 +57,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
         <Input
           prefix={https ? "https://" : "http://"}
           placeholder="000.000.000.000 / meshtastic.local"
-          className="text-black"
+          className="text-black dark:text-black"
           disabled={connectionInProgress}
           {...register("ip")}
         />
@@ -68,10 +68,12 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
             <>
               <Label>Use HTTPS</Label>
               <Switch
-                onCheckedChange={onChange}
+
-                // label="Use TLS"
+                onCheckedChange={(checked) => {
-                // description="Description"
+                  checked ? setHTTPS(true) : setHTTPS(false);
-                disabled={
+                }}
+
+              disabled={
                   location.protocol === "https:" || connectionInProgress
                 }
                 checked={value}

src/components/ThemeSwitcher.tsx

@@ -1,39 +1,44 @@
 import { useTheme } from "@app/core/hooks/useTheme";
-import { Moon, Sun } from "lucide-react";
+import { cn } from "@app/core/utils/cn";
-import React from "react";
+import { Monitor, Moon, Sun } from "lucide-react";
 
-type Theme = "light" | "dark";
+type ThemePreference = "light" | "dark" | "system";
 
 export default function ThemeSwitcher({
   className = "",
-}: { className?: string }) {
+}: {
-  const currentTheme = useTheme(); // Get current theme from DOM
+  className?: string;
-  const [theme, setTheme] = React.useState<Theme>(currentTheme);
+}) {
-
+  const { theme, preference, setPreference } = useTheme();
-  React.useEffect(() => {
-    document.documentElement.setAttribute("data-theme", theme);
-    localStorage.setItem("theme", theme);
-  }, [theme]);
 
   const themeIcons = {
-    light: (
+    light: <Sun className="size-5" />,
-      <Sun className="size-5 transition-transform duration-300 scale-100" />
+    dark: <Moon className="size-5" />,
-    ),
+    system: <Monitor className="size-5" />,
-    dark: (
-      <Moon className="size-5 transition-transform duration-300 scale-100" />
-    ),
   };
 
-  const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");
+  const toggleTheme = () => {
+    const preferences: ThemePreference[] = ["light", "dark", "system"];
+    const currentIndex = preferences.indexOf(preference);
+    const nextPreference = preferences[(currentIndex + 1) % preferences.length];
+    setPreference(nextPreference);
+  };
 
   return (
     <button
       type="button"
-      className={`transition-all duration-300 hover:text-accent ${className}`}
+      className={cn(
+        "transition-all duration-300 scale-100 cursor-pointer m-6 p-2",
+        className,
+      )}
       onClick={toggleTheme}
-      aria-label={`Current theme: ${theme}. Click to change theme.`}
+      aria-label={
+        preference === "system"
+          ? `System theme (currently ${theme}). Click to change theme.`
+          : `Current theme: ${theme}. Click to change theme.`
+      }
     >
-      {themeIcons[theme]}
+      {themeIcons[preference]}
     </button>
   );
 }

src/components/UI/Button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
         success:
           "bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600",
         outline:
-          "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-400 dark:text-slate-100",
+          "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-400 dark:text-slate-500",
         subtle:
           "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800 dark:bg-slate-700 dark:text-slate-100",
         ghost:

src/components/UI/Switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-hidden focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=checked]:bg-slate-400 dark:data-[state=unchecked]:bg-slate-700",
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-hidden focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=checked]:bg-slate-600 dark:data-[state=unchecked]:bg-slate-100",
       className,
     )}
     {...props}

src/components/UI/Toast.tsx

@@ -76,7 +76,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600 dark:text-slate-400 dark:hover:text-slate-50",
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600 text-black",
       className,
     )}
     toast-close=""

src/core/hooks/useTheme.ts

@@ -1,37 +1,42 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
-type Theme = "light" | "dark";
+type Theme = "light" | "dark" | "system";
 
 export function useTheme() {
-  const [theme, setTheme] = useState<Theme>(() => {
+  const getSystemTheme = () =>
-    if (typeof window === "undefined") return "light";
+    window.matchMedia("(prefers-color-scheme: dark)").matches
-    return (
+      ? "dark"
-      (document.documentElement.getAttribute("data-theme") as Theme) || "light"
+      : "light";
-    );
+
-  });
+  const getStoredPreference = useCallback(
+    (): Theme => (localStorage.getItem("theme") as Theme) || "system",
+    [],
+  );
+
+  const [preference, setPreference] = useState<Theme>(() =>
+    typeof window !== "undefined" ? getStoredPreference() : "light",
+  );
+
+  const theme = preference === "system" ? getSystemTheme() : preference;
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+  }, [theme]);
 
   useEffect(() => {
-    const observer = new MutationObserver((mutations) => {
+    if (preference !== "system") return;
-      for (const mutation of mutations) {
+
-        if (
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
-          mutation.type === "attributes" &&
+    const updateTheme = () => setPreference(getStoredPreference());
-          mutation.attributeName === "data-theme"
+
-        ) {
+    media.addEventListener("change", updateTheme);
-          const newTheme = document.documentElement.getAttribute(
+    return () => media.removeEventListener("change", updateTheme);
-            "data-theme",
+  }, [preference, getStoredPreference]);
-          ) as Theme;
+
-          setTheme(newTheme);
+  const setPreferenceValue = (newPreference: Theme) => {
-        }
+    localStorage.setItem("theme", newPreference);
-      }
+    setPreference(newPreference);
-    });
+  };
-
+
-    observer.observe(document.documentElement, {
+  return { theme, preference, setPreference: setPreferenceValue };
-      attributes: true,
-      attributeFilter: ["data-theme"],
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
-  return theme;
 }

src/core/stores/appStore.ts

@@ -14,12 +14,20 @@ interface ErrorState {
   message: string;
 }
 
+
+interface ErrorState {
+  field: string;
+  message: string;
+}
+
+
 interface AppState {
   selectedDevice: number;
   devices: {
     id: number;
     num: number;
   }[];
+
   rasterSources: RasterSource[];
   commandPaletteOpen: boolean;
   nodeNumToBeRemoved: number;

src/index.css

@@ -82,10 +82,11 @@
   .maplibregl-popup-close-button {
     padding: 4px 10px 8px 0;
     font-size: 1.2rem;
+    color: #000;
   }
 
   .maplibregl-popup-close-button:hover {
-    background-color: white !important;
+    background-color: transparent !important;
   }
 }
 

vite.config.ts

@@ -1,45 +1,30 @@
-import { execSync } from "node:child_process";
+import { defineConfig } from 'vite';
-import { resolve } from "node:path";
+import react from '@vitejs/plugin-react';
-import react from "@vitejs/plugin-react";
+import { execSync } from 'node:child_process';
-import { visualizer } from "rollup-plugin-visualizer";
+import path from 'path';
-import { defineConfig } from "vite";
-import EnvironmentPlugin from "vite-plugin-environment";
-
-let hash = "";
 
+let hash = '';
 try {
-  hash = execSync("git rev-parse --short HEAD").toString().trim();
+  hash = execSync('git rev-parse --short HEAD').toString().trim();
 } catch (error) {
-  hash = "DEVELOPMENT";
+  hash = 'DEV';
 }
 
 export default defineConfig({
-  plugins: [
+  plugins: [react()],
-    react(),
+  define: {
-    EnvironmentPlugin({
+    'process.env.COMMIT_HASH': JSON.stringify(hash),
-      COMMIT_HASH: hash,
-    }),
-    // VitePWA({
-    //   registerType: "autoUpdate",
-    //   devOptions: {
-    //     enabled: true
-    //   }
-    // })
-  ],
-  build: {
-    target: "esnext",
-    assetsDir: "",
-    rollupOptions: {
-      plugins: [visualizer()],
-    },
   },
   resolve: {
     alias: {
-      "@app": resolve(__dirname, "./src"),
+      '@app': path.resolve(__dirname, './src'),
-      "@pages": resolve(__dirname, "./src/pages"),
+      '@pages': path.resolve(__dirname, './src/pages'),
-      "@components": resolve(__dirname, "./src/components"),
+      '@components': path.resolve(__dirname, './src/components'),
-      "@core": resolve(__dirname, "./src/core"),
+      '@core': path.resolve(__dirname, './src/core'),
-      "@layouts": resolve(__dirname, "./src/layouts"),
+      '@layouts': path.resolve(__dirname, './src/layouts'),
     },
   },
-});
+  server: {
+    port: 3000
+  }
+});