What's new in Svelte: 2022年8月
1.0 前の SvelteKit の `load` の変更、Vite 3 サポート、そして `vite.config.js`!
翻訳 : Svelte 日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-august-2022日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容については svelte.dev の原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。
今月は盛り沢山です… 1.0 が完了する前に、SvelteKit の設計に大きな変更があります。まだご存知ないようでしたら、Rich さんの Discussion Fixing load
, and tightening up SvelteKit's design before 1.0 #5748 をチェックしてみてください。
また、@dummdidumm (Simon H) 氏が Vercel に加わり、フルタイムで Svelte に取り組むことになりました。そして @tcc-sejohnson 氏が SvelteKit メンテナーのグループに加わりました! Svelte と SvelteKit の開発に専念できるメンテナーが増え、すでに大きなインパクトを与えています。7月には、SvelteKit の開始以来、3番目に大きな変更がありました!
それではアップデートの残りを見ていきましょう…
What's new in SvelteKitpermalink
- 動的にインポートされた style が、SSR時に含まれるようになりました (#5138)
- ルート(routes)とプロパティの更新が改善され、不必要な再レンダリングを防ぐようになりました (#5654, #5671)
- エラーハンドリングが多く改善されました (#4665, #5622, #5619, #5616)
- カスタムの Vite mode が SSR ビルドの際に有効になりました(原文 : Custom Vite modes are now respected in SSR builds) (#5602)
- カスタムの Vite config locations がサポートされました (#5705)
- プライベートな環境変数 (aka "secrets") がよりセキュアになりました。もしそれらが誤ってクライアントサイドのコードにインポートされても、エラーになります (#5663, Docs)
- Vercel v3 build output API が
adapter-vercel
で使用されるようになりました (#5514) vite-plugin-svelte
が 1.0 となり、Vite 3 がサポートされました。デフォルトのポートが、dev
(port 5173) とpreview
(port 4173) でそれぞれ新しくなっています (#5005, vite-plugin-svelte CHANGELOG)
Breaking changes:
$app/env
のmode
、prod
、server
が使用できなくなりました (#5602)svelte-kit
CLI コマンドはvite
コマンドを使うようになり、vite.config.js
が必須になりました。これにより、Vitest や Storybook など、Vite エコシステムの他のプロジェクトのファーストクラスのサポートが可能になります (#5332, Docs)endpointExtensions
はmoduleExtensions
となり、param matchers をフィルタできるようになりました (#5085, Docs)- Node 16.9 が SvelteKit の minimum version になりました (#5395)
- %-エンコードされたファイル名が使えるようになりました。ルート(route)に
%
を使用する場合は、エンコードして%25
にしなければなりません (#5056) - HTTP の仕様に合わせるため、Endpoint のメソッド名はアッパーケースになりました (#5513, Docs)
- Vite の設定に合わせるため、
writeStatic
が削除されました (#5618) transformPage
はtransformPageChunk
になりました (#5657, Docs)prepare
script がpackage.json
から不要になりました (#5760)compression
ライブラリのバグが修正されるまで、adapter-node
は圧縮しないようになりました (#5560)
変更の全リストは、kit の CHANGELOG をご覧ください。
What's new in Svelte & Language Toolspermalink
@layer
CSS at-rule が Svelte コンポーネントでサポートされました (3.49.0, PR)inert
HTML 属性 が Svelte の language tool とプラグインでサポートされました (105.20.0, PR)- Svelte プラグインは、利用可能な場合は、
SvelteComponentTyped
の型付けを使用するようになりました (105.19.0, PR)
Community Showcasepermalink
Apps & Sites built with Svelte
- PocketBase is an open source Go backend with a single file and an admin dashboard built with Svelte
- Hondo is a word guessing game with multiple rounds
- Hexapipes is a site for playing hexagonal pipes puzzle
- Mail Must Move is an email made for those who want to get more done
- Jot Down is a Visual Studio Code extension for quick and simple note taking
- Kadium is an app for staying on top of YouTube channels' uploads
- Samen zjin we #1metS10 is a campaign website to support S10, the dutch Eurovision finalist, by sending a drawing or a wish
- On Writing Code is an interactive website to learn programming design patterns
- Svelte-In-Motion lets you create Svelte-animated videos in your browser
- Svelte Terminal is a terminal-like website
- Bulletlist is a simple tool with a single purpose: making lists
- Remind Me Again is an app for toggleable reminders on Mac, Linux and Windows
- Heyweek is a timetracking app built for freelancers craving that extra pizzazz
Learning Resources
Starring the Svelte team
- The Svelte Documentary is out! on Svelte Radio
- Beginner SvelteKit by Vercel
- Challenge: Explore Svelte by Building a Bubble Popping Game by Brittney Postma
- Let's write a Client-side Routing Library with Svelte by lihautan
- Svelte Sirens July Talk - Testing in Svelte with Jess Sachs
To Watch
- 10 Awesome Svelte UI Component Libraries by LevelUpTuts
- Learn How SvelteKit Works and SvelteKit Endpoints by Joy of Code
- SvelteKit using TS, and Storybook setup by Jarrod Kane
- Building Apps with Svelte! by Simon Grimm
- SvelteKit authentication, the better way - Tutorial by Pilcrow
To Read
- Some assorted Svelte demos by Geoff Rich
- Three ways to bootstrap a Svelte project by Thilo Maier
- Design & build an app with Svelte by Hugo
- Define routes via JS in SvelteKit by Max Core
- Integrating Telegram api with SvelteKit by Shivam Meena
- SvelteKit SSG: how to Prerender your SvelteKit Site by Rodney Lab
- ADEO Design System: Building a Web Component library with Svelte and Rollup by Mohamed Mokhtari
- The Svelte Handbook by The Valley of Code
- Test Svelte Component Using Vitest & Playwright by David Peng
- Transitional Apps with Phoenix and Svelte by Nathan Cahill
Tech Demos
- Bringing the best GraphQL experience to Svelte by The Guild
- Style your Svelte website faster with Stylify CSS by Stylify
- Revamped Auth Helpers for Supabase (with SvelteKit support) by Supabase
Libraries, Tools & Components
- Lucia is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database
- Skeleton is a UI component library for use with Svelte + Tailwind
- pass-composer helps you compose your postprocessing passes for threlte scenes
- @crikey/stores-* is a collection of libraries to extend Svelte stores for common use-cases
- Svelte Chrome Storage is a lightweight abstraction between Svelte stores and Chrome extension storage
- Svelte Schema Form is a form generator for JSON schema
- svelte-gesture is a library that lets you bind richer mouse and touch events to any component or view
- Snap Layout and universal-title-bar bring Windows 11 snap layout and title features to webapps and PWAs. Both can be imported as a
.svelte
module or as a web component - svelte-adapter-bun is an adapter for SvelteKit apps that generates a standalone Bun server
- json2dir converts JSON objects into directory trees
- Svelte Command Palette is a drop-in command palette component
- svelte-use-drop-outside is a Svelte action to drop an element outside an area
- PowerTable is a JavaScript component that turns JSON data into an interactive HTML table
- svelte-slides is a slide show template for Svelte using Reveal.js
- Svelte Theme Light is a Visual Studio Code theme based on the Svelte REPL
もし見落としがありましたら、Reddit か Discord にどうぞ!
9月に何かやりたいことをお探しでしたら、ストックホルムで開催される Svelte Summit に参加してみませんか! チケットはこちらです。
また来月!