TyphonJS•2y ago

TJSGameSettings with not registered settings.

I am not sure what is happening in here. I have created an attachement to the existing Settings page. It works the first time I open it. However, when settings are saved, the window closes, and then subsequent opening of the settings causes these errors.

34 Replies

TyphonJS (Michael)•2y ago

Well.. Do post a link to your repo as it's probably a configuration / usage mistake.

VauxsOP•2y ago

This happens so sporadically I cannot reproduce it reliably 🙁

TyphonJS (Michael)•2y ago

I've never seen that the entire time of things up and running at least.

VauxsOP•2y ago

Starting to think it might be a vite issue, maybe when I edit the svelte file? Also sending it in a sec https://github.com/MrVauxs/foundry-summons/tree/main/src/settings

TyphonJS (Michael)•2y ago

It could very well be, but I don't think I've seen any issue there as well; yet at least.

VauxsOP•2y ago

Trying to replicate this bug while not actively working in my code editor sure doesn't get me anywhere OK Yep That's it, it's the editing process

VauxsOP•2y ago

and got this on closing and reopening*

TyphonJS (Michael)•2y ago

Yeah.. I can't say for certain since it looks like you are embedding a Svelte component inside the core settings area.. Heh wasn't aware that was possible. I think a potential better solution is entirely host all your settings / specific settings page inside your main app itself.

VauxsOP•2y ago

Considered, but I dislike the idea And hey, you gave me the how-to add Svelte components to chat messages Why not use it anywhere I want 😄

TyphonJS (Michael)•2y ago

The problem is coming from renderSettingsConfig which is a Foundry hook.

VauxsOP•2y ago

Do I have to destroy the component when the window is closed? Because I can with closeSettingsConfig

VauxsOP•2y ago

or any one of these really I suppose

TyphonJS (Michael)•2y ago

You're definitely going off the reservation so to speak, so I don't have any particular experience with what you are trying to pull off.

VauxsOP•2y ago

I have to be cursed with perpetual primalness then if I keep getting myself into such wild territories lmfao

TyphonJS (Michael)•2y ago

I think a bit of it is that Vite is doing a partial HMR cycle and because you are embedding things in the Foundry render hooks that is causing the conflict.

VauxsOP•2y ago

Destroying the component does not seem to give any results.

TyphonJS (Michael)•2y ago

IE quite possibly if you proceed in this direction you'll just have to work on that part of your package with production builds. IE you are mixing HMR / Svelte reload embedded in Foundry lifecycle hooks. The HMR doesn't extend to the Foundry platform per se.

VauxsOP•2y ago

Yeah, hopefully this is just a dev thing

TyphonJS (Michael)•2y ago

It does appear so, but because you are mounting the Svelte component. I assume you are directly mounting / creating a new Svelte component and that part doesn't have anything to do w/ TRL. IE it's your own custom component. TRL at the SvelteApplication level has special handling to respond to the Svelte Vite HMR hooks and do any housekeeping necessary to connect the new SvelteApplication mounted component to the underlying Foundry Application instance. Registration to the HMR hooks from @sveltejs/vite-plugin-svelte: https://github.com/typhonjs-fvtt-lib/svelte/blob/main/src/application/SvelteApplication.js#L469-L477 And the house keeping method invoked: https://github.com/typhonjs-fvtt-lib/svelte/blob/main/src/application/SvelteApplication.js#L933-L980 --- So if you are ad hoc mounting your own custom Svelte component in the renderSettingsConfig hook there is no connection to the underlying Foundry setup out of the box.

VauxsOP•2y ago

Yeah, it's in the settings.js

Hooks.on('renderSettingsConfig', (app, html) => {
    const target = html[0].querySelectorAll(`[data-category="${moduleID}"]`)[0];
    const anchor = target.getElementsByClassName('form-group')[0];
    new Svelttings({ target, anchor, props: { gameSettings } });
});

Hooks.on('renderSettingsConfig', (app, html) => {
    const target = html[0].querySelectorAll(`[data-category="${moduleID}"]`)[0];
    const anchor = target.getElementsByClassName('form-group')[0];
    new Svelttings({ target, anchor, props: { gameSettings } });
});

TyphonJS (Michael)•2y ago

In this case you'll need to do production builds as there is no fascilitation code that is replacing the newly loaded component into the DOM correctly.
The old component is destroyed, but maybe lingers around in the DOM, not sure exactly in this particular case off the top of my head. Maybe try getting access to gameSettings not through a prop. The newly loaded / HMR component won't have a reference to gameSettings.

VauxsOP•2y ago

The props are removed on HMR? I doubt that But sure, will try that

TyphonJS (Michael)•2y ago

IE export gameSettings as you are from ./settings.js and try: import { gameSettings } from './settings.js'; inside the settings component. That might work in this case.

VauxsOP•2y ago

That, in fact, makes it break fuckin' immediately upon editing. With the EXACT same error. With no need for opening and closing the settings now I guess.

VauxsOP•2y ago

oh god what

TyphonJS (Michael)•2y ago

I can't quite see what you are doing of course. I do have code where I import a TJSGameSettings reference by using import { gameSettings } from '...etc'; in a Svelte component. Again this is just HMR awkwardness. You are going off the reservation. There should be absolutely no problems with production builds. This likely won't work with HMR. Indeed the HMR support in TRL is a bit magic because it just works, but it just works because there is handling code beneath the surface.

VauxsOP•2y ago

Fair enough. But yeah, I simply replaced export let gameSettings with the import I will go back to using props though given that those work, at least until I close the menu...

TyphonJS (Michael)•2y ago

Just work in production mode for this part of your app and all should be fine. There is no handling to respond to the HMR cycle with bespoke mounting of Svelte components. You could add your own handling if you really wanted to, but the easiest solution is production builds since you are going off reservation here. Neat idea though for a Svelte component embedded in Foundry settings. I think though that you'll get just as nice if better UX moving that to your main app.

VauxsOP•2y ago

The issue is that I would have to style the main app, and the user has to go an additional button press to get to it Also, a very ugly single button settings menu In the end I will just develop this with this crash in mind. I like the looks of this in the integrated Foundry settings.

VauxsOP•2y ago

Like this is pretty, which is what I wanted to replicate the style of.

TyphonJS (Michael)•2y ago

I don't think I've gone through some of the easy to use features that make embedding settings in the main SvelteApplication / component easy. You can have a button in the main header bar that swaps between settings and back to the main content. Anyway.. Yeah.. I think you have the general answer that HMR works for SvelteApplication because there is special handling. If you are bespoke mounting your own Svelte component especially in response to a Foundry hook HMR doesn't work automatically.

Gaming

Programming

TJSGameSettings with not registered settings.