Add new ImportMapScriptElement

ImportMapScriptElement renders a json importmap which allows to tell browsers how to resolve javascript dependencies. Signed-off-by: Sylvain Rabot <[email protected]>
a-h · Jul 14, 2024 · bab720e · bab720e
1 parent 979cd97
commit bab720e
Show file tree

Hide file tree

Showing 14 changed files with 2,433 additions and 50 deletions.
diff --git a/examples/typescript/.gitignore b/examples/typescript/.gitignore
@@ -0,0 +1 @@
+assets/js/*.js.map
diff --git a/examples/typescript/README.md b/examples/typescript/README.md
@@ -4,6 +4,8 @@ This demonstrates how to bundle TypeScript code, and use it in a templ project.
 
 The TypeScript code is bundled using `esbuild`, with templ used to serve HTML.
 
+The `importmap` used by the browser to resolve dependencies is generated using [jspm-cli](https://jspm.org/docs/jspm-cli/stable/).
+
 The code demonstrates application of `onclick` event handlers, and how to pass data from Go to TypeScript.
 
 This demo passes data from server-side Go code to TypeScript code by placing the data in `<script type="application/json">` tags, or data attributes (called `alert-data` in this example).
@@ -33,7 +35,7 @@ npm install
 If you have `esbuild` installed globally, you can bundle and minify the TypeScript code without using NPM. Remember to run `npm install` to install the dependencies first.
 
 ```bash
-esbuild --bundle --minify --outfile=assets/js/index.js ts/src/index.ts
+esbuild --minify --outdir=assets/js ts/src/*index*.ts
 ```
 
 ### ts-build-npm
@@ -46,6 +48,14 @@ Dir: ./ts
 npm run build
 ```
 
+### Add dependencies to the import-map
+
+Dir: ./ts
+
+```
+npx jspm install --provider=jsdelivr --env=module lightweight-charts
+```
+
 ### run
 
 ```bash

diff --git a/examples/typescript/assets/embed.go b/examples/typescript/assets/embed.go
@@ -0,0 +1,8 @@
+package assets
+
+import (
+	_ "embed"
+)
+
+//go:embed js/importmap.json
+var ImportMapJSON string
diff --git a/examples/typescript/assets/js/alert.js b/examples/typescript/assets/js/alert.js
diff --git a/examples/typescript/assets/js/graph.js b/examples/typescript/assets/js/graph.js
diff --git a/examples/typescript/assets/js/index.js b/examples/typescript/assets/js/index.js
diff --git a/examples/typescript/components/index.templ b/examples/typescript/components/index.templ
@@ -1,20 +1,40 @@
 package components
 
+import (
+	"github.com/a-h/templ/examples/typescript/ts"
+)
+
 type Data struct {
 	Message string `json:"msg"`
 }
 
+var (
+	// The importmap is generated outside the template to avoid
+	// validating the JSON every time the template is executed.
+	importMapScriptElement = templ.NewImportMapScriptElement("", ts.ImportMapJSON)
+)
+
 templ Page(attributeData Data, scriptData Data) {
 	<!DOCTYPE html>
 	<html>
 		<head>
-			<title>Script usage</title>
-			<script src="/assets/js/index.js" defer></script>
+			<title>Typescript</title>
+			@importMapScriptElement
+			<script src="/assets/js/alert.js" defer></script>
 		</head>
 		<body>
+			<h2>Alert</h2>
 			<button id="attributeAlerter" alert-data={ templ.JSONString(attributeData) }>Show alert from data in alert-data attribute</button>
 			@templ.JSONScript("scriptData", scriptData)
 			<button id="scriptAlerter">Show alert from data in script</button>
+
+			<h2>Graph</h2>
+			<div id="graph" style="height: 200px"></div>
+			<script type="module">
+				import graph from "./assets/js/graph.js";
+				let container = document.getElementById("graph");
+				new graph.Graph(container);
+			</script>
 		</body>
 	</html>
 }
diff --git a/examples/typescript/components/index_templ.go b/examples/typescript/components/index_templ.go
diff --git a/examples/typescript/ts/embed.go b/examples/typescript/ts/embed.go
@@ -0,0 +1,8 @@
+package ts
+
+import (
+	_ "embed"
+)
+
+//go:embed importmap.json
+var ImportMapJSON string
diff --git a/examples/typescript/ts/importmap.json b/examples/typescript/ts/importmap.json
@@ -0,0 +1,15 @@
+{
+  "env": [
+    "browser",
+    "development",
+    "module"
+  ],
+  "imports": {
+    "lightweight-charts": "https://cdn.jsdelivr.net/npm/[email protected]/dist/lightweight-charts.development.mjs"
+  },
+  "scopes": {
+    "https://cdn.jsdelivr.net/": {
+      "fancy-canvas": "https://cdn.jsdelivr.net/npm/[email protected]/index.mjs"
+    }
+  }
+}