Open Source Ecosystems

In short, @tomjs/vite-plugin-electron-renderer is responsible for polyfilling Electron, Node.js built-in modules.

Notice

This project is copied from vite-plugin-electron-renderer, only adding exports such as app and ipcMain to support [email protected]+

Install

pnpm add @tomjs/vite-plugin-electron-renderer -D
npm i @tomjs/vite-plugin-electron-renderer -D

Usage

This just modifies some of Vite's default config to make the Renderer process works.

import renderer from '@tomjs/vite-plugin-electron-renderer';

export default {
  plugins: [
    renderer(),
  ],
}

Using the third-part C/C++, esm package in the Renderer process.

import renderer from '@tomjs/vite-plugin-electron-renderer';

export default {
  plugins: [
    renderer({
      resolve: {
        // C/C++ modules must be pre-bundle
        serialport: { type: 'cjs' },
        // `esm` modules only if Vite does not pre-bundle them correctly
        got: { type: 'esm' },
      },
    }),
  ],
}

By the way, if a module is marked as type: 'cjs', the plugin just loads it in using require(). So it should be put into dependencies.

API (Define)

renderer(options: RendererOptions)

export interface RendererOptions {
  /**
   * Explicitly tell Vite how to load modules, which is very useful for C/C++ and `esm` modules
   * 
   * - `type.cjs` just wraps esm-interop
   * - `type.esm` pre-bundle to `cjs` and wraps esm-interop
   * 
   * @experimental
   */
  resolve?: {
    [module: string]: {
      type: 'cjs' | 'esm',
      /** Full custom how to pre-bundle */
      build?: (args: {
        cjs: (module: string) => Promise<string>,
        esm: (module: string, buildOptions?: import('esbuild').BuildOptions) => Promise<string>,
      }) => Promise<string>
    }
  }
}

Examples

quick-start

How to work

Load Electron and Node.js cjs-packages/built-in-modules (Schematic)

                  
  import { ipcRenderer } from 'electron'                   Vite dev server 
                  
                                                                    
                  1. Pre-Bundling electron module into              
                     node_modules/.vite-electron-renderer/electron  
                                                                    
                  2. HTTP(Request): electron module                 
                  > 
                                                                    
                  3. Alias redirects to                             
                     node_modules/.vite-electron-renderer/electron  
                                                                   
                     const { ipcRenderer } = require('electron')    
                     export { ipcRenderer }                         
                                                                    
                  4. HTTP(Response): electron module                
                  < 
                                                                    
                  
  import { ipcRenderer } from 'electron'                   Vite dev server

Dependency Pre-Bundling

In general. Vite will pre-bundle all third-party modules in a Web-based usage format, but it can not adapt to Electron Renderer process especially C/C++ modules. So we must be make a little changes for this.

//  https://github.com/electron-vite/vite-plugin-electron-renderer/blob/v0.13.0/src/optimizer.ts#L139-L142
const _M_ = require("serialport");

export default (_M_.default || _M_);
export const SerialPort = _M_.SerialPort;
// export other members ...