Writing Typescript For Frontend Interactivity

For my /garden page I have a tiny bit of JavaScript that's used to make the tooltips appear.

This is fine for this page and works but the problem becomes when you need more complexity.

When there's more complexity and dependencies being used you need to use TypeScript to get the job done.

In this case what I can do is:

1. Write the non interactive server rendered HTML
2. Create a new vite project

bunx create-vite my-js-ts-app --template vanilla-ts

3. Copy the HTML into the index.html
4. Add all the dependencies and make the app do what it needs to do using the main.ts
5. Build the app

npm run build

6. Copy the .js output from the dist
7. Add this to my server rendered app with a defer tag so it loads after the HTML