Svelte(Kit) Top 10 Wishlist for 2023
Tags: svelte, sveltekit, webdev, javascript
Published: 2023-01-03 03:38:44

I've been working with Svelte for a while now, and I am so freakin happy about SvelteKit Version 1.

There are a few things I would like to see this year.

## 1. ISR (Incremental Static Regeneration) for SvelteKit
You can easily emulate ISR with headers, but I would like to see the on-demand ISR only supported by Vercel and Cloudflare. Vercel actually uses Cloudflare under-the-hood. Theoretically you could use 'purging' to delete caches on other CDNs as well, but we want the ease-of-use with directives like `getStaticPaths` to setup our paths, and a built-in revalidate function... so basically the features in NextJS. I know this is on the list. **Sidenote**: I would like to see the Cloudflare adapter work as expected in all scenarios, as I believe it still has a few missing features.
https://github.com/sveltejs/kit/milestone/4

## 2. TypeScript Support for Svelte REPL
Besides being a huge TypeScript fan, I'm a firm believer we are creating bad coders when we don't offer this by default. This is one of my favorite things about Angular. It is also way easier to translate `TS-->JS` than `JS-->TS`. So, let's get our official Svelte examples working with TS shall we!  **Side-note**: SvelteKit support would be cool too instead of having to use StackBlitz.
https://svelte.dev/repl

## 3. More Server to Client Type Safety for SvelteKit
Svelte does this great with load functions if you import the `PageLoad` and `PageData` variables. However, the `$page.data` does not seem to recognize these types. The server-only routes (or routes for apis) still work like express. It would be nice to not have to convert these things to JSON, and import our custom interfaces. I don't want to think about it being the server at all, and would like to have the option to run my queries the same way as anything else. I would like to see this work like TRPC, for example, in NextJS. I believe this is on the list too, just don't know to what extent.
https://trpc.io/

## 4. Web Sockets for SvelteKit
This would be amazing. Vercel does not support Web Sockets, but technically Cloudflare does. Imagine building a Twitter Clone in SvelteKit, and then adding realtime database connections without a third party. Imagine you have a `+stream.ts` file where you could easily add subscriptions to your custom GraphQL.
https://support.cloudflare.com/hc/en-us/articles/200169466-Using-Cloudflare-with-WebSockets

## 5. Auto-Imports
I think this is amazing. NuxtJS does this, and Angular is working on this. However, I believe Rich Harris strait up said "no" to this, which I hope he changes his mind. Apparently, this causes problems with "static dependency tracking," but that doesn't mean it is impossible to figure out. This would be very nice.
https://github.com/sveltejs/kit/discussions/3032

## 6. Official Reactive Forms Module
This is another one of those things that Angular does very well. You don't need the reactive part in Svelte as much as the Validation part (as well as touched, valid, patch, etc). There are several form modules in Svelte, but most of them have not been updated for years. We need an official way to do this. I actually had to use two different form packages for one project. 
https://angular.io/guide/reactive-forms

## 7. Officially Supported Material UI Module
I know everyone loves Tailwind; I do too. However, there are too many things we take for granted with Material Design. Try and add a simple Date Picker to a Svelte Project. The Materialify project was abandoned (as well as the potential re-write SvelterialJS). The Svelte Material UI hasn't been updated in months, has poor documentation, and may well be on its way to be abandoned as well. Angular Material is well supported by Goodle, React MUI is in the process of getting updated, and so is Vuetify. SolidJS just built a translator for React MUI, and I think it is buggy and doesn't support Solid Start yet. Vercel should donate $$ monthly to support Svelte Material UI. It also needs to add components outside of Material Web (like Datepicker) that the Vue, Angular, and React alternatives support. Material UI is the standard for a reason. Another option would be to find a good translator like Mitosis, but I don't see that happening in this case. That being said, there are some alpha and beta UI Frameworks worth looking at like Skelton and SvelteUI (based on Tailwind).
https://sveltematerialui.com/
https://www.skeleton.dev/
https://www.svelteui.org/

## 8. Svelte CLI
It would be cool to have Svelte CLI like Angular. It won't need all the features, but could create routes (server, page, layout) as well as testing files with vitest and playwright. Could save some time.

## 9. More Caching Options like SWR for GraphQL and Rest API
This kind of goes with #3, but would but would be cool to have more caching options for the Server and Client like SWR. It would have to support things like optimistic updates, and keep me from over fetching. Should be easy to use.
https://github.com/ConsoleTVs/sswr
https://react-query-v3.tanstack.com/

## 10. Resumability / Faster (Partial) Hydration
I'm not sure how this would work, but there could be some elements from Qwik that could be implemented in Svelte. I just would really like to see a way to get that perfect Lighthouse score. I will probably never use Qwik or SolidJS because they use JSX. Svelte just makes building so much quicker, which is why I'm sticking to it.

I'm currently re-building my Angular Universal site with SvelteKit. These features would fix some of the issues I have noticed, but hopefully we get to see most of these changes in 2023.

https://code.build

What would you like to see?

J

**UPDATE 1/3/23**

There are currently two new Material UI (for Material Web 3) in development.

- https://github.com/TheOnlyTails/material-3-svelte
- https://github.com/KTibow/m3-svelte