TyphonJS•4mo ago

V13 Sidebar Troubles

The files can be seen here, I havent changed much from V12 to V13 https://github.com/MrVauxs/pf2e-graphics/tree/v13-v1-alpha/src/view/AnimationSidebar

GitHub

pf2e-graphics/src/view/AnimationSidebar at v13-v1-alpha · MrVauxs/...

Discord: @vauxs. Contribute to MrVauxs/pf2e-graphics development by creating an account on GitHub.

41 Replies

TyphonJS (Michael)•4mo ago

is setupSidebar invoked in the core init hook?

VauxsOP•4mo ago

in setup, which worked before But even init doesnt seem to work

TyphonJS (Michael)•4mo ago

Yeah.. docs do say setup hook. Do you have a stack trace? Next thing would be to install the latest essential-svelte-esm preferably from source which should be using 0.3.0-next.2. See if the sidebar demos work.

VauxsOP•4mo ago

I did earlier, and it works there

TyphonJS (Michael)•4mo ago

No stack trace? If essential-svelte-esm works there could possibly be something else going on w/ your code, so just some basic divide and conquer for now.

TyphonJS (Michael)•4mo ago

Just to make sure as well that the essential-svelte-esm demo looks like this which is the new demo:

VauxsOP•4mo ago

Yes

TyphonJS (Michael)•4mo ago

I'd back things up and load a very simple sidebar / bare bones component to make sure you can get that running. If that runs then the problem is somewhere on your side. Glad to try and help debug.

VauxsOP•4mo ago

Ok, got something

VauxsOP•4mo ago

It was earlier reporting as an inconspicuous module error that I wasnt sure if it was TJS or not

VauxsOP•4mo ago

Removing beforeId makes the tab appear but nonfunctional and in the wrong position. So its definitely something to do with the positioning itself.

VauxsOP•4mo ago

oh, and here it is in its inconspicuous version

VauxsOP•4mo ago

Not sure why the essentials work and this doesn't, but it feels like it might be mad because the anchor is the button, while the target is two parents above it, and not a direct parent?

VauxsOP•4mo ago

TyphonJS (Michael)•4mo ago

Yeah.. That's really weird. I'm trying the 0.3.0-next.2 version of essential-svelte-esm and changed the add sidebar demo to use cards and it works fine. What Foundry version are you on 345?

TyphonJS (Michael)•4mo ago

At this point I do recommend that you replicate a very basic component being mounted like the essential-svelte-esm demo in your code to ensure that this works. Swap out the sidebar component for a very basic one. Not being able to reproduce the issue on my side makes this one a bit harder to debug. I tested in FF / Chrome. I assume you are testing in Chrome?

VauxsOP•4mo ago

345, pf2e system 7.1.1 I already did Its not the actual component that has the problem Its the mounting Yes

TyphonJS (Michael)•4mo ago

I know what the error stack is saying, but I can't reproduce the mounting problem. Also just tested in pf2e 7.1.1 / warhammer and others and they all work mounting before cards. Do you have all modules disabled except for yours?

VauxsOP•4mo ago

Just it, Sequencer, and libwrapper. Welp. Found the issue.

TyphonJS (Michael)•4mo ago

Installed Sequencer / libwrapper on pf2e and it works. Perhaps verify in node_modules that you are indeed on 0.3.0-next.2 and perhaps reinstall

VauxsOP•4mo ago

node_modules issue LOL Yeah, perfect timing. I decided to delete and reinstall and it magically worked. Or I forgot to redo installs when switching branches. Its 2 am by now. But yes, it works.

TyphonJS (Michael)•4mo ago

package-lock.json perhaps. Good good... 😄 🎉 🚀

VauxsOP•4mo ago

Now to see if the rest of the module is broken

VauxsOP•4mo ago

on that note :vicksyHmm:

VauxsOP•4mo ago

Of course.

TyphonJS (Michael)•4mo ago

