Skip to main content

What’s new in Svelte: 2022年4月

フォールスルールートにさようなら、param validatorにこんにちは！

Dani Sandoval

今月は、SvelteKit のページプロパティの扱い方に変更がありました。フォールスルールート(fallthrough routes)を必要とするユースケースの最後の難関「パラメータプロパティの検証」が、より具体的なソリューションに置き換えられました。

より詳細な情報と、その他 Svelte の新機能について見ていきましょう…

What’s new in SvelteKit

  • Param matchers allow you to check if a url parameter matches before rendering a page - replacing the need for fallthrough routes for this purpose (Docs, #4334)
  • Explicit redirects can now be handled directly from endpoints (#4260)
  • svelte-kit sync (#4182), TypeScript 4.6 (#4190) and Vite 2.9 were released - adding non-blocking dependency optimization and experimental CSS source maps in dev mode as well as a number of bug fixes contributed by the SvelteKit team (#4468)

New Config Options

  • outDir fixes path issues in monorepos and other situations where the desired output directory is outside the project directory (Docs, #4176)
  • endpointExtensions prevents files other than .js and .ts files from being treated as endpoints, unless you specify endpointExtensions (Docs, #4197)
  • prerender.default lets you prerender every page without having to write export const prerender = true in every page file (Docs, #4192)

Breaking Changes

  • フォールスルールート(Fallthrough routes)が削除されました。マイグレーションのための tips については、PR を確認してみてください (#4330)
  • tabindex="-1" がナビゲーションの間 <body> にのみ追加されるようになります (#4140、#4184)
  • Adapter は getClientAddress 関数を提供する必要があります (#4289)
  • InputProps と OutputProps は、生成される Load において別々に型付けされるようになりました (#4305)
  • \$ 文字が動的なパラメータとして使えなくなりました (#4334)
  • svelte-kit package が experimental としてマークされ、Kit 1.0 以降に変更があっても breaking と見なされません (#4164)

New across the Svelte ecosystem

  • Svelte: TypeScript、Svelte plugin ユーザー向けに新しい型が多く追加されました。style: ディレクティブや Svelte Actions も含まれます (3.46.4、3.46.5)
  • Language Tools: Svelte のプロジェクトファイルを、TS ファイルでインポートしていなくても参照(reference)からインポート/検索できるようになりました (105.13.0)
  • Language Tools: html で、 <!--#region--> / <!--#endregion--> で折りたたみができるようになりました (105.13.0)

Community Showcase

Apps & Sites built with Svelte

  • Launcher はオープンソースのアプリランチャーです。SvelteKit、Prisma、Tailwind を使用しています
  • Paaster は end to end で暗号化された pastebin で、デフォルトで安全です。Svelte、Vite、TypeScript、Python、Starlette、rclone、Docker で構築されています
  • Simple AF Video Converter は ffmpeg.wasm の Electron ラッパーです。フォーマット間の動画変換を簡単に行うことができます。
  • Streamchaser は、一元化されたエンターテイメントテクノロジープラットフォームを通じて、映画やシリーズ、ドキュメンタリーなどの検索をシンプルにすることを追求しています
  • Svelte Color Picker はシンプルなカラーピッカーで、Svelteで構築されています
  • ConcertMash は、Spotify API を使用してあなたが参加する予定のコンサートに基づいた新しいプレイリストを生成する小さな web サイトです
  • Modulus はデザイン+コードのシンクタンクで、デザインとテクノロジーを進化させることを主なミッションとしています。
  • Multiply はカルチャーのスピードに合わせた PR とソーシャルの総合エージェンシーです
  • yia! はニュージーランドの Young Innovator Award コンペティションです
  • Write to Russia は、パブリックな .ru のメールアドレスとやり取りするためのコミュニティメール作成プラットフォームです
  • Markdown Playground は、markdown 色々試してみるのに特化したオンラインの playground です
  • RatherMisty は装飾を省いた天気予報アプリで、Open-Meteo の気象データを使用しています
  • Minecraft Profile Pic (MCPFP) は Minecraft のプロフィール画像を簡単に生成できるサイトです
  • WebGL Fluid Simulation は様々な設定が可能な流体シミュレーションで、Svelte と WebGL で構築されています
  • この @NobelPeaceOslo の展示 は、プリントグラフィックス、プロジェクションモーショングラフィックス、パーティクルアニメーション、ジェネレーティブサウンドデザインを用いて構築されています

モダンな SvelteKit webサイト に貢献してみたいですか？Svelte Society のサイト構築を手伝っていただけませんか!

Learning Resources

To Attend

  • Svelte Summit: Spring が2022年4月30日に開催されます！YouTube と Discord で、5回目のバーチャルな Svelte カンファレンスに是非ご参加ください 🍾

To Read

To Watch

Libraries, Tools & Components

  • SvelTable は多機能なデータテーブルコンポーネントで、Svelteで構築されています
  • svelte-cyberComp はパワフルで軽量な Svelte コンポーネントで、Svelte と TypeScript で書かれています
  • Flowbite Svelte は Svelte 向けの非公式な Flowbite コンポーネントライブラリです
  • Svelte-Tide-Project は、フロントエンドに Svelte、バックエンドに Rust の Tide を使った スターター・テンプレートです
  • Fetch Inject は非同期な JavaScript の依存関係を管理するためのパフォーマンス最適化の実装で、Svelte をサポートし始めました
  • svelte-utterances は GitHub issues をベースにした軽量なコメントウィジェットです
  • Liquivelte は、Svelte ライクなコンポーネントで Shopify のテーマを構築することができます
  • @storyblok/svelte は、Storyblok API を使用するのに必要な Svelte SDK で、リアルタイムでビジュアル編集が可能となります
  • @svelte-on-solana/wallet-adapter は Solana/Anchor アプリケーション向けのモジュラーな TypeScript wallet adapter と UI コンポーネント で、フレームワークとして SvelteJS を使用しています
  • svelte-lookat は、その子要素がマウスカーソル(モバイルの場合はユーザーの顔)に追従するような div を作成します

この続きは Reddit や Discord で！

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