chore: optimizing build process (#560)

Author: sentialx

electron-builder.json

@@ -17,11 +17,11 @@
     "target": [
       {
         "target": "AppImage",
-        "arch": ["ia32", "x64"]
+        "arch": ["x64"]
       },
       {
         "target": "deb",
-        "arch": ["ia32", "x64"]
+        "arch": ["x64"]
       }
     ]
   },

package.json

@@ -23,15 +23,13 @@
   },
   "scripts": {
     "dev-renderer": "cross-env DEV=1 webpack serve --config webpack.config.renderer.js",
-    "dev-web": "cross-env DEV=1 webpack serve --config webpack.config.web.js",
     "dev-webpack": "cross-env DEV=1 webpack",
     "build-renderer": "webpack --config webpack.config.renderer.js",
-    "pre-renderer": "cross-env PREBUILD=1 npm run build-renderer",
     "dev": "cross-env START=1 npm run watch",
-    "build": "npm run pre-renderer && concurrently \"npm run build-renderer\" \"webpack\" \"webpack --config webpack.config.web.js\"",
+    "build": "rimraf build && concurrently \"npm run build-renderer\" \"webpack\"",
     "ci-build": "node scripts/ci-build.js",
     "start": "electron .",
-    "watch": "concurrently \"npm run dev-renderer\" \"npm run dev-webpack\" \"npm run dev-web\"",
+    "watch": "concurrently \"npm run dev-renderer\" \"npm run dev-webpack\"",
     "compile-win32": "npm run build && electron-builder -w",
     "compile-darwin": "npm run build && electron-builder -m",
     "compile-linux": "npm run build && electron-builder -l",
@@ -40,63 +38,66 @@
     "rebuild": "electron-builder install-app-deps"
   },
   "devDependencies": {
-    "@cliqz/adblocker-electron": "1.19.0",
+    "@babel/core": "^7.12.16",
+    "@cliqz/adblocker-electron": "1.20.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@types/animejs": "^3.1.2",
-    "@types/chrome": "0.0.128",
+    "@types/chrome": "0.0.130",
     "@types/crypto-js": "^4.0.1",
     "@types/jszip": "^3.4.1",
     "@types/nedb": "1.8.11",
-    "@types/node": "14.14.21",
+    "@types/node": "14.14.28",
     "@types/node-fetch": "^2.5.8",
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.1",
     "@types/styled-components": "5.1.7",
-    "@typescript-eslint/eslint-plugin": "^4.13.0",
-    "@typescript-eslint/parser": "^4.13.0",
-    "@wexond/rpc-core": "^1.0.2",
-    "@wexond/rpc-electron": "^1.0.2",
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
+    "@typescript-eslint/parser": "^4.15.1",
+    "@wexond/rpc-core": "^1.0.3",
+    "@wexond/rpc-electron": "^1.0.3",
     "animejs": "^3.2.1",
     "awesome-node-loader": "^1.1.1",
+    "babel-loader": "^8.2.2",
     "concurrently": "^5.3.0",
     "copy-webpack-plugin": "^7.0.0",
     "cross-env": "7.0.3",
-    "crypto-js": "^4.0.0",
-    "electron": "11.2.0",
+    "electron": "11.2.3",
     "electron-builder": "22.9.1",
     "electron-extensions": "^7.0.0-beta.3",
     "electron-updater": "4.3.5",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint": "^7.20.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "file-loader": "^6.2.0",
     "file-type": "16.2.0",
     "fork-ts-checker-webpack-plugin": "^6.1.0",
-    "html-webpack-plugin": "^4.5.1",
+    "html-webpack-plugin": "^5.1.0",
     "icojs": "^0.16.0",
-    "jszip": "^3.5.0",
-    "mobx": "6.0.4",
-    "mobx-react-lite": "3.1.6",
+    "jszip": "^3.6.0",
+    "mobx": "6.1.7",
+    "mobx-react-lite": "3.2.0",
     "nedb": "1.8.0",
     "node-bookmarks-parser": "^2.0.0",
     "node-fetch": "^2.6.1",
     "prettier": "2.2.1",
     "pretty-bytes": "5.5.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-hot-loader": "4.13.0",
+    "react-refresh": "^0.9.0",
     "react-windows-controls": "1.1.1",
+    "rimraf": "^3.0.2",
     "source-map-support": "^0.5.19",
     "styled-components": "^5.2.1",
-    "terser": "^5.5.1",
+    "terser": "^5.6.0",
     "terser-webpack-plugin": "^5.1.1",
-    "ts-loader": "^8.0.14",
+    "ts-loader": "^8.0.17",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
-    "typescript": "^4.1.3",
+    "typescript": "^4.1.5",
     "typescript-plugin-styled-components": "^1.4.4",
-    "webpack": "5.15.0",
-    "webpack-bundle-analyzer": "^4.3.0",
-    "webpack-cli": "4.3.1",
+    "webpack": "5.22.0",
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-cli": "4.5.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-merge": "^5.7.3"
   },

