diff --git a/README.md b/README.md index 060e07d..c6c724e 100644 --- a/README.md +++ b/README.md @@ -18,8 +18,8 @@ This is a simple esbuild-powered dev server. It has livereloading. It's fast. It ```yml # Defaults bundle: true -platform: browser -format: esm +platform: browser # browser | node +format: esm # esm | cjs | iife outdir: public minify: false minifyWhitespace: false @@ -29,7 +29,7 @@ sourcemap: true # Optional. Applies to `--serve`, or `--run --watch`. # Files that match these paths trigger reload or rerun when they are changed. 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 # override certain options as needed. @@ -46,7 +46,7 @@ build: run: # For example: - runtime: bun + runtime: bun # node | bun | ?? jsx: automatic jsxFactory: React.createElement @@ -58,22 +58,23 @@ loader: .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 - - - Application + + + Application + {{ css }} -
- {{ livereload }} - {{ js }} +
+ {{ livereload }} + {{ js }} diff --git a/internal/esr/builder.go b/internal/esr/builder.go index 822a4af..571aa40 100644 --- a/internal/esr/builder.go +++ b/internal/esr/builder.go @@ -12,7 +12,8 @@ import ( type Builder struct { Config *config.Config EntryPoint string - BuiltFiles []string + BuiltJS []string + BuiltCSS []string } 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) } - b.BuiltFiles = []string{} + b.BuiltJS = []string{} + b.BuiltCSS = []string{} for _, file := range result.OutputFiles { 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))) 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 { if err := os.WriteFile(file.Path, file.Contents, os.ModePerm); err != nil { diff --git a/internal/esr/server.go b/internal/esr/server.go index e9deb23..d020192 100644 --- a/internal/esr/server.go +++ b/internal/esr/server.go @@ -84,8 +84,21 @@ func (s *Server) BuildIndex() (string, error) { "js": func() template.HTML { var scripts strings.Builder if s.Builder != nil { - for _, file := range s.Builder.BuiltFiles { - fmt.Fprintf(&scripts, "", filepath.Base(file)) + for _, file := range s.Builder.BuiltJS { + if s.Config.Format == "esm" { + fmt.Fprintf(&scripts, "", filepath.Base(file)) + } else { + fmt.Fprintf(&scripts, "", 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, "", filepath.Base(file)) } } return template.HTML(scripts.String()) diff --git a/internal/livereload/livereload.go b/internal/livereload/livereload.go index 2031d3d..4509c61 100644 --- a/internal/livereload/livereload.go +++ b/internal/livereload/livereload.go @@ -15,4 +15,4 @@ package livereload // console.info('esr: livereload enabled'); // // ` -const JsSnippet = `` +const JsSnippet = ``