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
Relevant Code Changes (these are required):
I have streamlined the default Vite config file and this requires a little compare and contrast from
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
--
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:
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.
