Svelte 十月更新

欢迎来到我们“Svelte 新闻”系列的第一期！我们将尝试将其制作成每月一篇的博客文章，您将在其中了解新功能、错误修复以及来自社区的 Svelte 项目展示。

新功能

1. use:obj.method 允许在对象内定义的函数在 action 中使用（示例，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<{
		/**
		 * you can also add docs
		 */
		checked: boolean; // Will translate to `CustomEvent<boolean>`
		hello: string;
	}>();

	// ...
</script>

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

Sapper 新闻！

Sapper 0.28.9 刚刚发布。其亮点包括对 CSP nonce 的更好支持、导出页面的资产预加载支持，以及错误详细信息现在在错误页面上的 $page 存储中可用。

此外，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 提交历史记录中玩类似俄罗斯方块的游戏
• 我的代表是谁？ 是一个使用 Svelte 构建的网站，帮助美国居民了解有关其国会代表的更多信息
• Pick Palette 是一个使用 Svelte 制作的调色板管理器！

深入学习：

• Svelte 3 Up and Running 是一本关于使用 Svelte 3 构建生产就绪静态 Web 应用的新书
• Sapper 教程（速成课程） 逐步介绍了 Svelte 驱动的应用程序框架 Sapper 的来龙去脉
• Svelte Society Day France 于 9 月 27 日举行，涵盖了各种主题，全部用法语！您可以在此处找到完整记录。

即插即用组件：

• svelte-zoom 为台式机和移动设备上的图像带来了“几乎原生”的平移和缩放功能
• svelte-materialify 是一个 Svelte 的 Material 组件库，包含 50 多个组件
• svelte-undoable 使用 bind: 使引入撤消和重做功能变得容易
• 此 Tilt 组件 实现了一个常见的 UX 模式，其中悬停元素倾斜以跟随鼠标

本月发布了许多关于如何使用 JS 技术的示例：

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

提醒：有一个Svelte 集成存储库 演示了将 Svelte 集成到您的技术栈（反之亦然）的方法。如果您对如何将特定技术与 Svelte 结合使用有任何疑问，您可能会在那里找到答案……如果您成功地将某些东西与 Svelte 结合使用，请考虑做出贡献！

有关更多精彩的 Svelte 项目，请查看Svelte Society、Reddit 和Discord……并确保发布您自己的项目！

下个月见！

顺便说一句，Svelte 现在有一个OpenCollective！所有贡献和所有支出都发布在我们的透明公共分类账中。了解谁在捐款、捐款多少、资金流向何处、提交支出、获得报销等等！