Hopefully not! Hmm... Let me check that.. It's the core Foundry popup, so should localize that I believe right?

VauxsOP•4mo ago

Yeah And alright, got that one fixed with the same thing I did in V12 lol

FVTTSidebarControl.wait().then(() => {
        $('.graphics-sidebar').addClass('flexcol directory pf2e-g');
    });

FVTTSidebarControl.wait().then(() => {
        $('.graphics-sidebar').addClass('flexcol directory pf2e-g');
    });

The comment in the code states that adding classes to the sidebar should have been fixed in a later version, is that something you remember? 🥴

TyphonJS (Michael)•4mo ago

flexcol directory is in TRL, but of course not pf2e-g.

VauxsOP•4mo ago

That works.

TyphonJS (Michael)•4mo ago

Hmm.. maybe I can add another config parameter though to add additional classes without having to do it manually.

VauxsOP•4mo ago

Yeah the V12 code looked like so

/* eslint-disable ts/ban-ts-comment */
import { FVTTSidebarControl } from '@typhonjs-fvtt/standard/application/control/sidebar';
import AnimationSidebar from './Sidebar.svelte';

export function setupSidebar() {
    FVTTSidebarControl.add({
        id: 'graphics',
        beforeId: 'cards',
        icon: 'fas fa-films',
        tooltip: 'pf2e-graphics.sidebar.animationSets.tooltip',
        title: 'pf2e-graphics.sidebar.animationSets.title',
        // @ts-ignore Fixed in the next update
        classes: ['flexcol directory pf2e-g'],
        svelte: {
            class: AnimationSidebar,
        },
    });

    FVTTSidebarControl.wait().then(() => {
        $('.graphics-sidebar').addClass('pf2e-g');
    });
}

/* eslint-disable ts/ban-ts-comment */
import { FVTTSidebarControl } from '@typhonjs-fvtt/standard/application/control/sidebar';
import AnimationSidebar from './Sidebar.svelte';

export function setupSidebar() {
    FVTTSidebarControl.add({
        id: 'graphics',
        beforeId: 'cards',
        icon: 'fas fa-films',
        tooltip: 'pf2e-graphics.sidebar.animationSets.tooltip',
        title: 'pf2e-graphics.sidebar.animationSets.title',
        // @ts-ignore Fixed in the next update
        classes: ['flexcol directory pf2e-g'],
        svelte: {
            class: AnimationSidebar,
        },
    });

    FVTTSidebarControl.wait().then(() => {
        $('.graphics-sidebar').addClass('pf2e-g');
    });
}

I just kind of assumed the ergonomics would be the same as for an Application

TyphonJS (Michael)•4mo ago

It'll be called sidebarClasses instead of just classes, but it's in the next #standard release. Definitely do get in contact if you have any ideas on features to add like this. It's nice to make the API easier to use though great that it is resilient enough to allow adhoc manipulation IE FVTTSidebarControl.wait().

VauxsOP•4mo ago

If only V13 wasn't so disruptive I probably would have gotten to this earlier lol But yeah, will do (and have done, admittedly :p )

TyphonJS (Michael)•4mo ago

Tell me about it. The frustration was / is real as things changed up quite a bit between each testing version, no transparency on TinyMCE, and even between the last testing and "stable". I held off not commenting in the 0.3.0-next.X thread from last weeks conversation or so with great effort on my part.. ;P

Syrious•2mo ago

I'm looking for a way to get the sidebar working without upgrading to version 0.3.0. I'm currently developing a module that needs to function with both Foundry v12 and v13. This compatibility is necessary until the system I am working with gets updated to be fully compatible with v13.

TyphonJS (Michael)•2mo ago

