* 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>
10 KiB
title | description | author | authorURL |
---|---|---|---|
What's new in Svelte: June 2022 | Cancellable dispatched events, deeper {@const} declarations and more! | Dani Sandoval | https://dreamindani.com |
With last month's Svelte Summit behind us, we're ready to apply everything we learned in this new month of June! Also new this month are some quality-of-life changes to createEventDispatcher
, @const
declarations and tons of progress toward SvelteKit 1.0.
Let's dive in!
What's new in Svelte
- Custom events can now be cancelled in the
createEventDispatcher
function (3.48.0, Docs, PR) - The
{@const}
tag can now be used in{#if}
blocks to conditionally define variables (3.48.0, Docs, PR) - Lots of bug fixes across
<svelte:element>
, animations and various DOM elements. Check out the CHANGELOG for a deeper dive!
What's new in SvelteKit
- Vite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever (Vite 3.0 Milestone)
config.kit.alias
lets you more easily declare a custom alias to replace values inimport
statements (Docs, PR)- Pages marked for prerendering will now fail during SSR at runtime (PR)
Breaking Changes
- Node 14 is no longer supported (PR)
- Requests to
/favicon.ico
will no longer be suppressed and will instead be handled as a valid route (PR) - AMP support has been moved to a separate
@sveltejs/amp
package (Docs, PR) - Generated types are now written to
_types
directories - update your imports accordingly (PR) %svelte.head%
and%svelte.body%
are now%sveltekit.head%
and%sveltekit.body%
inapp.html
(Docs, PR)LoadInput
is nowLoadEvent
- Dropped support for Wrangler 1 in favor of Wrangler 2 (PR)
Community Showcase
Apps & Sites built with Svelte
- Plantarium is a tool for the procedural generation of 3D plants.
- SPATULA is a tool for building shading materials that are exportable as code material in any project that uses lamina and threejs
- Waaard lets you create and send protected links with a variety of SSO providers
- Magidoc is a fast and highly customizable GraphQL documentation generator
- myMarkmap is a custom editor for Markmap, built with SvelteKit
- PassShare is a way for you to share your passwords to your friends, securely and effortlessly
- DashingOS is a tool (like Notion + CodeSandbox) to make it quick and easy to prototype and document your work all in one place
- worker-kit-email helps you develop transactional emails quickly using regular SvelteKit routes
- kaios-weather-svelte is a very familiar looking weather app for KaiOS
- svelte-gantt is a lightweight and fast interactive gantt chart/resource booking component
- Miru is a BitTorrent streaming software for cats
Looking for a great SvelteKit website to contribute to? Help build the Svelte Society site!
Learning Resources
To Read
- Component party is a site that compares common patterns in different frameworks
- Quick tip: style prop defaults by Geoff Rich
- Working with reduced motion in Svelte by GHOST
- Building a Musical Instrument with the Web Audio API by Tania Rascia
- Svelte-Cubed: Creating an Accessible and Consistent Experience Across Devices and Svelte-Cubed: Loading Your glTF Models by Alex Warnes
To Watch
From Svelte Society:
- The Svelte Summit Spring 2022 stream recording has been updated with chapter markers to make it easy to watch again and again
- The full recording of Svelte London, April 2022 is up! Check out the amazing talks from across the Svelte London community
- Persian Svelte Society is making Persian-language videos about Svelte
- Svelte Sirens has been talking monthly to creators and contributors across the Svelte Community:
Across the Web:
- Building vite-plugin-svelte-inspector, What is Singleton? and What is Navigation? by lihautan
- Auto Import Components In Svelte Kit - Weekly Svelte by LevelUpTuts
- 🧪 Test SvelteKit with TDD & VITEST 🧪 by Johnny Magrippis
- Google Analytics With SvelteKit, Using WebSockets With SvelteKit, SvelteKit Authentication Using Cookies and Svelte Headless UI Component Library by Joy of Code
- Named Layouts In Nested Routes in SvelteKit by The Svelte Junction
- SvelteKit Shiki Syntax Highlighting: Markdown Codeblocks and Svelte Capsize Styling: Typography Tooling by Rodney Lab
To Hear
- Svelte Radio has been putting out weekly episodes:
- Svelte and the Future of Frontend Development (feat. Rich Harris) from The New Stack
Libraries, Tools & Components
- vite-plugin-svelte-console-remover is a Vite plugin that removes all console statements (log, group, dir, error, etc) from Svelte, JS, and TS files during build so they don't leak into production
- Svelte Headless Tables is an unopinionated and extensible data tables for Svelte
- y-presence is a lightweight set of libraries to easily add presence (live cursors/avatars) to any web application (now with Svelte support!)
- Svelcro is a component performance tracker for Svelte applications
- Svelte-Splitpanes lets you create dynamic and predictable view panels to layout an application
- svelte-miniplayer is a lightweight, fast, resizable and draggable miniplayer for media
- svelte-keybinds is a minimalistic keybinding interface, with rebinding and saving
- svelte-speech-recognition converts speech from the microphone to text and makes it available to your Svelte components
Special Feature: Svelte Stores There were lots of Svelte stores released this month from a number of authors...
- svelte-mutable-store is a Svelte store for mutable values with the
immutable
compiler option - svelte-damped-store is a derived writable store that can suspend updates while svelte-lens-store is a functional lens over Svelte stores
- svelte-persistent-store is a writable svelte store that saves and loads data from
Window.localStorage
orWindow.sessionStorage
.
Did we miss anything? Join us on Reddit or Discord to add your voice.
Don't forget that you can also join us in-person at the Svelte Summit in Stockholm! Come join us for two days of awesome Svelte content! Get your tickets now.
See y'all next month!