What's new in Svelte: 2021年9月
StackOverflowで最も愛されているWebフレームワーク
翻訳 : Svelte日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-september-2021日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容についてはsvelte.devの原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。
今月は、SvelteがStackOverflowの最も愛されているWebフレームワークに選ばれたり、Tan Li Hau氏がSvelteのYouTubeチャンネルについてSvelte Radioに出演したり、SvelteKitが1.0リリースに向けてさらに進化したりしました。
New in Sveltepermalink
use:actionsが<svelte:body>で使用できるようになりました。(3.42.0)HTMLElement,SVGElement(3.42.2) およびBigInt(3.42.3) はグローバルに追加されました。- 3.42.2 では以下の点が改善され、Svelteの出力に含まれるコードが少なくなりました。
- クラスおよびスタイル属性で空白が折りたたまれるようになりました。
- ハイドレートを含んだコンポーネントは、コンポーネント内に存在する要素の種類を作成する際にヘルパーのみに依存するように更新されました。
- スケーリングが
flipアニメーションで考慮されるようになりました。 (3.42.2) <select>の中のすべての<option>が、バインドされた値がそれらのどれにも一致しないときに、選択解除されるようになりました。 (3.42.2)
機能やバグフィックスの全リストは、Svelte changelogをご覧ください。
SvelteKit Updatespermalink
SvelteのメンテナはSvelteKitを1.0にする手助けを探しています 1.0のマイルストーンにあった100以上の問題を解決しました。残りは数十個しかありませんが、そのリストを少しでも短くするために手を貸していただきたいと思っています。 ご協力いただける方は、1.0 milestone issuesのいずれかの作業をご検討ください。
この1か月間は、あらゆる問題を解決することに注力し、100件以上のPRを統合しました。いくつかの新機能も追加されました…
- SvelteKitは、事前にレンダリングされたアプリがクエリパラメータにアクセスしようとしているかどうかを検出し、サイレントに失敗するのではなくエラーを返すようになりました。(#2104)
adapter-nodeでは、Kitミドルウェアを自分のサーバーに追加して 他のミドルウェアと一緒に使うことができるようになりました。また、開発モードでミドルウェアを追加することもできます。この分野ではさらに改良が加えられる予定です。- 新しい
sequenceヘルパーは、複数のhandleコールを連鎖させることができます。 - 新しい
handleErrorフックでは、エラー追跡サービスにデータを送信したり、コンソールにエラーを表示する前にフォーマットをカスタマイズしたりすることができます。 adapter-nodeがソケットパスをリッスンできるようになりました。(#2048)
SvelteKitのすべてのアップデートを確認するには、SvelteKit changelogをご覧ください。
Community Showcasepermalink
Apps & Sites
- macos-web by @puruvjdev は、Svelteを使って、一から作り直しました。詳細はこのTwitter スレッドをご覧ください。
- Brave Search は、Svelteを使用しています。
- exatorrent は、GoとSvelteで書かれた、セルフホスティング可能で使いやすく、軽量で機能豊富なtorrentクライアントです。
- json2TsTypes は、JSONをTypeScriptのTypes/Interfacesに変換するシンプルなツールです。
- Histogram.dev は、CSVの各機能のヒストグラムを生成します。
- cybernetic.dev は、Svelteの学習中に行われたデータ中心のUI実験のコレクションです。
- LunaNotes は、YouTube動画のメモを取るのに役立つChrome拡張機能です。
- theia.gamesに内蔵された3D環境エディタで、Svelteに組み込まれたメニューでVRの世界を作ることができます。
- Ferrum は、Mac、Windows、Linuxで利用可能な音楽ライブラリとプレーヤーです。
- Fluid Earth は、地球の大気や海洋を可視化するためのインタラクティブなWebGLアプリケーションです。
作業するSvelteプロジェクトを探していますか？ SvelteKitでのSvelte Societyの書き換えに貢献したい方は、the list of open issuesをご覧ください。
Educational Content
- Tauri with Standard Svelte or SvelteKit は、クロスプラットフォームのハイブリッドデスクトップアプリケーションを開発するための新しい軽量フレームワークであるTauriでSvelteをセットアップする方法を説明しています。
- Svelte - Web App Development Reimagined [An Intro to Svelte] は、goto; conferenceでの素晴らしいイントロトークです。
- LevelUpTuts - Even More 5 Things I Like More In Svelte Than React は、リファレンス(必要ありません) 、メタタグなどのSvelteのアプローチを紹介しています。
- State Management in Svelte Applications は、Svelteアプリケーションの状態を管理するために、Svelteの状態管理ストアを使用する方法についてのチュートリアルです。
- Migrating from Sapper to SvelteKit は、ShipBitのSapperからの移行の評価と振り返りです。
Libraries, Tools & Components
- svelte-stripe-js は、あなたのSvelteプロジェクトにStripeを追加するために必要なすべてです。100% SvelteKit互換
- svelte-steps は、Svelteで書かれたカスタマイズ可能なステップコンポーネントです。
- simple-optics-module は、幾何学的光学の実験と教育のための、オンラインのオープンソース光学ツールです。
- inlang は、SvelteKitアプリ用の国際化(i18n)ツールです。
- Sveno は、ReactコンポーネントをSvelteコンポーネントに変換するコンポーネントトランスファイラーです。
- svelte-useactions は、アクションをコンポーネントに渡すための完全に型付けされたライブラリです。
- Svelte-Element-Query は、322bのエレメントクエリ用のライブラリ/アクションです。
- svelte-meta-tags は、SvelteプロジェクトでSEO管理を容易にするプラグインです。
- svelte-domtree では、DOMを視覚化することができます。Chrome DevToolsのDOMツリーに似ています。
- クロスフレームワークの状態管理ライブラリであるDiffx は、Svelteのサポートが追加されました。
- svelte-ionic-starter は、ライブリロードとiOS/Androidビルドターゲットを備えたSvelte + Ionic + CapacitorJSアプリ用のプロジェクトテンプレートです。
- demo-sveltekit-sanity は、オープンソースのReactCMSであるSvelteKitおよびSanityのスターターキットです。
コミュニティサイト sveltesociety.dev では、Svelte エコシステム全体からの templates、adders、adapters をご覧いただけます。