T
TyphonJSWHITESPINE

Uncaught TypeError: $storeElementRoot is undefined

Hi! Encountering the following error when trying to resize an application based on a TJSApplicationShell. Exception: 
Uncaught TypeError: $storeElementRoot is undefined
    onResizePointerDown ResizableHandle.svelte:128
    resizeDown ResizableHandle.svelte:71
    activateListeners ResizableHandle.svelte:82
    resizable ResizableHandle.svelte:109
Uncaught TypeError: $storeElementRoot is undefined
    onResizePointerDown ResizableHandle.svelte:128
    resizeDown ResizableHandle.svelte:71
    activateListeners ResizableHandle.svelte:82
    resizable ResizableHandle.svelte:109
W
WHITESPINE•292d ago
The svelte app: 
<svelte:options accessors={true} />

<script>
    import { setContext } from "svelte";
    import { TJSApplicationShell } from "#runtime/svelte/component/core";
    // import DocStringField from "../../components/DocStringField.svelte";
    import { scale } from "svelte/transition";
    import PlayerSheet from "./PlayerSheet.svelte";

    export let elementRoot;

    /** @type {TJSDocument<IconActor | IconItem>} */
    export let tjs_doc;

    // For anything deeper than root doc
    setContext("tjs_actor", tjs_doc); // TODO: conditional on tjs item
    setContext("tjs_item", tjs_doc); // TODO: Only if an item
    setContext("tjs_doc", tjs_doc); // Always the root doc
</script>

<TJSApplicationShell bind:elementRoot transition={scale} transitionOptions={{ duration: 200 }}>
    <PlayerSheet/>
</TJSApplicationShell>
<svelte:options accessors={true} />

<script>
    import { setContext } from "svelte";
    import { TJSApplicationShell } from "#runtime/svelte/component/core";
    // import DocStringField from "../../components/DocStringField.svelte";
    import { scale } from "svelte/transition";
    import PlayerSheet from "./PlayerSheet.svelte";

    export let elementRoot;

    /** @type {TJSDocument<IconActor | IconItem>} */
    export let tjs_doc;

    // For anything deeper than root doc
    setContext("tjs_actor", tjs_doc); // TODO: conditional on tjs item
    setContext("tjs_item", tjs_doc); // TODO: Only if an item
    setContext("tjs_doc", tjs_doc); // Always the root doc
</script>

<TJSApplicationShell bind:elementRoot transition={scale} transitionOptions={{ duration: 200 }}>
    <PlayerSheet/>
</TJSApplicationShell>
The outer application: 
import { SvelteApplication } from "#runtime/svelte/application";
import { TJSDocument } from "#runtime/svelte/store/fvtt/document";
import ActorSheetAppShell from "./DocSheetAppShell.svelte";

export default class TJSDocSheet extends SvelteApplication {
  /**
   * 
   * @param {IconActor | IconItem} doc Document to display
   *
   * @param {object} options Application options
   */
  constructor(doc, options = {}) {
    super({
      svelte: {
        props: {
          tjs_doc: new TJSDocument(doc),
        },
      },
    });
  }

  /**
   * Default Application options
   */
  static ticker = 0;
  static get defaultOptions() {
    return foundry.utils.mergeObject(super.defaultOptions, {
      // TODO: How to get normal Foundry buttons in the window header?
      id: `actor-sheet-${this.ticker++}`,
      classes: ["icon", "sheet", "actor"],
      resizable: true,
      minimizable: true,
      popOut: false,
      width: 800,
      height: "auto",
      positionOrtho: false,
      transformOrigin: null,
      title: "Document Sheet",
      zIndex: null,
      svelte: {
        class: ActorSheetAppShell,
        target: document.body,
        intro: true,
        props: {},
      },
    });
  }
}
import { SvelteApplication } from "#runtime/svelte/application";
import { TJSDocument } from "#runtime/svelte/store/fvtt/document";
import ActorSheetAppShell from "./DocSheetAppShell.svelte";

export default class TJSDocSheet extends SvelteApplication {
  /**
   * 
   * @param {IconActor | IconItem} doc Document to display
   *
   * @param {object} options Application options
   */
  constructor(doc, options = {}) {
    super({
      svelte: {
        props: {
          tjs_doc: new TJSDocument(doc),
        },
      },
    });
  }

