本文へスキップ

Svelte の新機能: 2021年10月

「Svelte の新機能」1周年

Dani Sandoval

皆さん、こんにちは 👋 「Svelte の新機能」が Svelte ブログにクロス投稿されてから1年が経ちました。この機会に、記事を読んでくださった皆さん、そして毎月の貢献者である皆さん全員に感謝したいと思います。メンテナーから、Discord や Reddit に作品を投稿する皆さんまで、Svelte コミュニティを素晴らしいものにするために費やされる努力は驚くべきものです。

皆さん、これからも素晴らしい仕事を続けてください！それでは、今月のニュースを見ていきましょう…

Svelte の新機能

  • Svelte のエクスポートマップに、SSR 用のライフサイクル関数の no-op バージョンが追加されました (Svelte **3.43.0**)
  • `src` 属性を持つカスタムコンポーネントが `svelte-native` ビルドを中断しなくなりました (Svelte **3.42.4**)
  • TypeScript プラグイン を有効にしていない Svelte プラグインユーザーには、有効にするように促すメッセージが表示されるようになりました。これにより、TypeScript および JavaScript ファイルが強化され、Svelte ファイルとの対話に関するインテリセンスが追加されます。 フィードバックをお寄せください (Svelte 拡張機能 **105.4.0**)
  • イベント修飾子が、オートコンプリートとホバー情報としてインテリセンスに追加されました (Svelte 拡張機能 **105.4.0**)
  • Svelte バージョン 3.39 以上と `svelte-preprocess` バージョン 4.9.5 以上を使用する場合、TypeScript ユーザーは、型インポートと値インポートを厳密に区別する必要がなくなりました。つまり、`import type { MyInterface } from './somewhere'; import { myValue } from './somewhere'` の代わりに `import { MyInterface, myValue } from './somewhere'` と記述できるようになりました。主にこれを実装してくれたコミュニティメンバーの @SomaticIT に感謝します！

機能とバグ修正の完全なリストについては、Svelte の変更ログ を確認してください。

SvelteKit の更新

先月も約100件の PR がコミットされましたが、まだ多くの作業が残っており、Svelte のメンテナーは SvelteKit を 1.0 にするための支援を求めています。Antony は、この問題に関する 最近のコメント でうまく述べています。

貢献するには初心者すぎると思うかもしれません（そうではありませんが）、機能を追加する前に、テストを追加するか、追加したい機能のテストを書いてください！小さなことから始め、その方法でコードベースを学びましょう。

お手伝いいただける方は、「help wanted」とラベル付けされた 1.0 マイルストーンの問題 のいずれかで作業することを検討してください。

今月の注目すべき SvelteKit の改善点には、以下が含まれます…

  • サービスワーカーは、`$lib` エイリアスを使用してファイルにアクセスできるようになりました (#2326)
  • Svelte ライブラリは、Vite の設定なしで、すぐに動作するようになりました (#2343)
  • パッケージエクスポートフィールドの改善 (#2345 および #2327)
  • [breaking] `prerender.pages` 設定オプションの名前が `prerender.entries` に変更されました (#2380)
  • フックから Body の型付けを許可する新しいジェネリック引数が追加されました (#2413)
  • パッケージコマンドを実行すると、`package.json` に `svelte` フィールドが追加されるようになりました (#2431)
  • [breaking] load 関数の `context` パラメーターの名前が `stuff` に変更されました (#2439)
  • `adapter-node` を使用してカスタムサーバーを構築するための `entryPoint` オプションが追加されました (#2414)
  • `vite-plugin-svelte` は、useVitePreprocess のサポートを改善しました。これは、Vite を使用して、Svelte コンポーネント内の TypeScript、PostCSS、Scss などを自動的にプリプロセスします (#173)

SvelteKit のすべての更新を確認するには、SvelteKit の変更ログ を参照してください。

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

アプリとサイト

  • radiofrance がウェブサイトを SvelteKit に移行しました
  • FLAYKS は、Félix Péault が SvelteKit、Sanity、Anime.js を使用して作成したポートフォリオサイトです
  • hirehive は、候補者と仕事の追跡サイトです
  • Microsocial は、実験的なピアツーピアソーシャルプラットフォームです
  • Dylan Ipsum は、Lorem ipsum の代わりに Bob Dylan の歌詞をランダムに生成するテキストジェネレーターです
  • Chip8 Svelte は、CHIP8 TypeScript を基に構築された CHIP-8 エミュレーターのフロントエンドです

Svelte プロジェクトに取り組みたいですか？Web 上での Svelte の存在感を向上させるお手伝いをしたいですか？ SvelteKit での Svelte Society の書き換えに貢献したい場合は、未解決の問題のリスト を確認してください。

Svelte を紹介したポッドキャスト

教育コンテンツ

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

  • sveltekit-netlify-cms は、Netlify CMS での使用のために構成された SvelteKit スケルトンアプリです。
  • SvelteFireTS は、Fireship.io にヒントを得た SvelteKit + TypeScript + Firebase ライブラリです。
  • stores-x を使用すると、vueX と同様に Svelte ストアを使用できます。
  • sveltekit-snippets は、SvelteKit と Vanilla Svelte の一般的なパターンに関するスニペットを提供する VSCode 拡張機能です。
  • svelte-xactor は、xactor マシンをストア契約を実装するグローバルストアに簡単に変換できるミドルウェアです。
  • vite-plugin-pages-svelte は、ファイルシステムベースの自動ルーティングのための Vite プラグインです。
  • sveltio は、valtio（プロキシ状態ライブラリ）の Svelte ラッパーです。
  • svelte-transition-classes は、CSS クラスの追加と交換を行うカスタム Svelte トランジションです。
  • Svelte-Boring-Avatars は、人気の Boring Avatars React プロジェクトの Svelte ポートです。
  • Svelte DataTables は、ユーザーフレンドリーな表にデータを簡単に表示できる人気の JavaScript ライブラリである DataTable を Svelte プロジェクトに取り入れています。
  • focus-svelte は、依存関係のない Svelte 用のフォーカストラップです。
  • filedrop-svelte は、Svelte 用のファイルドロップゾーンアクションとコンポーネントです。

コミュニティサイト sveltesociety.dev では、Svelte エコシステム全体からのテンプレート、アドイン、アダプターをさらに確認できます。

最後に、講演者の募集に応募しましょう！

Svelte Summit Fall 2021（2021年11月20日開催）では、講演者を募集しています。10月30日までに講演提案をご提出ください…発表と参加はすべて歓迎します。

sessionize サイトの詳細情報

サミットが待ちきれない方は、Reddit または Discord に参加してください！