T
TyphonJS

typhonjs-runtime

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

Ggeoidesic2/21/2023
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.
TMTyphonJS (Michael)2/21/2023
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.

Looking for more? Join the community!

T
TyphonJS

typhonjs-runtime

Join Server