跳至主要内容

Svelte 2022年4月更新

告别贯穿路由，欢迎参数验证器！

Dani Sandoval

本月，我们感受到了 SvelteKit 处理页面属性方式的转变。过去需要贯穿路由才能实现的用例（验证参数属性）已被更具体的解决方案取代。

更多内容，以及 Svelte 的其他新功能，让我们深入了解……

SvelteKit 的新功能

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

新的配置选项

  • outDir 修复了单仓库和其他希望输出目录位于项目目录之外的情况下的路径问题（文档，#4176）
  • endpointExtensions 可防止将 .js 和 .ts 文件以外的文件视为端点，除非您指定了 endpointExtensions（文档，#4197）
  • prerender.default 允许您预渲染每个页面，而无需在每个页面文件中编写 export const prerender = true（文档，#4192）

重大变更

  • 已移除贯穿路由。有关迁移提示，请查看 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 动作（3.46.4 和 3.46.5）
  • 语言工具：现在可以通过引用导入/查找 Svelte 项目文件，而无需在 TS 文件中导入它们（105.13.0）
  • 语言工具：现在支持使用 <!--#region--> / <!--#endregion--> 在 html 中进行区域折叠（105.13.0）

社区展示

使用 Svelte 构建的应用和网站

  • Launcher 是一款由 SvelteKit、Prisma 和 Tailwind 提供支持的开源应用程序启动器
  • Paaster 是一个默认安全且端到端加密的粘贴板，使用 Svelte、Vite、TypeScript、Python、Starlette、rclone 和 Docker 构建。
  • Simple AF Video Converter 是 ffmpeg.wasm 的 Electron 包装器，用于简化视频格式转换。
  • Streamchaser 旨在通过集中的娱乐技术平台简化电影、电视剧和纪录片的搜索。
  • Svelte 颜色选择器 是一个使用 Svelte 制作的简单颜色选择器。
  • ConcertMash 是一个小型网站，它与 Spotify API 交互，并根据您即将参加的音乐会生成新的播放列表。
  • Modulus 是一个设计+代码智库，其主要使命是发展设计和技术。
  • Multiply 是一家以文化速度发展的综合公关和社交机构。
  • yia! 是新西兰的青年创新奖竞赛。
  • 写信给俄罗斯 是一个社区电子邮件写作平台，用于与公共 .ru 电子邮件地址进行通信。
  • Markdown 游乐场 是一个专门用于 Markdown 实验的在线游乐场。
  • RatherMisty 是一款简洁的天气应用程序，天气数据来自 Open-Meteo。
  • Minecraft 个人资料图片 (MCPFP) 是一个轻松生成 Minecraft 个人资料图片的网站。
  • WebGL 流体模拟 是一个使用 Svelte 和 WebGL 构建的可配置流体模拟。
  • 这个 @NobelPeaceOslo 展览 使用印刷图形、投影动态图形、粒子动画和生成式声音设计构建。

渴望为现代 SvelteKit 网站做出贡献？帮助构建 Svelte Society 网站！

学习资源

参加

  • Svelte 峰会：春季 将于 2022 年 4 月 30 日举行！加入我们，参加第五届虚拟 Svelte 大会，地点在 YouTube 和 Discord 🍾

阅读

观看

库、工具和组件

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

加入我们，在 Reddit 或 Discord 上继续讨论。

下个月见！