Token Action HUD
Let's continue chatting about TAH here to keep track of discussion @larkinabout
TM
TyphonJS (Michael)•293d ago
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.
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.
L
larkinabout•293d ago
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.
TM
TyphonJS (Michael)•293d ago
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.
L
larkinabout•293d ago
Create a branch and provide you with access?
TM
TyphonJS (Michael)•293d ago
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.
L
larkinabout•293d ago
I've created a typhonjs branch.
TM
TyphonJS (Michael)•293d ago
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.
L
larkinabout•293d ago
Sounds exciting! Thanks for your help in getting started with it, I'd probably be scratching my head for days.
TM
TyphonJS (Michael)•293d ago
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.
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
Data/modules/essential-svelte-esm
- Run npm install / npm build
- Restart Foundry / enable Essential Svelte ESML
larkinabout•293d ago
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.
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.
TM
TyphonJS (Michael)•292d ago
Excellent I'll be in touch when I have things situated in the branch. 😄
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
typhonjs 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 vite-trl branch that moves the typhonjs branch forward that integrates Vite and the legacy TRL support:
https://github.com/typhonjs-fvtt-scratch/fvtt-token-action-hud-core/tree/vite-trlL
larkinabout•292d ago
I've got a little bit of time now.
Would a call be easier/desired to discuss?
TM
TyphonJS (Michael)•292d ago
Yeah.. You can see the changes by browsing the
typhonjs link above. A lot of that involves changes to module.json, package.json, and rollup.config.js. Removing the external lib 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.293Members
View on DiscordWant results from more Discord servers?
More PostsPostcssConfig seem not workin with 0.1.0@mleahy sorry to bother i'm trying to use the postccs feature of the @typhonjs-fvtt/runtime on the TJSDocument for aggregating actor flags for Svelte ComponentI'm sure this is very simple, but I'm having a hard time understanding how to get this to work. MaybUpdate to ChatMessage outside of Svelte doesn't trigger reactivity on linked TJSDocumentI'm a bit confused about this...
1. When I render a ChatMessage via svelte, in the chat message sveRelease `TRL 0.1.0` - The journey to beta begins...Greets @FVTT ▹ Developer,
I am very excited to announce the release of TRL `0.1.0`. This is a majorHow do I get the elementRoot of a ChatMessage?SvelteApplication provides `elementRoot` prop to components that implement it, which is very useful.Getting started with the GUI and understanding element rootIt's been a while, but I've been working on my Knowledge Recalled module since V11 is out, and my frDrag & Drop broke in v11Ok so something that broke for me when moving to v11 is drag&drop from both the items tab of the sidTJSDocument and Token Issues```js
const tokens = cardData.targets
.map(t => [t, fromUuidSync(t)])
.filter(([_, tSyrinControl & Svelte...I gather there is a bit to discuss... 😄Ver .11Not sure if this is the place to ask, but updated to v .7.11 foundry 10. Lost all quest data. FoldePackage Release: Foundry Summons (3rd party)Greets @everyone. I do try to use pings sparingly, but want to show a spotlight on @vauxs new packagCreating an interim TJSDocument / document attribute bridgeHi @wasp... Just moving discussion here as it is a better forum post.
> So I have made a system wiTJSGameSettings with not registered settings.I am not sure what is happening in here.
I have created an attachement to the existing Settings pagStoring a collection of Items in an Item?Use cases would be:
- containers could contain other Items
- some items have prerequisites, which coRelease: Quest Log `0.7.12`Greets @FVTT ▹ Quest Log!
The v11 compatibility release is now available from the Foundry package mTJSDialog how to use buttons and callback or return value?I'm planning to use TJSDialog to act as an intervening Application. So... player clicks a button thaRelease: `TRL 0.0.23` - "v11 hot patch"Greets @FVTT ▹ Developer!
I just released a hot patch of TRL for v11 support. The only thing changv11 Debug embedded collection changesJust a post to track the v11 changes to embedded collections and what needs to be updated in an inteCopying existing FQL to a new worldHello! I am running a world with Forien's Quest Log set up in a world, and I updated Foundry from v8How can I create an embeddedCollection in a chat message?I have this:
```javascript
const messageDocument = game.messages.get(message._id);
const doc = new T