build(forge): introduce webpack plugin and remove parcel (#1109)

* build(forge): introduce webpack plugin and remove parcel Co-authored-by: David Sanders <dsanders11@ucsbalum.com> Co-authored-by: Felix Rieseberg <felix@felixrieseberg.com> Co-authored-by: BlackHole1 <158blackhole@gmail.com> * chore: update yarn.lock Co-authored-by: David Sanders <dsanders11@ucsbalum.com> Co-authored-by: Felix Rieseberg <felix@felixrieseberg.com> Co-authored-by: BlackHole1 <158blackhole@gmail.com>
electron · Jul 11, 2022 · 0ba78af · 0ba78af
1 parent 101adf7
commit 0ba78af
Show file tree

Hide file tree

Showing 35 changed files with 1,984 additions and 3,793 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -28,7 +28,7 @@ const config = {
     '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
   },
   // the static folder is linted by standard
-  ignorePatterns: ['/out', '/dist', '/coverage', '/static'],
+  ignorePatterns: ['/out', '/.webpack', '/coverage', '/static'],
 };
 
 module.exports = config;
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -28,6 +28,12 @@ jobs:
           cache: yarn
       - name: Install
         run: yarn --frozen-lockfile --network-timeout 100000 || yarn --frozen-lockfile --network-timeout 100000 || yarn --frozen-lockfile --network-timeout 100000
+      - name: Create fake contributors
+        uses: 1arp/create-a-file-action@0.2
+        with:
+          path: 'static'
+          file: 'contributors.json'
+          content: "[]"
       - name: lint
         run: yarn lint
       - name: test

diff --git a/.gitignore b/.gitignore
@@ -16,7 +16,6 @@
 *.vcxproj.user
 *.xcodeproj
 /.idea/
-/dist/
 /external_binaries/
 /out/
 node_modules/
@@ -39,3 +38,6 @@ report.json
 # Electron Fiddle-Specific
 /static/contributors.json
 /static/css/root.css
+
+# Webpack configurations
+.webpack
diff --git a/forge.config.js b/forge.config.js
@@ -1,9 +1,11 @@
 const path = require('path');
 const fs = require('fs');
 const packageJson = require('./package.json');
+const { maybeFetchContributors } = require('./tools/contributors');
 
 const { version } = packageJson;
 const iconDir = path.resolve(__dirname, 'assets', 'icons');
