netless-io · BlackHole1 · Jan 14, 2022 · Dec 12, 2021 · Dec 18, 2021 · Dec 18, 2021
diff --git a/desktop/renderer-app/index.html b/desktop/renderer-app/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>Flat</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.ts"></script>
+  </body>
+</html>
diff --git a/desktop/renderer-app/package.json b/desktop/renderer-app/package.json
@@ -24,6 +24,7 @@
     "axios": "^0.21.2",
     "classnames": "^2.3.1",
     "date-fns": "^2.22.1",
+    "eventemitter3": "^4.0.7",
     "extract-zip": "^2.0.1",
     "fs-extra": "^9.0.1",
     "i18next": "^20.3.1",
@@ -79,6 +80,8 @@
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
+    "@vitejs/plugin-react-refresh": "^1.3.3",
+    "esbuild": "^0.12.20",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-app": "^6.2.2",
     "eslint-webpack-plugin": "^3.0.1",
@@ -96,22 +99,27 @@
     "react-refresh": "^0.10.0",
     "react-resize-detector": "^6.7.5",
     "react-transition-group": "^4.4.2",
+    "rollup-plugin-visualizer": "^5.5.2",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.1.2",
     "thread-loader": "^3.0.4",
     "ts-loader": "^9.1.2",
     "typescript": "^4.2.4",
     "url-loader": "^4.1.1",
+    "vite": "^2.5.0",
+    "vite-plugin-eslint": "^1.3.0",
     "webpack": "^5.37.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-merge": "^5.7.3"
   },
   "scripts": {
-    "start": "cross-env NODE_ENV=development node scripts/start.js",
-    "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.prod.js",
-    "build:analyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack/webpack.prod.js",
+    "start:webpack": "cross-env NODE_ENV=development node scripts/start.js",
+    "start": "cross-env NODE_ENV=development vite",
+    "build": "cross-env NODE_ENV=production NODE_OPTIONS=\"--max-old-space-size=6144\" vite build",
+    "build:analyzer": "cross-env NODE_ENV=production ANALYZER=true NODE_OPTIONS=\"--max-old-space-size=6144\" vite build",
+    "build:webpack:analyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack/webpack.prod.js",
     "lint": "lint-staged"
   }
 }
