diff --git a/packages/main/index.ts b/packages/main/index.ts deleted file mode 100644 index 4e63dc3..0000000 --- a/packages/main/index.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { app, BrowserWindow, shell } from 'electron' -import { release } from 'os' -import { join } from 'path' -import './samples/electron-store' -import './samples/npm-esm-packages' - -// Disable GPU Acceleration for Windows 7 -if (release().startsWith('6.1')) app.disableHardwareAcceleration() - -// Set application name for Windows 10+ notifications -if (process.platform === 'win32') app.setAppUserModelId(app.getName()) - -if (!app.requestSingleInstanceLock()) { - app.quit() - process.exit(0) -} - -let win: BrowserWindow | null = null - -async function createWindow() { - win = new BrowserWindow({ - title: 'Main window', - webPreferences: { - preload: join(__dirname, '../preload/index.cjs') - }, - }) - - if (app.isPackaged) { - win.loadFile(join(__dirname, '../renderer/index.html')) - } else { - // 🚧 Use ['ENV_NAME'] avoid vite:define plugin - const url = `http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}` - - win.loadURL(url) - // win.webContents.openDevTools() - } - - // Test active push message to Renderer-process - win.webContents.on('did-finish-load', () => { - win?.webContents.send('main-process-message', (new Date).toLocaleString()) - }) - - // 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' } - }) -} - -app.whenReady().then(createWindow) - -app.on('window-all-closed', () => { - win = null - if (process.platform !== 'darwin') app.quit() -}) - -app.on('second-instance', () => { - if (win) { - // Focus on the main window if the user tried to open another - if (win.isMinimized()) win.restore() - win.focus() - } -}) - -app.on('activate', () => { - const allWindows = BrowserWindow.getAllWindows() - if (allWindows.length) { - allWindows[0].focus() - } else { - createWindow() - } -}) diff --git a/packages/main/samples/electron-store.ts b/packages/main/samples/electron-store.ts deleted file mode 100644 index cb64102..0000000 --- a/packages/main/samples/electron-store.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Example of 'electron-store' usage. - */ -import { ipcMain } from 'electron' -import Store from 'electron-store' - -/** - * Expose 'electron-store' to Renderer-process through 'ipcMain.handle' - */ -const store = new Store() -ipcMain.handle( - 'electron-store', - async (_event, methodSign: string, ...args: any[]) => { - if (typeof (store as any)[methodSign] === 'function') { - return (store as any)[methodSign](...args) - } - return (store as any)[methodSign] - } -) diff --git a/packages/main/samples/npm-esm-packages.ts b/packages/main/samples/npm-esm-packages.ts deleted file mode 100644 index f4c0436..0000000 --- a/packages/main/samples/npm-esm-packages.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { execa } from 'execa' - -(async () => { - const { stdout } = await execa('echo', ['unicorns']) - - // console.log(stdout) // unicorns -})() diff --git a/packages/main/vite.config.ts b/packages/main/vite.config.ts deleted file mode 100644 index 34eaf9b..0000000 --- a/packages/main/vite.config.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { builtinModules } from 'module' -import { defineConfig } from 'vite' -import esmodule from 'vite-plugin-esmodule' -import pkg from '../../package.json' - -export default defineConfig({ - root: __dirname, - plugins: [ - esmodule([ - 'execa', - ]), - ], - build: { - outDir: '../../dist/main', - emptyOutDir: true, - minify: process.env./* from mode option */NODE_ENV === 'production', - sourcemap: true, - lib: { - entry: 'index.ts', - formats: ['cjs'], - fileName: () => '[name].cjs', - }, - rollupOptions: { - external: [ - 'electron', - ...builtinModules, - ...Object.keys(pkg.dependencies || {}), - ], - }, - }, -}) diff --git a/packages/preload/index.ts b/packages/preload/index.ts deleted file mode 100644 index c3ef1ba..0000000 --- a/packages/preload/index.ts +++ /dev/null @@ -1,36 +0,0 @@ -import fs from 'fs' -import { contextBridge, ipcRenderer } from 'electron' -import { domReady } from './utils' -import { useLoading } from './loading' - -const { appendLoading, removeLoading } = useLoading() - -;(async () => { - await domReady() - - appendLoading() -})() - -// --------- Expose some API to the Renderer process. --------- -contextBridge.exposeInMainWorld('fs', fs) -contextBridge.exposeInMainWorld('removeLoading', removeLoading) -contextBridge.exposeInMainWorld('ipcRenderer', withPrototype(ipcRenderer)) - -// `exposeInMainWorld` can't detect attributes and methods of `prototype`, manually patching it. -function withPrototype(obj: Record) { - const protos = Object.getPrototypeOf(obj) - - for (const [key, value] of Object.entries(protos)) { - if (Object.prototype.hasOwnProperty.call(obj, key)) continue - - if (typeof value === 'function') { - // Some native APIs, like `NodeJS.EventEmitter['on']`, don't work in the Renderer process. Wrapping them into a function. - obj[key] = function (...args: any) { - return value.call(obj, ...args) - } - } else { - obj[key] = value - } - } - return obj -} diff --git a/packages/preload/loading.ts b/packages/preload/loading.ts deleted file mode 100644 index 84d72df..0000000 --- a/packages/preload/loading.ts +++ /dev/null @@ -1,67 +0,0 @@ -/** - * https://tobiasahlin.com/spinkit - * https://connoratherton.com/loaders - * https://projects.lukehaas.me/css-loaders - * https://matejkustec.github.io/SpinThatShit - */ -export function useLoading() { - const className = `loaders-css__square-spin` - const styleContent = ` -@keyframes square-spin { - 25% { transform: perspective(100px) rotateX(180deg) rotateY(0); } - 50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); } - 75% { transform: perspective(100px) rotateX(0) rotateY(180deg); } - 100% { transform: perspective(100px) rotateX(0) rotateY(0); } -} -.${className} > div { - animation-fill-mode: both; - width: 50px; - height: 50px; - background: #fff; - animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -} -.app-loading-wrap { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - background: #282c34; - z-index: 9; -} - ` - const oStyle = document.createElement('style') - const oDiv = document.createElement('div') - - oStyle.id = 'app-loading-style' - oStyle.innerHTML = styleContent - oDiv.className = 'app-loading-wrap' - oDiv.innerHTML = `
` - - return { - appendLoading() { - safe.append(document.head, oStyle) - safe.append(document.body, oDiv) - }, - removeLoading() { - safe.remove(document.head, oStyle) - safe.remove(document.body, oDiv) - }, - } -} - -const safe = { - append(parent: HTMLElement, child: HTMLElement) { - if (!Array.from(parent.children).find(e => e === child)) { - return parent.appendChild(child) - } - }, - remove(parent: HTMLElement, child: HTMLElement) { - if (Array.from(parent.children).find(e => e === child)) { - return parent.removeChild(child) - } - }, -} diff --git a/packages/preload/utils.ts b/packages/preload/utils.ts deleted file mode 100644 index 2f68893..0000000 --- a/packages/preload/utils.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** Document ready */ -export const domReady = ( - condition: DocumentReadyState[] = ['complete', 'interactive'] -) => { - return new Promise((resolve) => { - if (condition.includes(document.readyState)) { - resolve(true) - } else { - document.addEventListener('readystatechange', () => { - if (condition.includes(document.readyState)) { - resolve(true) - } - }) - } - }) -} diff --git a/packages/preload/vite.config.ts b/packages/preload/vite.config.ts deleted file mode 100644 index f75c1c8..0000000 --- a/packages/preload/vite.config.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { join } from 'path' -import { builtinModules } from 'module' -import { defineConfig } from 'vite' -import pkg from '../../package.json' - -export default defineConfig({ - root: __dirname, - build: { - outDir: '../../dist/preload', - emptyOutDir: true, - minify: process.env./* from mode option */NODE_ENV === 'production', - // https://github.com/caoxiemeihao/electron-vue-vite/issues/61 - sourcemap: 'inline', - rollupOptions: { - input: { - // multiple entry - index: join(__dirname, 'index.ts'), - }, - output: { - format: 'cjs', - entryFileNames: '[name].cjs', - manualChunks: {}, - }, - external: [ - 'electron', - ...builtinModules, - ...Object.keys(pkg.dependencies || {}), - ], - }, - }, -}) diff --git a/packages/renderer/index.html b/packages/renderer/index.html deleted file mode 100644 index 41fece5..0000000 --- a/packages/renderer/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - Vite App - - -
- - - diff --git a/packages/renderer/public/electron-vite-react-debug.gif b/packages/renderer/public/electron-vite-react-debug.gif deleted file mode 100644 index 4f87992..0000000 Binary files a/packages/renderer/public/electron-vite-react-debug.gif and /dev/null differ diff --git a/packages/renderer/public/electron-vite-react.gif b/packages/renderer/public/electron-vite-react.gif deleted file mode 100644 index a4b5da5..0000000 Binary files a/packages/renderer/public/electron-vite-react.gif and /dev/null differ diff --git a/packages/renderer/public/images/node.png b/packages/renderer/public/images/node.png deleted file mode 100644 index 1cd6519..0000000 Binary files a/packages/renderer/public/images/node.png and /dev/null differ diff --git a/packages/renderer/src/App.tsx b/packages/renderer/src/App.tsx deleted file mode 100644 index 0b54de5..0000000 --- a/packages/renderer/src/App.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import electron from '@/assets/electron.png' -import react from '@/assets/react.svg' -import vite from '@/assets/vite.svg' -import styles from '@/styles/app.module.scss' -import { useState } from 'react' - -const App = () => { - 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 - -
-
-
-
- ) -} - -export default App diff --git a/packages/renderer/src/assets/electron.png b/packages/renderer/src/assets/electron.png deleted file mode 100644 index 45c8adb..0000000 Binary files a/packages/renderer/src/assets/electron.png and /dev/null differ diff --git a/packages/renderer/src/assets/favicon.svg b/packages/renderer/src/assets/favicon.svg deleted file mode 100644 index de4aedd..0000000 --- a/packages/renderer/src/assets/favicon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/packages/renderer/src/assets/react.svg b/packages/renderer/src/assets/react.svg deleted file mode 100644 index 6b60c10..0000000 --- a/packages/renderer/src/assets/react.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/packages/renderer/src/assets/vite.svg b/packages/renderer/src/assets/vite.svg deleted file mode 100644 index 6471ae0..0000000 --- a/packages/renderer/src/assets/vite.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/renderer/src/assets/vue.png b/packages/renderer/src/assets/vue.png deleted file mode 100644 index f3d2503..0000000 Binary files a/packages/renderer/src/assets/vue.png and /dev/null differ diff --git a/packages/renderer/src/global.d.ts b/packages/renderer/src/global.d.ts deleted file mode 100644 index 8d1a260..0000000 --- a/packages/renderer/src/global.d.ts +++ /dev/null @@ -1,11 +0,0 @@ - -export { } - -declare global { - interface Window { - // Expose some Api through preload script - fs: typeof import('fs') - ipcRenderer: import('electron').IpcRenderer - removeLoading: () => void - } -} diff --git a/packages/renderer/src/main.tsx b/packages/renderer/src/main.tsx deleted file mode 100644 index a0cfeff..0000000 --- a/packages/renderer/src/main.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import App from './App' -import './samples/electron-store' -import './samples/preload-module' -import './styles/index.css' - -const root = createRoot(document.getElementById('root')!) - -root.render( - - - -) - -window.removeLoading() diff --git a/packages/renderer/src/samples/electron-store.ts b/packages/renderer/src/samples/electron-store.ts deleted file mode 100644 index ba323fa..0000000 --- a/packages/renderer/src/samples/electron-store.ts +++ /dev/null @@ -1,31 +0,0 @@ -// Usage of 'electron-store' -const store = { - async get(key: string) { - const { invoke } = window.ipcRenderer - let value = await invoke('electron-store', 'get', key) - try { - value = JSON.parse(value) - } finally { - return value - } - }, - async set(key: string, value: any) { - const { invoke } = window.ipcRenderer - let val = value - try { - if (value && typeof value === 'object') { - val = JSON.stringify(value) - } - } finally { - await invoke('electron-store', 'set', key, val) - } - }, -}; - -(async () => { - await store.set('Date.now', Date.now()) - console.log('electron-store ->', 'Date.now:', await store.get('Date.now')) - console.log('electron-store ->', 'path:', await window.ipcRenderer.invoke('electron-store', 'path')) -})(); - -export { } diff --git a/packages/renderer/src/samples/preload-module.ts b/packages/renderer/src/samples/preload-module.ts deleted file mode 100644 index 526a02c..0000000 --- a/packages/renderer/src/samples/preload-module.ts +++ /dev/null @@ -1,9 +0,0 @@ -console.log('fs', window.fs) -console.log('ipcRenderer', window.ipcRenderer) - -// Usage of ipcRenderer.on -window.ipcRenderer.on('main-process-message', (_event, ...args) => { - console.log('[Receive Main-process message]:', ...args) -}) - -export default {} diff --git a/packages/renderer/src/styles/app.module.scss b/packages/renderer/src/styles/app.module.scss deleted file mode 100644 index 7edf79a..0000000 --- a/packages/renderer/src/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/packages/renderer/src/styles/index.css b/packages/renderer/src/styles/index.css deleted file mode 100644 index ec2585e..0000000 --- a/packages/renderer/src/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/packages/renderer/src/vite-env.d.ts b/packages/renderer/src/vite-env.d.ts deleted file mode 100644 index 11f02fe..0000000 --- a/packages/renderer/src/vite-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/packages/renderer/tsconfig.json b/packages/renderer/tsconfig.json deleted file mode 100644 index 6c79141..0000000 --- a/packages/renderer/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "extends": "../../paths.json", - "compilerOptions": { - "target": "ESNext", - "useDefineForClassFields": true, - "lib": ["DOM", "DOM.Iterable", "ESNext"], - "allowJs": false, - "skipLibCheck": true, - "esModuleInterop": false, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "module": "ESNext", - "moduleResolution": "Node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": ["src"] -} diff --git a/packages/renderer/vite.config.ts b/packages/renderer/vite.config.ts deleted file mode 100644 index 16f1763..0000000 --- a/packages/renderer/vite.config.ts +++ /dev/null @@ -1,144 +0,0 @@ -import { join } from 'path' -import { builtinModules } from 'module' -import { defineConfig, Plugin } from 'vite' -import react from '@vitejs/plugin-react' -import optimizer from 'vite-plugin-optimizer' -import resolve, { lib2esm } from 'vite-plugin-resolve' -import pkg from '../../package.json' - -/** - * @see https://vitejs.dev/config/ - */ -export default defineConfig({ - mode: process.env.NODE_ENV, - root: __dirname, - plugins: [ - react(), - electron(), - resolve({ - /** - * Here you can resolve some CommonJs module. - * Or some Node.js native modules they may not be built correctly by vite. - * At the same time, these modules should be put in `dependencies`, - * because they will not be built by vite, but will be packaged into `app.asar` by electron-builder - */ - - // ESM format code snippets - 'electron-store': 'export default require("electron-store");', - /** - * Node.js native module - * Use lib2esm() to easy to convert ESM - * Equivalent to - * - * ```js - * sqlite3: () => ` - * const _M_ = require('sqlite3'); - * const _D_ = _M_.default || _M_; - * export { _D_ as default } - * ` - * ``` - */ - sqlite3: lib2esm('sqlite3', { format: 'cjs' }), - serialport: lib2esm( - // CJS lib name - 'serialport', - // export memebers - [ - 'SerialPort', - 'SerialPortMock', - ], - { format: 'cjs' }, - ), - }), - ], - base: './', - build: { - outDir: '../../dist/renderer', - emptyOutDir: true, - sourcemap: true, - }, - resolve: { - alias: { - '@': join(__dirname, 'src'), - }, - }, - server: { - host: pkg.env.VITE_DEV_SERVER_HOST, - port: pkg.env.VITE_DEV_SERVER_PORT, - }, -}) - -/** - * For usage of Electron and NodeJS APIs in the Renderer process - * @see https://github.com/caoxiemeihao/electron-vue-vite/issues/52 - */ -export function electron( - entries: Parameters[0] = {} -): Plugin { - const builtins = builtinModules.filter((t) => !t.startsWith('_')) - - /** - * @see https://github.com/caoxiemeihao/vite-plugins/tree/main/packages/resolve#readme - */ - return optimizer({ - electron: electronExport(), - ...builtinModulesExport(builtins), - ...entries, - }) - - function electronExport() { - return ` -/** - * For all exported modules see https://www.electronjs.org/docs/latest/api/clipboard -> Renderer Process Modules - */ -const electron = require("electron"); -const { - clipboard, - nativeImage, - shell, - contextBridge, - crashReporter, - ipcRenderer, - webFrame, - desktopCapturer, - deprecate, -} = electron; - -export { - electron as default, - clipboard, - nativeImage, - shell, - contextBridge, - crashReporter, - ipcRenderer, - webFrame, - desktopCapturer, - deprecate, -} -` - } - - function builtinModulesExport(modules: string[]) { - return modules - .map((moduleId) => { - const nodeModule = require(moduleId) - const requireModule = `const M = require("${moduleId}");` - const exportDefault = `export default M;` - const exportMembers = - Object.keys(nodeModule) - .map((attr) => `export const ${attr} = M.${attr}`) - .join(';\n') + ';' - const nodeModuleCode = ` -${requireModule} - -${exportDefault} - -${exportMembers} -` - - return { [moduleId]: nodeModuleCode } - }) - .reduce((memo, item) => Object.assign(memo, item), {}) - } -}