Merge pull request electron-vite#156 from electron-vite/dev

v2.0.0

.gitignore

@@ -1,10 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-.DS_Store
 dist
 dist-ssr
 *.local
-.debug.env
 
-tmp
-**/.tmp
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
 release
+.vscode/.debug.env
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

CHANGELOG.md

@@ -11,3 +11,18 @@
 ```bash
 Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
 ```
+
+
+## 22-01-30
+
+[v1.0.0](https://github.com/electron-vite/electron-vite-vue/releases/tag/v1.0.0)
+
+- ⚡️ Main、Renderer、preload, all built with vite
+
+
+## 21-06-04
+
+v2.0.0
+
+- 🖖 Based on the `vue-ts` template created by `npm create vite`, integrate `vite-plugin-electron`
+- ⚡️ More simplify, is in line with Vite project structure

packages/main/index.ts → electron-main/index.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, shell,ipcMain } from 'electron'
+import { app, BrowserWindow, shell, ipcMain } from 'electron'
 import { release } from 'os'
 import { join } from 'path'
 
@@ -15,23 +15,24 @@ if (!app.requestSingleInstanceLock()) {
 process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
 
 let win: BrowserWindow | null = null
+// Here, you can also use other preload
+const splash = join(__dirname, '../electron-preload/splash.js')
+// 🚧 Use ['ENV_NAME'] avoid vite:define plugin
+const url = `http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`
 
 async function createWindow() {
   win = new BrowserWindow({
     title: 'Main window',
     webPreferences: {
-      preload: join(__dirname, '../preload/index.cjs'),
+      preload: splash,
       nodeIntegration: true,
       contextIsolation: false,
     },
   })
 
   if (app.isPackaged) {
-    win.loadFile(join(__dirname, '../renderer/index.html'))
+    win.loadFile(join(__dirname, '../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()
   }
@@ -76,18 +77,16 @@ app.on('activate', () => {
 ipcMain.handle("open-win", (event, arg) => {
   const childWindow = new BrowserWindow({
     webPreferences: {
-      preload: join(__dirname, "../preload/index.cjs"),
+      preload: splash,
     },
-  });
+  })
 
   if (app.isPackaged) {
     childWindow.loadFile(join(__dirname, `../renderer/index.html`), {
       hash: `${arg}`,
     })
   } else {
-    // 🚧 Use ['ENV_NAME'] avoid vite:define plugin
-    const url = `http://${process.env["VITE_DEV_SERVER_HOST"]}:${process.env["VITE_DEV_SERVER_PORT"]}/#${arg}`
-    childWindow.loadURL(url);
+    childWindow.loadURL(`${url}/#${arg}`)
     // childWindow.webContents.openDevTools({ mode: "undocked", activate: true })
   }
-});
+})

packages/preload/loading.ts → electron-preload/splash.ts

@@ -1,10 +1,38 @@
+
+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)) {
+      return parent.appendChild(child)
+    }
+  },
+  remove(parent: HTMLElement, child: HTMLElement) {
+    if (Array.from(parent.children).find(e => e === child)) {
+      return parent.removeChild(child)
+    }
+  },
+}
+
 /**
  * https://tobiasahlin.com/spinkit
  * https://connoratherton.com/loaders
  * https://projects.lukehaas.me/css-loaders
  * https://matejkustec.github.io/SpinThatShit
  */
-export function useLoading() {
+function useLoading() {
   const className = `loaders-css__square-spin`
   const styleContent = `
 @keyframes square-spin {
@@ -43,25 +71,18 @@ export function useLoading() {
 
   return {
     appendLoading() {
-      safe.append(document.head, oStyle)
-      safe.append(document.body, oDiv)
+      safeDOM.append(document.head, oStyle)
+      safeDOM.append(document.body, oDiv)
     },
     removeLoading() {
-      safe.remove(document.head, oStyle)
-      safe.remove(document.body, oDiv)
+      safeDOM.remove(document.head, oStyle)
+      safeDOM.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)
-    }
-  },
-}
+// ----------------------------------------------------------------------
+
+const { appendLoading, removeLoading } = useLoading()
+window.removeLoading = removeLoading
+domReady().then(appendLoading)