Svelte 新闻：2022 年 6 月

随着上个月的 Svelte 峰会 结束，我们准备在这个 6 月份应用我们学到的所有东西！本月还有对 createEventDispatcher、@const 声明的一些质量改进，以及 SvelteKit 1.0 的大量进展。

让我们深入了解一下！

Svelte 的新功能

• 自定义事件现在可以在 createEventDispatcher 函数中取消（3.48.0，文档，PR）
• {@const} 标签现在可以在 {#if} 块中使用，以有条件地定义变量（3.48.0，文档，PR）
• <svelte:element>、动画和各种 DOM 元素都修复了许多错误。查看 变更日志 以了解更多信息！

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）
• %svelte.head% 和 %svelte.body% 现在在 app.html 中分别为 %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 网站！

学习资源

阅读

• 组件派对 是一个比较不同框架中常见模式的网站
• Geoff Rich 的 快速提示：style 属性默认值
• GHOST 的 在 Svelte 中使用简化运动
• Tania Rascia 的 使用 Web Audio API 构建乐器
• Alex Warnes 的 Svelte-Cubed：跨设备创建可访问且一致的体验 和 Svelte-Cubed：加载您的 glTF 模型

观看

来自 Svelte Society

• 2022 年春季 Svelte 峰会直播录制 已更新章节标记，方便您反复观看
• 2022 年 4 月 Svelte London 的完整录制 发布了！查看来自整个 Svelte London 社区的精彩演讲
• 波斯语 Svelte Society 正在制作关于 Svelte 的波斯语视频
• Svelte Sirens 每月都会与 Svelte 社区的创作者和贡献者进行交流
  • SvelteKit + Sanity.io：天生一对（5 月 13 日）
  • 使用 Prismic 切割您的 Svelte 网站（5 月 20 日）
  • 在 Render 上渲染您的 Svelte 应用（5 月 24 日）
  • (非官方) Svelte 新闻背后的故事（5 月 27 日）

网络上

• lihautan 的 构建 vite-plugin-svelte-inspector、什么是单例？ 和 什么是导航？
• LevelUpTuts 的 在 Svelte Kit 中自动导入组件 - 每周 Svelte
• Johnny Magrippis 的 🧪 使用 TDD 和 VITEST 测试 SvelteKit 🧪
• Joy of Code 的 SvelteKit 中的 Google Analytics、SvelteKit 中使用 WebSockets、使用 Cookie 进行 SvelteKit 身份验证 和 Svelte Headless UI 组件库
• The Svelte Junction 的 SvelteKit 中嵌套路由中的命名布局
• Rodney Lab 的 SvelteKit Shiki 语法高亮：Markdown 代码块 和 Svelte Capsize 样式：排版工具

收听

• Svelte Radio 一直在发布每周节目
  • 运行 Svelte 聚会的历险记
  • 另一个 Rich！Geoff！（特邀 Geoff Rich）
  • 与 Dominik G. 一起检查 Svelte 代码。
  • 商店多多
• 来自 The New Stack 的 Svelte 和前端开发的未来（特邀 Rich Harris）

库、工具和组件

• vite-plugin-svelte-console-remover 是一款 Vite 插件，可在构建过程中从 Svelte、JS 和 TS 文件中删除所有控制台语句（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 商店

本月有许多作者发布了大量的 Svelte 商店……

• svelte-mutable-store 是一个用于可变值的 Svelte 商店，具有 immutable 编译器选项
• svelte-damped-store 是一个派生的可写商店，可以在 svelte-lens-store 是 Svelte 商店上的一个函数透镜时暂停更新
• svelte-persistent-store 是一个可写的 svelte 商店，可以从 Window.localStorage 或 Window.sessionStorage 保存和加载数据。

我们是否错过了什么？加入我们的 Reddit 或 Discord 发表您的意见。

别忘了您也可以在斯德哥尔摩的 Svelte 峰会上与我们见面！加入我们，参加为期两天的精彩 Svelte 内容！立即获取您的门票。

下个月见！