Merge pull request #605 from martpie/esbuild

ESBuild
martpie · Dec 20, 2021 · 40173fe · 40173fe
2 parents 3925d9d + 2946b3f
commit 40173fe
Show file tree

Hide file tree

Showing 50 changed files with 1,100 additions and 1,266 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -34,6 +34,9 @@ jobs:
       - name: 'Test: formatting'
         run: 'yarn run test:formatting'
 
+      - name: 'Test: typings'
+        run: 'yarn run test:typings'
+
       - name: 'Test: TS/JS linting'
         run: 'yarn run test:lint'
 
@@ -46,6 +49,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
@@ -57,7 +57,9 @@ typings/
 # dotenv environment variables file
 .env
 
-dist/
+dist/main/*
+dist/renderer/*
+!dist/renderer/app.html
 cache/
 build/
 

diff --git a/.watchmanconfig b/.watchmanconfig
diff --git a/README.md b/README.md
@@ -92,7 +92,7 @@ If you want to report a bug, first, thanks a lot, that helps us a lot. Please op
 - Fork and clone
 - Master may be unstable, checkout to a tag to have a stable state of the app
 - `yarn install --frozen-lockfile && yarn run dev` then run in a separate terminal `yarn run museeks:debug`
-- `yarn run dev` will watch for file changes using Webpack which will recompile JSX and CSS files.
+- `yarn run dev` will watch for file changes using ESBuild which will recompile JSX and CSS files.
 
 Please respect a few rules:
 

diff --git a/src/renderer/app.html → dist/renderer/app.html b/src/renderer/app.html → dist/renderer/app.html
@@ -6,7 +6,9 @@
       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>
+    <script defer="defer" src="./bundle.js"></script>
+    <link rel="stylesheet" href="./bundle.css" />
   </head>
 
   <body>

diff --git a/esbuild.mjs b/esbuild.mjs
@@ -0,0 +1,143 @@
+import fs from 'fs';
+import path from 'path';
+
+import esbuild from 'esbuild';
+import postCssPlugin from 'esbuild-plugin-postcss2';
+import esbuildPluginSvg from 'esbuild-plugin-svg';
+
+import postCssImport from 'postcss-import';
+import postCssNested from 'postcss-nested';
+import postCssUrl from 'postcss-url';
+
+const shouldWatch = process.argv.includes('--watch'); // infinite watch loop
+const isProduction = process.argv.includes('--production');
+const minify = !shouldWatch && isProduction;
+
+/*
+|--------------------------------------------------------------------------
+| Helpers
+|--------------------------------------------------------------------------
+*/
+
+// const onWatch = (name) => {
+//   /** @type esbuild.WatchMode */
+//   const watchMode = {
+//     onRebuild: (_errors, results) => {
+//       console.log(`${name} rebuilt with ${results.errors.length} errors and ${results.warnings.length} warnings`);
+//     },
+//   };
+
+//   return watchMode;
+// };
+
+/*
+|--------------------------------------------------------------------------
+| Main process config
+|--------------------------------------------------------------------------
+*/
+
+/** @type esbuild.BuildOptions */
+const configMain = {
+  entryPoints: ['./src/main/main.ts'],
+  bundle: true,
+  outfile: 'dist/main/bundle.js',
+  platform: 'node',
+  target: 'node16.5',
+  external: ['electron'],
+  // watch: shouldWatch ? onWatch('main') : null,
+  incremental: shouldWatch,
+  minify,
+  define: {
+    'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
+  },
+};
+
+/*
+|--------------------------------------------------------------------------
+| Renderer process config
+|--------------------------------------------------------------------------
+*/
+
+/** @type esbuild.BuildOptions */
+let configRenderer = {
+  entryPoints: ['./src/renderer/main.tsx'],
+  bundle: true,
+  outfile: 'dist/renderer/bundle.js',
+  platform: 'browser',
+  target: 'chrome91',
+  external: ['electron', 'fs', 'stream', 'path', 'platform', 'assert', 'os', 'constants', 'util', 'events'],
+  // watch: shouldWatch ? onWatch('renderer') : null,
+  incremental: shouldWatch,
+  minify,
+  sourcemap: !isProduction,
+  define: {
+    'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
+  },
+  plugins: [
+    esbuildPluginSvg(),
+    postCssPlugin.default({
+      plugins: [postCssImport, postCssNested, postCssUrl({ url: 'inline' })],
+      // https://github.com/martonlederer/esbuild-plugin-postcss2/pull/30
+      modules: true,
+      rootDir: process.cwd(),
+      sassOptions: {},
+      lessOptions: {},
+      stylusOptions: {},
+      writeToFile: true,
+    }),
+  ],
+  loader: {
+    '.eot': 'file',
+    '.woff': 'file',
+    '.woff2': 'file',
+    '.svg': 'file',
+    '.ttf': 'file',
+  },
+};
+
+/*
+|--------------------------------------------------------------------------
+| Bundlers (prod + dev)
+|--------------------------------------------------------------------------
+*/
+
+async function bundle() {
+  try {
+    await Promise.all([esbuild.build(configMain), esbuild.build(configRenderer)]);
+    console.log('[museeks] built');
+  } catch {
+    process.exit(1);
+  }
+}
+
+async function bundleWatch() {
+  try {
+    let [resultMain, resultRenderer] = await Promise.all([esbuild.build(configMain), esbuild.build(configRenderer)]);
+
+    console.log('[museeks] built, listening to change...');
+
+    // Custom watcher
+    // See https://github.com/martonlederer/esbuild-plugin-postcss2/issues/19
+    if (shouldWatch) {
+      fs.watch(path.join('.', 'src'), { recursive: true }, async (eventType, filename) => {
+        console.log(`[museeks][${eventType}] ${filename}`);
+        try {
+          await Promise.all([resultMain.rebuild(), resultRenderer.rebuild()]);
+        } catch {
+          // nothing
+        }
+        console.log('[museeks] rebuilt');
+      });
+    }
+  } catch {
+    // nothing
+  }
+}
+
+/*
+|--------------------------------------------------------------------------
+| Fire things up
+|--------------------------------------------------------------------------
+*/
+
+shouldWatch ? bundleWatch() : bundle();
diff --git a/package.json b/package.json
@@ -15,10 +15,11 @@
   },
   "scripts": {
     "postinstall": "electron-builder install-app-deps",
-    "build": "webpack --config webpack.prod.js --color",
-    "dev": "webpack --config webpack.dev.js --color --watch",
+    "build": "node esbuild.mjs --production",
+    "dev": "node esbuild.mjs --watch",
     "museeks": "electron .",
     "museeks:debug": "electron . --enable-logging --devtools",
+    "test:typings": "tsc --noEmit",
     "test:unit": "jest",
     "test:lint": "eslint . --ext .tsx,.ts,.js",
     "test:lint:fix": "eslint . --ext .tsx,.ts,.js --fix",
@@ -50,6 +51,7 @@
     "mpris-service": "2.1.0",
     "music-metadata": "7.11.0",
     "postcss-scss": "4.0.0",
+    "postcss-url": "^10.1.3",
     "ps-node": "0.1.6",
     "queue": "6.0.2",
     "rc-scrollbars": "1.1.3",
@@ -89,42 +91,32 @@
     "@types/semver": "7.3.8",
     "@typescript-eslint/eslint-plugin": "4.28.5",
     "@typescript-eslint/parser": "4.28.5",
-    "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.13.5",
+    "esbuild-plugin-postcss2": "0.1.0",
+    "esbuild-plugin-svg": "0.1.0",
     "eslint": "7.31.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-import": "2.23.4",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
-    "html-webpack-plugin": "5.3.2",
     "install": "0.13.0",
     "jest": "27.0.6",
     "mini-css-extract-plugin": "2.1.0",
-    "node-loader": "2.0.0",
     "normalize.css": "8.0.1",
     "postcss": "8.3.6",
     "postcss-import": "14.0.2",
-    "postcss-loader": "6.1.1",
     "postcss-nested": "5.0.5",
     "prettier": "2.3.2",
     "prettier-eslint": "13.0.0",
     "redux-logger": "3.0.6",
-    "source-map-loader": "3.0.0",
     "stylelint": "13.13.1",
     "stylelint-config-css-modules": "2.2.0",
     "stylelint-config-standard": "22.0.0",
-    "svg-inline-loader": "0.8.2",
-    "terser-webpack-plugin": "5.1.4",
-    "ts-loader": "9.2.4",
     "typescript": "4.3.5",
-    "webpack": "5.47.0",
-    "webpack-cli": "4.7.2",
-    "webpack-merge": "5.8.0",
-    "webpackbar": "5.0.0-3"
+    "typescript-plugin-css-modules": "^3.4.0"
   }
 }
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -18,8 +18,8 @@ import DevtoolsModule from './modules/devtools';
 import * as ModulesManager from './lib/modules-manager';
 import { checkBounds } from './lib/utils';
 
