mirror of
https://github.com/sveltejs/svelte.git
synced 2024-11-22 12:27:29 +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>
10 KiB
10 KiB
| title | description | author | authorURL |
|---|---|---|---|
| What's new in Svelte: April 2022 | Goodbye fallthrough routes, hello param validators! | Dani Sandoval | https://dreamindani.com |
This month, we felt a shift in the way SvelteKit handles page properties. The last holdout of the use-cases that required fallthrough routes, validating parameter properties, has been replaced by a more specific solution.
More on that, and what else is new in Svelte, as we dive in...
What's new in SvelteKit
- Param matchers allow you to check if a url parameter matches before rendering a page - replacing the need for fallthrough routes for this purpose (Docs, #4334)
- Explicit redirects can now be handled directly from endpoints (#4260)
svelte-kit sync(#4182), TypeScript 4.6 (#4190) and Vite 2.9 were released - adding non-blocking dependency optimization and experimental CSS source maps in dev mode as well as a number of bug fixes contributed by the SvelteKit team (#4468)
New Config Options
outDirfixes path issues in monorepos and other situations where the desired output directory is outside the project directory (Docs, #4176)endpointExtensionsprevents files other than .js and .ts files from being treated as endpoints, unless you specify endpointExtensions (Docs, #4197)prerender.defaultlets you prerender every page without having to writeexport const prerender = truein every page file (Docs, #4192)
Breaking Changes
- Fallthrough routes have been removed. For migration tips, check out the PR (#4330)
tabindex="-1"is only added to<body>during navigation (#4140 and #4184)- Adapters are now required to supply a
getClientAddressfunction (#4289) InputPropsandOutputPropscan now be typed separately in generatedLoad(#4305)- The
\$character is no longer allowed in dynamic parameters (#4334) svelte-kit packagehas been marked as experimental so changes to it after Kit 1.0 will not be considered breaking (#4164)
New across the Svelte ecosystem
- Svelte: Lots of new types for TypeScript and Svelte plugin users - including
style:directives and Svelte Actions (3.46.4 and 3.46.5) - Language Tools: Svelte project files are now importable/findable through references without having them imported in a TS file (105.13.0)
- Language Tools: Region folding is now supported in html with
<!--#region-->/<!--#endregion-->(105.13.0)
Community Showcase
Apps & Sites built with Svelte
- Launcher is an open-source app launcher powered by SvelteKit, Prisma, and Tailwind
- Paaster is a secure by default end to end encrypted pastebin built with Svelte, Vite, TypeScript, Python, Starlette, rclone & Docker.
- Simple AF Video Converter is an Electron wrapper around ffmpeg.wasm to make converting videos between formats easier
- Streamchaser seeks to simplify movie, series and documentary search through a centralized entertainment technology platform
- Svelte Color Picker is a simple color picker made with Svelte
- ConcertMash is a small website that interacts with the Spotify API and generates new playlists based on the upcoming concerts you're attending
- Modulus is a Design+Code Think Tank conceived with the main mission to evolve design and technology
- Multiply is an integrated PR and Social agency moving at the speed of culture
- yia! is a Young Innovator Award competition in New Zealand
- Write to Russia is a community email writing platform to communicate with public
.ruemail addresses - Markdown Playground is an online playground dedicated for your markdown experiments.
- RatherMisty is a no frills weather app with weather data from Open-Meteo
- Minecraft Profile Pic (MCPFP) is a site to generate Minecraft profile pictures with ease
- WebGL Fluid Simulation is a configurable fluid simulation built with Svelte and WebGL
- This @NobelPeaceOslo exhibition was built using printed graphics, projected motion graphics, particle animations and generative sound design
Itching to contribute to a modern SvelteKit website? Help build the Svelte Society site!
Learning Resources
To Attend
- Svelte Summit: Spring will take place on April 30, 2022! Join us for the 5th virtual Svelte conference on YouTube and Discord 🍾
To Read
- Svelte(Kit) TypeScript Showcase + general TypeScript tips by Hofer Ivan
- Local constants in Svelte with the @const tag by Geoff Rich
- Design Patterns for Building Reusable Svelte Components by Eric Liu
- Svelte is better than React by Hamilton Greene
- Making Visualizations Literally with Svelte and D3 by Connor Rothschild
- Coordinating Multiple Elements with Svelte Deferred Transitions by Daniel Imfeld
- Animate on scroll with Svelte Inview - Little Bits by Maciek Grzybek
- Lazy-Loading Firebase with SvelteKit and HeadlessUI Components with Svelte by Captain Codeman
- SvelteKit Accessibility Testing: Automated CI A11y Tests by Rodney Lab
- Getting Started with KitQL and GraphCMS by Scott Spence
- React ⇆ Svelte Cheatsheet lists the similarities and differences between the two libraries - by Joshua Nussbaum
To Watch
- Svelte Extravaganza | Async by pngwn
- 6 Svelte Packages You Should Know and Basic React To Svelte Conversion by LevelUpTuts
- Page/Shadow Endpoint in SvelteKit by WebJeda
- Custom Svelte Store: Higher Order Store by lihautan
- SvelteKit For Beginners (Playlist) by Joy of Code - follow along with the blog guide
- Fullstack SvelteKit Auth 🔐 with Firebase & Magic Links! 🪄 by Johnny Magrippis
- Firebase Authentication in SvelteKit! Full Stack App by Ryan Boddy
Libraries, Tools & Components
- SvelTable is a feature rich, data table component built with Svelte
- svelte-cyberComp is a powerful, lightweight component library written in Svelte and TypeScript
- Flowbite Svelte is an unofficial Flowbite component library for Svelte
- Svelte-Tide-Project is a starter template for Svelte frontend apps with Rust Tide backend server
- Fetch Inject implements a performance optimization technique for managing asynchronous JavaScript dependencies - now with Svelte support
- svelte-utterances is a lightweight comments widget built on GitHub issues
- Liquivelte allows you to create your Shopify theme with Svelte-like components
- @storyblok/svelte is the Svelte SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience
- @svelte-on-solana/wallet-adapter is a modular TypeScript wallet adapter and UI components for Solana/Anchor applications using SvelteJS as framework
- svelte-lookat creates a div which makes all its children follow the mouse cursor or the user's face when using a mobile phone
Join us on Reddit or Discord to continue the conversation.
See y'all next month!