Skip to main content

What's new in Svelte: 2023年3月

SvelteHack、1.0以降の SvelteKit の改善、たくさんのショーケース

Dani Sandoval

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

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

1.0 ローンチ後、SvelteKit にエッセンシャルな機能が多く追加されたため、ホットな3月になっています。詳細は先週のブログ記事をチェックしてみてください。

Svelte Society は先月、$12,000 以上の賞金がかかっている SvelteHack を立ち上げました - 新旧すべての Svelte デベロッパーたちに、何か素晴らしいものを作ってもらえるよう呼びかけています。期限は4月17日！

そして、まだご存知でない方もいらっしゃるかもしれませんが、次回の Svelte Summit が開催する予定です！ SvelteSummit.com にアクセスして、ニュースレターに登録するとイベントの最新情報を受け取ることができます📬

それでは今月の最新情報を見ていきましょう…

What's new in SvelteKit

  • $app/paths がアプリなしで使えるようになりました - Vitest によるテストや Storybook の使用などが簡単になります (1.4.0, #8838)
  • adapter でルートレベル(route level)の設定ができるようになりました (1.5.0, Docs, #8740)
  • 新たな snapshot メカニズムにより、一時的な DOM の state を、たとえナビゲーション後やページリロード後でも保持できるようになりました (1.5.0,Docs, #8710)
  • OPTIONS が server method として使用できるようになりました (1.6.0, Docs, #8731)
  • 正しくないエクスポートに対するリッチなエラーメッセージが追加されました (1.7.0, #9055)
  • server load 関数で promise のストリーミングができるようになりました (1.8.0, Docs, #8901)
  • 新たな設定オプションである preloadStrategy のおかげで、特定のブラウザ向けに、インポートの 'ウォーターフォール' を避けるためのプリロードのチューニングをすることがやりやすくなりました (1.8.4, Docs, #9179)
  • 新たな paths.relative オプションは、paths.assets と paths.base の解釈をコントロールすることができます (1.9.0, Docs, #9220)

What's new in Svelte and Language Tools

  • svelte.dev の REPL が、package.json の exports フィールドをサポートしました (#445)
  • 新たな呼び出し階層(Call Hierarchy)機能により、どこの関数やクラスが呼び出されたのか確認し、コールスタックをたどることができるようになりました (extensions-107.1.0, #1889)
  • declarationMap のサポートが Svelte extension に追加されました。ライブラリに declaration map がある場合、.svelte ファイル上で "go to definition" を押すとソースコードに移動します (extensions-107.1.0, #1878)
  • TypeScript Inlay Hints のサポートが Svelte Extension で使えるようになりました。javascript.inlayHints.* や typescript.inlayHints.* で有効化してください (extensions-107.1.0, #1855)

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

Community Showcase

Apps & Sites built with Svelte

  • win32.run is a version of Windows XP in the browser - with a File System, programs, XP-style File Picker and Saver dialogs, 3rd-party programs, and more
  • Svelte Radial Menu is a radial menu experiment - based on Rauno's radial menu
  • apod color search lets you search for astronomy picture of the day (APO) photos by color
  • SvHighlight is a code highlighter for SvelteKit and TailwindCSS with blur and focus blocks
  • Limey lets you create beautiful one-page websites in minutes
  • a/links is an extension for short, composable bookmarks
  • Sprint Cards is a design challenge generator
  • Plought is a tool to reduce noise in decision making
  • ArcOS-Frontend is a rewrite of the Arc operating system's frontend in Svelte
  • Poxi is powering the user-made web with a drag-and-drop, drawable website editor that's easy to collaborate in
  • demo-threlte-scroller-rocinante is a "scrolly telling" proof-of-concept that combines svelte-sequence with Threlte
  • Phonics + Stuff is a set of resources for learning & teaching phonics

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch or Hear

To Read

Libraries, Tools & Components

UI Kits and Components

  • Pink is a framework agnostic design system from Appwrite
  • quick-pick is a simple search tool where you control the search catalog
  • Grail UI offers a set of component primitives, actions and utilities that help you build accessible and high quality Svelte applications faster, while providing a great developer experience
  • svelte-image-comparison is a Svelte component to compare image or canvas elements
  • simple-font-select is a simple font select component that exposes all local fonts as CSS font families
  • svelte-datatables-net is a Svelte component that turns data into an interactive HTML table
  • svelte-flextable is a toolkit for creating server-side processing datatable components with Svelte
  • svelte-algolia-instantsearch is a community-developed wrapper around instantsearch.js for Svelte
  • svelte-deep-zoom is a Svelte component to render interactive Deep Zoom images (tiled image pyramids)
  • SVoast is a simple toast component for Svelte
  • svelte-otp is a simple lightweight OTP input component for svelte
  • trace-svelte is a line by line highlighter for Svelte
  • Svelte Auth UI is a set of authentication components for Svelte
  • KitDocs is a documentation integration for SvelteKit - a VitePress alternative for Svelte
  • svelte-signature-pad is a Svelte action to capture smoothed signatures as SVG paths using the excellent perfect-freehand library

Helpers, Stores and Actions

  • SvelteKit-Document is a tiny utility for SvelteKit that lets you change the <html>, <head>, and <body> tags from any page or layout - with full SSR support
  • SvelteKit Form Data is an automatic SvelteKit form data parser middleware
  • sveltekit-superforms supercharges your SvelteKit forms with a bunch of quality of life features. Purports to be a "powerhouse of a library"
  • Houdini - the "disappearing" GraphQL client for the SvelteKit - is now 1.0
  • sveltekit-modal-langchain is an example SvelteKit project using sveltekit-modal, showing how easy it is to write Python endpoints in SvelteKit
  • mdsvex-excerpt allows you to show only a portion of document in certain layouts
  • Svelte Action Balancer is a simple Svelte action that makes titles more readable
  • svelte-object helps create and maintain objects using components. Values are stores and can therefore be intuitively subscribed to and updated
  • svelte-relative-time is a tiny Svelte action and component to render relative times
  • svelte-disable-preload is a simple action to apply no-op event listeners to an element that prevent the document-level SvelteKit event handlers being invoked
  • SvelteKit Static Sitemap generates a sitemap.xml for your page during build
  • svelte-intersection-observer-action is a Svelte action for element position notifications using IntersectionObserver
  • svelte-sequence provides custom stores to compose tweened motion sequences over multiple steps
  • @svelte-put/inline-svg is a Svelte action for inlining dynamic SVGs (fetched from network)

Other cool tools

  • sveltekit-modal lets you write Python endpoints in SvelteKit using Modal
  • svelte-kit-bot-block is a server hook to handle spam requests with SvelteKit
  • Svelte Email lets you write and design email templates with Svelte and render them to HTML or plain text
  • Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers
  • svelte-adapter-bun is an adapter for SvelteKit apps that generates a standalone Bun server
  • React in Svelte is a library that enables you to use React components in Svelte
  • SvelteKit Redis Session Manager is a Redis integration in SvelteKit for Session Management

Thanks for reading! Don't forget to try your hand at the Svelte Hackathon!

Feel free to let us know if we missed anything on Reddit or Discord