Svelte 新闻：2021 年 3 月

本月 Svelte 生态系统发布了很多内容。最重要的是，Svelte Summit Spring 2021 正在 公开征集演讲嘉宾。截止日期为 3 月 14 日，如果您有演讲的想法，请立即提交！

让我们深入了解一下新闻 🐬

sveltejs/svelte 中的新增功能

• SSR 存储处理已重新设计为像 DOM 模式一样订阅和取消订阅。SSR 存储现在应该工作得更加一致（3.31.2，请参阅 自定义存储 和 服务器端组件 API ）
• 现在允许在元素上使用同一操作的多个实例（3.32.0，示例）
• 新的 foreign 命名空间应该通过禁用某些特定于 HTML5 的行为和检查，从而更容易为替代编译目标（如 Svelte Native 和 SvelteGUI）提供支持（3.32.0，更多信息）
• 支持来自预处理器的代码中的内联注释源映射（3.32.0）
• 现在允许解构的默认值引用其他变量（3.33.0，示例）
• 自定义元素现在将在连接时调用 onMount 函数，并在断开连接时进行清理（3.33.0，查看 此 PR 以了解有关人们如何将 Svelte 与 Web Components 一起使用的一些有趣讨论）
• 已将 cssHash 选项添加到编译器选项中，以控制用于 CSS 作用域的类名（3.34.0，文档）
• 持续改进 TypeScript 定义

有关包括错误修复和指向 PR 的链接在内的完整更改列表，请查看 更改日志

来自 sveltejs/language-tools 的新增功能

• 对于不支持 didChangeWatchedFiles 的语言服务器客户端，将改为使用回退文件监视器
• 存储访问器和元素指令（如 bind: 和 class:）的新突出显示规则
• 现在可以一起重命名 HTML 标签
• 花括号标签解析现在更加健壮，并且将在更多情况下提供更好的智能提示

尚未尝试过 language-tools？查看 VSCode 的 Svelte 扩展 或查找您喜欢的 IDE 的插件！

来自 sveltejs/* 的其他更改

• eslint-plugin-svelte3 从 3.1.0 版开始支持 TypeScript
• prettier-plugin-svelte 发布了许多次要版本以解决空格和注释修剪问题。
• svelte-preprocess 本月的错误修复包括对 postcss 转换的修复以及对 postcss-load-config 的 v2 和 v3 的支持
• sapper 的 0.29.1 版本修复了类型定义中的一些错误导入，更新了类型以与 express/polka 兼容，并恢复了所有 CSS 文件名的哈希。

---

社区展示

应用程序和网站

• 来自 NYTimes 的 追踪冠状病毒 是 SvelteKit 在生产环境中的一个示例
• Budibase 是一个开源低代码平台，帮助开发人员和 IT 专业人员在自己的基础架构上更快地构建、自动化和交付内部工具。
• Track the Parcel 是一个一站式工具，用于跟踪所有主要包裹快递公司的包裹状态。
• Memo 是电子邮件的替代品，使用 Svelte 进行现代消息传递
• Userscripts Safari 是 Safari 的开源用户脚本编辑器……适用于 Mac OS 的原生 Svelte 应用程序！
• SVGX 是“设计人员和开发人员希望拥有的桌面 SVG 资源管理器”。
• Armoria 是一个程序化纹章生成器和编辑器
• FictionBoard 是一个虚拟桌面 (VTT) 平台，刚刚发布了可填充且响应式的角色表
• Castles & Crusades Treasure Generator 是桌面 RPG：Castles and Crusades 的宝藏生成器。
• NESBit Studio 是一个工具包，有助于开发自制 NES 游戏
• ElectroBlocks 是一个在线 Arduino IDE，带有一个内置模拟器（仅限 Chrome）
• Goblin.life 是一个 3D 世界构建器，其 UI 使用 Svelte 构建
• farmbox 是一家位于阿联酋的杂货配送服务公司
• heroeswearmasks.fun 是一个客户端机器学习工具，用于确定您是否戴着口罩。
• weatherify 是一款非常漂亮（并且 开源）的天气应用程序
• DSN Live 允许您实时监控 NASA/JPL 与行星际航天器任务之间的连接。

演示、库、工具和组件

• spc 是一个用于 Web 的特殊字符选择器组件
• svelte-injector 允许您在 React、Angular、Vue、jQuery、Vanilla JS 中注入 Svelte 组件。
• Felte 是一个 Svelte 的表单库，具有简单的验证报告。
• svelte-use-form 是一个表单库，“易于使用且没有样板代码”。
• Formula 提供“Svelte 的零配置反应式表单”。
• Houdini 是“为 Sapper 和 Sveltekit 构建的消失的 GraphQL 客户端”。
• svelte-split-pane 是一个可拖动的拆分窗格组件
• svelte-virtualized-auto-sizer 是一个高阶组件，可自动调整单个子元素的宽度和高度。
• svelte-window 是用于高效渲染大型可滚动列表和表格数据的组件。
• Svelte 持久存储 是一个 Svelte 存储，可以跨页面和重新加载保留其值
• Svelte Dark 是一个受 svelte.dev REPL 启发的 VSCode 主题
• Import Cost 已更新为支持 Svelte 库，并帮助开发人员控制其捆绑包大小。
• Tree-sitter-svelte 为 svelte 提供 tree-sitter 语法
• Svelte Ripple 是一种不依赖于 @material/ripple 的 Material Design 波纹效果（由 Svelte Discord 中的 @karakara 制作）
• 模拟 SVG 时钟 是缓动函数的一个很好的例子（由 Svelte Discord 中的 @tonmcg 制作）
• 控制台日志样式器 允许您使用伪 HTML 和 CSS 生成样式化的控制台日志（由 Svelte Discord 中的 @EmNudge 制作）
• svelte-heroicons 是 Heroicons 图标库的便捷包装器
• supabase-ui-svelte 是 Supabase 身份验证的 UI 组件

您有自己的 Svelte 组件要分享吗？ 将您自己的组件提交 到 Svelte Society 网站上的 软件包 列表中。

学习资源和入门

• 非官方SvelteKit 文档 使用 SvelteKit 构建，并且 开放供贡献
• 📦 Svelte Store 由 lihautan 提供的课程涵盖了 Svelte Store 的基础知识和最佳实践。
• Svelte 事件 由 WebJeda 解释了如何使用 on: 等指令来监听 DOM 事件。
• 如何在您的 Svelte 应用程序中设置受保护的路由 描述了如何对用户进行身份验证以访问您的路由
• 使用 Fauna 的流式传输功能使用 Svelte 构建聊天 演示了如何设置和配置 Fauna 以使用 Svelte 构建实时聊天界面
• 将 TakeShape 与 Sapper 一起使用 演示了如何将 TakeShape CMS 与 Sapper 连接
• YastPack 是另一个 Snowpack-Svelte-TailwindCss-Routify 模板包
• S2T2 是一个 Snowpack + Svelte + TailwindCSS + TypeScript 模板
• tonyketcham/sapper-tailwind2-template 是一个带 Tailwind 2.0、TypeScript、ESLint 和 Prettier 的 Sapper 模板

下个月见！

有要补充的吗？加入我们，访问 Svelte Society、Reddit 和 Discord！