Add support for esbuild code splitting

resources/resource_transformers/js/build.go

@@ -20,7 +20,6 @@ import (
 	"os"
 	"path"
 	"path/filepath"
-	"regexp"
 	"strings"
 
 	"github.com/spf13/afero"
@@ -97,14 +96,23 @@ func (t *buildTransformation) Transform(ctx *resources.ResourceTransformationCtx
 		return err
 	}
 
-	if buildOptions.Sourcemap == api.SourceMapExternal && buildOptions.Outdir == "" {
+	if (buildOptions.Sourcemap == api.SourceMapExternal || buildOptions.Splitting) && buildOptions.Outdir == "" {
 		buildOptions.Outdir, err = os.MkdirTemp(os.TempDir(), "compileOutput")
 		if err != nil {
 			return err
 		}
 		defer os.Remove(buildOptions.Outdir)
 	}
 
+	if buildOptions.Sourcemap != api.SourceMapNone {
+		m := resolveComponentInAssets(t.c.rs.Assets.Fs, ctx.SourcePath)
+		filename, err := filepath.Rel(opts.resolveDir, m.Filename)
+		if err != nil {
+			return fmt.Errorf("failed to resolve filename: %w", err)
+		}
+		buildOptions.Stdin.Sourcefile = filename
+	}
+
 	if opts.Inject != nil {
 		// Resolve the absolute filenames.
 		for i, ext := range opts.Inject {
@@ -192,25 +200,66 @@ func (t *buildTransformation) Transform(ctx *resources.ResourceTransformationCtx
 		return errors[0]
 	}
 
+	// If we are splitting, then there will be multiple output files,
+	// and we need to figure out which is the "main" one.
+	var (
+		outFile    string
+		outputFile api.OutputFile
+	)
+	if buildOptions.Sourcemap == api.SourceMapExternal || buildOptions.Splitting {
+		outFile = filepath.Join(buildOptions.Outdir, "stdin.js")
+
+		for _, f := range result.OutputFiles {
+			if f.Path == outFile {
+				outputFile = f
+				break
+			}
+		}
+	}
+
+	if buildOptions.Splitting {
+		// "Publish" the additional files that were created so the imports work
+		for _, f := range result.OutputFiles {
+			if f.Path == outFile {
+				continue
+			}
+
+			relPath, err := filepath.Rel(filepath.Dir(outputFile.Path), f.Path)
+			if err != nil {
+				return err
+			}
+			relPath = filepath.Join(filepath.Dir(ctx.OutPath), relPath)
+
+			if err = ctx.Publish(relPath, string(f.Contents)); err != nil {
+				return err
+			}
+		}
+	}
+
 	if buildOptions.Sourcemap == api.SourceMapExternal {
-		content := string(result.OutputFiles[1].Contents)
+		content := string(outputFile.Contents)
 		symPath := path.Base(ctx.OutPath) + ".map"
-		re := regexp.MustCompile(`//# sourceMappingURL=.*\n?`)
-		content = re.ReplaceAllString(content, "//# sourceMappingURL="+symPath+"\n")
+		content += "\n//# sourceMappingURL=" + symPath + "\n"
 
-		if err = ctx.PublishSourceMap(string(result.OutputFiles[0].Contents)); err != nil {
-			return err
+		for _, f := range result.OutputFiles {
+			if f.Path == outFile+".map" {
+				if err = ctx.PublishSourceMap(string(f.Contents)); err != nil {
+					return err
+				}
+				break
+			}
 		}
 		_, err := ctx.To.Write([]byte(content))
 		if err != nil {
 			return err
 		}
 	} else {
-		_, err := ctx.To.Write(result.OutputFiles[0].Contents)
+		_, err := ctx.To.Write(outputFile.Contents)
 		if err != nil {
 			return err
 		}
 	}
+
 	return nil
 }
 

resources/resource_transformers/js/js_integration_test.go

@@ -202,6 +202,7 @@ TS2: {{ template "print" $ts2 }}
 		}).Build()
 
 	b.AssertFileContent("public/js/myts.js", `//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJz`)
+	b.AssertFileContent("public/js/myts2.js", `//# sourceMappingURL=myts2.js.map`)
 	b.AssertFileContent("public/js/myts2.js.map", `"version": 3,`)
 	b.AssertFileContent("public/index.html", `
 		console.log("included");

resources/resource_transformers/js/options.go

@@ -106,6 +106,10 @@ type Options struct {
 	// TODO(bep) remove. See https://github.com/evanw/esbuild/commit/869e8117b499ca1dbfc5b3021938a53ffe934dba
 	AvoidTDZ bool
 
+	// Code shared between multiple entry points is split off into a separate shared file that both entry points import.
+	// See https://esbuild.github.io/api/#splitting
+	Splitting bool
+
 	mediaType  media.Type
 	outDir     string
 	contents   string
@@ -378,7 +382,13 @@ func toBuildOptions(opts Options) (buildOptions api.BuildOptions, err error) {
 	var format api.Format
 	// One of: iife, cjs, esm
 	switch opts.Format {
-	case "", "iife":
+	case "":
+		if opts.Splitting {
+			format = api.FormatESModule
+		} else {
+			format = api.FormatIIFE
+		}
+	case "iife":
 		format = api.FormatIIFE
 	case "esm":
 		format = api.FormatESModule
@@ -448,14 +458,13 @@ func toBuildOptions(opts Options) (buildOptions api.BuildOptions, err error) {
 
 		Tsconfig: opts.tsConfig,
 
-		// Note: We're not passing Sourcefile to ESBuild.
-		// This makes ESBuild pass `stdin` as the Importer to the import
-		// resolver, which is what we need/expect.
 		Stdin: &api.StdinOptions{
 			Contents:   opts.contents,
 			ResolveDir: opts.resolveDir,
 			Loader:     loader,
 		},
+
+		Splitting: opts.Splitting,
 	}
 	return
 }

resources/transform.go

@@ -139,10 +139,8 @@ func (ctx *ResourceTransformationCtx) AddOutPathIdentifier(identifier string) {
 	ctx.OutPath = ctx.addPathIdentifier(ctx.InPath, identifier)
 }
 
-// PublishSourceMap writes the content to the target folder of the main resource
-// with the ".map" extension added.
-func (ctx *ResourceTransformationCtx) PublishSourceMap(content string) error {
-	target := ctx.OutPath + ".map"
+// Publish writes the content to the target folder of the main resource.
+func (ctx *ResourceTransformationCtx) Publish(target string, content string) error {
 	f, err := ctx.OpenResourcePublisher(target)
 	if err != nil {
 		return err
@@ -152,6 +150,13 @@ func (ctx *ResourceTransformationCtx) PublishSourceMap(content string) error {
 	return err
 }
 
+// PublishSourceMap writes the content to the target folder of the main resource
+// with the ".map" extension added.
+func (ctx *ResourceTransformationCtx) PublishSourceMap(content string) error {
+	target := ctx.OutPath + ".map"
+	return ctx.Publish(target, content)
+}
+
 // ReplaceOutPathExtension transforming InPath to OutPath replacing the file
 // extension, e.g. ".scss"
 func (ctx *ResourceTransformationCtx) ReplaceOutPathExtension(newExt string) {