Comments (7)
@atsepkov Thanks for reporting. I've never used SvelteKit with Webpack so I don't what config you might be missing.
But your guess is correct, this import is provided by SvelteKit itself (see the docs) and isn't for instance available in Sapper, making svelte-toc
SvelteKit-only. There used to be this line about it in the readme.
I originally started using the page
store to detect route changes and re-query the DOM for headings to list so the component stays in sync with the content. But SvelteKit changed a lot since then. Maybe there's a better solution to this. Could you simply comment out the $app/stores
import and see if the ToC still stays up to date when navigating between pages? Maybe we can drop it altogether.
from svelte-toc.
Commenting out that line as well as the page.subscribe(requery_headings)
line making use of that import in the doc did seem to make the timeline mostly work. It no longer automatically updates with sections as headings are added to the document, but I added a work-around by adding use:reload
to headings are they're rendered and having reload function that updates the key Toc element listens to.
The only part I'm still struggling with (unrelated to the original issue, but maybe you know of a quick fix) is that the document scrolling seems to break due to Toc rendering unless I put the 2 elements together into a display: flex
element, but setting that element to flex seems to in turn break the mobile pop-out menu that my app uses (it also uses aside
element - rendered via svelte-materialify library).
from svelte-toc.
It no longer automatically updates with sections as headings are added to the document
I don't think it was doing that before either. It would only update when the page
store changes, i.e. on navigation events.
I added a work-around by adding
use:reload
to headings are they're rendered and having reload function that updates the key Toc element listens to.
Sounds a bit like your loosing encapsulation since the job of ToC is now partially performed by the headings themselves but if it works for you, that's good.
It would still be nice to find a more robust/permanent solution. There's a discussion about getting headings in SSR that's slightly related: sveltejs/kit#3230. Maybe there's something Kit could offer here to make updating on new DOM heading nodes easier in the future.
The only part I'm still struggling with (unrelated to the original issue, but maybe you know of a quick fix) is that the document scrolling seems to break due to Toc rendering unless I put the 2 elements together into a
display: flex
element
Have you tried setting keepActiveTocItemInView={false}
. If that removes the problem, we know for sure where the issue comes from.
from svelte-toc.
Thanks! That setting was exactly what I was looking for. Menu now aligns as expected, I still have a minor problem with it in that the section that gets marked as selected inside ToC element after clicking it seems to be off by 1 (highlighting previous section title instead of current, even though the scrolling location on the page seems to be correct - it shows about 100px of content from the past section but I believe that's due to activeTopOffset
). Setting activeTopOffset
to a lower value in case the problem was due to that seems to have no effect.
from svelte-toc.
Hard to say what's going wrong without seeing the problem and having dev tools to inspect the page.
from svelte-toc.
@atsepkov Since #19, specifically 939d5db, Toc.svelte no longer uses any SvelteKit-specific objects like the page
store. Instead it relies solely on browser APIs, namely MutationObserver. I expect this change also fixes your issue. Maybe you want to give it another try?
from svelte-toc.
Sorry for the slow response, I've been using the local version with the fix applied and just had a chance to refactor it back to using the official version. Thank you, the change does indeed fix my issue. On a related note, I remember seeing a way to disable certain headers from being picked up by TOC but can't seem to find that in the README anymore. Was that one of the features or am I imagining things?
EDIT: Found it, toc-exclude
is the option I was looking for. Once again, thank you for building the component.
from svelte-toc.
Related Issues (20)
- Quick questions HOT 1
- Strange behaviour HOT 16
- Prevents scroll when using smart zoom on macOS HOT 1
- [Question] Split into sections HOT 4
- Component persisting on page change when not required HOT 2
- How do I customize the font-size of each item of the ToC? HOT 4
- New prop for toc nav overflow-y HOT 1
- Component insists on starting at full height above the text HOT 4
- Svelte-toc interferes with other anchor links in the document HOT 9
- [Question]TypeScript support HOT 4
- Is there an option to hide the scrollbar if the ToC doesn't reach certain size? Or just hide in general? HOT 4
- Disable blur initial transition animation HOT 1
- SvelteKit page navigation breaks when svelte-toc is shown HOT 1
- Add option to only show sublevel headings below currently active top-level heading
- Issues with highlighting the correct content HOT 1
- `keepActiveTocItemInView` should be false by default HOT 3
- Hide when intersecting with user-specified DOM nodes
- Add slots for custom ToC items HOT 1
- Add tests
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-toc.