-const appRoot = path.resolve(__dirname, '../..'); // Careful, not future-proof
-const rendererDistPath = path.join(appRoot, 'dist', 'renderer');
+const appRoot = path.resolve(__dirname, '..'); // Careful, not future-proof
+const rendererDistPath = path.join(appRoot, 'renderer');
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the javascript object is GCed.
@@ -73,8 +73,8 @@ app.on('ready', async () => {
     return { action: 'deny' };
   });
 
-  // ... and load the html page generated by Webpack
-  mainWindow.loadURL(`file://${rendererDistPath}/index.html#/${config.defaultView}`);
+  // ... and load the html page generated by ESBuild
+  mainWindow.loadURL(`file://${rendererDistPath}/app.html#/${config.defaultView}`);
 
   // Let's list the list of modules we will use for Museeks
   ModulesManager.init(

diff --git a/src/main/modules/mpris.ts b/src/main/modules/mpris.ts
@@ -3,7 +3,7 @@
  */
 
 import electron from 'electron';
-import * as mpris from 'mpris-service';
+import mpris from 'mpris-service';
 import * as mime from 'mime-types';
 
 import { TrackModel } from '../../shared/types/museeks';

diff --git a/src/renderer/App.module.css b/src/renderer/App.module.css
@@ -4,7 +4,7 @@
   height: 100%;
 }
 
