TyphonJS•2y ago

Chat Message Failed to Render

Attempting to load multiple svelte elements into a chat message. So far I was successful, but the moment I try to add a specific anchor to the svelte component, it breaks, resulting in:

9 Replies

Vauxs•2y ago

The renderChatHook looks as follows:

const target = html[0];
const anchor = html[0].getElementsByClassName("damage-application")[0]
console.log("Hello, world!", anchor, target)
message._svelteTargetDamage.damageButtons = new TargetDamage({ target, props: flagData, anchor });

const target = html[0];
const anchor = html[0].getElementsByClassName("damage-application")[0]
console.log("Hello, world!", anchor, target)
message._svelteTargetDamage.damageButtons = new TargetDamage({ target, props: flagData, anchor });

In comparison, another element works:

const target = html[0].getElementsByClassName("dice-roll damage-roll")[index].getElementsByClassName("dice-total")[0];
const anchor = html[0].getElementsByClassName("dice-roll damage-roll")[index].getElementsByClassName("dice-total")[0].getElementsByClassName("total")[0];
message._svelteTargetDamage.splashButton = new SplashButton({ target, props: flagData, anchor });

const target = html[0].getElementsByClassName("dice-roll damage-roll")[index].getElementsByClassName("dice-total")[0];
const anchor = html[0].getElementsByClassName("dice-roll damage-roll")[index].getElementsByClassName("dice-total")[0].getElementsByClassName("total")[0];
message._svelteTargetDamage.splashButton = new SplashButton({ target, props: flagData, anchor });

TyphonJS (Michael)•2y ago

Read the Svelte docs again. anchor must be a child of target.

Vauxs•2y ago

a direct child I presume Yes Yes it has to be.

TyphonJS (Michael)•2y ago

Indeed. Otherwise you'd change the target accordingly.

Vauxs•2y ago

I think I should reference the target in the anchor variable so I don't do mistakes like that in the future. And something for future discord searchers. and the new bot already agreed to having my messages be public lol yep, doing that works swell

if (roll.options.splashOnly) {
    const target = html[0].getElementsByClassName("dice-roll damage-roll")[index].getElementsByClassName("dice-total")[0];
    const anchor = target.getElementsByClassName("total")[0];

    message._svelteTargetDamage.splashButton = new SplashButton({ target, props: flagData, anchor });
} else {
    const target = html[0].getElementsByClassName("message-content")[0];
    const anchor = target.getElementsByClassName("damage-application")[0]

    message._svelteTargetDamage.damageButtons = new TargetDamage({ target, props: flagData, anchor });
}

if (roll.options.splashOnly) {
    const target = html[0].getElementsByClassName("dice-roll damage-roll")[index].getElementsByClassName("dice-total")[0];
    const anchor = target.getElementsByClassName("total")[0];

    message._svelteTargetDamage.splashButton = new SplashButton({ target, props: flagData, anchor });
} else {
    const target = html[0].getElementsByClassName("message-content")[0];
    const anchor = target.getElementsByClassName("damage-application")[0]

    message._svelteTargetDamage.damageButtons = new TargetDamage({ target, props: flagData, anchor });
}

TyphonJS (Michael)•2y ago

Cool.. Yeah.. I didn't know how it would look re: new bot. It can't hurt for future folks looking for answers. Well.. Glad you got things sorted quickly! 😄

Vauxs•2y ago

I think I came across it actually but I just, kind of forgot about it lmao rubber duck method Ugh, though this is something I can't find Is there an anchor for rendering the component after it? I could just use the current target and then like, target whatever is after it I suppose I guess .nextSibling isn't the worst solution after looking it up.

TyphonJS (Michael)•2y ago

No, just providing a target renders at the end of its children. Providing an anchor renders before a specific child. Technically you don't need an after field.

Vauxs•2y ago

Sure, just would be nice to have a two-way anchor

Gaming

Programming

Chat Message Failed to Render