Use Node.js-native ECMAScript modules

package.json

@@ -1,6 +1,7 @@
 {
   "name": "dramatis-cms",
   "version": "0.0.0",
+  "type": "module",
   "description": "Content Management System (CMS) for managing database of theatrical productions, materials, and associated data.",
   "author": "https://github.com/andygout",
   "license": "MS-RSL",
@@ -10,8 +11,8 @@
     "lintspaces": "git ls-files ':!:*.ico' | xargs lintspaces -e .editorconfig",
     "lint-check": "npm run lint && npm run lintspaces",
     "unit-test": "mocha --config test/.mocharc.json",
-    "build": "webpack",
-    "watch": "webpack --watch",
+    "build": "rollup --config",
+    "watch": "rollup --config --watch",
     "start": "npm run watch & node --watch-path=built --watch-path=public --watch-preserve-output --require source-map-support/register built/main.js"
   },
   "pre-commit": [
@@ -47,28 +48,23 @@
     "source-map-support": "0.5.21"
   },
   "devDependencies": {
-    "@babel/core": "7.24.6",
-    "@babel/preset-env": "7.24.6",
     "@babel/preset-react": "7.24.6",
-    "@babel/register": "7.24.6",
-    "babel-loader": "9.1.3",
+    "@rollup/plugin-babel": "6.0.4",
+    "@rollup/plugin-commonjs": "26.0.1",
+    "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-replace": "5.0.7",
     "chai": "4.4.1",
-    "css-loader": "7.1.2",
     "eslint": "8.57.0",
     "eslint-plugin-mocha": "^10.4.3",
     "eslint-plugin-no-only-tests": "3.1.0",
     "eslint-plugin-react": "7.34.2",
-    "favicons-webpack-plugin": "6.0.1",
     "lintspaces-cli": "0.8.0",
-    "mini-css-extract-plugin": "2.9.0",
     "mocha": "10.4.0",
     "pre-commit": "1.2.2",
-    "process": "0.11.10",
-    "sass": "1.77.4",
-    "sass-loader": "14.2.1",
-    "sinon": "18.0.0",
-    "webpack": "5.91.0",
-    "webpack-cli": "5.1.4",
-    "webpack-node-externals": "3.0.0"
+    "rollup": "4.19.1",
+    "rollup-plugin-copy": "3.5.0",
+    "rollup-plugin-esbuild": "6.1.1",
+    "rollup-plugin-scss": "4.0.0",
+    "sass": "1.77.4"
   }
 }

rollup.config.js

@@ -0,0 +1,100 @@
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import copy from 'rollup-plugin-copy';
+import esbuild from 'rollup-plugin-esbuild';
+import scss from 'rollup-plugin-scss';
+import * as sass from 'sass';
+
+const serverBundle = {
+	input: 'src/server/app.js',
+	output: {
+		file: 'built/main.js',
+		sourcemap: 'inline'
+	},
+	external: [
+		'classnames',
+		'express',
+		'express-handlebars',
+		'express-session',
+		'morgan',
+		'node:http',
+		'node:path',
+		'node:url',
+		'prop-types',
+		'react',
+		'react-bootstrap-typeahead',
+		'react-dom/server',
+		'react-helmet',
+		'react-redux',
+		'react-router-dom',
+		'react-router-dom/server.js',
+		'redux',
+		'redux-thunk'
+	],
+	watch: {
+		clearScreen: false
+	},
+	plugins: [
+		esbuild({
+			jsxFactory: 'React.createElement',
+			jsxFragment: 'React.Fragment'
+		}),
+		copy({
+			targets: [
+				{ src: './src/client/assets/favicon.ico', dest: 'built/assets' }
+			]
+		})
+	]
+};
+
+const clientScriptsBundle = {
+	input: 'src/react/client-mount.jsx',
+	output: {
+		file: 'public/main.js',
+		format: 'iife'
+	},
+	watch: {
+		clearScreen: false
+	},
+	plugins: [
+		nodeResolve({
+			browser: true,
+			extensions: ['.js', '.jsx']
+		}),
+		babel({
+			babelHelpers: 'bundled',
+			presets: ['@babel/preset-react'],
+			extensions: ['.js', '.jsx']
+		}),
+		commonjs(),
+		replace({
+			preventAssignment: false,
+			'process.env.NODE_ENV': JSON.stringify('development')
+		})
+	]
+};
+
+const clientStylesBundle = {
+	input: 'src/client/stylesheets/index.scss',
+	output: {
+		dir: 'public'
+	},
+	watch: {
+		clearScreen: false
+	},
+	plugins: [
+		scss({
+			fileName: 'main.css',
+			failOnError: true,
+			sass
+		})
+	]
+};
+
+export default [
+	serverBundle,
+	clientScriptsBundle,
+	clientStylesBundle
+];

