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

Svelteの最新情報：2022年4月

フォールスルー ルートにさよなら、パラメータバリデーターこんにちは！

ダニ・サンドバル

今月、SvelteKitがページプロパティを処理する方法に変化を感じました。フォールスルー ルートを必要としていた最後のユースケースである、パラメータプロパティの検証が、より具体的なソリューションに置き換えられました。

詳しくはこちら、そしてSvelteのその他の最新情報を掘り下げていきましょう...

SvelteKitの最新情報

  • パラメータマッチャーを使用すると、ページのレンダリング前にURLパラメータが一致するかどうかを確認できます。これにより、この目的でのフォールスルー ルートの必要性がなくなりました（ドキュメント、#4334）
  • 明示的なリダイレクトをエンドポイントから直接処理できるようになりました（#4260）
  • svelte-kit sync（#4182）、TypeScript 4.6（#4190）、およびVite 2.9がリリースされました。これにより、ノンブロッキング依存関係の最適化、開発モードでの実験的なCSSソースマップ、およびSvelteKitチームによって貢献された多数のバグ修正が追加されました（#4468）

新しい設定オプション

  • outDirは、モノレポや、目的の出力ディレクトリがプロジェクトディレクトリの外にある場合などの、パスの問題を修正します（ドキュメント、#4176）
  • endpointExtensionsは、endpointExtensionsを指定しない限り、.jsおよび.tsファイル以外のファイルがエンドポイントとして扱われるのを防ぎます（ドキュメント、#4197）
  • prerender.defaultを使用すると、すべてのページファイルにexport const prerender = trueと記述することなく、すべてのページをプリレンダリングできます（ドキュメント、#4192）

破壊的な変更

  • フォールスルー ルートが削除されました。移行のヒントについては、PR（#4330）を確認してください。
  • tabindex="-1"はナビゲーション中にのみ<body>に追加されます（#4140および#4184）
  • アダプターは、getClientAddress関数を提供する必要があります（#4289）
  • 生成されたLoadで、InputPropsとOutputPropsを個別に型指定できるようになりました（#4305）
  • \$文字は動的パラメータで使用できなくなりました（#4334）
  • svelte-kit packageは実験的としてマークされているため、Kit 1.0以降の変更は破壊的とは見なされません（#4164）

Svelteエコシステム全体での新機能

  • Svelte：TypeScriptおよびSvelteプラグインユーザー向けの多くの新しい型。style:ディレクティブやSvelteアクションなど（3.46.4および3.46.5）
  • Language Tools：Svelteプロジェクトファイルは、TSファイルにインポートしなくても、参照を通じてインポート/検索できるようになりました（105.13.0）
  • Language Tools：リージョン折りたたみは、<!--#region--> / <!--#endregion-->を使用してhtmlでサポートされるようになりました（105.13.0）

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

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

  • Launcherは、SvelteKit、Prisma、およびTailwindを搭載したオープンソースのアプリランチャーです。
  • Paasterは、Svelte、Vite、TypeScript、Python、Starlette、rclone、Dockerで構築された、デフォルトでセキュアなエンドツーエンド暗号化ペーストビンです。
  • Simple AF Video Converterは、ffmpeg.wasmをラップしたElectronで、動画形式間の変換を容易にします。
  • Streamchaserは、集中型エンターテインメントテクノロジープラットフォームを通じて、映画、シリーズ、ドキュメンタリーの検索を簡素化することを目指しています。
  • Svelte Color Pickerは、Svelteで作られたシンプルなカラーピッカーです。
  • ConcertMashは、Spotify APIと対話し、参加する予定のコンサートに基づいて新しいプレイリストを生成する小さなWebサイトです。
  • Modulusは、デザインとテクノロジーを進化させるという主な使命を帯びたDesign + Code Think Tankです。
  • Multiplyは、文化のスピードで動く統合PRおよびソーシャルエージェンシーです。
  • yia!は、ニュージーランドで開催されるヤングイノベーターアワードコンペティションです。
  • Write to Russiaは、公開されている.ruメールアドレスと通信するためのコミュニティメール作成プラットフォームです。
  • Markdown Playgroundは、Markdown実験専用のオンラインプレイグラウンドです。
  • RatherMistyは、Open-Meteoの気象データを使用した、簡素な天気予報アプリです。
  • Minecraft Profile Pic (MCPFP)は、Minecraftのプロフィール写真を簡単に生成できるサイトです。
  • WebGL Fluid Simulationは、SvelteとWebGLで構築された設定可能な流体シミュレーションです。
  • この@NobelPeaceOslo展覧会は、印刷されたグラフィックス、投影されたモーショングラフィックス、パーティクルアニメーション、ジェネレーティブサウンドデザインを使用して構築されました。

モダンなSvelteKit Webサイトに貢献してみませんか？Svelte Societyサイトの構築にご協力ください！

学習リソース

参加

  • Svelte Summit: Springは、2022年4月30日に開催されます！YouTubeとDiscordで開催される5回目のバーチャルSvelteカンファレンスにご参加ください🍾

読む

見る

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

  • SvelTableは、Svelteで構築された機能豊富なデータテーブルコンポーネントです。
  • svelte-cyberCompは、SvelteとTypeScriptで記述された、強力で軽量なコンポーネントライブラリです。
  • Flowbite Svelteは、Svelte用の非公式のFlowbiteコンポーネントライブラリです。
  • Svelte-Tide-Projectは、Rust Tideバックエンドサーバーを備えたSvelteフロントエンドアプリのスターターテンプレートです。
  • Fetch Injectは、非同期JavaScript依存関係を管理するためのパフォーマンス最適化手法を実装します。Svelteサポートが追加されました。
  • svelte-utterancesは、GitHub issueに基づいて構築された軽量コメントウィジェットです。
  • Liquivelteを使用すると、Svelteのようなコンポーネントを使用してShopifyテーマを作成できます。
  • @storyblok/svelteは、Storyblok APIと対話し、リアルタイムのビジュアル編集エクスペリエンスを有効にするために必要なSvelte SDKです。
  • @svelte-on-solana/wallet-adapterは、SvelteJSをフレームワークとして使用するSolana/Anchorアプリケーション用のモジュール式TypeScriptウォレットアダプターとUIコンポーネントです。
  • svelte-lookatは、マウスカーソルまたは携帯電話を使用しているときはユーザーの顔を、すべての子要素が追従するdivを作成します。

RedditまたはDiscordに参加して、会話を続けてください。

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