What's new in Svelte: 2023年4月
たくさんの Svelte コンパイラの新機能, そして Svelte Summit と SvelteHack
翻訳 : Svelte日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-april-2023日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容についてはsvelte.devの原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。
Happy April、みなさん! 今月は、Svelte コンパイラの全ての新機能や、SvelteKit における QOL の改善、そしてたくさんのショーケースを見ていきますよ (いつものようにね)。
コアチームのニュースとしては、Dominic Gannaway が Vercel にジョインし、フルタイムで Svelte に取り組むことになりました! Dominic は javascript エンジンのパフォーマンスや、DOM、リアクティビティ、アクセシビリティなどのワールドクラスのエキスパートです! UI フレームワークの Inferno や Meta の WYSIWYG エディタである Lexical の作者としても知られています。彼の才能が Svelte エコシステムで発揮されたら、とても素晴らしい未来が待っているでしょう🌱
こちらもお忘れなく! 6回目 となる Svelte のバーチャルカンファレンス、Svelte Summit Spring が 5月6日に開催されます。また、SvelteHack の締め切りまであと2週間です… あなたの作品をコミュニティにシェアする素晴らしい機会ですし、もしかしたら賞品を獲得できるかも!
それでは、今月の更新を見ていきましょう…
What's new in Sveltepermalink
- 3.56.0 でたくさんの新機能が使えるようになりました!
|stopImmediatePropagation
というon:eventname
向けのイベント修飾子(event modifier) が追加されました (#5085, Docs)slide
トランジションにaxis
パラメータが追加されました (#6182, Docs)writable
ストアを読み取り専用に変換するreadonly
ユーティリティが追加されました (#6518, Docs)- メディア要素向けの
readyState
バインディングが追加されました (#6666, Docs) - 画像(image) に
naturalWidth
とnaturalHeight
バインディングが追加されました (#7771, Docs)
- コンポーネントでの
<!-- svelte-ignore ... -->
がサポートされました (#8082) bind:group
の input で、値にundefined
がセットされたときにクリアされるようになりました (3.56.0, #8214){#each}
ブロック内にある、spread 属性を持つ<input>
要素を入れ替えたとき、その<input>
の値が保持されるようになりました (3.56.0, #7578)- 全体的に警告(warning)が改善されました -
noreferrer
からaria
ルールまで! (3.56.0) <svelte:document>
が追加されました (3.57.0, #3310)style:
ディレクティブがstyle=
属性より優先されるようになりました (3.57.0, #7475)fly
とblur
トランジションで CSS の単位がサポートされました (3.57.0, #7623, Docs)
Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、CHANGELOG をご確認ください。
What's new in SvelteKitpermalink
- リクエストの全ての cookie を
cookies.getAll
で取得できるようになりました (1.10.0, #9287, Docs) use:enhance
の新たに追加されたsubmitter
パラメータを使って、(複数の) フォームの送信ステータスを簡単に管理できるようになりました (1.12.0, #9425, Docs)- デフォルトのエラーページがダークモードスタイルに対応しました (1.13.0, #9460)
- SvelteKit にとって特別な意味を持つすべてのメソッドと変数について、型を省略しても完全な型安全性の恩恵を受けることができるようになりました! 詳細は発表のブログ記事をお読みください
Community Showcasepermalink
Apps & Sites built with Svelte
- Peerbeer lets you share files peer-to-peer (p2p) without any third parties or data limits
- unplaneted is an interface for exploring very large space images
- PokeBook is a digital notebook for writing poetry that provides a beautiful distraction-free environment and autosave
- papi lets you create prompts for AI models and share them with others with a unique link
- Mathesar is a straightforward open source tool that provides a spreadsheet-like interface to a PostgreSQL database
- SQLite Playground lets you learn how SQLite runs and stores data in the browser
- svgl is a beautiful library with SVG logos
- Swehl is an eCommerce store, community and tutorial site for breastfeeding mothers
- Codeverter is a GPT-powered code converter, allowing you to convert between different languages and frameworks
- Game On Or Not is a free web app that helps you organize sports with your friends
- Sveltia CMS is a Git-based lightweight headless CMS
Learning Resources
Featuring Svelte Contributors and Ambassadors
- Streaming, snapshots, and other new features since SvelteKit 1.0 by Geoff Rich on the svelte.dev Blog
- Dev Vlog: Rich Harris shows us what's new in Svelte and Kit, March 2023 from Svelte Society
- If you missed this one live, check out the next one - scheduled for April 5th
- Svelte Society - London February 2023
- Svelte Radio episodes from this month:
- This Week In Svelte videos:
To Watch or Hear
- Full Stack SvelteKit App Deployment Using Vercel And Supabase For $0 by Joy of Code
- Why Is Svelte.js so Popular? by Prismic
- Interactive Tables in SvelteKit with TanStack Table by hartenfellerdev
- SvelteKit + GraphQL with Houdini by Aftab Alam
To Read
- Thoughts on Svelte by Ty Hopp
- Storybook on why (and how) it supports SvelteKit
- Svelte Authentication Tutorial with Authorizer by The Thinks
- Use Zod to Validate Forms on the Server with SvelteKit by Ross Robino
- Do I need a sitemap for my SvelteKit app, and how do I create it? and Complement zero-effort type safety in SvelteKit with Zod for even more type safety and Configuring Turborepo for a SvelteKit monorepo by Thilo Maier
- Adding page transitions in SvelteKit by Josh Collinsworth
- E2E testing with SvelteKit and Playwright and Why you should use TypeScript in your next SvelteKit projects by Justin Ahinon
- Understanding the structure of a SvelteKit project by Igor Nowosad
- Secure Authentication in Svelte using Hooks by Brewhouse Digital
Libraries, Tools & Components
- @vavite/node-loader is a Node ESM loader that uses Vite to transpile modules to enable sourcemap and breakpoints support in SvelteKit (or any Vite) project
- Inlang is building i18n for SvelteKit and is looking for feedback
- Skeleton - the UI toolkit for Svelte and Tailwind - is now 1.0 🎉
- SvelteKit-integrated-WebSocket provides first-class support for WebSockets within SvelteKit by attaching a WebSocket server to the global state
- Svelte Legos is a collection of essential Svelte Composition Utilities
- svelte-stored-writable is a drop-in extension of Svelte's writable that additionally stores and restores its contents using localStorage.
- svelte-virtual provides Svelte components for efficiently rendering large lists.
- ChatGPT Clones and Starters
- chatwithme.chat is an open source ChatGPT UI
- SlickGPT is a light-weight "use-your-own-API-key" web client for the OpenAI API written in Svelte
- AI Chat Bestie is an unofficial ChatGPT app
- chatgpt-svelte is a simple UI for the ChatGPT Open AI API
お読みいただきありがとうございました!あと、Svelte Hackathon にも是非チャレンジしてみてください 🧑💻
いつも通り、見落としなどございましたら Reddit や Discord にてお気軽にお知らせください。
また次回お会いしましょう!