.neutrinorc.js

const webpack = require('webpack')
const WebpackBar = require('webpackbar')

const envConfig = require('./config/env')
const jestConfig = require('./config/jest')

const nodeEnv = process.env.NODE_ENV || 'development'
const isDevelopment = nodeEnv === 'development'

const descriptionContent = 'Automated performance analysis and suggestion platform for Final Fantasy XIV: Shadowbringers.'

module.exports = {
	options: {
		root: __dirname,
	},
	use: [
		// eslint config - we're just pulling in the rules from the main packages
		require('@neutrinojs/eslint')({
			eslint: {
				baseConfig: {
					extends: [
						'plugin:@xivanalysis/recommended',
						'plugin:@xivanalysis/client',
					],
					rules: {
						'react/display-name': 'off',
						'no-prototype-builtins': 'off',
					}
				},
			},
		}),

		// Add TS extensions to the system ahead of time
		neutrino => {
			const {extensions} = neutrino.options
			extensions.splice(0, 0, 'ts', 'tsx')
			neutrino.options.extensions = extensions
		},

		// Set up lingui's loader before everything else because #reasons
		neutrino => {
			neutrino.config.module
				.rule('lingui')
					.test(/locale.+\.json$/)
					.type('javascript/auto')
					.use('lingui')
						.loader('@lingui/loader')
		},

		// Main config preset
		require('@neutrinojs/react')({
			// Set up the generated index file
			html: {
				title: 'xivanalysis',
				meta: [
					{
						name: 'viewport',
						content: 'width=device-width, initial-scale=1, shrink-to-fit=no',
					},
					{ name: 'theme-color', content: '#000000' },
					{ property: 'description', content: descriptionContent },
					{ property: 'og:title', content: 'xivanalysis' },
					{ property: 'og:description', content: descriptionContent },
					{ property: 'og:type', content: 'website' },
					{ property: 'og:image', content: '/og.jpg' },
					{ property: 'og:url', content: 'https://xivanalysis.com' },
				],
				favicon: './public/logo.png',
			},

			// Basic options for css-loader
			style: {
				css: {
					localsConvention: 'camelCase',
				}
			},

			// Tweaks for babel
			babel: {
				plugins: [
					'macros',
					'lodash',
					'@lingui/transform-js',
					'./locale/babel-plugin-transform-react',
					'@babel/proposal-optional-chaining',
					'@babel/proposal-nullish-coalescing-operator',
				],
			},

			// Tweaks for WDS, mostly to emulate react-scripts handling more-or-less
			devServer: {
				port: 3000,
				overlay: true,
			},

			// Source map generation config
			devtool: {
				development: 'cheap-module-eval-source-map',
				production: 'source-map',
				test: 'source-map'
			}
		}),

		// Add decorators. Have to do this manually as it needs to be before the stuff the react preset sets up
		neutrino => {
			neutrino.config.module
				.rule('compile')
					.use('babel')
						.tap(options => ({
							...options,
							plugins: [
								['@babel/plugin-proposal-decorators', {legacy: true}],
								...options.plugins,
							]
						}))
		},

		// Load env vars. Not using the `env` option for react 'cus it doesn't expand the way I'd like it to
		envConfig,

		// Add module resolution using NODE_SRC_PATH so absolutes work
		neutrino => {
			const modules = neutrino.config.resolve.modules
			modules.add(process.env.NODE_SRC_PATH)
			modules.add('node_modules')
		},

		// Tweak the name mangling performed by css-loader
		neutrino => {
			neutrino.config.module
				.rule('style').oneOf('modules').use('css')
					.tap(options => ({
						...options,
						modules: {
							...options.modules,
							localIdentName: isDevelopment? '[name]_[local]__[md5:hash:base64:5]' : undefined,
						}
					}))
		},

		// Add typings for css-loader
		neutrino => {
			neutrino.config.module
				.rule('style').oneOf('modules').use('css-types').before('css')
					.loader('@teamsupercell/typings-for-css-modules-loader')
					.options({
						banner: '// This file is automatically generated. Do not edit.',
						eol: '\n',
						disableLocalsExport: true,
					})

			neutrino.config.plugin('ignore-css-types').use(new webpack.WatchIgnorePlugin([/module\.css\.d\.ts$/]))
		},

		// Set up postcss
		neutrino => {
			const postcssOptions = {
				plugins: [
					require('autoprefixer'),
					require('postcss-modules-values-replace')({
						resolve: {
							modules: ['src'],
							extensions: ['.css'],
						},
					}),
					require('postcss-color-function')(),
					require('postcss-calc'),
					require('cssnano')({
						preset: ['default', {
							// Need to disable this, it mangles relative imports which freaks other loaders out
							normalizeUrl: false,
						}],
					}),
					require('postcss-modules-tilda'),
				],
			}
			neutrino.config.module
				.rule('style').oneOf('normal').use('postcss')
					.loader('postcss-loader').options({postcssOptions})
			neutrino.config.module
				.rule('style').oneOf('modules').use('postcss')
					.loader('postcss-loader').options({postcssOptions})

			const addExtraImport = options => ({...options, importLoaders: options.importLoaders + 1})
			neutrino.config.module
				.rule('style').oneOf('normal').use('css')
					.tap(addExtraImport)
			neutrino.config.module
				.rule('style').oneOf('modules').use('css')
					.tap(addExtraImport)
		},

		// Set up TypeScript
		neutrino => {
			neutrino.config.module
				.rule('compile')
					.use('ts')
						.loader('ts-loader')
						.options({
							onlyCompileBundledFiles: true,
						})

			neutrino.config.module
				.rule('tslint')
					.test(/\.tsx?$/)
					.pre()
					.use('tslint')
						.loader('tslint-loader')
		},

		// Disable ES modules for images, we have synthetic imports, and use `require` on a bunch to inline code
		neutrino => neutrino.config.module
			.rule('image')
				.use('url')
					.tap(options => ({
						...options,
						esModule: false,
					})),

		// Copy static assets to the build directory
		require('@neutrinojs/copy')({
			patterns: ['public'],
		}),

		// Test stuff
		jestConfig,

		// WebpackBar because looking pretty is Important™
		neutrino => neutrino.config.plugin('webpackbar').use(new WebpackBar()),
	]
}