[chore] Bundler restructure (#880)

* re-structure bundler, settings panel files

* add more info logging

* tidy up CSS syntax errors

* split into lib/ files

* livereloading server

* fix factor function for production builds

* remove testing console.log

* default to production env, saves 300kb bundle size

web/source/lib/bundler.js

@@ -0,0 +1,200 @@
+/*
+	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";
+
+const Promise = require("bluebird");
+const browserify = require("browserify");
+const babelify = require('babelify');
+const chalk = require("chalk");
+const fs = require("fs").promises;
+const { EventEmitter } = require("events");
+const path = require("path");
+const debugLib = require("debug");
+debugLib.enable("GoToSocial");
+const debug = debugLib("GoToSocial");
+
+const outputEmitter = new EventEmitter();
+
+const splitCSS = require("./split-css")(outputEmitter);
+const out = require("./output-path");
+
+const postcssPlugins = [
+	"postcss-import",
+	"postcss-nested",
+	"autoprefixer",
+	"postcss-custom-prop-vars",
+	"postcss-color-mod-function"
+].map((plugin) => require(plugin)());
+
+function browserifyConfig(devMode, { transforms = [], plugins = [], babelOptions = {} }) {
+	if (devMode) {
+		plugins.push(require("watchify"));
+	} else {
+		transforms.push([
+			require("uglifyify"), {
+				global: true,
+				exts: ".js"
+			}
+		]);
+	}
+
+	return {
+		cache: {},
+		packageCache: {},
+		transform: [
+			[
+				babelify.configure({
+					presets: [
+						[
+							require.resolve("@babel/preset-env"),
+							{
+								modules: "cjs"
+							}
+						],
+						require.resolve("@babel/preset-react")
+					]
+				}),
+				babelOptions
+			],
+			...transforms
+		],
+		plugin: [
+			[require("icssify"), {
+				parser: require("postcss-scss"),
+				before: postcssPlugins,
+				mode: 'global'
+			}],
+			[require("css-extract"), { out: splitCSS }],
+			...plugins
+		],
+		extensions: [".js", ".jsx", ".css"],
+		basedir: path.join(__dirname, "../"),
+		fullPaths: devMode,
+		debug: devMode
+	};
+}
+
+module.exports = function gtsBundler(devMode, bundles) {
+	if (devMode) {
+		require("./dev-server")(outputEmitter);
+	}
+
+	Promise.each(bundles, (bundleCfg) => {
+		let transforms, plugins, entryFiles;
+		let { outputFile, babelOptions } = bundleCfg;
+
+		if (bundleCfg.factors != undefined) {
+			let factorBundle = [require("factor-bundle"), {
+				outputs: Object.values(bundleCfg.factors).map((file) => {
+					return out(file);
+				}),
+				threshold: function(row, groups) {
+					// always put livereload.js in common bundle
+					if (row.file.endsWith("web/source/lib/livereload.js")) {
+						return true;
+					} else {
+						return this._defaultThreshold(row, groups);
+					}
+				}
+			}];
+
+			plugins = [factorBundle];
+
+			entryFiles = Object.keys(bundleCfg.factors);
+		} else {
+			entryFiles = bundleCfg.entryFiles;
+		}
+
+		if (devMode) {
+			entryFiles.push(path.join(__dirname, "./livereload.js"));
+		}
+
+		let config = browserifyConfig(devMode, { transforms, plugins, babelOptions, entryFiles, outputFile });
+
+		return Promise.try(() => {
+			return browserify(entryFiles, config);
+		}).then((bundler) => {
+			bundler.on("error", (err) => {
+				console.error(err.message);
+			});
+			Promise.promisifyAll(bundler);
+
+			function makeBundle(cause) {
+				if (cause != undefined) {
+					debug(chalk.yellow(`Watcher: update on ${cause}, re-bundling`));
+				}
+				return Promise.try(() => {
+					return bundler.bundleAsync();
+				}).then((bundle) => {
+					if (outputFile != "_delete") {
+						let updates = new Set([outputFile]);
+						if (bundleCfg.factors != undefined) {
+							Object.values(bundleCfg.factors).forEach((factor) => {
+								updates.add(factor);
+								debug(chalk.magenta(`JS: writing to assets/dist/${factor}`));
+							});
+						}
+						outputEmitter.emit("update", {type: "JS", updates: Array.from(updates)});
+						return fs.writeFile(out(outputFile), bundle);
+					}
+				}).catch((e) => {
+					debug(chalk.red("Fatal error in bundler:"), bundleCfg.outputFile);
+					if (e.name == "CssSyntaxError") {
+						// contains useful info about error + location, but followed by useless
+						// actual stacktrace, so cut that off
+						let stack = e.stack;
+						stack.split("\n").some((line) => {
+							if (line.startsWith("    at Input.error")) {
+								return true;
+							} else {
+								debug(line);
+								return false;
+							}
+						});
+					} else {
+						debug(e.message);
+					}
+				});
+			}
+
+			if (devMode) {
+				bundler.on("update", makeBundle);
+			}
+			return makeBundle();
+		});
+	}).then(() => {
+		if (devMode) {
+			debug(chalk.yellow("Initial build finished, waiting for file changes"));
+		} else {
+			debug(chalk.yellow("Finished building"));
+		}
+	});
+};
+
+outputEmitter.on("update", (u) => {
+	u.updates.forEach((outputFile) => {
+		let color = (str) => str;
+		if (u.type == "JS") {
+			color = chalk.magenta;
+		} else {
+			color = chalk.blue;
+		}
+		debug(color(`${u.type}: writing to assets/dist/${outputFile}`));
+	});
+});

web/source/lib/dev-server.js

@@ -0,0 +1,40 @@
+/*
+	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";
+
+const tinylr = require("tiny-lr");
+const chalk = require("chalk");
+
+const PORT = 35729;
+
+module.exports = function devServer(outputEmitter) {
+	let server = tinylr();
+	
+	server.listen(PORT, () => {
+		console.log(chalk.cyan(`Livereload server listening on :${PORT}`));
+	});
+
+	outputEmitter.on("update", ({updates}) => {
+		let fullPaths = updates.map((path) => `/assets/dist/${path}`);
+		tinylr.changed(fullPaths.join(","));
+	});
+
+	process.on("SIGUSR2", server.close);
+	process.on("SIGTERM", server.close);
+};

web/source/lib/livereload.js

@@ -0,0 +1,29 @@
+/*
+	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";
+
+window.LiveReloadOptions = {
+	host: 'localhost',
+	pluginOrder: "css,img,external",
+	verbose: true
+};
+
+console.log("Development bundle with Livereloading code");
+
+require("livereload-js/dist/livereload.min.js");

web/source/lib/output-path.js

@@ -0,0 +1,32 @@
+/*
+	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";
+
+const fsSync = require("fs");
+const path = require("path");
+
+function out(name = "") {
+	return path.join(__dirname, "../../assets/dist/", name);
+}
+
+if (!fsSync.existsSync(out())){
+	fsSync.mkdirSync(out(), { recursive: true });
+}
+
+module.exports = out;

web/source/lib/split-css.js

@@ -22,55 +22,61 @@ const fs = require("fs");
 const path = require("path");
 
 const {Writable} = require("stream");
-const {out} = require("../index.js");
+const out = require("./output-path");
 
 const fromRegex = /\/\* from (.+?) \*\//;
-module.exports = function splitCSS() {
-	let chunks = [];
-	return new Writable({
-		write: function(chunk, encoding, next) {
-			chunks.push(chunk);
-			next();
-		},
-		final: function() {
-			let stream = chunks.join("");
-			let input;
-			let content = [];
+module.exports = function splitCSS(outputEmitter) {
+	return function() {
+		let chunks = [];
+		return new Writable({
+			write: function(chunk, encoding, next) {
+				chunks.push(chunk);
+				next();
+			},
 
-			function write() {
-				if (content.length != 0) {
-					if (input == undefined) {
-						throw new Error("Got CSS content without filename, can't output: ", content);
-					} else {
-						console.log("writing to", out(input));
-						fs.writeFileSync(out(input), content.join("\n"));
-					}
-					content = [];
-				}
-			}
-
-			const cssDir = path.join(__dirname, "../css");
-
-			stream.split("\n").forEach((line) => {
-				if (line.startsWith("/* from")) {
-					let found = fromRegex.exec(line);
-					if (found != null) {
-						write();
-
-						let parts = path.parse(found[1]);
-						if (path.relative(cssDir, path.join(process.cwd(), parts.dir)) == "") {
-							input = parts.base;
+			final: function() {
+				let stream = chunks.join("");
+				let input;
+				let content = [];
+	
+				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 {
-							// prefix filename with path
-							let relative = path.relative(path.join(__dirname, "../"), path.join(process.cwd(), found[1]));
-							input = relative.replace(/\//g, "-");
+							outputEmitter.emit("update", {type: "CSS", updates: [input]});
+							fs.writeFileSync(out(input), content.join("\n"));
 						}
+						content = [];
 					}
-				} else {
-					content.push(line);
 				}
-			});
-			write();
-		}
-	});
+	
+				const cssDir = path.join(__dirname, "../css");
+	
+				stream.split("\n").forEach((line) => {
+					if (line.startsWith("/* from")) {
+						let found = fromRegex.exec(line);
+						if (found != null) {
+							write();
+	
+							let parts = path.parse(found[1]);
+							if (path.relative(cssDir, path.join(process.cwd(), parts.dir)) == "") {
+								input = parts.base;
+							} else {
+								// prefix filename with path
+								let relative = path.relative(path.join(__dirname, "../"), path.join(process.cwd(), found[1]));
+								input = relative.replace(/\//g, "-");
+							}
+						}
+					} else {
+						content.push(line);
+					}
+				});
+
+				write();
+			}
+		});
+	};
 };