Svelte 月刊 - 2022 年 9 月

SvelteKit 新的基于文件系统的路由器, 迁移策略

—— Daniel Sandoval 2022-09-01

这个月还在找事情做吗？ 这是您获得斯德哥尔摩 Svelte Summit 门票的最后机会！ 9月8-9日加入我们🎉

随着上月初 SvelteKit 的基于文件系统的路由器的重新设计合并，本月有很多内容要介绍 - 从迁移脚本到许多新的博客文章、视频和教程。

但是新的路由并不是 SvelteKit 中唯一的新特性……

SvelteKit 中的新功能

• Link 现在支持作为 HTTP 标头，并且可以与 Cloudflare 的 Automatic Early Hints（1.0.0-next.405，PR）一起使用
• $env/static/* 现在是虚拟的，以防止将敏感值写入磁盘（1.0.0-next.413，PR）
• $app/stores 现在可以在浏览器的任何地方使用（1.0.0-next.428，PR）
• config.kit.env.dir 是一个新配置，用于设置目录以搜索 .env 文件（1.0.0-next.430，PR）

重大变化：

• 基于文件系统的路由器和负载 API 改进了路由的管理方式。在安装版本 @sveltejs/kit@1.0.0-next.406 或更高版本之前，请遵循此迁移指南（PR，问题）
• event.session 已与会话存储和 getSession 一起从负载中删除。改用 event.locals (1.0.0-next.415, PR)
• 已删除命名布局以支持（组）（1.0.0-next.432，Docs，PR & Migration Instructions）
• event.clientAddress 现在是 event.getClientAddress() (1.0.0-next.438, PR)
• $app/env 已重命名为 $app/environment，以消除与 $env/… (1.0.0-next.445, PR) 的歧义

有关更改的完整列表，请查看套件的 CHANGELOG。

语言工具更新

TypeScript 不能很好地解析对 SvelteKit 的 $types 的导入，最新版本的 Svelte 语言工具使它变得更好 (105.21.0, #1592)

社区展示

使用 Svelte 构建的应用和网站

• canno 是一款简单的交互式 3D 物理游戏，具有可调节的重力、大炮功率和调试可视化器 - 使用 threlte 制作
• straw.page 是一个非常简单的网站构建器，可让您直接通过手机创建独特的网站
• Patra 让您只需通过链接即可分享简短的笔记。 没有数据库。 无存储
• promptoMANIA 是一个带有在线提示生成器的 AI 艺术社区
• 心情专辑让您可以根据自己的心情听音乐
• Daily Sumeiro 是一款测试您的数学和逻辑技能的日常游戏
• Lofi and Games - 直接从您的浏览器玩轻松的休闲游戏
• Pitch Pipe 是一种带有频率分析仪和准调音程的数字音高管
• classes.wtf 是一个用 Go 和 Svelte 编写的自定义分布式搜索引擎，可以比标准课程目录更快地搜索哈佛课程
• Scrumpack 是一组工具，可帮助敏捷/Scrum 团队完成他们的仪式，例如规划扑克和回顾

学习资源

由 Svelte 团队主演

• Supper Club × Rich Harris，Svelte 的作者 — 语法播客 499
• 让我们在 Svelte Radio 上与 Rich Harris 讨论路由
• 2.17 - 在 Vercel 与 Rich Harris 一起打造 Svelte 的未来
• 1.15 - Shawn Wang (swyx) 的 SvelteKit 怎么了
• 将 Notion Tailwindcss 和 DaisyUI 添加到 Svelte 应用程序
• Svelte 101 会话
• Astro 和 Svelte
• Svelte 中的 Storyblok
• Svelte London 八月录音

学习新的 SvelteKit 路由

• Brittney Postma (Netlify) 迁移 SvelteKit 中的重大变化
• 主要 Svelte Kit API 更改 - 修复负载，并在 1.0 之前加强 SvelteKit 的设计 - 视频来自 LevelUpTuts
• SvelteKit 永远不会是一样的——Joy of Code 的视频
• 让我们通过 Josh Collinsworth 从头开始构建静态 Markdown 博客来学习 SvelteKit（8 月 26 日更新以跟上新的变化）

观看

• 面向 React 开发人员的 Svelte 指南和 Joy of Code 的 Svelte 状态管理指南
• 什么是Bookit？ Svelte Kit 故事书杀手和 Svelte Kit 中的 @type{import 是什么 - LevelUpTuts 的 JSDoc 语法
• TWF 又一个 JS 框架……还是不是？ Svelte！ by TWF meetup

参阅

• Lennart 使用 Svelte 创建 Figma 插件
• Svelte 视频博客：使用来自您自己的 SvelteKit 站点的 Mux 的 Vlog 和 Svelte Shy 标题：带有 CSS 的 Peekaboo 粘性标题 by Rodney Lab

库、工具和组件

• @svelte-plugins/tooltips 是为 Svelte 设计的一个简单的工具提示操作和组件
• Lucia 是一个简单的 SvelteKit 身份验证库，可将 SvelteKit 应用程序连接到数据库
• remix-router-svelte 是 react-router-dom API 的 Svelte 实现（由 @remix-run/router 驱动）
• MKRT 是一个 CLI，可帮助您快速创建 SvelteKit 路由
• Histoire 是一种生成故事应用程序的工具 - 您展示特定用例的组件的场景
• sveltekit-flash-message 是一个 Sveltekit 库，它将临时数据传递给下一个请求，通常来自端点
• svelte-particles 是一个用于创建粒子的轻量级 TypeScript 库
• svelte-claps 为您的 SvelteKit 应用程序添加拍手按钮（如 Medium）到任何页面
• Neon Flicker 是一个 Svelte 组件，可让您的文本以赛博朋克风格闪烁
• ComboBox 是一种搜索输入，可帮助用户从大量项目中进行选择
• @svelte-put 是在你的项目中放入有用的Svelte的组件
• vite-plugin-svelte-bridge 让您可以编写 Svelte 组件并从 React 和 Vue 使用它们

UI 工具包和入门实例

• Svelte-spectre 是一个基于 spectre.css 并由 Svelte 提供支持的 UI 套件
• Skeleton 允许您使用 Svelte + Tailwind 的强大功能构建快速且反应灵敏的 Web UI
• iconsax-svelte 为 Svelte 带来了流行的图标套件
• laravel-vite-svelte-spa-template 是一个 Laravel 9、Vite、Svelte SPA、Tailwind CSS（带表单插件和纵横比插件）、Axios 和 TypeScript 入门模板
• neutralino-svelte-boilerplate-js 是 Neutralino 和 Svelte 的跨平台桌面模板
• figma-plugin-svelte-vite 是使用 Svelte、Vite 和 Typescript 创建 Figma 插件的样板
• Urara 是一个甜美而强大的 SvelteKit 博客启动器
• SvelteKit Commerce 是一个多合一的入门套件，适用于使用 Vercel 的 SvelteKit 构建的高性能电子商务网站

我们错过了什么吗？ 在 Reddit 或 Discord 上告诉我们！

下个月见！