Merge pull request #89 from electron-vite/v0.10.0

V0.10.0

.gitignore

@@ -110,4 +110,3 @@ package-lock.json
 yarn.lock
 
 release
-packages/electron-renderer/plugins

CHANGELOG.md

@@ -1,3 +1,133 @@
+## 0.10.0 (2022-10-09)
+
+#### Break!
+
+This is a redesigned version of the API<sub><sup>(Only 3 APIs)</sub></sup>. Not compatible with previous versions!
+
+```ts
+export type Configuration = {
+  /**
+   * Shortcut of `build.lib.entry`
+   */
+  entry?: import('vite').LibraryOptions['entry']
+  /**
+   * Triggered when Vite is built.  
+   * If passed this parameter will not automatically start Electron App.  
+   * You can start Electron App through the `startup` function passed through the callback function.  
+   */
+  onstart?: (this: import('rollup').PluginContext, startup: (args?: string[]) => Promise<void>) => void
+  vite?: import('vite').InlineConfig
+}
+```
+
+In the past few weeks, some issues have been mentioned in many issues that cannot be solved amicably. So I refactored the API to avoid design flaws. But despite this, the new version will only be easier rather than harder.
+
+For example, some common problems in the following issues.
+
+#### Multiple entry files is not support #86
+
+  Thanks to [email protected]'s `lib.entry` supports multiple entries, which makes the configuration of the new version very simple. **So the `vite-plugin-electron@0.10.0` requires Vite at least `v3.2.0`**.
+
+  **e.g.**
+
+  ```ts
+  import electron from 'vite-plugin-electron'
+
+  // In plugins option
+  electron({
+    entry: [
+      'electron/entry-1.ts',
+      'electron/entry-2.ts',
+    ],
+  })
+
+  // Or use configuration array
+  electron([
+    {
+      entry: [
+        'electron/entry-1.ts',
+        'electron/entry-2.ts',
+      ],
+    },
+    {
+      entry: 'foo/bar.ts',
+    },
+  ])
+  ```
+
+#### require is not defined #48, #87
+
+  `vite-plugin-electron-renderer` will change `output.format` to `cjs` format by default<sub><sup>(This is because currently Electron@21 only supports CommonJs)</sub></sup>, which will cause the built code to use `require` to import modules, if the user `nodeIntegration` is not enabled in the Electron-Main process which causes the error `require is not defined` to be thrown.
+
+  `[email protected]` provides the `nodeIntegration` option. It is up to the user to decide whether to use Node.js(CommonJs).
+
+  **e.g.**
+
+  ```ts
+  import renderer from 'vite-plugin-electron-renderer'
+
+  // In plugins option
+  renderer({
+    nodeIntegration: true,
+  })
+  ```
+
+#### Use `Worker` in Electron-Main or Electron-Renderer #77, #81
+
+> You can see 👉 [examples/worker](https://github.com/caoxiemeihao/vite-plugin-electron/tree/main/examples/worker)
+
+- Use Worker in Electron-Main
+
+  **e.g.** <sub><sup>This looks the same as multiple entry</sub></sup>
+
+  ```ts
+  import electron from 'vite-plugin-electron'
+
+  // In plugins option
+  electron({
+    entry: [
+      'electron/main.ts',
+      'electron/worker.ts',
+    ],
+  })
+
+  // In electron/main.ts
+  new Worker(path.join(__dirname, './worker.js'))
+  ```
+
+- Use Worker in Electron-Renderer
+
+  **e.g.**
+
+  ```ts
+  import renderer, { worker } from 'vite-plugin-electron-renderer'
+
+  export default {
+    plugins: [
+      renderer({
+        // If you need use Node.js in Electron-Renderer process
+        nodeIntegration: true,
+      }),
+    ],
+    worker: {
+      plugins: [
+        worker({
+          // If you need use Node.js in Worker
+          nodeIntegrationInWorker: true,
+        }),
+      ],
+    },
+  }
+  ```
+
+#### TODO
+
+- [ ] There is no way to differentiate between Preload-Scripts, which will cause the entire Electron App to restart after the preload update, not the Electron-Renderer reload.
+
+#### PR
+
+https://github.com/electron-vite/vite-plugin-electron/pull/89
+
 ## 0.9.3 (2022-09-10)
 
 ~~*vite-plugin-electron*~~

examples/custom-start-electron-app/electron-builder.json5

@@ -0,0 +1,36 @@
+/**
+ * @see https://www.electron.build/configuration/configuration
+ */
+{
+  "appId": "YourAppID",
+  "asar": true,
+  "directories": {
+    "output": "release/${version}"
+  },
+  "files": [
+    "dist"
+  ],
+  "mac": {
+    "artifactName": "${productName}_${version}.${ext}",
+    "target": [
+      "dmg"
+    ]
+  },
+  "win": {
+    "target": [
+      {
+        "target": "nsis",
+        "arch": [
+          "x64"
+        ]
+      }
+    ],
+    "artifactName": "${productName}_${version}.${ext}"
+  },
+  "nsis": {
+    "oneClick": false,
+    "perMachine": false,
+    "allowToChangeInstallationDirectory": true,
+    "deleteAppDataOnUninstall": false
+  }
+}

examples/custom-start-electron-app/electron/main.ts

@@ -0,0 +1,13 @@
+import path from 'path'
+import { app, BrowserWindow } from 'electron'
+
+let win: BrowserWindow
+
+app.whenReady().then(() => {
+  win = new BrowserWindow()
+  if (app.isPackaged) {
+    win.loadFile(path.join(__dirname, '../index.html'))
+  } else {
+    win.loadURL(process.env.VITE_DEV_SERVER_URL)
+  }
+})

playground/usecase-in-renderer/index.html → examples/custom-start-electron-app/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/renderer.ts"></script>
   </body>
 </html>

examples/custom-start-electron-app/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "vite-plugin-electron-custom-start-electron-app",
+  "version": "0.0.0",
+  "main": "dist/electron/main.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/electron-vite/vite-plugin-electron.git",
+    "directory": "examples/custom-start-electron-app"
+  },
+  "author": "草鞋没号 <[email protected]>",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "tsc && vite build && electron-builder"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "electron": "^21.0.1",
+    "electron-builder": "^23.1.0",
+    "typescript": "^4.7.4",
+    "vite-plugin-electron": "workspace:*",
+    "vite": "^3.2.0-beta.0"
+  }
+}

