What's new in Svelte: 2022年9月
SvelteKit の新しいファイルシステムベースルーターへの移行
翻訳 : Svelte 日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-september-2022日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容については svelte.dev の原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。
今月やりたいことをまだお探しですか? Svelte Summit Stockholm のチケットを手に入れる最後のチャンスです! 9月8-9日です、ご参加ください 🎉
先月、再設計された SvelteKit のファイルシステムベースルーターがマージされ、今月は、移行スクリプト から新しいブログ記事の数々、ビデオ、チュートリアルまで、コンテンツが盛り沢山です。
しかし、SvelteKit の新機能は新しいルーティングだけではありません…
What's new in SvelteKitpermalink
- 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:
- ファイルシステムベースルーターと
load
API において、ルート(routes)を管理する方法が改善されました。@sveltejs/kit@1.0.0-next.406
以降のバージョンをインストールする前に、こちらの移行ガイド(migration guide)に従ってください (PR, Issue) event.session
がload
から削除され、合わせてsession
ストアとgetSession
も削除されました。代わりにevent.locals
を使用してください (1.0.0-next.415, PR)- 名前付きレイアウト(Named layouts)が削除され、
(groups)
が作成されました (1.0.0-next.432, Docs, PR & Migration Instructions) event.clientAddress
はevent.getClientAddress()
になりました (1.0.0-next.438, PR)$app/env
は$app/environment
にリネームされ、$env/...
と混同しにくくなりました (1.0.0-next.445, PR)
変更の全リストは、kit の CHANGELOG をご確認ください。
Updates to language tools
- TypeScript が SvelteKit の $types をうまく解決できませんでしたが、Svelte の language tools の最新バージョンではそれが改善されました (105.21.0, #1592)
Community Showcasepermalink
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
- Supper Club × Rich Harris, Author of Svelte — Syntax Podcast 499
- Let's talk routing with Rich Harris on Svelte Radio
- 2.17 - Building the Future of Svelte at Vercel with Rich Harris
- 1.15 - What's Up With SvelteKit with Shawn Wang (swyx)
- Adding Notion Tailwindcss and DaisyUI to Svelte App
- Svelte 101 Session
- Astro and Svelte
- Storyblok in Svelte
- Svelte London August Recording
Learning the new SvelteKit routing
- Migrating Breaking Changes in SvelteKit by Brittney Postma (Netlify)
- Major Svelte Kit API Change - Fixing
load
, and tightening up SvelteKit's design before 1.0 - Video by LevelUpTuts - SvelteKit Is Never Going To Be The Same - Video by Joy of Code
- Let's learn SvelteKit by building a static Markdown blog from scratch by Josh Collinsworth (updated Aug 26th to keep up with the new changes)
To Watch
- Svelte Guide For React Developers and Svelte State Management Guide by Joy of Code
- What Is Bookit? The Svelte Kit Storybook Killer and What Is @type{import In Svelte Kit - JSDoc Syntax by LevelUpTuts
- TWF Yet another JS Framework... or not? Svelte! by TWF meetup
To Read
- Creating a Figma Plugin with Svelte by Lennart
- Svelte Video Blog: Vlog with Mux from your own SvelteKit Site and Svelte Shy Header: Peekaboo Sticky Header with CSS by Rodney Lab
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!