T
TyphonJS•2y ago
WHITESPINE

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
11 Replies
WHITESPINE
WHITESPINEOP•2y 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: {},
      },
    });
  }
}
TyphonJS (Michael)
TyphonJS (Michael)•2y 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.
WHITESPINE
WHITESPINEOP•2y ago
I'll try to pare it down, thanks. Wasn't really sure the difference between ApplicationShell and TJSApplicationShell - this is for a system
TyphonJS (Michael)
TyphonJS (Michael)•2y 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.
WHITESPINE
WHITESPINEOP•2y 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?
TyphonJS (Michael)
TyphonJS (Michael)•2y 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
WHITESPINE
WHITESPINEOP•2y ago
Thanks
TyphonJS (Michael)
TyphonJS (Michael)•2y 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.
WHITESPINE
WHITESPINEOP•2y ago
It's a fairly easy thing to miss :) No rush. I know you're still doing the ski thing
TyphonJS (Michael)
TyphonJS (Michael)•2y 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
TyphonJS (Michael)
TyphonJS (Michael)•2y 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!

Did you find this page helpful?