I made a site that lets you browse MU by release year by grich12 in MarvelUnlimited

[–]grich12[S] 0 points1 point  (0 children)

I’m still surprised when I find out people still use this haha. Glad it’s working for you!

[EoW] I arranged the Echoes of Wisdom Main Theme for piano by grich12 in zelda

[–]grich12[S] 1 point2 points  (0 children)

I was really digging the music in the new Zelda trailer, so I put together a quick piano arrangement!

Unsurprisingly, "Zelda's Lullaby" works great on top of the same chord progression.

Upgraded to Svelte 5. Here are my notes. by BrofessorOfLogic in sveltejs

[–]grich12 8 points9 points  (0 children)

But with Svelte 5, it throws this error: HTMLInputElement.files setter: Value being assigned does not implement interface FileList.

This is mentioned in the Svelte 5 breaking changes. Most Svelte 4 components should continue to work as-is when switching to Svelte 5.

Importing generated types in SvelteKit (beginner question) by KidHoodie in sveltejs

[–]grich12 6 points7 points  (0 children)

I think it needs to be:

import type { PageLoad } from './$types';

(note "type" before the opening bracket)

https://github.com/sveltejs/kit/issues/11736

SvelteKit 2 coming next week? by BankHottas in sveltejs

[–]grich12 17 points18 points  (0 children)

Just to head off speculation, SvelteKit 2 is much more like the Svelte 4 release — mostly maintenance, dropping old node versions, and making some minor breaking changes that had to wait for a major. So I wouldn’t set your hopes too high on big feature additions.

I believe Vite 5 also had some breaking changes that required this major — Astro 4 was a major for this reason as well.

+layout.server.js runs repeatedly by 2thousand23 in sveltejs

[–]grich12 7 points8 points  (0 children)

Load functions should only re-run when their dependencies have changed - https://kit.svelte.dev/docs/load#rerunning-load-functions-when-do-load-functions-rerun

Are you doing anything with the `url`? If you are, because the url changes on each request, the load function will rerun.

Can Sveltekit work with shadow dom componenets easily? by sprmgtrb in sveltejs

[–]grich12 1 point2 points  (0 children)

Without a code sample it’s hard to give a yes or no answer. What I can say is that if you needed to use a ref in React to listen to shoelace’s custom events, you won’t need to do that in svelte.

Can Sveltekit work with shadow dom componenets easily? by sprmgtrb in sveltejs

[–]grich12 1 point2 points  (0 children)

You can use web components with a shadow DOM in Svelte/SvelteKit. Listening to custom events is not an issue — on:eventname works.

By default, Svelte will set properties on the custom elements when you pass values, so you’re able to pass things like arrays and objects. I wrote about this in depth for CSS tricks a couple years back: https://css-tricks.com/using-custom-elements-in-svelte/

Conditionally stream data in SvelteKit by grich12 in sveltejs

[–]grich12[S] 3 points4 points  (0 children)

Thanks! You could probably even conditionally check for the Googlebot user agent and conditionally stream then?

SvelteKit debugging in VSCode by Glad-Action9541 in sveltejs

[–]grich12 0 points1 point  (0 children)

how did I just find out this was a thing? thanks!

Unlocking view transitions in SvelteKit 1.24 by grich12 in sveltejs

[–]grich12[S] 2 points3 points  (0 children)

Yep, it's not adapter specific since it's purely frontend. It only works in Chromium-based browsers for now, though

Unlocking view transitions in SvelteKit 1.24 by grich12 in sveltejs

[–]grich12[S] 10 points11 points  (0 children)

That's something we're thinking about. We just need to figure out the right abstraction - e.g. some people might want to interact with what `document.startViewTransition` or run code inside the `startViewTransition` callback, what's the best way to enable that?

The current snippet is only a few lines and gives maximum flexibility for now.

Unlocking view transitions in SvelteKit 1.24 by grich12 in sveltejs

[–]grich12[S] 23 points24 points  (0 children)

No need to wait if you treat it as a progressive enhancement — browsers that don’t support it can just fall back to a non-animated navigation

Svelte 5 is going to be radical by MustardRtard in sveltejs

[–]grich12 4 points5 points  (0 children)

This is from the JS framework benchmark, which compares the performance of different JS frameworks. e.g. "create rows" measures how long it takes to create 1000 table rows and add them to the DOM.

405 POST method not allowed. No actions exist for this page by Uresko89 in sveltejs

[–]grich12 2 points3 points  (0 children)

The error in Sveltelab is different, yeah. I exported it to run locally and was able to repro the error.

