跳至主要内容

Svelte 八月 2024 新特性

显著的 hydration 改进，可自定义的警告，以及一个新的 API：createRawSnippet

Dani Sandoval

Svelte 5 版本的发布准备工作导致了性能和自定义功能方面的一系列重大改进。本月总结还包括：一些小的 SvelteKit 更新和 Svelte Dev Vlog 的回归。

让我们深入了解一下！

Svelte 新特性

下面，您将找到 Svelte 5 发行说明中的亮点（目前处于 候选版本）

  • 重大更改：svelte/reactivity 帮助器的名称已更新为包含 Svelte 前缀（5.0.0-next.169，文档 #12248）
  • 分支效果现在具有更好的 DOM 边界 - 减少了 {#each} 块和 DOM 操作期间的错误（5.0.0-next.171 和 5.0.0-next.182，#12215，#12258，#12383）
  • 单遍 hydration 减少了 DOM 大小并显著提高了 hydration 速度（5.0.0-next.179，#12335，#12339）
  • 重大更改：过渡现在默认在挂载时播放（5.0.0-next.177，#12351）
  • 当启用 css: 'injected' 编译器选项时，CSS 现在可以包含在 <head> 中。这使得在渲染电子邮件和 OG 卡等内容时包含样式变得非常简单，并且极大地简化了玩具设置，在这些设置中，您不必费心弄清楚如何将 CSS 从编译器放入服务器渲染的 HTML 中（5.0.0-next.180，文档，#12374）
  • Svelte 现在将在开发环境中针对 {@html ...} 块 hydration 不匹配发出警告（5.0.0-next.182，#12396）
  • 新的 warningFilter 编译器选项允许您禁用整个应用程序的某些警告，而无需在任何地方添加 svelte-ignore 注释（5.0.0-next.186，#12296）
  • 新的 createRawSnippet API 允许在 Svelte 模板之外以低级别创建程序化代码片段（5.0.0-next.189，文档，#12425）

SvelteKit 及其他新特性

  • HTML 属性 enctype 和 formenctype 现在已针对使用 use:enhance 的表单生效（此外，变更日志 中还修复了一些其他错误）
  • cloudflare、cloudflare-workers、netlify 和 vercel 适配器都已更新，以便在捆绑时复制 .eot、.otf、.ttf、.woff 和 .woff2 字体文件（变更日志）
  • svelte-preprocess 是几乎每个 Svelte 项目中使用的工具，现在已无依赖项！团队已逐渐将其从 5.0.0 版本中的 44 个依赖项减少到最新版本中的零个（推文）
  • 预渲染重定向现在将追加到 Cloudflare Pages 适配器中的 _redirects 文件（[email protected]，#12199）

社区展示

使用 Svelte 构建的应用和网站

  • StackOverflow 2024 开发人员调查 结果网站使用 Svelte 构建。更好的是，结果显示，73% 使用过它的开发人员希望继续使用 Svelte（更多信息请查看此 推文）
  • azigy 是一款实时多人问答和琐事应用程序
  • on-device-transcription 是一款即用型、极简的应用程序，可将任何语音转换为文本
  • Whispering 是一款开源转录应用程序，提供全局语音到文本功能
  • Frogment 是一个 OpenAPI 规范编辑器
  • SticAI Glance 将 reddit 帖子总结为可操作的见解
  • Over Rice 跟踪纽约市最好的清真食品小吃车
  • earbetter 是一款用于演奏和编程音乐和音频的耳部训练器和工具
  • Moonglow 是一款使用 GPGPU 的深度行星模拟器
  • opml-editor 是一款在线 OPML 编辑器，旨在更轻松地管理订阅列表
  • Praxis 是一款 AI 驱动的交易日志，可分析您的交易并揭示模式
  • Lokal 允许您使用公共和 https .local 地址共享您的本地主机
  • formcrafts 允许您创建令人难以置信的表单，例如申请表、潜在客户生成表单、调查问卷、付款表单等
  • Shootmail 是一个基于模板的邮件平台，具有计划和分析功能
  • Supersaw 是一个开源的基于 Web 的数字音频工作站 (DAW)

学习资源

Svelte 贡献者和大使

阅读

观看

库、工具和组件

  • Sveaflet 是一个开源地图组件库
  • Svelte Magic UI 是使用 Tailwind CSS、Tweened、Spring 和 Svelte Motion 构建的组件
  • Figblocks 是一个开源 UI 组件库，用于使用 Svelte 构建 Figma 插件
  • VS Code 支持自定义选项卡标签（对于尚未设置的人来说是一个很好的提醒）
  • Storybook 发布了 @storybook/addon-svelte-csf 的预发布版本，并支持 Svelte v5。如果您正在使用它，请在他们的 RFC 上分享您的反馈：storybookjs/addon-svelte-csf#191
  • sveltekit-search-params 发布了 v3.0.0 版本，并改进了类型
  • optimistikit 进行了改进，以完全支持 v1.0.0 版本中的 runes，同时保留 @legacy 标签，如果您仍然无法从存储中更新

本月就到这里了！如果您发现我们错过了任何内容，请在 Reddit 或 Discord 上告知我们。

下个月再见 👋