Svelte 新功能：2022 年 12 月

SvelteKit 1.0 就在眼前！随着 99% 的里程碑问题已完成，过去一个月推出了许多新变化，让我们一起来看看吧……

让我们开始吧！

SvelteKit 的新功能

• 使用 willUnload 属性来判断导航是否会导致应用程序被卸载（整页刷新/关闭/跳转到其他页面）。(#6813)
• __data.json 请求现在支持缓存，并确保在所有失效场景下缓存匹配的响应 (#7532)
• 现在支持链接到 <a name="hash"> 标签 (#7596)
• 在 handle 钩子中抛出重定向现在已被支持 (#7612)
• 没有提供布局的情况下会自动添加一个回退组件 (#7619)
• resolve 钩子中的新 preload 函数，可以决定哪些文件应该添加到 标签中进行预加载 (文档, #4963, #7704)
• 现在可以通过 $app/environment 获取 version (#7689, #7694)
• handleError 现在可以返回一个 promise (#7780)

重大更新：

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

Svelte 的新功能

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

有关 Svelte 编译器的全部更改，包括未发布的更改，请查看 CHANGELOG。

---

社区展示

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

• Appwrite’s new console 在浏览器中提供其安全的 Web、移动和 Flutter 开发者后端服务器
• RepoMagic 是一个 GitHub 的搜索和分析工具
• Podman Desktop 是一个用于容器和 Kubernetes 开发的图形工具
• Ballerine 是一个 Know Your Customer (KYC) 界面对任何行业或地理位置，使用模块化构建块、组件和第三方集成
• Budget Pen 是一个类似 Codepen 的浏览器代码编辑器，内置 Tailwind
• doTogether 帮助你通过一个定期任务列表来跟踪需要完成的事项
• Webscraped College Results 是 r/collegeresults 数据的可视化集合
• Let’s premortem 为项目失败后避免冗长、令人沮丧的事后分析
• BLKMARKET.COM 是一个用于商业和个人用途的插图库
• Sigil 是一个内容按投票顺序排列的画布空间
• corpus-activity-streams 是一个非官方的 ActivityStreams 2.0 词汇数据集和替代文档
• nodeMyAdmin 是一个用 SvelteKit 编写的 phpMyAdmin 替代品
• Image to Pattern Conversion 是一个十字绣图案转换工具，提供 预制图案列表
• Verbums 是一个提高英语语言理解能力的词汇训练工具
• SVGPS 通过将图标转换为单个 JSON 文件来简化管理 SVG 文件的工作
• 这个 3D 复古主题的射击游戏 用 threlte 构建

学习资源

听

• Catching up after Svelte Summit 和 3D, WebGL and AI，来自 Svelte Radio 的播客

看

• Domenik Reitzner - The easy way, an introduction to Sveltekit 来自 Svelte Society Vienna
• Sirens: Form Actions - Kev 再次加入 Sirens，讨论 SvelteKit 中的 Form 动作，并为 SvelteSirens.dev 创建了一个新表单以提交演讲者信息
• Introduction To 3D With Svelte (Threlte)、How To Use Global Styles In SvelteKit 和 Progressive Form Enhancement With SvelteKit by Joy of Code

阅读

• Building tic-tac-toe with Svelte by Geoff Rich
• Speed up SvelteKit Pages With a Redis Cache by Captain Codeman
• Understanding environment variables in SvelteKit、Form validation with SvelteKit and Zod 和 Build a SvelteKit application with Docker by Justin Ahinon
• Why I failed to create the “Solid.js’s store” for Svelte, and announcing svelte-store-tree v0.3.1 by YAMAMOTO Yuji
• Create an offline-first and installable PWA with SvelteKit and workbox-precaching by Antonio Sarcevic

库、工具和组件

• Skeleton 是一个 UI 工具包，用于使用 Svelte + Tailwind CSS 构建快速反应的网站界面
• svelte-svg-spinners 是一个 SVG 加载动画组件集合
• Svelte Floating UI 通过 actions 启用悬浮界面 - 无需包装组件或组件绑定
• at-html 允许在 Svelte 应用中与插槽一起使用 {@html } 标签
• html-svelte-parser 是一个适用于服务器 (Node.js) 和客户端 (浏览器) 的 HTML 到 Svelte 转换器
• 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 和缓存机制的 Lazy Image 组件
• threlte v5.0 提供了完全新的开发体验，更快、更强大且灵活

本月内容到此结束！如果我们遗漏了什么，可以通过 Reddit 或 Discord 和我们联系。

明年见 🎆