-.main-content {
+.mainContent {
   width: 100%;
   flex: 1 1 auto;
   position: relative;

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -60,7 +60,7 @@ const Museeks: React.FC = (props) => {
   }, []);
 
   return (
-    <div className={`${styles.root} os-${os.platform()}`}>
+    <div className={`${styles.root} os__${os.platform()}`}>
       <KeyBinding onKey={onKey} preventInputConflict />
       <Header />
       <main className={styles.mainContent}>{props.children}</main>

diff --git a/src/renderer/components/Cover/Cover.tsx b/src/renderer/components/Cover/Cover.tsx
@@ -48,7 +48,7 @@ export default class TrackCover extends React.PureComponent<Props, State> {
     }
 
     return (
-      <div className={`${styles.cover} -is-empty`}>
+      <div className={`${styles.cover} isEmpty`}>
         <div className={styles.cover__note}>♪</div>
       </div>
     );

diff --git a/src/renderer/components/CustomScrollbar/CustomScrollbar.module.css b/src/renderer/components/CustomScrollbar/CustomScrollbar.module.css
@@ -1,16 +1,16 @@
-.render-view {
+.renderView {
   overflow-x: hidden !important; /* Overriding react-custom-scrollbars */
   margin-bottom: 0 !important; /* there is no overflow-x */
 }
 
-.vertical-track {
+.verticalTrack {
   right: 8px;
   background-color: var(--scrollbar-track);
   top: 8px;
   bottom: 8px;
   z-index: 10;
 }
 
-.vertical-thumb {
+.verticalThumb {
   background-color: var(--scrollbar-thumb);
 }
diff --git a/src/renderer/components/Footer/Footer.module.css b/src/renderer/components/Footer/Footer.module.css
@@ -42,7 +42,7 @@
     margin-left: -1px;
   }
 
-  &.footer__navigation__link--is-active {
+  &.footer__navigation__linkIsActive {
     background-color: var(--footer-nav-bg-color-active);
     color: var(--main-color);
   }
@@ -59,17 +59,17 @@
   justify-content: center;
 }
 
-.footer__library-refresh {
+.footer__libraryRefresh {
   display: flex;
   flex: 1;
   align-items: center;
 }
 
-.footer__library-refresh__progress {
+.footer__libraryRefresh__progress {
   flex: 1;
   margin-right: 10px;
 }
 
-.footer__library-refresh__count {
+.footer__libraryRefresh__count {
   font-variant-numeric: tabular-nums;
 }