Added auto importmap creation for actions

Author: akclace

internal/app/action/action.go

@@ -66,18 +66,20 @@ type Action struct {
 	showValidate      bool
 	auditInsert       func(*types.AuditEvent) error
 	containerManager  any // Container manager, if available, used to run commands in the container
+	jsLibs            []types.JSLibrary
 }
 
 // NewAction creates a new action
 func NewAction(logger *types.Logger, sourceFS *appfs.SourceFs, isDev bool, name, description, apath string, run, suggest starlark.Callable,
 	params []apptype.AppParam, paramValuesStr map[string]string, paramDict starlark.StringDict,
 	appPath string, styleType types.StyleType, containerProxyUrl string, hidden []string, showValidate bool,
-	auditInsert func(*types.AuditEvent) error, containerManager any) (*Action, error) {
+	auditInsert func(*types.AuditEvent) error, containerManager any, jsLibs []types.JSLibrary) (*Action, error) {
 
 	funcMap := system.GetFuncMap()
 
 	funcMap["static"] = func(name string) string {
-		fullPath := path.Join(appPath, sourceFS.HashName(name))
+		staticPath := path.Join("static", name)
+		fullPath := path.Join(appPath, sourceFS.HashName(staticPath))
 		return fullPath
 	}
 
@@ -87,7 +89,8 @@ func NewAction(logger *types.Logger, sourceFS *appfs.SourceFs, isDev bool, name,
 	}
 
 	funcMap["fileNonEmpty"] = func(name string) bool {
-		fi, err := sourceFS.Stat(name)
+		staticPath := path.Join("static", name)
+		fi, err := sourceFS.Stat(staticPath)
 		if err != nil {
 			return false
 		}
@@ -116,6 +119,10 @@ func NewAction(logger *types.Logger, sourceFS *appfs.SourceFs, isDev bool, name,
 		hiddenParams[h] = true
 	}
 
+	if len(jsLibs) == 0 {
+		jsLibs = []types.JSLibrary{*&types.JSLibrary{}}
+	}
+
 	return &Action{
 		Logger:            &appLogger,
 		isDev:             isDev,
@@ -135,6 +142,7 @@ func NewAction(logger *types.Logger, sourceFS *appfs.SourceFs, isDev bool, name,
 		showValidate:      showValidate,
 		auditInsert:       auditInsert,
 		containerManager:  containerManager,
+		jsLibs:            jsLibs,
 		// Links, AppTemplate and Theme names are initialized later
 	}, nil
 }
@@ -449,6 +457,7 @@ func (a *Action) execAction(w http.ResponseWriter, r *http.Request, isSuggest, i
 		"path":        a.pagePath,
 		"lightTheme":  a.LightTheme,
 		"darkTheme":   a.DarkTheme,
+		"jsLibs":      a.jsLibs,
 	}
 
 	if !isHtmxRequest {
@@ -806,6 +815,7 @@ func (a *Action) getForm(w http.ResponseWriter, r *http.Request) {
 		"hasFileUpload": hasFileUpload,
 		"showSuggest":   a.suggest != nil,
 		"showValidate":  a.showValidate,
+		"jsLibs":        a.jsLibs,
 	}
 	err := a.actionTemplate.ExecuteTemplate(w, "form.go.html", input)
 	if err != nil {

internal/app/action/layout.go.html

@@ -47,4 +47,20 @@
   <script src="{{ astatic "astatic/json.js" }}"></script>
   <script src="{{ astatic "astatic/toggle.js" }}"></script>
   <script src="{{ astatic "astatic/htmx.min.js" }}"></script>
+
+  {{ if gt (len .jsLibs) 0 }}
+  <script type="importmap">
+  {
+    "imports": {
+     {{ range $i, $lib := .jsLibs }}
+     {{ $libPath :=  printf "%s%s" "gen/esm/" $lib.SanitizedFileName }}
+     "{{ $lib.PackageName }}": "{{ static $libPath}}"
+     {{ if not (eq $i (sub (len $.jsLibs) 1)) }},{{end}}
+     {{ end }}
+    }
+  }
+  </script>
+
+  {{end}}
+
 {{ end -}}

internal/app/app.go

@@ -69,6 +69,7 @@ type App struct {
 	template         *template.Template            // unstructured templates, no base_templates defined
 	templateMap      map[string]*template.Template // structured templates, base_templates defined
 	staticOnly       bool                          // app has only static files, no HTML routes
+	jsLibs           []types.JSLibrary             // JS libraries used by the app
 
 	watcher       *fsnotify.Watcher
 	sseListeners  []chan SSEMessage

internal/app/dev/appdev.go

@@ -45,8 +45,8 @@ type AppDev struct {
 	AppStyle     *AppStyle
 
 	filesDownloaded map[string][]string
-	JsLibs          []JSLibrary
-	jsCache         map[JSLibrary]string
+	JsLibs          []types.JSLibrary
+	jsCache         map[types.JSLibrary]string
 }
 
 func NewAppDev(logger *types.Logger, sourceFS *appfs.WritableSourceFs, workFS *appfs.WorkFs, appStyle *AppStyle, systemConfig *types.SystemConfig) *AppDev {
@@ -57,8 +57,8 @@ func NewAppDev(logger *types.Logger, sourceFS *appfs.WritableSourceFs, workFS *a
 		AppStyle:        appStyle,
 		systemConfig:    systemConfig,
 		filesDownloaded: make(map[string][]string),
-		jsCache:         make(map[JSLibrary]string),
-		JsLibs:          []JSLibrary{},
+		jsCache:         make(map[types.JSLibrary]string),
+		JsLibs:          []types.JSLibrary{},
 	}
 	return dev
 }
@@ -102,11 +102,11 @@ func (a *AppDev) SetupJsLibs() error {
 	hasHtmx := false
 	hasHtmxSSE := false
 	for _, jsLib := range a.JsLibs {
-		if jsLib.libType == Library {
-			if strings.Contains(jsLib.directUrl, "htmx.org") && !strings.Contains(jsLib.directUrl, "ext") {
+		if jsLib.LibType == types.Library {
+			if strings.Contains(jsLib.DirectUrl, "htmx.org") && !strings.Contains(jsLib.DirectUrl, "ext") {
 				hasHtmx = true
 			}
-			if strings.Contains(jsLib.directUrl, "htmx.org") && strings.Contains(jsLib.directUrl, "ext/sse.js") {
+			if strings.Contains(jsLib.DirectUrl, "htmx.org") && strings.Contains(jsLib.DirectUrl, "ext/sse.js") {
 				hasHtmxSSE = true
 			}
 		}
@@ -126,7 +126,8 @@ func (a *AppDev) SetupJsLibs() error {
 			continue
 		}
 
-		targetFile, err := jsLib.Setup(a, a.sourceFS, a.workFS)
+		jsLibManager := JsLibManager{jsLib}
+		targetFile, err := jsLibManager.Setup(a, a.sourceFS, a.workFS)
 		if err != nil {
 			if targetFile == "" {
 				// Setup failed and cannot check if file exists, error out

internal/app/dev/jslibs.go

@@ -11,78 +11,61 @@ import (
 	"strings"
 
 	"github.com/claceio/clace/internal/app/appfs"
+	"github.com/claceio/clace/internal/types"
 	"github.com/evanw/esbuild/pkg/api"
 	"github.com/evanw/esbuild/pkg/cli"
 )
 
-type LibraryType string
-
-const (
-	ESModule LibraryType = "ecmascript_module"
-	Library  LibraryType = "library"
-)
-
-const (
-	LIB_PATH = "static/gen/lib"
-	ESM_PATH = "static/gen/esm"
-)
-
-// JSLibrary handles the downloading for JS libraries and esbuild based bundling for ESM libraries
-type JSLibrary struct {
-	libType           LibraryType
-	directUrl         string
-	packageName       string
-	version           string
-	esbuildArgs       [10]string // use an array so that the struct can be used as key in the jsCache map
-	sanitizedFileName string
-}
-
-func NewLibrary(url string) *JSLibrary {
-	j := JSLibrary{
-		libType:           Library,
-		directUrl:         url,
-		sanitizedFileName: sanitizeFileName(url),
+func NewLibrary(url string) *types.JSLibrary {
+	j := types.JSLibrary{
+		LibType:           types.Library,
+		DirectUrl:         url,
+		SanitizedFileName: sanitizeFileName(url),
 	}
 	return &j
 }
 
-func NewLibraryESM(packageName string, version string, esbuildArgs []string) *JSLibrary {
+func NewLibraryESM(packageName string, version string, esbuildArgs []string) *types.JSLibrary {
 	args := [10]string{}
 	if esbuildArgs != nil {
 		copy(args[:], esbuildArgs)
 	}
 
-	j := JSLibrary{
-		libType:           ESModule,
-		packageName:       packageName,
-		version:           version,
-		esbuildArgs:       args,
-		sanitizedFileName: sanitizeFileName(packageName) + "-" + version + ".js",
+	j := types.JSLibrary{
+		LibType:           types.ESModule,
+		PackageName:       packageName,
+		Version:           version,
+		EsbuildArgs:       args,
+		SanitizedFileName: sanitizeFileName(packageName) + "-" + version + ".js",
 	}
 	return &j
 }
 
-func (j *JSLibrary) Setup(dev *AppDev, sourceFS *appfs.WritableSourceFs, workFS *appfs.WorkFs) (string, error) {
-	if j.libType == Library {
-		targetFile := path.Join(LIB_PATH, j.sanitizedFileName)
+type JsLibManager struct {
+	types.JSLibrary
+}
+
+func (j *JsLibManager) Setup(dev *AppDev, sourceFS *appfs.WritableSourceFs, workFS *appfs.WorkFs) (string, error) {
+	if j.LibType == types.Library {
+		targetFile := path.Join(types.LIB_PATH, j.SanitizedFileName)
 		targetDir := path.Dir(targetFile)
 		if err := os.MkdirAll(targetDir, 0755); err != nil {
-			return "", fmt.Errorf("error creating directory %s : %s", LIB_PATH, err)
+			return "", fmt.Errorf("error creating directory %s : %s", types.LIB_PATH, err)
 		}
-		if err := dev.downloadFile(j.directUrl, sourceFS, targetFile); err != nil {
-			return "", fmt.Errorf("error downloading %s : %s", j.directUrl, err)
+		if err := dev.downloadFile(j.DirectUrl, sourceFS, targetFile); err != nil {
+			return "", fmt.Errorf("error downloading %s : %s", j.DirectUrl, err)
 		}
 		return targetFile, nil
-	} else if j.libType == ESModule {
+	} else if j.LibType == types.ESModule {
 		return j.setupEsbuild(dev, sourceFS, workFS)
 	} else {
-		return "", fmt.Errorf("invalid library type : %s", j.libType)
+		return "", fmt.Errorf("invalid library type : %s", j.LibType)
 	}
 }
 
-func (j *JSLibrary) setupEsbuild(dev *AppDev, sourceFS *appfs.WritableSourceFs, workFS *appfs.WorkFs) (string, error) {
-	targetDir := path.Join(sourceFS.Root, ESM_PATH)
-	targetFile := path.Join(targetDir, j.sanitizedFileName)
+func (j *JsLibManager) setupEsbuild(dev *AppDev, sourceFS *appfs.WritableSourceFs, workFS *appfs.WorkFs) (string, error) {
+	targetDir := path.Join(sourceFS.Root, types.ESM_PATH)
+	targetFile := path.Join(targetDir, j.SanitizedFileName)
 
 	sourceFile, err := j.generateSourceFile(workFS)
 	if err != nil {
@@ -92,7 +75,7 @@ func (j *JSLibrary) setupEsbuild(dev *AppDev, sourceFS *appfs.WritableSourceFs,
 	esbuildArgs := []string{sourceFile, "--bundle", "--format=esm"}
 
 	args := []string{}
-	for _, arg := range j.esbuildArgs {
+	for _, arg := range j.EsbuildArgs {
 		if arg == "" {
 			break
 		}
@@ -135,11 +118,11 @@ func (j *JSLibrary) setupEsbuild(dev *AppDev, sourceFS *appfs.WritableSourceFs,
 	if len(result.Errors) > 0 {
 		// Return the target file name. The caller can check if the file exists to determine if the
 		// setup was successful even though this step failed
-		dev.Error().Msgf("error building %s : %v", j.packageName, result.Warnings)
-		return targetFile, fmt.Errorf("error building %s : %v", j.packageName, result.Errors)
+		dev.Error().Msgf("error building %s : %v", j.PackageName, result.Warnings)
+		return targetFile, fmt.Errorf("error building %s : %v", j.PackageName, result.Errors)
 	}
 	if len(result.Warnings) > 0 {
-		dev.Warn().Msgf("warning building %s : %v", j.packageName, result.Warnings)
+		dev.Warn().Msgf("warning building %s : %v", j.PackageName, result.Warnings)
 	}
 
 	for _, file := range result.OutputFiles {
@@ -153,9 +136,9 @@ func (j *JSLibrary) setupEsbuild(dev *AppDev, sourceFS *appfs.WritableSourceFs,
 	return options.Outfile, nil
 }
 
-func (j *JSLibrary) generateSourceFile(workFS *appfs.WorkFs) (string, error) {
-	sourceFileName := j.sanitizedFileName
-	sourceContent := fmt.Sprintf(`export * from "%s"`, j.packageName)
+func (j *JsLibManager) generateSourceFile(workFS *appfs.WorkFs) (string, error) {
+	sourceFileName := j.SanitizedFileName
+	sourceContent := fmt.Sprintf(`export * from "%s"`, j.PackageName)
 	if err := workFS.Write(sourceFileName, []byte(sourceContent)); err != nil {
 		return "", fmt.Errorf("error writing source file %s : %s", sourceFileName, err)
 	}

internal/app/setup.go

@@ -83,12 +83,14 @@ func (a *App) loadStarlarkConfig(dryRun types.DryRun) error {
 		return err
 	}
 
+	a.jsLibs, err = a.loadLibraryInfo()
+	if err != nil {
+		return err
+	}
+
 	if a.IsDev {
 		a.appDev.CustomLayout = a.CustomLayout
-		a.appDev.JsLibs, err = a.loadLibraryInfo()
-		if err != nil {
-			return err
-		}
+		a.appDev.JsLibs = a.jsLibs
 	}
 
 	var settingsMap map[string]interface{}
@@ -554,7 +556,7 @@ func (a *App) addAction(count int, val starlark.Value, router *chi.Mux) (err err
 	}
 	action, err := action.NewAction(a.Logger, a.sourceFS, a.IsDev, name, description, path, run, suggest,
 		slices.Collect(maps.Values(a.paramInfo)), a.paramValuesStr, a.paramDict, a.Path, a.appStyle.GetStyleType(),
-		containerProxyUrl, hidden, showValidate, a.auditInsert, a.containerManager)
+		containerProxyUrl, hidden, showValidate, a.auditInsert, a.containerManager, a.jsLibs)
 	if err != nil {
 		return fmt.Errorf("error creating action %s: %w", name, err)
 	}
@@ -1056,7 +1058,7 @@ func (a *App) userFileHandler(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
-func (a *App) loadLibraryInfo() ([]dev.JSLibrary, error) {
+func (a *App) loadLibraryInfo() ([]types.JSLibrary, error) {
 	lib, err := a.appDef.Attr("libraries")
 	if err != nil {
 		return nil, err
@@ -1073,7 +1075,7 @@ func (a *App) loadLibraryInfo() ([]dev.JSLibrary, error) {
 		return nil, fmt.Errorf("libraries is not a list")
 	}
 
-	libraries := []dev.JSLibrary{}
+	libraries := []types.JSLibrary{}
 	iter := libList.Iterate()
 	var libValue starlark.Value
 	count := 0

internal/app/tests/appaction_test.go

@@ -613,6 +613,37 @@ app = ace.app("testApp",
         <div id="action_result" hx-swap-oob="innerHTML"> <output role="alert"> </output> </div>html/template: "custom" is undefined`, response.Body.String())
 }
 
+func TestCustomESMImport(t *testing.T) {
+	logger := testutil.TestLogger()
+	fileData := map[string]string{
+		"app.star": `
+def handler(dry_run, args):
+	return ace.result(status="done", values=[{"a": 1, "b": "abc"}], report="custom")
+
+app = ace.app("testApp",
+	actions=[ace.action("testAction", "/", handler)],
+	libraries=[ace.library("d3", "2.3"), ace.library("e4", "3.4")])
+		`,
+		"params.star":              `param("param1", description="param1 description", type=STRING, default="myvalue")`,
+		"myfile.go.html":           `{{block "custom" .}} customdata {{end}}`,
+		"static/gen/esm/d3-2.3.js": "abc",
+		"static/gen/esm/e4-3.4.js": "def",
+	}
+	a, _, err := CreateTestApp(logger, fileData)
+	if err != nil {
+		t.Fatalf("Error %s", err)
+	}
+
+	request := httptest.NewRequest("GET", "/test/", nil)
+	response := httptest.NewRecorder()
+	a.ServeHTTP(response, request)
+
+	testutil.AssertEqualsInt(t, "code", 200, response.Code)
+	testutil.AssertStringContains(t, response.Body.String(), "script type=\"importmap\"")
+	testutil.AssertStringContains(t, response.Body.String(), "\"d3\": \"/test/static/gen/esm/d3-2-ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad.3.js\"")
+	testutil.AssertStringContains(t, response.Body.String(), "\"e4\": \"/test/static/gen/esm/e4-3-cb8379ac2098aa165029e3938a51da0bcecfc008fd6795f401178647f96c5b34.4.js\"")
+}
+
 func TestParamOptions(t *testing.T) {
 	logger := testutil.TestLogger()
 	fileData := map[string]string{

internal/types/types.go

@@ -638,3 +638,25 @@ type AppUpdateMessage struct {
 	MessageType string           `json:"message_type"`
 	Payload     AppUpdatePayload `json:"payload"`
 }
+
+type LibraryType string
+
+const (
+	ESModule LibraryType = "ecmascript_module"
+	Library  LibraryType = "library"
+)
+
+const (
+	LIB_PATH = "static/gen/lib"
+	ESM_PATH = "static/gen/esm"
+)
+
+// JSLibrary handles the downloading for JS libraries and esbuild based bundling for ESM libraries
+type JSLibrary struct {
+	LibType           LibraryType
+	DirectUrl         string
+	PackageName       string
+	Version           string
+	EsbuildArgs       [10]string // use an array so that the struct can be used as key in the jsCache map
+	SanitizedFileName string
+}