Svelte 新闻：2020 年 12 月

这是今年最后一期“Svelte 新闻”，有很多值得庆祝的事情！本月的报道包括来自rollup-plugin-svelte、Sapper和SvelteKit的更新，以及来自 Svelte 社区的众多展示案例！

新功能和重大错误修复

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 的博客文章，可以在这里找到！

有关所有功能和错误修复，请参阅Svelte和Sapper的变更日志。

---

社区展示

应用程序和网站

• narration.studio（仅限 Chrome）是一个用于语音旁白音频录制和编辑的自动浏览器内平台。
• Vippet是一个用于浏览器的视频录制和编辑工具。
• Pattern Monster是一个简单的在线图案生成器，用于创建可重复的 SVG 图案。
• 植物性饮食是世界自然基金会 (WWF) 使用 Svelte 构建的一个网站。
• johnells.se是一个瑞典时尚电子商务网站，使用Crown构建，这是一个基于 Svelte 的框架。
• sentence-length是一个学习和分析工具，用于展示一些作者如何使用不同的长度，而另一些作者则坚持使用一种长度。
• svelte-presenter允许你使用 Svelte 和 mdsvex 快速制作美观的演示文稿。

演示

• u/loopcake 使 SSR 在 Java Spring Boot 中工作，适用于所有希望在服务器端渲染 Svelte 的 Java 开发者。
• svelte-liquid-swipe展示了一种使用 svg 路径的精美交互模式。
• 交叉淡入淡出链接动画演示了如何使用交叉淡入淡出在导航链接之间进行动画（由 Discord 社区的 Blu 制作）
• 剪辑路径过渡展示了如何使用剪辑路径和自定义过渡来创建神奇的进出过渡（由 Discord 社区的 Faber 制作）

学习资源

• lihautan一直在制作易于理解的视频，分享他对 Svelte 的深入了解。
• 从构建静态站点生成器中汲取的经验教训分享了 Elder.js 背后的故事和思考过程，以及在此过程中做出的设计决策。
• Svelte 教程和项目课程是由 John Smilga 在 Udemy 上开设的一门课程，学生们通过构建有趣的项目来学习 Svelte.js。
• 在 IPFS 上构建粘贴板 - 使用 FastAPI、Svelte 和 IPFS解释了如何制作一个分布式的类似粘贴板的应用程序。

组件、库和工具

• svelte-crossword是 Svelte 的一个可自定义的纵横填字游戏组件。
• svelte-cloudinary使 Svelte（包括 TypeScript 和 SSR 支持）轻松集成 Cloudinary。
• Svelte Nova扩展了新的 Nova 编辑器以支持 Svelte。
• saos是一个小型 Svelte 组件，用于在滚动时为你的元素设置动画。
• Svelte-nStore是一个通用的存储替换，它满足 Svelte 存储契约并添加了 getter 和计算功能。
• svelte-slimscroll是一个 Svelte 动作，它将任何 div 转换为带有一个漂亮滚动条的可滚动区域。
• svelte-typewriter是 Svelte 应用程序的一个简单且可重复使用的打字机效果。
• svelte-store-router是 Svelte 的一个基于存储的路由器，它建议路由只是另一种全局状态，而 History API 更改只是此状态的可选副作用。
• Routify刚刚发布了其 Svelte 路由器的 2.0 版本。
• svelte-error-boundary为 Svelte 提供了一个简单的错误边界组件，可以与 DOM 和 SSR 目标一起使用。
• svelte2dts从 svelte 文件生成 d.ts 文件，创建真正可共享且类型良好的组件。

下个月见！

有没有想添加到展示案例的想法？想更多地参与 Svelte？我们一直在寻找维护者、贡献者和狂热爱好者……查看Svelte Society、Reddit和Discord以参与进来！

今年就到这里了，各位！1 月份见 😎