[frontend] change bundler to skulk

internal/web/settings-panel.go

@@ -46,7 +46,6 @@ func (m *Module) SettingsPanelHandler(c *gin.Context) {
 			assetsPathPrefix + "/dist/settings-style.css",
 		},
 		"javascript": []string{
-			assetsPathPrefix + "/dist/react-bundle.js",
 			assetsPathPrefix + "/dist/settings.js",
 		},
 	})

testrig/router.go

@@ -22,6 +22,7 @@ import (
 	"context"
 	"os"
 	"path/filepath"
+	"strconv"
 
 	"github.com/gin-gonic/gin"
 	"github.com/superseriousbusiness/gotosocial/internal/config"
@@ -44,6 +45,12 @@ func NewTestRouter(db db.DB) router.Router {
 		config.SetBindAddress(alternativeBindAddress)
 	}
 
+	if alternativePortStr := os.Getenv("GTS_PORT"); alternativePortStr != "" {
+		if alternativePort, err := strconv.Atoi(alternativePortStr); err == nil {
+			config.SetPort(alternativePort)
+		}
+	}
+
 	r, err := router.New(context.Background(), db)
 	if err != nil {
 		panic(err)

web/source/css/_colors.css

@@ -51,7 +51,7 @@ $error-link: #185F8C; /* Error link text, can be used with $error2 (5.54) */
 $fg: $white1;
 $bg: $gray1;
 
-$bg-trans: color-mod($gray5 alpha(62%));
+$bg-trans: rgba(77, 78, 86, 0.62);
 
 $bg-accent: $gray5;
 $fg-accent: $blue3;

web/source/css/base.css

@@ -30,10 +30,10 @@
 	src: url(../NotoSans-Bold.ttf) format('truetype');
 }
 
-// standard border radius for nice squircles
+/* standard border radius for nice squircles */
 $br: 0.4rem;
-// border radius for items that are framed/bordered
-// inside something with $br, eg avatar, header img
+/* border radius for items that are framed/bordered
+   inside something with $br, eg avatar, header img */
 $br-inner: 0.2rem; 
 
 html, body {

web/source/index.js

@@ -18,47 +18,70 @@
 
 "use strict";
 
-/*
-	Bundle the PostCSS stylesheets and javascript bundles for general frontend and settings panel
-*/
-
-const path = require('path');
-const fsSync = require("fs");
-const chalk = require("chalk");
-
-const gtsBundler = require("./lib/bundler");
+const skulk = require("skulk");
+const fs = require("fs");
+const path = require("path");
 
-const devMode = process.env.NODE_ENV == "development";
-if (devMode) {
-	console.log(chalk.yellow("GoToSocial web asset bundler, running in development mode"));
-} else {
-	console.log(chalk.yellow("GoToSocial web asset bundler, creating production build"));
-	process.env.NODE_ENV = "production";
-}
-
-let cssFiles = fsSync.readdirSync(path.join(__dirname, "./css")).map((file) => {
+let cssEntryFiles = fs.readdirSync(path.join(__dirname, "./css")).map((file) => {
 	return path.join(__dirname, "./css", file);
 });
 
-const bundles = [
-	{
-		outputFile: "frontend.js",
-		entryFiles: ["./frontend/index.js"],
-		babelOptions: {
+const prodCfg = {
+	transform: [
+		["uglifyify", {
 			global: true,
-			exclude: /node_modules\/(?!photoswipe-dynamic-caption-plugin)/,
+			exts: ".js"
+		}],
+		["@browserify/envify", {global: true}]
+	]
+};
+
+skulk({
+	name: "GoToSocial",
+	basePath: __dirname,
+	assetPath: "../assets/",
+	prodCfg: {
+		servers: {
+			express: false,
+			livereload: false
 		}
 	},
-	{
-		outputFile: "react-bundle.js",
-		factors: {
-			"./settings/index.js": "settings.js",
+	servers: {
+		express: {
+			proxy: "http://localhost:8081",
+			assets: "/assets"
 		}
 	},
-	{
-		outputFile: "_delete", // not needed, we only care for the css that's already split-out by css-extract
-		entryFiles: cssFiles,
+	bundles: {
+		frontend: {
+			entryFile: "frontend",
+			outputFile: "frontend.js",
+			preset: ["js"],
+			prodCfg: prodCfg,
+			transform: [
+				["babelify", {
+					global: true,
+					ignore: [/node_modules\/(?!(photoswipe.*))/]
+				}]
+			],
+		},
+		settings: {
+			entryFile: "settings",
+			outputFile: "settings.js",
+			prodCfg: prodCfg,
+			presets: [
+				"react",
+				["postcss", {
+					output: "settings-style.css"
+				}]
+			]
+		},
+		css: {
+			entryFiles: cssEntryFiles,
+			outputFile: "_discard",
+			presets: [["postcss", {
+				output: "_split"
+			}]]
+		}
 	}
-];
-
-return gtsBundler(devMode, bundles);
+});