From c72a95bc72290824a3facf8ff999315d48ef03b8 Mon Sep 17 00:00:00 2001 From: f0x Date: Sun, 2 Oct 2022 13:05:54 +0000 Subject: [PATCH] restructure web sources, bundler --- web/source/.browserlistsrc | 2 + web/source/index.js | 187 +++++++++++------- web/source/lib/split-css.js | 7 +- web/source/package.json | 1 + .../admin/actions.js | 0 .../admin/emoji.js | 0 .../admin/federation.js | 0 .../admin/settings.js | 0 .../components/error.jsx | 0 .../components/fake-toot.jsx | 0 .../components/form-fields.jsx | 0 .../components/languages.jsx | 0 .../components/login.jsx | 0 .../components/nav-button.jsx | 0 .../components/submit.jsx | 0 .../{settings-panel => settings}/index.js | 0 .../lib/api/admin.js | 0 .../lib/api/index.js | 0 .../lib/api/oauth.js | 0 .../lib/api/user.js | 0 .../lib/errors.js | 0 .../lib/get-views.js | 0 .../{settings-panel => settings}/lib/panel.js | 0 .../lib/submit.js | 0 .../redux/index.js | 0 .../redux/reducers/admin.js | 0 .../redux/reducers/instances.js | 0 .../redux/reducers/oauth.js | 0 .../redux/reducers/temporary.js | 0 .../redux/reducers/user.js | 0 .../{settings-panel => settings}/style.css | 0 .../user/profile.js | 0 .../user/settings.js | 0 web/source/swagger/index.js | 19 ++ web/source/yarn.lock | 16 +- 35 files changed, 146 insertions(+), 86 deletions(-) create mode 100644 web/source/.browserlistsrc rename web/source/{settings-panel => settings}/admin/actions.js (100%) rename web/source/{settings-panel => settings}/admin/emoji.js (100%) rename web/source/{settings-panel => settings}/admin/federation.js (100%) rename web/source/{settings-panel => settings}/admin/settings.js (100%) rename web/source/{settings-panel => settings}/components/error.jsx (100%) rename web/source/{settings-panel => settings}/components/fake-toot.jsx (100%) rename web/source/{settings-panel => settings}/components/form-fields.jsx (100%) rename web/source/{settings-panel => settings}/components/languages.jsx (100%) rename web/source/{settings-panel => settings}/components/login.jsx (100%) rename web/source/{settings-panel => settings}/components/nav-button.jsx (100%) rename web/source/{settings-panel => settings}/components/submit.jsx (100%) rename web/source/{settings-panel => settings}/index.js (100%) rename web/source/{settings-panel => settings}/lib/api/admin.js (100%) rename web/source/{settings-panel => settings}/lib/api/index.js (100%) rename web/source/{settings-panel => settings}/lib/api/oauth.js (100%) rename web/source/{settings-panel => settings}/lib/api/user.js (100%) rename web/source/{settings-panel => settings}/lib/errors.js (100%) rename web/source/{settings-panel => settings}/lib/get-views.js (100%) rename web/source/{settings-panel => settings}/lib/panel.js (100%) rename web/source/{settings-panel => settings}/lib/submit.js (100%) rename web/source/{settings-panel => settings}/redux/index.js (100%) rename web/source/{settings-panel => settings}/redux/reducers/admin.js (100%) rename web/source/{settings-panel => settings}/redux/reducers/instances.js (100%) rename web/source/{settings-panel => settings}/redux/reducers/oauth.js (100%) rename web/source/{settings-panel => settings}/redux/reducers/temporary.js (100%) rename web/source/{settings-panel => settings}/redux/reducers/user.js (100%) rename web/source/{settings-panel => settings}/style.css (100%) rename web/source/{settings-panel => settings}/user/profile.js (100%) rename web/source/{settings-panel => settings}/user/settings.js (100%) create mode 100644 web/source/swagger/index.js diff --git a/web/source/.browserlistsrc b/web/source/.browserlistsrc new file mode 100644 index 000000000..bd9fb7727 --- /dev/null +++ b/web/source/.browserlistsrc @@ -0,0 +1,2 @@ +> 0.25% +not dead \ No newline at end of file diff --git a/web/source/index.js b/web/source/index.js index 218e420ed..13ce410bc 100644 --- a/web/source/index.js +++ b/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,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(); }); -} \ No newline at end of file +}); \ No newline at end of file diff --git a/web/source/lib/split-css.js b/web/source/lib/split-css.js index da5602e1c..fc3f75e50 100644 --- a/web/source/lib/split-css.js +++ b/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) { - 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 = []; diff --git a/web/source/package.json b/web/source/package.json index 6e8deba09..bf2b12962 100644 --- a/web/source/package.json +++ b/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", diff --git a/web/source/settings-panel/admin/actions.js b/web/source/settings/admin/actions.js similarity index 100% rename from web/source/settings-panel/admin/actions.js rename to web/source/settings/admin/actions.js diff --git a/web/source/settings-panel/admin/emoji.js b/web/source/settings/admin/emoji.js similarity index 100% rename from web/source/settings-panel/admin/emoji.js rename to web/source/settings/admin/emoji.js diff --git a/web/source/settings-panel/admin/federation.js b/web/source/settings/admin/federation.js similarity index 100% rename from web/source/settings-panel/admin/federation.js rename to web/source/settings/admin/federation.js diff --git a/web/source/settings-panel/admin/settings.js b/web/source/settings/admin/settings.js similarity index 100% rename from web/source/settings-panel/admin/settings.js rename to web/source/settings/admin/settings.js diff --git a/web/source/settings-panel/components/error.jsx b/web/source/settings/components/error.jsx similarity index 100% rename from web/source/settings-panel/components/error.jsx rename to web/source/settings/components/error.jsx diff --git a/web/source/settings-panel/components/fake-toot.jsx b/web/source/settings/components/fake-toot.jsx similarity index 100% rename from web/source/settings-panel/components/fake-toot.jsx rename to web/source/settings/components/fake-toot.jsx diff --git a/web/source/settings-panel/components/form-fields.jsx b/web/source/settings/components/form-fields.jsx similarity index 100% rename from web/source/settings-panel/components/form-fields.jsx rename to web/source/settings/components/form-fields.jsx diff --git a/web/source/settings-panel/components/languages.jsx b/web/source/settings/components/languages.jsx similarity index 100% rename from web/source/settings-panel/components/languages.jsx rename to web/source/settings/components/languages.jsx diff --git a/web/source/settings-panel/components/login.jsx b/web/source/settings/components/login.jsx similarity index 100% rename from web/source/settings-panel/components/login.jsx rename to web/source/settings/components/login.jsx diff --git a/web/source/settings-panel/components/nav-button.jsx b/web/source/settings/components/nav-button.jsx similarity index 100% rename from web/source/settings-panel/components/nav-button.jsx rename to web/source/settings/components/nav-button.jsx diff --git a/web/source/settings-panel/components/submit.jsx b/web/source/settings/components/submit.jsx similarity index 100% rename from web/source/settings-panel/components/submit.jsx rename to web/source/settings/components/submit.jsx diff --git a/web/source/settings-panel/index.js b/web/source/settings/index.js similarity index 100% rename from web/source/settings-panel/index.js rename to web/source/settings/index.js diff --git a/web/source/settings-panel/lib/api/admin.js b/web/source/settings/lib/api/admin.js similarity index 100% rename from web/source/settings-panel/lib/api/admin.js rename to web/source/settings/lib/api/admin.js diff --git a/web/source/settings-panel/lib/api/index.js b/web/source/settings/lib/api/index.js similarity index 100% rename from web/source/settings-panel/lib/api/index.js rename to web/source/settings/lib/api/index.js diff --git a/web/source/settings-panel/lib/api/oauth.js b/web/source/settings/lib/api/oauth.js similarity index 100% rename from web/source/settings-panel/lib/api/oauth.js rename to web/source/settings/lib/api/oauth.js diff --git a/web/source/settings-panel/lib/api/user.js b/web/source/settings/lib/api/user.js similarity index 100% rename from web/source/settings-panel/lib/api/user.js rename to web/source/settings/lib/api/user.js diff --git a/web/source/settings-panel/lib/errors.js b/web/source/settings/lib/errors.js similarity index 100% rename from web/source/settings-panel/lib/errors.js rename to web/source/settings/lib/errors.js diff --git a/web/source/settings-panel/lib/get-views.js b/web/source/settings/lib/get-views.js similarity index 100% rename from web/source/settings-panel/lib/get-views.js rename to web/source/settings/lib/get-views.js diff --git a/web/source/settings-panel/lib/panel.js b/web/source/settings/lib/panel.js similarity index 100% rename from web/source/settings-panel/lib/panel.js rename to web/source/settings/lib/panel.js diff --git a/web/source/settings-panel/lib/submit.js b/web/source/settings/lib/submit.js similarity index 100% rename from web/source/settings-panel/lib/submit.js rename to web/source/settings/lib/submit.js diff --git a/web/source/settings-panel/redux/index.js b/web/source/settings/redux/index.js similarity index 100% rename from web/source/settings-panel/redux/index.js rename to web/source/settings/redux/index.js diff --git a/web/source/settings-panel/redux/reducers/admin.js b/web/source/settings/redux/reducers/admin.js similarity index 100% rename from web/source/settings-panel/redux/reducers/admin.js rename to web/source/settings/redux/reducers/admin.js diff --git a/web/source/settings-panel/redux/reducers/instances.js b/web/source/settings/redux/reducers/instances.js similarity index 100% rename from web/source/settings-panel/redux/reducers/instances.js rename to web/source/settings/redux/reducers/instances.js diff --git a/web/source/settings-panel/redux/reducers/oauth.js b/web/source/settings/redux/reducers/oauth.js similarity index 100% rename from web/source/settings-panel/redux/reducers/oauth.js rename to web/source/settings/redux/reducers/oauth.js diff --git a/web/source/settings-panel/redux/reducers/temporary.js b/web/source/settings/redux/reducers/temporary.js similarity index 100% rename from web/source/settings-panel/redux/reducers/temporary.js rename to web/source/settings/redux/reducers/temporary.js diff --git a/web/source/settings-panel/redux/reducers/user.js b/web/source/settings/redux/reducers/user.js similarity index 100% rename from web/source/settings-panel/redux/reducers/user.js rename to web/source/settings/redux/reducers/user.js diff --git a/web/source/settings-panel/style.css b/web/source/settings/style.css similarity index 100% rename from web/source/settings-panel/style.css rename to web/source/settings/style.css diff --git a/web/source/settings-panel/user/profile.js b/web/source/settings/user/profile.js similarity index 100% rename from web/source/settings-panel/user/profile.js rename to web/source/settings/user/profile.js diff --git a/web/source/settings-panel/user/settings.js b/web/source/settings/user/settings.js similarity index 100% rename from web/source/settings-panel/user/settings.js rename to web/source/settings/user/settings.js diff --git a/web/source/swagger/index.js b/web/source/swagger/index.js new file mode 100644 index 000000000..8570f11e0 --- /dev/null +++ b/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 . +*/ + +"use strict"; \ No newline at end of file diff --git a/web/source/yarn.lock b/web/source/yarn.lock index 830ca5055..ba0967ee8 100644 --- a/web/source/yarn.lock +++ b/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"