This commit is contained in:
nvms 2024-10-09 16:53:35 -04:00
parent a666de5a57
commit 81b941558c
4 changed files with 37 additions and 17 deletions

View File

@ -18,8 +18,8 @@ This is a simple esbuild-powered dev server. It has livereloading. It's fast. It
```yml ```yml
# Defaults # Defaults
bundle: true bundle: true
platform: browser platform: browser # browser | node
format: esm format: esm # esm | cjs | iife
outdir: public outdir: public
minify: false minify: false
minifyWhitespace: false minifyWhitespace: false
@ -29,7 +29,7 @@ sourcemap: true
# Optional. Applies to `--serve`, or `--run --watch`. # Optional. Applies to `--serve`, or `--run --watch`.
# Files that match these paths trigger reload or rerun when they are changed. # Files that match these paths trigger reload or rerun when they are changed.
watch: watch:
paths: ['src/**/*.{ts,tsx}', 'public/index.html'] paths: ['src/**/*.{ts,tsx,css}', 'public/index.html']
# Each mode inherits from the configuration above, but can # Each mode inherits from the configuration above, but can
# override certain options as needed. # override certain options as needed.
@ -46,7 +46,7 @@ build:
run: run:
# For example: <runtime> <outfile> # For example: <runtime> <outfile>
runtime: bun runtime: bun # node | bun | ??
jsx: automatic jsx: automatic
jsxFactory: React.createElement jsxFactory: React.createElement
@ -58,22 +58,23 @@ loader:
.ts: tsx .ts: tsx
``` ```
When serving an index.html, you can use `{{ livereload }}` to inject the livereload EventSource logic, and `{{ js }}` to inject a script tag for the built output file. When serving an index.html, you can use `{{ livereload }}` to inject the livereload EventSource logic, and `{{ js }}` and `{{ css }}` to inject tags for built assets.
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application</title> <title>Application</title>
{{ css }}
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
{{ livereload }} {{ livereload }}
{{ js }} {{ js }}
</body> </body>
</html> </html>

View File

@ -12,7 +12,8 @@ import (
type Builder struct { type Builder struct {
Config *config.Config Config *config.Config
EntryPoint string EntryPoint string
BuiltFiles []string BuiltJS []string
BuiltCSS []string
} }
func NewBuilder(c *config.Config, e string) *Builder { func NewBuilder(c *config.Config, e string) *Builder {
@ -28,7 +29,8 @@ func (b *Builder) Build(buildOptions *api.BuildOptions) error {
return fmt.Errorf("esr :: build failed: %v", result.Errors) return fmt.Errorf("esr :: build failed: %v", result.Errors)
} }
b.BuiltFiles = []string{} b.BuiltJS = []string{}
b.BuiltCSS = []string{}
for _, file := range result.OutputFiles { for _, file := range result.OutputFiles {
if filepath.Ext(file.Path) != ".map" { if filepath.Ext(file.Path) != ".map" {
@ -45,7 +47,11 @@ func (b *Builder) Build(buildOptions *api.BuildOptions) error {
fmt.Printf("esr :: wrote: %s\n", filepath.Join(b.Config.Outdir, filepath.Base(file.Path))) fmt.Printf("esr :: wrote: %s\n", filepath.Join(b.Config.Outdir, filepath.Base(file.Path)))
if filepath.Ext(file.Path) == ".js" { if filepath.Ext(file.Path) == ".js" {
b.BuiltFiles = append(b.BuiltFiles, file.Path) b.BuiltJS = append(b.BuiltJS, file.Path)
}
if filepath.Ext(file.Path) == ".css" {
b.BuiltCSS = append(b.BuiltCSS, file.Path)
} }
} else { } else {
if err := os.WriteFile(file.Path, file.Contents, os.ModePerm); err != nil { if err := os.WriteFile(file.Path, file.Contents, os.ModePerm); err != nil {

View File

@ -84,8 +84,21 @@ func (s *Server) BuildIndex() (string, error) {
"js": func() template.HTML { "js": func() template.HTML {
var scripts strings.Builder var scripts strings.Builder
if s.Builder != nil { if s.Builder != nil {
for _, file := range s.Builder.BuiltFiles { for _, file := range s.Builder.BuiltJS {
fmt.Fprintf(&scripts, "<script src=\"/%s\"></script>", filepath.Base(file)) if s.Config.Format == "esm" {
fmt.Fprintf(&scripts, "<script src=\"/%s\" type=\"module\"></script>", filepath.Base(file))
} else {
fmt.Fprintf(&scripts, "<script src=\"/%s\"></script>", filepath.Base(file))
}
}
}
return template.HTML(scripts.String())
},
"css": func() template.HTML {
var scripts strings.Builder
if s.Builder != nil {
for _, file := range s.Builder.BuiltCSS {
fmt.Fprintf(&scripts, "<link rel=\"stylesheet\" type=\"text/css\" href=\"/%s\"></script>", filepath.Base(file))
} }
} }
return template.HTML(scripts.String()) return template.HTML(scripts.String())

View File

@ -15,4 +15,4 @@ package livereload
// console.info('esr: livereload enabled'); // console.info('esr: livereload enabled');
// </script> // </script>
// ` // `
const JsSnippet = `<script>const source = new EventSource('/livereload'); source.onmessage = (e) => { if (e.data === 'reload') location.reload(); }; console.info('esr :: livereload listening');</script>` const JsSnippet = `<script>const source = new EventSource('/livereload'); source.onmessage = (e) => { if (e.data === 'reload') location.reload(); }; console.info('esr :: listening');</script>`