Skip to main content

What’s new in Svelte: 2022年9月

SvelteKit の新しいファイルシステムベースルーターへの移行

Dani Sandoval

今月やりたいことをまだお探しですか? Svelte Summit Stockholm のチケットを手に入れる最後のチャンスです! 9月8-9日です、ご参加ください 🎉

先月、再設計された SvelteKit のファイルシステムベースルーターがマージされ、今月は、移行スクリプト から新しいブログ記事の数々、ビデオ、チュートリアルまで、コンテンツが盛り沢山です。

しかし、SvelteKit の新機能は新しいルーティングだけではありません…

What’s new in SvelteKit

  • HTTP ヘッダーの Link がサポートされ、Cloudflare の Automatic Early Hints がすぐに使えるようになりました (1.0.0-next.405, PR)
  • 機密性の高い値がディスクに書き込まれるのを防ぐため、$env/static/* は仮想化(virtual)されました (1.0.0-next.413, PR)
  • $app/stores がブラウザのどこからでも使用できるようになりました (1.0.0-next.428, PR)
  • config.kit.env.dir は .env ファイルを探すディレクトリを設定する新しいコンフィグです (1.0.0-next.430, PR)

Breaking changes:

  • The filesystem-based router and load API improves the way routes are managed. Before installing version @sveltejs/kit@1.0.0-next.406 or later, follow this migration guide (PR, Issue)
  • event.session has been removed from load along with the session store and getSession. Use event.locals instead (1.0.0-next.415, PR)
  • Named layouts have been removed in favor of (groups) (1.0.0-next.432, Docs, PR & Migration Instructions)
  • event.clientAddress is now event.getClientAddress() (1.0.0-next.438, PR)
  • $app/env has been renamed to $app/environment, to disambiguate with $env/... (1.0.0-next.445, PR)

変更の全リストは、kit の CHANGELOG をご確認ください。

Updates to language tools

  • TypeScript が SvelteKit の $types をうまく解決できませんでしたが、Svelte の language tools の最新バージョンではそれが改善されました (105.21.0, #1592)

Community Showcase

Apps & Sites built with Svelte

  • canno is a simple interactive 3d physics game with adjustable gravity, cannon power, and debug visualizer - made with threlte
  • straw.page is an extremely simple website builder that lets you create unique websites straight from your phone
  • Patra lets you share short notes just with a link. No database. No storage
  • promptoMANIA is an AI art community with an online prompt builder
  • Album by Mood lets you listen to music based on your mood
  • Daily Sumeiro is a daily game to test your math and logic skills
  • Lofi and Games - play relaxing, casual games right from your browser
  • Pitch Pipe is a digital pitch pipe with a frequency analyser and just-intonation intervals
  • classes.wtf is a custom, distributed search engine written in Go and Svelte to make searching for Harvard courses much quicker than the standard course catalog
  • Scrumpack is a set of tools to help agile/scrum teams with their ceremonies like Planning Poker and Retrospectives

Learning Resources

Starring the Svelte team

Learning the new SvelteKit routing

To Watch

To Read

Libraries, Tools & Components

  • @svelte-plugins/tooltips is a simple tooltip action and component designed for Svelte
  • Lucia is a simple authentication library for SvelteKit that connects your SvelteKit app to your database
  • remix-router-svelte is a Svelte implementation of the react-router-dom API (driven by @remix-run/router)
  • MKRT is a CLI to help you create SvelteKit routes, fast
  • Histoire is a tool to generate stories applications - scenarios where you showcase components for specific use cases
  • sveltekit-flash-message is a Sveltekit library that passes temporary data to the next request, usually from endpoints
  • svelte-particles is a lightweight TypeScript library for creating particles
  • svelte-claps adds clap button (like Medium) to any page for your SvelteKit apps
  • Neon Flicker is a Svelte component to make your text flicker in a cyberpunk style
  • ComboBox is a search input to help users select from a large list of items
  • @svelte-put is useful svelte stuff to put in your projects
  • vite-plugin-svelte-bridge lets you write Svelte components and use them from React & Vue

UI Kits and Starters

  • Svelte-spectre is a UI-kit based on spectre.css and powered by Svelte
  • Skeleton allows you to build fast and reactive web UI using the power of Svelte + Tailwind
  • iconsax-svelte brings the popular icon kit to Svelte
  • laravel-vite-svelte-spa-template is a Laravel 9, Vite, Svelte SPA, Tailwind CSS (w/ Forms Plugin & Aspect Ratio Plugin), Axios, & TypeScript starter template
  • neutralino-svelte-boilerplate-js is a cross platform desktop template for Neutralino and Svelte
  • figma-plugin-svelte-vite is a boilerplate for creating Figma plugins using Svelte, Vite and Typescript
  • Urara is a sweet & powerful SvelteKit blog starter
  • SvelteKit Commerce is an all-in-one starter kit for high-performance e-commerce sites built with SvelteKit by Vercel

Did we miss anything? Let us know on Reddit or Discord!

See ya next month!