* 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>
11 KiB
title | description | author | authorURL |
---|---|---|---|
What's new in Svelte: April 2023 | Loads of new Svelte compiler features, plus Svelte Summit and SvelteHack | Dani Sandoval | https://dreamindani.com |
Happy April, everyone! This month, we're covering all the new features in the Svelte compiler, some quality-of-life improvements in SvelteKit and a huge showcase (like always).
In core team news, Dominic Gannaway has joined Vercel to work on Svelte full-time! Dominic is a world-class expert on wringing performance out of javascript engines, on the DOM, on reactivity, on accessibility, and more! You might know him as the creator of the Inferno UI framework or Lexical, Meta's WYSIWYG editor. It'll be great to see his talents at work across the Svelte ecosystem 🌱
Don't forget! Svelte Summit Spring, Svelte's 6th virtual conference, will be happening on May 6th. Also, there's just two weeks left until the end of SvelteHack... It's a great opportunity to share your creations with the community and maybe even earn a prize!
Now let's jump into this month's changes...
What's new in Svelte
- A bunch of new features are now available as of 3.56.0!
- Add
|stopImmediatePropagation
event modifier foron:eventname
(#5085, Docs) - Add
axis
parameter toslide
transition (#6182, Docs) - Add
readonly
utility to convertwritable
store to readonly (#6518, Docs) - Add
readyState
binding for media elements (#6666, Docs) - Add
naturalWidth
andnaturalHeight
bindings to images (#7771, Docs)
- Add
- Support
<!-- svelte-ignore ... -->
on components (#8082) - Inputs in a
bind:group
will clear when their value is set toundefined
(3.56.0, #8214) <input>
values will now persist when swapping elements with spread attributes in an{#each}
block (3.56.0, #7578)- Better warnings across the board - from
noreferrer
toaria
rules (3.56.0) - Add svelte:document (3.57.0, #3310)
- The
style:
directive will now take precedence over astyle=
attribute (3.57.0, #7475) - CSS units are now supported in the
fly
andblur
transitions (3.57.0, #7623, Docs)
For all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.
What's new in SvelteKit
- You can now get all cookies for a request with
cookies.getAll
(1.10.0, #9287, Docs) - Easily manage the submission status of (multiple) forms with the new exposed
submitter
parameter inuse:enhance
(1.12.0, #9425, Docs) - The default error page now has dark mode styles (1.13.0, #9460)
- You can now omit types on all methods and variables with special meaning to SvelteKit and still benefit from full type safety! Read more about it in the announcement blog post
Community Showcase
Apps & Sites built with Svelte
- Peerbeer lets you share files peer-to-peer (p2p) without any third parties or data limits
- unplaneted is an interface for exploring very large space images
- PokeBook is a digital notebook for writing poetry that provides a beautiful distraction-free environment and autosave
- papi lets you create prompts for AI models and share them with others with a unique link
- Mathesar is a straightforward open source tool that provides a spreadsheet-like interface to a PostgreSQL database
- SQLite Playground lets you learn how SQLite runs and stores data in the browser
- svgl is a beautiful library with SVG logos
- Swehl is an eCommerce store, community and tutorial site for breastfeeding mothers
- Codeverter is a GPT-powered code converter, allowing you to convert between different languages and frameworks
- Game On Or Not is a free web app that helps you organize sports with your friends
- Sveltia CMS is a Git-based lightweight headless CMS
Learning Resources
Featuring Svelte Contributors and Ambassadors
- Streaming, snapshots, and other new features since SvelteKit 1.0 by Geoff Rich on the svelte.dev Blog
- Dev Vlog: Rich Harris shows us what's new in Svelte and Kit, March 2023 from Svelte Society
- If you missed this one live, check out the next one - scheduled for April 5th
- Svelte Society - London February 2023
- Svelte Radio episodes from this month:
- This Week In Svelte videos:
To Watch or Hear
- Full Stack SvelteKit App Deployment Using Vercel And Supabase For $0 by Joy of Code
- Why Is Svelte.js so Popular? by Prismic
- Interactive Tables in SvelteKit with TanStack Table by hartenfellerdev
- SvelteKit + GraphQL with Houdini by Aftab Alam
To Read
- Thoughts on Svelte by Ty Hopp
- Storybook on why (and how) it supports SvelteKit
- Svelte Authentication Tutorial with Authorizer by The Thinks
- Use Zod to Validate Forms on the Server with SvelteKit by Ross Robino
- Do I need a sitemap for my SvelteKit app, and how do I create it? and Complement zero-effort type safety in SvelteKit with Zod for even more type safety and Configuring Turborepo for a SvelteKit monorepo by Thilo Maier
- Adding page transitions in SvelteKit by Josh Collinsworth
- E2E testing with SvelteKit and Playwright and Why you should use TypeScript in your next SvelteKit projects by Justin Ahinon
- Understanding the structure of a SvelteKit project by Igor Nowosad
- Secure Authentication in Svelte using Hooks by Brewhouse Digital
Libraries, Tools & Components
- @vavite/node-loader is a Node ESM loader that uses Vite to transpile modules to enable sourcemap and breakpoints support in SvelteKit (or any Vite) project
- Inlang is building i18n for SvelteKit and is looking for feedback
- Skeleton - the UI toolkit for Svelte and Tailwind - is now 1.0 🎉
- SvelteKit-integrated-WebSocket provides first-class support for WebSockets within SvelteKit by attaching a WebSocket server to the global state
- Svelte Legos is a collection of essential Svelte Composition Utilities
- svelte-stored-writable is a drop-in extension of Svelte's writable that additionally stores and restores its contents using localStorage.
- svelte-virtual provides Svelte components for efficiently rendering large lists.
- ChatGPT Clones and Starters
- chatwithme.chat is an open source ChatGPT UI
- SlickGPT is a light-weight "use-your-own-API-key" web client for the OpenAI API written in Svelte
- AI Chat Bestie is an unofficial ChatGPT app
- chatgpt-svelte is a simple UI for the ChatGPT Open AI API
Thanks for reading! And don't forget to try your hand at the Svelte Hackathon 🧑💻
As always, feel free to let us know if we missed anything on Reddit or Discord.
See ya next time!