Skip to main content

What’s new in Svelte: 2023年5月

新たなアンバサダー、新たな ESLint plugin、そして SvelteHack の全応募を一挙公開

Dani Sandoval

最新情報に飛び込む前に、まず最初に特別なアナウンスがあります:

New Svelte Ambassadors

このニュースレターでも定期的にフィーチャーされている、素晴らしい Svelte コンテンツのクリエーターである JoyOfCode と HuntaByte が Svelte アンバサダーに任命されました。Svelte のアンバサダーの方々はその親切さと貢献がよく知られており、そして Svelte がフレンドリーで歓迎されるコミュニティであるという評判を維持してくれていて、私たちはアンバサダーの方々に深く感謝しています。

SvelteHack winners will be announced May 6th

2/17から4/17にかけて開催された SvelteHack の優勝者があと数日で発表されます。あなたが好きなプロジェクトが選ばれたかどうか、5/6 の Svelte Summit をご覧ください 👀

今月のショーケースにはたくさんのハッカソンへの応募作品を紹介しています… でもまずは、最新情報を見ていきましょう！

What’s new in Svelte

  • style ブロックで CSS @container クエリがサポートされました (3.58.0)
  • bind:innerText が contenteditable 要素でサポートされました (3.58.0)
  • 新たなアクセシビリティ警告 a11y-interactive-supports-focus は、インタラクティブな要素がフォーカスできないようになっているときに警告してくれます (3.58.0)

Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、CHANGELOG をご確認ください。

What’s new in SvelteKit

  • ホットモジュールリローディング (HMR) が有効なとき、エラーが修正されたあとにページがリロードされるようになりました (1.14.0, #9497)
  • 同じ html ページにロードされた2つのアプリを、”embedded” モードで同時に読み込めるようになりました (1.15.7, #9610)
  • Vite のコンパイルで、標準の Vite resolve ではなく svelte フィールドを使用して Svelte ファイルの resolve を行うパッケージに対し、警告のログを出力するようになりました (vite-plugin-svelte@2.1.0, kit@1.15.8)

What’s new in Language Tools

  • <svelte:document> がサポートされ (#1958)、新たなバインディング向けのインテリセンスレポートがサポートされました (#1957) (107.3.0)
  • “Quick fix...” の新たな fix-all メニューオプションで、”Add all missing imports” や other detected errors が簡単にできるようになりました (107.3.0, #1939)
  • 公式の ESLint plugin が新しく、より良くなりました！これまでの ESLint の Svelte に対するサポートは、テンプレートの AST をうまく扱えず、偽陽性/偽陰性になってしまったり、カスタムの ESLint ルールを作成するのに高い障壁がありました。この新しい公式バージョンは ota-meshi の svelte-eslint-parser がベースとなっており、すぐにお使いいただけます。トライしてみて、フィードバックをシェアしてください！

Community Showcase

Apps & Sites built with Svelte

  • Sound of War is a storytelling data visualization project to help understand the scale of destruction in Ukraine
  • Syntax FM’s swag shop is now built with SvelteKit, PlanetScale and Prisma
  • Appreciation Jar is your own private space where you can send encouraging and appreciative messages to your partner
  • Japanese Jouzu is a Japanese sound and symbol learning app
  • MarkMyImages is a tool to bulk watermark, image resize, rename, effects, and more - all on-device for speed and privacy
  • Immich is a self-hosted photo and video backup solution directly from your mobile phone
  • Earbetter is an ear training game and tools for playing and programming music and audio
  • Tune Twisters is a guessing game for songs... in reverse
  • ResponseHunt is a mystery game based on browser requests - use your programming skills to get to the “golden” response
  • Wolfensvelte 3D is a Svelte “port” of Wolfenstein 3D
  • Code Solving teaches how to solve problems with code
  • Make Bookmarklets is a quick way to create JavaScript bookmarklets with linting, intellisense and auto-minification
  • GeniePM is an AI tool to help Product Managers write user stories and requirements
  • Bitesized News is an AI that delivers news digests and responds to questions via chat
  • Open Tunings is a place to explore alternative guitar tunings without having to retune your guitar
  • BlinkSMS is a text alert tool for Stockholm Student Housing to help with booking laundry times
  • Dev Links helps dev showcase multiple links in a single place - similar to Linktree and Kofi
  • Audiogest is a tool to convert speech to text & summarize any audio
  • MineSweep is a rendition of Minesweeper built with Svelte and JavaScript
  • Biolytics lets you import your lab tests to see all your lab tests in one place
  • Zero share is a secure P2P file sharing using WebRTC
  • Svelte lab is a sandbox for creating and sharing SvelteKit projects

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch

To Read

Libraries, Tools & Components

  • Sveltris lets you intermix UI primitives like components, and state primitives like hooks between frameworks, without even noticing
  • SwiftMarket is an E-Commerce solution built with SvelteKit, Pocketbase as a database and Stripe for payments
  • Svelegante is a Classy writable store for Svelte
  • Table Generator lets you create, design and customize your own tables tables online using a graphical editor
  • Svelte Animated Headline is an animated headline component that can grab attention in an informative way
  • SvelteKit Music App Example demonstrates how to connect and process data as well as some practical examples of how to develop frontend components with TailwindCSS
  • Socio is a WebSocket Real-Time Communication (RTC) API framework to connect your front-end logic to a back-end database reactively
  • Flowbite Svelte is an official Flowbite component library for Svelte
  • Wundergraph, a backend for frontend framework, just released their Svelte Query client
  • Lucia just reached 1.0 for their simple and flexible auth library for SvelteKit
  • svelte-stepper is a simple library for building animated stepper flows with Svelte

いつも通り、見落としなどございましたら Reddit や Discord にてお気軽にお知らせください。

また次回お会いしましょう！