What's new in Svelte: 2023年2月
マイナーバージョンとメジャーな満足度
翻訳 : Svelte 日本コミュニティ
原文 : https://svelte.dev/blog/whats-new-in-svelte-february-2023日本語版は原文をよりよく理解するための参考となることを目的としています。
正確な内容については svelte.dev の原文を参照してください。
日本語訳に誤解を招く内容がある場合は下記のいずれかからお知らせください。
先月から、Svelte と SvelteKit のマイナーバージョンのリリースがあり、たくさんの教育コンテンツが 1.0 リリースをサポートし、そして State of JS survey の結果は…
Svelte は今回も、満足度、興味、ともに上昇しました。投票してくださった皆さんに感謝します!
それではアップデートを見てみましょう…
What's new in SvelteKitpermalink
今月の Svelte エコシステムにおける活動は、SvelteKit のバグフィックスと 1.0 ローンチからのフィードバックに対する取り組みにフォーカスされていました。待ち望まれていた SvelteKit の base path サポートのバグフィックスがリリースされたことで、リモート開発環境でも SvelteKit プロジェクトが作れるようになりました。こういったフィックスだけでなく、以下のような新機能もリリースされています:
<form method="get">
にプログレッシブ・エンハンスメントを適用している場合、submitter の値が自動的に含まれるようになりました (1.0.3, #8273)- グローバルな fetch に相対 URL が使用されている場合、開発モードではエラーが追加されるようになりました (1.0.8, #8370)
- HTML からコメントが削除された場合にハイドレーションが壊れる可能性がある、という警告が追加されました (1.0.11, #8423)
.svelte
ファイルに page option が使用されている場合や、レイアウトに<slot />
が無い場合に警告されるようになりました (1.1.0, #8475)- 新しい
text(...)
ヘルパーにより、テキストのレスポンスを簡単に生成できるようになりました (1.2.0, #8371) - パブリックな env が app.html でアクセスできるようになりました (1.2.0, Docs, #8449)
- cookie がサイズ制限を超過した場合にエラーがスローされるようになりました (1.2.1, #8591)
- 生成される
tsconfig
を変更できるようになりました (1.3.0, #8606)
What's new in Svelte and Language Toolspermalink
- VS Code HTML language service の
html.customData
に対するサポートが追加されました (extensions-107.0.0, #1824) - インポートが必要な store のオートコンプリート (#1823) と object/class メンバーのスニペット (#1817) が Svelte extension に追加されました (extensions-107.0.0)
- 関数の型の promise の検知が改善されました (Svelte 3.55.1, #8162)
- グローバルな
part
属性とon:submit
に、それぞれ不足している型とプロパティが追加されました (Svelte 3.55.1, #8181) - 多くのパフォーマンス改善とバグフィックス (Svelte 3.55.1* and extensions-107.0.x)
*Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、 CHANGELOG をご確認ください。
Community Showcasepermalink
Apps & Sites built with Svelte
- Titowest.com is a series of photographic films by the writer & photographer, Tito West
- Verve is a lightweight and blazingly fast launcher for accessing and opening applications, files and documents
- Round The World is an interactive guide to the travels of Andrew Carnegie
- Linear Regression is an interactive blog post visual introduction to (almost) everything you should know about linear regression
- Flotes is a free note taking app enhanced with flashcard features
- nomie is a Daily Journal for short attention spans
- nocode.gallery is a collection of stunning websites made with no code
- Whom to Follow helps you find accounts you'll love by searching the network of accounts you already follow
- poker-simulator is a poker simulation and evaluation tool
- Pixelicious converts your images into pixel art
- Apple Music is now built with Svelte (proof)
Learning Resources
Featuring Svelte Contributors and Ambassadors
- SvelteKit | Rich Harris | ViteConf 2022
- Talking Gradio and AI with pngwn 🐧 from Svelte Radio
- Progressively enhancing the Marvel By Year filter and Advent of SvelteKit 2022: my favorite demos by Geoff Rich
- EP 13: Contributing more to open source + a Svelte Newsletter showcase rewind ⏪ by Dani Sandoval
To Watch or Hear
- I built a $5 chat app with Pocketbase & Svelte. Will it scale? by Fireship
- The Comprehensive Introduction To SvelteKit, What Svelte UI Library Should You Use? and Learn Everything About SvelteKit Routing (Pages, Layout, Nested Routes) by Joy of Code
- Progressive Enhancement in SvelteKit (use:enhance), Are Your Routes Actually Protected? and 10X Your SvelteKit Developer Experience in VSCode by Huntabyte
- The easiest realtime app I’ve ever built by Beyond Fireship
- Angular developers can learn Svelte so fast... by Joshua Morony
- SvelteKit + PocketBase Integration: User Login and Registration by Jian Yuan Lee
- Marvels Of Using Svelte and SvelteKit - JSJ 566 with Tracey Lee and Adam L Barrett
To Read
- A practical first look at the Svelte framework by Daniel Beer
- State Modeling in Svelte with XState is the port of the Frontend Masters React + XState workshop written in Svelte and built with SvelteKit!
- 🚀 Code your SvelteKit website faster with Stylify CSS by Stylify CSS
- 🎮 Five Svelte Games To Learn How To Code by Tom Smykowski
- How to make declarative (code-based) router instead of file-based router in SvelteKit by Dev Punk
- How to import tailwindcss custom config in JS/TS parts of a SvelteKit app by 0gust1
- SvelteKit Internals: Load function and Svelte and CSS by Justin Ahinon
- Internationalization Formatting with Intl + SSR + SvelteKit by Captain Codeman
- Typesafe i18n with SvelteKit by Andreas Söderlund
- Authorization in your SvelteKit app by Adam Barrett
- Validate your form using Sveltekit, Tailwindcss, Felte and Yup by Hessel
- SvelteKit Form Actions bound to TypeScript class + Validation (yup) w/dynamic array by Hekili Tech
- Smooth Page Transitions with SvelteKit by Phil Kruft
- Redis Integration in SvelteKit: A Game-Changer for Session Management by Shivam Meena
- SvelteKit and GitHub Pages by Andrew Lester
- Tailwind + Sveltekit in 2023 by Mitch Gent
- Svelte Stores Tutorial: Share Data Between Multiple Components by Vincent Widerberg
Libraries, Tools & Components
- Sveltepress is a simple, easy to use, content centered site build tool with the full power of SvelteKit
- Svelte Form Helper is a lightweight helper for form validation with Svelte
- Dapper UI is a sleek and modern UI component library for Svelte, offering full TypeScript support and extensive documentation
- TeilUI is a better way to build design systems with Svelte
- Neodrag is an SSR-friendly, multi-framework draggable library
- Svelvet, a UI library for Svelte, is now 5.0 (read more here)
- Svelte Inview is a Svelte action that monitors an element enters or leaves the viewport/parent element
- html2svelte makes it easy to convert HTML to Svelte components in a snap
お読みいただきありがとうございます!見落としなどございましたら Reddit や Discord にてお気軽にお知らせください。