Svelte 最新动态:2023 年 12 月
Svelte 5 预览版在 2023 年秋季 Svelte 峰会上发布
2023 年秋季 Svelte 峰会盛况空前!涵盖了整个生态系统的演讲,以及核心团队发布的全新 Svelte Dev Tools、图像优化以及 Svelte 5.0 的预览版本!整个演讲可以在这里找到(时间戳如下)
- 0:00 热闹的音乐!
- 18:20 探索 Svelte DevTools - Ignatius B(4 分钟)
- 25:27 SvelteKit 作为 SPA 框架的表现如何 - Henry Lie(25 分钟)
- 53:00 enhanced:img - Ben McCann(6 分钟)
- 1:03:44 inlang-paraglide JS 用于 SvelteKit 国际化 - Samuel Stroschein(10 分钟)
- 1:17:32 Svelte 和 GraphQL 如何协同工作 - Jean-Yves Couet(31 分钟)
- 1:53:10 svelte-ecosystem-ci - Dominik G(10 分钟)
- 2:23:06 Svelte 用于创意开发 - Steven Stavrakis(10 分钟)
- 2:35:33 文档翻译 - Romain I’Ourson(11 分钟)
- 2:49:48 ENHANCE! - Paolo Ricciuti(25 分钟)
- 3:18:25 使用 Svelte 解决方案提升无障碍性 - Enrico Sacchetti(25 分钟)
- 3:49:11 svelte@next - Rich Harris(18 分钟)
今天也是Svelte 降临节的第一天:12 月的每一天都会有一项 Svelte 挑战。加入庆祝活动,并参与使用 Svelte 的每日前端挑战!
现在让我们深入了解更新……
Svelte 的新功能(5.0 预览版!)
Svelte 5 预览版现已在svelte@next 上可用,而 Svelte 4 的当前版本(@latest
)是 4.2.7
。以下所有更改均来自预览分支
- TypeScript 现在通过 acorn-typescript 原生支持(**5.0.0-next.9**,#9482)
- 新的
$effect.active
符文返回一个布尔值以指示效果是否处于活动状态。这允许您在读取值时(在效果中或模板中)设置订阅,但也无需创建订阅即可读取值(**5.0.0-next.10**,文档,#9591) - 新的
$effect.root
符文创建一个未跟踪的作用域,该作用域不会自动清理。这对于您想要手动控制的嵌套效果很有用(**5.0.0-next.14**,文档,#9638)
对于所有未来的发行说明,请查看主分支上的 CHANGELOG。有关重点内容,请查看以下内容!
SvelteKit 的新功能
- 创建新的 SvelteKit 项目时,现在会询问您是否要尝试 Svelte 5 测试版(#11026)
- Prettier 3 和
prettier-plugin-svelte
3 现在是创建新的 SvelteKit 项目时的默认版本(#10410) - 通过 Vercel 适配器现在支持 nodejs20.x(#11067)
@sveltejs/enhanced-img
通过预处理简化了提供不同尺寸图像的服务(文档,#10788)
有关错误修复和性能更新的完整列表,请查看SvelteKit CHANGELOG。您还可以在每个适配器目录中找到特定于适配器的 CHANGELOG。
语言工具的新功能
- 最新版本的语言工具为
$props()
符文添加了尽力而为的回退类型(**extensions-108.1.0**) - 语言工具通过使用
Snippet
类型更好地支持@render
标签(**extensions-108.0.0**) - Svelte ESLint 插件已更新以支持 Svelte 5 预览版(v2.36.0-next.2)
社区展示
使用 Svelte 构建的应用程序和网站
- MobileView 是一款用于实时跨设备网站模拟的 Chrome 扩展程序
- ClassroomIO 是一个面向技术训练营的开源平台
- sshx 是一个安全的基于 Web 的协作终端
- ToneShift 允许您克隆任何声音、创建音乐并加入声音社区
- CanvasGPT 是自主思维导图。由 AI 驱动
- Wordplay 是一种新的教育性、易访问且包容语言的编程语言,用于创建有趣、交互式的排版(博客文章)
- CodeFlow 是程序员学习、思考和编写更好代码的路线图
- Teller 是一款全面的 Minecraft 备份解决方案,旨在促进本地备份以及与 ChunkVault 后端交互
- Sudoku 是使用 SvelteKit、Typescript 和 Tailwind 创建的棋盘
学习资源
特色 Svelte 贡献者和大使
- SvelteKit 及其他方面的视图转换与 Geoff Rich 和使用 Thomas G. Lopes 融化 UI 由 Svelte Radio 播客
- 制作最佳的 Svelte SVG 动画库、如何将您的 JavaScript 代码发布到带有 SvelteKit 的 npm 以及Svelte 5 的新功能?(符文、事件、代码片段) 由 Joy of Code
- Svelte 社区演讲
- 2023 年 11 月圣地亚哥 Svelte 社区
- 为 WinterJS 构建 SvelteKit 适配器 与 Willow 和 Kev
- 本周 Svelte
- 2023 年 10 月 27 日 - SvelteKit 1.27.1,组件库的支柱
- 2023 年 11 月 3 日 - SvelteKit 1.27.2,选择数据库、预处理器
- 2023 年 11 月 10 日 - SvelteKit 1.27.4、Svelte 4.2.3、关闭模态框
- 2023 年 11 月 17 日 - SvelteKit 1.27.6、Svelte 4.2.5、Svelte 5 的新功能!
- 2023 年 11 月 24 日 - Svelte 4.2.7、标记中的 TypeScript、SvelteKit 中的 WebSockets
观看/收听
- 为什么 Stack Overflow 拥抱 Svelte 由 Stack Overflow 播客
- 使用 Svelte、SvelteKit、Firebase、Tailwind Css、Shad-cn Svelte 等构建 Twitter 克隆 由 Lawal Adebola
- SvelteKit 速成课程:在 90 分钟内构建完整的网站!- 2023 教程 由 Prismic
阅读
- 实践经验:如何使用 SvelteKit 构建电子商务商店? 由 Bård Farstad
- 使用 SvelteKit、PostCSS 和 TailwindCSS 实现高效的暗黑模式(幕后) 由 Quang Phan
- 在 SvelteKit 项目中使用 Auth.js 设置 OAuth 由 Andrey Mikhaylov
- SvelteKit 🤝 Storybook 由 Paolo Ricciuti
- 在 Svelte 中集成 Storybook:以 Svelte 的方式进行 由 Óscar Domínguez Celada
- Drizzle ORM 与 Sveltekit 和Sveltekit — 流式 SSR 由 Mohammed Anas
- Svelte 和 WordPress 全栈课程 由 Udemy 上的 Artneo Web Design
- 在 SvelteKit 中为表单操作添加加载指示器 由 Useful Snippets(Stanislav Khromov)
库、工具和组件
- sveltekit-view-transition 为 Sveltekit 提供简化的
view-transition-api
- T18S 旨在为 SvelteKit 提供最佳的国际化体验,提供类型安全、性能和易用性
- Svelte Flow 是一个可定制的 Svelte 组件,用于构建基于节点的编辑器和交互式图表
- Super Sitemap 是一个 SvelteKit 网站地图,专注于易用性和避免忘记添加路径
- Svelte UX 是一个基于 Tailwind 的组件库,用于简化创建高度互动和视觉化的应用程序
- CanIKit 提供了一种简单的方法来向您的 SvelteKit 应用程序添加授权
- Svelte Toggles 管理亮/暗模式交互和首选项存储
- Baselime 现在支持 SvelteKit 的边缘日志记录程序包
本月就到这里了!如果您发现我们错过了任何内容,请随时在Reddit 或Discord 上告知我们。
下个月再见 👋