diff --git a/CHANGELOG.md b/CHANGELOG.md index a556b33..9f317f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## 0.5.0 (2024-03-17) + +- 626ed65 v0.5.0 +- 742b923 chore: sync templates form create-vite +- c8d33a9 chore: bupms electron, electron-builder, vite-plugin-electron +- 232c526 feat: preload.ts adapt electron@29 +- a9e13ae feat: add create-electron-vite.gif + ## 0.4.0 (2023-09-06) - 38af79d chore: test v0.4.0 diff --git a/electron/package.json b/electron/package.json index 5305032..3850c78 100644 --- a/electron/package.json +++ b/electron/package.json @@ -1,8 +1,8 @@ { "devDependencies": { - "electron": "^26.1.0", - "electron-builder": "^24.6.4", - "vite-plugin-electron": "^0.14.0", + "electron": "^29.1.4", + "electron-builder": "^24.13.3", + "vite-plugin-electron": "^0.28.4", "vite-plugin-electron-renderer": "^0.14.5" } } \ No newline at end of file diff --git a/electron/preload.ts b/electron/preload.ts index ec4ff00..e385424 100644 --- a/electron/preload.ts +++ b/electron/preload.ts @@ -1,117 +1,24 @@ -import { contextBridge, ipcRenderer } from 'electron' +import { ipcRenderer, contextBridge } from 'electron' // --------- Expose some API to the Renderer process --------- -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 -} - -// --------- Preload scripts loading --------- -function 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) - } - }) - } - }) -} - -const safeDOM = { - append(parent: HTMLElement, child: HTMLElement) { - if (!Array.from(parent.children).find(e => e === child)) { - parent.appendChild(child) - } +contextBridge.exposeInMainWorld('ipcRenderer', { + on(...args: Parameters) { + const [channel, listener] = args + ipcRenderer.on(channel, (event, ...args) => listener(event, ...args)) }, - remove(parent: HTMLElement, child: HTMLElement) { - if (Array.from(parent.children).find(e => e === child)) { - parent.removeChild(child) - } + off(...args: Parameters) { + const [channel, ...omit] = args + ipcRenderer.off(channel, ...omit) + }, + send(...args: Parameters) { + const [channel, ...omit] = args + ipcRenderer.send(channel, ...omit) + }, + invoke(...args: Parameters) { + const [channel, ...omit] = args + ipcRenderer.invoke(channel, ...omit) }, -} - -/** - * https://tobiasahlin.com/spinkit - * https://connoratherton.com/loaders - * https://projects.lukehaas.me/css-loaders - * https://matejkustec.github.io/SpinThatShit - */ -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() { - safeDOM.append(document.head, oStyle) - safeDOM.append(document.body, oDiv) - }, - removeLoading() { - safeDOM.remove(document.head, oStyle) - safeDOM.remove(document.body, oDiv) - }, - } -} - -// ---------------------------------------------------------------------- - -const { appendLoading, removeLoading } = useLoading() -domReady().then(appendLoading) - -window.onmessage = ev => { - ev.data.payload === 'removeLoading' && removeLoading() -} -setTimeout(removeLoading, 4999) + // You can expose other APTs you need here. + // ... +}) diff --git a/package.json b/package.json index 5bd5cb5..96110a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "create-electron-vite", - "version": "0.4.0", + "version": "0.5.0", "type": "module", "description": "Scaffolding Your Electron + Vite Project", "license": "MIT", diff --git a/src/index.ts b/src/index.ts index f46e464..edd13c8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -273,9 +273,6 @@ function setupElectron(root: string, framework: Framework) { // main.ts const snippets = (indent = 0) => ` -// Remove Preload scripts loading -postMessage({ payload: 'removeLoading' }, '*') - // Use contextBridge window.ipcRenderer.on('main-process-message', (_event, message) => { console.log(message) @@ -305,7 +302,8 @@ window.ipcRenderer.on('main-process-message', (_event, message) => { // Preload scripts may contain Web assets, so use the \`build.rollupOptions.input\` instead \`build.lib.entry\`. input: path.join(__dirname, 'electron/preload.ts'), }, - // Ployfill the Electron and Node.js built-in modules for Renderer process. + // Ployfill the Electron and Node.js API for Renderer process. + // If you want use Node.js in Renderer process, the \`nodeIntegration\` needs to be enabled in the Main process. // See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer renderer: {}, })` diff --git a/template-react-ts/README.md b/template-react-ts/README.md new file mode 100644 index 0000000..0d6babe --- /dev/null +++ b/template-react-ts/README.md @@ -0,0 +1,30 @@ +# React + TypeScript + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: + +- Configure the top-level `parserOptions` property like this: + +```js +export default { + // other rules... + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + project: ['./tsconfig.json', './tsconfig.node.json'], + tsconfigRootDir: __dirname, + }, +} +``` + +- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` +- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` +- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list diff --git a/template-react-ts/package.json b/template-react-ts/package.json index 978382a..9ed0c5c 100644 --- a/template-react-ts/package.json +++ b/template-react-ts/package.json @@ -6,7 +6,7 @@ "scripts": { "dev": "vite", "build": "tsc && vite build", - "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { @@ -14,15 +14,15 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@types/react": "^18.2.21", - "@types/react-dom": "^18.2.7", - "@typescript-eslint/eslint-plugin": "^6.6.0", - "@typescript-eslint/parser": "^6.6.0", - "@vitejs/plugin-react": "^4.0.4", - "eslint": "^8.48.0", + "@types/react": "^18.2.64", + "@types/react-dom": "^18.2.21", + "@typescript-eslint/eslint-plugin": "^7.1.1", + "@typescript-eslint/parser": "^7.1.1", + "@vitejs/plugin-react": "^4.2.1", + "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-react-refresh": "^0.4.3", + "eslint-plugin-react-refresh": "^0.4.5", "typescript": "^5.2.2", - "vite": "^4.4.9" + "vite": "^5.1.6" } } diff --git a/template-react-ts/src/index.css b/template-react-ts/src/index.css index 2c3fac6..6119ad9 100644 --- a/template-react-ts/src/index.css +++ b/template-react-ts/src/index.css @@ -11,7 +11,6 @@ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; } a { diff --git a/template-react-ts/tsconfig.node.json b/template-react-ts/tsconfig.node.json index 42872c5..97ede7e 100644 --- a/template-react-ts/tsconfig.node.json +++ b/template-react-ts/tsconfig.node.json @@ -4,7 +4,8 @@ "skipLibCheck": true, "module": "ESNext", "moduleResolution": "bundler", - "allowSyntheticDefaultImports": true + "allowSyntheticDefaultImports": true, + "strict": true }, "include": ["vite.config.ts"] } diff --git a/template-vanilla-ts/package.json b/template-vanilla-ts/package.json index 75f6764..640eb6b 100644 --- a/template-vanilla-ts/package.json +++ b/template-vanilla-ts/package.json @@ -10,6 +10,6 @@ }, "devDependencies": { "typescript": "^5.2.2", - "vite": "^4.4.9" + "vite": "^5.1.6" } } diff --git a/template-vanilla-ts/src/style.css b/template-vanilla-ts/src/style.css index b528b6c..f9c7350 100644 --- a/template-vanilla-ts/src/style.css +++ b/template-vanilla-ts/src/style.css @@ -11,7 +11,6 @@ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; } a { diff --git a/template-vue-ts/.vscode/extensions.json b/template-vue-ts/.vscode/extensions.json index c0a6e5a..a7cea0b 100644 --- a/template-vue-ts/.vscode/extensions.json +++ b/template-vue-ts/.vscode/extensions.json @@ -1,3 +1,3 @@ { - "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] + "recommendations": ["Vue.volar"] } diff --git a/template-vue-ts/package.json b/template-vue-ts/package.json index b795f14..be9a1d3 100644 --- a/template-vue-ts/package.json +++ b/template-vue-ts/package.json @@ -9,12 +9,12 @@ "preview": "vite preview" }, "dependencies": { - "vue": "^3.3.4" + "vue": "^3.4.21" }, "devDependencies": { - "@vitejs/plugin-vue": "^4.3.4", + "@vitejs/plugin-vue": "^5.0.4", "typescript": "^5.2.2", - "vite": "^4.4.9", - "vue-tsc": "^1.8.8" + "vite": "^5.1.6", + "vue-tsc": "^1.8.27" } } diff --git a/template-vue-ts/src/style.css b/template-vue-ts/src/style.css index 7294765..bb131d6 100644 --- a/template-vue-ts/src/style.css +++ b/template-vue-ts/src/style.css @@ -11,7 +11,6 @@ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; } a { diff --git a/template-vue-ts/tsconfig.node.json b/template-vue-ts/tsconfig.node.json index 42872c5..97ede7e 100644 --- a/template-vue-ts/tsconfig.node.json +++ b/template-vue-ts/tsconfig.node.json @@ -4,7 +4,8 @@ "skipLibCheck": true, "module": "ESNext", "moduleResolution": "bundler", - "allowSyntheticDefaultImports": true + "allowSyntheticDefaultImports": true, + "strict": true }, "include": ["vite.config.ts"] }