Svelte 的最新动态：2022年6月

在上个月的 Svelte Summit 结束后，我们准备将所学应用到新的6月！本月还带来了针对 createEventDispatcher、@const 声明的几个质量提升更新，以及朝着 SvelteKit 1.0 迈出的许多进展。

让我们深入了解一下！

Svelte 的新动态

• 自定义事件现在可以在 createEventDispatcher 函数中被取消（3.48.0, 文档, PR）
• 现在可以在 {#if} 块中使用 {@const} 标签有条件地定义变量（3.48.0, 文档, PR）
• 针对 <svelte:element>、动画及各类 DOM 元素的众多 Bug 修复。详细信息请查看 CHANGELOG。

SvelteKit 的新动态

• Vite 2.9.9 已发布，它是 Vite 2 版本的最后一个版本之一。Svelte 团队正在积极为 Vite 3 的发布做出贡献，以使 SvelteKit 和 Vite 的集成更加流畅（Vite 3.0 里程碑）
• config.kit.alias 现在能让你更容易地声明自定义别名以替代 import 语句中的值（文档, PR）
• 标记为预渲染的页面现在会在运行时的 SSR 阶段失败（PR）

不兼容变更

• 不再支持 Node 14（PR）
• 针对 /favicon.ico 的请求将不再被抑制，而是被处理为有效路由（PR）
• AMP 支持已移至独立的 @sveltejs/amp 包中（文档, PR）
• 生成的类型现在写入 _types 目录中，请相应更新你的导入路径（PR）
• app.html 中的 %svelte.head% 和 %svelte.body% 现在分别改为 %sveltekit.head% 和 %sveltekit.body%（PR）
• LoadInput 现在为 LoadEvent
• 不再支持 Wrangler 1，转而推荐使用 Wrangler 2（PR）

---

社区展示

使用 Svelte 构建的应用和网站

• Plantarium 是一个用于生成 3D 植物的工具。
• SPATULA 是一个用来构建可作为代码材料导出的着色材质的工具，可以用于任何使用 lamina 和 threejs 的项目中。
• Waaard 允许你通过多种 SSO 提供商创建和发送受保护的链接。
• Magidoc 是一个快捷且高度可定制的 GraphQL 文档生成器。
• myMarkmap 是一个用于 Markmap 的自定义编辑器，使用 SvelteKit 构建。
• PassShare 是一个让你可以安全、轻松地与朋友共享密码的工具。
• DashingOS 是一个工具（类似 Notion + CodeSandbox），可以快速地原型设计和记录工作内容。
• worker-kit-email 帮助你使用常规的 SvelteKit 路由快速开发事务性邮件。
• kaios-weather-svelte 是一个非常熟悉的 KaiOS 天气应用。
• svelte-gantt 是一个轻量且快速的交互式甘特图/资源预订组件。
• Miru 是面向猫咪的 BitTorrent 流媒体软件。

想要寻找一个很棒的 SvelteKit 网站来贡献吗？帮助构建 Svelte Society 网站！

学习资源

阅读

• Component party 是一个比较不同框架中常见模式的网站
• Quick tip: style prop defaults by Geoff Rich
• Working with reduced motion in Svelte by GHOST
• Building a Musical Instrument with the Web Audio API by Tania Rascia
• Svelte-Cubed: Creating an Accessible and Consistent Experience Across Devices 和 Svelte-Cubed: Loading Your glTF Models by Alex Warnes

观看

来自 Svelte Society:

• 2022 年春季 Svelte Summit 实况录播 已更新章节标记，以便轻松反复观看
• Svelte London, April 2022 全程录播 已上线！观看来自 Svelte London 社区的精彩演讲
• Persian Svelte Society 正在制作关于 Svelte 的波斯语视频
• Svelte Sirens 每月与 Svelte 社区的创作者和贡献者对话：
  • SvelteKit + Sanity.io 的绝配组合 - 5 月 13 日
  • 用 Prismic 切分 Svelte 网站 - 5 月 20 日
  • 在 Render 上渲染 Svelte 应用 - 5 月 24 日
  • （非官方）Svelte 通讯的创办故事 - 5 月 27 日

网络上的资源：

• Building vite-plugin-svelte-inspector, What is Singleton? 和 What is Navigation? by lihautan
• 用 TDD 和 VITEST 测试 SvelteKit by Johnny Magrippis

听

• Svelte Radio 持续发布了每周集数：
  • 运行 Svelte Meetup 的冒险旅程

库、工具和组件

• vite-plugin-svelte-console-remover 是一个 Vite 插件，可清除你代码中多余的调试内容。

• vite-plugin-svelte-console-remover 是一个 Vite 插件，用于在构建过程中从 Svelte、JS 和 TS 文件中移除所有 console 语句（log、group、dir、error等），以防泄露到生产环境。

• Svelte Headless Tables 是一个无强烈固化设计且可扩展的数据表库，专为 Svelte 而设计。

• y-presence 是一组轻量级的库，用于轻松地为任何 Web 应用程序添加临场感（实时光标/头像），现已支持 Svelte！

• Svelcro 是一个用于 Svelte 应用程序的组件性能跟踪工具。

• Svelte-Splitpanes 让你可以创建动态且可预测的视图面板，用于布局应用程序。

• svelte-miniplayer 是一个轻量、快速、可调整大小且可拖动的媒体迷你播放器。

• svelte-keybinds 是一个极简的按键绑定接口，支持重新绑定和保存功能。

• svelte-speech-recognition 将麦克风的语音转换为文本，并将其提供给你的 Svelte 组件。

特别推荐：Svelte Stores

本月许多作者发布了大量 Svelte store...

• svelte-mutable-store 是一个支持 immutable 编译器选项的可变值 Svelte store。
• svelte-damped-store 是一个派生的可写 store，可暂停更新。而 svelte-lens-store 是一个基于 Svelte store 的功能透镜工具。
• svelte-persistent-store 是一个可写的 Svelte store，可以从 Window.localStorage 或 Window.sessionStorage 中保存和加载数据。

我们遗漏了什么吗？欢迎加入我们的 Reddit 或 Discord 社区分享你的想法。

别忘了你还可以亲自参加在斯德哥尔摩举行的 Svelte 峰会！加入我们，一同享受为期两天的精彩 Svelte 内容！立即购票。

下个月再见！