Skip to main content

What’s new in Svelte: 2022年12月

SvelteKit 1.0 はもう間近

Dani Sandoval

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

それでは参りましょう！

What’s new in SvelteKit

  • Use the willUnload property to find out if the navigation will result the app being unloaded (full page reload/closing/leaving to another page). (#6813)
  • __data.json requests now allows for caching while ensuring we cache matching responses for all invalidation scenarios (#7532)
  • Linking to <a name="hash"> tags is now supported (#7596)
  • Throwing redirects in the handle hook is now supported (#7612)
  • A fallback component will now be added automatically for layouts without one (#7619)
  • The new preload function within the resolve hook determines what files should be added to the tag to preload it (Docs, #4963, #7704)
  • version is now available via $app/environment (#7689, #7694)
  • handleError can now return a 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 にてお知らせください。

それではまた来年 🎆