Skip to main content

What's new in Svelte: 2022年8月

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

翻訳 : Svelte 日本コミュニティ
原文 :

正確な内容については の原文を参照してください。

今月は盛り沢山です… 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/envmodeprodserver が使用できなくなりました (#5602)
  • svelte-kit CLI コマンドは vite コマンドを使うようになり、vite.config.js が必須になりました。これにより、Vitest や Storybook など、Vite エコシステムの他のプロジェクトのファーストクラスのサポートが可能になります (#5332, Docs)
  • endpointExtensionsmoduleExtensions となり、param matchers をフィルタできるようになりました (#5085, Docs)
  • Node 16.9 が SvelteKit の minimum version になりました (#5395)
  • %-エンコードされたファイル名が使えるようになりました。ルート(route)に % を使用する場合は、エンコードして %25 にしなければなりません (#5056)
  • HTTP の仕様に合わせるため、Endpoint のメソッド名はアッパーケースになりました (#5513, Docs)
  • Vite の設定に合わせるため、writeStatic が削除されました (#5618)
  • transformPagetransformPageChunk になりました (#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

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

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


We stand with Ukraine. Donate → We stand with Ukraine. Petition your leaders. Show your support.