[WIP] feat: electron plugin

.npmrc

@@ -0,0 +1,2 @@
+electron-mirror=https://npm.taobao.org/mirrors/electron/
+electron-builder-binaries-mirror=http://npm.taobao.org/mirrors/electron-builder-binaries/

packages/plugin-electron/README.md

@@ -0,0 +1,19 @@
+# @umijs/plugin-electron
+
+> @umijs/plugin-electron.
+
+See our website [@umijs/plugin-electron](https://umijs.org/plugins/plugin-electron) for more information.
+
+## Install
+
+Using npm:
+
+```bash
+$ npm install --save-dev @umijs/plugin-electron
+```
+
+or using yarn:
+
+```bash
+$ yarn add @umijs/plugin-electron --dev
+```

packages/plugin-electron/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@umijs/plugin-electron",
+  "version": "0.1.0-9",
+  "description": "@umijs/plugin-electron",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umijs/plugins"
+  },
+  "keywords": [
+    "umi"
+  ],
+  "authors": [
+    "xiefengnian <[email protected]> (https://github.com/xiefengnian)"
+  ],
+  "license": "MIT",
+  "bugs": "http://github.com/umijs/plugins/issues",
+  "homepage": "https://github.com/umijs/plugins/tree/master/packages/plugin-dva#readme",
+  "peerDependencies": {
+    "umi": "3.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/plugin-syntax-top-level-await": "^7.14.5",
+    "babel-plugin-import-to-window-require": "*",
+    "electron": "^14",
+    "electron-builder": "22.10.5",
+    "father-build": "1.20.5-8",
+    "ora": "^5",
+    "rimraf": "^3.0.2"
+  },
+  "devDependencies": {
+    "@types/rimraf": "^3.0.2"
+  }
+}

packages/plugin-electron/src/buildElectron.ts

@@ -0,0 +1,41 @@
+import { rimraf } from '@umijs/utils';
+import {
+  build,
+  Platform,
+  createTargets,
+  Configuration,
+} from 'electron-builder';
+import lodash from 'lodash';
+import { join } from 'path';
+import { TMP_DIR_PRODUCTION } from './constants';
+
+const builderConfig = require('./config/electron-builder.config');
+export const buildElectron = (customBuilderConfig?: Configuration) => {
+  rimraf.sync(join(process.cwd(), 'dist'));
+
+  const targets =
+    process.platform === 'darwin'
+      ? [Platform.MAC, Platform.WINDOWS]
+      : [Platform.WINDOWS];
+
+  return build({
+    targets: createTargets(targets),
+    config: lodash.merge(
+      {
+        directories: { output: '../dist' },
+      } as Configuration,
+      {
+        dmg: {
+          title: `\${productName}-\${version}`,
+          artifactName: `\${productName}-\${version}.\${ext}`,
+        },
+        nsis: {
+          artifactName: `\${productName}-setup-\${version}.\${ext}`,
+        },
+      } as Configuration,
+      builderConfig as unknown as Configuration,
+      customBuilderConfig || {},
+    ),
+    projectDir: join(process.cwd(), TMP_DIR_PRODUCTION),
+  });
+};

packages/plugin-electron/src/config/electron-builder.config.js

@@ -0,0 +1,23 @@
+import { join } from 'path';
+
+const { productName } = require(join(process.cwd(), 'package.json'));
+
+module.exports = {
+  electronDownload: {
+    mirror: 'https://registry.npmmirror.com/binary.html?path=electron/',
+  },
+  productName,
+  files: ['./**'],
+  mac: {
+    category: 'public.app-category.developer-tools',
+    target: 'dmg',
+  },
+  dmg: {},
+  win: {
+    target: 'nsis',
+  },
+  nsis: {
+    oneClick: false,
+    allowToChangeInstallationDirectory: true,
+  },
+};

packages/plugin-electron/src/config/father.js

@@ -0,0 +1,74 @@
+const { resolve } = require('path');
+const { writeFileSync } = require('fs');
+const { getPkgName } = require('../utils/getPkgName');
+
+const TMP_DIR = '.electron';
+const TMP_DIR_PRODUCTION = '.electron-production';
+
+const getTmpDir = (mode) => {
+  return mode === 'development' ? TMP_DIR : TMP_DIR_PRODUCTION;
+};
+
+const deps = new Set(); // 搜集所有依赖
+const depsOfFile = {}; // 搜集文件依赖
+const filesOfDep = {}; // 搜集依赖所在文件
+/**
+ * @param {'production' | 'development'} mode
+ * @param {Set} toGenerateDeps
+ */
+const generateDeps = (mode, toGenerateDeps) => {
+  writeFileSync(
+    resolve(process.cwd(), `${getTmpDir(mode)}/dependencies.json`),
+    JSON.stringify(
+      {
+        all: Array.from(toGenerateDeps),
+        files: Object.keys(depsOfFile).reduce((memo, current) => {
+          return {
+            ...memo,
+            [current]: Array.from(depsOfFile[current]),
+          };
+        }, {}),
+        deps: Object.keys(filesOfDep).reduce((memo, current) => {
+          return {
+            ...memo,
+            [current]: Array.from(filesOfDep[current]),
+          };
+        }, {}),
+      },
+      null,
+      2,
+    ),
+  );
+};
+
+export default (mode) => ({
+  entry: resolve(process.cwd(), 'src/main/index.ts'),
+  cjs: {
+    type: 'babel',
+  },
+  target: 'node',
+  disableTypeCheck: true,
+  extraBabelPlugins: [
+    [
+      require('../features/package-analyze/babel-plugin-import-analyze'),
+      {
+        onCollect: (filename, depName) => {
+          let finalDepName = getPkgName(depName);
+          if (!finalDepName) {
+            return;
+          }
+          deps.add(finalDepName);
+          if (!depsOfFile[filename]) {
+            depsOfFile[filename] = new Set();
+          }
+          if (!filesOfDep[finalDepName]) {
+            filesOfDep[finalDepName] = new Set();
+          }
+          filesOfDep[finalDepName].add(filename);
+          depsOfFile[filename].add(finalDepName);
+          generateDeps(mode, deps);
+        },
+      },
+    ],
+  ],
+});

