Skip to main content

What's new in Svelte: 2022年12月

SvelteKit 1.0 はもう間近

Dani Sandoval

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

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

SvelteKit 1.0 はもう間近です！マイルストーンにあるイシューの99%が完了したので、先月のたくさんの変更点をカバーしなければなりません…

それでは参りましょう！

What's new in SvelteKit

  • ナビゲーションの結果、アプリがアンロード(フルページリロード / クローズ / 別ページへの離脱)されるかどうかを調べるには、willUnload プロパティを使用します。(#6813)
  • __data.json リクエストがキャッシュできるようになり、すべての再取得シナリオ(invalidation scenarios)にマッチするレスポンスをキャッシュすることを保証します (#7532)
  • <a name="hash"> タグへのリンクがサポートされました (#7596)
  • handle hook でリダイレクトをスローすることがサポートされました (#7612)
  • フォールバックコンポーネントがないレイアウトには、自動的にフォールバックコンポーネントが追加されるようになりました (#7619)
  • resolve hook にある新しい preload 関数は、どのファイルをプリロードのために タグに追加するかを決定します (Docs, #4963, #7704)
  • version が $app/environment 経由で使えるようになりました (#7689, #7694)
  • handleError が promise を返すようになりました (#7780)

Breaking changes:

  • routeId が route.id になりました (#7450)
  • beforeNavigate メソッドと afterNavigate メソッドの 'load' は 'enter' に、'unload' は 'leave' にリネームされました。外部へのナビゲーションの際に、beforeNavigate は type 'leave' を引数にとって一回だけ呼び出され、リダイレクトの際には実行されなくなりました (#7502, #7529, #7588)
  • redirect ヘルパーは、リダイレクト時はステータスコードの 300-308 のみを許可し、error ステータスコードの場合は 400-599 のみを許可するようになりました (#7767) (#7615, #7767)
  • ルート(route)ディレクトリ名の特殊文字は、hex/unicode のエスケープシーケンスでエンコードされるようになりました (#7644)
  • action data の(デ)シリアライズに devalue が使用されるようになりました - これは、use:enhance を使わずに直接 action を fetch する方にとっては breaking change です (#7494)
  • trailingSlash が configuration ではなく page option になりました (#7719)
  • クライアントサイドのルーターは、%sveltekit.body% の外にあるリンクを無視するようになりました (#7766)
  • prerendering は building にリネームされ、config.kit.prerender.enabled は削除されました (#7762)
  • getStaticDirectory() は builder API から削除されました (#7809)
  • format オプションが generateManifest(...) から削除されました (#7820)
  • data-sveltekit-prefetch は -preload-code と -preload-data に置き換えられ、prefetch は preloadData になり、prefetchRoutes は preloadCode になりました (#7776, #7776)
  • SubmitFunction は $app/forms から @sveltejs/kit に移動しました (#7003)

New in Svelte

  • css コンパイラオプションの css: false と css: true は、'external' | 'injected' | 'none' 設定に置き換えられ、ssr ビルド向けのコンパイルが高速化し、わかりやすさが改善されました (3.53.0)

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

Community Showcase

Apps & Sites built with Svelte

  • Appwrite's new console makes its secure backend server for web, mobile & Flutter developers available in the browser
  • RepoMagic is a search and analytics tool for GitHub
  • Podman Desktop is a graphical tool for developing on containers and Kubernetes
  • Ballerine is a Know Your Customer (KYC) UX for any vertical or geography using modular building blocks, components, and 3rd party integrations
  • Budget Pen is a Codepen-like browser code editor with Tailwind included
  • doTogether helps you keep track of stuff you have get done via a List of recurring Tasks
  • Webscraped College Results is a collection of visualizations for data from r/collegeresults
  • Let's premortem helps avoid lengthy, frustrating post-mortems after a project fails
  • BLKMARKET.COM is an illustration library for commercial and personal use
  • Sigil is a canvas for anything with spaces organized by the most-voted content
  • corpus-activity-streams is an unofficial ActivityStreams 2.0 vocabulary data set and alternative docs
  • nodeMyAdmin is an alternative to phpMyAdmin written with SvelteKit
  • Image to Pattern Conversion is a cross-stitch pattern conversion tool with a list of pre-made patterns to start with
  • Verbums is an English vocabulary trainer to improve language comprehension
  • SVGPS removes the burden of working with a cluster of SVG files by converting your icons into a single JSON file
  • This 3D retro-themed asteroid shooter was made with threlte

Learning Resources

To Hear

To Watch

To Read

Libraries, Tools & Components

今月はこれでおしまいです！見落としなどございましたら Reddit や Discord にてお知らせください。

それではまた来年 🎆