Svelte 新特性：2020年10月

欢迎来到我们”Svelte 新特性”系列的第一期！我们会尝试每月发布一篇博文，让你了解新功能、错误修复以及来自社区的 Svelte 项目展示。

新功能

1. use:obj.method 允许在动作中使用对象内定义的函数（示例，3.26.0，警告在 3.27.0 中移除）
2. _ 现在支持作为”数字分隔符”，类似于 . 或 ,（示例，3.26.0）
3. import.meta 现在可以在模板表达式中使用（示例，3.26.0）
4. 现在支持带有 ~ 和 + 组合符的 CSS 选择器（示例，3.27.0，编译器修复在 3.29.0）
5. {#key} 块现在可以用于基于表达式对任意内容进行键控。每当表达式改变时，{#key} 块内的内容将被销毁并重新创建。要了解深入解释和实现方式，请查看 Svelte 团队成员 Tan Li Hau 的新博客文章。（更多信息，3.29.0）
6. 插槽现在可以通过子组件转发！这在以前只能通过添加额外的包装 <div> 来实现（更多信息，3.29.0）
7. 使用 TypeScript 时，现在可以为 createEventDispatcher 方法添加类型：

<script lang="ts">
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher<{
		/**
		 * 你也可以添加文档
		 */
		checked: boolean; // 将转换为 `CustomEvent<boolean>`
		hello: string;
	}>();

	// ...
</script>

这将确保你只能使用指定的事件名称及其类型来调用 dispatch。Svelte for VS Code 扩展也已更新以支持这个新功能。它将为这些事件提供强类型支持以及自动完成和悬停信息。

Sapper 的新特性！

Sapper 0.28.9 刚刚发布。主要亮点包括对 CSP nonces 的更好支持、导出页面的资源预加载支持，以及错误页面上的错误详情现在可以在 $page store 中获取。

此外，Sapper 的 CSS 处理在最近的版本中已经被重写，目的是修复现有的 CSS 处理错误，将 CSS 处理完全重构到 Rollup 插件中，并在内部移除在路由系统中注册 CSS 的需求。恭喜并感谢所有在 Sapper 上工作的人员的出色工作！

重要的错误修复

• CSS 编译不再移除 <details> 元素上 open 属性的规则（示例，3.26.0）
• prettier-plugin-svelte 现在在处理空白方面做得更好，特别是在内联元素周围。它还会保留 <pre> 标签内的格式，并且不会再格式化 Prettier 不支持的语言，如 SASS、Pug 或 Stylus。

即将到来

• Svelte Summit，Svelte 的第二届全球在线会议，将于 10 月 18 日举行！免费注册以获取提醒和演讲更新！

有关所有功能和错误修复，请查看 Svelte 和 Sapper 的更新日志。

Svelte 展示

• 这个 CustomMenu 示例 演示了如何替换操作系统的右键菜单
• GitHub Tetris 让你在 git 提交历史中玩类俄罗斯方块游戏
• Who are my representatives? 是一个用 Svelte 构建的网站，帮助美国居民获取更多关于其国会代表的信息
• Pick Palette 是用 Svelte 制作的调色板管理器！

深入学习：

• Svelte 3 Up and Running 是一本关于使用 Svelte 3 构建生产就绪的静态网络应用的新书
• Sapper 教程（速成课程） 详细讲解了 Sapper（基于 Svelte 的应用框架）的来龙去脉
• Svelte Society Day France 于 9 月 27 日举行，涵盖了各种主题，全程法语！你可以在这里找到完整录像。

即插即用组件：

• svelte-zoom 为桌面和移动设备带来”近乎原生”的图片平移和缩放
• svelte-materialify 是一个拥有超过 50 个组件的 Svelte Material 组件库
• svelte-undoable 使用 bind: 轻松引入撤销和重做功能
• 这个 Tilt 组件 实现了一个常见的用户体验模式，悬停元素会倾斜跟随鼠标

本月发布了大量 JS 技术使用示例：

• Sapper 与 PostCSS 和 Tailwind 的集成
• PrismJS（代码块语法高亮）
• Filepond（拖放文件上传）
• Ionic（UI 组件）
• Pell（所见即所得编辑器）
• Leaflet（地图）

提醒：有一个 Svelte integrations 仓库，展示了将 Svelte 整合到你的技术栈中的方法（反之亦然）。如果你对如何将特定技术与 Svelte 一起使用有疑问，你可能会在那里找到答案...如果你已经成功让某些技术与 Svelte 一起工作，请考虑贡献！

要了解更多精彩的 Svelte 项目，请查看 Svelte Society、Reddit 和 Discord...并一定要发布你自己的项目！

下月再见！

顺便说一下，Svelte 现在有了 OpenCollective！所有捐款和支出都在我们透明的公共账本中公布。了解谁在捐款、金额多少、资金去向、提交支出、获得报销等等！