diff --git a/package.json b/package.json index 536677d..3e7d2de 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ }, "devDependencies": { "@tauri-apps/cli": "^2", + "@types/node": "20", "@types/react": "^18.3.1", "@types/react-dom": "^18.3.1", "@vitejs/plugin-react": "^4.3.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e20c3f8..cb58cc1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,6 +24,9 @@ importers: '@tauri-apps/cli': specifier: ^2 version: 2.7.1 + '@types/node': + specifier: '20' + version: 20.19.9 '@types/react': specifier: ^18.3.1 version: 18.3.23 @@ -32,7 +35,7 @@ importers: version: 18.3.7(@types/react@18.3.23) '@vitejs/plugin-react': specifier: ^4.3.4 - version: 4.7.0(vite@6.3.5) + version: 4.7.0(vite@6.3.5(@types/node@20.19.9)) prettier: specifier: ^3.6.2 version: 3.6.2 @@ -41,7 +44,7 @@ importers: version: 5.6.3 vite: specifier: ^6.0.3 - version: 6.3.5 + version: 6.3.5(@types/node@20.19.9) packages: @@ -496,6 +499,9 @@ packages: '@types/estree@1.0.8': resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} + '@types/node@20.19.9': + resolution: {integrity: sha512-cuVNgarYWZqxRJDQHEB58GEONhOK79QVR/qYx4S7kcUObQvUwvFnYxJuuHUKm2aieN9X3yZB4LZsuYNU1Qphsw==} + '@types/prop-types@15.7.15': resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==} @@ -650,6 +656,9 @@ packages: engines: {node: '>=14.17'} hasBin: true + undici-types@6.21.0: + resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==} + update-browserslist-db@1.1.3: resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==} hasBin: true @@ -1048,6 +1057,10 @@ snapshots: '@types/estree@1.0.8': {} + '@types/node@20.19.9': + dependencies: + undici-types: 6.21.0 + '@types/prop-types@15.7.15': {} '@types/react-dom@18.3.7(@types/react@18.3.23)': @@ -1059,7 +1072,7 @@ snapshots: '@types/prop-types': 15.7.15 csstype: 3.1.3 - '@vitejs/plugin-react@4.7.0(vite@6.3.5)': + '@vitejs/plugin-react@4.7.0(vite@6.3.5(@types/node@20.19.9))': dependencies: '@babel/core': 7.28.0 '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0) @@ -1067,7 +1080,7 @@ snapshots: '@rolldown/pluginutils': 1.0.0-beta.27 '@types/babel__core': 7.20.5 react-refresh: 0.17.0 - vite: 6.3.5 + vite: 6.3.5(@types/node@20.19.9) transitivePeerDependencies: - supports-color @@ -1215,13 +1228,15 @@ snapshots: typescript@5.6.3: {} + undici-types@6.21.0: {} + update-browserslist-db@1.1.3(browserslist@4.25.1): dependencies: browserslist: 4.25.1 escalade: 3.2.0 picocolors: 1.1.1 - vite@6.3.5: + vite@6.3.5(@types/node@20.19.9): dependencies: esbuild: 0.25.8 fdir: 6.4.6(picomatch@4.0.3) @@ -1230,6 +1245,7 @@ snapshots: rollup: 4.45.1 tinyglobby: 0.2.14 optionalDependencies: + '@types/node': 20.19.9 fsevents: 2.3.3 yallist@3.1.1: {} diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 85f7a4a..0000000 --- a/src/App.css +++ /dev/null @@ -1,116 +0,0 @@ -.logo.vite:hover { - filter: drop-shadow(0 0 2em #747bff); -} - -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafb); -} -:root { - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 400; - - color: #0f0f0f; - background-color: #f6f6f6; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -.container { - margin: 0; - padding-top: 10vh; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: 0.75s; -} - -.logo.tauri:hover { - filter: drop-shadow(0 0 2em #24c8db); -} - -.row { - display: flex; - justify-content: center; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} - -a:hover { - color: #535bf2; -} - -h1 { - text-align: center; -} - -input, -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - color: #0f0f0f; - background-color: #ffffff; - transition: border-color 0.25s; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -} - -button { - cursor: pointer; -} - -button:hover { - border-color: #396cd8; -} -button:active { - border-color: #396cd8; - background-color: #e8e8e8; -} - -input, -button { - outline: none; -} - -#greet-input { - margin-right: 5px; -} - -@media (prefers-color-scheme: dark) { - :root { - color: #f6f6f6; - background-color: #2f2f2f; - } - - a:hover { - color: #24c8db; - } - - input, - button { - color: #ffffff; - background-color: #0f0f0f98; - } - button:active { - background-color: #0f0f0f69; - } -} diff --git a/src/App.tsx b/src/App.tsx index 6faec18..1b8e144 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,5 @@ import React, { useState } from "react" -import reactLogo from "./assets/react.svg" import { invoke } from "@tauri-apps/api/core" -import "./App.css" enum Level { min = "min", @@ -17,8 +15,8 @@ function App() { } function onChange(event: React.ChangeEvent) { - const value = event.target.value as Level; - setLevel(value); + const value = event.target.value as Level + setLevel(value) } return ( @@ -26,29 +24,15 @@ function App() {

Welcome to Tauri + React

- - Vite logo - - - Tauri logo - - - React logo - -
-

Click on the Tauri, Vite, and React logos to learn more.

- -
- -
diff --git a/src/components/.gitkeep b/src/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..e69de29 diff --git a/src/main.tsx b/src/main.tsx index 5182d01..356a190 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,5 +1,6 @@ import React from "react" import ReactDOM from "react-dom/client" +import "./main.css" import App from "./App" ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( diff --git a/tsconfig.json b/tsconfig.json index a7fc6fb..431927c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,10 +2,13 @@ "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], + "lib": [ + "ES2020", + "DOM", + "DOM.Iterable" + ], "module": "ESNext", "skipLibCheck": true, - /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, @@ -13,13 +16,23 @@ "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", - /* Linting */ "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true + "noUnusedLocals": false, + "noUnusedParameters": false, + "noFallthroughCasesInSwitch": true, + "paths": { + "@/*": [ + "./src/*" + ] + } }, - "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] + "include": [ + "src" + ], + "references": [ + { + "path": "./tsconfig.node.json" + } + ] } diff --git a/vite.config.ts b/vite.config.ts index f74d1b2..56f71a6 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,13 +1,19 @@ -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; +import { fileURLToPath } from "node:url" +import { defineConfig } from "vite" +import react from "@vitejs/plugin-react" -// @ts-expect-error process is a nodejs global -const host = process.env.TAURI_DEV_HOST; +const host = process.env.TAURI_DEV_HOST // https://vitejs.dev/config/ export default defineConfig(async () => ({ plugins: [react()], + resolve: { + alias: { + "@": fileURLToPath(new URL("./src", import.meta.url)), + }, + }, + // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build` // // 1. prevent vite from obscuring rust errors @@ -29,4 +35,4 @@ export default defineConfig(async () => ({ ignored: ["**/src-tauri/**"], }, }, -})); +}))