mirror of
https://github.com/sveltejs/svelte.git
synced 2024-11-22 03:47:27 +01:00
993b40201c
* New FAQ, new renderer * Push blog stuff * Fix blog posts * Add tutorial to be rendered * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Revamp a lot of renderer, make it (soft) compatible with sveltekit * Remove markdown types * Clean up faq +page * Document stuff * Make the options more explicity * chore(site-2): Restructure docs pt 2 (#8604) * Push * Update readme * Push * inor accessibility fix * minr stuff * Add prepare * Run prettier * Remove test script * pnpm update * Update sites/svelte.dev/src/routes/examples/[slug]/+page.svelte Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update sites/svelte.dev/package.json Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
7.1 KiB
7.1 KiB
| title | description | author | authorURL |
|---|---|---|---|
| What's new in Svelte: May 2021 | Working toward SvelteKit 1.0 and a showcase full of SvelteKit sites! | Dani Sandoval | https://dreamindani.com |
Last week, Svelte Summit blew us away with a mountain of content! Check out the full recording or an audio-only (p)review on Svelte Radio. Now let's get into this month's news...
New features in the Svelte Compiler
:global()is now supported as part of compound CSS selectors (3.38.0, Example)- CSS custom properties can now be passed to components for use cases such as theming (3.38.0, Docs coming soon)
New in SvelteKit
- kit.svelte.dev has a fresh new look and the SvelteKit Demo Site got a fresh set of paint. Check it out by running
npm init svelte@next - You can now use
@sveltejs/adapter-staticto create a single-page app or SPA by specifying a fallback page (PR, Docs) - Disable Server-side Rendering (SSR) app-wide or on a page-by-page basis (PR)
- Error messages thrown during pre-rendering are now much more informative and readable (PR, Docs)
- Layouts can now be reset to prevent pages from inheriting the root layout. This is useful if you have a specific layout for a page or i18n variation (PR, Docs)
fetchin SvelteKit code will now use the environment-provided implementation, whenever possible. Iffetchis unavailable, it will be polyfilled by adapters (PR, Docs)
New in Svelte & Language Tools
svelte-preprocessnow supports the "extends" field of the tsconfig.json (4.7.2)- HTML
styleattributes now have hover & auto-complete. Foreign namespaces and ESM configs are now supported in the Svelte language server & extensions - The Svelte language tools can now infer slot/event types from their props if a generic relationship between them was defined
Community Showcase
Apps & Sites
- gitpod.io recently rewrote its site with SvelteKit
- highlight eel is a web-based editor to mark your favorite parts of any YouTube video to clip and share with anyone
- The Far Star Mission is an interactive audiobook companion to the album, The Far Star by Apotheus
- JavaScript quiz is a small quiz application that saves your answers locally
- ExtensionPay lets developers accept secure payments in browser extensions with no backend server code.
- mk48.io is a naval warship game made with SvelteKit
- Frog Safety is a guide for African Dwarf Frogs and the API freshwater master kit
- Stardew Valley Character Preview loads your character's attributes from your Stardew Valley savefile and lets you play around with different outfits, colours, and accessories.
Demos, Libraries, Tools & Components
- svelte-parallax is a spring-based parallax component for Svelte
- @svelte-plugins/viewable is a simple rule-based approach to tracking element viewability.
- Sveltekit-JUI is a kit of UI components to be used in conjunction with Svelte and Svelte Kit.
- EZGesture makes it easy to add gestures functionality with simple native DOM events
Want to contribute your own component? Submit a Component to the Svelte Society site by making a PR to this file.
Starters
- How to use Vercel Analytics with SvelteKit teaches how to track Web Vitals across your users' devices
- Asp.NETCore + Svelte + Vite connects the three frameworks with SpaCliMiddleware (VS2019)
- Add CoffeeScript to Svelte is an experimental command to run to add CoffeeScript to your SvelteKit project or Vite-powered Svelte app
- Adds Supabase to Svelte is an experimental command to run to add Supabase to your SvelteKit project
- svelte-babylon lets you use BabylonJS like A-Frame through reactive Svelte Components
Looking for a starter or integration? Check out svelte-adders and a number of other template examples at the community site sveltesociety.dev
Learning Resources
- Amazing macOS Dock animation in Svelte demonstrates how nice Svelte and popmotion look together
- Solving the Tower of Hanoi with recursive Svelte templates incorporates the
<svelte:self>element into a common computer science problem - DIY SvelteKit CDK adapter puts together SvelteKit and AWS CDK
- Fireship's Svelte in 100 Seconds is a quick and easy introduction to Svelte's core concepts
- Tech Downtime has been diving into SvelteKit in this playlist - from getting up and running to debugging.
- lihautan's latest video updates in the Svelte 101 and Svelte Store playlists cover slots, stores and context - and when to use which
- DavidParkerW has been exploring Svelte, Sapper and SvelteKit in some real-world scenarios, like displaying a blog post list from an API
See you next month!
Got something to add? Join us on Svelte Society, Reddit and Discord!