Svelte 2022 年 9 月更新

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

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

但新的路由并不是 SvelteKit 中唯一的新功能……

SvelteKit 的新功能

• Link 现在作为 HTTP 标头受支持，并且可以与 Cloudflare 的自动早期提示一起开箱即用（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）

重大更改：

• 基于文件系统的路由器和 load API 改进了路由的管理方式。在安装版本 @sveltejs/[email protected] 或更高版本之前，请遵循此迁移指南（PR，Issue）
• event.session 已从 load 中删除，以及 session 存储和 getSession。请改用 event.locals（1.0.0-next.415，PR）
• 已删除命名布局，取而代之的是 (groups)（1.0.0-next.432，文档，PR 和迁移说明）
• event.clientAddress 现在是 event.getClientAddress()（1.0.0-next.438，PR）
• $app/env 已重命名为 $app/environment，以区分 $env/...（1.0.0-next.445，PR）

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

语言工具更新

• TypeScript 无法很好地解析导入到 SvelteKit 的 $types，最新版本的 Svelte 语言工具使其变得更好（105.21.0，#1592）

---

社区展示

使用 Svelte 构建的应用和网站

• canno 是一款简单的交互式 3D 物理游戏，具有可调节的重力、炮弹力量和调试可视化器 - 使用 threlte 制作
• straw.page 是一款极其简单的网站构建器，可让您直接从手机创建独特的网站
• Patra 允许您仅通过链接共享简短笔记。没有数据库。没有存储
• promptoMANIA 是一个拥有在线提示构建器的 AI 艺术社区
• Album by Mood 允许您根据自己的心情收听音乐
• Daily Sumeiro 是一款每日游戏，用于测试您的数学和逻辑技能
• Lofi and Games - 直接从浏览器玩轻松休闲的游戏
• Pitch Pipe 是一款数字音调管，带有频率分析仪和纯律音程
• classes.wtf 是一个用 Go 和 Svelte 编写的自定义分布式搜索引擎，使搜索哈佛课程比标准课程目录快得多
• Scrumpack 是一套工具，可帮助敏捷/Scrum 团队进行计划扑克和回顾等仪式

学习资源

Svelte 团队主演

• Supper Club × Rich Harris，Svelte 作者 - Syntax Podcast 499
• 在 Svelte Radio 上与 Rich Harris 讨论路由
• 2.17 - 在 Vercel 与 Rich Harris 构建 Svelte 的未来
• 1.15 - SvelteKit 的最新动态，与 Shawn Wang (swyx)
• 将 Notion Tailwindcss 和 DaisyUI 添加到 Svelte 应用中
• Svelte 101 会议
• Astro 和 Svelte
• Storyblok 在 Svelte 中
• Svelte London 八月录制

学习新的 SvelteKit 路由

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

观看

• 面向 React 开发人员的 Svelte 指南 和 Svelte 状态管理指南，作者：Joy of Code
• 什么是 Bookit？Svelte Kit Storybook 杀手 和 什么是 @type{import 在 Svelte Kit 中 - JSDoc 语法，作者：LevelUpTuts
• TWF 另一个 JS 框架……还是不是？Svelte！，作者：TWF 会议

阅读

• 使用 Svelte 创建 Figma 插件，作者：Lennart
• Svelte 视频博客：使用您自己的 SvelteKit 站点中的 Mux 进行 Vlog 和 Svelte 害羞标题：使用 CSS 查看粘性标题，作者：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）
• 霓虹闪烁 是一个 Svelte 组件，可以让您的文本以赛博朋克风格闪烁
• 组合框 是一个搜索输入，可帮助用户从大量项目列表中进行选择
• @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 上告诉我们！

下个月见！