Skip to main content

What's new in Svelte: 2022年8月

1.0 前の SvelteKit の `load` の変更、Vite 3 サポート、そして `vite.config.js`!

Dani Sandoval

翻訳 : Svelte 日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-august-2022

日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容については svelte.dev の原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。

今月は盛り沢山です… 1.0 が完了する前に、SvelteKit の設計に大きな変更があります。まだご存知ないようでしたら、Rich さんの Discussion Fixing load, and tightening up SvelteKit's design before 1.0 #5748 をチェックしてみてください。

また、@dummdidumm (Simon H) 氏が Vercel に加わり、フルタイムで Svelte に取り組むことになりました。そして @tcc-sejohnson 氏が SvelteKit メンテナーのグループに加わりました! Svelte と SvelteKit の開発に専念できるメンテナーが増え、すでに大きなインパクトを与えています。7月には、SvelteKit の開始以来、3番目に大きな変更がありました!

それではアップデートの残りを見ていきましょう…

What's new in SvelteKit

  • 動的にインポートされた style が、SSR時に含まれるようになりました (#5138)
  • ルート(routes)とプロパティの更新が改善され、不必要な再レンダリングを防ぐようになりました (#5654, #5671)
  • エラーハンドリングが多く改善されました (#4665, #5622, #5619, #5616)
  • カスタムの Vite mode が SSR ビルドの際に有効になりました(原文 : Custom Vite modes are now respected in SSR builds) (#5602)
  • カスタムの Vite config locations がサポートされました (#5705)
  • プライベートな環境変数 (aka "secrets") がよりセキュアになりました。もしそれらが誤ってクライアントサイドのコードにインポートされても、エラーになります (#5663, Docs)
  • Vercel v3 build output API が adapter-vercel で使用されるようになりました (#5514)
  • vite-plugin-svelte が 1.0 となり、Vite 3 がサポートされました。デフォルトのポートが、dev (port 5173) と preview (port 4173) でそれぞれ新しくなっています (#5005, vite-plugin-svelte CHANGELOG)

Breaking changes:

  • $app/env の mode、prod、server が使用できなくなりました (#5602)
  • svelte-kit CLI コマンドは vite コマンドを使うようになり、vite.config.js が必須になりました。これにより、Vitest や Storybook など、Vite エコシステムの他のプロジェクトのファーストクラスのサポートが可能になります (#5332, Docs)
  • endpointExtensions は moduleExtensions となり、param matchers をフィルタできるようになりました (#5085, Docs)
  • Node 16.9 が SvelteKit の minimum version になりました (#5395)
  • %-エンコードされたファイル名が使えるようになりました。ルート(route)に % を使用する場合は、エンコードして %25 にしなければなりません (#5056)
  • HTTP の仕様に合わせるため、Endpoint のメソッド名はアッパーケースになりました (#5513, Docs)
  • Vite の設定に合わせるため、writeStatic が削除されました (#5618)
  • transformPage は transformPageChunk になりました (#5657, Docs)
  • prepare script が package.json から不要になりました (#5760)
  • compression ライブラリのバグが修正されるまで、adapter-node は圧縮しないようになりました (#5560)

変更の全リストは、kit の CHANGELOG をご覧ください。

What's new in Svelte & Language Tools

  • @layer CSS at-rule が Svelte コンポーネントでサポートされました (3.49.0, PR)
  • inert HTML 属性 が Svelte の language tool とプラグインでサポートされました (105.20.0, PR)
  • Svelte プラグインは、利用可能な場合は、SvelteComponentTyped の型付けを使用するようになりました (105.19.0, PR)

Community Showcase

Apps & Sites built with Svelte

  • PocketBase is an open source Go backend with a single file and an admin dashboard built with Svelte
  • Hondo is a word guessing game with multiple rounds
  • Hexapipes is a site for playing hexagonal pipes puzzle
  • Mail Must Move is an email made for those who want to get more done
  • Jot Down is a Visual Studio Code extension for quick and simple note taking
  • Kadium is an app for staying on top of YouTube channels' uploads
  • Samen zjin we #1metS10 is a campaign website to support S10, the dutch Eurovision finalist, by sending a drawing or a wish
  • On Writing Code is an interactive website to learn programming design patterns
  • Svelte-In-Motion lets you create Svelte-animated videos in your browser
  • Svelte Terminal is a terminal-like website
  • Bulletlist is a simple tool with a single purpose: making lists
  • Remind Me Again is an app for toggleable reminders on Mac, Linux and Windows
  • Heyweek is a timetracking app built for freelancers craving that extra pizzazz

Learning Resources

Starring the Svelte team

To Watch

To Read

Tech Demos

Libraries, Tools & Components

  • Lucia is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database
  • Skeleton is a UI component library for use with Svelte + Tailwind
  • pass-composer helps you compose your postprocessing passes for threlte scenes
  • @crikey/stores-* is a collection of libraries to extend Svelte stores for common use-cases
  • Svelte Chrome Storage is a lightweight abstraction between Svelte stores and Chrome extension storage
  • Svelte Schema Form is a form generator for JSON schema
  • svelte-gesture is a library that lets you bind richer mouse and touch events to any component or view
  • Snap Layout and universal-title-bar bring Windows 11 snap layout and title features to webapps and PWAs. Both can be imported as a .svelte module or as a web component
  • svelte-adapter-bun is an adapter for SvelteKit apps that generates a standalone Bun server
  • json2dir converts JSON objects into directory trees
  • Svelte Command Palette is a drop-in command palette component
  • svelte-use-drop-outside is a Svelte action to drop an element outside an area
  • PowerTable is a JavaScript component that turns JSON data into an interactive HTML table
  • svelte-slides is a slide show template for Svelte using Reveal.js
  • Svelte Theme Light is a Visual Studio Code theme based on the Svelte REPL

もし見落としがありましたら、Reddit か Discord にどうぞ!

9月に何かやりたいことをお探しでしたら、ストックホルムで開催される Svelte Summit に参加してみませんか! チケットはこちらです。

また来月!