Skip to main content

What’s new in Svelte: 2022年8月

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

Dani Sandoval

今月は盛り沢山です… 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

  • Dynamically imported styles are now included during SSR (#5138)
  • Improvements to routes and prop updates to prevent unnecessary rerendering (#5654, #5671)
  • Lots of improvements to error handling (#4665, #5622, #5619, #5616)
  • Custom Vite modes are now respected in SSR builds (#5602)
  • Custom Vite config locations are now supported (#5705)
  • Private environment variables (aka “secrets”) are now much more secure. Now if you accidentally import them to client-side code, you’ll see an error (#5663, Docs)
  • Vercel’s v3 build output API is now being used in adapter-vercel (#5514)
  • vite-plugin-svelte has reached 1.0 and now supports Vite 3. You’ll notice new default ports for dev (port 5173) and preview (port 4173) (#5005, vite-plugin-svelte CHANGELOG)

Breaking changes:

  • mode, prod and server are no longer available in $app/env (#5602)
  • svelte-kit CLI commands are now run using the vite command and vite.config.js is required. This will allow first-class support with other projects in the Vite ecosystem like Vitest and Storybook (#5332, Docs)
  • endpointExtensions is now moduleExtensions and can be used to filter param matchers (#5085, Docs)
  • Node 16.9 is now the minimum version for SvelteKit (#5395)
  • %-encoded filenames are now allowed. If you had a % in your route, you must now encode it with %25 (#5056)
  • Endpoint method names are now uppercased to match HTTP specifications (#5513, Docs)
  • writeStatic has been removed to align with Vite’s config (#5618)
  • transformPage is now transformPageChunk (#5657, Docs)
  • The prepare script is no longer needed in package.json (#5760)
  • adapter-node no longer does any compression while we wait for a bug fix in the compression library (#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 に参加してみませんか! チケットはこちらです。

また来月!