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
templ generate
ts-install
Since it's a TypeScript project, you need to install the dependencies.
Dir: ts
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.
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
npm run build
run
go run .