TyphonJS•2y ago

Release: `svelte-standard` 0.0.19 - Svelte sidebar applications

Greets @FVTT ▹ Developer. I have put out a patch to svelte-standard fixing the ProseMirror library incompatibility for a corner case, but more exciting is a new API to add Svelte powered sidebar applications to the main Foundry sidebar easily and with lots of options that are all data defined. You mainly just have to provide a component for the sidebar and the provided API does the rest. I have made a video overview of this feature. I'll attach it to this post when it finishes processing. There is no new demo in essential-svelte-esm, but the video should give you all the info needed to get started. You can read the docs in the main API / implementation: https://github.com/typhonjs-fvtt-lib/svelte-standard/blob/main/src/application/FVTTSidebarControl.js Everything works w/ Vite dev server / HMR and is ready to go for any custom Svelte sidebar apps. Also this API is accessible for any developers including those making modules. For game system devs I'd be glad to get more feedback on the API. I was thinking maybe it would be cool to make an API method to replace an existing default sidebar app w/ a Svelte powered one. If there are any ideas that make sense please do mention them. Right now the API only lets you add sidebar apps. Basic usage:

import { FVTTSidebarControl } from '@typhonjs-fvtt/svelte-standard/application';

Hooks.once('setup', () =>
{
   FVTTSidebarControl.add({
      beforeId: 'items',         // Place new tab before the 'items' tab.
      id: 'test',                // A unique CSS ID.
      icon: 'fas fa-dice-d10',   // FontAwesome icon.
      title: 'Test Directory',   // Title of popout sidebar app; can be language string.
      tooltip: 'Tests',          // Tooltip for sidebar tab.
      svelte: {                  // Svelte configuration object...
         class: TestTab          // A Svelte component.
         props: { }              // Props / pass your control / model code through here.
      }
   });
});

import { FVTTSidebarControl } from '@typhonjs-fvtt/svelte-standard/application';

Hooks.once('setup', () =>
{
   FVTTSidebarControl.add({
      beforeId: 'items',         // Place new tab before the 'items' tab.
      id: 'test',                // A unique CSS ID.
      icon: 'fas fa-dice-d10',   // FontAwesome icon.
      title: 'Test Directory',   // Title of popout sidebar app; can be language string.
      tooltip: 'Tests',          // Tooltip for sidebar tab.
      svelte: {                  // Svelte configuration object...
         class: TestTab          // A Svelte component.
         props: { }              // Props / pass your control / model code through here.
      }
   });
});

https://www.youtube.com/watch?v=otmXoOtp7NQ

TyphonJS-FoundryVTT

YouTube

TRL - svelte standard 0.0.19 dev snapshot

I'm going to keep this description short, but this svelte-standard update brings a new way to create a Svelte powered sidebar panel & popout that is rather handy. Thanks for taking a look!

5 Replies

Solidor•2y ago

Oh wow. Will have to dive into this. Thanks a bunch Typhon!

WHITESPINE•2y ago

very cool Could they replace a sidebar tab? (If someone, for instance, wanted to entirely overhaul the audio panel or something)

Faey•2y ago

Lets go!

TyphonJS (Michael)OP•2y ago

Yeah.. It's definitely possible to have the same kind of API like the add method and the data required and make it work to replace a stock Foundry sidebar app. It's a bit more involved behind the scene as I need to cleanup any resources from the stock implementation, but it should be possible and I believe useful. You can do more than what is in the code snippet as well.. A bit more in the video which I added to the post above, but here is the link: https://www.youtube.com/watch?v=otmXoOtp7NQ

Wasp•2y ago

That's amazing!

Gaming

Programming

Release: `svelte-standard` 0.0.19 - Svelte sidebar applications