Skip to main content

Svelte 的新动态：2021 年 3 月

Svelte 峰会演讲者招募！改进的 SSR、非 HTML5 编译目标以及 ESLint TypeScript 支持

Dani Sandoval

本月有很多来自 Svelte 生态系统的发布内容需要涵盖。最重要的是，Svelte 2021 年春季峰会正在进行演讲者公开招募。截止日期是 3 月 14 日，如果您有演讲想法，请立即提交！

让我们深入了解这些动态 🐬

sveltejs/svelte 的新动态

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

有关更改的完整列表（包括错误修复和 PR 链接），请访问 CHANGELOG

来自 sveltejs/language-tools 的新功能

  • 对于不支持 didChangeWatchedFiles 的语言服务器客户端，将使用备用文件监视器
  • 新增对 store 访问器和元素指令（如 bind: 和 class:）的语法高亮支持
  • 现在可以一起重命名 HTML 标签
  • 大括号 Mustache 标签解析现在更健壮，可在更多情况下提供更好的智能提示

还没试过 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 文件名的哈希处理。

社区展示

应用 & 网站

  • Tracking the Coronavirus 来自纽约时报的一个 SvelteKit 项目生产实例
  • Budibase 是一个开源的低代码平台，帮助开发人员和 IT 专业人员在自有基础设施上快速构建、自动化和发布内部工具。
  • Track the Parcel 是一个可追踪主要包裹承运商状态的一站式工具。
  • Memo 是一个基于 Svelte 构建的电子邮件替代工具，用于现代化信息传递
  • Userscripts Safari 是一个为 Safari 提供的开源用户脚本编辑器……一个适用于 Mac OS 的原生 Svelte 应用！
  • SVGX 是“设计师和开发者梦寐以求的桌面 SVG 资产管理器”。
  • Armoria 是一个生成和编辑纹章的工具。
  • FictionBoard 是一个虚拟桌面（VTT）平台，刚刚推出了响应式和可填写的角色卡。
  • Castles & Crusades Treasure Generator 是为桌面角色扮演游戏 Castles and Crusades 设计的一个宝藏生成器。
  • NESBit Studio 是一个辅助开发 NES 家庭游戏的工具包。
  • ElectroBlocks 是一个内置仿真器的在线 Arduino IDE (仅支持 Chrome)
  • Goblin.life 是一个 UI 使用 Svelte 构建的 3D 世界构建器
  • 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 Persistent store 是一个 Svelte store，可以在页面刷新后保持值。
  • Svelte Dark 是受到 svelte.dev REPL 启发的 VSCode 主题
  • Import Cost 已更新以支持 Svelte 库，帮助开发者控制打包大小。
  • Tree-sitter-svelte 提供了 Svelte 的 tree-sitter 语法。
  • Svelte Ripple 是一个 Material Design 涟漪效果，不依赖 @material/ripple（由 Svelte Discord 的 @karakara 制作）
  • Analog SVG Clock 是一个用来展示缓动函数的示例（由 Svelte Discord 的 @tonmcg 制作）
  • Console Log Styler 允许您使用伪 HTML 和 CSS 生成样式化的控制台日志（由 Svelte Discord 的 @EmNudge 制作）
  • svelte-heroicons 是 Heroicons 图标库的一个方便封装
  • supabase-ui-svelte 是 Supabase 身份验证 UI 组件

有自己的 Svelte 组件要分享吗？ 提交你的组件 到 Svelte Society 网站上的组件列表。

学习资源和入门模板

下个月见！

有要补充的内容吗？加入我们：Svelte Society、Reddit 和 Discord!