diff --git a/desktop/renderer-app/scripts/vite-plugin-electron/index.ts b/desktop/renderer-app/scripts/vite-plugin-electron/index.ts
@@ -0,0 +1,72 @@
+import { builtinModules } from "module";
+import { Plugin as VitePlugin } from "vite";
+import { cjs2esm } from "./utils";
+import { options } from "./template/options";
+
+// based on https://github.com/caoxiemeihao/vite-plugins/blob/main/packages/electron/src/index.ts
+
+/**
+ * The externals will be work on 'viteConfig.build.rollupOptions.external', 'viteConfig.optimizeDeps.exclude' option.
+ * and we should external ['electron', ...require('module').builtinModules]
+ */
+const externals = ["electron", ...builtinModules];
+
+export function electron(): VitePlugin[] {
+    const nodeModelResolve: VitePlugin = {
+        name: "vite-plugin-electron:node-model-resolve",
+        apply: "serve",
+        transform(_code, id) {
+            return cjs2esm(id, options);
+        },
+    };
+
+    const builtinModulesResolve: VitePlugin = {
+        apply: "serve",
+        name: "vite-plugin-electron:builtinModules-resolve",
+        transform(_code, id) {
+            /**
+             * vite not support node build in model so will throw Error to tell `node api is not support in browser`
+             * We need transform and overwrite error.
+             * e.g:
+             *      `import path from 'path'`
+             * vite will analyze this import statement and replace to
+             * `throw new Error('path is not support in browser!')`
+             */
+            if (!id.startsWith("__vite-browser-external:")) {
+                return null;
+            }
+
+            const moduleName = id.split(":")[1];
+
+            if (!builtinModules.includes(moduleName)) {
+                return null;
+            }
+
+            // require all project import `nodeModule`
+            const nodeModule = require(moduleName);
+            const exportKeys = Object.keys(nodeModule);
+            const requireTpl = `const __nodeModule = require("${moduleName}");`;
+            const declaresTpl = exportKeys
+                .map(key => `const ${key} = __nodeModule.${key};`)
+                .join("\n");
+
+            // transform all `nodeModule` to ESM grammar
+            const exportTpl = `export { ${exportKeys.join(", ")} };`;
+            const exportDefault = `export default { ${exportKeys.join(", ")} };`;
+
+            const nodeModuleCode = ["", requireTpl, declaresTpl, exportTpl, exportDefault, ""].join(
+                "\n",
+            );
+
+            return {
+                code: nodeModuleCode,
+                map: null,
+            };
+        },
+    };
+
+    return [builtinModulesResolve, nodeModelResolve];
+}
+
+electron.externals = externals;
+export default electron;
diff --git a/desktop/renderer-app/scripts/vite-plugin-electron/template/electron.template.js b/desktop/renderer-app/scripts/vite-plugin-electron/template/electron.template.js
@@ -0,0 +1,22 @@
+// We will use hack method to bundle file and export it with ESM
+const {
+    clipboard,
+    nativeImage,
+    shell,
+    contextBridge,
+    crashReporter,
+    ipcRenderer,
+    webFrame,
+    desktopCapturer,
+} = require('electron');
+export {
+    clipboard,
+    nativeImage,
+    shell,
+    contextBridge,
+    crashReporter,
+    ipcRenderer,
+    webFrame,
+    desktopCapturer,
+}
+export default { clipboard, nativeImage, shell, contextBridge, crashReporter, ipcRenderer, webFrame, desktopCapturer };
diff --git a/desktop/renderer-app/scripts/vite-plugin-electron/template/events.template.js b/desktop/renderer-app/scripts/vite-plugin-electron/template/events.template.js
@@ -0,0 +1,8 @@
+// We will use hack method to bundle file and export it with ESM
+const {
+    EventEmitter,
+} = require('events');
+export {
+    EventEmitter,
+}
+export default { EventEmitter };
diff --git a/desktop/renderer-app/scripts/vite-plugin-electron/template/extract-zip.template.js b/desktop/renderer-app/scripts/vite-plugin-electron/template/extract-zip.template.js
@@ -0,0 +1,3 @@
+// We will use hack method to bundle file and export it with ESM
+const extract = require('fs-extra');
+export default extract;
diff --git a/desktop/renderer-app/scripts/vite-plugin-electron/template/fs-extra.template.js b/desktop/renderer-app/scripts/vite-plugin-electron/template/fs-extra.template.js
@@ -0,0 +1,13 @@
+// We will use hack method to bundle file and export it with ESM
+const {
+    copy,
+    ensureDir,
+    remove,
+    pathExists ,
+} = require('fs-extra');
+export {
+    copy,
+    ensureDir,
+    remove,
+    pathExists,
+}
diff --git a/desktop/renderer-app/scripts/vite-plugin-electron/template/options.ts b/desktop/renderer-app/scripts/vite-plugin-electron/template/options.ts
@@ -0,0 +1,29 @@
+import { getTemplate } from "../utils";
+
+const electronCode = getTemplate("./template/electron.template.js");
+const eventsCode = getTemplate("./template/events.template.js");
+const fsExtraCode = getTemplate("./template/fs-extra.template.js");
+const extractZipCode = getTemplate("./template/extract-zip.template.js");
+
+export const options = [
+    {
+        entryPoints: "electron/index.js",
+        code: electronCode,
+        shouldBundle: false,
+    },
+    {
+        entryPoints: "events/events.js",
+        code: eventsCode,
+        shouldBundle: false,
+    },
+    {
+        entryPoints: "fs-extra/lib/index.js",
+        code: fsExtraCode,
+        shouldBundle: true,
+    },
+    {
+        entryPoints: "extract-zip/index.js",
+        code: extractZipCode,
+        shouldBundle: true,
+    },
+];
diff --git a/desktop/renderer-app/scripts/vite-plugin-electron/utils.ts b/desktop/renderer-app/scripts/vite-plugin-electron/utils.ts
@@ -0,0 +1,54 @@
+import { build, OutputFile } from "esbuild";
+import { readFileSync } from "fs";
+import { join } from "path";
+
+// e.g:
+// flat/node_modules/electron/index.js?v=19cea64f => flat/node_modules/electron/index.js
+const removeQueryString = (url: string): string => url.replace(/\?.*$/s, "").replace(/#.*$/s, "");
+
+const bundleModel = (filePath: string): Promise<OutputFile[]> => {
+    return build({
+        entryPoints: [filePath],
+        bundle: true,
+        outfile: "index.js",
+        platform: "node",
+        write: false,
+    })
+        .then(({ outputFiles }) => outputFiles)
+        .catch(error => {
+            console.error(error);
+            return [];
+        });
+};
+
+export const cjs2esm = async (
+    id: string,
+    entries: Array<{ entryPoints: string; code: string; shouldBundle: boolean }>,
+): Promise<string | null> => {
+    const filePath = removeQueryString(id);
+
+    for (const { entryPoints, code, shouldBundle } of entries) {
+        if (!filePath.endsWith(entryPoints)) {
+            continue;
+        }
+
+        if (!shouldBundle) {
+            return code;
+        }
+
+        const outputFiles = await bundleModel(filePath);
+        if (outputFiles.length === 0) {
+            return code;
+        }
+
+        return outputFiles
+            .map(({ text }) => text)
+            .join("")
+            .concat(code);
+    }
+    return null;
+};
+
+export function getTemplate(path: string): string {
+    return readFileSync(join(__dirname, path), "utf8");
+}
diff --git a/desktop/renderer-app/src/theme.less b/desktop/renderer-app/src/theme.less
@@ -1,4 +1,4 @@
-@import "~flat-components/theme/fancy-scrollbar.less";
+@import "flat-components/theme/fancy-scrollbar.less";
 
 * {
     user-select: none;

diff --git a/desktop/renderer-app/tsconfig.json b/desktop/renderer-app/tsconfig.json
@@ -2,15 +2,16 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "lib": ["dom", "es2017"],
-    "module": "CommonJS",
+    "module": "ESNext",
     "jsx": "react",
     "baseUrl": ".",
     "paths": {
       "flat-types": ["../../packages/flat-types/src"],
       "flat-i18n": ["../../packages/flat-i18n/locales"],
       "flat-components": ["../../packages/flat-components/src"]
-    }
+    },
+    "types": ["vite/client"]
   },
   "exclude": ["node_modules", "dist", "public"],
