restructure web sources, bundler

This commit is contained in:
f0x 2022-10-02 13:05:54 +00:00
parent b6f8d2b207
commit c72a95bc72
35 changed files with 146 additions and 86 deletions

View file

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

View file

@ -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();
});
});

View file

@ -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 = [];

View file

@ -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",

View file

@ -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";

View file

@ -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"