Svelte 新闻：2022 年 12 月

SvelteKit 1.0 即将发布！随着里程碑问题已完成 99%，上个月有很多新的变化需要介绍...

让我们开始吧！

SvelteKit 的新功能

• 使用 willUnload 属性来确定导航是否会导致应用程序卸载（完整页面重新加载/关闭/离开到另一个页面）。(#6813)
• __data.json 请求现在允许缓存，同时确保我们为所有失效场景缓存匹配的响应(#7532)
• 现在支持链接到 <a name="hash"> 标签(#7596)
• 现在支持在 handle 钩子中抛出重定向(#7612)
• 现在将为没有回退组件的布局自动添加回退组件(#7619)
• resolve 钩子中的新 preload 函数确定应将哪些文件添加到标签中以预加载它(文档，#4963，#7704)
• version 现在可以通过 $app/environment 获取(#7689，#7694)
• handleError 现在可以返回一个 Promise(#7780)

重大更改：

• routeId 现在是 route.id(#7450)
• 在 beforeNavigate 和 afterNavigate 方法中，'load' 已重命名为 'enter'，'unload' 已重命名为 'leave'。beforeNavigate 现在在外部导航时仅调用一次，类型为 'unload'，并且在重定向期间将不再运行(#7502，#7529，#7588)
• redirect 帮助程序现在仅允许 300-308 之间的状态代码用于重定向，并且仅允许 400-599 之间的 error 状态代码(#7767) (#7615，#7767)
• 现在，特殊字符将在路由目录名称中使用十六进制/Unicode 转义序列进行编码(#7644)
• devalue 现在用于（反）序列化操作数据 - 这仅对直接获取操作且不通过 use:enhance 的每个人来说都是一个重大更改(#7494)
• trailingSlash 现在是页面选项，而不是配置(#7719)
• 客户端路由器现在忽略 %sveltekit.body% 之外的链接(#7766)
• prerendering 现在命名为 building，并且 config.kit.prerender.enabled 已删除(#7762)
• getStaticDirectory() 已从构建器 API 中删除(#7809)
• format 选项已从 generateManifest(...) 中删除(#7820)
• data-sveltekit-prefetch 已替换为 -preload-code 和 -preload-data，prefetch 现在是 preloadData，prefetchRoutes 现在是 preloadCode(#7776，#7776)
• SubmitFunction 已从 $app/forms 移动到 @sveltejs/kit(#7003)

Svelte 的新功能

• css: false 和 css: true 的 css 编译器选项已被 'external' | 'injected' | 'none' 设置替换，以加快 ssr 构建的编译速度并提高清晰度 (**3.53.0**)

有关 Svelte 编译器的所有更改，包括未发布的更改，请查看更改日志。

---

社区展示

使用 Svelte 构建的应用程序和网站

• Appwrite 的新控制台 使其面向 Web、移动和 Flutter 开发人员的安全后端服务器在浏览器中可用
• RepoMagic 是一个用于 GitHub 的搜索和分析工具
• Podman Desktop 是一个用于在容器和 Kubernetes 上进行开发的图形工具
• Ballerine 是一个适用于任何垂直行业或地区的了解您的客户 (KYC) 用户体验，使用模块化构建块、组件和第三方集成
• Budget Pen 是一个类似 Codepen 的浏览器代码编辑器，包含 Tailwind
• doTogether 帮助您跟踪需要完成的事情，通过定期任务列表
• 网络抓取的大学结果 是 r/collegeresults 数据的可视化集合
• 让我们事后诸葛亮 帮助避免项目失败后冗长且令人沮丧的事后分析
• BLKMARKET.COM 是一个用于商业和个人用途的插图库
• Sigil 是任何事物的画布，其空间由投票最多的内容组织
• corpus-activity-streams 是一个非官方的 ActivityStreams 2.0 词汇表数据集和替代文档
• nodeMyAdmin 是使用 SvelteKit 编写的 phpMyAdmin 的替代方案
• 图像到图案转换 是一个十字绣图案转换工具，并附带预制图案列表 以供开始使用
• Verbums 是一款英语词汇训练器，可提高语言理解能力
• SVGPS 通过将您的图标转换为单个 JSON 文件来消除处理大量 SVG 文件的负担
• 这款 3D 复古主题小行星射击游戏 是使用 threlte 制作的

学习资源

收听

• Svelte 峰会后的回顾 和 3D、WebGL 和 AI 由 Svelte Radio 提供

观看

• Domenik Reitzner - 简单易懂的方式，Sveltekit 入门 来自维也纳 Svelte 社区
• 警报：表单操作 - Kev 再次加入警报，讨论 SvelteKit 中的表单操作，并在 SvelteSirens.dev 上为演讲者提交创建新的表单
• 使用 Svelte（Threlte）进行 3D 入门、如何在 SvelteKit 中使用全局样式 和 使用 SvelteKit 进行渐进式表单增强 由 Joy of Code 提供

阅读

• 使用 Svelte 构建井字棋 由 Geoff Rich 提供
• 使用 Redis 缓存加速 SvelteKit 页面 由 Captain Codeman 提供
• 了解 SvelteKit 中的环境变量、使用 SvelteKit 和 Zod 进行表单验证 和 使用 Docker 构建 SvelteKit 应用程序 由 Justin Ahinon 提供
• 为什么我无法为 Svelte 创建“Solid.js 的存储”，以及宣布 svelte-store-tree v0.3.1 由 YAMAMOTO Yuji 提供
• 使用 SvelteKit 和 workbox-precaching 创建离线优先且可安装的 PWA 由 Antonio Sarcevic 提供

库、工具和组件

• Skeleton 是一个 UI 工具包，用于使用 Svelte + Tailwind CSS 构建快速且响应式的 Web 界面
• svelte-svg-spinners 是一个 SVG 旋转器组件集合
• Svelte Floating UI 支持浮动 UI 操作 - 无需包装组件或组件绑定
• at-html 允许您在 Svelte 应用程序中使用 {@html } 标签和插槽
• html-svelte-parser 是一个 HTML 到 Svelte 的解析器，可在服务器（Node.js）和客户端（浏览器）上运行
• svelte-switcher 是一个完全可自定义、触控友好、易访问且小巧的切换组件
• sveltkit-hook-html-minifier 是一个包装 html-minifier 的钩子
• sveltekit-hook-redirect 是一个使重定向变得简单的钩子
• sveltekit-video-meet 是一个使用 SvelteKit 和 SocketIO 构建的视频通话 Web 应用程序
• svelte-colourpicker 是一个轻量级的、有主见的 Svelte 颜色选择器组件
• Svelte-HeadlessUI 是 Tailwind HeadlessUI 的非官方 Svelte 实现
• svelte-lazyimage-cache 是一个带有 IntersectionObserver 和缓存操作的延迟图像组件
• threlte v5.0 带来全新的开发体验，速度更快、功能更强大且非常灵活

本月就到这里了！如果您发现我们错过了任何内容，请在Reddit 或Discord 上告诉我们

下个月再见 🎆