Skip to main content

What’s new in Svelte: 2023年6月

SvelteHack の受賞者、たくさんのバインディング、Svelte 4.0.0-next.0、そして SvelteKit の新機能がいっぱい

Dani Sandoval

6月になりましたね。まず、SvelteHack の全カテゴリーの受賞者の皆さま、おめでとうございます！受賞者は5月6日の Svelte Summit で発表されました 🎉

Summit のプレイリストは、the Svelte Society YouTube channel からご覧いただけます (各講演ごとに動画がビデオが分割されています)。まだ見ていない場合は、チェックしてみてください。

今月のニュースレターは、Svelte と Kit の改善点をたくせんお届けします…

What’s new in Svelte

Svelte 4.0 の最初のプレリリースバージョンである Svelte 4.0.0-next.0 が公開されました！ このリリースの変更点、改善点、目的に関する説明は GitHub のリリースページ でご確認いただけます。Svelte の未来を先行して知りたければ、チェックしてみてください。移行ガイドも含まれておりますので、ごくわずかな破壊的変更・非推奨事項についてもご確認いただけます。

Svelte 3.59.0 も公開され、新機能がたくさん追加されています:

  • スプレッド構文 (...) による配列の再構築が正しく処理されるようになりました (3.59.0, #8552, #8554)
  • 新たに追加された a11y-autocomplete-valid 警告は、autocomplete 属性が HTML の仕様に従って使用されていない場合に警告を出します (3.59.0, Examples, #8520)
  • fullscreenElement と visibilityState バインディングが <svelte:document> 要素で使用できるようになりました (3.59.0, #8507)
  • devicePixelRatio バインディングが <svelte:window> 要素で使用できるようになりました (3.59.0, #8285)
  • ResizeObserver のバインディング contentRect / contentBoxSize/borderBoxSize/devicePixelContentBoxSize が、bind: で使用できるようになりました (3.59.0, #8022)

Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、CHANGELOG をご確認ください。

What’s new in SvelteKit

  • Route-level entry generators allow exporting an entries function from +page, +page.server, and +server files to supply possible values for params for prerendering (1.16.0, Docs, #9571)
  • URLs in <meta> tags are now crawled to make programmatic social-images much easier (1.17.0, Docs, #9900)
  • data and form have been renamed to formData and formElement respectively in the enhance function. Using them through the old names will log a deprecation warning and they’ll be removed in a future version. (1.17.0, Docs, #9902)
  • Link options can now be set to true and false (1.19.0, Docs, #10039)
  • The new resolvePath export can be used to build relative paths from route IDs and parameters (1.19.0, #9949)

Community Showcase

Apps & Sites built with Svelte

  • a-maze is a simple maze generator (using DFS) with any dimensions between 5 cells and 75 cells
  • Windows 11 in Svelte attempts to replicate the Windows 11 desktop experience on web
  • JsonCrunch is a JSON viewing, transformation and querying tool meant for quickly manipulating small to medium size pieces of JSON data
  • Typepost is a simple text post generator for social media
  • tall.ly is a website for sharing bookmarks (example)
  • bbchallenge is a collaborative environment to prove or disprove the Busy Beaver conjecture
  • Reddit Map is a project of computer, data, and social scientists to explore and visualize Reddit
  • WeWatch allows watching videos together in sync
  • Wonderplan is an AI-Powered Trip Planner tailored to your preferences and covering all aspects of your trip
  • CodingView.io is an online coding interview tool
  • MeatGPT is an art-site that promptly ignores your prompt
  • Vim Ninja is an interactive Vim course in the browser
  • prcl is a Pastebin-alternative focused on speed and simplicity
  • md is a web based markdown editor

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch

To Read

Libraries, Tools & Components

  • svelte-svg-transform is a tiny library that makes it easier for you to add SVGs and transform them in your Svelte project
  • sirens is a visualization of active air raid sirens in Ukraine by DER SPIEGEL
  • Sveltronics is a collection of Svelte utility functions for your project
  • Prompta is yet another interface for chatting with ChatGPT (or GPT-4)
  • Colibri is a lightweight, customizable component library for Svelte apps
  • Svelte Smart Doc is a natural language interface to search the Svelte Svelte documentation
  • Tailwind Elements now has a Svelte Integration

お読みくださりありがとうございました！ いつも通り、見落としなどございましたら Reddit や Discord にてお気軽にお知らせください。

また次回お会いしましょう 👋