diff --git a/.electron-builder.config.js b/.electron-builder.config.js index a4ab56d..8e0a156 100644 --- a/.electron-builder.config.js +++ b/.electron-builder.config.js @@ -3,36 +3,36 @@ * @see https://www.electron.build/configuration/configuration */ module.exports = { - appId: "YourAppID@qq.com", - productName: "YourAppName", - copyright: "Copyright © 2022 ${author}", - asar: true, - directories: { - output: "release/${version}", - buildResources: "build", - }, - files: ["dist"], - win: { - target: [ - { - target: "nsis", - arch: ["x64"], - }, - ], - artifactName: "${productName}-${version}-Setup.${ext}", - }, - nsis: { - oneClick: false, - perMachine: false, - allowToChangeInstallationDirectory: true, - deleteAppDataOnUninstall: false, - }, - mac: { - target: ["dmg"], - artifactName: "${productName}-${version}-Installer.${ext}", - }, - linux: { - target: ["AppImage"], - artifactName: "${productName}-${version}-Installer.${ext}", - }, + appId: "YourAppID@qq.com", + productName: "YourAppName", + copyright: "Copyright © 2022 ${author}", + asar: true, + directories: { + output: "release/${version}", + buildResources: "build", + }, + files: ["dist"], + win: { + target: [ + { + target: "nsis", + arch: ["x64"], + }, + ], + artifactName: "${productName}-${version}-Setup.${ext}", + }, + nsis: { + oneClick: false, + perMachine: false, + allowToChangeInstallationDirectory: true, + deleteAppDataOnUninstall: false, + }, + mac: { + target: ["dmg"], + artifactName: "${productName}-${version}-Installer.${ext}", + }, + linux: { + target: ["AppImage"], + artifactName: "${productName}-${version}-Installer.${ext}", + }, } diff --git a/README.md b/README.md index eba22ea..565bcfa 100644 --- a/README.md +++ b/README.md @@ -91,8 +91,8 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate ```typescript // Defined in the window interface Window { - fs: typeof import("fs") - ipcRenderer: import("electron").IpcRenderer + fs: typeof import("fs") + ipcRenderer: import("electron").IpcRenderer } ``` @@ -115,18 +115,18 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate ```js export default { - build: { - // built lib for Main-process, Preload-script - lib: { - entry: "index.ts", - formats: ["cjs"], - fileName: () => "[name].js", - }, - rollupOptions: { - // configuration here - external: ["serialport", "sqlite3"], - }, - }, + build: { + // built lib for Main-process, Preload-script + lib: { + entry: "index.ts", + formats: ["cjs"], + fileName: () => "[name].js", + }, + rollupOptions: { + // configuration here + external: ["serialport", "sqlite3"], + }, + }, } ``` diff --git a/src/main/index.ts b/src/main/index.ts index 7f54791..ecd6f7d 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -38,9 +38,9 @@ async function createWindow() { // Make all links open with the browser, not with the application win.webContents.setWindowOpenHandler(({ url }) => { - if (url.startsWith('https:')) shell.openExternal(url) - return { action: 'deny' } - }) + if (url.startsWith('https:')) shell.openExternal(url) + return { action: 'deny' } + }) } app.whenReady().then(createWindow) diff --git a/src/renderer/index.html b/src/renderer/index.html index c2f5171..41fece5 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -5,9 +5,9 @@ + http-equiv="Content-Security-Policy" + content="script-src 'self' 'unsafe-inline';" + /> Vite App diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 536120c..0b54de5 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -5,68 +5,68 @@ import styles from '@/styles/app.module.scss' import { useState } from 'react' const App = () => { - const [count, setCount] = useState(0) + const [count, setCount] = useState(0) - return ( -
-
-
-
- electron -
-
- vite -
-
- logo -
-
-

Hello Electron + Vite + React!

-

- -

-

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

-
- - Learn React - - {' | '} - - Vite Docs - -
- Place static files into the{' '} - src/renderer/public folder - -
-
-
-
- ) + return ( +
+
+
+
+ electron +
+
+ vite +
+
+ logo +
+
+

Hello Electron + Vite + React!

+

+ +

+

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

+
+ + Learn React + + {' | '} + + Vite Docs + +
+ Place static files into the{' '} + src/renderer/public folder + +
+
+
+
+ ) } export default App diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx index 72d6dd0..d00f704 100644 --- a/src/renderer/src/main.tsx +++ b/src/renderer/src/main.tsx @@ -5,11 +5,11 @@ import './samples/electron-store' import './styles/index.css' render( - - - , - document.getElementById('root'), - window.removeLoading + + + , + document.getElementById('root'), + window.removeLoading ) console.log('fs', window.fs) @@ -17,5 +17,5 @@ console.log('ipcRenderer', window.ipcRenderer) // Use ipcRenderer.on window.ipcRenderer.on('main-process-message', (_event, ...args) => { - console.log('[Receive Main-process message]:', ...args) + console.log('[Receive Main-process message]:', ...args) }) diff --git a/src/renderer/src/styles/app.module.scss b/src/renderer/src/styles/app.module.scss index 200933a..7edf79a 100644 --- a/src/renderer/src/styles/app.module.scss +++ b/src/renderer/src/styles/app.module.scss @@ -1,65 +1,65 @@ .app { - text-align: center; + 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; + .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%; + .logos { + display: flex; + box-sizing: border-box; + align-items: center; + padding: 0 5vw; + width: 100%; - .imgBox { - width: 33.33%; + .imgBox { + width: 33.33%; - .appLogo { - pointer-events: none; - } + .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); - } - } - } - } - } + @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); - } + button { + font-size: calc(10px + 2vmin); + } - .appLink { - color: #61dafb; - } + .appLink { + color: #61dafb; + } - .staticPublic { - display: flex; - align-items: center; + .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; - } - } - } + code { + padding: 4px 7px; + margin: 0 4px; + border-radius: 4px; + background-color: rgb(30, 30, 30, .7); + font-size: 13px; + } + } + } }