Strange behaviour

[oskar-gmerek]

Hi there,

I trying to implement svelte-toc to my current work. Unfortunately, I experiencing strange behaviour.

When I navigating by a link to: /article

Then in svelte-toc I got data from the previous page (on that previous page, svelte-toc wasn't used). If I refresh the page in the browser, then svelte-doc is loaded with the correct data. If I just put the URL to the article in the browser and open the page that way, the correct data will be loaded also in that case.

What I see that makes a demo app different from my work is that I do not use mdsvex, I get markdown data from 3rdparty APIs and I parse it with markdown-it. So my <Toc /> component is not in markdown, but above it (I do not have file +page.svx, I using <Toc /> in +page.svelte)

It's hard for me to reproduce it, as I cannot share backend/frontend data. And at the same time, I have no idea what reason for that behaviour.

I will be grateful for any tips on where to look for the cause

Regards

[janosh]

What you describe sounds like this line doesn't run:

https://github.com/janosh/svelte-toc/blob/42a232dee2c8de46819b3a68fc059d2b5903098d/src/lib/Toc.svelte#L42

Or maybe it runs too early before the new headings have appeared on the page.

Could you modify the file Toc.svelte in your node_modules and add a console.log('hi from requery_headings') at the start of function requery_headings() to make sure it's not run?

[oskar-gmerek]

Hi @janosh.

I can confirm, is not running with link navigate, and is running after page refresh.

[janosh]

I tried but can't reproduce the problem locally. Could you add afterUpdate to your Toc.svelte and see if it solves the problem?

import { afterUpdate } from 'svelte'

afterUpdate(requery_headings)

You can remove or leave the line page.subscribe(requery_headings), shouldn't matter.

[oskar-gmerek]

You can remove or leave the line page.subscribe(requery_headings), shouldn't matter.

Indeed that doesn't matter.

This not solving the problem but changing behaviour

After changing page by the link I get the same toc as before (with data from the previous page), but if I scroll (just a bit is enough) then data from the previous page is gone. Additionally, (after scroll) the title of toc is duplicated.

I just realized.

Then in svelte-toc I got data from the previous page (on that previous page, svelte-toc wasn't used).

Its data from the previous page + correct data on the bottom

[janosh]

Interesting. One more thing to try then is adding

import { afterNavigate } from '$app/navigation'

afterNavigate(requery_headings)

Could you try this with and without the afterUpdate(requery_headings) line?

[oskar-gmerek]

Looks like afterNavigate didn't change anything. With and without afterUpdate is the same.

[janosh]

Then I'll need a reproduction to debug this further. I'm guessing there's something unusual happening when navigating your site but can't say what without poking into the details.

[janosh]

Actually, thinking about this more, maybe the MutationObserver would be a more robust solution for the purpose of this component. Let me try that and get back to you.

[janosh]

Could you try the v0.3.0 release and see if the problem persists?

[oskar-gmerek]

@janosh well done, especially that you were blindfolded.

v0.3.0 solving problem, but I get duplicated title of toc with that version. In both cases, when navigating via the link and after refreshing the page. Thanks a lot for taking care of it!

That second one, a not expected title is rendered as li in ul. Not as a second header. Probably the easiest solution will be to render title of toc in span instead of h2 tag

[janosh]

@janosh well done, especially that you were blindfolded.

v0.3.0 solving problem

Glad to hear it. 👍

ut I get duplicated title of toc with that version. In both cases, when navigating via the link and after refreshing the page. Thanks a lot for taking care of it!

That sounds like expected behavior. It's currently up to you to define a custom headingSelector that excludes the ToC's own heading. Though again, come to think of it, it should definitely have a class of toc-exclude by default.

[janosh]

Closed by #19.

[oskar-gmerek]

@janosh After #20 I just start thinking if the header of toc should have h tag from the SEO point of view, what do you think?

[janosh]

I was debating this myself. I decided to go with a heading cause it seemed like the most semantic HTML but am willing to be convinced otherwise.

An argument in my favor is that MDN itself uses an <h2> for their ToC heading:

[oskar-gmerek]

@janosh What do you think about letting users choose their own choice of tag for it? #21

[janosh]

Good idea! Thanks. 👍