Svelte 2021年6月更新

本月，我们看到了许多对 SvelteKit 及其文档的贡献。语言工具也获得了一些新功能，最值得注意的是在 JavaScript 或 TypeScript 文件中与 Svelte 文件更深入的集成。让我们深入了解更新...

SvelteKit 新功能

• svelte.config.js 配置文件现在以 ESM 格式加载（.js 而不是 .cjs）。
• AMP 页面现在将使用渲染后的 CSS，而不是发出的 CSS
• svelte-check 已添加到 TypeScript 模板中 (sveltejs/kit#1556)
• 支持 https 密钥对 sveltejs/kit#1456
• 现在将 Vite 与 SvelteKit 捆绑在一起并使用升级版本。如果你的 package.json 中存在 Vite，请将其删除。
• 二进制响应的 Etags sveltejs/kit#1382
• 将 $layout 重命名为 __layout，将 $error 重命名为 __error
• 删除了 getContext，改用 request.locals
• 将 .svelte 输出目录重命名为 .svelte-kit。相应地更新你的 .gitignore
• trailingSlash: 'never' | 'always' | 'ignore' 现在可以在配置中使用。这应该可以更容易地构建适用于静态托管提供商的网站，这些提供商期望 index.html 页面具有尾部斜杠，并为任何需要更复杂行为的人提供一个备用方案。

SvelteKit 中值得注意的错误修复

• adapter-netlify 已修复 sveltejs/kit#1467 并在自述文件中添加了新文档 https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify
• 路由器将不再拦截应用程序不拥有的 URL 的导航。这修复了应用程序页面上具有相同来源但与应用程序不共享基本路径的 <a> 元素导致的崩溃。
• 哈希更改现在由路由器处理，在某些情况下修复了浏览器在哈希更改之间“后退”导航。

Svelte 和语言工具中的新功能

• Svelte 3.38.1 和 3.38.2 修复了导致重复元素的水合问题。如果在你的项目中遇到此问题，请确保更新到最新版本！
• 一个新的 TypeScript 插件提供了与 JavaScript 或 TypeScript 文件中 Svelte 文件更深入的集成。这包括变量的诊断、引用和重命名。它与 VS Code 扩展一起打包，但目前默认情况下处于关闭状态。你可以通过 此设置 启用它。我们鼓励你试用它并 提供反馈
• 在最新版本的 svelte-check 中，你现在可以提供 tsconfig.json 或 jsconfig.json 的路径。例如：svelte-check --tsconfig "./tsconfig.json"。这确保诊断仅在该配置中引用的文件上运行。它还会对 JavaScript 和/或 TypeScript 文件运行诊断，从而无需对非 Svelte 文件运行其他检查（如 tsc --noEmit）（svelte-check 版本 1.6.0)
• VS Code 扩展和 svelte-check 发布了新的主要版本。以前，如果用户同时使用 TypeScript 并激活了 strict 模式，则没有初始化程序的属性（export let foo;）才是必需的。现在已更改：使用 TypeScript 的用户以及在 JavaScript 文件中使用 checkJs 的用户现在将始终将这些属性标记为必需（svelte-check 版本 2.0.0，扩展版本 105.0.0)

---

社区展示

应用和网站

• vidu 是一个最小的网络分析收集器和仪表板
• River Runner 是一种虚拟方式，用于沿着河流向下游追踪 - 使用 Mapbox 和 Svelte 构建。
• JSDoc 类型生成器 为有效的 JSON 生成 JSDoc 类型。
• pagereview.io 是一种网站反馈工具，允许你直接在正在审查的网站上留下评论。
• gamesroom.io 是一个在线棋牌游戏平台，内置视频聊天功能。
• Greedy Goblin 是一个面向老式 RuneScape 玩家的食谱应用程序。
• hashbrown.geopjr.dev 是一个受 GNOME-shell 启发的网页，用于了解、探索 Hashbrown GTK 应用程序的源代码并下载它 (源代码链接)。

库、工具和组件

• svelte-image-crop 是一个使用 Web API 的简单点击拖动图像裁剪库。
• svelte-datepicker 是一个使用 Svelte 构建的轻量级且包容性的日期选择器。
• svelte-regex-router 是一个简单、轻量级的库，可让你轻松处理 Svelte 应用程序中的路由。
• Svelte Micro 是一个用于 Svelte 的轻量级且响应式的单组件路由器。
• svelte-entity-store 用于为存储实体对象集合提供一个简单、通用的解决方案。
• svelte-animation-store 是一个基于 Svelte 的 tweened store 的存储，它允许你暂停、继续、重置、重播、反转或调整缓动动画的速度。

想要贡献组件？ 提交你自己的组件 到 Svelte Society 网站上的组件列表 packages。

下个月见！

我们是否错过了什么？加入我们在 Svelte Society、Reddit 和 Discord！