Introduce watch mode

martpie · Sep 9, 2021 · f6a614a · f6a614a
1 parent 0b3fad5
commit f6a614a
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 300 deletions.
diff --git a/dist_esbuild/app.html b/dist_esbuild/app.html
@@ -7,13 +7,13 @@
       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>
+    <script defer="defer" src="./renderer.js"></script>
+    <link rel="stylesheet" href="./renderer.css" />
   </head>
 
   <body>
     <div id="wrap">
       <!-- Here goes black magic -->
     </div>
   </body>
-
-  <script src="./renderer.js" />
 </html>
diff --git a/esbuild.mjs b/esbuild.mjs
@@ -7,6 +7,26 @@ import esbuildPluginSvg from 'esbuild-plugin-svg';
 import postCssImport from 'postcss-import';
 import postCssNested from 'postcss-nested';
 
+const shouldWatch = process.argv.includes('--watch');
+const isProduction = !process.argv.includes('--production');
+
+/*
+|--------------------------------------------------------------------------
+| 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 build
@@ -17,13 +37,17 @@ esbuild
   .build({
     entryPoints: ['./src/main/main.ts'],
     bundle: true,
-    outfile: 'dist_esbuild/main.mjs',
+    outfile: 'dist_esbuild/main.js',
     platform: 'node',
     target: 'node16.5',
     external: ['electron'],
-    minify: true,
+    watch: shouldWatch ? onWatch('main') : null,
+    minify: isProduction,
+    define: {
+      'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
+    },
   })
-  .then(() => {
+  .then((result) => {
     console.log('===== Main bundle built =====');
   })
   .catch(() => process.exit(1));
@@ -42,8 +66,13 @@ esbuild
     outfile: 'dist_esbuild/renderer.js',
     platform: 'browser',
     target: 'chrome91',
-    external: ['electron', 'fs', 'stream', 'path', 'platform', 'assert', 'os', 'constants'],
-    minify: true,
+    external: ['electron', 'fs', 'stream', 'path', 'platform', 'assert', 'os', 'constants', 'util'],
+    watch: shouldWatch ? onWatch('renderer') : null,
+    minify: isProduction,
+    sourcemap: !isProduction,
+    define: {
+      'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
+    },
     plugins: [
       // htmlPlugin(),
       esbuildPluginSvg(),

diff --git a/package.json b/package.json
@@ -15,8 +15,8 @@
   },
   "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:unit": "jest",
@@ -72,7 +72,6 @@
   "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",
@@ -95,9 +94,9 @@
     "css-loader": "6.2.0",
     "electron": "13.1.9",
     "electron-builder": "22.11.7",
-    "esbuild": "0.12.20",
+    "esbuild": "0.12.26",
     "esbuild-css-modules-plugin": "2.0.2",
-    "esbuild-plugin-postcss2": "0.0.9",
+    "esbuild-plugin-postcss2": "0.1.0",
     "esbuild-plugin-svg": "0.1.0",
     "eslint": "7.31.0",
     "eslint-config-prettier": "8.3.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, 'dist_esbuild');
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the javascript object is GCed.
@@ -74,7 +74,7 @@ app.on('ready', async () => {
   });
 
   // ... and load the html page generated by Webpack
-  mainWindow.loadURL(`file://${rendererDistPath}/index.html#/${config.defaultView}`);
+  mainWindow.loadURL(`file://${rendererDistPath}/app.html`);
 
   // Let's list the list of modules we will use for Museeks
   ModulesManager.init(

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'; // FIXME
 import 'react-rangeslider/lib/index.css';
 import './styles/main.module.css';