-  "include": ["src/**/*.ts", "src/**/*.tsx", "typings/*.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "typings/*.ts", "vite.config.ts","scripts/**/*.ts"]
 }
diff --git a/desktop/renderer-app/vite.config.ts b/desktop/renderer-app/vite.config.ts
@@ -0,0 +1,81 @@
+import refresh from "@vitejs/plugin-react-refresh";
+import { defineConfig } from "vite";
+import path from "path";
+// TODO: find new place to store vite-plugin-dotenv
+import { dotenv } from "../../web/flat-web/scripts/vite-plugin-dotenv";
+import { visualizer } from "rollup-plugin-visualizer";
+import { electron } from "./scripts/vite-plugin-electron";
+import eslintPlugin from "vite-plugin-eslint";
+
+export default defineConfig(() => {
+    const plugins = [refresh(), dotenv("../../config"), electron(), eslintPlugin()];
+    if (process.env.ANALYZER) {
+        plugins.push({
+            ...visualizer(),
+            enforce: "post",
+            apply: "build",
+        });
+    }
+    return {
+        plugins,
+        resolve: {
+            alias: [
+                // replace webpack alias
+                {
+                    find: /^~/,
+                    replacement: "",
+                },
+                {
+                    find: "flat-types",
+                    replacement: path.join(__dirname, "..", "..", "packages", "flat-types", "src"),
+                },
+                {
+                    find: "flat-i18n",
+                    replacement: path.join(
+                        __dirname,
+                        "..",
+                        "..",
+                        "packages",
+                        "flat-i18n",
+                        "locales",
+                    ),
+                },
+                {
+                    find: "flat-components",
+                    replacement: path.join(
+                        __dirname,
+                        "..",
+                        "..",
+                        "packages",
+                        "flat-components",
+                        "src",
+                    ),
+                },
+            ],
+        },
+        build: {
+            sourcemap: true,
+            rollupOptions: {
+                output: {
+                    format: "cjs",
+                },
+                external: [...electron.externals],
+            },
+        },
+        clearScreen: false,
+        optimizeDeps: {
+            exclude: [...electron.externals, "fs-extra", "extract-zip"],
+        },
+        css: {
+            preprocessorOptions: {
+                less: {
+                    javascriptEnabled: true,
+                    modifyVars: {
+                        "primary-color": "#3381FF",
+                        "link-color": "#3381FF",
+                    },
+                },
+            },
+        },
+    };
+});