TyphonJS•2y ago

Can I mix and match standard foundry views with Svelte components?

And if so, how so? E.g. on my items sheet I want to render the default ActiveEffects view on one of the tabs. No point recreating the wheel there methinks. I tried this as the code for the tab:

<script>
  import ScrollingContainer from "~/helpers/svelte-components/ScrollingContainer.svelte";
  import { getContext } from "svelte";
  import { ActiveEffectList } from "../../libs/foundry.js";

  const doc = getContext("#doc");
  console.log($doc);
  const activeEffects = new ActiveEffectList({
    object: $doc,
    state: $doc.Effects,
    editable: true,
  });
  activeEffects.render(true);
</script>

<script>
  import ScrollingContainer from "~/helpers/svelte-components/ScrollingContainer.svelte";
  import { getContext } from "svelte";
  import { ActiveEffectList } from "../../libs/foundry.js";

  const doc = getContext("#doc");
  console.log($doc);
  const activeEffects = new ActiveEffectList({
    object: $doc,
    state: $doc.Effects,
    editable: true,
  });
  activeEffects.render(true);
</script>

But the import doesn't work.

1 Reply

TyphonJS (Michael)•2y ago

There is no ActiveEffectList in the Foundry client code / foundry.js in v10 or v11. I'm not sure where you found it. Foundry exports all resources to the globalThis / window object, so no need to import anything explicitly nor should you. ActiveEffect is a document type in Foundry and is connected to other documents as an embedded collection. You can make your own Svelte powered list and UI display easily enough using the reactive embedded collection API. In general it's probably not a good idea to mix Svelte and any sort of Handlebars rendering from other Foundry client resources embedded in a Svelte component. The exception to invoking Foundry client code is calling FilePicker or other Foundry applications that are rendered separately, but utilized / controlled from any given Svelte component.

Gaming

Programming

Can I mix and match standard foundry views with Svelte components?