Token Action HUD

Let's continue chatting about TAH here to keep track of discussion @larkinabout

I'm looking through the code base right now. It definitely is a non-trivial bit of code, so will be a bit of a project, but certainly possible to get things working with TRL / Svelte.

I always recommend folks to check out the excellent Svelte interactive tutorial to get a feel / understanding of how Svelte itself works: https://svelte.dev/tutorial/basics

TRL adds a bunch of additional runtime libraries that all work together on top of Svelte including deep integration with aspects particular to Foundry.

TyphonJS (Michael)OP•7/21/23, 9:50 PM

Is TAH in a fairly stable spot right now? It always helps to be at a good break point when potentially considering introducing a potential rewrite of components. Hopefully this entails just the UI / UX aspects where the core handling stays mostly the same.

Russell•7/21/23, 9:55 PM

There's a consideration to be made about selective updating of the HUD as currently every time a change occurs, the HUD rebuilds everything. I think that's the biggest core handling that might need to be considered alongside. Other than that, the module is stable and I'm not planning any widespread changes.

TyphonJS (Michael)OP•7/21/23, 9:58 PM

Yeah.. Some of the data handling or the way data is represented / funneled into what is used for UI display may change to be Svelte compatible / more streamlined. Perhaps you can make a branch for the core, so that I can get things situated from a build perspective. I do have ~4 hours free today to take a look. It can be a challenge to just jump in with a significant project and a new technology.

Russell•7/21/23, 10:02 PM

Create a branch and provide you with access?

TyphonJS (Michael)OP•7/21/23, 10:03 PM

With a branch to work on I can fork TAH and submit a PR for the branch as necessary once things are situated. You can also install my fork / branch directly too before accepting any PR. Having things separated in a branch though will keep things tidy from core while the exploration phase occurs.

Russell•7/21/23, 10:04 PM

I've created a typhonjs branch.

TyphonJS (Michael)OP•7/21/23, 10:08 PM

Nice... You happened to catch me on a good day / working remotely right now and in a pretty intense ski instructor training program for the next several weeks; it's Saturday where I'm at right now (New Zealand). I'll start to take a look in an hour or so.

You are already using Rollup which is great. TRL uses Vite which uses Rollup under the hood for production builds. One of the really cool TRL features though is using the Vite dev server / HMR (hot module replacement) which allows you to work on the Svelte components / UI in real time while running Foundry. It will be neat to see how this works out for TAH.

Russell•7/21/23, 10:10 PM

Sounds exciting! Thanks for your help in getting started with it, I'd probably be scratching my head for days.

TyphonJS (Michael)OP•7/21/23, 10:14 PM

It's certainly much easier to work on a greenfield project in adopting a new tech. The nice thing w/ the latest TRL releases is that a large majority of the API / all ESM code has API docs: https://typhonjs-fvtt-lib.github.io/api-docs/index.html. So the general challenge is learning what Svelte brings to the table, installing / configuring TRL, then learning about the aspects that TRL adds on top of Svelte. I'll be continuing to refine add info / examples in the API docs, but also hopefully have a dev guide / tutorial for TRL available soon.

I think taking a look at how TRL & Svelte can empower TAH to become even better is a great showcase for the tech involved.

TyphonJS (Michael)OP•7/21/23, 10:16 PM

One thing that you can do right now is install the main demo repo for TRL which has many demos showing the capabilities of what is possible. Even at that it just scratches the surface: https://github.com/typhonjs-fvtt-demo/essential-svelte-esm

Clone the repo into
Run
```
npm install
```
```
npm install
```
/
Restart Foundry / enable Essential Svelte ESM

Russell•7/21/23, 10:20 PM

TAH is one of those where you really want the response to be as close to instant as possible. As soon as you click on a token, you want to see the HUD. You don't want to be waiting even a second or two. That's what I'm aiming to solve. But, seeing what else might be possible is exciting. I installed the demo via the manifest link. The demos are impressive. I'll have more of a play and look at those Svelte tutorials.

Russell•7/21/23, 10:21 PM

I'll have to catch up with you a bit later. I'm on GMT time and tomorrow is an early morning soft play with a 3 year old! Thanks again.

TyphonJS (Michael)OP•7/21/23, 10:22 PM

Excellent I'll be in touch when I have things situated in the branch.

TyphonJS (Michael)OP•7/22/23, 10:23 PM

So, I can definitely see how things got to an "intractable" point where figuring out how to update or change TAH is difficult. The first stage that I completed is updating all dependencies and streamlining the Rollup build which includes: moving to a single file entry point, outputting the bundle to a non-checked in dist folder, use the Node resolve / CommonJS plugins to directly bundle in the external Tagify / DragSort libraries.

These initial steps prepare TAH to be upgraded to Vite in a more streamlined way and can certainly be merged / verified in the mainline release now. I am going to continue to work on the process of integrating Vite and TRL in a separate branch of my fork, so that the current streamlined Rollup setup remains clean and merge ready.

The general tactic in respect to TRL that I'll be doing is to integrate Vite and the standard repo configuration suggested for Foundry / TRL packages. Then I'll be using the "legacy" support of TRL which supports Handlebars. The outer app shells will be Svelte powered, but the main window content is still rendered via Handlebars. This gets things up and working with TRL without broad modifications to the entire codebase and allows a further step wise approach to start to convert over sections of TAH to fully Svelte oriented without having to go "whole hog" so to speak.

A lot of this is a non-obvious approach for a couple of reasons. First, is unwinding the current build process to a more streamlined version. Second, then knowing how to take that optimized Rollup build and convert it to Vite. Finally, stepwise integrate TRL via the legacy support also would be challenging given that there is no developer guide for this. This is why it certainly is much easier to get into TRL / Svelte w/ a greenfield project. TAH is relatively complex.

All of this requires wearing a "different hat" / skillset than just starting a project; IE the debugging / architect / finisher hats.

When you have the time though we should discuss an initial merge of the branch on my fork as this is just the optimized Rollup build that doesn't change the actual TAH implementation yet:
https://github.com/typhonjs-fvtt-scratch/fvtt-token-action-hud-core/tree/typhonjs

I'll now be working in the branch that moves the branch forward that integrates Vite and the legacy TRL support:
https://github.com/typhonjs-fvtt-scratch/fvtt-token-action-hud-core/tree/vite-trl

Russell•7/22/23, 10:35 PM

I've got a little bit of time now.

Russell•7/22/23, 10:37 PM

Would a call be easier/desired to discuss?

TyphonJS (Michael)OP•7/22/23, 10:37 PM

Yeah.. You can see the changes by browsing the link above. A lot of that involves changes to ,

package.json

package.json

, and . Removing the external folder.

All of that just updates the current build process to something more streamlined; moving to Rollup v3, etc.

Sure yeah... Give me a minute.