What's new in Svelte: 2022年12月
SvelteKit 1.0 はもう間近
翻訳 : Svelte 日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-december-2022日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容については svelte.dev の原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。
SvelteKit 1.0 はもう間近です!マイルストーンにあるイシューの99%が完了したので、先月のたくさんの変更点をカバーしなければなりません…
それでは参りましょう!
What's new in SvelteKitpermalink
- ナビゲーションの結果、アプリがアンロード(フルページリロード / クローズ / 別ページへの離脱)されるかどうかを調べるには、
willUnload
プロパティを使用します。(#6813) __data.json
リクエストがキャッシュできるようになり、すべての再取得シナリオ(invalidation scenarios)にマッチするレスポンスをキャッシュすることを保証します (#7532)<a name="hash">
タグへのリンクがサポートされました (#7596)handle
hook でリダイレクトをスローすることがサポートされました (#7612)- フォールバックコンポーネントがないレイアウトには、自動的にフォールバックコンポーネントが追加されるようになりました (#7619)
resolve
hook にある新しいpreload
関数は、どのファイルをプリロードのために タグに追加するかを決定します (Docs, #4963, #7704)version
が$app/environment
経由で使えるようになりました (#7689, #7694)handleError
が promise を返すようになりました (#7780)
Breaking changes:
routeId
がroute.id
になりました (#7450)beforeNavigate
メソッドとafterNavigate
メソッドの 'load' は 'enter' に、'unload' は 'leave' にリネームされました。外部へのナビゲーションの際に、beforeNavigate
は type 'leave' を引数にとって一回だけ呼び出され、リダイレクトの際には実行されなくなりました (#7502, #7529, #7588)redirect
ヘルパーは、リダイレクト時はステータスコードの 300-308 のみを許可し、error
ステータスコードの場合は 400-599 のみを許可するようになりました (#7767) (#7615, #7767)- ルート(route)ディレクトリ名の特殊文字は、hex/unicode のエスケープシーケンスでエンコードされるようになりました (#7644)
- action data の(デ)シリアライズに devalue が使用されるようになりました - これは、
use:enhance
を使わずに直接 action を fetch する方にとっては breaking change です (#7494) trailingSlash
が configuration ではなく page option になりました (#7719)- クライアントサイドのルーターは、
%sveltekit.body%
の外にあるリンクを無視するようになりました (#7766) prerendering
はbuilding
にリネームされ、config.kit.prerender.enabled
は削除されました (#7762)getStaticDirectory()
は builder API から削除されました (#7809)format
オプションがgenerateManifest(...)
から削除されました (#7820)data-sveltekit-prefetch
は-preload-code
と-preload-data
に置き換えられ、prefetch
はpreloadData
になり、prefetchRoutes
はpreloadCode
になりました (#7776, #7776)SubmitFunction
は$app/forms
から@sveltejs/kit
に移動しました (#7003)
New in Sveltepermalink
- css コンパイラオプションの
css: false
とcss: true
は、'external' | 'injected' | 'none'
設定に置き換えられ、ssr
ビルド向けのコンパイルが高速化し、わかりやすさが改善されました (3.53.0)
Svelte compiler に対する全ての変更については、まだ未リリースの変更も含め、CHANGELOG をご確認ください。
Community Showcasepermalink
Apps & Sites built with Svelte
- Appwrite's new console makes its secure backend server for web, mobile & Flutter developers available in the browser
- RepoMagic is a search and analytics tool for GitHub
- Podman Desktop is a graphical tool for developing on containers and Kubernetes
- Ballerine is a Know Your Customer (KYC) UX for any vertical or geography using modular building blocks, components, and 3rd party integrations
- Budget Pen is a Codepen-like browser code editor with Tailwind included
- doTogether helps you keep track of stuff you have get done via a List of recurring Tasks
- Webscraped College Results is a collection of visualizations for data from r/collegeresults
- Let's premortem helps avoid lengthy, frustrating post-mortems after a project fails
- BLKMARKET.COM is an illustration library for commercial and personal use
- Sigil is a canvas for anything with spaces organized by the most-voted content
- corpus-activity-streams is an unofficial ActivityStreams 2.0 vocabulary data set and alternative docs
- nodeMyAdmin is an alternative to phpMyAdmin written with SvelteKit
- Image to Pattern Conversion is a cross-stitch pattern conversion tool with a list of pre-made patterns to start with
- Verbums is an English vocabulary trainer to improve language comprehension
- SVGPS removes the burden of working with a cluster of SVG files by converting your icons into a single JSON file
- This 3D retro-themed asteroid shooter was made with threlte
Learning Resources
To Hear
- Catching up after Svelte Summit and 3D, WebGL and AI by Svelte Radio
To Watch
- Domenik Reitzner - The easy way, an introduction to Sveltekit from Svelte Society Vienna
- Sirens: Form Actions - Kev joins the Sirens again to chat about Form actions in SvelteKit and create a new form for speaker submissions on SvelteSirens.dev
- Introduction To 3D With Svelte (Threlte), How To Use Global Styles In SvelteKit and Progressive Form Enhancement With SvelteKit by Joy of Code
To Read
- Building tic-tac-toe with Svelte by Geoff Rich
- Speed up SvelteKit Pages With a Redis Cache by Captain Codeman
- Understanding environment variables in SvelteKit, Form validation with SvelteKit and Zod and Build a SvelteKit application with Docker by Justin Ahinon
- Why I failed to create the "Solid.js's store" for Svelte, and announcing svelte-store-tree v0.3.1 by YAMAMOTO Yuji
- Create an offline-first and installable PWA with SvelteKit and workbox-precaching by Antonio Sarcevic
Libraries, Tools & Components
- Skeleton is a UI toolkit to build fast and reactive web interfaces using Svelte + Tailwind CSS
- svelte-svg-spinners is a collection of SVG Spinners components
- Svelte Floating UI enables floating UIs with actions - no wrapper components or component bindings required
- at-html lets you use
{@html }
tags with slots in Svelte apps - html-svelte-parser is a HTML to Svelte parser that works on both the server (Node.js) and the client (browser)
- svelte-switcher is a fully customisable, touch-friendly, accessible and tiny toggle component
- sveltkit-hook-html-minifier is a hook that wrapps
html-minifier
- sveltekit-hook-redirect is a hook that makes redirects easy
- sveltekit-video-meet is a video calling web app built with SvelteKit and SocketIO
- svelte-colourpicker is a lightweight opinionated colour picker component for Svelte
- Svelte-HeadlessUI is an unofficial implementation of Tailwind HeadlessUI for Svelte
- svelte-lazyimage-cache is a Lazy Image component with IntersectionObserver and cache action
- threlte v5.0 is a completely new developer experience that is faster, more powerful, and incredibly flexible
今月はこれでおしまいです!見落としなどございましたら Reddit や Discord にてお知らせください。
それではまた来年 🎆