What’s new in Svelte: 2021年9月
StackOverflowで最も愛されているWebフレームワーク
今月は、SvelteがStackOverflowの最も愛されているWebフレームワークに選ばれたり、Tan Li Hau氏がSvelteのYouTubeチャンネルについてSvelte Radioに出演したり、SvelteKitが1.0リリースに向けてさらに進化したりしました。
New in Svelte
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 Updates
SvelteのメンテナはSvelteKitを1.0にする手助けを探しています 1.0のマイルストーンにあった100以上の問題を解決しました。残りは数十個しかありませんが、そのリストを少しでも短くするために手を貸していただきたいと思っています。 ご協力いただける方は、1.0 milestone issuesのいずれかの作業をご検討ください。
この1か月間は、あらゆる問題を解決することに注力し、100件以上のPRを統合しました。いくつかの新機能も追加されました…
- SvelteKit will now detect if a prerendered app is trying to access a query parameter and return an error instead of failing silently (#2104)
adapter-nodenow lets you add the Kit middleware to your own server for use with other middleware. You can also add middleware in dev mode with more improvements to come in this area- The new
sequencehelper lets you chain together multiplehandlecalls - A new
handleErrorhook gives you the option to send data to an error tracking service, or to customise the formatting before printing the error to the console. adapter-nodecan now listen on socket path (#2048)
To see all updates to SvelteKit, check out the SvelteKit changelog.
Community Showcase
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 をご覧いただけます。