Release: TRL 0.0.22 / `svelte-standard` 0.0.18 (codename: Echo)
Greets @FVTT ▹ Developer. I'm very happy to announce the availability of the latest TRL release. This is a big one as I revisited everything and made comprehensive improvements everywhere that could use a little tune up. There is now sophisticated focus management baked into all application shells and all relevant components have keyboard support as well. I haven't made a comprehensive overview video yet, but will hopefully get that complete in the next couple of days. All dependencies are updated including Vite 4 support. Overall this is the most rock solid release to date and I really refined everything along with thorough testing. Looks like things are fine on Foundry v11 as well!
This dev cycle started with the goal of finishing off the editor components, but I got pulled into building an advanced color picker component using a new browser feature called
container queries. While this component TJSColordPicker is in svelte-standard the main export is currently commented out. I am submitting a PR tomorrow to add container query support to Svelte that I have been refining since December. It hopefully will make it through the review process and I'll post an update to TRL / svelte-standard w/ the mainline Svelte release supporting it. The color picker component made it clear that proper keyboard navigation was lacking in TRL. It's completely lacking in core Foundry; in fact you need to redefine the core key binding for the tab key from Cycle Canvas View to be able to navigate by keyboard. A comprehensive system for advanced focus management and focus trapping in applications and TJSContextMenu / TJSMenu are now enabled by default; several new options in SvelteApplication to control focus management: focusAuto, focusKeep, focusTrap with auto & trap set to true. All relevant components from svelte-standard have key activation baked into the components. Any components that needed to be brought up to solid release parity like TJSContextMenu are now complete. CSS variables were overhauled and there is now increased cohesion between all components for focus-visible / keyboard navigation with default variables that can broadly control the look and feel across your entire package. Major refactoring to TJSDialog now makes it super flexible and powerful and I'll certainly expand on the options available now.
Relevant Code Changes (these are required):
- The external context for application shells is now #external instead of external you just have to do a search and replace for getContext("external") to getContext("#external"). A deprecated warning will be posted until you make this change.
- SessionStorage / LocalStorage store managers are renamed to TJSSessionStorage / TJSLocalStorage.
- For data defined svelte-standard components onClick is now onPress and activates for pointer / mouse / keyboard input. Rename any usage of onClick / onclick / callback to onPress. There is now an on:press event binding that supports both forms of input. This is pertinent for TJSMenu / TJSContextMenu data and any other data defined components.
--
I have streamlined the default Vite config file and this requires a little compare and contrast from essential-svelte-esm or template-svelte-esm repos to update.
There are many more cool features to check out and additions that make it easier to create attractive apps. For instance it is highly recommended to check out the Header Buttons demo as you can now provide additional options for header buttons including: alignLeft: true, keepMinimized: true, onContextMenu callback for right click of header button. In SvelteApplication there is a new option for headerIcon sets an app header icon. It should be 32x32px.
--
Please post any concerns or problems in this forum post. I want to cover anything in the video that might cause anyone issues.
First codename release: Echo for my little furry tiger who passed in Dec.
3 Replies
There are many quality of life additions to still discuss and get information out about!
For now though to provide an idea of the scope of changes required I submitted PRs to both @arcanistzed / Module Compatibility Checker & @otigon / Automated Animations. Both of these packages I helped out with as a contributor. I certainly wish I could submit PRs for everyone, but in the grand scheme of things this update is no where near as bad as any given "even" Foundry core update (looking at you v8 & v10); shudder thinking of what v12 brings :O. I have attached links to the
files section of both PRs below so this gives you an idea that the changes aren't too bad:
MCC: https://github.com/arcanistzed/mcc/pull/25/files
AA: https://github.com/otigon/automated-jb2a-animations/pull/597/files
In general though the patterns captured in TRL are very stable now and there really isn't any foreseeable changes in the future. This release is more or less like most folks 2.0 releases; don't let the alpha semver fool you.. 😉Woo-hoo. Looking forward to diving into this
So, I was rather squashed for space in the initial post above and ran beyond the character limit. Instead of posting two walls of text I abbreviated as much as I could with things hopefully still being intelligible. The important takeaway is that this most recent TRL release is a comprehensive overhaul that refactored anything that could use a little love. Not that anything was particularly broken, but simply hardened beyond potential initial implementations with the knowledge I have now with over a year of full time+ Svelte related efforts + modern browser feature availability.
@typhonjs-fvtt/svelte-standard is an optional standard library of many useful components and a bunch more to help you build amazing experiences. It has been worked over and refined and is at a point of high cohesion. It provides the basis and design patterns for advanced component design / implementation several of which aren't widespread in the Svelte community.
I have just submitted a solid PR to svelte for container query support that should hopefully not languish in review. https://github.com/sveltejs/svelte/pull/8275
It should be noted that the advanced work on focus management goes much further than simply supporting a11y / keyboard navigation concerns. For instance, there are now advanced patterns you can employ in your components to provide application wide key handling by attaching key and other handlers to the element root of the application shell. The automatic focus management allows those handlers to be invoked properly. A much more dirty approach (which Foundry core does as well) is attaching event listeners to document or window which is not ideal for application level concerns. I won't get into the details in this post, but touch on this in the overview video. The refactored TJSDialog implementation shows how to accomplish this advanced use case.
Anyway... Here are some stats for this latest release showing the broad hardening of TRL / svelte-standard for the Svelte related architecture. svelte-standard received more than double the amount of commits prior and the graphic image shows how much was done to flush the standard library out over the past few months.
I hope to convey as much information as possible to get as many of you using the advanced features available in TRL as they go well beyond just being able to use just Svelte on Foundry.