跳至主要内容

Svelte 十月 2022 更新

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 - 增强您的开发体验
  • 4:42:41 - UBS 知识图谱中的 Svelte
  • 5:06:42 - 如何将 React 库迁移到 Svelte
  • 5:45:27 - Svelte 世界中的开发体验魔法
  • 7:25:39 - 由 Svelte 提供支持的数据可视化
  • 7:59:38 - Svelte 中的部分水合以提高性能
  • 8:20:49 - 更快地构建未来

第二天

  • 24:09 - Scrollytell 我为什么：这没什么难的
  • 2:02:40 - 我告诉过你我的狗不会跑的
  • 2:29:43 - 10 倍速 Svelte
  • 3:04:56 - Svemix？Re-svmix？Re-svelte？：将 Svelte 引入 Remix 路由器
  • 5:09:39 - 玩转存储：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 - 在您的钩子中检查它 (文档，#6963)
  • externalFetch 现在是 handleFetch，它将在服务器上运行的 load 中的所有 fetch 调用中运行 (#6565)

有关更改的完整列表，请查看 SvelteKit 的更改日志。

Svelte 更新

  • 针对 incorrect-aria-attribute-type、no-abstract-role、interactive-element-to-noninteractive-role 和 role-has-required-aria-props 的新的 a11y 警告。no-noninteractive-tabindex 和 click-events-have-key-events 即将推出！（3.50.0）
  • ComponentEvents 和 SveltePreprocessor 的新类型 (3.50.0)
  • 遇到大块空白时提高解析速度 (3.50.0)
  • 现在所有全局 JavaScript 对象和函数都被识别为已知全局变量 (3.50.1)

有关 Svelte 编译器的所有更改，包括即将发生的更改，请查看更改日志。

语言工具新增功能

  • 改进编辑器建议的代码格式 (106.0.0，#1598)
  • 从上下文菜单或命令面板轻松创建 SvelteKit 路由文件 (106.1.0，#1620)

在 Svelte Discord 中提问

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

它可以用于您尝试使用 Svelte 完成的任何事情，包括使用 SvelteKit、社区库、工具等。所以尽管问吧！

社区展示

使用 Svelte 构建的应用程序和网站

  • Timeflow 是一款智能日历和任务管理器，可在您的事件之间动态安排您的任务
  • GeoQuest 是一款开源地理游戏
  • Houses Of 是一个展示世界各地有魅力的房屋的项目
  • Greenfield Brewery 是一个快速安装大量自制酒桶的工具
  • Gram Jam 是一款受 match three 游戏和 Scrabble 启发的文字益智游戏
  • Beatbump 是 YouTube 音乐的隐私尊重替代前端
  • RoomOS 设备小部件 是一个用于在 Kiosk/PWA 模式下演示 RoomOS 设备功能的应用程序
  • World Seed 是一款完整的在线多人游戏
  • Lirify 是一款在拉脱维亚制作的歌曲歌词编写 Web 应用程序工具
  • Splet Tech Konferencija 是塞尔维亚的一个技术会议，拥有一个非常漂亮的网站
  • Unbounded 是一款开源可变字体 - 由区块链资助（以及一个外观很棒的网站）
  • Porter’s Paints 是一个使用 Svelte 构建的（您猜对了）油漆电子商务网站
  • CRAN/E 是一个用于现代 R 包的搜索引擎

学习资源

Svelte 团队主演

观看

阅读

库、工具和组件

  • Svelte Fit 是一个极其简单、无依赖项的适应文本库
  • svelte-switch-case 是 Svelte 组件的 switch case 语法
  • svelte-canvas-confetti 使用单个画布渲染全屏彩带
  • @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 套件和启动器

  • QWER 是一个使用 SvelteKit 构建的博客启动器
  • SvelteKit Zero API 在前端和后端之间提供类型安全性，从而构建易于使用的 API 结构
  • sveltekit-monorepo 是一个使用 2022 年技术的单仓库启动器
  • svelte-component-test-recipes 使用 vitest、@testing-library/svelte 和 svelte-htm 来测试那些似乎难以测试的 Svelte 组件

哇！更新真不少。如果您发现我们错过了什么，请在 Reddit 或 Discord 上告诉我们！

下个月见 👋