Skip to main content

What's new in Svelte: 2022年7月

より高速な SSR、language tools の改善と新たな paid contributor!

Dani Sandoval

翻訳 : Svelte 日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-july-2022

日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容については svelte.dev の原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。

SSR の高速化から SvelteKit における Vitest と Storybook のサポートまで、今月のニュースレターは盛り沢山です…

それでは見ていきましょう!

OpenCollective funding drives Svelte forward

Svelte の支援者の方々は、約 $80,000 を OpenCollective のプロジェクト に寄付してくれました。この資金が、Svelte を有意義に前進させるために使用されていることを、私たちは嬉しく思っています。@gtm-nayan 氏は SvelteKit を 1.0 レベルに安定させるため、プロジェクトの paid contributor として先月から issue のトリアージと修正を行っています! @gtm-nayan はずっと長い間 Svelte コミュニティのアクティブなメンバーであり、私たちの Discord サーバーの運営を助ける bot を書いていることでも知られています。今回の資金提供により、彼がより多くの時間を Svelte に使えるようになったことを嬉しく思います。

また、OpenCollective の資金を活用して、Svelte のコアメンテナーが秋の Svelte Summit に現地参加できるようにする予定です。寄付してくださった皆様、ありがとうございます!

What's new in Svelte & Language Tools

  • learn.svelte.dev は、Svelte と SvelteKit を1から学ぶための新しい方法で、現在開発中です
  • SSR の高速化が Svelte の次のリリースに取り込まれます。2年以上費やされた PR で、いくつかのベンチマークテストによれば、レンダリングが3倍高速になりました! (PR)
  • Svelte extension の最新版で、"Find File References" (0.14.28) と "Find Component References" (0.14.29) が追加され、Svelte ファイルと Svelte コンポーネントがインポートされている場所がわかるようになりました (Demo)
  • Svelte extension が CSS path の補完をサポートしました (0.14.29)

What's new in SvelteKit

  • Vitest や Storybook などの、Vite エコシステムの他のツールと SvelteKit の総合運用を可能にする @sveltejs/kit/experimental/vite が作成されました (#5094)。この機能を experimental から外して全てのユーザーに対して vite.config.js を必須にするか検討するため、この機能が動作するか、役に立つかどうか、フィードバック をお願いします
  • エンドポイントで Streaming がサポートされました (#3419)。これは Undici の fetch 実装に切り替えることで可能になりました (#5117)
  • 開発環境において、静的なアセットをシンボリックリンクできるようになりました (#5089)
  • server と prod 環境変数が利用できるようになりました。これは browser と dev にそれぞれ対応するものです (#5251)

Community Showcase

Apps & Sites built with Svelte

  • Virtual Maker lets you make interactive 3D and VR scenes in your browser
  • Apple Beta Music appears to have been written in some combination of Svelte and web components
  • Itatiaia, the largest radio station in the country of Brazil just relaunched its news portal in SvelteKit
  • Pronauns helps you learn pronunciation online with IPA to speak better and sound more native
  • Immich is an open source, high performance self-hosted backup solution for videos and photos on your mobile phone
  • Pendek is a link shortener built with SvelteKit, Prisma and PlanetScale
  • Grunfy is a set of guitar tools - recently migrated to SvelteKit
  • Radiant: The Future of Radio is a personal radio station app built with Svelte and Capacitor
  • Imperfect Reminders is a todo list for things that are only sort of time sensitive
  • Periodic Table is a dynamic Periodic Table component written in Svelte
  • Svelvet is a lightweight Svelte component library for building interactive node-based diagrams
  • publint lints for packaging errors to ensure compatibility across environments
  • Playlistr helps manage and create Spotify playlists
  • Geoff Rich's page transitions demo shows how SvelteKit's beforeNavigate/afterNavigate hooks can make smooth document transitions in the latest Chrome Canary
  • Menger Sponge is a fractal built with Threlte

Want to contribute to a site using the latest SvelteKit features? Help build the Svelte Society site!

Learning Resources

Starring the Svelte team

To Watch

To Read

Libraries, Tools & Components

  • Svend3r is a plug and play D3 charting library for Svelte
  • Svelte Hover Draw SVG is a lightweight Svelte component to draw SVG on hover
  • Svelte French Toast provides buttery smooth toast notifications that are lightweight, customizable, and beautiful by default
  • SVooltip is a basic Svelte tooltip directive, powered by Floating UI
  • Svelte Brick Gallery is a masonry-like image gallery component for Svelte
  • use-vest is a Svelte action for Vest - a library that makes it easy to validate forms and show errors when necessary
  • Svelidate is a simple and lightweight form validation library for Svelte with no dependencies
  • Svve11 is an "accessibility-first" component library for Svelte
  • Slidy is a simple, configurable & reusable carousel sliding action script with templates & some useful plugins
  • Svelte Component Snippets is a VS Code extension with access to common Svelte snippets
  • Svelte Confetti adds a little bit of flair to your app with some confetti 🎊

もし見落としがありましたら、Reddit や Discord で教えてください。

ストックホルムで開催される Svelte Summit に現地参加することもできますので、お忘れなく! Svelteの素晴らしいコンテンツでいっぱいの2日間に是非加わってください! チケットはこちらです。

また来月お会いしましょう!