1

What's new in Svelte: June 2021

 2 years ago
source link: https://svelte.dev/blog/whats-new-in-svelte-june-2021
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.

What's new in Svelte: June 2021

Progress towards SvelteKit 1.0 and tighter TypeScript/Svelte integrations in language tools

Daniel Sandoval Tue Jun 01 2021

This month, we saw lots of contributions to SvelteKit and its docs. The language tools also got some new features, most notably deeper integration with Svelte files within JavaScript or TypeScript files. Let's jump into the updates...

New in SvelteKit

  • svelte.config.js config files are now loaded in ESM format (.js instead of .cjs).
  • AMP pages will now use the rendered CSS, rather than emitted CSS
  • svelte-check has been added to the TypeScript template (sveltejs/kit#1556)
  • Support for https keypair sveltejs/kit#1456
  • Now bundling Vite with SvelteKit and using an upgraded version. Remove Vite from your package.json if it's there
  • Etags for binary responses sveltejs/kit#1382
  • Renamed $layout to __layout and $error to __error
  • Removed getContext in favor of request.locals
  • Renamed .svelte output directory to .svelte-kit. Update your .gitignore accordingly
  • trailingSlash: 'never' | 'always' | 'ignore' is now available in the config. This should make it easier to build sites that work with static hosting providers that expect a trailing slash for index.html pages, and provides an escape hatch for anyone that needs more complex behaviour.

Notable bug fixes in SvelteKit

  • adapter-netlify got a fix sveltejs/kit#1467 and new documentation in the readme https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify
  • The router will no longer intercept navigation for URLs that the app does not own. This fixes a crash for apps that have <a> elements on the page with the same origin but don't share a base path with the app.
  • Hash only changes are now handled by the router fixing the browser's "back" navigation between hash changes in some circumstances.

New in Svelte & Language Tools

  • Svelte 3.38.1 and 3.38.2 fixed an issue with hydration that was causing duplicate elements. If you're seeing this in your project, be sure to update the latest version!
  • A new TypeScript plugin provides deeper integration with Svelte files within JavaScript or TypeScript files. This includes diagnostics, references and renaming of variables. It comes packaged with the VS Code extension but is turned off by default for now. You can enable it through this setting. We encourage you to test it out and provide feedback
  • In the latest version of svelte-check you can now provide the path to your tsconfig.json or jsconfig.json. Example: svelte-check --tsconfig "./tsconfig.json". This ensures the diagnostics are only run on files that are referenced in that config. It also runs diagnostics on JavaScript and/or TypeScript files which removes the need to run another check (like tsc --noEmit) for non-Svelte files (svelte-check version 1.6.0)
  • The VS Code extension and svelte-check got a new major release. Previously, properties that had no initializer (export let foo;) were only required if the user was using both TypeScript and activated strict mode. This is changed now: People using TypeScript, and those using checkJs also in JavaScript files, will now always have these properties marked as required (svelte-check version 2.0.0, extension version 105.0.0)

Community Showcase

Apps & Sites

  • vidu is a minimal web analytics collector and dashboard
  • River Runner is a virtual way to follow rivers downstream - built with Mapbox and Svelte.
  • JSDoc Type Generator generates JSDoc types for valid JSON.
  • pagereview.io is a website feedback tool that lets you leave comments directly on the site being reviewed.
  • gamesroom.io is an online board game platform with video chat built-in.
  • Greedy Goblin is a recipe app for old-school Runescape players.
  • hashbrown.geopjr.dev is a GNOME-shell inspired webpage to learn about, explore the source code and download the Hashbrown GTK app (link to source).

Libraries, Tools & Components

  • svelte-image-crop is a simple click'n'drag image cropping library using Web APIs.
  • svelte-datepicker is a lightweight and inclusive date picker build with Svelte.
  • svelte-regex-router is a simple, lightweight library for you to easily handle routes in your Svelte application.
  • Svelte Micro is a light & reactive one-component router for Svelte.
  • svelte-entity-store is to provide a simple, generic solution for storing collections of entity objects.
  • svelte-animation-store is a store that is based on Svelte's tweened store, that lets you pause, continue, reset, replay, reverse or adjust speed of a tween.

Want to contribute a component? Submit a Component to the Svelte Society site by making a PR to this file.

See you next month!

Did we miss something? Join us on Svelte Society, Reddit and Discord!


report

Recommend

  • 4
    • svelte.dev 1 year ago
    • Cache

    What's new in Svelte: June 2022

    What's new in Svelte: June 2022 Cancellable dispatched events, deeper {@const} declarations and more! Daniel Sandoval Jun 1 2022 With last month's

  • 6
    • svelte.dev 3 years ago
    • Cache

    What's new in Svelte: January 2021

    What's new in Svelte: January 2021 A Svelte-packed showcase to kick-off the new year! Daniel Sandoval Fri Jan 01 2021 Happy new year from Svelte! In the last month we made progress...

  • 3
    • svelte.dev 3 years ago
    • Cache

    What's new in Svelte: April 2021

    What's new in Svelte: April 2021 SvelteKit beta and new way to use slots Daniel Sandoval Thu Apr 01 2021 Two projects that have been months (even years) in the making have made thei...

  • 3
    • svelte.dev 2 years ago
    • Cache

    What's new in Svelte: May 2021

    What's new in Svelte: May 2021 Working toward SvelteKit 1.0 and a showcase full of SvelteKit sites! Daniel Sandoval Sat May 01 2021 Last week, Svelte Summit blew us away with a moun...

  • 7
    • svelte.dev 2 years ago
    • Cache

    What's new in Svelte: July 2021

    What's new in Svelte: July 2021 Keeping cool with fixes, TypeScript tooling and tonnes of new features Daniel Sandoval Thu Jul 01 2021 As the northern hemisphere heats up, Svelte ha...

  • 7
    • svelte.dev 2 years ago
    • Cache

    What's new in Svelte: August 2021

    What's new in Svelte: August 2021 Shadow DOM, export and await - oh my! Daniel Sandoval Sun Aug 01 2021 From The Changelog (JS Party Ep....

  • 3
    • svelte.dev 2 years ago
    • Cache

    What's new in Svelte: September 2021

    What's new in Svelte: September 2021 StackOverflow's most loved web framework Daniel Sandoval Wed Sep 01 2021 This month, Svelte was

  • 10
    • svelte.dev 2 years ago
    • Cache

    What's new in Svelte: October 2021

    What's new in Svelte: October 2021 A whole year of "What's new in Svelte" Daniel Sandoval Fri Oct 01 2021 Hey y'all 👋 It's been 1 year since "What's new in Svelte" started being cro...

  • 2
    • svelte.dev 2 years ago
    • Cache

    What's new in Svelte: November 2021

    What's new in Svelte: November 2021 Over 5000 stars to light up the showcase Daniel Sandoval Mon Nov 01 2021 With SvelteKit crossing the

  • 0
    • techcommunity.microsoft.com 2 years ago
    • Cache

    What’s new for Teams phones | June 2021

    What’s new for Teams phones What’s new for Teams phones | June 2021 ...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK