What’s new in Svelte: 2022年7月

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

• The tutorial is a new way to learn Svelte and SvelteKit from the ground up that is currently in development
• Faster SSR is coming in the next Svelte release. A PR two years in the making, resulting in up to 3x faster rendering in some benchmarking tests! (PR)
• “Find File References” (0.14.28) and “Find Component References” (0.14.29) in the latest versions of the Svelte extension shows where Svelte files and components have been imported and used (Demo)
• The Svelte extension now supports CSS path completion (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

• Svelte Origins: A JavaScript Documentary by OfferZen Origins
• Full Stack Documentation (announcing learn.svelte.dev) by Rich Harris @ JSNation 2022
• All About the Sirens by Svelte Radio

To Watch

• SvelteKit Page Endpoints, Named Layouts and Passing data from page component to layout component with $page.stuff by lihautan
• 🍞 & 🧈: Magically load data with SvelteKit Endpoints by Johnny Magrippis
• Svelte for React developers by frontendtier
• Learn Svelte JS || JavaScript Compiler for Building Front end Applications by Code with tsksharma
• SvelteKit Authentication by Joy of Code
• Svelte + websockets: Build a real-time Auction app by Evgeny Maksimov

To Read

• Up-To-Date Analytics on a Static Website and Fast, Lightweight Fuzzy Search using Fuse.js by paullj
• Use SvelteKit as a handler in the ExpressJs project by Tran Chien
• Creating a desktop application with Tauri and SvelteKit by Stijn-B
• List of awesome Svelte stores by samuba
• SvelteKit Content Security Policy: CSP for XSS Protection by Rodney Lab
• SvelteKit Hooks. Everything You Need To Know by Lucretius K. Biah
• 3 tips for upgrading the performance of your Svelte stores by Mathias Picker

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日間に是非加わってください! チケットはこちらです。

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