跳至主要内容

Svelte 11 月更新

SvelteKit 和 Svelte 中更好的表单、路由和内联样式

Dani Sandoval

对于 Svelte 社区来说，10 月份非常忙碌。use:enhance 和高级路由在 SvelteKit 中获得了一些很棒的改进，而 Svelte 编译器发布了一个小版本来改善日常开发体验。

还有一个巨大的展示案例要介绍……所以让我们开始吧！

SvelteKit 的新功能

  • use:enhance 的新 update 方法允许您轻松地找回默认的表单行为，同时用您自己的逻辑增强它（文档、#7083 和 #7326）
  • 路由现在可以使用 [[optional]] 参数了（文档、#7051）
  • goto 现在拥有 invalidateAll，用于（重新）运行属于新活动页面的所有 load 函数（文档、#7407）
  • config.kit.paths.base 现在用于适配器查找静态资产 - 修复了 adapter-netlify、adapter-vercel、adapter-cloudflare 和 adapter-cloudflare-workers 中的 404 问题（#4448）

重大更改：

  • 当路由冲突时，现在将抛出错误（#7051）
  • 预渲染时已删除全局 fetch 覆盖（#7318）
  • 路由 ID 已添加 / 前缀（#7338）

Svelte 更改

  • 新的辅助功能警告 a11y-click-events-have-key-events 和 a11y-no-noninteractive-tabindex 现在将在您的组件缺少必需的关键事件或 tabindex 时发出警告。而 a11y-role-has-required-aria-props 将不再在元素与其语义角色匹配时发出警告（3.51.0）
  • <svelte:component> 和 <svg> 现在支持 --style-props（3.51.0，组件示例：之前 和 之后，SVG 示例：之前 和 之后）
  • 现在支持组件事件处理程序的“空值”值（3.51.0，示例）
  • 现在可以将作用域样式应用于 <svelte:element>（3.51.0，示例）
  • 您现在可以在内联样式标签中使用 important：style:foo|important（3.52.0，#7365）
  • 在不使用 rel="noreferrer" 的情况下使用 <a target="_blank"> 时，现在将抛出警告（3.52.0，#6188）

Tom Smykowski 还发布了关于3.52.0 中所有更改的精彩总结！有关 Svelte 编译器的所有更改（包括即将发生的更改），请查看更改日志。

社区展示

使用 Svelte 构建的应用和网站

  • AttendZen 是一个用于面对面、虚拟或混合活动的活动管理和营销平台
  • Gram Jam 是一款使用 SvelteKit 的具有挑战性的每日文字游戏
  • Collabwriting 是您团队的实用知识库
  • Dazzle 是一款使用 Svelte 和 DallE 制作的益智游戏
  • Figma Autoname 插件 可一键自动命名您的 Figma 图层
  • DECK 是一款适用于 macOS、Ubuntu 和 Windows 的功能强大且高性能的本地 Web 开发工作室
  • Asm 编辑器 是一款用于编写和运行 m68k 汇编代码的 Web 应用程序
  • Nucleus 是一款文本编辑器，其简洁易用的用户界面灵感来自 Visual Studio Code、Atom、Fleet 等
  • Observer 是 Arth Panel 的前端，Arth Panel 是一个开源且自托管的 Minecraft 服务器面板
  • .PLAN 是一款基于云的笔记应用，支持 Markdown 和分段
  • Stablecog 是一款简单、免费且开源的 AI 图片生成器
  • FreeSpeech AAC 是一款用 TypeScript 编写的免费开源辅助通信应用程序
  • sqrdoff 是一款井字游戏，可以与朋友一起玩
  • itty 是对传统缩短链接的新尝试
  • splits 允许您跟踪您的分段时间、计算您的比赛配速，成为一名更好的运动员
  • Weaver 是一款用于创建织造图的应用程序

学习资源

观看

阅读

库、工具和组件

  • Threlte 是一个用于 Svelte 的组件库，用于在 Svelte 应用中声明式和状态驱动地构建和渲染 three.js 场景。再次推荐它是为了突出其示例中的新“游乐场”按钮
  • Svelte Turnstile 是一个将 Cloudflare 的 Turnstile（一种新的 CAPTCHA 替代方案）集成到 Svelte 应用中的库
  • ActionStore 允许您通过 ActionCable 将数据直接推送到 Svelte 存储中
  • SvelteKit + <is-land> 是使用 @11ty/is-land 在 SvelteKit 中进行部分水化的实验
  • Svelte Color Select 是一个用于 Svelte 的 Okhsv 颜色选择组件，使用 OKLab 感知颜色空间
  • svelte-awesome-color-picker 是一个高度可定制的颜色选择器组件库
  • rx-svelte-forms 创建了受 Angular 反应式表单启发的反应式 Svelte 表单
  • svelte-wc-bind 可以在 Svelte Web 组件中实现双向数据绑定
  • svelte-preprocess-style-child-component 允许您使用类似于 CSS Shadow Parts 的语法来设置子组件内部元素的样式
  • unplugin-svelte-components 允许按需组件自动导入 Svelte
  • sveltekit-search-params 旨在成为在 SvelteKit 中读取和写入查询搜索参数的最快方法
  • svelte-crop-window 是一个用于图像和视频的裁剪窗口组件，支持触摸手势（捏合缩放、旋转、平移），以及鼠标滚轮缩放、鼠标拖动图像和右键单击旋转
  • 开放图谱图像生成 允许您在 SvelteKit 中从 HTML/CSS 动态生成开放图谱图像，无需浏览器
  • Svelte Tap Hold 是一个用于 Svelte/SvelteKit 的极简主义点击并按住组件
  • svelte-copy 的新版本允许您自定义导致文本复制到剪贴板的事件

UI 套件、集成和启动器

有趣的库

本月就到这里了！如果你发现我们错过了什么，请在 Reddit 或 Discord 上告诉我们。

下个月见 👋