Skip to main content

What's new in Svelte: 2022年6月

キャンセル可能なディスパッチイベント、より深い {@const} 宣言など!

Dani Sandoval

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

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

先月 Svelte Summit があったので、私たちは学んだことすべてをこの6月に適用する準備ができています! また、createEventDispatcher、@const 宣言 などの QOL を上げてくれる変更や、SvelteKit 1.0 に向けた大量の進捗があります。

それでは見ていきましょう!

What's new in Svelte

  • createEventDispatcher 関数で、カスタムイベントをキャンセルできるようになりました (3.48.0, Docs, PR)
  • {@const} タグが {#if} ブロックの中で使えるようになり、条件に応じて変数が定義できるようになりました (3.48.0, Docs, PR)
  • <svelte:element>、アニメーション、多くの DOM 要素に関するバグが修正されました。詳細は CHANGELOG をご覧ください!

What's new in SvelteKit

  • Vite 2 のリリースの最後の1つとして、Vite 2.9.9 がリリースされました。Svelte チームは、SvelteKit と Vite の統合をこれまで以上にスムーズにするために、Vite 3 のリリースに向けて、一生懸命コントリビュートしています (Vite 3.0 Milestone)
  • config.kit.alias によって、import 文の値を置き換えるカスタムのエイリアスを簡単に宣言できるようになりました (Docs, PR)
  • プリレンダリングされるようマークされたページが、SSR の実行中に失敗するようになりました (PR)

Breaking Changes

  • Node 14 はもうサポートされません (PR)
  • /favicon.ico に対するリクエストはもう抑制されなくなり、正しいルート(route)として扱われるようになりました (PR)
  • AMP サポートは @sveltejs/amp パッケージに分割されました (Docs, PR)
  • Generated types は _types ディレクトリに生成されるようになったため、それに合わせてインポートを更新してください (PR)
  • %svelte.head% と %svelte.body% は、app.html の %sveltekit.head% と %sveltekit.body% になりました (Docs, PR)
  • LoadInput は LoadEvent になりました
  • Wrangler 2 を優先するため、Wrangler 1 はサポートされなくなりました (PR)

Community Showcase

Apps & Sites built with Svelte

  • Plantarium は、3D の植物を手続き的に生成するためのツールです。
  • SPATULA は、lamina と threejs を使用するプロジェクトであればコードマテリアルとしてポータブルなシェーディングマテリアルを構築するためのツールです。
  • Waaard は、様々な SSO プロバイダーでリンクを保護できるようにし、それを送信することができます
  • Magidoc は、高速かつ高いカスタマイズ性を備えた GraphQL ドキュメントジェネレーターです
  • myMarkmap は、マークアップ向けのカスタムエディタで、SvelteKit で構築されています
  • PassShare では、あなたのパスワードをあなたの友人に、安全かつ効率的に共有することができます
  • DashingOS は、(Notion + CodeSandbox のような)ツールで、プロトタイプと文書化を一箇所で、素早く簡単に行うことができます
  • worker-kit-email は、通常の SvelteKit のルート(routes)を使用して、トランザクショナルな email を開発するのに便利です
  • kaios-weather-svelte は、KaiOS 向けのとても親しみやすい天気アプリです
  • svelte-gantt は、軽量で高速かつインタラクティブなガントチャート/リソースブッキングコンポーネントです
  • Miru は、cats 向けの BitTorrent ストリーミングソフトウェアです

素晴らしい SvelteKit Web サイトに貢献してみませんか? Svelte Society のサイトの構築を手伝っていただけませんか!

Learning Resources

To Read

To Watch

From Svelte Society:

Across the Web:

To Hear

Libraries, Tools & Components

  • vite-plugin-svelte-console-remover is a Vite plugin that removes all console statements (log, group, dir, error, etc) from Svelte, JS, and TS files during build so they don't leak into production
  • Svelte Headless Tables is an unopinionated and extensible data tables for Svelte
  • y-presence is a lightweight set of libraries to easily add presence (live cursors/avatars) to any web application (now with Svelte support!)
  • Svelcro is a component performance tracker for Svelte applications
  • Svelte-Splitpanes lets you create dynamic and predictable view panels to layout an application
  • svelte-miniplayer is a lightweight, fast, resizable and draggable miniplayer for media
  • svelte-keybinds is a minimalistic keybinding interface, with rebinding and saving
  • svelte-speech-recognition converts speech from the microphone to text and makes it available to your Svelte components

Special Feature: Svelte Stores There were lots of Svelte stores released this month from a number of authors...

もし見落としがありましたら、Reddit や Discord で教えてください。

ストックホルムで開催される Svelte Summit に現地参加することもできますので、お忘れなく! Svelteの素晴らしいコンテンツでいっぱいの2日間に是非加わってください! チケットはこちらです。

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