TyphonJS•2y ago

Getting started with the GUI and understanding element root

It's been a while, but I've been working on my Knowledge Recalled module since V11 is out, and my friend and I have made progress with getting and storing the data that we need. I'll be honest I'm struggling a little with Typhon for building my GUI. I'm not sure if I'm just lacking understanding of Svelte or what, but I think if I can get may data presented in the gui it'll be a lot easier for me to tinker around to figure out a little more of what is going on. If someone could maybe give me a suggestion or too. The approach I'm taking involves using my GMJournalAppShell as the place where I'm going to pull in all of the other svelte components.

<script>
   import { flip }               from 'svelte/animate';

   import { ApplicationShell }   from '@typhonjs-fvtt/runtime/svelte/component/core';
   import { TJSDocument }        from '@typhonjs-fvtt/runtime/svelte/store';

   import { rippleFocus }        from '@typhonjs-fvtt/svelte-standard/action';
   import { TJSInput }           from '@typhonjs-fvtt/svelte-standard/component';
   import { createFilterQuery }  from '@typhonjs-fvtt/svelte-standard/store';
   import {getContext, setContext} from "svelte";
   import NPCProfile from "./NPCProfile.svelte";

   const { application } = getContext("#external");
   let elementRoot;

</script>
<svelte:options accessors={true} />
<ApplicationShell bind:elementRoot>
   <NPCProfile />
</ApplicationShell>


<style>

</style>

<script>
   import { flip }               from 'svelte/animate';

   import { ApplicationShell }   from '@typhonjs-fvtt/runtime/svelte/component/core';
   import { TJSDocument }        from '@typhonjs-fvtt/runtime/svelte/store';

   import { rippleFocus }        from '@typhonjs-fvtt/svelte-standard/action';
   import { TJSInput }           from '@typhonjs-fvtt/svelte-standard/component';
   import { createFilterQuery }  from '@typhonjs-fvtt/svelte-standard/store';
   import {getContext, setContext} from "svelte";
   import NPCProfile from "./NPCProfile.svelte";

   const { application } = getContext("#external");
   let elementRoot;

</script>
<svelte:options accessors={true} />
<ApplicationShell bind:elementRoot>
   <NPCProfile />
</ApplicationShell>


<style>

</style>

4 Replies

chimisOP•2y ago

And then the NPC data is being presented in the NPCProfile Component

<script>
import {setContext} from "svelte";


let elementRoot
let module = ui.knowledgeRecalled;
let npcArray = module?.npcActors;
let selectedNPC = npcArray ? npcArray[-1] : null;

function updateSelectedActor(actor) {
   selectedNPC = actor;
   setContext('selectedNPC', selectedNPC);
}
</script>


      {#if npcArray}
         {#each npcArray as npc}
            <button on:click={() => updateSelectedActor(npc)}>{npc.name}</button>
         {/each}

         <h2> Selected Actor: {selectedNPC.flags.name}</h2>
            <p> Actor Data: {selectedNPC.flags.defaultDC}</p>
      {/if}

<script>
import {setContext} from "svelte";


let elementRoot
let module = ui.knowledgeRecalled;
let npcArray = module?.npcActors;
let selectedNPC = npcArray ? npcArray[-1] : null;

function updateSelectedActor(actor) {
   selectedNPC = actor;
   setContext('selectedNPC', selectedNPC);
}
</script>


      {#if npcArray}
         {#each npcArray as npc}
            <button on:click={() => updateSelectedActor(npc)}>{npc.name}</button>
         {/each}

         <h2> Selected Actor: {selectedNPC.flags.name}</h2>
            <p> Actor Data: {selectedNPC.flags.defaultDC}</p>
      {/if}

This is more so just to see the data before I go to much further, because I have a tendency to write a bunch of code and then try to debug before verifying that piece works. I am finding myself looking through other examples of Typhon and I'm trying to apply what's been done there to my system, and I recognize this is a problem. in foundry I have this error here

[TRL] loadSvelteConfig error - HTMLElement target with no 'selectorElement' defined.

Note: If configuring an application shell and directly targeting a HTMLElement did you bind an'elementRoot' and include '<svelte:options accessors={true}/>'?

Offending config:

[TRL] loadSvelteConfig error - HTMLElement target with no 'selectorElement' defined.

Note: If configuring an application shell and directly targeting a HTMLElement did you bind an'elementRoot' and include '<svelte:options accessors={true}/>'?

Offending config:

it's dawning on me that I don't think I quite understand how data should be managed in TRL. In other examples It seems like maybe I should work with the data in the 'shell' and then import that into the component for presenting it? I'm not really sure. I'm not expecting anyone to it for me, so I guess I mainly would just like to know how I should think about working with the data once I'm in the view portion of the code, and maybe what a good example project out there is to look at for someone doing this well. Any advice is appreciated.

TyphonJS (Michael)•2y ago

So there is a convention in TRL related to automatically mounting or connecting the main "elementRoot" of the "application shell"; those are in quotes as they are idioms specific to TRL. You need to export the elementRoot prop like this.

<script>
   import { ApplicationShell }   from '@typhonjs-fvtt/runtime/svelte/component/core';

   export let elementRoot = void 0;
</script>

<svelte:options accessors={true}/>

<ApplicationShell bind:elementRoot>
  Some content
</ApplicationShell>

<script>
   import { ApplicationShell }   from '@typhonjs-fvtt/runtime/svelte/component/core';

   export let elementRoot = void 0;
</script>

<svelte:options accessors={true}/>

<ApplicationShell bind:elementRoot>
  Some content
</ApplicationShell>

The svelte:options setting accessor set to "true" create getters / setters for props allowing SvelteApplication (external JS managing code) to be able to access elementRoot. In the ApplicationShell component template elementRoot is the main app div. This convention allows automatic mounting of the component and then association of the main app div element with Foundry. It definitely needs to be documented. The good news is that the next release imminently available comes w/ API docs, but also is a pretty major restructuring of the API so several import paths are changing. It could be best to wait a couple of days and get started w/ the latest. The demo repos will be updated and such as well.

chimisOP•2y ago

That's good advice. I have some backend stuff that needs some work so I will pause for now on the front end until we have that update!

TyphonJS (Michael)•2y ago

I definitely try really hard to minimize disruptions, but this one was needed especially for API doc clarity. Nice thing is that working TS declarations for TRL are also being shipped; err, doesn't solve the lack of working Foundry community types though. It's not a change in functionality, so not like a core Foundry update; just a better logical ordering of where things are located in the API.

Gaming

Programming

Getting started with the GUI and understanding element root