メインコンテンツにスキップ

Svelte の最新情報: 2023 年 6 月

SvelteHack の受賞者、多数の新バインディング、Svelte 4.0.0-next.0、そして SvelteKit の多数の新機能

Dani Sandoval

皆さん、6月へようこそ！そして、SvelteHack の受賞者の皆さん、おめでとうございます🎉！見逃した方のために、これらの受賞者は 5 月 6 日の Svelte Summit で発表されました。

サミットのプレイリスト全体（すべての講演が個別のビデオに分割されています）は、Svelte Society の YouTube チャンネルにあります。まだの方は、ぜひチェックしてみてください。

今月のニュースレターでは、Svelte と Kit の両方の多くの改善点など、多くの内容を取り上げます...

Svelte の最新情報

Svelte 4.0 の最初のプレリリース版である Svelte 4.0.0-next.0 がリリースされました！このリリースの変更点、改善点、目標については、GitHub のリリースページをご覧ください。 Svelte の将来をいち早く垣間見ることができます。また、最小限の破壊的変更と非推奨事項に興味のある方のために、移行ガイドも含まれています。

Svelte 3.59.0 もリリースされ、多くの新機能が搭載されています。

  • スプレッド演算子（...）を使用した配列の再構築が正しく処理されるようになりました（3.59.0、#8552、#8554）
  • 新しい a11y-autocomplete-valid 警告は、autocomplete 属性が HTML 仕様に従って使用されていない場合に警告するようになりました（3.59.0、例、#8520）
  • fullscreenElement と visibilityState バインディングが <svelte:document> 要素で使用できるようになりました（3.59.0、#8507）
  • devicePixelRatio バインディングが <svelte:window> 要素で使用できるようになりました（3.59.0、#8285）
  • ResizeObserver バインディング contentRect / contentBoxSize/borderBoxSize/devicePixelContentBoxSize が bind: で使用できるようになりました（3.59.0、#8022）

リリースされていない変更を含む、Svelte コンパイラのすべての変更については、変更履歴をご覧ください。

SvelteKit の最新情報

  • ルートレベルのエントリジェネレーターにより、+page、+page.server、および +server ファイルから entries 関数をエクスポートして、プリレンダリング用の params に可能な値を提供できるようになりました（1.16.0、ドキュメント、#9571）
  • <meta> タグの URL がクロールされるようになり、プログラムによるソーシャルイメージの作成がはるかに簡単になりました（1.17.0、ドキュメント、#9900）
  • enhance 関数で data と form がそれぞれ formData と formElement に名前変更されました。古い名前でこれらを使用すると、非推奨の警告がログに記録され、将来のバージョンで削除されます。（1.17.0、ドキュメント、#9902）
  • リンクオプションを true と false に設定できるようになりました（1.19.0、ドキュメント、#10039）
  • 新しい resolvePath エクスポートを使用して、ルート ID とパラメーターから相対パスを構築できるようになりました（1.19.0、#9949）

コミュニティショーケース

Svelte で構築されたアプリとサイト

  • a-maze は、5 セルから 75 セルの間の任意の次元で迷路を生成するシンプルな迷路ジェネレーターです（DFS を使用）。
  • Windows 11 in Svelte は、Web 上で Windows 11 デスクトップエクスペリエンスを再現しようとする試みです。
  • JsonCrunch は、中小規模の JSON データをすばやく操作するための JSON 表示、変換、およびクエリツールです。
  • Typepost は、ソーシャルメディア用のシンプルなテキスト投稿ジェネレーターです。
  • tall.ly は、ブックマークを共有するための Web サイトです（例）。
  • bbchallenge は、ビジービーバー予想を証明または反証するための共同作業環境です。
  • Reddit Map は、Reddit を探索および視覚化するためのコンピューター、データ、および社会科学者のプロジェクトです。
  • WeWatch を使用すると、同期して一緒にビデオを視聴できます。
  • Wonderplan は、あなたの好みに合わせて調整され、旅行のあらゆる側面を網羅した AI 搭載の旅行プランナーです。
  • CodingView.io は、オンラインのコーディング面接ツールです。
  • MeatGPT は、プロンプトを速やかに無視するアートサイトです。
  • Vim Ninja は、ブラウザでインタラクティブな Vim コースを受講できます。
  • prcl は、速度とシンプルさを重視した Pastebin の代替品です。
  • md は、Web ベースのマークダウンエディターです。

学習リソース

Svelte のコントリビューターとアンバサダーを紹介します

視聴するには

読むには

ライブラリ、ツール、コンポーネント

  • svelte-svg-transform は、Svelte プロジェクトで SVG を追加して変換するのを容易にする小さなライブラリです。
  • sirens は、DER SPIEGEL によるウクライナの aktif hava saldırısı sirenlerinin görselleştirilmesidir。
  • Sveltronics は、プロジェクト用の Svelte ユーティリティ関数の集まりです。
  • Prompta は、ChatGPT (または GPT-4) とチャットするためのもう 1 つのインターフェースです。
  • Colibri は、Svelte アプリ向けの軽量でカスタマイズ可能なコンポーネントライブラリです。
  • Svelte Smart Doc は、Svelte ドキュメントを検索するための自然言語インターフェースです。
  • Tailwind Elements に Svelte 統合が追加されました。

読んでくれてありがとう！いつものように、Reddit または Discord で何か見逃していることがあればお知らせください。

次回まで 👋