Skip to main content

What’s new in Svelte: 2022年2月

Svelte、SvelteKit、コミュニティを横断し、畳み掛けるようにリリース

Dani Sandoval

Happy February, everyone! ここ1か月ほどで、Svelte と SvelteKit の 開発が加速し、Reddit、GitHub、Discord で新しいコミュニティのルールができ、そしてかなりの数の素晴らしいアプリ、チュートリアル、ライブラリがリリースされました。

それでは見ていきましょう…

Highlights from the Svelte changelog

What’s new in SvelteKit

  • inlineStyleThreshold allows you to specify where inline stylesheets are inserted into the page (Docs, #2620)
  • beforeNavigate / afterNavigate lifecycle functions lets you add functionality before or after a page navigation (Docs, #3293)
  • Platform context can now be passed from adapters (Docs, #3429)
  • Hooks now have an ssr parameter in resolve to make it easier to skip SSR, when needed (Docs, #2804)
  • $page.stuff provides a mechanism for pages to pass data ‘upward’ to layouts (Docs, #3252)
  • Fallthrough routes let you specify where to route when an route can’t be loaded (#3217)

New configs

  • Content Security Policy (CSP) is now supported for increased security when using inline javascript or stylesheets (Docs, #3499)
  • kit.routes config allows you to customise public/private modules during build (#3576)
  • prerender.createIndexFiles config lets you prerender index.html files as their subfolder’s name (#2632)
  • HTTP methods can now be overridden using kit.methodOverride (Docs, #2989)

Config changes

  • config.kit.hydrate and config.kit.router are now nested under config.kit.browser (3578)

Breaking change

  • エンドポイント(endpoints) と Hooks で、Request オブジェクトと Response オブジェクト が使われるようになりました (#3384)

Community Showcase

Apps & Sites

  • timb(re) は、ライブミュージックプログラミング環境です
  • Music for Programming は、${task} 中に聴くことで脳を集中させやる気を起こすことを目的としてミックスシリーズです
  • Team Tale は、1つのストーリーを2人の執筆者がタッグを組むような形で書くことができます
  • Puzzlez は、数独と Wordle をオンラインでプレイできます
  • Closed Caption Creator は、Windows、Mac、Google Chrome で、あなたのビデオに簡単に字幕を付けられます
  • SC3Lab は、svelte-cubed and three.js を使用した実験的なコードジェネレーターです
  • Donkeytype は、Monkeytype にインスパイアされた、ミニマルで軽量なタイピングテストです
  • Above は、ADHD/自閉症の方のために作られたビジュアル・ルーティーン・タイマーです
  • base.report は、本格的な投資家向けのモダンなリサーチプラットフォームです
  • String は、あなたのスマートフォンをセキュアでポータブルなオーディオレコーダーに変身させ、個人的なメモ、家族の思い出、講義などを記録して共有するのを簡単にしてくれます
  • The Raytracer Challenge REPL は、シーンのレイトレーシングを設定してそれをレンダリングするライブ・エディター・インタフェースで、モダンなブラウザで動作します
  • awesome-svelte-kit は、SvelteKit の素晴らしい example のリストです
  • Map Projection Explorer は、様々な地図の投影法を調べ、その違いを明白にすることができます
  • Rubiks はルービックキューブのシミュレーターです
  • Pianisto は、SVG と ToneJS と多くの忍耐によって作られた、実際に動くピアノです

みんなで SvelteKit サイト に取り組んでみたいなら、Svelte Society のサイトへのコントリビュートにトライしてみてください!

Learning and Listening

To Read

To Watch

To Listen To

Libraries, Tools & Components

  • threlte は Svelte 向けの three.js コンポーネントライブラリ
  • svelte-formify は、フォームの管理とバリデーションを行うライブラリで、デコレーターを使用してバリデーションを定義します
  • gQuery は、SvelteKit 向けの GraphQL Fetcher & Cache です
  • Unlock-protocol は、MetaMask、Firebase、paywall のユーザーのログインを支援するインテグレーションです
  • AgnosticUI は、クリーンな HTML と CSS で構成されている UI プリミティブのセットです
  • Vitebook は、高速で軽量な Storybook の代替で、Vite を使用しています
  • SwyxKit は、SvelteKit + Tailwind + Netlify を使用したオピニオネイテッドなブログ・スターターです。2022年に向け新しくなりました！
  • svelte-themes は、SvelteKit アプリのテーマを抽象化したものです
  • svelte-transition は、CSS クラスベースのトランジションを簡単にする Svelte コンポーネントです - TailwindCSS と一緒に使用するのが望ましいです
  • Svelte Inview は、viewport/親要素 への要素の出入りを監視する Svelte アクションです
  • svelte-inline-compile は、Jest と @testing-library/svelte を使って Svelte コンポーネントをテストする際に、より快適な体験を得るための Babel transform です
  • @feltcoop/svelte-mutable-store は、immutable コンパイラオプションでもミュータブルな値を扱える Svelte ストアです
  • headless-svelte-ui は、Svelte アプリを構築する際に使用できるヘッドレスコンポーネント(headless components)集です

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

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