restructure web sources, bundler
This commit is contained in:
parent
b6f8d2b207
commit
c72a95bc72
|
@ -0,0 +1,2 @@
|
|||
> 0.25%
|
||||
not dead
|
|
@ -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,79 +83,83 @@ const postcssPlugins = [
|
|||
"postcss-color-mod-function"
|
||||
].map((plugin) => require(plugin)());
|
||||
|
||||
let uglifyifyInProduction;
|
||||
function browserifyConfig({transforms = [], plugins = [], babelOptions = {}}) {
|
||||
if (!debugMode) {
|
||||
transforms.push([
|
||||
require("uglifyify"), {
|
||||
global: true,
|
||||
exts: ".js"
|
||||
}
|
||||
]);
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV != "development") {
|
||||
console.log("uglifyify'ing production bundles");
|
||||
uglifyifyInProduction = [
|
||||
require("uglifyify"), {
|
||||
global: true,
|
||||
exts: ".js"
|
||||
}
|
||||
];
|
||||
return {
|
||||
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"],
|
||||
fullPaths: debugMode,
|
||||
debug: debugMode
|
||||
};
|
||||
}
|
||||
|
||||
const browserifyConfig = {
|
||||
transform: [
|
||||
[
|
||||
babelify.configure({
|
||||
presets: [
|
||||
[
|
||||
require.resolve("@babel/preset-env"),
|
||||
{
|
||||
modules: "cjs"
|
||||
}
|
||||
],
|
||||
require.resolve("@babel/preset-react")
|
||||
]
|
||||
}),
|
||||
{
|
||||
global: true,
|
||||
exclude: /node_modules\/(?!photoswipe-dynamic-caption-plugin)/,
|
||||
}
|
||||
],
|
||||
uglifyifyInProduction
|
||||
],
|
||||
plugin: [
|
||||
[require("icssify"), {
|
||||
parser: require("postcss-scss"),
|
||||
before: postcssPlugins,
|
||||
mode: 'global'
|
||||
}],
|
||||
[require("css-extract"), { out: splitCSS }],
|
||||
[require("factor-bundle"), {
|
||||
outputs: Object.values(bundles).map((file) => {
|
||||
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));
|
||||
});
|
||||
entryFiles = Object.keys(bundle.factors);
|
||||
} else {
|
||||
entryFiles = bundle.entryFiles;
|
||||
}
|
||||
|
||||
if (!fs.existsSync(out())){
|
||||
fs.mkdirSync(out(), { recursive: true });
|
||||
}
|
||||
let config = browserifyConfig({transforms, plugins, babelOptions, entryFiles, outputFile});
|
||||
|
||||
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}"
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
}
|
||||
});
|
|
@ -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) {
|
||||
throw new Error("Got CSS content without filename, can't output: ", content);
|
||||
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 = [];
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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";
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue