Merge branch 'development' into highlight-current-song-better

jeffvli · Oct 19, 2023 · 6c9e776 · 6c9e776
2 parents 59a21e1 + 9964f95
commit 6c9e776
Show file tree

Hide file tree

Showing 25 changed files with 476 additions and 266 deletions.
diff --git a/.erb/configs/webpack.config.remote.dev.ts b/.erb/configs/webpack.config.remote.dev.ts
@@ -9,112 +9,119 @@ import checkNodeEnv from '../scripts/check-node-env';
 import baseConfig from './webpack.config.base';
 import webpackPaths from './webpack.paths';
 
+const { version } = require('../../package.json');
+
 // When an ESLint server is running, we can't set the NODE_ENV so we'll check if it's
 // at the dev webpack config is not accidentally run in a production environment
 if (process.env.NODE_ENV === 'production') {
-  checkNodeEnv('development');
+    checkNodeEnv('development');
 }
 
-const port = process.env.PORT || 4343;
-
 const configuration: webpack.Configuration = {
-  devtool: 'inline-source-map',
+    devtool: 'inline-source-map',
 
-  mode: 'development',
+    mode: 'development',
 
-  target: ['web'],
+    target: ['web'],
 
-  entry: [path.join(webpackPaths.srcRemotePath, 'index.tsx')],
+    entry: {
+        remote: path.join(webpackPaths.srcRemotePath, 'index.tsx'),
+        worker: path.join(webpackPaths.srcRemotePath, 'service-worker.ts'),
+    },
 
-  output: {
-    path: webpackPaths.dllPath,
-    publicPath: '/',
-    filename: 'remote.js',
-    library: {
-      type: 'umd',
+    output: {
+        path: webpackPaths.dllPath,
+        publicPath: '/',
+        filename: '[name].js',
+        library: {
+            type: 'umd',
+        },
     },
-  },
-
-  module: {
-    rules: [
-      {
-        test: /\.s?css$/,
-        use: [
-          'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              modules: true,
-              sourceMap: true,
-              importLoaders: 1,
+
+    module: {
+        rules: [
+            {
+                test: /\.s?css$/,
+                use: [
+                    'style-loader',
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: true,
+                            sourceMap: true,
+                            importLoaders: 1,
+                        },
+                    },
+                    'sass-loader',
+                ],
+                include: /\.module\.s?(c|a)ss$/,
+            },
+            {
+                test: /\.s?css$/,
+                use: ['style-loader', 'css-loader', 'sass-loader'],
+                exclude: /\.module\.s?(c|a)ss$/,
+            },
+            // Fonts
+            {
+                test: /\.(woff|woff2|eot|ttf|otf)$/i,
+                type: 'asset/resource',
+            },
+            // Images
+            {
+                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+                type: 'asset/resource',
             },
-          },
-          'sass-loader',
         ],
-        include: /\.module\.s?(c|a)ss$/,
-      },
-      {
-        test: /\.s?css$/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
-        exclude: /\.module\.s?(c|a)ss$/,
-      },
-      // Fonts
-      {
-        test: /\.(woff|woff2|eot|ttf|otf)$/i,
-        type: 'asset/resource',
-      },
-      // Images
-      {
-        test: /\.(png|svg|jpg|jpeg|gif)$/i,
-        type: 'asset/resource',
-      },
+    },
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+
+        /**
+         * Create global constants which can be configured at compile time.
+         *
+         * Useful for allowing different behaviour between development builds and
+         * release builds
+         *
+         * NODE_ENV should be production so that modules do not perform certain
+         * development checks
+         *
+         * By default, use 'development' as NODE_ENV. This can be overriden with
+         * 'staging', for example, by changing the ENV variables in the npm scripts
+         */
+        new webpack.EnvironmentPlugin({
+            NODE_ENV: 'development',
+        }),
+
+        new webpack.LoaderOptionsPlugin({
+            debug: true,
+        }),
+
+        new HtmlWebpackPlugin({
+            filename: path.join('index.html'),
+            template: path.join(webpackPaths.srcRemotePath, 'index.ejs'),
+            favicon: path.join(webpackPaths.assetsPath, 'icons', 'favicon.ico'),
+            minify: {
+                collapseWhitespace: true,
+                removeAttributeQuotes: true,
+                removeComments: true,
+            },
+            isBrowser: true,
+            env: process.env.NODE_ENV,
+            isDevelopment: process.env.NODE_ENV !== 'production',
+            nodeModules: webpackPaths.appNodeModulesPath,
+            templateParameters: {
+                version,
+                prod: false,
+            },
+        }),
     ],
-  },
-  plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-
-    /**
-     * Create global constants which can be configured at compile time.
-     *
-     * Useful for allowing different behaviour between development builds and
-     * release builds
-     *
-     * NODE_ENV should be production so that modules do not perform certain
-     * development checks
-     *
-     * By default, use 'development' as NODE_ENV. This can be overriden with
-     * 'staging', for example, by changing the ENV variables in the npm scripts
-     */
-    new webpack.EnvironmentPlugin({
-      NODE_ENV: 'development',
-    }),
-
-    new webpack.LoaderOptionsPlugin({
-      debug: true,
-    }),
-
-    new HtmlWebpackPlugin({
-      filename: path.join('index.html'),
-      template: path.join(webpackPaths.srcRemotePath, 'index.ejs'),
-      favicon: path.join(webpackPaths.assetsPath, 'icons', 'favicon.ico'),
-      minify: {
-        collapseWhitespace: true,
-        removeAttributeQuotes: true,
-        removeComments: true,
-      },
-      isBrowser: true,
-      env: process.env.NODE_ENV,
-      isDevelopment: process.env.NODE_ENV !== 'production',
-      nodeModules: webpackPaths.appNodeModulesPath,
-    }),
-  ],
-
-  node: {
-    __dirname: false,
-    __filename: false,
-  },
-
-  watch: true,
+
+    node: {
+        __dirname: false,
+        __filename: false,
+    },
+
+    watch: true,
 };
 
 export default merge(baseConfig, configuration);