Svelte 的最新动态：2020 年 12 月

这是今年最后一期“What’s new in Svelte”，值得庆祝的内容有很多！本月的文章包括 rollup-plugin-svelte、Sapper 和 SvelteKit 的更新以及来自 Svelte 社区的一系列作品展示！

新功能和重要的 Bug 修复

1. $$props、$$restProps 和 $$slots 现在已支持自定义 Web 组件（3.29.5，示例），并且 slot 组件现在支持展开属性：<slot {...foo} />（3.30.0）。
2. 新的 hasContext 生命周期函数使得检查父组件上下文中是否设定了某个 key 变得更加简单（3.30.0 和 3.30.1，文档）。
3. 现在有了新的 SvelteComponentTyped 类，它可以帮助更容易地创建强类型的组件，这些组件可扩展基础的 Svelte 组件。组件库和框架作者有福了！示例：export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {}（3.31.0，RFC）。
4. 在 {:else} 块中的过渡动画现在应该能够顺利完成了（3.29.5，示例）。
5. Svelte 现在包含了一个导出映射，用于明确声明其 npm 包中哪些文件可以被导入（3.29.5，并在 3.29.6、3.29.7 和 3.30.0 中进行了一些修复）。
6. rollup-plugin-svelte 发布了 7.0.0 版本。最大的变化是移除了 css 选项。如果之前使用了该选项，建议添加诸如 rollup-plugin-css-only 的插件，模板中展示了具体使用方法。

Sapper 的动态如何？

许多新的 TypeScript 定义改进已经上线，使得编写 Sapper 应用变得更加简单！动态引入的 CSS 现在也可在 client.js 文件中正常工作。（尚未发布）

SvelteKit 的进展如何？

我们很高兴你问了这个问题！如果你错过了 Rich 上个月早些时候的博文，你可以在这里找到！

所有功能和 Bug 修复的详情请见 Svelte 的 CHANGELOG 和 Sapper 的 CHANGELOG。

---

社区展示

应用和网站

• narration.studio（仅支持 Chrome）是一个自动化的在线音频录制和编辑平台，专注于旁白配音。
• Vippet 是一个用于浏览器的视频录制和编辑工具。
• Pattern Monster 是一个简单的在线图案生成器，用于创建可重复的 SVG 图案。
• Plant-based diets 是世界自然基金会 (WWF) 构建的网站，基于 Svelte 开发。
• johnells.se 是一个瑞典时尚电商网站，基于 Crown 开发——这是一个由 Svelte 驱动的框架。
• sentence-length 是一个学习和分析工具，展示了某些作者如何通过不同长度的句子进行创作，而另一些作者则坚持使用单一的句型。
• svelte-presenter 允许你使用 Svelte 和 mdsvex 快速制作美观的演示文稿。

演示

• u/loopcake 在 Java Spring Boot 中实现了 SSR，为所有想使用 Svelte 服务端渲染的 Java 公司提供了支持。
• svelte-liquid-swipe 展示了如何使用 svg 路径实现一个炫酷的交互模式。
• Crossfade Link Animation 演示了如何使用渐隐实现导航链接之间的动画过渡（由 Discord 社区的 Blu 制作）。
• Clip-Path Transitions 展示了如何使用剪切路径和自定义过渡创建出魔幻的进出场动画（由 Discord 社区的 Faber 制作）。

学习资源

• lihautan 制作了一些简明易懂的视频，分享了他对 Svelte 的深入了解。
• Lessons From Building a Static Site Generator 分享了 Elder.js 的开发背景以及过程中做出的一些设计决策。
• Svelte Tutorial and Projects Course 是 John Smilga 在 Udemy 上的课程，学生可以通过开发有趣的项目来学习 Svelte.js。
• Building Pastebin on IPFS - with FastAPI, Svelte, and IPFS 解释了如何制作一个类似 Pastebin 的分布式应用。

组件、库和工具

• svelte-crossword 是一个可定制的 Svelte 拼字游戏组件。
• svelte-cloudinary 让 Svelte 易于整合 Cloudinary（包括 TypeScript 和 SSR 支持）。
• Svelte Nova 扩展了新的 Nova 编辑器以支持 Svelte。
• saos 是一个小型 Svelte 组件，用于滚动时为元素添加动画效果。
• Svelte-nStore 是一个通用存储替代方案，符合 Svelte 存储合同，同时添加了 getter 和计算功能。
• svelte-slimscroll 是一个 Svelte 动作组件，可以将任意 div 转换为带有美观滚动条的可滚动区域。
• svelte-typewriter 是一个简单且可复用的打字机效果组件，可用于 Svelte 应用中。
• svelte-store-router 是一个基于存储的路由库，建议使用全局状态进行路由管理，History API 的变化只是这种状态的可选副作用。
• Routify 刚刚发布了其 Svelte 路由库的第 2 版。
• svelte-error-boundary 提供了一个简单的错误边界组件，可用于 DOM 和 SSR 目标。
• svelte2dts 从 Svelte 文件生成 d.ts 文件，用于创建真正可共享且类型良好的组件。

下个月再见！

有什么想添加到展示中的想法吗？想更多地参与 Svelte 吗？我们一直在寻找维护者、贡献者和 Svelte 爱好者……访问 Svelte Society、Reddit 和 Discord 来加入我们！

今年的内容到此结束，各位明年一月见 😎