restructure web sources, bundler

web/source/.browserlistsrc

@@ -0,0 +1,2 @@
+> 0.25%
+not dead

web/source/index.js

@@ -22,27 +22,58 @@
 	Bundle the frontend panels for admin and user settings
 */
 
+/*
+ TODO: refactor dev-server to act as developer-facing webserver,
+ proxying other requests to testrig instance. That way actual livereload works
+*/
+
+const Promise = require("bluebird");
 const path = require('path');
-// Forked budo-express supports EventEmitter, to write bundle.js to disk in development
-const budoExpress = require('@f0x52/budo-express');
+const browserify = require("browserify");
 const babelify = require('babelify');
-const fs = require("fs");
-const EventEmitter = require('events');
+const fsSync = require("fs");
+const fs = require("fs").promises;
+const chalk = require("chalk");
+
+const debugMode = process.env.NODE_ENV == "development";
 
 function out(name = "") {
 	return path.join(__dirname, "../assets/dist/", name);
 }
 
+if (!fsSync.existsSync(out())){
+	fsSync.mkdirSync(out(), { recursive: true });
+}
+
 module.exports = {out};
 
 const splitCSS = require("./lib/split-css.js");
 
-const bundles = {
-	"./frontend/index.js": "frontend.js",
-	"./settings-panel/index.js": "settings.js",
-	// "./panels/admin/index.js": "admin-panel.js",
-	// "./panels/user/index.js": "user-panel.js",
-};
+let cssFiles = fsSync.readdirSync(path.join(__dirname, "./css")).map((file) => {
+	return path.join(__dirname, "./css", file);
+});
+
+const bundles = [
+	{
+		outputFile: "frontend.js",
+		entryFiles: ["./frontend/index.js"],
+		babelOptions: {
+			global: true,
+			exclude: /node_modules\/(?!photoswipe-dynamic-caption-plugin)/,
+		}
+	},
+	{
+		outputFile: "react-bundle.js",
+		factors: {
+			"./settings/index.js": "settings.js",
+			"./swagger/index.js": "swagger.js",
+		}
+	},
+	{
+		outputFile: "_delete", // not needed, we only care for the css that's already split-out by css-extract
+		entryFiles: cssFiles,
+	}
+];
 
 const postcssPlugins = [
 	"postcss-import",
@@ -52,19 +83,17 @@ const postcssPlugins = [
 	"postcss-color-mod-function"
 ].map((plugin) => require(plugin)());
 
-let uglifyifyInProduction;
-
-if (process.env.NODE_ENV != "development") {
-	console.log("uglifyify'ing production bundles");
-	uglifyifyInProduction = [
+function browserifyConfig({transforms = [], plugins = [], babelOptions = {}}) {
+	if (!debugMode) {
+		transforms.push([
 			require("uglifyify"), {
 				global: true,
 				exts: ".js"
 			}
-	];
+		]);
 	}
 
-const browserifyConfig = {
+	return {
 		transform: [
 			[
 				babelify.configure({
@@ -78,12 +107,9 @@ const browserifyConfig = {
 						require.resolve("@babel/preset-react")
 					]
 				}),
-			{
-				global: true,
-				exclude: /node_modules\/(?!photoswipe-dynamic-caption-plugin)/,
-			}
+				babelOptions
 			],
-		uglifyifyInProduction
+			...transforms
 		],
 		plugin: [
 			[require("icssify"), {
@@ -92,39 +118,48 @@ const browserifyConfig = {
 				mode: 'global'
 			}],
 			[require("css-extract"), { out: splitCSS }],
-		[require("factor-bundle"), {
-			outputs: Object.values(bundles).map((file) => {
+			...plugins
+		],
+		extensions: [".js", ".jsx", ".css"],
+		fullPaths: debugMode,
+		debug: debugMode
+	};
+}
+
+bundles.forEach((bundle) => {
+	let transforms, plugins, entryFiles;
+	let { outputFile, babelOptions} = bundle;
+
+	if (bundle.factors != undefined) {
+		let factorBundle = [require("factor-bundle"), {
+			outputs: Object.values(bundle.factors).map((file) => {
 				return out(file);
 			})
-		}]
-	],
-	extensions: [".js", ".jsx", ".css"]
-};
+		}];
 
-const entryFiles = Object.keys(bundles);
+		plugins = [factorBundle];
 
-fs.readdirSync(path.join(__dirname, "./css")).forEach((file) => {
-	entryFiles.push(path.join(__dirname, "./css", file));
-});
-
-if (!fs.existsSync(out())){
-	fs.mkdirSync(out(), { recursive: true });
+		entryFiles = Object.keys(bundle.factors);
+	} else {
+		entryFiles = bundle.entryFiles;
 	}
 
-const server = budoExpress({
-	port: 8081,
-	host: "localhost",
-	entryFiles: entryFiles,
-	basePath: __dirname,
-	bundlePath: "bundle.js",
-	staticPath: out(),
-	expressApp: require("./dev-server.js"),
-	browserify: browserifyConfig,
-	livereloadPattern: "**/*.{html,js,svg}"
-});
+	let config = browserifyConfig({transforms, plugins, babelOptions, entryFiles, outputFile});
 
-if (server instanceof EventEmitter) {
-	server.on("update", (contents) => {
-		fs.writeFileSync(out("bundle.js"), contents);
-	});
+	Promise.try(() => {
+		return browserify(entryFiles, config);
+	}).then((bundler) => {
+		Promise.promisifyAll(bundler);
+		return bundler.bundleAsync();
+	}).then((bundle) => {
+		if (outputFile != "_delete") {
+			console.log(chalk.magenta("JS: writing to", outputFile));
+			return fs.writeFile(out(`_${outputFile}`), bundle);
 		}
+	}).catch((e) => {
+		console.log(chalk.red("Fatal error in bundler:"), bundle.bundle);
+		console.log(e.message);
+		console.log(e.stack);
+		console.log();
+	});
+});

web/source/lib/split-css.js

@@ -20,6 +20,7 @@
 
 const fs = require("fs");
 const path = require("path");
+const chalk = require("chalk");
 
 const {Writable} = require("stream");
 const {out} = require("../index.js");
@@ -40,9 +41,11 @@ module.exports = function splitCSS() {
 			function write() {
 				if (content.length != 0) {
 					if (input == undefined) {
+						if (content[0].length != 0) {
 							throw new Error("Got CSS content without filename, can't output: ", content);
+						}
 					} else {
-						console.log("writing to", out(input));
+						console.log(chalk.blue("CSS: writing to", out(input)));
 						fs.writeFileSync(out(input), content.join("\n"));
 					}
 					content = [];

web/source/package.json

@@ -16,6 +16,7 @@
     "bluebird": "^3.7.2",
     "browserify": "^17.0.0",
     "browserlist": "^1.0.1",
+    "chalk": "4",
     "create-error": "^0.3.1",
     "css-extract": "^2.0.0",
     "default-value": "^1.0.0",

web/source/swagger/index.js

@@ -0,0 +1,19 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";

web/source/yarn.lock

@@ -2028,6 +2028,14 @@ caniuse-lite@^1.0.30001399, caniuse-lite@^1.0.30001400:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001402.tgz#aa29e1f47f5055b0d0c07696a67b8b08023d14c8"
   integrity sha512-Mx4MlhXO5NwuvXGgVb+hg65HZ+bhUYsz8QtDGDo2QmaJS2GBX47Xfi2koL86lc8K+l+htXeTEB/Aeqvezoo6Ew==
 
+chalk@4, chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.5.1.tgz#663b3a648b68b55d04690d49167aa837858f2174"
@@ -2067,14 +2075,6 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
-  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 charenc@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"