SvelteKit: Dynamic Component Styling Issue - Parameters Not Updating on Navigation between Subpages

Question

Hi,

I'm really new to web dev. While making sveltekit website, I faced issue, which prevent me from progressing with my project. Here is a link to the example repo of my issue: https://github.com/RafalBuchner/sveltekit-issue-example . And here is its full description:

Description of the issue

I've prepared this example to inform you about my SvelteKit issue.

I'm building the website, which will be a presentation of the fonts I've designed.

For this reason, I've built a simple Tester component (you can find its code in src/lib/components/tester.svelte) that is used in src/routes/typeface/[style]/+page.svelte file.

In src/routes/typeface/[style]/+page.svelte file, I'm dynamically building several instances of the Tester component based on the data parsed in src/routes/typeface/[style]/+page.server.svelte file. Data is loaded from the src/lib/data/font-data.json file.

My question:

When I go to the "slanted" subpage directly from my home page, all parameters presented by sliders are correctly initiated.

When I switch to the "upright" subpage using the navigation link on the top of the page, font weight and font slant parameters are not being updated. This way, text that is supposed to be displayed in a heavy upright font is displayed with light-slanted letters.

When I refresh the subpage using cmd+r (on Mac) or ctrl+r (on Windows), styling reinitiates and looks as it should. Now, when I click on the "slanted" link, the slanted subpage is messed up.

What should I do to have the correct styling without refreshing the page?

Example of what I do want to achieve:

• This catalogue of typefaces has similar functionality to what I'm looking for. If you click on some font's name, it will direct you to the subpage of the font with multiple testers (here called "font samplers" – you can see the sidenote on the left "font sampler").

I would really appriciate help.

Answer 1

The issue you are having is that in SvelteKit components that are currently on screen are not "recreated" but rather the props just update, pages are in this sense also just components.

So when you change page data is changed, but the page component itself isn't. This result in Tester not being re-initialized, just the props get updated.

Another thing in Svelte is that the script tag is only executed once at component creation, taken together that means that if you have this code

export let instances;
export let current_style;
let weight = 400;
weight = instances[current_style].weight;

that 4th line never gets executed again. in order for that to happen, you have to mark this line as reactive

weight = instances[current_style].weight;

with this weight will change when instances or current_style changes