Svelte 的最新动态:2023 年 7 月
Svelte 4.0、新网站以及社区热点巡礼
Svelte 4 发布了!大家纷纷开始构建项目!我们有许多新的展示项目、库和教程要分享。所以让我们直接开始吧……
Svelte 的新内容
本月的重磅新闻是 Svelte 4.0 的发布!您可以在 Announcing Svelte 4 post 中了解与之相关的所有内容。从性能修复、开发体验改进到 全新的网站、文档和教程... 这个新版本为 Svelte 5 打下了基础,并且只有极少的破坏性变更。
如果您已经在使用 Node.js 16,您的项目可能不会遇到任何破坏性更改。但请务必阅读 迁移指南 来获取所有详细信息。
有关 Svelte 编译器所有更改(包括未发布更改)的完整列表,请查看 CHANGELOG。
SvelteKit 的新内容
本月有许多令人激动的 bug 修复,所以一定要升级到最新版本!此外,还有一些新功能值得一提:
- 新的
event.isSubRequest
布尔值可以指示在服务器请求期间,这是否是向应用自身 API 发起的同源请求(1.21.0,文档,#10170) - 新的配置选项
config.kit.env.privatePrefix
将为环境变量设置一个私有前缀。默认值为''
(1.21.0,文档,#9996) VERSION
现在可以通过@sveltejs/kit
导出并访问。可以用于功能检测或其他需要了解当前 SvelteKit 版本的场景(1.21.0,文档,#9969)
有关特定适配器的更改,请查看 每个 adapter
目录下的 CHANGELOG。
社区展示
用 Svelte 构建的应用和站点
- Heerdle 是 Spotify 的 Heardle 的复刻版 - 每日音乐猜谜游戏
- Meoweler 是一个旅行网站,充满了猫和关于热门目的地的有趣小知识
- 来自宜家的某技术主管 分享了他们如何使用 Svelte 构建页面(和页面模板)的更多细节
- The Quest to Replace Passwords 提供了所有流行密码管理工具的交互式比较可视化
- audiogest 允许您将语音转换为文本 & 一键总结任意音频
- heroify 使用 AI 为您的网站生成 3D 图形
- Diesel Legacy: The Brazen Age 是一款格斗游戏,其排行榜和个人页面均使用 Svelte 构建
- markmyimages 是一个批量修改图像大小、重命名、添加效果等功能的水印工具
- md.robino.dev 是一个基于 Web 的 Markdown 编辑器
- YABin 是具有一些非常具体功能的 Pastebin 工具
学习资源
专题展示 Svelte 的贡献者和大使
- 开发日志:2023 年 6 月 - Svelte 4.0 和 Rich Harris
- PodRocket: Svelte 4 和 Geoff
- This Dot Media: Svelte 4 发布派对 和 Simon、Ben、Geoff、Puru
- 解剖 Svelte:两宅神吐槽 是 Rich Harris 和 Dax Raad 的搞笑对谈
- 社区教程:使用 VPS、Docker、CapRover 和 GitHub Actions 自托管 SvelteKit 和 Stanislav Khromov
- SvelteKit 和 Storybook 和 Jeppe Reinhold
- 本周的 Svelte 更新:
- 2023 年 6 月 2 日 - SvelteKit 1.20.1、Svelte 4 测试版发布、Headless UI 库
- 2023 年 6 月 9 日 - 更新、自托管 SvelteKit、将样式传递给子组件
- 2023 年 6 月 16 日 - Svelte 4 next.1,如何创建汉堡菜单、分组布局
- 2023 年 6 月 23 日 - Svelte 4、弹出框和悬停、使用 SvelteKit 进行实时请求
- Svelte Radio
- SvelteLab - 一个为 SvelteKit 服务的 Svelte REPL 和 Antonio 和 Paolo
- Svelte Radio Live - Svelte 4 夏季特别节目 和 Simon 和 Puru
- Svelte Society - 伦敦 2023 年 6 月活动
- 使用 Svelte 上下文 API 和 Stores、使用 Svelte 和 GSAP 实现不可能完成的 FLIP 动画布局 和 使用 Svelte 创建美丽的演示幻灯片 by Joy of Code
值得观看
- 在 SvelteKit 中实现服务器端过滤、分页和排序的表格 by hartenfellerdev
- 2023 年最好的 Svelte 和 SvelteKit 图标库 by SvelteRust
值得阅读
- 使用 SvelteKit 从零到上线 by Justin Ahinon
- 关于 Svelte(Kit) 的想法:一年 30 亿请求之后 by Claudio Holanda
- 如何使用 SvelteKit 和 Capacitor 发布 iOS 和 Android 的感恩日志应用 by Stanislav Khromov
- 通过实践学习 - Vue 开发者构建 Svelte 单页应用 by Black Spike
- 生成 SvelteKit 的面包屑和导航、SvelteKitAuth 和 OAuth 提供商的综合指南 和 SvelteKitAuth 与 Salesforce OAuth 提供商 by Aakash Goplani
- 快速定位并移除 Svelte 组件孤儿 by Jeremy Zaborowski
- 从 Routify 到 SvelteKit 路由器的迁移指南 by Aakash Goplani
- 使用 Threlte 和 D3 创建 3D 数据可视化 by DataViz Cubed
- Svelte 实时多人游戏:用户状态 和 SvelteKit PostCSS 教程:今天就使用未来的 CSS by Rodney Lab
- SvelteKit 的路由世界:使用动态路由和参数释放应用的潜力 by Igor Nowosad
库、工具和组件
- Vercel AI SDK 是一个针对 React 和 Svelte 构建的、支持流式传输、边缘准备就绪的 AI 应用开发工具包
- Superforms 1.0 已发布。查看 迁移指南 和 新功能列表 获取更多详细信息
- Panda CSS 是一种 CSS-in-JS 工具,具有生成时样式、RSC 兼容性和多变体支持
- svelte-section-list 是一个无头的 Svelte npm 包,提供管理项目和部分的拖放功能
- WebStorm 开始在其 IDE 工具中使用 Svelte 语言服务器
- shadcn-svelte 是 shadcn/ui 的非官方移植,使您可以轻松从通用基础组件构建组件库
- sveltekit-multibuild 是一个脚手架仓库,自动创建 Android 应用、网站、桌面应用和 Chrome 扩展
- SvelteKit AI Chatbot 是一个用 SvelteKit、Vercel AI SDK、OpenAI 和 Vercel KV 构建的开源 AI 聊天机器人应用模板
- KitAI 为 SvelteKit 和 Next.js 提供功能丰富的 AI 模板
- Svelte Form Builder 是 Svelte 的无代码拖拽式表单构建器
感谢阅读!一如既往,如果我们遗漏了什么,请随时在 Reddit 或 Discord 上告诉我们。
下次见 👋