Merge pull request #15 from caoxiemeihao/v0.4.2

V0.4.2

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.4.2 (2023-03-12)
+
+#### Main Changed
+
+c0a9c54 feat: support use Node.js in Renderer process #14
+
 ## 0.4.1 (2023-02-18)
 
 #### Main Changed

README.md

@@ -22,13 +22,13 @@
 
 ```sh
 # Using pnpm
-pnpm add -D nuxt-electron vite-electron-plugin electron electron-builder
+pnpm add -D nuxt-electron vite-electron-plugin vite-plugin-electron-renderer electron electron-builder
 
 # Using yarn
-yarn add --dev nuxt-electron vite-electron-plugin electron electron-builder
+yarn add --dev nuxt-electron vite-electron-plugin vite-plugin-electron-renderer electron electron-builder
 
 # Using npm
-npm install --save-dev nuxt-electron vite-electron-plugin electron electron-builder
+npm install --save-dev nuxt-electron vite-electron-plugin vite-plugin-electron-renderer electron electron-builder
 ```
 
 2. Add `nuxt-electron` to the `modules` section of `nuxt.config.ts`
@@ -79,6 +79,22 @@ export default defineNuxtConfig({
 })
 ```
 
+Use Node.js in Renderer process
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    'nuxt-electron',
+  ],
+  electron: {
+    /**
+     * @see https://github.com/electron-vite/vite-plugin-electron-renderer
+     */
+    renderer: {},
+  },
+})
+```
+
 ## Recommend Structure
 
 Let's use the official [nuxt-starter-v3](https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3) template as an example

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-electron",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Nuxt Integration with Electron",
   "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
@@ -9,6 +9,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.cjs"
     }
   },
   "repository": {
@@ -25,15 +30,25 @@
   },
   "peerDependencies": {
     "esbuild": "*",
-    "vite-electron-plugin": "*"
+    "vite-electron-plugin": "*",
+    "vite-plugin-electron-renderer": "*"
+  },
+  "peerDependenciesMeta": {
+    "esbuild": {
+      "optional": true
+    },
+    "vite-plugin-electron-renderer": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/node": "^18.13.0",
     "esbuild": "^0.17.8",
     "nuxt": "^3.2.0",
     "typescript": "^4.9.5",
     "vite": "^4.1.1",
-    "vite-electron-plugin": "^0.7.4"
+    "vite-electron-plugin": "^0.7.4",
+    "vite-plugin-electron-renderer": "^0.12.1"
   },
   "files": [
     "electron-env.d.ts",

src/cjs-shim.ts

@@ -0,0 +1,9 @@
+export default <import('nitropack/dist/runtime').NitroAppPlugin>(nitro => {
+  // https://github.com/nuxt/nuxt/issues/14195#issuecomment-1397369535
+  // https://github.com/nuxt/nuxt/blob/v3.2.3/packages/nuxt/src/core/runtime/nitro/renderer.ts#L300-L301
+  nitro.hooks.hook('render:html', html => {
+    // fix(🐞): `exports is not defined` in "use strict"
+    const exportsShim = `<script id="shim-exports">var exports = typeof module !== 'undefined' ? module.exports : {};</script>`
+    html.head.push(exportsShim)
+  })
+}) 

src/index.ts

@@ -1,3 +1,5 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
 import { type AddressInfo } from 'net'
 import { defineNuxtModule } from '@nuxt/kit'
 import {
@@ -7,10 +9,19 @@ import {
   startup,
 } from 'vite-electron-plugin'
 
+const cjs__dirname = typeof __dirname === 'undefined'
+  ? path.dirname(fileURLToPath(import.meta.url))
+  : __dirname
+
 // Fix tsc build error
 import { NuxtModule } from '@nuxt/schema'
 
-export interface ElectronOptions extends Partial<Configuration> { }
+export interface ElectronOptions extends Partial<Configuration> {
+  /**
+   * @see https://github.com/electron-vite/vite-plugin-electron-renderer
+   */
+  renderer?: Parameters<typeof import('vite-plugin-electron-renderer').default>[0],
+}
 
 export default defineNuxtModule<ElectronOptions>({
   meta: {
@@ -24,7 +35,7 @@ export default defineNuxtModule<ElectronOptions>({
     include: ['electron'],
     outDir: 'dist-electron',
   },
-  setup(options, nuxt) {
+  async setup(options, nuxt) {
     const isProduction = process.env.NODE_ENV === 'production'
 
     // Force to SPA mode always since we don't need SSR for a desktop app.
@@ -43,6 +54,18 @@ export default defineNuxtModule<ElectronOptions>({
       nuxt.options.router.options.hashMode ??= true // Avoid 404 errors
     }
 
+    // Use Node.js in Renderer process
+    if (options.renderer) {
+      // For Vite
+      nuxt.options.vite.plugins ??= []
+      nuxt.options.vite.plugins.push((await import('vite-plugin-electron-renderer')).default(options.renderer))
+
+      // TODO: For Webpack
+
+      nuxt.options.nitro.plugins ??= []
+      nuxt.options.nitro.plugins.push(path.join(cjs__dirname, 'cjs-shim')) // #14
+    }
+
     nuxt.hooks.addHooks({
       // For development
       listen(server, listener) {

tsconfig.build.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "outDir": "types"
   },
-  "include": ["src/index.ts", "electron-env.d.ts"]
+  "include": ["src/*.ts", "electron-env.d.ts"]
 }

vite.config.ts

@@ -9,7 +9,10 @@ export default defineConfig({
   build: {
     minify: false,
     lib: {
-      entry: 'src/index.ts',
+      entry: {
+        index: 'src/index.ts',
+        'cjs-shim': 'src/cjs-shim.ts',
+      },
       formats: ['cjs', 'es'],
       fileName: format => format === 'es' ? '[name].mjs' : '[name].cjs',
     },
@@ -20,6 +23,7 @@ export default defineConfig({
         'esbuild',
         'vite',
         'vite-electron-plugin',
+        'vite-plugin-electron-renderer',
         ...builtinModules,
         ...builtinModules.map(m => `node:${m}`),
         ...Object.keys(pkg.dependencies ?? {}),