Svelte 的新动态:2023 年 6 月
SvelteHack 获奖者、大量新绑定、Svelte 4.0.0-next.0,以及 SvelteKit 中的一堆新功能
欢迎来到六月,并且祝贺所有 SvelteHack 的获奖者,覆盖了所有类别!如果你错过了消息,这些获奖者已在 5 月 6 日的 Svelte Summit 上宣布 🎉
包括所有演讲视频的完整播放列表可以在 Svelte Society 的 YouTube 频道 上找到。如果还没有看,快去看看吧!
本月的新闻通讯内容丰富,涵盖了对 Svelte 和 Kit 的大量改进……
Svelte 的新动态
Svelte 4.0.0-next.0,Svelte 4.0 的第一个预发布版本已经上线!关于本次发布的变化、改进和目标的说明可以在 GitHub 的发布页面 中找到。查看一下,抢先体验 Svelte 的未来。此外还包含了迁移指南,适合那些关心最小化破坏性更改和弃用内容的人。
Svelte 3.59.0 也已发布,带来了大量新功能:
- 现在正确处理使用展开运算符 (
...
) 的数组重组(3.59.0,#8552,#8554) - 新的
a11y-autocomplete-valid
警告会在自动完成属性未按照 HTML 规范使用时发出警告(3.59.0,示例,#8520) <svelte:document>
元素现在支持fullscreenElement
和visibilityState
的绑定(3.59.0,#8507)<svelte:window>
元素现在支持devicePixelRatio
的绑定(3.59.0,#8285)ResizeObserver
的绑定contentRect
/contentBoxSize
/borderBoxSize
/devicePixelContentBoxSize
现在可使用bind:
(3.59.0,#8022)
有关 Svelte 编译器的所有更改(包括未发布的更改),请查看 CHANGELOG。
SvelteKit 的新动态
- 路由级别的条目生成器允许从
+page
、+page.server
和+server
文件导出一个entries
函数,以为预渲染提供参数的可能值(1.16.0,文档,#9571) <meta>
标签中的 URL 现在可以被爬取,从而更容易生成程序化的社交媒体图像(1.17.0,文档,#9900)- 在
enhance
函数中,data
和form
分别被重命名为formData
和formElement
。使用旧名称时会记录一个弃用警告,并将在未来的版本中移除。(1.17.0,文档,#9902) - 现在可以将链接选项设置为
true
和false
(1.19.0,文档,#10039) - 新的
resolvePath
导出可用于从路由 ID 和参数构建相对路径(1.19.0,#9949)
社区展示
使用 Svelte 构建的应用和网站
- a-maze 是一个简单的迷宫生成器(使用 DFS),支持 5 到 75 个单元的尺寸
- Windows 11 in Svelte 尝试在网页上复制 Windows 11 的桌面体验
- JsonCrunch 是一个 JSON 查看、转换和查询工具,用于快速操作小到中等大小的 JSON 数据
- Typepost 是一个简单的社交媒体文本帖生成工具
- tall.ly 是一个书签分享网站(示例)
- bbchallenge 是一个合作环境,用于验证或否定繁忙海狸猜想
- Reddit Map 是一个项目,旨在探索并可视化 Reddit
- WeWatch 允许同步观看视频
- Wonderplan 是一个基于 AI 的行程规划器,可根据你的喜好定制旅行的所有方面
- CodingView.io 是一个在线代码面试工具
- MeatGPT 是一个艺术网站,专注于无视你的提示
- Vim Ninja 是一个交互式的浏览器 Vim 课程
- prcl 是一个专注于速度和简单性的 Pastebin 替代品
- md 是一个基于网络的 Markdown 编辑器
学习资源
推荐来自 Svelte 贡献者和大使的内容
- 本周的 Svelte:
- 2023 年 4 月 28 日 - SvelteKit 1.15.9,颜色对比,SvelteKit 可重用类型,路径别名
- 2023 年 5 月 5 日 - SvelteKit 1.16.0,响应式语句生命周期,自定义存储
- 2023 年 5 月 12 日 - Svelte 4.0 预览版,SvelteKit 1.16.3,Svelte 3.59.1
- 2023 年 5 月 19 日 - SvelteKit 1.18.0,辅助 HTML 表格,CSS 嵌套
- 2023 年 5 月 26 日 - SvelteKit 1.19.0,选择 UI 库,断点调试
- Svelte 电台
- Svelte Summit 特别节目(2023 年 5 月 4 日)
- 开发者的 AI 入门指南(与来自 Latent Space 的 Swyx)(2023 年 5 月 11 日 | 视频版)
观看
- 构建一个极速的 SvelteKit Markdown 博客、SvelteKit 中页面与独立端点的区别 以及 学习 SvelteKit 应用中的数据流动 by Joy of Code
- 使用 SvelteKit 构建 ChatGPT 插件 by SuperMilkDaddy
- Svelte 让拖放 API 变得简单 以及 用 SvelteKit 构建简单的原生样式 App by Antonio Sarcevic
- 让我们在 60 分钟内学习 Svelte.js(趣味速成课程) by developedbyed
阅读
- 连接 Vue 2 和 Svelte by Alexis Faizeau
- 一次编写,随处运行 by Ross Robino
- 迁移我的 SaaS 到 SvelteKit 的反思 by SvelteKitSaaS
- 使用 Rust(actix-web)和 SvelteKit 实现认证系统 by John Owolabi Idogun
- SvelteKit 表单:语法检查应用、SvelteKit Ably:Sqvuably 实时游戏 以及 Svelte 登录表单示例:最佳实践 by Rodney Lab
- 在 SvelteKit 中正确使用 Stores 以及 Rich Harris 并未移除 Svelte 中的 TS 支持 by Jonathan Gamble
- 如何为 SvelteKit 添加一个基本的 SEO 组件 by Thilo Maier
- SvelteKit 联系表单示例(使用 Airtable) by Scott Spence
- 使用 Svelte-Kit 提高响应式性能 by Erxk
- Svelte 存储:神秘之处 by Valdimir Klepov
库、工具与组件
- svelte-svg-transform 是一个小型库,帮助你轻松在 Svelte 项目中添加和转换 SVG
- sirens 是一个 DER SPIEGEL 应用,为乌克兰的活动空袭警报提供可视化
- Sveltronics 是一组 Svelte 项目实用函数的集合
- Prompta 是一个界面工具,用于与 ChatGPT(或 GPT-4)聊天
- Colibri 是一个轻量级、可自定义的 Svelte 应用组件库
- Svelte Smart Doc 是一个基于自然语言的 Svelte 文档搜索界面
- Tailwind Elements 现在支持 Svelte 集成
感谢阅读!一如既往,如果你发现我们遗漏了任何内容,请在 Reddit 或 Discord 上告诉我们。
下次见 👋