Skip to main content

Svelte 的最新动态：2023 年 3 月

SvelteHack，大量 SvelteKit 1.0 之后的改进，以及一个大型案例展示

Dani Sandoval

3 月份以火热的姿态来临，自 SvelteKit 1.0 发布以来，已经新增了许多重要功能。详情请查看上周的博文。

Svelte Society 在上个月还启动了 SvelteHack，总奖金超过 $12,000 —— 邀请所有新老 Svelte 开发者赶在 4 月 17 日截止日期之前制作一些令人惊艳的作品！

另外，如果你还不知道的话，又一场 Svelte Summit 即将到来！访问 SvelteSummit.com 并订阅新闻邮件以获取下一次活动的最新资讯 📬

现在让我们一起看看本月的所有变化……

SvelteKit 的最新动态

  • $app/paths 现在可以在没有应用的情况下使用——这使得组件测试（例如使用 Vitest 和 Storybook 等）变得更加简单 (1.4.0, #8838)
  • 适配器现在可以在路由级别进行配置 (1.5.0, 文档, #8740)
  • 新的快照机制在导航和页面重载后仍可保留临时 DOM 状态 (1.5.0, 文档, #8710)
  • OPTIONS 方法现在可以在服务器方法中使用 (1.6.0, 文档, #8731)
  • 添加了更丰富的错误消息以处理无效的导出 (1.7.0, #9055)
  • 服务器的加载函数现在支持流式 Promise (1.8.0, 文档, #8901)
  • 新的配置选项 preloadStrategy 可帮助优化预加载，从而避免某些浏览器上的导入“瀑布现象” (1.8.4, 文档, #9179)
  • 新增 paths.relative 选项，用于控制 paths.assets 和 paths.base 的解释方式 (1.9.0, 文档, #9220)

Svelte 和开发工具的最新动态

  • svelte.dev 的 REPL 现在支持 package.json 中的 exports 字段 (#445)
  • 新的调用层级功能允许你查看函数或类的被调用位置，并向上追踪调用堆栈 (extensions-107.1.0, #1889)
  • Svelte 扩展添加了对 declarationMap 的支持。现在，当一个库含有声明映射时，.svelte 文件上的“跳转到定义”功能将导航到源代码 (extensions-107.1.0, #1878)
  • TypeScript 内联提示 现已通过 Svelte 扩展支持。通过 javascript.inlayHints.* 或 typescript.inlayHints.* 启用它们 (extensions-107.1.0, #1855)

* 关于 Svelte 编译器的所有更改，包括未发布的更改，请查看 CHANGELOG。

社区展示

使用 Svelte 构建的应用和网站

  • win32.run 是一个运行在浏览器中的 Windows XP 模拟器——包含文件系统、程序、XP 风格文件选择器与保存框、第三方程序等
  • Svelte Radial Menu 是一个基于 Rauno 的径向菜单 的实验性径向菜单项目
  • apod color search 允许你按颜色搜索“每日天文图片”（APOD）
  • SvHighlight 是一个用于 SvelteKit 和 TailwindCSS 的代码高亮工具，支持模糊和聚焦模块
  • Limey 让你可以在几分钟内创建出漂亮的一页式网站
  • a/links 是一个支持短链接、可组合书签的扩展
  • Sprint Cards 是一个设计挑战生成器
  • Plought 是一个用于减少决策噪声的工具
  • ArcOS-Frontend 是 Arc 操作系统前端的 Svelte 重写版
  • Poxi 是一个用户生成网页的拖放式、可绘制的网站编辑器，支持多人协作
  • demo-threlte-scroller-rocinante 是一个结合 svelte-sequence 和 Threlte 的“滚动叙述”概念验证
  • Phonics + Stuff 是一系列学习和教学语音学的资源

学习资源

由 Svelte 贡献者与大使提供

观看或收听

阅读

库、工具和组件

UI 套件和组件

  • Pink 是一个与框架无关的设计系统，由 Appwrite 提供
  • quick-pick 是一个简单的搜索工具，你可以自主控制搜索目录
  • Grail UI 提供了一组组件基础、动作和工具，帮助你更快地构建可访问且高质量的 Svelte 应用，提供出色的开发者体验
  • svelte-image-comparison 是一个用于比较图片或画布元素的 Svelte 组件
  • simple-font-select 是一个简单的字体选择组件，展示本地字体作为 CSS 字体族
  • svelte-datatables-net 是一个将数据转换为交互式 HTML 表格的 Svelte 组件
  • svelte-flextable 是一个用于创建服务器端处理数据表格组件的工具包
  • svelte-algolia-instantsearch 是一个社区开发的 instantsearch.js 的 Svelte 包装器
  • svelte-deep-zoom 是一个用于呈现交互式深度缩放图像（切片图像金字塔）的 Svelte 组件
  • SVoast 是一个 Svelte 简单的 toast 组件
  • svelte-otp 是一个简单轻量的 Svelte OTP 输入组件
  • trace-svelte 是一个 Svelte 的逐行高亮工具
  • Svelte Auth UI 是一个 Svelte 的身份验证组件集合
  • KitDocs 是一个 SvelteKit 的文档集成工具 - VitePress 的替代方案
  • svelte-signature-pad 是一个 Svelte 动作，用于捕获平滑签名并将其渲染为 SVG 路径，使用了出色的 perfect-freehand 库

辅助工具、存储与动作

其他酷工具

  • sveltekit-modal 允许在 SvelteKit 中使用 Modal 编写 Python 端点
  • svelte-kit-bot-block 是一个服务器钩子，用于处理 SvelteKit 的垃圾请求
  • Svelte Email 允许你使用 Svelte 编写和设计电子邮件模板，并将其渲染为 HTML 或纯文本
  • Inertia.js 允许你使用经典的服务器端路由和控制器快速构建现代单页面 React、Vue 和 Svelte 应用
  • svelte-adapter-bun 是一个 SvelteKit 的适配器，用于生成独立的 Bun 服务器
  • React in Svelte 是一个允许你在 Svelte 中使用 React 组件的库
  • SvelteKit Redis 会话管理器 是 SvelteKit 中用于会话管理的 Redis 集成

感谢阅读！别忘了试试 Svelte Hackathon！

如果我们遗漏了什么，可以在 Reddit 或 Discord 上告诉我们！