From 0c14a899236d115a790b5a960b5d2b50c277c77e Mon Sep 17 00:00:00 2001
From: Adrian Hesketh <a-h@users.noreply.github.com>
Date: Sat, 18 May 2024 13:13:39 +0100
Subject: [PATCH] docs: add typescript usage example (#738)

---
 .ignore                                       |   1 +
 .version                                      |   2 +-
 examples/typescript/README.md                 |  53 +++
 examples/typescript/assets/js/index.js        |   1 +
 examples/typescript/components/index.templ    |  54 +++
 examples/typescript/components/index_templ.go |  93 ++++
 examples/typescript/go.mod                    |   7 +
 examples/typescript/go.sum                    |   2 +
 examples/typescript/main.go                   |  30 ++
 examples/typescript/ts/package-lock.json      | 436 ++++++++++++++++++
 examples/typescript/ts/package.json           |  15 +
 examples/typescript/ts/src/index.ts           |  34 ++
 flake.nix                                     |   1 +
 13 files changed, 728 insertions(+), 1 deletion(-)
 create mode 100644 examples/typescript/README.md
 create mode 100644 examples/typescript/assets/js/index.js
 create mode 100644 examples/typescript/components/index.templ
 create mode 100644 examples/typescript/components/index_templ.go
 create mode 100644 examples/typescript/go.mod
 create mode 100644 examples/typescript/go.sum
 create mode 100644 examples/typescript/main.go
 create mode 100644 examples/typescript/ts/package-lock.json
 create mode 100644 examples/typescript/ts/package.json
 create mode 100644 examples/typescript/ts/src/index.ts

diff --git a/.ignore b/.ignore
index 68d113dbf..21cb25eea 100644
--- a/.ignore
+++ b/.ignore
@@ -3,4 +3,5 @@ examples/integration-ct/static/index.js
 examples/counter/assets/css/bulma.*
 examples/counter/assets/js/htmx.min.js
 examples/counter-basic/assets/css/bulma.*
+examples/typescript/assets/index.js
 package-lock.json
diff --git a/.version b/.version
index 281ad6c5d..99d7f0c2b 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-0.2.692
+0.2.696
\ No newline at end of file
diff --git a/examples/typescript/README.md b/examples/typescript/README.md
new file mode 100644
index 000000000..59a7a7037
--- /dev/null
+++ b/examples/typescript/README.md
@@ -0,0 +1,53 @@
+# Pass Go data to TypeScript
+
+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 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).
+
+Note how the Go web server serves the `./assets` directory, which contains the bundled TypeScript code.
+
+## Tasks
+
+### generate
+
+```bash
+templ generate
+```
+
+### ts-install
+
+Since it's a TypeScript project, you need to install the dependencies.
+
+Dir: ts
+
+```bash
+npm install
+```
+
+### ts-build-cli
+
+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
+```
+
+### ts-build-npm
+
+If you don't have `esbuild` installed globally, you can use the NPM script to build the TypeScript code.
+
+Dir: ./ts
+
+```bash
+npm run build
+```
+
+### run
+
+```bash
+go run .
+```
diff --git a/examples/typescript/assets/js/index.js b/examples/typescript/assets/js/index.js
new file mode 100644
index 000000000..dd5afa587
--- /dev/null
+++ b/examples/typescript/assets/js/index.js
@@ -0,0 +1 @@
+(()=>{function a(){let t=document.querySelector("#attributeAlerter");t&&t.addEventListener("click",n=>{let e=t?.getAttribute("alert-data")??"{}",r=JSON.parse(e);alert(r.msg)})}function c(){let t=document.querySelector("#scriptAlerter");t&&t.addEventListener("click",n=>{let e=document?.getElementById("scriptData")?.textContent??"{}",r=JSON.parse(e);alert(r.msg)})}a();c();})();
diff --git a/examples/typescript/components/index.templ b/examples/typescript/components/index.templ
new file mode 100644
index 000000000..664b91d70
--- /dev/null
+++ b/examples/typescript/components/index.templ
@@ -0,0 +1,54 @@
+package components
+
+import (
+	"encoding/json"
+	"fmt"
+)
+
+type Data struct {
+	Message string `json:"msg"`
+}
+
+func JSON(v any) (string, error) {
+	s, err := json.Marshal(v)
+	if err != nil {
+		return "", err
+	}
+	return string(s), nil
+}
+
+func JSONScript(id string, data any) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
+		dataJSON, err := json.Marshal(data)
+		if err != nil {
+			return err
+		}
+		if _, err = io.WriteString(w, `<script`); err != nil {
+			return err
+		}
+		if id != "" {
+			if _, err = fmt.Fprintf(w, ` id="%s"`, templ.EscapeString(id)); err != nil {
+				return err
+			}
+		}
+		if _, err = fmt.Fprintf(w, ` type="application/json">%s</script>`, string(dataJSON)); err != nil {
+			return err
+		}
+		return nil
+	})
+}
+
+templ Page(attributeData Data, scriptData Data) {
+	<!DOCTYPE html>
+	<html>
+		<head>
+			<title>Script usage</title>
+			<script src="/assets/js/index.js" defer></script>
+		</head>
+		<body>
+			<button id="attributeAlerter" alert-data={ JSON(attributeData) }>Show alert from data in alert-data attribute</button>
+			@JSONScript("scriptData", scriptData)
+			<button id="scriptAlerter">Show alert from data in script</button>
+		</body>
+	</html>
+}
diff --git a/examples/typescript/components/index_templ.go b/examples/typescript/components/index_templ.go
new file mode 100644
index 000000000..4f7b0bba5
--- /dev/null
+++ b/examples/typescript/components/index_templ.go
@@ -0,0 +1,93 @@
+// Code generated by templ - DO NOT EDIT.
+
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"encoding/json"
+	"fmt"
+)
+
+type Data struct {
+	Message string `json:"msg"`
+}
+
+func JSON(v any) (string, error) {
+	s, err := json.Marshal(v)
+	if err != nil {
+		return "", err
+	}
+	return string(s), nil
+}
+
+func JSONScript(id string, data any) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
+		dataJSON, err := json.Marshal(data)
+		if err != nil {
+			return err
+		}
+		if _, err = io.WriteString(w, `<script`); err != nil {
+			return err
+		}
+		if id != "" {
+			if _, err = fmt.Fprintf(w, ` id="%s"`, templ.EscapeString(id)); err != nil {
+				return err
+			}
+		}
+		if _, err = fmt.Fprintf(w, ` type="application/json">%s</script>`, string(dataJSON)); err != nil {
+			return err
+		}
+		return nil
+	})
+}
+
+func Page(attributeData Data, scriptData Data) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html><head><title>Script usage</title><script src=\"/assets/js/index.js\" defer></script></head><body><button id=\"attributeAlerter\" alert-data=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(JSON(attributeData))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `examples/typescript/components/index.templ`, Line: 49, Col: 65}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Show alert from data in alert-data attribute</button>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = JSONScript("scriptData", scriptData).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button id=\"scriptAlerter\">Show alert from data in script</button></body></html>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
diff --git a/examples/typescript/go.mod b/examples/typescript/go.mod
new file mode 100644
index 000000000..1176ace4b
--- /dev/null
+++ b/examples/typescript/go.mod
@@ -0,0 +1,7 @@
+module github.com/a-h/templ/examples/typescript
+
+go 1.21.5
+
+replace github.com/a-h/templ => ../../
+
+require github.com/a-h/templ v0.0.0-00010101000000-000000000000
diff --git a/examples/typescript/go.sum b/examples/typescript/go.sum
new file mode 100644
index 000000000..5a8d551d8
--- /dev/null
+++ b/examples/typescript/go.sum
@@ -0,0 +1,2 @@
+github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
diff --git a/examples/typescript/main.go b/examples/typescript/main.go
new file mode 100644
index 000000000..c105f9a1b
--- /dev/null
+++ b/examples/typescript/main.go
@@ -0,0 +1,30 @@
+package main
+
+import (
+	"fmt"
+	"net/http"
+
+	"github.com/a-h/templ"
+	"github.com/a-h/templ/examples/typescript/components"
+)
+
+func main() {
+	mux := http.NewServeMux()
+	// Serve the JS bundle.
+	mux.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("assets"))))
+
+	// Serve the page.
+	mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		// Create random server-side data.
+		attributeData := components.Data{
+			Message: fmt.Sprintf("Hello, from the attribute data"),
+		}
+		scriptData := components.Data{
+			Message: fmt.Sprintf("Hello, from the script data"),
+		}
+		templ.Handler(components.Page(attributeData, scriptData)).ServeHTTP(w, r)
+	})
+
+	fmt.Println("Listening on http://localhost:8080")
+	http.ListenAndServe("localhost:8080", mux)
+}
diff --git a/examples/typescript/ts/package-lock.json b/examples/typescript/ts/package-lock.json
new file mode 100644
index 000000000..1e9fcd8cf
--- /dev/null
+++ b/examples/typescript/ts/package-lock.json
@@ -0,0 +1,436 @@
+{
+  "name": "ts",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "ts",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "esbuild": "0.21.3",
+        "typescript": "^5.4.5"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.3.tgz",
+      "integrity": "sha512-yTgnwQpFVYfvvo4SvRFB0SwrW8YjOxEoT7wfMT7Ol5v7v5LDNvSGo67aExmxOb87nQNeWPVvaGBNfQ7BXcrZ9w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.3.tgz",
+      "integrity": "sha512-bviJOLMgurLJtF1/mAoJLxDZDL6oU5/ztMHnJQRejbJrSc9FFu0QoUoFhvi6qSKJEw9y5oGyvr9fuDtzJ30rNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.3.tgz",
+      "integrity": "sha512-c+ty9necz3zB1Y+d/N+mC6KVVkGUUOcm4ZmT5i/Fk5arOaY3i6CA3P5wo/7+XzV8cb4GrI/Zjp8NuOQ9Lfsosw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.3.tgz",
+      "integrity": "sha512-JReHfYCRK3FVX4Ra+y5EBH1b9e16TV2OxrPAvzMsGeES0X2Ndm9ImQRI4Ket757vhc5XBOuGperw63upesclRw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.3.tgz",
+      "integrity": "sha512-U3fuQ0xNiAkXOmQ6w5dKpEvXQRSpHOnbw7gEfHCRXPeTKW9sBzVck6C5Yneb8LfJm0l6le4NQfkNPnWMSlTFUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.3.tgz",
+      "integrity": "sha512-3m1CEB7F07s19wmaMNI2KANLcnaqryJxO1fXHUV5j1rWn+wMxdUYoPyO2TnAbfRZdi7ADRwJClmOwgT13qlP3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.3.tgz",
+      "integrity": "sha512-fsNAAl5pU6wmKHq91cHWQT0Fz0vtyE1JauMzKotrwqIKAswwP5cpHUCxZNSTuA/JlqtScq20/5KZ+TxQdovU/g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.3.tgz",
+      "integrity": "sha512-tci+UJ4zP5EGF4rp8XlZIdq1q1a/1h9XuronfxTMCNBslpCtmk97Q/5qqy1Mu4zIc0yswN/yP/BLX+NTUC1bXA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.3.tgz",
+      "integrity": "sha512-f6kz2QpSuyHHg01cDawj0vkyMwuIvN62UAguQfnNVzbge2uWLhA7TCXOn83DT0ZvyJmBI943MItgTovUob36SQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.3.tgz",
+      "integrity": "sha512-vvG6R5g5ieB4eCJBQevyDMb31LMHthLpXTc2IGkFnPWS/GzIFDnaYFp558O+XybTmYrVjxnryru7QRleJvmZ6Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.3.tgz",
+      "integrity": "sha512-HjCWhH7K96Na+66TacDLJmOI9R8iDWDDiqe17C7znGvvE4sW1ECt9ly0AJ3dJH62jHyVqW9xpxZEU1jKdt+29A==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.3.tgz",
+      "integrity": "sha512-BGpimEccmHBZRcAhdlRIxMp7x9PyJxUtj7apL2IuoG9VxvU/l/v1z015nFs7Si7tXUwEsvjc1rOJdZCn4QTU+Q==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.3.tgz",
+      "integrity": "sha512-5rMOWkp7FQGtAH3QJddP4w3s47iT20hwftqdm7b+loe95o8JU8ro3qZbhgMRy0VuFU0DizymF1pBKkn3YHWtsw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.3.tgz",
+      "integrity": "sha512-h0zj1ldel89V5sjPLo5H1SyMzp4VrgN1tPkN29TmjvO1/r0MuMRwJxL8QY05SmfsZRs6TF0c/IDH3u7XYYmbAg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.3.tgz",
+      "integrity": "sha512-dkAKcTsTJ+CRX6bnO17qDJbLoW37npd5gSNtSzjYQr0svghLJYGYB0NF1SNcU1vDcjXLYS5pO4qOW4YbFama4A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.3.tgz",
+      "integrity": "sha512-vnD1YUkovEdnZWEuMmy2X2JmzsHQqPpZElXx6dxENcIwTu+Cu5ERax6+Ke1QsE814Zf3c6rxCfwQdCTQ7tPuXA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.3.tgz",
+      "integrity": "sha512-IOXOIm9WaK7plL2gMhsWJd+l2bfrhfilv0uPTptoRoSb2p09RghhQQp9YY6ZJhk/kqmeRt6siRdMSLLwzuT0KQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.3.tgz",
+      "integrity": "sha512-uTgCwsvQ5+vCQnqM//EfDSuomo2LhdWhFPS8VL8xKf+PKTCrcT/2kPPoWMTs22aB63MLdGMJiE3f1PHvCDmUOw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.3.tgz",
+      "integrity": "sha512-vNAkR17Ub2MgEud2Wag/OE4HTSI6zlb291UYzHez/psiKarp0J8PKGDnAhMBcHFoOHMXHfExzmjMojJNbAStrQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.3.tgz",
+      "integrity": "sha512-W8H9jlGiSBomkgmouaRoTXo49j4w4Kfbl6I1bIdO/vT0+0u4f20ko3ELzV3hPI6XV6JNBVX+8BC+ajHkvffIJA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.3.tgz",
+      "integrity": "sha512-EjEomwyLSCg8Ag3LDILIqYCZAq/y3diJ04PnqGRgq8/4O3VNlXyMd54j/saShaN4h5o5mivOjAzmU6C3X4v0xw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.3.tgz",
+      "integrity": "sha512-WGiE/GgbsEwR33++5rzjiYsKyHywE8QSZPF7Rfx9EBfK3Qn3xyR6IjyCr5Uk38Kg8fG4/2phN7sXp4NPWd3fcw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.3.tgz",
+      "integrity": "sha512-xRxC0jaJWDLYvcUvjQmHCJSfMrgmUuvsoXgDeU/wTorQ1ngDdUBuFtgY3W1Pc5sprGAvZBtWdJX7RPg/iZZUqA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.3.tgz",
+      "integrity": "sha512-Kgq0/ZsAPzKrbOjCQcjoSmPoWhlcVnGAUo7jvaLHoxW1Drto0KGkR1xBNg2Cp43b9ImvxmPEJZ9xkfcnqPsfBw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.3",
+        "@esbuild/android-arm": "0.21.3",
+        "@esbuild/android-arm64": "0.21.3",
+        "@esbuild/android-x64": "0.21.3",
+        "@esbuild/darwin-arm64": "0.21.3",
+        "@esbuild/darwin-x64": "0.21.3",
+        "@esbuild/freebsd-arm64": "0.21.3",
+        "@esbuild/freebsd-x64": "0.21.3",
+        "@esbuild/linux-arm": "0.21.3",
+        "@esbuild/linux-arm64": "0.21.3",
+        "@esbuild/linux-ia32": "0.21.3",
+        "@esbuild/linux-loong64": "0.21.3",
+        "@esbuild/linux-mips64el": "0.21.3",
+        "@esbuild/linux-ppc64": "0.21.3",
+        "@esbuild/linux-riscv64": "0.21.3",
+        "@esbuild/linux-s390x": "0.21.3",
+        "@esbuild/linux-x64": "0.21.3",
+        "@esbuild/netbsd-x64": "0.21.3",
+        "@esbuild/openbsd-x64": "0.21.3",
+        "@esbuild/sunos-x64": "0.21.3",
+        "@esbuild/win32-arm64": "0.21.3",
+        "@esbuild/win32-ia32": "0.21.3",
+        "@esbuild/win32-x64": "0.21.3"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    }
+  }
+}
diff --git a/examples/typescript/ts/package.json b/examples/typescript/ts/package.json
new file mode 100644
index 000000000..930fba643
--- /dev/null
+++ b/examples/typescript/ts/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "ts",
+  "version": "1.0.0",
+  "description": "TypeScript templ example.",
+  "scripts": {
+    "build": "esbuild --bundle --minify --outfile=../assets/js/index.js ./src/index.ts",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "esbuild": "0.21.3",
+    "typescript": "^5.4.5"
+  }
+}
diff --git a/examples/typescript/ts/src/index.ts b/examples/typescript/ts/src/index.ts
new file mode 100644
index 000000000..7b1def51b
--- /dev/null
+++ b/examples/typescript/ts/src/index.ts
@@ -0,0 +1,34 @@
+// You can use npm install to add additional packages.
+// And import them in this file.
+// esbuild will bundle them into the final output.
+
+interface Data {
+	msg: string;
+}
+
+function setupAttributeAlerter() {
+	const alerter = document.querySelector("#attributeAlerter");
+	if (!alerter) {
+		return;
+	}
+	alerter.addEventListener("click", (_event: Event) => {
+		const dataAttr = alerter?.getAttribute('alert-data') ?? '{}';
+		const data: Data = JSON.parse(dataAttr);
+		alert(data.msg);
+	})
+}
+
+function setupScriptAlerter() {
+	const alerter = document.querySelector("#scriptAlerter");
+	if (!alerter) {
+		return;
+	}
+	alerter.addEventListener("click", (_event: Event) => {
+		const dataContent = document?.getElementById('scriptData')?.textContent ?? '{}';
+		const data: Data = JSON.parse(dataContent);
+		alert(data.msg);
+	})
+}
+
+setupAttributeAlerter();
+setupScriptAlerter();
diff --git a/flake.nix b/flake.nix
index cc0aee027..87dd59d16 100644
--- a/flake.nix
+++ b/flake.nix
@@ -62,6 +62,7 @@
         pkgs.mkShell {
           buildInputs = with pkgs; [
             (golangci-lint.override { buildGoModule = buildGo121Module; })
+            esbuild # Used to package JS examples.
             go_1_21
             gopls
             goreleaser