Experimental (in-progress) setup with ESBuild instead of Webpack

martpie · Aug 23, 2021 · 0b3fad5 · 0b3fad5
1 parent a6df72f
commit 0b3fad5
Show file tree

Hide file tree

Showing 12 changed files with 879 additions and 42 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -46,6 +46,9 @@ jobs:
       - name: Build application
         run: yarn run build
 
+      - name: Build application (ESBuild)
+        run: node esbuild.mjs
+
       - uses: actions/upload-artifact@v2
         with:
           name: application-build

diff --git a/.gitignore b/.gitignore
@@ -58,6 +58,9 @@ typings/
 .env
 
 dist/
+dist_esbuild/*
+!dist_esbuild/.keep
+!dist_esbuild/app.html
 cache/
 build/
 

diff --git a/dist_esbuild/.keep b/dist_esbuild/.keep
diff --git a/dist_esbuild/app.html b/dist_esbuild/app.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; img-src 'self' data:; media-src 'self'; child-src 'self'; object-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' https://api.github.com; font-src 'self' data:"
+    />
+    <title>Museeks</title>
+  </head>
+
+  <body>
+    <div id="wrap">
+      <!-- Here goes black magic -->
+    </div>
+  </body>
+
+  <script src="./renderer.js" />
+</html>
diff --git a/esbuild.mjs b/esbuild.mjs
@@ -0,0 +1,63 @@
+import esbuild from 'esbuild';
+import cssModulesPlugin from 'esbuild-css-modules-plugin';
+import postCssPlugin from 'esbuild-plugin-postcss2';
+import esbuildPluginSvg from 'esbuild-plugin-svg';
+// import htmlPlugin from '@chialab/esbuild-plugin-html';
+
+import postCssImport from 'postcss-import';
+import postCssNested from 'postcss-nested';
+
+/*
+|--------------------------------------------------------------------------
+| Main process build
+|--------------------------------------------------------------------------
+*/
+
+esbuild
+  .build({
+    entryPoints: ['./src/main/main.ts'],
+    bundle: true,
+    outfile: 'dist_esbuild/main.mjs',
+    platform: 'node',
+    target: 'node16.5',
+    external: ['electron'],
+    minify: true,
+  })
+  .then(() => {
+    console.log('===== Main bundle built =====');
+  })
+  .catch(() => process.exit(1));
+
+/*
+|--------------------------------------------------------------------------
+| Renderer process build
+|--------------------------------------------------------------------------
+*/
+
+esbuild
+  .build({
+    entryPoints: ['./src/renderer/main.tsx'],
+    // entryPoints: ['./src/renderer/app.html'],
+    bundle: true,
+    outfile: 'dist_esbuild/renderer.js',
+    platform: 'browser',
+    target: 'chrome91',
+    external: ['electron', 'fs', 'stream', 'path', 'platform', 'assert', 'os', 'constants'],
+    minify: true,
+    plugins: [
+      // htmlPlugin(),
+      esbuildPluginSvg(),
+      postCssPlugin.default({
+        plugins: [postCssImport, postCssNested],
+      }),
+      cssModulesPlugin({
+        inject: true,
+        localsConvention: 'dashesOnly',
+        v2: true,
+      }),
+    ],
+  })
+  .then(() => {
+    console.log('===== Renderer bundle built =====');
+  })
+  .catch(() => process.exit(1));
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "productName": "Museeks",
   "version": "0.12.0",
   "description": "A simple, clean and cross-platform music player, written with Node.js, Electron and React.js.",