examples/custom-start-electron-app/renderer.ts

@@ -0,0 +1,3 @@
+document.getElementById('app')!.innerHTML = `
+<h1>examples/custom-start-electron-app</h1>
+`

playground/usecase-in-renderer/tsconfig.json → examples/custom-start-electron-app/tsconfig.json

@@ -8,7 +8,6 @@
     "strict": true,
     "sourceMap": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
     "esModuleInterop": true,
     "noEmit": true,
     "noUnusedLocals": true,

examples/custom-start-electron-app/vite.config.ts

@@ -0,0 +1,19 @@
+import fs from 'fs'
+import { defineConfig } from 'vite'
+import electron from 'vite-plugin-electron'
+
+fs.rmSync('dist', { recursive: true, force: true })
+const cmds = process.argv.slice(2)
+const isdev = !cmds.length || cmds.includes('dev') || cmds.includes('serve')
+
+export default defineConfig({
+  plugins: [
+    electron({
+      entry: 'electron/main.ts',
+      onstart: isdev ? startup => {
+        /** Start Electron App */
+        startup(['.', '--no-sandbox'])
+      } : undefined,
+    }),
+  ],
+})

examples/nodeIntegration/.npmrc

@@ -0,0 +1,2 @@
+# pnpm
+shamefully-hoist=true

examples/nodeIntegration/electron/main.ts

@@ -0,0 +1,24 @@
+process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
+
+import path from 'path'
+import { app, BrowserWindow } from 'electron'
+
+let win: BrowserWindow | null = null
+
+app.whenReady().then(() => {
+  win = new BrowserWindow({
+    webPreferences: {
+      nodeIntegrationInWorker: true,
+      contextIsolation: false,
+      nodeIntegration: true,
+      webSecurity: false,
+    },
+  })
+
+  if (app.isPackaged) {
+    win.loadFile(path.join(__dirname, '../index.html'))
+  } else {
+    win.loadURL(process.env.VITE_DEV_SERVER_URL)
+    win.webContents.openDevTools()
+  }
+})

examples/nodeIntegration/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/renderer/index.ts"></script>
+  </body>
+</html>

playground/usecase-in-renderer/package.json → examples/nodeIntegration/package.json

@@ -1,29 +1,34 @@
 {
-  "name": "vite-plugin-electron-quick-start",
+  "name": "vite-plugin-electron-node-integration",
   "version": "0.0.0",
-  "description": "test vite-plugin-electron",
   "main": "dist/electron/main.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/electron-vite/vite-plugin-electron.git",
+    "directory": "examples/nodeIntegration"
+  },
+  "author": "草鞋没号 <[email protected]>",
+  "license": "MIT",
+  "private": true,
   "scripts": {
     "dev": "vite",
     "build": "vite build && electron-builder"
   },
-  "keywords": [],
-  "author": "草鞋没号 <[email protected]>",
-  "license": "ISC",
   "dependencies": {
     "serialport": "^10.4.0",
-    "sqlite3": "^5.0.9"
+    "sqlite3": "^5.1.2"
   },
   "devDependencies": {
     "@types/sqlite3": "^3.1.8",
-    "electron": "^19.0.8",
+    "electron": "^21.0.1",
     "electron-builder": "^23.1.0",
     "electron-store": "^8.0.2",
     "execa": "^6.1.0",
     "got": "^12.1.0",
     "node-fetch": "^3.2.8",
     "vite-plugin-electron": "workspace:*",
+    "vite-plugin-electron-renderer": "workspace:*",
     "vite-plugin-esmodule": "^1.4.1",
-    "vite": "^3.0.6"
+    "vite": "^3.2.0-beta.0"
   }
 }

examples/nodeIntegration/renderer/index.ts

@@ -0,0 +1,5 @@
+import './samples'
+
+document.getElementById('app')!.innerHTML = `
+<h1>examples/nodeIntegration</h1>
+`

playground/usecase-in-main/tsconfig.json → examples/nodeIntegration/tsconfig.json

@@ -8,15 +8,14 @@
     "strict": true,
     "sourceMap": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
     "esModuleInterop": true,
     "noEmit": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
-    "skipLibCheck": true
-  },
-  "types": [
-    "vite-plugin-electron/electron-env"
-  ]
+    "skipLibCheck": true,
+    "types": [
+      "vite-plugin-electron/electron-env"
+    ]
+  }
 }