Unfortunately, it's not something that I can support in an official release manner. Foundry core drastically changed how the sidebar works w/ v13. 0.3.0-next.3 is not tested on v12 either. I don't know the scope of your package for any other aspects that might not work, but the core sidebar definitely is incompatible between Foundry v12 / v13. You could potentially copy either or both of the resources as necessary from the main branch and the 0.2.x branch and see if you can hobble together two separate versions manually. It would take a bit of work, but is likely doable. main branch: - #standard/application/control/sidebar - internal components 0.2.x branch: - #standard/application/control/sidebar - internal components

Syrious•2mo ago

Alright, ~~I'll try that.~~ Got it working. Thanks!.

TyphonJS (Michael)•2mo ago

So a thought on how to make this easier for you to bridge 0.2.x w/ 0.3.0-next.3. If your package is sidebar only you might consider making 0.3.0-next.3 the main #standard install then likely you can use a github link to the 0.2.x branch and install that version of standard under a separate package reference and modify the imports statement in package.json to provide an alternate name like #standard-v12 pointing to that github package install. Depending on what your package does you might make the latest 0.2.1 NPM release the main install and use a github link for 0.3.0-next.3 renaming the package in a similar manner just to access FVTTSidebarControl. Here is what renaming a package via Github link that I use in the runtime-base library for a fork. The package is actually colord, but it can be renamed; example The github link for the 0.2.x branch should be: github:typhonjs-fvtt-lib/standard#0.2.x So your package.json will look something like this...

{
  "imports": {
    "#runtime/*": "@typhonjs-fvtt/runtime/*",
    "#standard/*": "@typhonjs-fvtt/standard/*",
    "#standard-v12/*": "@typhonjs-fvtt/standard-v12/*"
  },
  "dependencies": {
    "@typhonjs-fvtt/runtime": "^0.3.0-next.3",
    "@typhonjs-fvtt/standard": "^0.3.0-next.3",
    "@typhonjs-fvtt/standard-v12": "github:typhonjs-fvtt-lib/standard#0.2.x",
    "svelte": "^4.2.20"
  },
}

{
  "imports": {
    "#runtime/*": "@typhonjs-fvtt/runtime/*",
    "#standard/*": "@typhonjs-fvtt/standard/*",
    "#standard-v12/*": "@typhonjs-fvtt/standard-v12/*"
  },
  "dependencies": {
    "@typhonjs-fvtt/runtime": "^0.3.0-next.3",
    "@typhonjs-fvtt/standard": "^0.3.0-next.3",
    "@typhonjs-fvtt/standard-v12": "github:typhonjs-fvtt-lib/standard#0.2.x",
    "svelte": "^4.2.20"
  },
}

This might work and is just an idea to test out instead of trying to copy individual files which is more cumbersome. I might have some time to dabble and check this out later today, but figured I'd give a heads up on the likely easiest way to make this a bit more automatic. Depending on which way you go, but w/ the example config above:

import { FVTTSidebarControl } from '#standard/application/control/sidebar';
import { FVTTSidebarControl as FVTTSidebarControlV12 } from '#standard-v12/application/control/sidebar';

// Then use game version to choose which one loads your sidebar component.

import { FVTTSidebarControl } from '#standard/application/control/sidebar';
import { FVTTSidebarControl as FVTTSidebarControlV12 } from '#standard-v12/application/control/sidebar';

// Then use game version to choose which one loads your sidebar component.

This probably almost works. The thing I'd expect to require further adjustment is that because standard uses sub-path exports that you'll have to modify the import in the github linked FVTTSidebarControl to change this to @typhonjs-fvtt/standard-v12/component/fvtt-internal in the local copy. There might also be peer dependency conflicts as things go when it comes to the above "easy route". Try the --legacy-peer-deps option when you do npm install. You might have to manually copy and figure things out if that is the case. 😦

Syrious•2mo ago

I did it the other way around. I am still on 0.2.0 but added the sidebar stuff from 0.3.0 and it works 🙂

Gaming

Programming

V13 Sidebar Troubles

Did you find this page helpful?