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

Svelteの最新情報：2022年2月

Svelte、SvelteKit、コミュニティ全体での活発なリリース

Dani Sandoval

皆さん、2月おめでとうございます！この1ヶ月ほどで、SvelteとSvelteKitは急速なスピードで開発が進み、Reddit、GitHub、Discord全体で新しいコミュニティルールが制定され、素晴らしいアプリ、チュートリアル、ライブラリが多数登場しました。

詳しく見ていきましょう...

Svelteの変更履歴からのハイライト

SvelteKitの最新情報

  • inlineStyleThresholdでは、インラインスタイルシートをページに挿入する場所を指定できます（ドキュメント、#2620）。
  • beforeNavigate / afterNavigateライフサイクル関数を使用すると、ページナビゲーションの前後に機能を追加できます（ドキュメント、#3293）。
  • プラットフォームコンテキストをアダプターから渡せるようになりました（ドキュメント、#3429）。
  • フックのresolveにssrパラメータが追加され、必要に応じてSSRをスキップすることが容易になりました（ドキュメント、#2804）。
  • $page.stuffは、ページからデータをレイアウトに「上方向」に渡すメカニズムを提供します（ドキュメント、#3252）。
  • フォールスルールートを使用すると、ルートをロードできない場合にルーティング先を指定できます（#3217）。

新しい設定

  • コンテンツセキュリティポリシー（CSP）がサポートされ、インラインJavaScriptまたはスタイルシートを使用する際のセキュリティが向上しました（ドキュメント、#3499）。
  • kit.routes設定を使用すると、ビルド中に公開/非公開モジュールをカスタマイズできます（#3576）。
  • prerender.createIndexFiles設定を使用すると、index.htmlファイルをサブフォルダーの名前としてプリレンダリングできます（#2632）。
  • HTTPメソッドは、kit.methodOverrideを使用して上書きできるようになりました（ドキュメント、#2989）。

設定の変更

  • config.kit.hydrateとconfig.kit.routerがconfig.kit.browserの下にネストされるようになりました（3578）。

破壊的な変更

  • エンドポイントとフックでRequestおよびResponseオブジェクトを使用してください（#3384）。

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

アプリとサイト

  • timb(re)は、ライブ音楽プログラミング環境です。
  • Music for Programmingは、脳を集中させ、心を刺激するために、${task}中に聴くことを目的としたミックスシリーズです。
  • Team Taleでは、2人の作者がタッグチームのように同じ物語を書くことができます。
  • Puzzlezは、数独とワードルをオンラインでプレイできる場所です。
  • Closed Caption Creatorを使用すると、Windows、Mac、Google Chromeでビデオに字幕を簡単に追加できます。
  • SC3Labは、svelte-cubedとthree.jsを試すためのコードジェネレーターです。
  • Donkeytypeは、Monkeytypeに触発された、ミニマルで軽量なタイピングテストです。
  • Aboveは、ADHD/自閉症の人のために構築された視覚的なルーチンタイマーです。
  • base.reportは、真剣な投資家向けの最新の研究プラットフォームです。
  • Stringは、携帯電話を安全なポータブルオーディオレコーダーに変え、個人的なメモ、家族の瞬間、教室での講義などを簡単にキャプチャして共有できるようにします。
  • The Raytracer Challenge REPLは、レイ トレーシングされたシーンを構成し、最新のブラウザでライブレンダリングするためのライブエディターインターフェイスを提供します。
  • awesome-svelte-kitは、SvelteKitの素晴らしい例のリストです。
  • Map Projection Explorerでは、さまざまな地図投影法を調べて、それらの違いを説明します。
  • Rubiksは、ルービックキューブシミュレーターです。
  • Pianistoは、SVG、ToneJS、そして多くの忍耐で作られた動くピアノです。

他の人とSvelteKitサイトを開発したい場合は、Svelte Societyサイトへの貢献を試してください！

学習とリスニング

読む

見る

聴く

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

  • threlteは、Svelte用のthree.jsコンポーネントライブラリです。
  • svelte-formifyは、デコレーターを使用して検証を定義する、フォームを管理および検証するためのライブラリです。
  • gQueryは、Svelte Kit用のGraphQLフェッチャーとキャッシュです。
  • Unlock-protocolは、MetaMask、Firebaseでのログイン、およびペイウォールの顧客を支援する統合機能です。
  • AgnosticUIは、クリーンなHTMLとCSSで始まるUIプリミティブのセットです。
  • Vitebookは、Viteを搭載したStorybookに代わる高速で軽量な代替手段です。
  • SwyxKitは、SvelteKit + Tailwind + Netlify用の意見の分かれるブログスターターです。2022年向けに刷新されました！
  • svelte-themesは、SvelteKitアプリのテーマの抽象化です。
  • svelte-transitionは、CSSクラスベースのトランジションをより簡単に使用できるようにするSvelteコンポーネントです。TailwindCSSでの使用に最適です。
  • Svelte Inviewは、要素がビューポート/親要素に入ったか、そこから離れたかを監視するSvelteアクションです。
  • svelte-inline-compileは、Jestと@testing-library/svelteを使用してsvelteコンポーネントをテストする際に、はるかに快適なエクスペリエンスを可能にするBabelトランスフォームです。
  • @feltcoop/svelte-mutable-storeは、immutableコンパイラーオプションを使用した、変更可能な値のSvelteストアです。
  • headless-svelte-uiは、Svelteアプリの構築に使用できるヘッドレスコンポーネントのグループです。

何か見逃しましたか？Svelteで次のアイデアを実現するのに助けが必要ですか？RedditまたはDiscordにご参加ください。

また来月！