Svelte 2023年8月更新
扩展自定义元素类和新的 +server 导出
本月,Svelte 和 SvelteKit 都发布了一些很棒的新功能。同样令人欣慰的是,看到许多产品和副项目都使用 Svelte 作为其核心技术成功发布!
更多详情请见下文...
Svelte 和语言工具的新增功能
自 Svelte 4 发布以来,已经修复了许多小错误。您可以在 CHANGELOG 中找到它们。
4.1.0 版本增加了进一步自定义包装底层 Svelte 组件的自定义元素类的能力。查看 自定义元素 API 文档 或 PR 以获取更多信息!
除了支持 SvelteKit 新的 HEAD
服务器方法外,Svelte 的语言工具现在还支持 Prettier v3(extensions-107.9.0),并且现在使用工作区信任设置来支持工作区中的所有设置(extensions-107.8.0)。
SvelteKit 的新增功能
- API 路由中现在可以使用
HEAD
服务器方法(1.22.0,文档,#9753) - 带有
Vary
标头的响应现在也已缓存(除了Vary: *
)(1.22.0,文档,#9993) - 如果 SvelteKit 的构建输出不存在,现在会有一个更有帮助的预览错误(1.22.2,#10337)
有关本月的所有补丁和性能更新,请查看 SvelteKit CHANGELOG。您还可以在每个 适配器目录 中找到特定于适配器的 CHANGELOG。
社区展示
使用 Svelte 构建的应用程序和网站
- GitLight 将 GitHub 和 GitLab 通知带到您的桌面
- Days 是 paprikka 的生活天数,灵感来自 Buster Benson 的 Life in Weeks
- Mofi 是音乐的内容感知填充和修剪
- JSON Bucket 存储您的 JSON 数据,以便您可以通过生成的 API 路由在任何地方访问它
- Soggy Planet 是一个地球交互式地图,其中海平面升降,文明之光在夜间闪耀(源代码)
- PaperClip 是一款 Chrome 扩展程序,可以轻松记住机器学习、计算机视觉和自然语言处理论文中的详细信息。
- Maktaba 是一款“您将实际使用”的书签管理器
- Whispering 是一款 Chrome 扩展程序,允许您访问 OpenAI 的 Whisper API 以在浏览器中快速转录(包括 ChatGPT)
- DocuTalk 是您网站的 AI 客户支持聊天机器人
- Krello 是使用 Svelte、Appwrite 和 Flowbite 构建的 Trello 克隆
- Been 是一个地图构建器,具有旅行统计信息,如访问过的国家/地区、极端访问点等。
- image-to-social-media-thumbnail 允许您将任何图像转换为社交媒体缩略图
- Svelte Capacitor Store 是一个持久性存储,它在本地设备上使用电容(首选项)存储,否则使用 localStorage,使其成为跨平台项目的理想选择
学习资源
来自 Svelte 贡献者和大使
- 探索 Svelte 4 与 Kevin AK:性能、兼容性和 Web 组件支持 | 现代 Web Pod 由 This Dot Media 制作
- Svelte Sirens 流设计系统:经验教训 特邀 Eric Liu,Carbon Components Svelte 和
sveld
docgen 库的创建者 - 本周 Svelte
- 2023年6月30日 - Svelte 4.0.1、SK 1.21、列表、屏幕阅读器、加载
- 2023年7月7日 - Svelte 4.0.5、Kit 1.22.1、Svelte 5、本地存储和 Markdown
- 2023年7月21日 - Svelte 4.1.1、SvelteKit 1.22.3、渐进增强
观看/收听
- 什么是过渡型 Web?与 Chris Ferdinandi 由 Smashing Podcast 制作
- SvelteKit 在 100 秒内 由 Fireship 制作
- Primo V2 简介 由 Primo(一个基于 Svelte 的 可视化 CMS)制作
- 了解 Svelte(与 React 对比) 由 Kodaps Academy 制作
- 就这么简单吗?- 掌握 SvelteKit 由 Threeveloper 制作
- 使用自定义组件在 SvelteKit 中使用 Markdown:mdsvex 由 hartenfellerdev 制作
- 如何为 Svelte 和 Sveltekit 添加彩带 🎉 和 使用 Rust 和 WebAssembly 使您的 SvelteKit 代码速度提高 10 倍 由 SvelteRust 制作
阅读
- SvelteJS:我的生态系统比你的大 由 roguegpu 制作
- 避免在 SvelteKit 中的服务器上共享状态 由 Aakash Goplani 制作
- SvelteKit Fontaine:减少自定义字体 CLS 由 Rodney Lab 制作
- Svelte Kit 中重定向的简单指南 由 Justin Golden 制作
- React 与 Svelte(2023 年第三季度) 由 Gee 制作
- 带有 Upstash Redis 的 SvelteKit 页面反应组件 由 Scott Spence 制作
- 使用 SvelteKit 构建隐私友好型、自托管应用程序架构 和 使用 SvelteKit 构建隐私友好型、自托管应用程序架构 由 Stanislav Khromov 制作
- 在 IIS 上部署 Sveltekit 由 Nutchapon Makelai 制作
- 简化的身份验证和机密管理 由 Eman 制作
库、工具和组件
- Melt UI 是一组针对 Svelte 的无头、可访问的组件构建器
- MDsveX 已更新以与 Svelte 4 兼容
- Svelte Sonner 是一个针对 Svelte 的有主见的消息提示组件
- WebExtensionTemplate 允许您跳过样板并使用 TypeScript 和 Svelte 或 React 编写 Web 扩展
- svelte-rust 允许您在 Svelte 应用程序中运行 Rust 代码
- SvelteKit SSE 提供了一种简单的方法来生成和使用服务器发送事件
- better-svelte-writable 提供了一个类型安全的可写对象,让您更好地控制容器
- Svetch.ts 是您 API 端点的客户端/类型/模式/文档生成器
- sveltekit-localize-url 处理 URL 本地化和路由
- elegua 是一个针对 Svelte 的小型、响应式 PWA 路由器
- Molly 是一个 bash 脚本和 npm 模块,可帮助您清理项目中未使用的 Svelte 组件
- sveltekit-bot 是使用 SvelteKit 和 Vercel 制作的 Telegram 机器人
感谢您的阅读!与往常一样,如果您发现我们遗漏了任何内容,请随时在 Reddit 或 Discord 上告知我们。
下次再见 👋