跳至主要内容

Svelte 3 月更新

SvelteHack、1.0 后 SvelteKit 改进和大型展示

Dani Sandoval

3 月份 SvelteKit 在 1.0 发布后添加了许多重要功能。查看上周的博文以了解更多详细信息。

Svelte Society 上个月还推出了SvelteHack，奖金超过 12,000 美元——邀请所有 Svelte 开发人员（新老皆宜）在 4 月 17 日截止日期前创造一些很棒的东西！

此外，如果您还没有听说，将会有另一场 Svelte 峰会！访问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）
  • 通过 Svelte 扩展现在可以使用TypeScript 内联提示。使用 javascript.inlayHints.* 或 typescript.inlayHints.* 启用它们（extensions-107.1.0，#1855）

*有关 Svelte 编译器的所有更改（包括未发布的更改），请查看更改日志。

社区展示

使用 Svelte 构建的应用和网站

  • win32.run 是浏览器中的 Windows XP 版本——带有文件系统、程序、XP 风格的文件选择器和保存对话框、第三方程序等等
  • Svelte Radial Menu 是一种径向菜单实验——基于Rauno 的径向菜单
  • apod 颜色搜索 允许您按颜色搜索每日天文图片 (APO) 照片
  • SvHighlight 是一个用于 SvelteKit 和 TailwindCSS 的代码高亮器，带有模糊和聚焦块
  • Limey 允许您在几分钟内创建精美的单页网站
  • a/links 是一个用于简短、可组合书签的扩展
  • Sprint Cards 是一个设计挑战生成器
  • Plought 是一种减少决策噪音的工具
  • ArcOS-Frontend 是用 Svelte 重写 Arc 操作系统的前端
  • 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 是一个 Svelte 组件，它将数据转换为交互式 HTML 表格
  • svelte-flextable 是一个用于使用 Svelte 创建服务器端处理数据表组件的工具包
  • svelte-algolia-instantsearch 是一个围绕instantsearch.js 的社区开发的 Svelte 包装器
  • svelte-deep-zoom 是一个用于渲染交互式深度缩放图像（平铺图像金字塔）的 Svelte 组件
  • SVoast 是一个简单的 Svelte 吐司组件
  • svelte-otp 是一个简单轻量级的 Svelte OTP 输入组件
  • trace-svelte 是 Svelte 的逐行高亮器
  • Svelte Auth UI 是一组用于 Svelte 的身份验证组件
  • KitDocs 是 SvelteKit 的文档集成——Svelte 的 VitePress 替代方案
  • svelte-signature-pad 是一个 Svelte 操作，用于使用出色的perfect-freehand 库将平滑的签名捕获为 SVG 路径

帮助程序、存储和操作

  • SvelteKit-Document 是一个用于 SvelteKit 的微型实用程序，允许您从任何页面或布局更改 <html>、<head> 和 <body> 标签——并提供完整的 SSR 支持
  • SvelteKit 表单数据 是一个自动的 SvelteKit 表单数据解析器中间件
  • sveltekit-superforms 通过大量的生活质量特性为您的 SvelteKit 表单增压。据称是一个“功能强大的库”
  • Houdini——SvelteKit 的“消失”GraphQL 客户端——现在已发布 1.0 版本
  • sveltekit-modal-langchain 是一个使用sveltekit-modal 的 SvelteKit 示例项目，展示了在 SvelteKit 中编写 Python 端点是多么容易

  • mdsvex-excerpt 允许您在某些布局中仅显示文档的一部分
  • Svelte Action Balancer 是一个简单的 Svelte action，使标题更易读
  • svelte-object 帮助使用组件创建和维护对象。值是存储，因此可以直观地订阅和更新
  • svelte-relative-time 是一个微小的 Svelte action 和组件，用于渲染相对时间
  • svelte-disable-preload 是一个简单的 action，用于将空操作事件侦听器应用于元素，以防止调用文档级 SvelteKit 事件处理程序
  • SvelteKit 静态站点地图 在构建期间为您的页面生成 sitemap.xml
  • svelte-intersection-observer-action 是一个 Svelte action，用于使用 IntersectionObserver 进行元素位置通知
  • svelte-sequence 提供自定义存储，以跨多个步骤组合缓动运动序列
  • @svelte-put/inline-svg 是一个 Svelte action，用于内联动态 SVG（从网络获取）

其他酷炫工具

  • sveltekit-modal 允许您使用 Modal 在 SvelteKit 中编写 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 Session Manager 是 SvelteKit 中用于会话管理的 Redis 集成

感谢您的阅读！别忘了尝试一下 Svelte Hackathon！

如果您发现我们遗漏了任何内容，请随时在 Reddit 或 Discord 上告诉我们