hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
feat: switch to Vite 6.x
This commit is contained in:
Dan Ditomaso
2025-02-20 21:02:30 -05:00
committed by GitHub
parent a10230b412 349a2bf855
commit 5e18c8d256
13 changed files with 914 additions and 1792 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+13 -9
View File
@@ -5,13 +5,13 @@
"description": "Meshtastic web client",
"license": "GPL-3.0-only",
"scripts": {
"build": "rsbuild build",
"build:analyze": "BUNDLE_ANALYZE=true rsbuild build",
"build": "vite 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",
"preview": "rsbuild preview",
"dev": "vite dev --open",
"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"
},
"packageManager": "pnpm@10.1.0"
"typescript": "^5.7.3",
"vite": "^6.1.1"
}
}
pnpm-lock.yaml
Generated
+799 -1650
View File
File diff suppressed because it is too large Load Diff
rsbuild.config.ts
-30
View File
@@ -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
+3 -10
View File
@@ -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
+8 -6
View File
@@ -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"
// description="Description"
disabled={
onCheckedChange={(checked) => {
checked ? setHTTPS(true) : setHTTPS(false);
}}
disabled={
location.protocol === "https:" || connectionInProgress
}
checked={value}
src/components/ThemeSwitcher.tsx
+26 -21
View File
@@ -1,39 +1,44 @@
import { useTheme } from "@app/core/hooks/useTheme";
import { Moon, Sun } from "lucide-react";
import React from "react";
import { cn } from "@app/core/utils/cn";
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
const [theme, setTheme] = React.useState<Theme>(currentTheme);
React.useEffect(() => {
document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("theme", theme);
}, [theme]);
}: {
className?: string;
}) {
const { theme, preference, setPreference } = useTheme();
const themeIcons = {
light: (
<Sun className="size-5 transition-transform duration-300 scale-100" />
),
dark: (
<Moon className="size-5 transition-transform duration-300 scale-100" />
),
light: <Sun className="size-5" />,
dark: <Moon className="size-5" />,
system: <Monitor className="size-5" />,
};
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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+33 -28
View File
@@ -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>(() => {
if (typeof window === "undefined") return "light";
return (
(document.documentElement.getAttribute("data-theme") as Theme) || "light"
);
});
const getSystemTheme = () =>
window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "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(() => {
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (
mutation.type === "attributes" &&
mutation.attributeName === "data-theme"
) {
const newTheme = document.documentElement.getAttribute(
"data-theme",
) as Theme;
setTheme(newTheme);
}
}
});
document.documentElement.setAttribute("data-theme", theme);
}, [theme]);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["data-theme"],
});
useEffect(() => {
if (preference !== "system") return;
return () => observer.disconnect();
}, []);
const media = window.matchMedia("(prefers-color-scheme: dark)");
const updateTheme = () => setPreference(getStoredPreference());
return theme;
media.addEventListener("change", updateTheme);
return () => media.removeEventListener("change", updateTheme);
}, [preference, getStoredPreference]);
const setPreferenceValue = (newPreference: Theme) => {
localStorage.setItem("theme", newPreference);
setPreference(newPreference);
};
return { theme, preference, setPreference: setPreferenceValue };
}
src/core/stores/appStore.ts
+8
View File
@@ -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
+2 -1
View File
@@ -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
+19 -34
View File
@@ -1,45 +1,30 @@
import { execSync } from "node:child_process";
import { resolve } from "node:path";
import react from "@vitejs/plugin-react";
import { visualizer } from "rollup-plugin-visualizer";
import { defineConfig } from "vite";
import EnvironmentPlugin from "vite-plugin-environment";
let hash = "";
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { execSync } from 'node:child_process';
import path from 'path';
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: [
react(),
EnvironmentPlugin({
COMMIT_HASH: hash,
}),
// VitePWA({
// registerType: "autoUpdate",
// devOptions: {
// enabled: true
// }
// })
],
build: {
target: "esnext",
assetsDir: "",
rollupOptions: {
plugins: [visualizer()],
},
plugins: [react()],
define: {
'process.env.COMMIT_HASH': JSON.stringify(hash),
},
resolve: {
alias: {
"@app": resolve(__dirname, "./src"),
"@pages": resolve(__dirname, "./src/pages"),
"@components": resolve(__dirname, "./src/components"),
"@core": resolve(__dirname, "./src/core"),
"@layouts": resolve(__dirname, "./src/layouts"),
'@app': path.resolve(__dirname, './src'),
'@pages': path.resolve(__dirname, './src/pages'),
'@components': path.resolve(__dirname, './src/components'),
'@core': path.resolve(__dirname, './src/core'),
'@layouts': path.resolve(__dirname, './src/layouts'),
},
},
});
server: {
port: 3000
}
});