-  "main": "./dist/main/bundle.js",
+  "main": "./dist_esbuild/main.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/martpie/museeks"
@@ -72,6 +72,7 @@
   "devDependencies": {
     "@babel/preset-env": "7.14.8",
     "@babel/preset-typescript": "7.14.5",
+    "@chialab/esbuild-plugin-html": "0.11.19",
     "@types/bluebird": "3.5.36",
     "@types/classnames": "2.3.1",
     "@types/electron-devtools-installer": "2.2.0",
@@ -92,8 +93,12 @@
     "clean-terminal-webpack-plugin": "3.0.0",
     "clean-webpack-plugin": "3.0.0",
     "css-loader": "6.2.0",
-    "electron": "13.1.7",
+    "electron": "13.1.9",
     "electron-builder": "22.11.7",
+    "esbuild": "0.12.20",
+    "esbuild-css-modules-plugin": "2.0.2",
+    "esbuild-plugin-postcss2": "0.0.9",
+    "esbuild-plugin-svg": "0.1.0",
     "eslint": "7.31.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-import": "2.23.4",

diff --git a/src/renderer/app.html b/src/renderer/app.html
@@ -6,12 +6,14 @@
       http-equiv="Content-Security-Policy"
       content="default-src 'none'; img-src 'self' data:; media-src 'self'; child-src 'self'; object-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' https://api.github.com; font-src 'self' data:"
     />
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Museeks</title>
   </head>
 
   <body>
     <div id="wrap">
       <!-- Here goes black magic -->
     </div>
   </body>
+
+  <script src="./main.tsx" />
 </html>
diff --git a/src/renderer/components/PlayerOptionsButtons/ButtonRepeat.tsx b/src/renderer/components/PlayerOptionsButtons/ButtonRepeat.tsx
@@ -5,13 +5,16 @@ import cx from 'classnames';
 import * as PlayerActions from '../../store/actions/PlayerActions';
 import { Repeat } from '../../../shared/types/museeks';
 
+import playerRepeatOneIcon from '../../../images/icons/player-repeat-one.svg';
+import playerRepeatIcon from '../../../images/icons/player-repeat.svg';
+
 import styles from './common.module.css';
 
 const svgMap = {
-  [Repeat.ONE]: require('../../../images/icons/player-repeat-one.svg'),
-  [Repeat.ALL]: require('../../../images/icons/player-repeat.svg'),
-  [Repeat.NONE]: require('../../../images/icons/player-repeat.svg'),
-  default: require('../../../images/icons/player-repeat.svg'),
+  [Repeat.ONE]: playerRepeatOneIcon,
+  [Repeat.ALL]: playerRepeatIcon,
+  [Repeat.NONE]: playerRepeatIcon,
+  default: playerRepeatIcon,
 };
 
 interface Props {

diff --git a/src/renderer/components/PlayerOptionsButtons/ButtonShuffle.tsx b/src/renderer/components/PlayerOptionsButtons/ButtonShuffle.tsx
@@ -6,7 +6,7 @@ import * as PlayerActions from '../../store/actions/PlayerActions';
 
 import styles from './common.module.css';
 
-const svg = require('../../../images/icons/player-shuffle.svg');
+import playerShuffleIcon from '../../../images/icons/player-shuffle.svg';
 
 interface Props {
   shuffle: boolean;
@@ -30,7 +30,7 @@ export default class ButtonShuffle extends React.Component<Props> {
 
     return (
       <button type='button' className={buttonClasses} onClick={this.toggleShuffle}>
-        <InlineSVG src={svg} className={styles.icon} />
+        <InlineSVG src={playerShuffleIcon} className={styles.icon} />
       </button>
     );
   }

diff --git a/src/renderer/main.tsx b/src/renderer/main.tsx
@@ -19,7 +19,7 @@ import store from './store/store';
 */
 
 import 'normalize.css/normalize.css';
-import 'font-awesome/css/font-awesome.css';
+// import 'font-awesome/css/font-awesome.css';
 import 'react-rangeslider/lib/index.css';
 import './styles/main.module.css';
 

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,8 +1,8 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
+    "target": "es2020",
+    "module": "es2020",
     "jsx": "react",
     "moduleResolution": "node",
     "esModuleInterop": true,
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,6 +58,9 @@ typings/ @@
     .env
     dist/
+    dist_esbuild/*
+    !dist_esbuild/.keep
+    !dist_esbuild/app.html
     cache/
     build/
@@ Expand Down @@