src/client/stylesheets/index.scss

@@ -14,8 +14,8 @@
 @use 'dropdown-modifiers';
 @use 'form-control-modifiers';
 
-@import 'react-bootstrap-typeahead/css/Typeahead.css';
-@import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';
+@import 'react-bootstrap-typeahead/css/Typeahead';
+@import 'react-bootstrap-typeahead/css/Typeahead.bs5';
 
 // Functions first
 @import 'bootstrap/scss/functions';

src/lib/create-blank-object.js

@@ -1,4 +1,4 @@
-import isObjectWithKeys from './is-object-with-keys';
+import isObjectWithKeys from './is-object-with-keys.js';
 
 const createBlankObject = object => {
 

src/lib/object-has-non-empty-string.js

@@ -1,5 +1,5 @@
-import isObjectWithKeys from './is-object-with-keys';
-import { FORM_UNEDITABLE_KEYS } from '../utils/constants';
+import isObjectWithKeys from './is-object-with-keys.js';
+import { FORM_UNEDITABLE_KEYS } from '../utils/constants.js';
 
 const isNonEmptyString = value => typeof value === 'string' && Boolean(value);
 

src/lib/prune-instance.js

@@ -1,5 +1,5 @@
-import isObjectWithKeys from './is-object-with-keys';
-import { FORM_CONCEALED_KEYS } from '../utils/constants';
+import isObjectWithKeys from './is-object-with-keys.js';
+import { FORM_CONCEALED_KEYS } from '../utils/constants.js';
 
 const pruneInstance = (instance, recursions = 0) => {
 

src/react/AppRoutes.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 
-import Layout from './Layout';
-import routes from './routes';
+import Layout from './Layout.jsx';
+import routes from './routes.js';
 
 const AppRoutes = () => {
 

src/react/Layout.jsx

@@ -4,9 +4,9 @@ import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { useLocation, useMatch, useNavigate } from 'react-router-dom';
 
-import { ErrorMessage, Footer, Header, Navigation, Notification, ScrollToTop } from './components';
-import { activateNotification } from '../redux/actions/notification';
-import { deactivateRedirect } from '../redux/actions/redirect';
+import { ErrorMessage, Footer, Header, Navigation, Notification, ScrollToTop } from './components/index.js';
+import { activateNotification } from '../redux/actions/notification.js';
+import { deactivateRedirect } from '../redux/actions/redirect.js';
 
 const Layout = props => {
 

src/react/client-mount.jsx

@@ -6,8 +6,8 @@ import { applyMiddleware, createStore, combineReducers } from 'redux';
 import { createLogger } from 'redux-logger';
 import thunkMiddleware from 'redux-thunk';
 
-import AppRoutes from './AppRoutes';
-import reducers from '../redux/reducers';
+import AppRoutes from './AppRoutes.jsx';
+import reducers from '../redux/reducers/index.js';
 
 window.onload = () => {
 

src/react/components/ErrorMessage.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
-import PageTitle from './PageTitle';
+import PageTitle from './PageTitle.jsx';
 
 const ErrorMessage = props => {
 

src/react/components/Header.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { SearchBar } from '.';
+import { SearchBar } from './index.js';
 
 const Header = () => {
 

src/react/components/InstanceDocumentTitle.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
-import { ACTIONS } from '../../utils/constants';
+import { ACTIONS } from '../../utils/constants.js';
 
 const InstanceDocumentTitle = props => {
 

src/react/components/InstanceLabel.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { MODEL_TO_DISPLAY_NAME_MAP } from '../../utils/constants';
+import { MODEL_TO_DISPLAY_NAME_MAP } from '../../utils/constants.js';
 
 const InstanceLabel = props => {
 

src/react/components/Notification.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React from 'react';
 
-import { NOTIFICATION_STATUSES } from '../../utils/constants';
+import { NOTIFICATION_STATUSES } from '../../utils/constants.js';
 
 const Notification = props => {
 

src/react/components/SearchBar.jsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { AsyncTypeahead, Highlighter } from 'react-bootstrap-typeahead';
 import { useNavigate } from 'react-router-dom';
 
-import { MODEL_TO_DISPLAY_NAME_MAP, MODEL_TO_ROUTE_MAP } from '../../utils/constants';
+import { MODEL_TO_DISPLAY_NAME_MAP, MODEL_TO_ROUTE_MAP } from '../../utils/constants.js';
 
 const URL_BASE = 'http://localhost:3001';
 

src/react/components/form/FormWrapper.jsx

@@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { capitalise } from '../../../lib/strings';
-import { handleDelete, handleSubmit } from '../../utils/form';
-import { createInstance, updateInstance, deleteInstance } from '../../../redux/actions/model';
-import { ACTIONS } from '../../../utils/constants';
+import { capitalise } from '../../../lib/strings.js';
+import { handleDelete, handleSubmit } from '../../utils/form.js';
+import { createInstance, updateInstance, deleteInstance } from '../../../redux/actions/model.js';
+import { ACTIONS } from '../../../utils/constants.js';
 
 const FormWrapper = props => {
 

src/react/components/form/InputAndErrors.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { Input, InputErrors } from '.';
+import { Input, InputErrors } from './index.js';
 
 const InputAndErrors = props => {
 

src/react/components/form/index.js

@@ -1,10 +1,10 @@
-import ArrayItemActionButton from './ArrayItemActionButton';
-import Fieldset from './Fieldset';
-import FieldsetComponent from './FieldsetComponent';
-import FormWrapper from './FormWrapper';
-import Input from './Input';
-import InputAndErrors from './InputAndErrors';
-import InputErrors from './InputErrors';
+import ArrayItemActionButton from './ArrayItemActionButton.jsx';
+import Fieldset from './Fieldset.jsx';
+import FieldsetComponent from './FieldsetComponent.jsx';
+import FormWrapper from './FormWrapper.jsx';
+import Input from './Input.jsx';
+import InputAndErrors from './InputAndErrors.jsx';
+import InputErrors from './InputErrors.jsx';
 
 export {
 	ArrayItemActionButton,

src/react/components/index.js

@@ -1,15 +1,15 @@
-import ErrorMessage from './ErrorMessage';
-import Footer from './Footer';
-import FormattedJson from './FormattedJson';
-import Header from './Header';
-import InstanceDocumentTitle from './InstanceDocumentTitle';
-import InstanceLabel from './InstanceLabel';
-import Navigation from './Navigation';
-import Notification from './Notification';
-import PageTitle from './PageTitle';
-import ScrollToTop from './ScrollToTop';
-import SearchBar from './SearchBar';
-import withInstancePageTitle from './withInstancePageTitle';
+import ErrorMessage from './ErrorMessage.jsx';
+import Footer from './Footer.jsx';
+import FormattedJson from './FormattedJson.jsx';
+import Header from './Header.jsx';
+import InstanceDocumentTitle from './InstanceDocumentTitle.jsx';
+import InstanceLabel from './InstanceLabel.jsx';
+import Navigation from './Navigation.jsx';
+import Notification from './Notification.jsx';
+import PageTitle from './PageTitle.jsx';
+import ScrollToTop from './ScrollToTop.jsx';
+import SearchBar from './SearchBar.jsx';
+import withInstancePageTitle from './withInstancePageTitle.jsx';
 
 export {
 	ErrorMessage,

src/react/components/instance-forms/AwardCeremonyForm.jsx

@@ -1,17 +1,17 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 
-import { capitalise } from '../../../lib/strings';
-import { ArrayItemActionButton, Fieldset, FieldsetComponent, FormWrapper, InputAndErrors } from '../form';
+import { capitalise } from '../../../lib/strings.js';
+import { ArrayItemActionButton, Fieldset, FieldsetComponent, FormWrapper, InputAndErrors } from '../form/index.js';
 import {
 	handleChange,
 	checkIsLastArrayItem,
 	handleAppendArrayItemClick,
 	handleRemoveArrayItemClick,
 	handleChangeToPerson,
 	handleChangeToCompany
-} from '../../utils/form';
-import { MODELS } from '../../../utils/constants';
+} from '../../utils/form.js';
+import { MODELS } from '../../../utils/constants.js';
 
 const AwardCeremonyForm = props => {
 

src/react/components/instance-forms/AwardForm.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 
-import { Fieldset, FormWrapper, InputAndErrors } from '../form';
-import { handleChange } from '../../utils/form';
+import { Fieldset, FormWrapper, InputAndErrors } from '../form/index.js';
+import { handleChange } from '../../utils/form.js';
 
 const AwardForm = props => {