sveltejs / examples Goto Github PK

Similar to #3. and a very frequently asked question on Discord. I'm not sure however if this example should use plain websockets or the socket.io library. And to make this example self contained we probably have to use the Vite development server to setup the websocket server and mention that you need a separate websocket server in production.

For the actual content, would a simple chat app to demonstrate the bidirectional nature of websockets be too much for an example? Also, this example could use either plain Svelte or SvelteKit. I think the most important part to show here would be how to manage a websocket connection with a custom store. And if it's a chat app the store could just be extended with a store.send_message() function.

This surprisingly came up several times this week on Discord — a page that should fetch, filter and search some data through a <form> and search params in load. My idea was a simple products, words, fruits etc. page which:

• allows you to filter items by type using checkboxes
• has a <input type="search" /> to search for specific items
• when JS is available <input type="search" /> submits the form on:input (debounced)
• checkboxes etc. submit the form on:change
• products/words are stored in an array or Map that acts as a database

One question that regularly comes up is how to handle file uploads in SvelteKit. Maybe this could be broken down into four examples.

1. Uploading small files with Node.js
   • use enhanced form action
   • write file to disk with Node.js
   • add a files/+server.js route to demonstrate how to serve user uploaded files
2. Uploading large files with Node.js
   • use only JavaScript for this to calculate and show a progress indicator with a custom store
   • use XMLHttpRequest because fetch does not support progress calculation yet
   • write file to disk with Node.js
   • add a files/+server.js route to demonstrate how to serve user uploaded files
3. Uploading small files to S3 compatible storage
   • Use the AWS S3 SDK
   • proxy it through Svelte Kit instead of responding with a presigned URL so that it also works without JS
4. Uploading large files to S3 compatible storage
   • Use the AWS S3 SDK
   • upload through a presigned URL from the frontend
   • show a progress indicator using a custom store
   • use XMLHttpRequest because fetch does not support progress calculation yet

For the UI each example could show a simple form with a file input and upload button. Underneath it we could show a list of uploaded files, optionally with a delete button.

A minimal blog with simple DX that supports markdown would be a great addition.

• the example is focused on a specific use case or technology
• the example is self-contained and easy to grasp
• the example is stable and does not require much maintenance

SvelteKit makes it really easy to do page transitions with svelte/transition. It would be cool to have a go-to example for this. This is how I've been doing it, but would love to know if there's a better way:

• Code: https://github.com/evanwinter/sveltekit-page-transitions
• Demo: https://sveltekit-page-transitions.netlify.app

• the example is focused on a specific use case or technology
• the example is self-contained and easy to grasp
• the example is stable and does not require much maintenance

I'm not sure how complex an SSE (Server Sent Events) example should be. But since the actual SSE part on the backend is super simple we could combine it with a toast component to make it more "real world". SSE and websockets are also great to demonstrate custom stores.

• use a +server.js route to return a ReadableStream response for the SSE connection
• use a custom store to listen for any incoming messages/events
• include a minimal but complete toast component to display the messages