Merge pull request #3902 from naturalcrit/updateToES6Modules

Upgrade server-side code to ESM (import vs require)

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -5,7 +5,7 @@ const { useState, useRef, useCallback, useMemo } = React;
 const _ = require('lodash');
 
 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
-const Markdown = require('naturalcrit/markdown.js');
+import Markdown from 'naturalcrit/markdown.js';
 const ErrorBar = require('./errorBar/errorBar.jsx');
 const ToolBar  = require('./toolBar/toolBar.jsx');
 

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,6 +1,6 @@
 require('./notificationPopup.less');
 import React, { useEffect, useState } from 'react';
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 
 import Dialog from '../../../components/dialog.jsx';
 

client/homebrew/editor/editor.jsx

@@ -4,7 +4,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const dedent = require('dedent-tabs').default;
-const Markdown = require('../../../shared/naturalcrit/markdown.js');
+import Markdown from '../../../shared/naturalcrit/markdown.js';
 
 const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -3,7 +3,7 @@ require('./metadataEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');
 const TagInput = require('../tagInput/tagInput.jsx');

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -2,7 +2,7 @@ require('./brewItem.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const moment = require('moment');
-const request = require('../../../../utils/request-middleware.js');
+import request from '../../../../utils/request-middleware.js';
 
 const googleDriveIcon = require('../../../../googleDrive.svg');
 const homebreweryIcon = require('../../../../thumbnail.png');

client/homebrew/pages/editPage/editPage.jsx

@@ -4,7 +4,7 @@ const React = require('react');
 const _ = require('lodash');
 const createClass = require('create-react-class');
 
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
@@ -23,7 +23,7 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const LockNotification = require('./lockNotification/lockNotification.jsx');
 
-const Markdown = require('naturalcrit/markdown.js');
+import Markdown from 'naturalcrit/markdown.js';
 
 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
 const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');

client/homebrew/pages/errorPage/errorPage.jsx

@@ -1,7 +1,7 @@
 require('./errorPage.less');
 const React      = require('react');
 const UIPage     = require('../basePages/uiPage/uiPage.jsx');
-const Markdown   = require('../../../../shared/naturalcrit/markdown.js');
+import Markdown  from '../../../../shared/naturalcrit/markdown.js';
 const ErrorIndex = require('./errors/errorIndex.js');
 
 const ErrorPage = ({ brew })=>{

client/homebrew/pages/homePage/homePage.jsx

@@ -2,7 +2,7 @@ require('./homePage.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const cx = require('classnames');
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');

client/homebrew/pages/newPage/newPage.jsx

@@ -2,9 +2,9 @@
 require('./newPage.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 
-const Markdown = require('naturalcrit/markdown.js');
+import Markdown from 'naturalcrit/markdown.js';
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const PrintNavItem = require('../../navbar/print.navitem.jsx');

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -15,7 +15,7 @@ const BrewItem      = require('../basePages/listPage/brewItem/brewItem.jsx');
 const SplitPane     = require('../../../../shared/naturalcrit/splitPane/splitPane.jsx');
 const ErrorIndex    = require('../errorPage/errors/errorIndex.js');
 
-const request = require('../../utils/request-middleware.js');
+import request from '../../utils/request-middleware.js';
 
 const VaultPage = (props)=>{
 	const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);

client/homebrew/utils/request-middleware.js

@@ -1,4 +1,4 @@
-const request = require('superagent');
+import request from 'superagent';
 
 const addHeader = (request)=>request.set('Homebrewery-Version', global.version);
 
@@ -9,4 +9,4 @@ const requestMiddleware = {
 	delete : (path)=>addHeader(request.delete(path)),
 };
 
-module.exports = requestMiddleware;
+export default requestMiddleware;

client/template.js

@@ -8,6 +8,8 @@ const template = async function(name, title='', props = {}){
 	});
 	const ogMetaTags = ogTags.join('\n');
 
+	const ssrModule = await import(`../build/${name}/ssr.cjs`);
+
 	return `<!DOCTYPE html>
 	<html>
 		<head>
@@ -21,12 +23,12 @@ const template = async function(name, title='', props = {}){
 			<title>${title.length ? `${title} - The Homebrewery`: 'The Homebrewery - NaturalCrit'}</title>
 		</head>
 		<body>
-			<main id="reactRoot">${require(`../build/${name}/ssr.js`)(props)}</main>
+			<main id="reactRoot">${ssrModule.default(props)}</main>
 			<script src=${`/${name}/bundle.js`}></script>
 			<script>start_app(${JSON.stringify(props)})</script>
 		</body>
 	</html>
 	`;
 };
 
-module.exports = template;
+export default template;

package.json

@@ -2,6 +2,7 @@
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
   "version": "3.16.0",
+  "type": "module",
   "engines": {
     "npm": "^10.2.x",
     "node": "^20.18.x"
@@ -83,7 +84,8 @@
       "@babel/preset-react"
     ],
     "plugins": [
-      "@babel/plugin-transform-runtime"
+      "@babel/plugin-transform-runtime",
+      "babel-plugin-transform-import-meta"
     ]
   },
   "dependencies": {
@@ -129,6 +131,7 @@
   },
   "devDependencies": {
     "@stylistic/stylelint-plugin": "^3.1.1",
+    "babel-plugin-transform-import-meta": "^2.2.1",
     "eslint": "^9.14.0",
     "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-react": "^7.37.2",

scripts/buildAdmin.js

@@ -1,12 +1,13 @@
-const fs = require('fs-extra');
-const Proj = require('./project.json');
 
-const { pack } = require('vitreum');
-const isDev = !!process.argv.find((arg)=>arg=='--dev');
+import fs   from 'fs-extra';
+import Proj from './project.json' with { type: 'json' };
+import vitreum from 'vitreum';
+const { pack } = vitreum;
+
+import lessTransform  from 'vitreum/transforms/less.js';
+import assetTransform from 'vitreum/transforms/asset.js';
 
-const lessTransform  = require('vitreum/transforms/less.js');
-const assetTransform = require('vitreum/transforms/asset.js');
-//const Meta = require('vitreum/headtags');
+const isDev = !!process.argv.find((arg)=>arg=='--dev');
 
 const transforms = {
 	'.less' : lessTransform,
@@ -17,7 +18,7 @@ const build = async ({ bundle, render, ssr })=>{
 	const css = await lessTransform.generate({ paths: './shared' });
 	await fs.outputFile('./build/admin/bundle.css', css);
 	await fs.outputFile('./build/admin/bundle.js', bundle);
-	await fs.outputFile('./build/admin/ssr.js', ssr);
+	await fs.outputFile('./build/admin/ssr.cjs', ssr);
 };
 
 fs.emptyDirSync('./build/admin');

scripts/buildHomebrew.js

@@ -1,14 +1,15 @@
-const fs = require('fs-extra');
-const zlib = require('zlib');
-const Proj = require('./project.json');
+import fs   from 'fs-extra';
+import zlib from 'zlib';
+import Proj from './project.json' with { type: 'json' };
+import vitreum from 'vitreum';
+const { pack, watchFile, livereload } = vitreum;
 
-const { pack, watchFile, livereload } = require('vitreum');
-const isDev = !!process.argv.find((arg)=>arg=='--dev');
+import lessTransform  from 'vitreum/transforms/less.js';
+import assetTransform from 'vitreum/transforms/asset.js';
+import babel          from '@babel/core';
+import less           from 'less';
 
-const lessTransform  = require('vitreum/transforms/less.js');
-const assetTransform = require('vitreum/transforms/asset.js');
-const babel          = require('@babel/core');
-const less           = require('less');
+const isDev = !!process.argv.find((arg) => arg === '--dev');
 
 const babelify = async (code)=>(await babel.transformAsync(code, { presets: [['@babel/preset-env', { 'exclude': ['proposal-dynamic-import'] }], '@babel/preset-react'], plugins: ['@babel/plugin-transform-runtime'] })).code;
 
@@ -24,7 +25,7 @@ const build = async ({ bundle, render, ssr })=>{
 	//css = `@layer bundle {\n${css}\n}`;
 	await fs.outputFile('./build/homebrew/bundle.css', css);
 	await fs.outputFile('./build/homebrew/bundle.js', bundle);
-	await fs.outputFile('./build/homebrew/ssr.js', ssr);
+	await fs.outputFile('./build/homebrew/ssr.cjs', ssr);
 
 	await fs.copy('./client/homebrew/favicon.ico', './build/assets/favicon.ico');
 
@@ -51,7 +52,7 @@ fs.emptyDirSync('./build');
 	const themes = { Legacy: {}, V3: {} };
 
 	let themeFiles = fs.readdirSync('./themes/Legacy');
-	for (dir of themeFiles) {
+	for (let dir of themeFiles) {
 		const themeData = JSON.parse(fs.readFileSync(`./themes/Legacy/${dir}/settings.json`).toString());
 		themeData.path = dir;
 		themes.Legacy[dir] = (themeData);
@@ -68,7 +69,7 @@ fs.emptyDirSync('./build');
 	}
 
 	themeFiles = fs.readdirSync('./themes/V3');
-	for (dir of themeFiles) {
+	for (let dir of themeFiles) {
 		const themeData = JSON.parse(fs.readFileSync(`./themes/V3/${dir}/settings.json`).toString());
 		themeData.path = dir;
 		themes.V3[dir] = (themeData);
@@ -104,14 +105,14 @@ fs.emptyDirSync('./build');
 	const editorThemesBuildDir = './build/homebrew/cm-themes';
 	await fs.copy('./node_modules/codemirror/theme', editorThemesBuildDir);
 	await fs.copy('./themes/codeMirror/customThemes', editorThemesBuildDir);
-	editorThemeFiles = fs.readdirSync(editorThemesBuildDir);
+	const editorThemeFiles = fs.readdirSync(editorThemesBuildDir);
 
 	const editorThemeFile = './themes/codeMirror/editorThemes.json';
 	if(fs.existsSync(editorThemeFile)) fs.rmSync(editorThemeFile);
 	const stream = fs.createWriteStream(editorThemeFile, { flags: 'a' });
 	stream.write('[\n"default"');
 
-	for (themeFile of editorThemeFiles) {
+	for (let themeFile of editorThemeFiles) {
 		stream.write(`,\n"${themeFile.slice(0, -4)}"`);
 	}
 	stream.write('\n]\n');

server.js

@@ -1,12 +1,12 @@
-const DB = require('./server/db.js');
-const server = require('./server/app.js');
-const config = require('./server/config.js');
+import DB     from './server/db.js';
+import server from './server/app.js';
+import config from './server/config.js';
 
 DB.connect(config).then(()=>{
 	// Ensure that we have successfully connected to the database
 	// before launching server
 	const PORT = process.env.PORT || config.get('web_port') || 8000;
-	server.app.listen(PORT, ()=>{
+	server.listen(PORT, ()=>{
 		const reset = '\x1b[0m'; // Reset to default style
 		const bright = '\x1b[1m'; // Bright (bold) style
 		const cyan = '\x1b[36m'; // Cyan color

server/admin.api.js

@@ -1,13 +1,15 @@
-const HomebrewModel = require('./homebrew.model.js').model;
-const NotificationModel = require('./notifications.model.js').model;
-const router = require('express').Router();
-const Moment = require('moment');
-const templateFn = require('../client/template.js');
-const zlib = require('zlib');
+import {model as HomebrewModel }     from './homebrew.model.js';
+import {model as NotificationModel } from './notifications.model.js';
+import express    from 'express';
+import Moment     from 'moment';
+import zlib       from 'zlib';
+import templateFn from '../client/template.js';
 
-const HomebrewAPI = require('./homebrew.api.js');
-const asyncHandler = require('express-async-handler');
-const { splitTextStyleAndMetadata } = require('../shared/helpers.js');
+import HomebrewAPI  from './homebrew.api.js';
+import asyncHandler from 'express-async-handler';
+import { splitTextStyleAndMetadata } from '../shared/helpers.js';
+
+const router = express.Router();
 
 process.env.ADMIN_USER = process.env.ADMIN_USER || 'admin';
 process.env.ADMIN_PASS = process.env.ADMIN_PASS || 'password3';
@@ -190,4 +192,4 @@ router.get('/admin', mw.adminOnly, (req, res)=>{
 	});
 });
 
-module.exports = router;
+export default router;

server/admin.api.spec.js

@@ -1,9 +1,10 @@
-const supertest = require('supertest');
+import supertest from 'supertest';
+import HBApp     from './app.js';
+import {model as NotificationModel } from './notifications.model.js';
 
-const app = supertest.agent(require('app.js').app)
-	.set('X-Forwarded-Proto', 'https');
 
-const NotificationModel = require('./notifications.model.js').model;
+// Mimic https responses to avoid being redirected all the time
+const app = supertest.agent(HBApp).set('X-Forwarded-Proto', 'https');
 
 describe('Tests for admin api', ()=>{
 	afterEach(()=>{