vite-plugin-electron-renderer - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

CHANGELOG.md

 
+## [2022-07-01] v0.5.1
+
+- ec224db refactor: optimize code
+- f0efdfb fix(🐞): exclude ESM package
+- f3e6b2c chore: optimize code
+- 66df43b docs: update
+- e2afb1e docs: `Electron-Renderer(vite serve)` flow chart
+- 329056f docs: `dependencies` vs `devDependencies`
+- d9734c9 Update README.md
+
 ## [2022-06-28] v0.5.0
@@ -3,0 +13,0 @@

package.json

 {
   "name": "vite-plugin-electron-renderer",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Support use Node.js API in Electron-Renderer",
@@ -5,0 +5,0 @@ "main": "index.js",

plugins/use-node.js/index.d.ts

@@ -9,3 +9,3 @@ import { Plugin } from 'vite';
    * Explicitly include/exclude some CJS modules  
-   * `modules` includes `dependencies` of package.json, Node.js's `builtinModules` and `electron`  
+   * `modules` includes `dependencies` of package.json  
    */
@@ -12,0 +12,0 @@ resolve?: (modules: string[]) => typeof modules | undefined

plugins/use-node.js/index.js

@@ -9,3 +9,6 @@ const fs = require('fs');
 module.exports = function useNodeJs(options = {}) {
-  let modules = [];
+  const builtins = [];
+  const dependencies = [];
+  const ESM_deps = [];
+  const CJS_modules = []; // builtins + dependencies
   const moduleCache = new Map();
@@ -24,3 +27,3 @@
         // TODO: Compatible ESM module
-        // If the package is ESM module, like node-fetch, execa
+        // If the package is ESM module, like node-fetch
         if (!config.resolve.conditions) config.resolve.conditions = ['node'];
@@ -51,3 +54,3 @@
         let external = config.build.rollupOptions.external;
-        const electronBuiltins = modules.concat('electron');
+        const electronBuiltins = CJS_modules.concat('electron');
         if (
@@ -88,7 +91,13 @@ Array.isArray(external) ||
     configResolved(config) {
-      modules = initModules(config, options);
+      const resolved = resolveModules(config, options);
+      builtins.push(...resolved.builtins);
+      dependencies.push(...resolved.dependencies);
+      ESM_deps.push(...resolved.ESM_deps);
+      CJS_modules.push(...builtins.concat(dependencies));
     },
     resolveId(source) {
+      // TODO: Identify ESM
+
       const id = source.replace('node:', '');
-      if (modules.includes(id)) return id;
+      if (CJS_modules.includes(id)) return id;
     },
@@ -136,3 +145,3 @@ load(id) {
 
-      if (modules.includes(id)) {
+      if (CJS_modules.includes(id)) {
         const cache = moduleCache.get(id);
@@ -162,27 +171,54 @@ if (cache) return cache;
 /**
- * @type {(config: import('vite').ResolvedConfig, options: import('.').Options) => string[]}
+ * @type {(config: import('vite').ResolvedConfig, options: import('.').Options) => { builtins: string[]; dependencies: string[]; ESM_deps: string[]; }}
  */
-function initModules(config, options) {
-  const builtins = builtinModules.filter(e => !e.startsWith('_')).map(e => [e, `node:${e}`]).flat();
+function resolveModules(config, options) {
+  const root = config.root;
+  const cwd = process.cwd();
+  const builtins = builtinModules.filter(e => !e.startsWith('_')); builtins.push(...builtins.map(m => [m, `node:${m}`]));
   // dependencies of package.json
-  const dependencies = [];
-  let modules = [];
+  let dependencies = [];
+  // dependencies(ESM) of package.json
+  const ESM_deps = [];
 
   // Resolve package.json dependencies
-  let pkgId = path.join(config.root, 'package.json');
-  if (!fs.existsSync(pkgId)) {
-    pkgId = path.join(process.cwd(), 'package.json');
-  }
-  if (fs.existsSync(pkgId)) {
+  const pkgId = lookupFile('package.json', [root, cwd])
+  if (pkgId) {
     const pkg = require(pkgId);
-    // TODO: Nested package name
-    dependencies.push(...Object.keys(pkg.dependencies || {}));
+    for (const package of Object.keys(pkg.dependencies || {})) {
+      const _pkgId = lookupFile(
+        'package.json',
+        [root, cwd].map(r => `${r}/node_modules/${package}`),
+      );
+      if (_pkgId) {
+        const _pkg = require(_pkgId);
+        if (_pkg.type === 'module') {
+          ESM_deps.push(package);
+          continue;
+        }
+      }
+
+      // TODO: Nested package name
+      dependencies.push(package);
+    }
   }
-  modules = builtins.concat(dependencies);
+
   if (options.resolve) {
-    const tmp = options.resolve(modules);
-    if (tmp) modules = tmp;
+    const tmp = options.resolve(dependencies);
+    if (tmp) dependencies = tmp;
   }
 
-  return modules;
+  return {
+    builtins,
+    dependencies,
+    ESM_deps,
+  };
 }
+
+function lookupFile(filename, paths) {
+  for (const p of paths) {
+    const filepath = path.join(p, filename);
+    if (fs.existsSync(filepath)) {
+      return filepath;
+    }
+  }
+}

README.md

@@ -59,31 +59,65 @@ # vite-plugin-electron-renderer
 
-In general, Vite may not correctly build Node.js packages, especially C/C++ native modules, but Vite can load them as external packages. So, put your Node.js package in `dependencies`. Unless you know how to properly build them with Vite.  
-*通常的，Vite 可能不能正确的构建 Node.js 的包，尤其是 C/C++ 原生模块，但是 Vite 可以将它们以外部包的形式加载。所以，请将 Node.js 包放到 `dependencies` 中。除非你知道如何用 Vite 正确的构建它们。*  
+In general, Vite may not correctly build Node.js packages, especially C/C++ native modules, but Vite can load them as external packages. So, put your Node.js package in `dependencies`. Unless you know how to properly build them with Vite.
 
+By default, `vite-plugin-electron-renderer` treats packages in `dependencies` as `external` modules. During development, a virtual module in ESM format is generated by `load-hook` to ensure that it can work properly. It is inserted into `rollupOptions.external` during build time. If you don't want this, you can control the behavior with `options.resolve()`. 
+
+*通常的，Vite 可能不能正确的构建 Node.js 的包，尤其是 C/C++ 原生模块，但是 Vite 可以将它们以外部包的形式加载。所以，请将 Node.js 包放到 `dependencies` 中。除非你知道如何用 Vite 正确的构建它们。*
+
+*默认情况下，`vite-plugin-electron-renderer` 会将 `dependencies` 中的包视为 `external` 模块。在开发期间会通过 `load-hook` 生成一个 ESM 格式的虚拟模块，以保障其能够正常工作。在构建期间会将其插入到 `rollupOptions.external` 中。如果你不希望这样，你可以通过 `options.resolve()` 来控制该行为。*
+
 **e.g.**
 
-Electron-Main
+###### Electron-Main
 
 ```js
-import { ipcMain } from 'electron'
+import { readFile } from 'fs'
 ↓
-const { ipcMain } = require('electron')
+const { readFile } = require('fs')
 ```
 
-Electron-Renderer
+###### Electron-Renderer(vite build)
 
 ```js
-import { ipcRenderer } from 'electron'
+import { readFile } from 'fs'
 ↓
-// Generate a virtual module by load-hook
-const electron = require('electron')
-export const ipcRenderer = electron.ipcRenderer
-↓
-// The following code snippet will work in Electron-Renderer, 
-// and it doesn't seem to have changed :)
-import { ipcRenderer } from 'electron'
+const { readFile } = require('fs')
 ```
 
-[See more about Vite loading Node.js package 👉](https://github.com/electron-vite/vite-plugin-electron-renderer/blob/32acf9a0ed2143a4f05cbbce351b26c01f488490/index.js#L45)
+###### Electron-Renderer(vite serve)
 
+```
+┏———————————————————————————————┓                                ┏—————————————————┓
+│ import { readFile } from 'fs' │                                │ Vite dev server │
+┗———————————————————————————————┛                                ┗—————————————————┛
+               │                                                          │
+               │ 1. HTTP(Request): fs module                              │
+               │ ———————————————————————————————————————————————————————> │
+               │                                                          │
+               │                                                          │
+               │ 2. Intercept in load-hook(vite-plugin-electron-renderer) │
+               │ 3. Generate a virtual module(fs)                         │
+               │                                                          │
+               │    const _M_ = require('fs')                             │
+               │    export const readFile = _M_.readFile                  │
+               │                                                          │
+               │                                                          │
+               │ 4. HTTP(Response): fs module                             │
+               │ <——————————————————————————————————————————————————————— │
+               │                                                          │
+┏———————————————————————————————┓                                ┏—————————————————┓
+│ import { readFile } from 'fs' │                                │ Vite dev server │
+┗———————————————————————————————┛                                ┗—————————————————┛
+```
+
+**There are three cases that will be intercepted by Vite dev server**
+
+  *You can control the behavior with `options.resolve()`*
+
+  1. `electron` module
+  2. Nod.js builtin modules
+  3. Packages in `dependencies`
+
+
+> [👉 See Vite loading Node.js package source code.](https://github.com/electron-vite/vite-plugin-electron-renderer/blob/2bb38a1dbd50b462d33cbc314bb5db71119b52cf/plugins/use-node.js/index.js#L91)
+
 ## How to work
@@ -97,7 +131,5 @@
 // Actually will redirect by `resolve.alias`
-import { ipcRenderer } from 'vite-plugin-electron-renderer/electron-renderer.js'
+import { ipcRenderer } from 'vite-plugin-electron-renderer/plugins/use-node.js/electron-renderer.js'
 ```
 
-[Using Node.js API and package in Electron-Renderer 👉](https://github.com/electron-vite/vite-plugin-electron-renderer/blob/4a2620d9ff9b3696cf55c1c5d4f2acdcf1ff806a/index.js#L37)
-
 #### Config presets
@@ -104,0 +136,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20664

increased by25.44%

Lines of code

326

increased by10.88%

Number of lines in readme file

149

increased by27.35%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low supply chain risk alerts

5

increased by25%

No dependency changes