  /**
   * Default Application options
   */
  static ticker = 0;
  static get defaultOptions() {
    return foundry.utils.mergeObject(super.defaultOptions, {
      // TODO: How to get normal Foundry buttons in the window header?
      id: `actor-sheet-${this.ticker++}`,
      classes: ["icon", "sheet", "actor"],
      resizable: true,
      minimizable: true,
      popOut: false,
      width: 800,
      height: "auto",
      positionOrtho: false,
      transformOrigin: null,
      title: "Document Sheet",
      zIndex: null,
      svelte: {
        class: ActorSheetAppShell,
        target: document.body,
        intro: true,
        props: {},
      },
    });
  }
}
TM
TyphonJS (Michael)•291d ago
If by chance you can setup a minimal reproduction case / repo that would be handy since I don't have as much time to work on things at the moment. I'll have a ~4 hour window tomorrow to take a look. Try things with a normal ApplicationShell as well. You should probably be using ApplicationShell usually anyway. TJSApplicationShell exists to provide a mechanism to separately style the window and content from a given systems styles. IE if you want to create a module / window that appears the same across game systems without assuming the styles of the game system / any theming modules. It should work the same as ApplicationShell otherwise. You might remove some of the unnecessary options like zIndex: null. You might also try removing the positionOrtho: false / transformOrigin: null options. Also removing the transition from the application shell component. Basically, try and reduce the amount of options / configuration to a minimal set and still see if an error is produced. On a cursory look at the source there does appear to be an issue, but I need to setup a full test case / figure out what is going on tomorrow.
W
WHITESPINE•291d ago
I'll try to pare it down, thanks. Wasn't really sure the difference between ApplicationShell and TJSApplicationShell - this is for a system
TM
TyphonJS (Michael)•291d ago
I do see the issue, but not sure how it made it through testing / compiling against essential-svelte-esm / and another module I have yet to release that uses TJSApplicationShell which should have been compiling against the latest TRL.
W
WHITESPINE•291d ago
The extra options were just copied from our initial exploration at moving the lancer system to tjs Totally unrelated but while you're here: is there a way to update an ApplicationShell's props after it's been constructed from outside the application?
TM
TyphonJS (Michael)•291d ago
Yes.. From SvelteApplication you can retrieve the mounted application shell via. this.svelte.applicationShell then should have accessors for each prop. This will also be the SvelteComponent instance so you have access to the rest of the client side API: https://svelte.dev/docs/client-side-component-api
W
WHITESPINE•291d ago
Thanks
TM
TyphonJS (Michael)•291d ago
This is definitely a curious bug as quite a while ago I refactored the internal stores to the application shells. In the ResizableHandle component: 
const storeElementRoot = getContext('storeElementRoot');
const storeElementRoot = getContext('storeElementRoot');
should be: 
const storeElementRoot = getContext('#internal').elementRoot;
const storeElementRoot = getContext('#internal').elementRoot;
You can make that change locally to TRL and see if things work. It does look like I'll need to push out a TRL 0.1.1 release tomorrow. Not sure how this wasn't caught in testing, but I was up against some time pressures and possibly didn't do correct end to end testing after merging the branch where all the work was done to after the merge. Strange thing is that there are resizable windows in essential-svelte-esm and another module using TJSApplicationShell and I recall compiling against TRL 0.1.0, but perhaps not.
W
WHITESPINE•291d ago
It's a fairly easy thing to miss :) No rush. I know you're still doing the ski thing
TM
TyphonJS (Michael)•291d ago
Indeed. First big training day yesterday. I have about 30 min to answer questions in the morning before getting on the bus. I'll get in 2 ~4 hour sessions a week though of more focused time.
No description
TM
TyphonJS (Michael)•290d ago
So the line above in ResizableHandle actually has to be: 
const storeElementRoot = getContext('#internal').stores.elementRoot;
const storeElementRoot = getContext('#internal').stores.elementRoot;
The error in TRL 0.1.0 will only be raised when an app has width or height set to auto and is resizable / drag the resize icon. Due to time constraints my final testing before release was more of a spot check, so I simply didn't resize an app that fit that pattern though there are a couple in essential-svelte-esm. Simple fix and I'll spend a bit more time fuzzing / testing before the 0.1.1 release. Fixed w/ TRL 0.1.1 release!
Want results from more Discord servers?
Add your server
More Posts
Popcorn InitiativeJust opening a forum post to track @gerark progress w/ TRL & Svelte + an initial idea of implementinToken Action HUDLet's continue chatting about TAH here to keep track of discussion @larkinaboutPostcssConfig seem not workin with 0.1.0@mleahy sorry to bother i'm trying to use the postccs feature of the @typhonjs-fvtt/runtime on the TJSDocument for aggregating actor flags for Svelte ComponentI'm sure this is very simple, but I'm having a hard time understanding how to get this to work. MaybUpdate to ChatMessage outside of Svelte doesn't trigger reactivity on linked TJSDocumentI'm a bit confused about this... 1. When I render a ChatMessage via svelte, in the chat message sveRelease `TRL 0.1.0` - The journey to beta begins...Greets @FVTT ▹ Developer, I am very excited to announce the release of TRL `0.1.0`. This is a majorHow do I get the elementRoot of a ChatMessage?SvelteApplication provides `elementRoot` prop to components that implement it, which is very useful.Getting started with the GUI and understanding element rootIt's been a while, but I've been working on my Knowledge Recalled module since V11 is out, and my frDrag & 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