+const root = process.cwd();
 
 if (process.env['WINDOWS_CODESIGN_FILE']) {
   const certPath = path.join(__dirname, 'win-certificate.pfx');
@@ -23,8 +25,40 @@ const commonLinuxConfig = {
 
 const config = {
   hooks: {
-    generateAssets: require('./tools/generateAssets'),
+    generateAssets: async () => {
+      await maybeFetchContributors();
+    },
   },
+  plugins: [
+    [
+      '@electron-forge/plugin-webpack',
+      {
+        devContentSecurityPolicy:
+          "default-src 'none'; img-src 'self' https: data:; media-src 'none'; child-src 'self'; object-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https:;",
+        devServer: {
+          // Disallow browser from opening/reloading with HMR in development mode.
+          open: false,
+          liveReload: false,
+          hot: 'only',
+        },
+        mainConfig: path.join(root, 'tools/webpack/webpack.main.config.js'),
+        renderer: {
+          nodeIntegration: true,
+          config: path.join(root, 'tools/webpack/webpack.renderer.config.js'),
+          entryPoints: [
+            {
+              html: path.join(root, './static/index.html'),
+              js: path.join(root, './src/renderer/main.tsx'),
+              name: 'main_window',
+              preload: {
+                js: path.join(root, 'src/preload/preload.ts'),
+              },
+            },
+          ],
+        },
+      },
+    ],
+  ],
   packagerConfig: {
     name: 'Electron Fiddle',
     executableName: 'electron-fiddle',

diff --git a/jest.json b/jest.json
@@ -11,6 +11,7 @@
   "snapshotSerializers": [
     "enzyme-to-json/serializer"
   ],
+  "globalSetup": "<rootDir>/tests/globalSetup.js",
   "setupFilesAfterEnv": [
     "<rootDir>/tests/setup.js"
   ],
@@ -39,6 +40,7 @@
     "/tests/.*\\.(ts|js)$"
   ],
   "moduleNameMapper": {
-    ".*releases.json$": "<rootDir>/static/releases.json"
+    ".*releases.json$": "<rootDir>/static/releases.json",
+    "\\.(css|less|scss)$": "<rootDir>/tests/mocks/styles.ts"
   }
 }
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "version": "0.29.1",
   "description": "The easiest way to get started with Electron",
   "repository": "https://github.com/electron/fiddle",
-  "main": "./dist/src/main/main.js",
+  "main": "./.webpack/main",
   "scripts": {
     "contributors": "node ./tools/contributors.js",
     "lint:style": "stylelint  \"./src/less/*.less\" --fix",
@@ -14,10 +14,8 @@
     "lint": "npm-run-all \"lint:*\"",
     "make": "electron-forge make",
     "package": "electron-forge package",
-    "parcel:build": "node ./tools/parcel-build.js",
-    "parcel:watch": "node ./tools/parcel-watch.js",
     "publish": "electron-forge publish",
-    "start": "rimraf ./dist && electron-forge start --",
+    "start": "rimraf ./.webpack && electron-forge start --",
     "test": "jest --config=jest.json",
     "test:ci": "jest --config=jest.json --coverage --runInBand",
     "test:report": "jest --config=jest.json --json --bail=false --outputFile=report.json | true",
@@ -54,7 +52,6 @@
     "mobx": "^6.5.0",
     "mobx-react": "^7.3.0",
     "monaco-editor": "^0.21.3",
-    "monaco-loader": "1.0.0",
     "namor": "^2.0.2",
     "node-watch": "^0.7.3",
     "p-debounce": "^2.0.0",
@@ -75,6 +72,7 @@
     "@electron-forge/maker-rpm": "^6.0.0-beta.64",
     "@electron-forge/maker-squirrel": "^6.0.0-beta.64",
     "@electron-forge/maker-zip": "^6.0.0-beta.64",
+    "@electron-forge/plugin-webpack": "^6.0.0-beta.64",
     "@electron-forge/publisher-github": "^6.0.0-beta.64",
     "@octokit/action": "^2.0.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -96,7 +94,10 @@
     "@types/valid-url": "^1.0.3",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
     "@typescript-eslint/parser": "^4.15.2",
+    "@vercel/webpack-asset-relocator-loader": "^1.7.2",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-fetch": "^3.1.0",
+    "css-loader": "^6.7.1",
     "electron": "17.4.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
@@ -106,20 +107,26 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "fetch-mock-jest": "^1.5.1",
+    "fork-ts-checker-webpack-plugin": "^7.2.11",
     "husky": "^5.1.1",
     "jest": "^27.5.1",
     "json-stable-stringify": "^1.0.1",
     "less": "^4.1.1",
+    "less-loader": "^11.0.0",
     "lint-staged": "^10.5.4",
     "log-symbols": "^4.0.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "monaco-editor-webpack-plugin": "2.1.0",
     "npm-run-all": "^4.1.5",
-    "parcel-bundler": "^1.12.4",
     "prettier": "^2.2.1",
+    "resolve-url-loader": "^5.0.0",
     "rimraf": "^3.0.2",
     "standard": "^16.0.3",
     "stylelint": "^13.11.0",
     "stylelint-config-standard": "^20.0.0",
+    "terser-webpack-plugin": "^5.3.3",
     "ts-jest": "^27.1.4",
+    "ts-loader": "^9.3.1",
     "typescript": "^4.2.2"
   },
   "lint-staged": {

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -101,6 +101,16 @@ export interface GenericDialogOptions {
   placeholder?: string;
 }
 
+export interface Contributor {
+  url: string;
+  api: string;
+  login: string;
+  avatar: string;
+  name: string;
+  bio: string;
+  location: string;
+}
+
 export interface Templates {
   [index: string]: string | Templates;
 }

diff --git a/src/main/about-panel.ts b/src/main/about-panel.ts
@@ -1,22 +1,27 @@
-import * as fs from 'fs-extra';
 import * as path from 'path';
 import { app } from 'electron';
+import { Contributor } from 'src/interfaces';
+import contributorsJSON from '../../static/contributors.json';
 
 /**
  * Sets Fiddle's About panel options on Linux and macOS
  *
  * @returns
  */
 export function setupAboutPanel(): void {
-  const contribFile = path.join(__dirname, '../../../static/contributors.json');
-  const iconPath = path.resolve(__dirname, '../../../assets/icons/fiddle.png');
+  const contributors: Array<string> = [];
+  contributorsJSON.forEach((userData: Contributor) => {
+    if (userData.name !== null && userData.name !== undefined) {
+      contributors.push(userData.name);
+    }
+  });
+
+  const iconPath = path.resolve(__dirname, '../assets/icons/fiddle.png');
 
   app.setAboutPanelOptions({
     applicationName: 'Electron Fiddle',
     applicationVersion: app.getVersion(),
-    authors: fs
-      .readJSONSync(contribFile)
-      .map(({ name }: { name: string }) => name),
+    authors: contributors,
     copyright: '© Electron Authors',
     credits: 'https://github.com/electron/fiddle/graphs/contributors',
     iconPath,

diff --git a/src/main/main.ts b/src/main/main.ts
@@ -149,6 +149,6 @@ export function main(argv_in: string[]) {
 }
 
 // only call main() if this is the main module
-if (typeof module !== 'undefined' && require.main !== module) {
+if (typeof module !== 'undefined' && require.main === module) {
   main(process.argv);
 }
diff --git a/src/main/windows.ts b/src/main/windows.ts
@@ -8,6 +8,11 @@ import * as path from 'path';
 // be closed automatically when the JavaScript object is garbage collected.
 export let browserWindows: Array<BrowserWindow | null> = [];
 
+// Global variables exposed by forge/webpack-plugin to reference
+// the entry point of preload and index.html over http://
+declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
+declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
+
 /**
  * Gets default options for the main window
  *
@@ -34,8 +39,11 @@ export function getMainWindowOptions(): Electron.BrowserWindowConstructorOptions
     webPreferences: {
       webviewTag: false,
       nodeIntegration: true,
+      nodeIntegrationInWorker: true,
       contextIsolation: false,
-      preload: path.join(__dirname, '..', 'preload', 'preload'),
+      preload: !!process.env.JEST
+        ? path.join(process.cwd(), './.webpack/renderer/main_window/preload.js')
+        : MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
     },
   };
 }
@@ -50,7 +58,11 @@ export function createMainWindow(): Electron.BrowserWindow {
   console.log(`Creating main window`);
   let browserWindow: BrowserWindow | null;
   browserWindow = new BrowserWindow(getMainWindowOptions());
-  browserWindow.loadFile('./dist/static/index.html');
+  browserWindow.loadURL(
+    !!process.env.JEST
+      ? path.join(process.cwd(), './.webpack/renderer/main_window/index.html')
+      : MAIN_WINDOW_WEBPACK_ENTRY,
+  );
 
   browserWindow.webContents.once('dom-ready', () => {
     if (browserWindow) {

diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
@@ -17,6 +17,9 @@ import { defaultDark, defaultLight } from './themes-defaults';
 import { ElectronTypes } from './electron-types';
 import { USER_DATA_PATH } from './constants';
 
+// Importing styles files
+import '../less/root.less';
+
 /**
  * The top-level class controlling the whole app. This is *not* a React component,
  * but it does eventually render all components.

diff --git a/src/renderer/components/settings-credits.tsx b/src/renderer/components/settings-credits.tsx
@@ -1,8 +1,8 @@
 import { Callout, Card } from '@blueprintjs/core';
 import { shell } from 'electron';
-import * as fs from 'fs-extra';
-import * as path from 'path';
 import * as React from 'react';
+import contributorsJSON from '../../../static/contributors.json';
+import { Contributor } from 'src/interfaces';
 
 import { AppState } from '../state';
 
@@ -14,16 +14,6 @@ interface CreditsSettingsState {
   contributors: Array<Contributor>;
 }
 
-interface Contributor {
-  url: string;
-  api: string;
-  login: string;
-  avatar: string;
-  name: string;
-  bio: string;
-  location: string;
-}
-
 /**
  * Settings content to manage Credits-related preferences.
  *
@@ -38,10 +28,8 @@ export class CreditsSettings extends React.Component<
     super(props);
 
     this.state = {
-      contributors: [],
+      contributors: contributorsJSON as Array<Contributor>,
     };
-
-    this.getContributors();
   }
 
   /**
@@ -94,17 +82,4 @@ export class CreditsSettings extends React.Component<
       </div>
     );
   }
-
-  public async getContributors() {
-    try {
-      const contributorsFile = path.join(
-        __dirname,
-        '../../static/contributors.json',
-      );
-      const contributors = await fs.readJSON(contributorsFile);
-      this.setState({ contributors });
-    } catch (error) {
-      console.warn(`CreditsSettings: Fetching contributors failed`, error);
-    }
-  }
 }
diff --git a/src/renderer/content.ts b/src/renderer/content.ts
@@ -6,14 +6,13 @@ import { readFiddle } from '../utils/read-fiddle';
 import * as fs from 'fs-extra';
 import * as path from 'path';
 
+// Defined in webpack plugins.
+declare const STATIC_DIR: string;
 // parent directory of all the downloaded template fiddles
 const TEMPLATES_DIR = path.join(USER_DATA_PATH, 'Templates');
 
 // location of the fallback template fiddle used iff downloading failed
-const STATIC_TEMPLATE_DIR = path.resolve(
-  __dirname,
-  '../../static/electron-quick-start',
-);
+const STATIC_TEMPLATE_DIR = path.join(STATIC_DIR, 'electron-quick-start');
 
 // electron-quick-start branch that holds the test template
 const TEST_TEMPLATE_BRANCH = 'test-template';

diff --git a/src/renderer/main.tsx b/src/renderer/main.tsx
@@ -1,11 +1,9 @@
-import * as MonacoType from 'monaco-editor';
+import * as monaco from 'monaco-editor';
 import { App } from './app';
 import { initSentry } from '../sentry';
 
 initSentry();
 
-require('monaco-loader')().then((monaco: typeof MonacoType) => {
-  window.ElectronFiddle.monaco = monaco;
-  window.ElectronFiddle.app = new App();
-  window.ElectronFiddle.app.setup();
-});
+window.ElectronFiddle.monaco = monaco;
+window.ElectronFiddle.app = new App();
+window.ElectronFiddle.app.setup();