Skip to main content

Svelte 的新功能：2022 年 10 月

Svelte 峰会，use:enhance，以及 SvelteKit 的候选发布版！

Dani Sandoval

本月有许多更新……从 Svelte 和 SvelteKit 新特性到一个为期两天的 峰会！此外，Svelte 插件迎来了新的有用工具、新的无障碍（a11y）警告，Tan Li Hau 教我们如何构建自己的 Svelte 以及一个用 Svelte 构建的电子表格 😎。

Svelte 峰会发生了什么？

很多事情！以下是每场直播的所有演讲内容和具体时间戳。峰会的剪辑视频将很快发布到 Svelte Society 的频道中，所以如果你还没有订阅，请点击这里！

第一天

  • 12:31 - 如何在工作中推广 Svelte
  • 33:21 - 用 Svelte 动态实现数据可视化
  • 2:20:36 - 红旗与代码异味
  • 2:53:42 - 提升开发体验（DX）
  • 4:42:41 - Svelte 在 UBS 知识图谱中的应用
  • 5:06:42 - 如何将 React 库迁移到 Svelte
  • 5:45:27 - 在 Svelte 世界中施展 DX 魔法
  • 7:25:39 - 由 Svelte 驱动的数据可视化
  • 7:59:38 - Svelte 的局部 Hydration 提升性能
  • 8:20:49 - 打造未来，快人一步

第二天

  • 24:09 - 讲述滚动式叙述的奥秘
  • 2:02:40 - 我告诉你，我的狗不会跑
  • 2:29:43 - Svelte 的 10 倍提升
  • 3:04:56 - Svemix？再 Svmix？再 Svelte？将 Svelte 引入 Remix 路由器
  • 5:09:39 - 玩转 stores：Svelte 内置状态管理库的互动演示
  • 5:37:06 - 当坚持 Svelte 出错时：我编写过的最糟糕 Svelte 的分析
  • 7:22:05 - 上手 Hooks
  • 7:38:14 - 特别公告*

* 在峰会的最后一场演讲中，Rich Harris 宣布了 SvelteKit 的首个候选发布版！没有计划中的重大更改剩下，团队正努力修复错误并添加 1.0 的剩余特性……

更多 SvelteKit 更新

  • use:enhance 是逐步增强表单的最简单方式（文档，#6633，#6828，#7012）
  • 演示应用已更新，添加了 Sverdle 游戏，Rich 在 Svelte 峰会中展示了此游戏并演示了 use:enhance（#6979）
  • adapter-cloudflare 现在支持 Cloudflare Pages 的 _routes.json 规范（#6530）
  • 通过并行运行资产和页面压缩来改进构建性能（#6710）

重大更改：

  • Node 16.14 现在是运行 SvelteKit 的最低版本要求（#6388）
  • App.PrivateEnv 和 App.PublicEnv 已被生成的类型取代（#6413）
  • %sveltekit.message% 已替换为 %sveltekit.error.message%（6659）
  • App.PageError 现在是 App.Error - 请在你的 hooks 中检查此更改（文档，#6963）
  • externalFetch 现在是 handleFetch 并将在所有 load 中服务器端运行的 fetch 调用中执行（#6565）

有关完整变更列表，请查看 SvelteKit 的 CHANGELOG。

Svelte 更新

  • 新的无障碍（a11y）警告：incorrect-aria-attribute-type、no-abstract-role、interactive-element-to-noninteractive-role 和 role-has-required-aria-props。no-noninteractive-tabindex 和 click-events-have-key-events 即将推出！（3.50.0）
  • 新增 ComponentEvents 和 SveltePreprocessor 类型定义（3.50.0）
  • 在处理大块空白时提升解析速度（3.50.0）
  • 所有 JavaScript 全局对象和函数现在被识别为已知全局对象（3.50.1）

有关 Svelte 编译器的所有变更，包括即将到来的变更，请查看 CHANGELOG。

语言工具中的新功能

  • 更好的代码格式化，优化编辑器建议功能（106.0.0，#1598）
  • 可从上下文菜单或命令面板轻松创建 SvelteKit 路由文件（106.1.0，#1620）

在 Svelte Discord 提问

如果你错过了公告，Svelte Discord 有一个令人兴奋的新功能……论坛！新的 问题频道 利用 Discord 的新论坛功能，帮助社区更好地提问、发现和解答问题！

它可用于所有你在使用 Svelte 时可能遇到的问题，包括使用 SvelteKit、社区库、工具等。尽管提问吧！

社区展示

用 Svelte 构建的应用与网站

  • Timeflow 是一个智能日历和任务管理器，可在事件之间动态安排任务
  • GeoQuest 是一个开源的地理知识游戏
  • Houses Of 是一个展示世界各地特色房屋的项目
  • Greenfield Brewery 是一个快速安装大量 Homebrew casks 的工具
  • Gram Jam 是一个受消除类游戏与 Scrabble 启发的文字拼图游戏
  • Beatbump 是一个注重隐私的 YouTube Music 替代前端
  • RoomOS Device Widgets 是一个在 Kiosk/PWA 模式下展示 RoomOS 设备功能的应用
  • World Seed 是一个在线多人游戏
  • Lirify 是一个在拉脱维亚制作的歌词书写工具
  • Splet Tech Konferencija 是塞尔维亚的一个科技大会，网站十分精美
  • Unbounded 是一个开源可变字体项目，由区块链资助（且网站相当精美）
  • Porter’s Paints 是一个售卖油漆的电商网站
  • CRAN/E 是一个搜索现代 R 包的引擎

学习资源

由 Svelte 团队参与

推荐观看

推荐阅读

库、工具和组件

  • Svelte Fit 是一个极其简单，没有依赖的文字缩放库
  • svelte-switch-case 提供了 Svelte 组件中的 switch case 语法
  • svelte-canvas-confetti 使用一个 canvas 渲染全屏彩纸
  • @slidy/svelte 是一个简单、可配置且可复用的 Svelte 轮播组件，基于 @slidy/core
  • svelte-currency-input 是一个将输入数字动态格式化为本地化货币格式的表单输入
  • Adria 是一个非常简单的表单验证库，支持自动补全和值/类型检查
  • Canopy 是一个用于 Chrome 开发者工具面板的 Svelte 调试应用
  • MenuFramework 是为 alt:V 编写的菜单框架
  • whyframe 赋予 iframe 超能力，使得隔离渲染更为轻松
  • @svelte-put/modal 是一个 Svelte 中的异步、声明式和类型安全的模态框解决方案
  • Kitty 是用于开发安全前端应用的库和处理程序集合
  • svelte-turnstile 是一个适用于 Cloudflare Turnstile 的组件，替代了注重隐私的 CAPTCHA

UI 套件与启动器

哇！这是一次大更新。如果我们遗漏了什么，请在 Reddit 或 Discord 上告诉我们！

下个月再见 👋