Release: `svelte-standard` 0.0.20 - More Svelte sidebar apps

Greets @FVTT ▹ Developer. Following on the heels of

svelte-standard

svelte-standard

0.0.19 the latest release further extends

FVTTSidebarControl

FVTTSidebarControl

allowing you to replace an existing Foundry sidebar app w/ a Svelte powered sidebar and also the ability to remove a stock Foundry sidebar app from the core Sidebar app. The replacement aspect was requested and I had a good idea that it would be useful. Please do report any problems using this new API. Replacing existing sidebars will require you to augment required methods in the given core sidebar app being replaced. Use

FVTTSidebarControl.wait().then()

FVTTSidebarControl.wait().then()

to augment as necessary. A very basic and incomplete example of augmenting

combat

combat

tracker replacement is in the sample code below.

There is no new developer overview video as the essentials are more or less the same except there are new

FVTTSidebarControl.remove

FVTTSidebarControl.remove

and

FVTTSidebarControl.replace

FVTTSidebarControl.replace

methods. Do feel free to checkout the last update video though: https://www.youtube.com/watch?v=otmXoOtp7NQ

Basic usage:

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

Hooks.once('setup', () =>
{
   // Replaces the core combat sidebar w/ new Svelte implementation.
   FVTTSidebarControl.replace({
      replaceId: 'combat',       // Replaces core combat sidebar app.
      icon: 'fas fa-dice-d10',   // FontAwesome icon.
      title: 'COMBAT',           // Title of popout sidebar app; can be language string.
      tooltip: 'COMBAT',         // Tooltip for sidebar tab.
      svelte: {                  // Svelte configuration object...
         class: CombatTab        // A Svelte component.
         context: {
            combatControl
         }
      }
   });

   // Removes the core cards sidebar. 
   FVTTSidebarControl.remove({
      removeId: 'cards'          // Removes core cards sidebar app.
   });

   // For replaced sidebars like `combat` you will need to augment the API that Foundry
   // expects the `globalThis.ui.combat` app to have like `initialize`. You should          // provide a prop / context for the Svelte component defining the new combat sidebar.    // Add a method initialize that invokes `initialize` on your control / model code.  
   FVTTSidebarControl.wait().then(() =>
   {
      globalThis.ui.combat = Object.assign(globalThis.ui.combat, {
         initialize: (data) => combatControl.initialize(data)
         // Other method stubs as necessary
      });
   });
});

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

Hooks.once('setup', () =>
{
   // Replaces the core combat sidebar w/ new Svelte implementation.
   FVTTSidebarControl.replace({
      replaceId: 'combat',       // Replaces core combat sidebar app.
      icon: 'fas fa-dice-d10',   // FontAwesome icon.
      title: 'COMBAT',           // Title of popout sidebar app; can be language string.
      tooltip: 'COMBAT',         // Tooltip for sidebar tab.
      svelte: {                  // Svelte configuration object...
         class: CombatTab        // A Svelte component.
         context: {
            combatControl
         }
      }
   });

   // Removes the core cards sidebar. 
   FVTTSidebarControl.remove({
      removeId: 'cards'          // Removes core cards sidebar app.
   });

   // For replaced sidebars like `combat` you will need to augment the API that Foundry
   // expects the `globalThis.ui.combat` app to have like `initialize`. You should          // provide a prop / context for the Svelte component defining the new combat sidebar.    // Add a method initialize that invokes `initialize` on your control / model code.  
   FVTTSidebarControl.wait().then(() =>
   {
      globalThis.ui.combat = Object.assign(globalThis.ui.combat, {
         initialize: (data) => combatControl.initialize(data)
         // Other method stubs as necessary
      });
   });
});

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

Hooks.once('setup', () =>
{
   // Replaces the core combat sidebar w/ new Svelte implementation.
   FVTTSidebarControl.replace({
      replaceId: 'combat',       // Replaces core combat sidebar app.
      icon: 'fas fa-dice-d10',   // FontAwesome icon.
      title: 'COMBAT',           // Title of popout sidebar app; can be language string.
      tooltip: 'COMBAT',         // Tooltip for sidebar tab.
      svelte: {                  // Svelte configuration object...
         class: CombatTab        // A Svelte component.
         context: {
            combatControl
         }
      }
   });

   // Removes the core cards sidebar. 
   FVTTSidebarControl.remove({
      removeId: 'cards'          // Removes core cards sidebar app.
   });

   // For replaced sidebars like `combat` you will need to augment the API that Foundry
   // expects the `globalThis.ui.combat` app to have like `initialize`. You should          // provide a prop / context for the Svelte component defining the new combat sidebar.    // Add a method initialize that invokes `initialize` on your control / model code.  
   FVTTSidebarControl.wait().then(() =>
   {
      globalThis.ui.combat = Object.assign(globalThis.ui.combat, {
         initialize: (data) => combatControl.initialize(data)
         // Other method stubs as necessary
      });
   });
});

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

Hooks.once('setup', () =>
{
   // Replaces the core combat sidebar w/ new Svelte implementation.
   FVTTSidebarControl.replace({
      replaceId: 'combat',       // Replaces core combat sidebar app.
      icon: 'fas fa-dice-d10',   // FontAwesome icon.
      title: 'COMBAT',           // Title of popout sidebar app; can be language string.
      tooltip: 'COMBAT',         // Tooltip for sidebar tab.
      svelte: {                  // Svelte configuration object...
         class: CombatTab        // A Svelte component.
         context: {
            combatControl
         }
      }
   });

   // Removes the core cards sidebar. 
   FVTTSidebarControl.remove({
      removeId: 'cards'          // Removes core cards sidebar app.
   });

   // For replaced sidebars like `combat` you will need to augment the API that Foundry
   // expects the `globalThis.ui.combat` app to have like `initialize`. You should          // provide a prop / context for the Svelte component defining the new combat sidebar.    // Add a method initialize that invokes `initialize` on your control / model code.  
   FVTTSidebarControl.wait().then(() =>
   {
      globalThis.ui.combat = Object.assign(globalThis.ui.combat, {
         initialize: (data) => combatControl.initialize(data)
         // Other method stubs as necessary
      });
   });
});

Release: `svelte-standard` 0.0.20 - More Svelte sidebar apps

Similar Threads

Similar Threads

Similar Threads