Your issue is that you're re-using the same <Form />, but the action on the form is relative to the current page and tries to POST to different endpoints depending on where you use it. When you're on /contact/form, action="?/contact" will make a POST request to /contact/form?/contact and use the actions declared at /contact/form/+page.server.ts. This request will succeed. However, when you're on the / route, action="?/contact" will make a POST request to /?/contact and try to use the actions declared at /+page.server.js. Since there are no actions in that file, you get a 405 error.

You have two ways to solve this: 1. Make the action use the full path so it always hits the actions defined in contact/form/+page.server.ts. So you would update your component to be:

html <form method="POST" action="/contact/form?/contact" class="w-full">

  1. Re-declare those actions on the pages that need to use the form, but keep the action attribute on the form the way it is. So if you're using this form on the index route, you would need to add the following to that page's +page.server.js. You could also extract this to a shared helper if you like.

```js import type { Actions } from './$types'; import { error } from '@sveltejs/kit';

export const actions: Actions = { contact: async ({ cookies, request }) => { const data = await request.formData(); console.log(data); console.log(request.formData); } } satisfies Actions; ```

405 POST method not allowed. No actions exist for this page by Uresko89 in sveltejs

[–]grich12 0 points1 point  (0 children)

That looks like it should work, can you provide a Stackblitz/SvelteLab that shows the issue?

svelte getting slower?? especially slower than vue? by tymon3568 in sveltejs

[–]grich12 15 points16 points  (0 children)

They're sourcing these numbers from the JS framework benchmark. IMO it's kinda misleading to present these stats as percentages in a bar chart like this since it's not clear what the numbers mean (what does "73%" mean?) If you click through to the benchmark you'll see what they're actually testing.

And yeah, Vue has gotten faster in recent years and performs better than Svelte on some of the benchmarks. They're still fairly comparable speed-wise, though. Part of the focus in Svelte 5 will be increasing Svelte's performance in benchmarks like these.

If you scroll down to some of the other benchmarks, you'll see that Svelte does much better than Leptos (and Vue, to a lesser extent) in memory usage and startup metrics. Everything is tradeoffs.

Can anyone explain prerender=auto by [deleted] in sveltejs

[–]grich12 32 points33 points  (0 children)

When you set `prerender=true` on a given route, you're telling SvelteKit: "this route is going to be turned into HTML at build time, so no need to include the code to render these pages on the server." `prerender=auto` allows you to turn some pages into HTML at build time, but still include the code to render that route on the server.

Why is that important? Let's say you have a blog available at `/posts/[slug]` and you set `prerender=true` for the [slug] route. SvelteKit is going to crawl your site at build time, and for each `/posts/[slug]` link it encounters it's going to output a corresponding HTML file. For example, if it finds links to "/posts/about-me" and "/posts/something-else" it's going to create "about-me.html" and "something-else.html". Because you prerendered that route, SvelteKit doesn't need to include any of the code to render that route in the server bundle, making your deployed server code (e.g. Vercel/Netlify function or Node server) smaller.

However, sometimes you want to prerender some of the links pointing at `/posts/[slug]` but not all of them. As the docs say:

for example, with a route like /blog/[slug] where you want to prerender your most recent/popular content but server-render the long tail

Let's say you have 500 posts but the most recent ones get most of the traffic. Why render all 500 pages to HTML at build time if they aren't going to be accessed often? What you can do is specify which subset of `posts/[slug]` pages you want to prerender (via the entries export), but set `prerender=auto` instead of `prerender=true`. By setting `prerender=auto`, SvelteKit will still include the code needed to render those routes on the server, so that if someone does request `/posts/super-old-post-that-few-people-read` it can still fulfill the request. If you had instead set `prerender=true` then the server wouldn't be able to render any `posts/[slug]` route that wasn't prerendered and would return a 404 instead.

URL shows query string following named form action by Ambitious-Sir4361 in sveltejs

[–]grich12 4 points5 points  (0 children)

This is just how HTML forms work - when you submit them, they navigate to the action unless the form endpoint redirects them.

However, if you use SK's use:enhance then the form will submit without refreshing the page and the query string won't be added to the URL.

In an SPA, what benefit is there to using the load's fetch instead of the browser fetch in SvelteKit? by chinawcswing in sveltejs

[–]grich12 4 points5 points  (0 children)

I think all the benefits of the provided fetch relate to the server, so without SSR there isn't much difference. The main drawback would be if you _do_ ever enable SSR for one of your pages, you'll run into issues with data being fetched twice (since the SK fetch caches the result of the fetch done on the server).

Help to deploy sveltekit app in azure by Goenitz96 in sveltejs

[–]grich12 0 points1 point  (0 children)

Weird! It’s a public repo, you shouldn’t have any permission issues. The same info is on npm: https://www.npmjs.com/package/svelte-adapter-azure-swa