EsBuild with on-request rebuild and hot-reloading

This commit is contained in:
Asaf Gartner 2024-05-30 07:19:31 +03:00 committed by Ben Visness
parent d0c7605029
commit 7410fbcd4a
19 changed files with 211 additions and 83 deletions

1
go.mod
View File

@ -44,6 +44,7 @@ require (
github.com/danwakefield/fnmatch v0.0.0-20160403171240-cbb64ac3d964 // indirect
github.com/davecgh/go-spew v1.1.1 // indirect
github.com/dlclark/regexp2 v1.4.0 // indirect
github.com/evanw/esbuild v0.21.4 // indirect
github.com/huandu/xstrings v1.3.2 // indirect
github.com/imdario/mergo v0.3.12 // indirect
github.com/inconshreveable/mousetrap v1.0.0 // indirect

3
go.sum
View File

@ -90,6 +90,8 @@ github.com/dlclark/regexp2 v1.4.0 h1:F1rxgk7p4uKjwIQxBs9oAXe5CqrXlCduYEJvrF4u93E
github.com/dlclark/regexp2 v1.4.0/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
github.com/emersion/go-ical v0.0.0-20220601085725-0864dccc089f h1:feGUUxxvOtWVOhTko8Cbmp33a+tU0IMZxMEmnkoAISQ=
github.com/emersion/go-ical v0.0.0-20220601085725-0864dccc089f/go.mod h1:2MKFUgfNMULRxqZkadG1Vh44we3y5gJAtTBlVsx1BKQ=
github.com/evanw/esbuild v0.21.4 h1:pe4SEQMoR1maEjhgWPEPWmUy11Jp6nidxd1mOvMrFFU=
github.com/evanw/esbuild v0.21.4/go.mod h1:D2vIQZqV/vIf/VRHtViaUtViZmG7o+kKmlBfVQuRi48=
github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=
github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
github.com/ghodss/yaml v1.0.0/go.mod h1:4dBDuWmgqj2HViK6kFavaiC9ZROes6MMH2rRYeMEF04=
@ -369,6 +371,7 @@ golang.org/x/sys v0.0.0-20200223170610-d5e6a3e2c0ae/go.mod h1:h1NjWce9XRLGQEsW7w
golang.org/x/sys v0.0.0-20200413165638-669c56c373c4/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.5.0 h1:MUK/U/4lj1t1oPg0HfuXDN/Z1wv31ZJ/YcPiGccS4DU=
golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=

View File

@ -3,7 +3,7 @@ package main
import (
_ "git.handmade.network/hmn/hmn/src/admintools"
_ "git.handmade.network/hmn/hmn/src/assets"
_ "git.handmade.network/hmn/hmn/src/buildscss"
_ "git.handmade.network/hmn/hmn/src/buildscss/cmd"
_ "git.handmade.network/hmn/hmn/src/discord/cmd"
_ "git.handmade.network/hmn/hmn/src/initimage"
_ "git.handmade.network/hmn/hmn/src/migration"

Binary file not shown.

View File

@ -8480,7 +8480,7 @@ header.clicked .root-item:not(.clicked) > .submenu {
/* src/rawdata/scss/icons.css */
@font-face {
font-family: icons;
src: url("./icons-7ANC2ICW.ttf?v=4");
src: url(/public/icons.ttf?v=4);
}
span.icon {
font-family: "icons";

View File

@ -1,85 +1,64 @@
package buildscss
/*
import (
"context"
var compressed bool
"git.handmade.network/hmn/hmn/src/config"
"git.handmade.network/hmn/hmn/src/jobs"
"git.handmade.network/hmn/hmn/src/logging"
"github.com/evanw/esbuild/pkg/api"
)
func init() {
libsass.RegisterSassFunc("base64($filename)", func(ctx context.Context, in libsass.SassValue) (*libsass.SassValue, error) {
var filename string
err := libsass.Unmarshal(in, &filename)
if err != nil {
return nil, err
}
var ActiveServerPort uint16
fileBytes, err := os.ReadFile(filename)
if err != nil {
return nil, err
}
encoded, _ := libsass.Marshal(base64.StdEncoding.EncodeToString(fileBytes))
return &encoded, nil
})
buildCommand := &cobra.Command{
Use: "buildscss",
Short: "Build the website CSS",
Run: func(cmd *cobra.Command, args []string) {
style := libsass.NESTED_STYLE
if compressed {
style = libsass.COMPRESSED_STYLE
}
err := compile("src/rawdata/scss/style.scss", "public/style.css", "light", style)
if err != nil {
fmt.Println(color.Bold + color.Red + "Failed to compile main SCSS." + color.Reset)
fmt.Println(err)
os.Exit(1)
}
for _, theme := range []string{"light", "dark"} {
err := compile("src/rawdata/scss/theme.scss", fmt.Sprintf("public/themes/%s/theme.css", theme), theme, style)
if err != nil {
fmt.Println(color.Bold + color.Red + "Failed to compile theme SCSS." + color.Reset)
fmt.Println(err)
os.Exit(1)
}
}
func RunServer(ctx context.Context) jobs.Job {
job := jobs.New()
if config.Config.Env != config.Dev {
job.Done()
return job
}
logger := logging.ExtractLogger(ctx).With().Str("module", "EsBuild").Logger()
esCtx, ctxErr := BuildContext()
if ctxErr != nil {
panic(ctxErr)
}
logger.Info().Msg("Starting esbuild server and watcher")
err := esCtx.Watch(api.WatchOptions{})
serverResult, err := esCtx.Serve(api.ServeOptions{
Port: config.Config.EsBuild.Port,
Servedir: "./",
OnRequest: func(args api.ServeOnRequestArgs) {
logger.Info().Interface("args", args).Msg("Response from esbuild server")
},
})
if err != nil {
panic(err)
}
buildCommand.Flags().BoolVar(&compressed, "compressed", false, "Minify the output CSS")
ActiveServerPort = serverResult.Port
go func() {
<-ctx.Done()
logger.Info().Msg("Shutting down esbuild server and watcher")
esCtx.Dispose()
job.Done()
}()
website.WebsiteCommand.AddCommand(buildCommand)
return job
}
func compile(inpath, outpath string, theme string, style int) error {
err := os.MkdirAll(filepath.Dir(outpath), 0755)
if err != nil {
panic(oops.New(err, "failed to create directory for CSS file"))
}
outfile, err := os.OpenFile(outpath, os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0644)
if err != nil {
panic(oops.New(err, "failed to open CSS file for writing"))
}
defer outfile.Close()
infile, err := os.Open(inpath)
if err != nil {
panic(oops.New(err, "failed to open SCSS file"))
}
compiler, err := libsass.New(outfile, infile,
libsass.IncludePaths([]string{
"src/rawdata/scss",
fmt.Sprintf("src/rawdata/scss/themes/%s", theme),
}),
libsass.OutputStyle(style),
)
if err != nil {
panic(oops.New(err, "failed to create SCSS compiler"))
}
return compiler.Run()
func BuildContext() (api.BuildContext, *api.ContextError) {
return api.Context(api.BuildOptions{
EntryPoints: []string{
"src/rawdata/scss/style.css",
},
Outbase: "src/rawdata/scss",
Outdir: "public",
External: []string{"/public/*"},
Bundle: true,
Write: true,
Engines: []api.Engine{
{Name: api.EngineChrome, Version: "109"},
{Name: api.EngineFirefox, Version: "109"},
{Name: api.EngineSafari, Version: "12"},
},
})
}
*/

39
src/buildscss/cmd/cmd.go Normal file
View File

@ -0,0 +1,39 @@
package cmd
import (
"fmt"
"os"
"git.handmade.network/hmn/hmn/src/buildscss"
"git.handmade.network/hmn/hmn/src/logging"
"git.handmade.network/hmn/hmn/src/website"
"github.com/spf13/cobra"
)
func init() {
buildCommand := &cobra.Command{
Use: "buildscss",
Short: "Build the website CSS",
Run: func(cmd *cobra.Command, args []string) {
ctx, err := buildscss.BuildContext()
if err != nil {
fmt.Println(err)
os.Exit(1)
}
res := ctx.Rebuild()
outputFilenames := make([]string, 0)
for _, o := range res.OutputFiles {
outputFilenames = append(outputFilenames, o.Path)
}
logging.Info().
Interface("Errors", res.Errors).
Interface("Warnings", res.Warnings).
Msg("Ran esbuild")
if len(outputFilenames) > 0 {
logging.Info().Interface("Files", outputFilenames).Msg("Wrote files")
}
},
}
website.WebsiteCommand.AddCommand(buildCommand)
}

View File

@ -91,4 +91,7 @@ var Config = HMNConfig{
FFMpegPath: "", // Will not generate asset video thumbnails if ffmpeg is not specified
CPULimitPath: "", // Not mandatory. FFMpeg will not limited if this is not provided
},
EsBuild: EsBuildConfig{
Port: 9004,
},
}

View File

@ -32,7 +32,8 @@ type HMNConfig struct {
EpisodeGuide EpisodeGuide
DevConfig DevConfig
PreviewGeneration PreviewGenerationConfig
Calendars []CalendarSource
Calendars []CalendarSource
EsBuild EsBuildConfig
}
type PostgresConfig struct {
@ -104,7 +105,7 @@ type MatrixConfig struct {
type CalendarSource struct {
Name string
Url string
Url string
}
type EpisodeGuide struct {
@ -126,6 +127,10 @@ type PreviewGenerationConfig struct {
CPULimitPath string
}
type EsBuildConfig struct {
Port uint16
}
func init() {
if Config.EpisodeGuide.Projects == nil {
Config.EpisodeGuide.Projects = make(map[string]string)

View File

@ -981,6 +981,13 @@ func BuildS3Asset(s3key string) string {
return res
}
var RegexEsBuild = regexp.MustCompile("^/esbuild$")
func BuildEsBuild() string {
defer CatchPanic()
return Url("/esbuild", nil)
}
var RegexPublic = regexp.MustCompile("^/public/.+$")
func BuildPublic(filepath string, cachebust bool) string {

View File

@ -1,6 +1,6 @@
@font-face {
font-family: icons;
src: url("icons.ttf?v=4");
src: url("/public/icons.ttf?v=4");
}
span.icon {
@ -70,4 +70,4 @@ span.icon-hitbox::before {
span.icon-rss::before {
font-family: "icons";
content: "4";
}
}

View File

@ -102,4 +102,4 @@ $breakpoint-large: screen and (min-width: 60em)
--spoiler-border: #777;
}
}
}

View File

@ -68,6 +68,29 @@
</script>
<script async src="{{ static "mathjax.js" }}"></script>
{{ if .EsBuildSSEUrl }}
<script>
new EventSource("{{ .EsBuildSSEUrl }}").addEventListener('change', e => {
const { added, removed, updated } = JSON.parse(e.data)
console.log("EsBuild", added, removed, updated);
if (!added.length && !removed.length && updated.length === 1) {
for (const link of document.getElementsByTagName("link")) {
const url = new URL(link.href)
if (url.host === location.host && url.pathname === updated[0]) {
const next = link.cloneNode()
next.href = updated[0] + '?' + Math.random().toString(36).slice(2)
next.onload = () => link.remove()
link.parentNode.insertBefore(next, link.nextSibling)
return
}
}
}
})
</script>
{{ end }}
{{ block "extrahead" . }}{{ end }}
</head>

View File

@ -23,6 +23,8 @@ type BaseData struct {
DiscordInviteUrl string
NewsletterSignupUrl string
EsBuildSSEUrl string
Project Project
User *User
Session *Session

View File

@ -1,6 +1,7 @@
package website
import (
"git.handmade.network/hmn/hmn/src/buildscss"
"git.handmade.network/hmn/hmn/src/config"
"git.handmade.network/hmn/hmn/src/hmnurl"
"git.handmade.network/hmn/hmn/src/models"
@ -96,6 +97,10 @@ func getBaseData(c *RequestContext, title string, breadcrumbs []templates.Breadc
},
}
if buildscss.ActiveServerPort != 0 {
baseData.EsBuildSSEUrl = hmnurl.BuildEsBuild()
}
if c.CurrentUser != nil {
baseData.Header.UserProfileUrl = hmnurl.BuildUserProfile(c.CurrentUser.Username)
}

View File

@ -408,6 +408,8 @@ type ResponseData struct {
FutureNotices []templates.Notice
header http.Header
hijacked bool
}
var _ http.ResponseWriter = &ResponseData{}
@ -480,6 +482,12 @@ func doRequest(rw http.ResponseWriter, c *RequestContext, h Handler) {
// Run the chosen handler
res := h(c)
if res.hijacked {
// NOTE(asaf): In case we forward the request/response to another handler
// (like esbuild).
return
}
if res.StatusCode == 0 {
res.StatusCode = http.StatusOK
}

View File

@ -1,16 +1,22 @@
package website
import (
"bytes"
"errors"
"fmt"
"io"
"net/http"
"net/http/httputil"
"strconv"
"strings"
"time"
"git.handmade.network/hmn/hmn/src/buildscss"
"git.handmade.network/hmn/hmn/src/db"
"git.handmade.network/hmn/hmn/src/email"
"git.handmade.network/hmn/hmn/src/hmndata"
"git.handmade.network/hmn/hmn/src/hmnurl"
"git.handmade.network/hmn/hmn/src/logging"
"git.handmade.network/hmn/hmn/src/models"
"git.handmade.network/hmn/hmn/src/oops"
"git.handmade.network/hmn/hmn/src/utils"
@ -37,8 +43,53 @@ func NewWebsiteRoutes(conn *pgxpool.Pool) http.Handler {
redirectToHMN,
)
routes.GET(hmnurl.RegexEsBuild, func(c *RequestContext) ResponseData {
if buildscss.ActiveServerPort != 0 {
var res ResponseData
proxy := httputil.ReverseProxy{
Director: func(r *http.Request) {
r.URL.Scheme = "http"
r.URL.Host = fmt.Sprintf("localhost:%d", buildscss.ActiveServerPort)
r.Host = "localhost"
},
}
logging.Debug().Msg("Redirecting esbuild SSE request to esbuild")
proxy.ServeHTTP(c.Res, c.Req)
res.hijacked = true
return res
}
return FourOhFour(c)
})
routes.GET(hmnurl.RegexPublic, func(c *RequestContext) ResponseData {
var res ResponseData
if buildscss.ActiveServerPort != 0 {
if strings.HasSuffix(c.Req.URL.Path, ".css") {
proxy := httputil.ReverseProxy{
Director: func(r *http.Request) {
r.URL.Scheme = "http"
r.URL.Host = fmt.Sprintf("localhost:%d", buildscss.ActiveServerPort)
r.Host = "localhost"
},
ModifyResponse: func(res *http.Response) error {
if res.StatusCode > 400 {
errStr, err := io.ReadAll(res.Body)
if err != nil {
return err
}
res.Body.Close()
logging.Error().Str("EsBuild error", string(errStr)).Msg("EsBuild is complaining")
res.Body = io.NopCloser(bytes.NewReader(errStr))
}
return nil
},
}
logging.Debug().Msg("Redirecting css request to esbuild")
proxy.ServeHTTP(c.Res, c.Req)
res.hijacked = true
return res
}
}
http.StripPrefix("/public/", http.FileServer(http.Dir("public"))).ServeHTTP(&res, c.Req)
addCORSHeaders(c, &res)
return res

View File

@ -12,6 +12,7 @@ import (
"git.handmade.network/hmn/hmn/src/assets"
"git.handmade.network/hmn/hmn/src/auth"
"git.handmade.network/hmn/hmn/src/buildscss"
"git.handmade.network/hmn/hmn/src/calendar"
"git.handmade.network/hmn/hmn/src/config"
"git.handmade.network/hmn/hmn/src/db"
@ -54,6 +55,7 @@ var WebsiteCommand = &cobra.Command{
hmns3.StartServer(backgroundJobContext),
assets.BackgroundPreviewGeneration(backgroundJobContext, conn),
calendar.MonitorCalendars(backgroundJobContext),
buildscss.RunServer(backgroundJobContext),
)
signals := make(chan os.Signal, 1)
@ -64,10 +66,10 @@ var WebsiteCommand = &cobra.Command{
go func() {
timeout, cancel := context.WithTimeout(context.Background(), 30*time.Second)
defer cancel()
logging.Info().Msg("shutting down web server")
server.Shutdown(timeout)
logging.Info().Msg("cancelling background jobs")
cancelBackgroundJobs()
logging.Info().Msg("shutting down web server")
server.Shutdown(timeout)
}()
<-signals