TyphonJS•3mo ago

Injecting .svelte code into existing Foundry Document

okay, now that I've got my project set up with Svelte, how would I go about injecting the html from my .svelte file into existing html? In my existing code, I was able to use html.find('.sub-nav:not(.sub-sub-nav)').append('<a data-tab="subsystems" class="">Subsystems</a>') to add the subsystems tab in that top block, and I have an append statement prepped to get the rest of my html in the appropriate place as shown below: html.find('.container').append('<div class="tab" data-tab="subsystems" data-region="subsystems"> CODE HERE </div>')

4 Replies

HawkOP•3mo ago

:typing: TyphonJS (Michael) is still typing... :BlobNervous:

TyphonJS (Michael)•3mo ago

Injecting a Svelte component into presumably a Handlebars app is generally problematic. There is no problem in attaching the Svelte component in one of the renderXXX callbacks. Problems can occur on subsequent renders as the previous component is not actually destroyed properly... at least automatically. It's a bit messy, but let's say its renderActorSheet that you want to respond to.

import MySvelteComponent from './MySvelteComponent.svelte';

Hooks.on('renderActorSheet', (actor, html) => {
   // Destroy old Svelte component if it exists.
   actor?.__special_svelte_comp?.$destroy();

   const targetEl = html[0].querySelector('.container');
   if (targetEl) {
      // Attach a reference to the mounted Svelte component to the actor document.
      actor.__special_svelte_comp = new MySvelteComponent({
         target: targetEl,
         props: { /* any props */ } }
      });
   }
});

import MySvelteComponent from './MySvelteComponent.svelte';

Hooks.on('renderActorSheet', (actor, html) => {
   // Destroy old Svelte component if it exists.
   actor?.__special_svelte_comp?.$destroy();

   const targetEl = html[0].querySelector('.container');
   if (targetEl) {
      // Attach a reference to the mounted Svelte component to the actor document.
      actor.__special_svelte_comp = new MySvelteComponent({
         target: targetEl,
         props: { /* any props */ } }
      });
   }
});

Other than that I do recommend that you completely go through the excellent Svelte interactive tutorial for all the essential Svelte knowledge. Also reviewing the Svelte docs is handy IE. Typically it's best to use Svelte in an app / package you write entirely, but something like the above should be relatively safe.

HawkOP•3mo ago

sounds good

TyphonJS (Michael)•3mo ago

The above is pseudo-code as well.. It's been a minute since I've looked at hook callbacks in Foundry for rendering. Ideally you add the Svelte component mounted to the app application reference. For extra safeness you should attempt to destroy any component in the closeXXX hook as well as you are given an app reference in that callback. You'll have to figure out the callback arguments as I wrote the above from memory. You want to attach the component to the associated app reference passed back in those hooks and not the document.

Gaming

Programming

Injecting .svelte code into existing Foundry Document