Skip to main content

Svelte 的最新动态: 2022 年 11 月

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

Dani Sandoval

对于 Svelte 社区来说，刚刚过去的 10 月是忙碌的一个月。在 SvelteKit 中，use:enhance 和高级路由得到了许多改进，而 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 示例：之前，之后）
  • 组件事件处理器现在支持“nullish”值（3.51.0，示例）
  • 作用域样式现在可以应用于 <svelte:element>（3.51.0，示例）
  • 现在可以在行内样式标签中使用 important： style:foo|important（3.52.0，#7365）
  • 使用 <a target="_blank"> 而未指定 rel="noreferrer" 时，现在会抛出警告（3.52.0，#6188）

Tom Smykowski 还发布了一篇很棒的总结，介绍了 3.52.0 中的所有变化！想了解 Svelte 编译器的所有更改，包括即将到来的变更，请查看 CHANGELOG。

社区展示

使用 Svelte 构建的应用和网站

  • AttendZen 是一个面向现场、虚拟或混合活动的活动管理和营销平台
  • Gram Jam 是一个基于 SvelteKit 的具有挑战性的每日文字游戏
  • Collabwriting 是一个面向团队的可操作知识库
  • Dazzle 是一个由 Svelte & DallE 构建的益智游戏
  • Figma Autoname 插件 可一键自动命名你的 Figma 图层
  • DECK 是适用于 MacOS、Ubuntu 和 Windows 的高性能本地 web 开发工作室
  • Asm editor 是一个编写和运行 m68k 汇编代码的 web 应用
  • Nucleus 是一个具有简洁易用界面的文本编辑器，灵感来自 VS Code、Atom、Fleet 等
  • Observer 是 Arth Panel 的前端界面，该项目是一个开源且自托管的 Minecraft 服务器面板
  • .PLAN 是一个基于云的支持 Markdown 和分区的笔记应用
  • Stablecog 是一个简单、免费且开源的 AI 图像生成器
  • FreeSpeech AAC 是一个使用 TypeScript 编写的免费开源辅助通信应用
  • sqrdoff 是一个和朋友一起享受玩的点线盒游戏
  • itty 是一个重新定义传统链接缩短服务的工具
  • splits 可帮助你追踪分段、计算比赛配速，让你成为更好的运动员
  • Weaver 是一个用于创建 编织草稿 的应用

学习资源

视频

文章

库、工具和组件

  • Threlte 是一个 Svelte 组件库，可声明式构建和渲染 three.js 场景并在 Svelte 应用中以状态驱动的方式使用。我们再次特别介绍了它的新“Playground”按钮功能
  • Svelte Turnstile 是一个库，将 Cloudflare 的 Turnstile（新的 CAPTCHA 替代方案）集成到 Svelte 应用中
  • ActionStore 允许你通过 ActionCable 直接将数据推送到 Svelte stores
  • SvelteKit + <is-land> 是一个 SvelteKit 中部分水合的实验性项目，使用 @11ty/is-land
  • Svelte Color Select 是一个基于 OKLab 感知色彩空间的 Svelte’s OKhsv 颜色选择器组件
  • svelte-awesome-color-picker 是一个高度可定制的颜色选择器组件库
  • rx-svelte-forms 创建了一个受 Angular Reactive Forms 启发的响应式 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 是一个支持触摸手势（缩放、旋转、平移）以及鼠标拖拽和右键旋转的图像和视频裁剪窗口组件
  • Open Graph Image Generation 允许你在 SvelteKit 中无需浏览器通过 HTML/CSS 动态生成 Open Graph 图片
  • Svelte Tap Hold 是一个为 Svelte/SvelteKit 提供极简主义点击并按住操作的组件
  • svelte-copy 的新版本允许你自定义触发文本复制到剪贴板的事件

UI 套件、集成和启动模板

有趣的项目

这就是本月的内容！如果我们遗漏了什么，请在 Reddit 或 Discord 上告诉我们。

下个月见 👋