6

What's new in Svelte: April 2022

 2 years ago
source link: https://svelte.dev/blog/whats-new-in-svelte-april-2022
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

What's new in Svelte: April 2022

Goodbye fallthrough routes, hello param validators!

Daniel Sandoval Apr 1 2022

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

  • outDir fixes path issues in monorepos and other situations where the desired output directory is outside the project directory (Docs, #4176)
  • endpointExtensions prevents files other than .js and .ts files from being treated as endpoints, unless you specify endpointExtensions (Docs, #4197)
  • prerender.default lets you prerender every page without having to write export const prerender = true in 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 getClientAddress function (#4289)
  • InputProps and OutputProps can now be typed separately in generated Load (#4305)
  • The \$ character is no longer allowed in dynamic parameters (#4334)
  • svelte-kit package has 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 .ru email 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

To Read

To Watch

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!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK