Merge branch 'development' into replaygain

.erb/configs/webpack.config.base.ts

@@ -7,53 +7,58 @@ import { dependencies as externals } from '../../release/app/package.json';
 import webpackPaths from './webpack.paths';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 
+const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
+
+const styledComponentsTransformer = createStyledComponentsTransformer();
+
 const configuration: webpack.Configuration = {
-  externals: [...Object.keys(externals || {})],
-
-  module: {
-    rules: [
-      {
-        exclude: /node_modules/,
-        test: /\.[jt]sx?$/,
-        use: {
-          loader: 'ts-loader',
-          options: {
-            // Remove this line to enable type checking in webpack builds
-            transpileOnly: true,
-          },
+    externals: [...Object.keys(externals || {})],
+
+    module: {
+        rules: [
+            {
+                exclude: /node_modules/,
+                test: /\.[jt]sx?$/,
+                use: {
+                    loader: 'ts-loader',
+                    options: {
+                        // Remove this line to enable type checking in webpack builds
+                        transpileOnly: true,
+                        getCustomTransformers: () => ({ before: [styledComponentsTransformer] }),
+                    },
+                },
+            },
+        ],
+    },
+
+    output: {
+        // https://github.com/webpack/webpack/issues/1114
+        library: {
+            type: 'commonjs2',
         },
-      },
-    ],
-  },
 
-  output: {
-    // https://github.com/webpack/webpack/issues/1114
-    library: {
-      type: 'commonjs2',
+        path: webpackPaths.srcPath,
     },
 
-    path: webpackPaths.srcPath,
-  },
-
-  plugins: [
-    new webpack.EnvironmentPlugin({
-      NODE_ENV: 'production',
-    }),
-  ],
-
-  /**
-   * Determine the array of extensions that should be used to resolve modules.
-   */
-  resolve: {
-    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
-    fallback: {
-      child_process: false,
+    plugins: [
+        new webpack.EnvironmentPlugin({
+            NODE_ENV: 'production',
+        }),
+    ],
+
+    /**
+     * Determine the array of extensions that should be used to resolve modules.
+     */
+    resolve: {
+        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
+        fallback: {
+            child_process: false,
+        },
+        plugins: [new TsconfigPathsPlugin({ baseUrl: webpackPaths.srcPath })],
+        modules: [webpackPaths.srcPath, 'node_modules'],
     },
-    plugins: [new TsconfigPathsPlugin({ baseUrl: webpackPaths.srcPath })],
-    modules: [webpackPaths.srcPath, 'node_modules'],
-  },
 
-  stats: 'errors-only',
+    stats: 'errors-only',
 };
 
 export default configuration;

.erb/configs/webpack.config.renderer.web.ts

@@ -13,131 +13,132 @@ import webpackPaths from './webpack.paths';
 // 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', 'electron-renderer'],
+    target: ['web', 'electron-renderer'],
 
-  entry: [
-    `webpack-dev-server/client?http://localhost:${port}/dist`,
-    'webpack/hot/only-dev-server',
-    path.join(webpackPaths.srcRendererPath, 'index.tsx'),
-  ],
+    entry: [
+        `webpack-dev-server/client?http://localhost:${port}/dist`,
+        'webpack/hot/only-dev-server',
+        path.join(webpackPaths.srcRendererPath, 'index.tsx'),
+    ],
 
-  output: {
-    path: webpackPaths.distRendererPath,
-    publicPath: '/',
-    filename: 'renderer.dev.js',
-    library: {
-      type: 'umd',
+    output: {
+        path: webpackPaths.distRendererPath,
+        publicPath: '/',
+        filename: 'renderer.dev.js',
+        library: {
+            type: 'umd',
+        },
     },
-  },
-
-  module: {
-    rules: [
-      {
-        test: /\.s?css$/,
-        use: [
-          'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              modules: {
-                localIdentName: '[name]__[local]--[hash:base64:5]',
-                exportLocalsConvention: 'camelCaseOnly',
-              },
-              sourceMap: true,
-              importLoaders: 1,
+
+    module: {
+        rules: [
+            {
+                test: /\.s?css$/,
+                use: [
+                    'style-loader',
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: {
+                                localIdentName: '[name]__[local]--[hash:base64:5]',
+                                exportLocalsConvention: 'camelCaseOnly',
+                            },
+                            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 ReactRefreshWebpackPlugin(),
-
-    new HtmlWebpackPlugin({
-      filename: path.join('index.html'),
-      template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
-      minify: {
-        collapseWhitespace: true,
-        removeAttributeQuotes: true,
-        removeComments: true,
-      },
-      isBrowser: false,
-      env: process.env.NODE_ENV,
-      isDevelopment: process.env.NODE_ENV !== 'production',
-      nodeModules: webpackPaths.appNodeModulesPath,
-    }),
-  ],
-
-  node: {
-    __dirname: false,
-    __filename: false,
-  },
-
-  devServer: {
-    port,
-    compress: true,
-    hot: true,
-    headers: { 'Access-Control-Allow-Origin': '*' },
-    static: {
-      publicPath: '/',
     },
-    historyApiFallback: {
-      verbose: true,
+    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 ReactRefreshWebpackPlugin(),
+
+        new HtmlWebpackPlugin({
+            filename: path.join('index.html'),
+            template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
+            favicon: path.join(webpackPaths.assetsPath, 'icons', 'favicon.ico'),
+            minify: {
+                collapseWhitespace: true,
+                removeAttributeQuotes: true,
+                removeComments: true,
+            },
+            isBrowser: false,
+            env: process.env.NODE_ENV,
+            isDevelopment: process.env.NODE_ENV !== 'production',
+            nodeModules: webpackPaths.appNodeModulesPath,
+        }),
+    ],
+
+    node: {
+        __dirname: false,
+        __filename: false,
     },
-    setupMiddlewares(middlewares) {
-      return middlewares;
+
+    devServer: {
+        port,
+        compress: true,
+        hot: true,
+        headers: { 'Access-Control-Allow-Origin': '*' },
+        static: {
+            publicPath: '/',
+        },
+        historyApiFallback: {
+            verbose: true,
+        },
+        setupMiddlewares(middlewares) {
+            return middlewares;
+        },
     },
-  },
 };
 
 export default merge(baseConfig, configuration);

.erb/configs/webpack.config.web.prod.ts

@@ -120,6 +120,7 @@ const configuration: webpack.Configuration = {
         new HtmlWebpackPlugin({
             filename: 'index.html',
             template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
+            favicon: path.join(webpackPaths.assetsPath, 'icons', 'favicon.ico'),
             minify: {
                 collapseWhitespace: true,
                 removeAttributeQuotes: true,

.erb/configs/webpack.paths.ts

@@ -5,6 +5,7 @@ const rootPath = path.join(__dirname, '../..');
 const dllPath = path.join(__dirname, '../dll');
 
 const srcPath = path.join(rootPath, 'src');
+const assetsPath = path.join(rootPath, 'assets');
 const srcMainPath = path.join(srcPath, 'main');
 const srcRemotePath = path.join(srcPath, 'remote');
 const srcRendererPath = path.join(srcPath, 'renderer');
@@ -24,21 +25,22 @@ const distWebPath = path.join(distPath, 'web');
 const buildPath = path.join(releasePath, 'build');
 
 export default {
-  rootPath,
-  dllPath,
-  srcPath,
-  srcMainPath,
-  srcRemotePath,
-  srcRendererPath,
-  releasePath,
-  appPath,
-  appPackagePath,
-  appNodeModulesPath,
-  srcNodeModulesPath,
-  distPath,
-  distMainPath,
-  distRemotePath,
-  distRendererPath,
-  distWebPath,
-  buildPath,
+    assetsPath,
+    rootPath,
+    dllPath,
+    srcPath,
+    srcMainPath,
+    srcRemotePath,
+    srcRendererPath,
+    releasePath,
+    appPath,
+    appPackagePath,
+    appNodeModulesPath,
+    srcNodeModulesPath,
+    distPath,
+    distMainPath,
+    distRemotePath,
+    distRendererPath,
+    distWebPath,
+    buildPath,
 };