Skip to main content

Svelte 的最新动态：2022 年 4 月

告别 fallthrough 路由，迎来参数验证器！

Dani Sandoval

本月，我们感受到了 SvelteKit 处理页面属性方式的一些变化。最后一个需要使用 fallthrough 路由的用例——验证参数属性——已经被一个更具体的解决方案所取代。

更多关于这一点，以及 Svelte 的其他新变化，请继续阅读...

SvelteKit 的新变化

  • 参数匹配器允许你在渲染页面之前检查 URL 参数是否匹配——取代了为此目的使用 fallthrough 路由的需求（文档，#4334）
  • 现在可以直接从端点处理显式重定向（#4260）
  • 发布了 svelte-kit sync（#4182）、TypeScript 4.6（#4190）和 Vite 2.9——新增非阻塞依赖优化和开发模式下的实验性 CSS 源映射功能，并带来了一些由 SvelteKit 团队贡献的 bug 修复（#4468）

新的配置选项

  • outDir 修复了 monorepo 中以及其他情况下输出目录为项目目录外时的路径问题（文档，#4176）
  • endpointExtensions 防止除 .js 和 .ts 文件以外的其他文件被视为端点，除非你指定了 endpointExtensions（文档，#4197）
  • prerender.default 允许你预渲染每一页，而不需要在每个页面文件中编写 export const prerender = true（文档，#4192）

不兼容的更改

  • 移除了 fallthrough 路由。有关迁移提示，请查看 PR（#4330）
  • tabindex="-1" 现在仅在导航过程中添加到 <body>（#4140 和 #4184）
  • 现在适配器需要提供 getClientAddress 函数（#4289）
  • 在生成的 Load 中，InputProps 和 OutputProps 现在可以单独定义类型（#4305）
  • 动态参数中不再允许使用 \$ 字符（#4334）
  • svelte-kit package 被标记为实验性功能，因此 Kit 1.0 之后的更改将不会被视为不兼容更新（#4164）

Svelte 生态系统的新动态

  • Svelte: 为 TypeScript 和 Svelte 插件用户提供了许多新类型——包括 style: 指令和 Svelte Actions（3.46.4 和 3.46.5）
  • 语言工具: Svelte 项目文件现在可以通过引用导入/找到，无需先在 TS 文件中导入它们（105.13.0）
  • 语言工具: HTML 中现在支持区域折叠，使用 <!--#region--> / <!--#endregion-->（105.13.0）

社区展示

使用 Svelte 构建的应用和网站

  • Launcher 是由 SvelteKit、Prisma 和 Tailwind 驱动的开源 app 启动器
  • Paaster 是一个基于 Svelte、Vite、TypeScript、Python、Starlette、rclone 和 Docker 构建的默认安全的端到端加密粘贴服务
  • Simple AF Video Converter 是一个基于 ffmpeg.wasm 的 Electron 包装器，用于简化视频格式之间的转换
  • Streamchaser 通过一个集中化的娱乐技术平台简化电影、剧集和纪录片搜索
  • Svelte Color Picker 是一个用 Svelte 制作的简单颜色选择器
  • ConcertMash 是一个小型网站，可与 Spotify API 交互，基于你即将参加的演唱会生成新的播放列表
  • Modulus 是一个设计+代码智库，旨在推动设计与技术的发展
  • Multiply 是一家融合公关和社交的机构，以文化为导向
  • yia! 是新西兰的一个青年创新者奖竞赛
  • Write to Russia 是一个与 .ru 公共电子邮件地址沟通的社区邮件书写平台
  • Markdown Playground 是一个专注于 Markdown 实验的在线 playground
  • RatherMisty 是一个无装饰的天气应用，使用 Open-Meteo 提供的数据
  • Minecraft Profile Pic (MCPFP) 是一个轻松生成 Minecraft 头像的网站
  • WebGL Fluid Simulation 是一个由 Svelte 和 WebGL 构建的可配置流体模拟
  • 这个 @NobelPeaceOslo 展览 使用了印刷图形、投影动图、粒子动画及生成音效设计

想为一个现代的 SvelteKit 网站做贡献？帮助构建 Svelte 社区网站！

学习资源

即将参加

推荐阅读

推荐观看

库、工具与组件

  • SvelTable 是一个功能丰富的数据表组件，基于 Svelte 构建
  • svelte-cyberComp 是一个强大且轻量的组件库，使用 Svelte 和 TypeScript 编写
  • Flowbite Svelte 是一个非官方的 Svelte 版 Flowbite 组件库
  • Svelte-Tide-Project 是一个 Svelte 前端应用和 Rust Tide 后端服务器的启动模板
  • Fetch Inject 实现了一种优化处理异步 JavaScript 依赖的新技术——现已支持 Svelte
  • svelte-utterances 是一个基于 GitHub issues 构建的轻量级评论小部件
  • Liquivelte 让你可以用类似 Svelte 的组件创建 Shopify 主题
  • @storyblok/svelte 是你与 Storyblok API 交互并启用实时可视化编辑体验的 Svelte SDK
  • @svelte-on-solana/wallet-adapter 是一个模块化的 TypeScript 钱包适配器和 UI 组件，用于构建基于 Svelte 的 Solana/Anchor 应用
  • svelte-lookat 创建一个 div，能让所有子元素跟随鼠标光标或手机用户的面部移动

欢迎加入 Reddit 或 Discord 继续讨论。

咱们下个月见！