Skip to content

Latest commit

 

History

History
84 lines (67 loc) · 9.38 KB

2021-11-01-whats-new-in-svelte-november-2021.md

File metadata and controls

84 lines (67 loc) · 9.38 KB
Raw
Error in user YAML: (<unknown>): mapping values are not allowed in this context at line 1 column 28
---
title: What's new in Svelte: November 2021
description: Over 5000 stars to light up the showcase
author: Daniel Sandoval
authorURL: https://desandoval.net
---

With SvelteKit crossing both the 80% complete mark and over 5000 stars on GitHub, now is a great time to try it out! Many in the community have, making for quite a large showcase this month...

Also, don't miss out on Svelte Summit on November 20th - featuring speakers from around the world. Keep an eye out for a watch party in your area 👀

Now onto what's new!

New in Svelte and SvelteKit

  • A new compiler option, enableSourcemap, provides more control over the compiler output for JS and CSS sourcemaps (3.44.0). With this new feature, SvelteKit and the Vite Svelte plugin can now properly handle environment variables (See sveltejs/kit#720 and sveltejs/vite-plugin-svelte#201)
  • The Svelte Language Tools now support configuring the VS Code CSS Language Service settings (#1219)
  • SvelteKit will only route endpoints on the client, unless marked as rel="external" - reducing the size of the client JS and making it easier to refactor the router in the future (2656)
  • SvelteKit no longer supports Node 12 (2604)

To see all updates to Svelte and SvelteKit, check out the Svelte and SvelteKit changelog, respectively.

Community Showcase

Apps & Sites

  • Tangent is a clean and powerful notes app for Mac & Windows
  • The Pudding is a digital publication that explains ideas debated in culture with visual essays - rebuilt in SvelteKit
  • Power Switcher is an interactive overview of the development of the power supply in Switzerland, as energy sources migrate to cleaner sources
  • Sublive is a new way of making music by connecting musicians all over the world with a low-latency and high-quality audio network.
  • Vibify helps you find hidden playlists within your music using your Spotify listening history
  • Browse Marvel Unlimited by Year is a SvelteKit site to see what issues are available on Marvel Unlimited for a given year
  • Files, a modern file explorer for Windows, has a new site rebuilt with SvelteKit
  • lil-hash is a simple URL shortener that produces easily rememberable and speakable shortened URLs
  • PWA Haven is a collection of small, fast, simple PWA's to replace native OS apps
  • DottoBit is a multi-color 16-bit drawing program with URL sharing built-in
  • Former Fast Document for Print is an invoice generator with beautiful designs, abilities for international languages and auto calculation

Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better? Check out the list of open issues if you'd like to contribute to the Svelte Society rewrite in SvelteKit.

Podcasts Featuring Svelte

  • PodRocket, LogRocket's podcast, talks Svelte with Rich Harris
  • Web Rush and Rich Harris talk about the differences between a SPA and MPA, what role the server rendering plays, what client side hydration is, and the state of modern tooling for developing SPA or MPA
  • devtools.fm talks with Rich Harris about developing engaging data visualizations and building the tools of tomorrow
  • Helvetikon is a community maintained dictionary for the swiss german language
  • Palitra App is a search-based color pallete generator

Educational Content

Libraries, Tools & Components

  • svelte-adapter-azure-swa is an adapter for Svelte apps that creates an Azure Static Web App, using an Azure function for dynamic server rendering
  • Inlang is a localization and internationalizion toolkit that now supports SvelteKit
  • svelte-translate-tools extract/generate/compile translation files for your Svelte App at build time
  • @egjs/svelte-infinitegrid lets you implement various grids composed of different card elements whose sizes vary
  • svelte-reactive-css-preprocess makes it easier to update css variable values whenever your component state changes
  • Sveltegen is a CLI for simple and easy creation of actions, components, and routes
  • svelte-advanced-multistep-form helps to wrap form elements passing down styles to the component to be rendered, also it presents each form step in a ordered and stylish way.
  • gQuery is a GraphQL Fetcher & Cache for Svelte Kit
  • date-picker-svelte is a date and time picker for Svelte
  • TwelveUI is a Svelte component library with accessibility built-in
  • svelte-outclick is a Svelte component that allows you to listen for clicks outside of an element, by providing you an outclick event
  • svelte-zero-api lets you use Svelte Kit APIs like client functions - with support for Typescript
  • svelte-recaptcha-v2 is a Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.
  • Svelte Body lets you apply styles to the body in routes - designed to work with Svelte Kit and Routify.
  • svelte-debug-console is a debug.js implementation for Svelte SPA, SSR and sveltekit static sites that lets you see your debug statements in the browser.
  • SVEO is a dependency-free approach to declare metadata on SvelteKit pages
  • @svelte-drama/suspense is a Svelte component that implements the core idea of React's <Suspense>. Also check out SWR for Svelte to make refecting even easier.
  • sveltekit-adapter-browser-extension is an adapter for SvelteKit which turns your app into a cross-platform browser extension
  • tsParticles is a lightweight TypeScript library for creating particles

Check out the community site sveltesociety.dev for more tools, templates, adders and adapters from across the Svelte ecosystem.

Looking for more Svelte goodness? Join us on Reddit or Discord!