src/common/renderer-config.ts

@@ -1,5 +1,11 @@
 import { configure } from 'mobx';
+import { setIpcRenderer } from '@wexond/rpc-electron';
+import { ipcRenderer } from 'electron';
 
 export const configureUI = () => {
   configure({ enforceActions: 'never' });
 };
+
+export const configureRenderer = () => {
+  setIpcRenderer(ipcRenderer);
+};

src/constants/files.ts

@@ -10,7 +10,7 @@ export const NETWORK_ERROR_HOST = 'network-error';
 
 export const WEBUI_BASE_URL =
   process.env.NODE_ENV === 'development'
-    ? 'http://localhost:4445/'
+    ? 'http://localhost:4444/'
     : `${WEBUI_PROTOCOL}://`;
 
 export const WEBUI_URL_SUFFIX = WEBUI_BASE_URL.startsWith('http')

src/main/application.ts

@@ -42,6 +42,7 @@ export class Application {
             const ext = extname(path);
 
             if (ext === '.html') {
+              this.windows.current.win.focus();
               this.windows.current.viewManager.create({
                 url: `file:///${path}`,
                 active: true,
@@ -50,6 +51,7 @@ export class Application {
           }
           return;
         } else if (isURL(path)) {
+          this.windows.current.win.focus();
           this.windows.current.viewManager.create({
             url: prefixHttp(path),
             active: true,

src/main/index.ts

@@ -1,8 +1,11 @@
+import { ipcMain, app, webContents } from 'electron';
+import { setIpcMain } from '@wexond/rpc-electron';
+setIpcMain(ipcMain);
+
 if (process.env.NODE_ENV === 'development') {
   require('source-map-support').install();
 }
 
-import { ipcMain, app, webContents } from 'electron';
 import { platform } from 'os';
 import { Application } from './application';
 

src/renderer/pre-entry.ts

@@ -0,0 +1,2 @@
+import { configureRenderer } from '~/common/renderer-config';
+configureRenderer();

src/renderer/views/add-bookmark/components/App/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react-lite';
 import { ThemeProvider } from 'styled-components';
-import { hot } from 'react-hot-loader/root';
 
 import { StyledApp, Title, Row, Label, Buttons } from './style';
 import store from '../../store';
@@ -51,51 +50,49 @@ const onRemove = () => {
   store.hide();
 };
 
-export const App = hot(
-  observer(() => {
-    return (
-      <ThemeProvider theme={{ ...store.theme }}>
-        <StyledApp visible={store.visible}>
-          <UIStyle />
-          <Title>{store.dialogTitle}</Title>
-          <Row>
-            <Label>Name</Label>
-            <Input
-              tabIndex={0}
-              className="textfield"
-              ref={store.titleRef}
-              onChange={onChange}
-            />
-          </Row>
-          <Row>
-            <Label>Folder</Label>
-            <Dropdown
-              dark={store.theme['dialog.lightForeground']}
-              tabIndex={1}
-              className="dropdown"
-              onMouseDown={onDropdownClick}
-            >
-              {store.currentFolder && getBookmarkTitle(store.currentFolder)}
-            </Dropdown>
-          </Row>
-          <Buttons>
-            <Button onClick={onDone}>Done</Button>
-            <Button
-              onClick={onRemove}
-              background={
-                store.theme['dialog.lightForeground']
-                  ? 'rgba(255, 255, 255, 0.08)'
-                  : 'rgba(0, 0, 0, 0.08)'
-              }
-              foreground={
-                store.theme['dialog.lightForeground'] ? 'white' : 'black'
-              }
-            >
-              Remove
-            </Button>
-          </Buttons>
-        </StyledApp>
-      </ThemeProvider>
-    );
-  }),
-);
+export const App = observer(() => {
+  return (
+    <ThemeProvider theme={{ ...store.theme }}>
+      <StyledApp visible={store.visible}>
+        <UIStyle />
+        <Title>{store.dialogTitle}</Title>
+        <Row>
+          <Label>Name</Label>
+          <Input
+            tabIndex={0}
+            className="textfield"
+            ref={store.titleRef}
+            onChange={onChange}
+          />
+        </Row>
+        <Row>
+          <Label>Folder</Label>
+          <Dropdown
+            dark={store.theme['dialog.lightForeground']}
+            tabIndex={1}
+            className="dropdown"
+            onMouseDown={onDropdownClick}
+          >
+            {store.currentFolder && getBookmarkTitle(store.currentFolder)}
+          </Dropdown>
+        </Row>
+        <Buttons>
+          <Button onClick={onDone}>Done</Button>
+          <Button
+            onClick={onRemove}
+            background={
+              store.theme['dialog.lightForeground']
+                ? 'rgba(255, 255, 255, 0.08)'
+                : 'rgba(0, 0, 0, 0.08)'
+            }
+            foreground={
+              store.theme['dialog.lightForeground'] ? 'white' : 'black'
+            }
+          >
+            Remove
+          </Button>
+        </Buttons>
+      </StyledApp>
+    </ThemeProvider>
+  );
+});

src/renderer/views/app/components/App/index.tsx

@@ -1,5 +1,4 @@
 import { observer } from 'mobx-react-lite';
-import { hot } from 'react-hot-loader/root';
 import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
 
@@ -19,25 +18,26 @@ import {
 } from '~/constants/design';
 
 const onAppLeave = () => {
-  store.barHideTimer = setTimeout(
-    function () {
-      if (Object.keys(store.dialogsVisibility).some(k => store.dialogsVisibility[k])) {
-        onAppLeave()
-      } else {
-        store.titlebarVisible = false;
-      }
-    },
-    500
-  );
-}
+  store.barHideTimer = setTimeout(function () {
+    if (
+      Object.keys(store.dialogsVisibility).some(
+        (k) => store.dialogsVisibility[k],
+      )
+    ) {
+      onAppLeave();
+    } else {
+      store.titlebarVisible = false;
+    }
+  }, 500);
+};
 
 const onAppEnter = () => {
   clearTimeout(store.barHideTimer);
-}
+};
 
 const onLineEnter = () => {
   store.titlebarVisible = true;
-}
+};
 
 const App = observer(() => {
   return (
@@ -55,7 +55,13 @@ const App = observer(() => {
         tabHeight: store.isCompact ? COMPACT_TAB_HEIGHT : DEFAULT_TAB_HEIGHT,
       }}
     >
-      <StyledApp onMouseOver={store.isFullscreen ? onAppEnter : undefined} onMouseLeave={store.isFullscreen ? onAppLeave : undefined} style={{ height: !store.isFullscreen || store.titlebarVisible ? null : 0 }}>
+      <StyledApp
+        onMouseOver={store.isFullscreen ? onAppEnter : undefined}
+        onMouseLeave={store.isFullscreen ? onAppLeave : undefined}
+        style={{
+          height: !store.isFullscreen || store.titlebarVisible ? null : 0,
+        }}
+      >
         <UIStyle />
         <Titlebar />
         {store.settings.object.topBarVariant === 'default' && <Toolbar />}
@@ -69,4 +75,4 @@ const App = observer(() => {
   );
 });
 
-export default hot(App);
+export default App;