Skip to main content

What’s new in Svelte: 2022年3月

Svelte Summit Spring が近づく… そしてページエンドポイントの登場！

Dani Sandoval

発表: Svelte Summit Spring が 2022 年 4 月 30 日に開催されます。5 回目となるバーチャルな Svelte カンファレンスでは、発表者とスポンサーを募集中です。プロポーザルを書いてみませんか！

また、長らく待ち望まれていたいくつかの機能が今月 SvelteKit に追加されました…それにはページエンドポイントも含まれています！これは load 関数の動作を変えるもので、これにより、ベーシックなページにおけるデータの取得や、POST レスポンスからのリダイレクト、404 やその他のエラーのハンドリングなどがより簡単になります。

他にも新機能やバグフィックスがございます、以下をご覧ください！

What’s new in SvelteKit

  • The docs are now searchable and multipage with type definitions and hoverable code examples - Check them out at svelte.dev/docs/kit
  • Page endpoints significantly decrease the boilerplate needed when loading a page (Issue, PR, Docs)
  • Application versioning and update detection support lets you determine what to do when a route fails to load after an app update (Issue, PR, Docs)
  • A new option in npm init svelte@next will now set up Playwright automatically for testing (PR)

Breaking Changes

  • The target option is no longer available. Instead, the init script hydrates its parentNode (#3674)
  • App-level types now live in the App namespace which allows you to type global types like Stuff or Session (#3670)
  • JSONString is now JSONValue (#3683)
  • createIndexFiles has been removed — it is now controlled by the trailingSlash option (#3801)
  • SvelteKit will no longer exclude root-relative external links from prerendering, which will cause 404s if these URLs are intended to be served by a separate app. Use a custom prerender.onError handler if you need to ignore them (#3826)

New in Language Tools

  • Svelte の language tool で、マークアップのプロパティへのアクセスが改善されました (105.12.0)。オートコンプリートに関するいくつかの既知の issue が解決します (#538 / #1302)

Community Showcase

Apps & Sites

  • SvelteStorm is specifically tailored to provide all of the essential tools a Svelte developer needs to build a Svelte application
  • Supachat is a real-time chat app using Svelte and Supabase
  • Radicle is a peer-to-peer stack for building software together
  • The Making Known is a narrated encounter with posters designed by the Nazi German government to communicate with the occupied nations of Belgium, France, and Luxembourg during the Second World War
  • Svelte Kanban is a simple Svelte Kanban made in pure CSS
  • fngrng is a typing trainer focussed on accuracy over speed
  • Generative grids is a neat little generative SVG grid in a Svelte REPL, with randomly generated color palettes and shapes
  • LifeHash is a method of hash visualization that creates beautiful, deterministic icons
  • TypedWebhook.tools is a webhook testing tool for checking payloads, with automatic type generation
  • Speedskating is an animation widget to show olympic speedskating runs. Built with Svelte, D3 and regl
  • Web tail is a web application to view lines from file on local system or on remote server

SvelteKit のサイトを一緒に作るのに興味がありますか？ Svelte Society のサイトにコントリビュートしてみましょう！

Learning Resources

To Read

To Watch

Libraries, Tools & Components

  • gosvelte は、Svelte が生成するページを Go 言語の HTTP サーバーでサーブし、Svelte コンポーネントにサーバーデータを props として送信する概念実証(proof of concept)です
  • svelte-ethers-store は ethers.js ライブラリを使用した、Svelte・Sapper・SvelteKit 向けの読み取り可能なストアのコレクションです
  • Fluid Grid は未来の web のための CSS グリッドシステムです
  • stirstack は、Svelte.js、TailwindCSS、InertiaJS、Ruby on Rails を組み合わせたオピニオネイテッドなフレームワークです。
  • OATHqr は 2FA/MFA と 他の OAUTH 対応アプリを使用するためのセキュリティクレデンシャルを作るのに便利です。Aegis や YubiKey などのワンタイムパスワード認証アプリ向けのスキャン可能な QR コードを生成するのに使用します
  • svelte-GridTiles はドラッグアンドドロップでサイズ変更可能なタイルライブラリで、レスポンシブグリッド上に構築されています
  • Miscellaneous Svelte Components は、alex-knyaz がよく使用する様々な svelte コンポーネントのコレクションです
  • walk-and-graph-svelte-components は、svelte と js ファイルを走査し、依存関係(imports)を美しい JPG に描画する CLI node script です
  • Felte は Svelte 向けのシンプルに使えるフォームライブラリです
  • svelte-use-tooltip は tooltip を表示するための Svelte action です
  • persistent-svelte-store は汎用的に使える書き込み可能な永続化ストアです。Svelte の store contract に従って TypeScript でスクラッチで開発されました

なにか見落としがありましたか？ Reddit や Discord に参加してください、お話を伺いましょう。

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