packages/plugin-electron/src/constants.ts

@@ -0,0 +1,2 @@
+export const TMP_DIR = '.electron';
+export const TMP_DIR_PRODUCTION = '.electron-production';

packages/plugin-electron/src/electronManager.ts

@@ -0,0 +1,45 @@
+import electron from 'electron';
+import proc, { ChildProcess } from 'child_process';
+import yParser from 'yargs-parser';
+import { log } from './utils';
+const args = yParser(process.argv.slice(2));
+
+export class ElectronProcessManager {
+  electronProcess: ChildProcess | undefined;
+  private cwd: string;
+  constructor(cwd: string | undefined = process.cwd()) {
+    this.cwd = cwd;
+  }
+  start() {
+    this.kill();
+    const childProc = proc.spawn(
+      electron as unknown as string,
+      args.inspect ? [`--inspect=${args.inspect}`, this.cwd] : [this.cwd],
+      {
+        stdio: 'pipe',
+        env: {
+          ...process.env,
+          FORCE_COLOR: '1',
+        },
+        cwd: this.cwd,
+      },
+    );
+
+    childProc.on('error', (err) => {
+      log.error('electron process error!');
+      console.log(err);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      childProc.kill();
+      process.exit(1);
+    });
+
+    childProc.stdout?.pipe(process.stdout);
+    childProc.stderr?.pipe(process.stderr);
+
+    this.electronProcess = childProc;
+  }
+
+  kill() {
+    this.electronProcess?.kill();
+  }
+}

packages/plugin-electron/src/fatherBuild.ts

@@ -0,0 +1,82 @@
+import { existsSync, readFileSync } from 'fs';
+import path, { resolve } from 'path';
+import { TMP_DIR, TMP_DIR_PRODUCTION } from './constants';
+// @ts-ignore
+import build from 'father-build';
+import fatherBuildArgs from './config/father';
+
+export type Mode = 'development' | 'production';
+
+export const getTmpDir = (mode: Mode) => {
+  return mode === 'development' ? TMP_DIR : TMP_DIR_PRODUCTION;
+};
+
+type FatherBuildCliOpts = {
+  configPath?: string;
+  src?: string;
+  output?: string;
+  mode: Mode;
+};
+
+export type WatchReturnType = {
+  exit: () => void;
+};
+
+type WatchOpts = {
+  beforeBuild?: () => void;
+  onBuildComplete?: () => void;
+};
+class FatherBuildCli {
+  private opts: FatherBuildCliOpts;
+  constructor(opts: FatherBuildCliOpts) {
+    this.opts = {
+      configPath: opts.configPath,
+      src: opts.src || resolve(process.cwd(), 'src', 'main'),
+      output:
+        opts.output || resolve(process.cwd(), getTmpDir(opts.mode), 'main'),
+      mode: opts.mode,
+    };
+  }
+  private getBuildArgs = () => {
+    console.log('get father build args,mode: ', this.opts.mode);
+    return {
+      ...fatherBuildArgs(this.opts.mode),
+      silent: true,
+      src: this.opts.src,
+      output: this.opts.output,
+    };
+  };
+  watch = async (opts: WatchOpts): Promise<{ exit: () => void }> => {
+    const dispose = await build({
+      watch: true,
+      beforeBuild: opts.beforeBuild,
+      onBuildComplete: opts.onBuildComplete,
+      cwd: process.cwd(),
+      buildArgs: this.getBuildArgs(),
+    });
+    return {
+      exit: () => {
+        dispose();
+      },
+    };
+  };
+  build = async () => {
+    try {
+      await build({
+        cwd: process.cwd(),
+        buildArgs: this.getBuildArgs(),
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  static getUserConfig(): string | undefined {
+    const userConfigPath = path.resolve(process.cwd(), '.fatherrc.js');
+    if (existsSync(userConfigPath)) {
+      return readFileSync(userConfigPath, 'utf-8');
+    }
+    return;
+  }
+}
+
+export { FatherBuildCli };

packages/plugin-electron/src/features/package-analyze/babel-plugin-import-analyze.js

@@ -0,0 +1,34 @@
+module.exports = function () {
+  return {
+    visitor: {
+      CallExpression: {
+        enter(path, state) {
+          const { onCollect } = state.opts;
+          const { node } = path;
+          // require & import()
+          if (
+            (node.callee.type === 'Identifier' &&
+              node.callee.name === 'require') ||
+            node.callee.type === 'Import'
+          ) {
+            const dependencies = node.arguments
+              .map(({ type, value }) => {
+                if (type === 'StringLiteral') return value;
+              })
+              .filter(Boolean);
+            if (dependencies[0]) {
+              onCollect(state.filename, dependencies[0]);
+            }
+          }
+        },
+      },
+      ImportDeclaration: {
+        enter(path, state) {
+          const { node } = path;
+          const { onCollect } = state.opts;
+          onCollect(state.filename, node.source.value);
+        },
+      },
+    },
+  };
+};