diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 4a7ea30..0000000 --- a/.editorconfig +++ /dev/null @@ -1,12 +0,0 @@ -root = true - -[*] -indent_style = space -indent_size = 2 -end_of_line = lf -charset = utf-8 -trim_trailing_whitespace = true -insert_final_newline = true - -[*.md] -trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore index 3c0d0bb..cbab9f2 100644 --- a/.gitignore +++ b/.gitignore @@ -10,9 +10,12 @@ lerna-debug.log* node_modules dist dist-ssr +dist-electron +release *.local # Editor directories and files +.vscode/.debug.env .idea .DS_Store *.suo @@ -21,9 +24,7 @@ dist-ssr *.sln *.sw? -release -.vscode/.debug.env +#lockfile package-lock.json pnpm-lock.yaml yarn.lock -dist-electron diff --git a/.vscode/.debug.script.mjs b/.vscode/.debug.script.mjs index ade3e79..9ca9336 100644 --- a/.vscode/.debug.script.mjs +++ b/.vscode/.debug.script.mjs @@ -1,12 +1,11 @@ -import fs from 'fs' -import path from 'path' -import { fileURLToPath } from 'url' -import { createRequire } from 'module' -import { spawn } from 'child_process' +import fs from 'node:fs' +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import { createRequire } from 'node:module' +import { spawn } from 'node:child_process' +const pkg = createRequire(import.meta.url)('../package.json') const __dirname = path.dirname(fileURLToPath(import.meta.url)) -const require = createRequire(import.meta.url) -const pkg = require('../package.json') // write .debug.env const envContent = Object.entries(pkg.debug.env).map(([key, val]) => `${key}=${val}`) @@ -21,4 +20,4 @@ spawn( stdio: 'inherit', env: Object.assign(process.env, { VSCODE_DEBUG: 'true' }), }, -) +) \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 47466d4..fe78c45 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -2,9 +2,6 @@ // See http://go.microsoft.com/fwlink/?LinkId=827846 // for the documentation about the extensions.json format "recommendations": [ - "editorconfig.editorconfig", - "mrmlnc.vscode-json5", - "rbbit.typescript-hero", - "syler.sass-indented", + "mrmlnc.vscode-json5" ] } diff --git a/.vscode/launch.json b/.vscode/launch.json index e7aefc2..2177eb1 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -6,7 +6,7 @@ "compounds": [ { "name": "Debug App", - "preLaunchTask": "start .debug.script.mjs", + "preLaunchTask": "Before Debug", "configurations": [ "Debug Main Process", "Debug Renderer Process" @@ -22,7 +22,7 @@ "configurations": [ { "name": "Debug Main Process", - "type": "pwa-node", + "type": "node", "request": "launch", "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", "windows": { @@ -40,7 +40,7 @@ "name": "Debug Renderer Process", "port": 9229, "request": "attach", - "type": "pwa-chrome", + "type": "chrome", "timeout": 60000, "skipFiles": [ "/**", @@ -51,4 +51,4 @@ ] }, ] -} +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..1e3e2cd --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,13 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib", + "typescript.tsc.autoDetect": "off", + "json.schemas": [ + { + "fileMatch": [ + "/*electron-builder.json5", + "/*electron-builder.json" + ], + "url": "https://json.schemastore.org/electron-builder" + } + ] +} diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 7ee1598..85d09cd 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -4,7 +4,7 @@ "version": "2.0.0", "tasks": [ { - "label": "start .debug.script.mjs", + "label": "Before Debug", "type": "shell", "command": "node .vscode/.debug.script.mjs", "isBackground": true, @@ -28,8 +28,4 @@ } } ] -} - -// https://code.visualstudio.com/docs/editor/tasks#_operating-system-specific-properties -// https://code.visualstudio.com/docs/editor/tasks#_background-watching-tasks -// https://code.visualstudio.com/docs/editor/tasks#_can-a-background-task-be-used-as-a-prelaunchtask-in-launchjson +} \ No newline at end of file diff --git a/README.md b/README.md index b8e73f9..1b3724f 100644 --- a/README.md +++ b/README.md @@ -24,36 +24,29 @@ English | [็ฎ€ไฝ“ไธญๆ–‡](README.zh-CN.md) npm create electron-vite ``` -![electron-vite-react.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react.gif?raw=true) +![electron-vite-react.gif](/public/electron-vite-react.gif) ## ๐Ÿž Debug -![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react-debug.gif?raw=true) +![electron-vite-react-debug.gif](/electron-vite-react-debug.gif) ## ๐Ÿ“‚ Directory structure Familiar React application structure, just with `electron` folder on the top :wink: -*Files in this folder will be separated from your React application and built into `dist/electron`* +*Files in this folder will be separated from your React application and built into `dist-electron`* ```tree -โ”œโ”€โ”€ electron Electron-related code -โ”‚ โ”œโ”€โ”€ main Main-process source code -โ”‚ โ”œโ”€โ”€ preload Preload-scripts source code -โ”‚ โ””โ”€โ”€ resources Resources for the production build -โ”‚ โ”œโ”€โ”€ icon.icns Icon for the application on macOS -โ”‚ โ”œโ”€โ”€ icon.ico Icon for the application -โ”‚ โ”œโ”€โ”€ installerIcon.ico Icon for the application installer -โ”‚ โ”œโ”€โ”€ uninstallerIcon.ico Icon for the application uninstaller -| โ””โ”€โ”€ iconset -| โ””โ”€โ”€ 256x256.png Icon for the application on Linux +โ”œโ”€โ”€ electron Electron-related code +โ”‚ โ”œโ”€โ”€ main Main-process source code +โ”‚ โ””โ”€โ”€ preload Preload-scripts source code โ”‚ -โ”œโ”€โ”€ release Generated after production build, contains executables +โ”œโ”€โ”€ release Generated after production build, contains executables โ”‚ โ””โ”€โ”€ {version} -โ”‚ โ”œโ”€โ”€ {os}-unpacked Contains unpacked application executable -โ”‚ โ””โ”€โ”€ Setup.{ext} Installer for the application +โ”‚ โ”œโ”€โ”€ {os}-{os_arch} Contains unpacked application executable +โ”‚ โ””โ”€โ”€ {app_name}_{version}.{ext} Installer for the application โ”‚ -โ”œโ”€โ”€ public Static assets -โ””โ”€โ”€ src Renderer source code, your React application +โ”œโ”€โ”€ public Static assets +โ””โ”€โ”€ src Renderer source code, your React application ``` ## ๐Ÿšจ Be aware @@ -67,10 +60,12 @@ To get started, remove the option as shown below. This will [modify the Vite con export default { plugins: [ + ... - // Use Node.js API in the Renderer-process - renderer({ - nodeIntegration: true, - }), + ... ], } ``` diff --git a/README.zh-CN.md b/README.zh-CN.md index 4a65a5a..f7784fe 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -23,33 +23,28 @@ npm create electron-vite ``` -![electron-vite-react.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react.gif?raw=true) +![electron-vite-react.gif](/public/electron-vite-react.gif) ## ่ฐƒ่ฏ• -![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react-debug.gif?raw=true) +![electron-vite-react-debug.gif](/public/electron-vite-react-debug.gif) ## ็›ฎๅฝ• -*๐Ÿšจ ้ป˜่ฎคๆƒ…ๅ†ตไธ‹, `electron` ๆ–‡ไปถๅคนไธ‹็š„ๆ–‡ไปถๅฐ†ไผš่ขซๆž„ๅปบๅˆฐ `dist/electron`* +*๐Ÿšจ ้ป˜่ฎคๆƒ…ๅ†ตไธ‹, `electron` ๆ–‡ไปถๅคนไธ‹็š„ๆ–‡ไปถๅฐ†ไผš่ขซๆž„ๅปบๅˆฐ `dist-electron`* ```tree -โ”œโ”€โ”€ electron Electron ๆบ็ ๆ–‡ไปถๅคน -โ”‚ โ”œโ”€โ”€ main Main-process ๆบ็  -โ”‚ โ”œโ”€โ”€ preload Preload-scripts ๆบ็  -โ”‚ โ””โ”€โ”€ resources ๅบ”็”จๆ‰“ๅŒ…็š„่ต„ๆบๆ–‡ไปถๅคน -โ”‚ โ”œโ”€โ”€ icon.icns ๅบ”็”จๅ›พๆ ‡(macOS) -โ”‚ โ”œโ”€โ”€ icon.ico ๅบ”็”จๅ›พๆ ‡ -โ”‚ โ”œโ”€โ”€ installerIcon.ico ๅฎ‰่ฃ…ๅ›พๆ ‡ -โ”‚ โ””โ”€โ”€ uninstallerIcon.ico ๅธ่ฝฝๅ›พๆ ‡ +โ”œโ”€โ”€ electron Electron ๆบ็ ๆ–‡ไปถๅคน +โ”‚ โ”œโ”€โ”€ main Main-process ๆบ็  +โ”‚ โ””โ”€โ”€ preload Preload-scripts ๆบ็  โ”‚ -โ”œโ”€โ”€ release ๆž„ๅปบๅŽ็”Ÿๆˆ็จ‹ๅบ็›ฎๅฝ• +โ”œโ”€โ”€ release ๆž„ๅปบๅŽ็”Ÿๆˆ็จ‹ๅบ็›ฎๅฝ• โ”‚ โ””โ”€โ”€ {version} -โ”‚ โ”œโ”€โ”€ {os}-unpacked ๆœชๆ‰“ๅŒ…็š„็จ‹ๅบ(็ปฟ่‰ฒ่ฟ่กŒ็‰ˆ) -โ”‚ โ””โ”€โ”€ Setup.{ext} ๅบ”็”จๅฎ‰่ฃ…ๆ–‡ไปถ +โ”‚ โ”œโ”€โ”€ {os}-{os_arch} ๆœชๆ‰“ๅŒ…็š„็จ‹ๅบ(็ปฟ่‰ฒ่ฟ่กŒ็‰ˆ) +โ”‚ โ””โ”€โ”€ {app_name}_{version}.{ext} ๅบ”็”จๅฎ‰่ฃ…ๆ–‡ไปถ โ”‚ -โ”œโ”€โ”€ public ๅŒ Vite ๆจกๆฟ็š„ public -โ””โ”€โ”€ src ๆธฒๆŸ“่ฟ›็จ‹ๆบ็ ใ€Reactไปฃ็  +โ”œโ”€โ”€ public ๅŒ Vite ๆจกๆฟ็š„ public +โ””โ”€โ”€ src ๆธฒๆŸ“่ฟ›็จ‹ๆบ็ ใ€Reactไปฃ็  ``` @@ -60,9 +55,16 @@ npm create electron-vite ```diff # vite.config.ts -electron({ -- renderer: {} -}) +export default { + plugins: [ + ... +- // Use Node.js API in the Renderer-process +- renderer({ +- nodeIntegration: true, +- }), + ... + ], +} ``` ## FAQ diff --git a/electron-builder.json5 b/electron-builder.json5 index 80c81c1..a5c0989 100644 --- a/electron-builder.json5 +++ b/electron-builder.json5 @@ -2,40 +2,37 @@ * @see https://www.electron.build/configuration/configuration */ { - appId: "YourAppID", - productName: "YourAppName", - copyright: "Copyright ยฉ 2022 ${author}", - asar: true, - directories: { - output: "release/${version}", - buildResources: "electron/resources", + "appId": "YourAppID", + "asar": true, + "icon": "public/favicon.ico", + "directories": { + "output": "release/${version}" }, - files: [ + "files": [ "dist-electron", "dist" ], - win: { - target: [ + "mac": { + "artifactName": "${productName}_${version}.${ext}", + "target": [ + "dmg" + ] + }, + "win": { + "target": [ { - target: "nsis", - arch: ["x64"], - }, + "target": "nsis", + "arch": [ + "x64" + ] + } ], - artifactName: "${productName}-Windows-${version}-Setup.${ext}", + "artifactName": "${productName}_${version}.${ext}" }, - nsis: { - oneClick: false, - perMachine: false, - allowToChangeInstallationDirectory: true, - deleteAppDataOnUninstall: false, - }, - mac: { - target: ["dmg"], - artifactName: "${productName}-Mac-${version}-Installer.${ext}", - }, - linux: { - icon: "electron/resources/iconset", - target: ["AppImage", "deb"], - artifactName: "${productName}-Linux-${version}.${ext}", - }, -} + "nsis": { + "oneClick": false, + "perMachine": false, + "allowToChangeInstallationDirectory": true, + "deleteAppDataOnUninstall": false + } +} \ No newline at end of file diff --git a/electron/electron-env.d.ts b/electron/electron-env.d.ts index 3b33998..5f0b7f5 100644 --- a/electron/electron-env.d.ts +++ b/electron/electron-env.d.ts @@ -8,4 +8,4 @@ declare namespace NodeJS { /** /dist/ or /public/ */ PUBLIC: string } -} +} \ No newline at end of file diff --git a/electron/main/index.ts b/electron/main/index.ts index 8f0c0f7..5daee09 100644 --- a/electron/main/index.ts +++ b/electron/main/index.ts @@ -1,3 +1,7 @@ +import { app, BrowserWindow, shell, ipcMain } from 'electron' +import { release } from 'node:os' +import { join } from 'node:path' + // The built directory structure // // โ”œโ”€โ”ฌ dist-electron @@ -8,13 +12,11 @@ // โ”œโ”€โ”ฌ dist // โ”‚ โ””โ”€โ”€ index.html > Electron-Renderer // -process.env.DIST_ELECTRON = join(__dirname, '../..') +process.env.DIST_ELECTRON = join(__dirname, '..') process.env.DIST = join(process.env.DIST_ELECTRON, '../dist') -process.env.PUBLIC = app.isPackaged ? process.env.DIST : join(process.env.DIST_ELECTRON, '../public') - -import { app, BrowserWindow, shell, ipcMain } from 'electron' -import { release } from 'os' -import { join } from 'path' +process.env.PUBLIC = process.env.VITE_DEV_SERVER_URL + ? join(process.env.DIST_ELECTRON, '../public') + : process.env.DIST // Disable GPU Acceleration for Windows 7 if (release().startsWith('6.1')) app.disableHardwareAcceleration() @@ -27,27 +29,36 @@ if (!app.requestSingleInstanceLock()) { process.exit(0) } +// Remove electron security warnings +// This warning only shows in development mode +// Read more on https://www.electronjs.org/docs/latest/tutorial/security +// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true' + let win: BrowserWindow | null = null // Here, you can also use other preload const preload = join(__dirname, '../preload/index.js') const url = process.env.VITE_DEV_SERVER_URL -const indexHtml = join(process.env.DIST, 'index.html') +const indexHtml = join('dist/', 'index.html') async function createWindow() { win = new BrowserWindow({ title: 'Main window', - icon: join(process.env.PUBLIC, 'favicon.svg'), + icon: join(process.env.PUBLIC, 'favicon.ico'), webPreferences: { preload, + // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production + // Consider using contextBridge.exposeInMainWorld + // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation nodeIntegration: true, contextIsolation: false, }, }) + // Open devTool if the app is not packaged + win.webContents.openDevTools() + if (process.env.VITE_DEV_SERVER_URL) { // electron-vite-vue#298 win.loadURL(url) - // Open devTool if the app is not packaged - win.webContents.openDevTools() } else { win.loadFile(indexHtml) } @@ -88,8 +99,8 @@ app.on('activate', () => { } }) -// new window example arg: new windows url -ipcMain.handle('open-win', (event, arg) => { +// New window example arg: new windows url +ipcMain.handle('open-win', (_, arg) => { const childWindow = new BrowserWindow({ webPreferences: { preload, diff --git a/electron/preload/index.ts b/electron/preload/index.ts index 0ee2dcc..0f6fb04 100644 --- a/electron/preload/index.ts +++ b/electron/preload/index.ts @@ -85,8 +85,8 @@ function useLoading() { const { appendLoading, removeLoading } = useLoading() domReady().then(appendLoading) -window.onmessage = ev => { +window.onmessage = (ev) => { ev.data.payload === 'removeLoading' && removeLoading() } -setTimeout(removeLoading, 4999) +setTimeout(removeLoading, 4999) \ No newline at end of file diff --git a/electron/resources/icon.icns b/electron/resources/icon.icns deleted file mode 100644 index 9a9c785..0000000 Binary files a/electron/resources/icon.icns and /dev/null differ diff --git a/electron/resources/icon.ico b/electron/resources/icon.ico deleted file mode 100644 index bf153e1..0000000 Binary files a/electron/resources/icon.ico and /dev/null differ diff --git a/electron/resources/iconset/256x256.png b/electron/resources/iconset/256x256.png deleted file mode 100644 index 4526115..0000000 Binary files a/electron/resources/iconset/256x256.png and /dev/null differ diff --git a/electron/resources/installerIcon.ico b/electron/resources/installerIcon.ico deleted file mode 100644 index bf153e1..0000000 Binary files a/electron/resources/installerIcon.ico and /dev/null differ diff --git a/electron/resources/uninstallerIcon.ico b/electron/resources/uninstallerIcon.ico deleted file mode 100644 index bf153e1..0000000 Binary files a/electron/resources/uninstallerIcon.ico and /dev/null differ diff --git a/index.html b/index.html index 4874016..aeae7ef 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,10 @@ - + - Vite App + Electron + Vite + React
diff --git a/package.json b/package.json index ff5366b..2ebfdea 100644 --- a/package.json +++ b/package.json @@ -1,37 +1,36 @@ { "name": "electron-vite-react", - "productName": "Electron", - "private": true, "version": "2.1.0", - "description": "Vite React Electron boilerplate.", + "main": "dist-electron/electron/main/index.js", + "description": "Electron Vite React boilerplate.", "author": "่‰้ž‹ๆฒกๅท <308487730@qq.com>", "license": "MIT", - "main": "dist-electron/electron/main/index.js", + "private": true, + "debug": { + "env": { + "VITE_DEV_SERVER_URL": "http://127.0.0.1:7777/" + } + }, "scripts": { "dev": "vite", - "build": "tsc && vite build && electron-builder" + "build": "tsc && vite build && electron-builder", + "preview": "vite preview" }, - "engines": { - "node": "^14.18.0 || >=16.0.0" - }, - "dependencies": {}, "devDependencies": { - "@types/react": "^18.0.25", + "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@vitejs/plugin-react": "^3.0.0", - "electron": "^21.3.1", + "electron": "^22.0.0", "electron-builder": "^23.6.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "sass": "^1.56.1", - "typescript": "^4.9.3", - "vite": "^4.0.0", - "vite-electron-plugin": "^0.5.2", + "sass": "^1.57.1", + "typescript": "^4.9.4", + "vite": "^4.0.3", + "vite-electron-plugin": "^0.6.0", "vite-plugin-electron-renderer": "^0.11.3" }, - "debug": { - "env": { - "VITE_DEV_SERVER_URL": "http://127.0.0.1:7777" - } + "engines": { + "node": "^14.18.0 || >=16.0.0" } } diff --git a/public/electron.png b/public/electron.png deleted file mode 100644 index 45c8adb..0000000 Binary files a/public/electron.png and /dev/null differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..843ea24 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/favicon.svg b/public/favicon.svg deleted file mode 100644 index de4aedd..0000000 --- a/public/favicon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/public/node.png b/public/node.png deleted file mode 100644 index 1cd6519..0000000 Binary files a/public/node.png and /dev/null differ diff --git a/public/node.svg b/public/node.svg new file mode 100644 index 0000000..38d4eaa --- /dev/null +++ b/public/node.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/react.svg b/public/react.svg deleted file mode 100644 index 6b60c10..0000000 --- a/public/react.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/public/vite.svg b/public/vite.svg index 6471ae0..e7b8dfb 100644 --- a/public/vite.svg +++ b/public/vite.svg @@ -1,15 +1 @@ - - - - - - - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..397d7ff --- /dev/null +++ b/src/App.scss @@ -0,0 +1,48 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} + +.flex-center { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/App.tsx b/src/App.tsx index 8fb4043..8e38876 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,71 +1,41 @@ import { useState } from 'react' -import styles from 'styles/app.module.scss' +import reactLogo from './assets/react.svg' +import electronLogo from './assets/electron.svg' +import './App.scss' -const App: React.FC = () => { +console.log('[App.tsx]', `Hello world from Electron ${process.versions.electron}!`) + +function App() { const [count, setCount] = useState(0) return ( -
-
-
-
- electron -
-
- vite -
-
- logo -
-
-

Hello Electron + Vite + React!

+
+
+ + Electron logo + + + Vite logo + + + React logo + +
+

Electron + Vite + React

+
+

- + Edit src/App.tsx and save to test HMR

-

- Edit App.tsx and save to test HMR updates. -

-
- - Learn React - - {' | '} - - Vite Docs - -
- Place static files into the{' '} - /public folder - -
-
-
+
+

+ Click on the Electron, Vite and React logos to learn more +

+
+ Place static files into the/public folder Node logo +
) } diff --git a/src/assets/electron.svg b/src/assets/electron.svg new file mode 100644 index 0000000..1c5cccb --- /dev/null +++ b/src/assets/electron.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..b3ad358 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + diff --git a/src/assets/styles/app.module.scss b/src/assets/styles/app.module.scss deleted file mode 100644 index 7edf79a..0000000 --- a/src/assets/styles/app.module.scss +++ /dev/null @@ -1,65 +0,0 @@ -.app { - text-align: center; - - .appHeader { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; - - .logos { - display: flex; - box-sizing: border-box; - align-items: center; - padding: 0 5vw; - width: 100%; - - .imgBox { - width: 33.33%; - - .appLogo { - pointer-events: none; - } - - @media (prefers-reduced-motion: no-preference) { - .appLogo { - animation: App-logo-spin infinite 20s linear; - } - @keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - } - } - } - - button { - font-size: calc(10px + 2vmin); - } - - .appLink { - color: #61dafb; - } - - .staticPublic { - display: flex; - align-items: center; - - code { - padding: 4px 7px; - margin: 0 4px; - border-radius: 4px; - background-color: rgb(30, 30, 30, .7); - font-size: 13px; - } - } - } -} diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/assets/styles/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 0000000..614cc25 --- /dev/null +++ b/src/index.scss @@ -0,0 +1,91 @@ +:root { + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +code { + background-color: #1a1a1a; + padding: 2px 4px; + margin: 0 4px; + border-radius: 4px; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } + code { + background-color: #f9f9f9; + } +} diff --git a/src/main.tsx b/src/main.tsx index 412bad4..5b9b627 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,12 +2,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './samples/node-api' -import 'styles/index.css' +import './index.scss' -ReactDOM.createRoot(document.getElementById('root')!).render( +ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + , ) postMessage({ payload: 'removeLoading' }, '*') diff --git a/src/samples/node-api.ts b/src/samples/node-api.ts index db31e5f..f7a4d4d 100644 --- a/src/samples/node-api.ts +++ b/src/samples/node-api.ts @@ -1,5 +1,5 @@ -import { lstat } from 'fs/promises' -import { cwd } from 'process' +import { lstat } from 'node:fs/promises' +import { cwd } from 'node:process' import { ipcRenderer } from 'electron' ipcRenderer.on('main-process-message', (_event, ...args) => { diff --git a/tsconfig.json b/tsconfig.json index c81e322..3d0a51a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,13 +1,8 @@ { "compilerOptions": { - "baseUrl": ".", "target": "ESNext", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], - "paths": { - "@/*": ["src/*"], - "styles/*": ["src/assets/styles/*"] - }, "allowJs": false, "skipLibCheck": true, "esModuleInterop": false, @@ -24,4 +19,3 @@ "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } - diff --git a/tsconfig.node.json b/tsconfig.node.json index 1eb1b76..ed1b586 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -6,5 +6,5 @@ "resolveJsonModule": true, "allowSyntheticDefaultImports": true }, - "include": ["package.json", "electron"] + "include": ["vite.config.ts", "package.json", "electron"] } diff --git a/vite.config.ts b/vite.config.ts index 6692bda..77f564a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,5 +1,5 @@ -import { rmSync } from 'fs' -import path from 'path' +import { rmSync } from 'node:fs' +import path from 'node:path' import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import electron from 'vite-electron-plugin' @@ -9,12 +9,14 @@ import pkg from './package.json' rmSync(path.join(__dirname, 'dist-electron'), { recursive: true, force: true }) +const isDevelopment = process.env.NODE_ENV === "development" || !!process.env.VSCODE_DEBUG +const isProduction = process.env.NODE_ENV === "production" + // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { - '@': path.join(__dirname, 'src'), - 'styles': path.join(__dirname, 'src/assets/styles'), + '@': path.join(__dirname, 'src') }, }, plugins: [ @@ -25,13 +27,13 @@ export default defineConfig({ 'preload', ], transformOptions: { - sourcemap: !!process.env.VSCODE_DEBUG, + sourcemap: isDevelopment }, plugins: [ - ...(process.env.VSCODE_DEBUG + ...(!!process.env.VSCODE_DEBUG ? [ // Will start Electron via VSCode Debug - customStart(debounce(() => console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App'))), + customStart(() => debounce(() => console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App'))), ] : []), // Allow use `import.meta.env.VITE_SOME_KEY` in Electron-Main @@ -43,7 +45,7 @@ export default defineConfig({ nodeIntegration: true, }), ], - server: process.env.VSCODE_DEBUG ? (() => { + server: !!process.env.VSCODE_DEBUG ? (() => { const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL) return { host: url.hostname, @@ -53,10 +55,10 @@ export default defineConfig({ clearScreen: false, }) -function debounce void>(fn: Fn, delay = 299) { +function debounce void>(fn: Fn, delay = 299): Fn { let t: NodeJS.Timeout - return ((...args) => { + return ((...args: Parameters) => { clearTimeout(t) t = setTimeout(() => fn(...args), delay) }) as Fn -} +} \ No newline at end of file