T
TyphonJSchimis

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>
C
chimis•313d 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.
TM
TyphonJS (Michael)•313d 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.
C
chimis•313d 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!
TM
TyphonJS (Michael)•313d 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.
Want results from more Discord servers?
Add your server
More Posts
Drag & Drop broke in v11Ok so something that broke for me when moving to v11 is drag&drop from both the items tab of the sidTJSDocument and Token Issues```js const tokens = cardData.targets .map(t => [t, fromUuidSync(t)]) .filter(([_, tSyrinControl & Svelte...I gather there is a bit to discuss... 😄Ver .11Not sure if this is the place to ask, but updated to v .7.11 foundry 10. Lost all quest data. FoldePackage Release: Foundry Summons (3rd party)Greets @everyone. I do try to use pings sparingly, but want to show a spotlight on @vauxs new packagCreating an interim TJSDocument / document attribute bridgeHi @wasp... Just moving discussion here as it is a better forum post. > So I have made a system wiTJSGameSettings with not registered settings.I am not sure what is happening in here. I have created an attachement to the existing Settings pagStoring a collection of Items in an Item?Use cases would be: - containers could contain other Items - some items have prerequisites, which coRelease: Quest Log `0.7.12`Greets @FVTT ▹ Quest Log! The v11 compatibility release is now available from the Foundry package mTJSDialog how to use buttons and callback or return value?I'm planning to use TJSDialog to act as an intervening Application. So... player clicks a button thaRelease: `TRL 0.0.23` - "v11 hot patch"Greets @FVTT ▹ Developer! I just released a hot patch of TRL for v11 support. The only thing changv11 Debug embedded collection changesJust a post to track the v11 changes to embedded collections and what needs to be updated in an inte