From d4186229b9f0ed606f356c6d1b5829da7b227a01 Mon Sep 17 00:00:00 2001
From: Yinan Zhou <yinan.a.zhou@gmail.com>
Date: Tue, 25 Jun 2024 09:47:57 -0400
Subject: [PATCH] build!: separate verovio for prod and dev

- Use `wasm` verovio for development (`webpack.config.js`)
- Load from verovio website for production (`webpack.pages-config.js`)
- Remove redundant `webpack.dev.config.js`

Resolves: #1219, #1221
---
 src/VerovioWrapper.ts | 20 ++++++++++----
 webpack.config.js     | 32 ++++++++++------------
 webpack.dev.config.js | 64 -------------------------------------------
 3 files changed, 30 insertions(+), 86 deletions(-)
 delete mode 100644 webpack.dev.config.js

diff --git a/src/VerovioWrapper.ts b/src/VerovioWrapper.ts
index 744008dd..fd405695 100644
--- a/src/VerovioWrapper.ts
+++ b/src/VerovioWrapper.ts
@@ -1,26 +1,36 @@
 import { VerovioMessage } from './Types';
 
-
 /**
  * A wrapper around the verovio web worker to permit mocking in tests.
  */
 export default class VerovioWrapper {
   verovioWorker: Worker;
-  constructor () {
-    this.verovioWorker = new Worker(__ASSET_PREFIX__ + 'workers/VerovioWorker-dev.js');
+  constructor() {
+    if (process.env.NODE_ENV === 'production') {
+      this.verovioWorker = new Worker(
+        __ASSET_PREFIX__ + 'workers/VerovioWorker.js'
+      );
+    } else {
+      this.verovioWorker = new Worker(
+        __ASSET_PREFIX__ + 'workers/VerovioWorker-dev.js'
+      );
+    }
   }
 
   /**
    * Set an event listener onto the actual web worker.
    */
-  addEventListener (type: string, handler: EventListenerOrEventListenerObject): void {
+  addEventListener(
+    type: string,
+    handler: EventListenerOrEventListenerObject
+  ): void {
     return this.verovioWorker.addEventListener(type, handler);
   }
 
   /**
    * Send a message to the actual web worker.
    */
-  postMessage (message: VerovioMessage): void {
+  postMessage(message: VerovioMessage): void {
     return this.verovioWorker.postMessage(message);
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 450ec340..13f68efa 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,7 +6,7 @@ const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 let commitHash = childProcess.execSync('git rev-parse --short HEAD').toString();
 
 module.exports = {
-  mode: 'production',
+  mode: 'development',
   entry: {
     landing: './deployment/scripts/landing.ts',
     editor: './deployment/scripts/editor.ts',
@@ -15,44 +15,42 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, 'deployment', 'server', 'Neon-gh'),
     publicPath: '/',
-    filename: '[name].js'
+    filename: '[name].js',
   },
   node: {
-    fs: 'empty'
+    fs: 'empty',
   },
   devtool: 'inline-source-map',
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        use: [
-          'ts-loader'
-        ],
-        exclude: /node_modules/
+        use: ['ts-loader'],
+        exclude: /node_modules/,
       },
       {
         test: /Worker\.js$/,
         use: [
           {
             loader: 'worker-loader',
-            options: { publicPath: '/Neon-gh/' }
-          }
-        ]
-      }
-    ]
+            options: { publicPath: '/Neon-gh/' },
+          },
+        ],
+      },
+    ],
   },
   resolve: {
-    extensions: [ '.ts', '.js' ]
+    extensions: ['.ts', '.js'],
   },
   externals: {
-    d3: 'd3'
+    d3: 'd3',
   },
   plugins: [
     new HardSourceWebpackPlugin(),
     new webpack.DefinePlugin({
       __LINK_LOCATION__: JSON.stringify('/'),
       __NEON_VERSION__: JSON.stringify(commitHash),
-      __ASSET_PREFIX__: JSON.stringify('/Neon-gh/')
-    })
-  ]
+      __ASSET_PREFIX__: JSON.stringify('/Neon-gh/'),
+    }),
+  ],
 };
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
deleted file mode 100644
index 815da43a..00000000
--- a/webpack.dev.config.js
+++ /dev/null
@@ -1,64 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const childProcess = require('child_process');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
-
-let commitHash = childProcess.execSync('git rev-parse --short HEAD').toString();
-
-module.exports = {
-  mode: 'development',
-  target: 'web',
-  entry: {
-    landing: './deployment/scripts/landing.ts',
-    editor: './deployment/scripts/editor.ts',
-    dashboard: './deployment/scripts/dashboard.ts',
-  },
-  output: {
-    path: path.resolve(__dirname, 'deployment', 'server', 'Neon-gh'),
-    publicPath: '/',
-    filename: '[name].js'
-  },
-  node: {
-    fs: 'empty'
-  },
-  devtool: 'inline-source-map',
-  devServer: {
-    static: './deployment/server',
-    hot: true,
-  },
-  watch: true,
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: [
-          'ts-loader'
-        ],
-        exclude: /node_modules/
-      },
-      {
-        test: /Worker\.js$/,
-        use: [
-          {
-            loader: 'worker-loader',
-            options: { publicPath: '/Neon-gh/' }
-          }
-        ]
-      }
-    ]
-  },
-  resolve: {
-    extensions: [ '.ts', '.js' ]
-  },
-  externals: {
-    d3: 'd3'
-  },
-  plugins: [
-    new HardSourceWebpackPlugin(),
-    new webpack.DefinePlugin({
-      __LINK_LOCATION__: JSON.stringify('/'),
-      __NEON_VERSION__: JSON.stringify(commitHash),
-      __ASSET_PREFIX__: JSON.stringify('/Neon-gh/')
-    })
-  ]
-};