Svelte 2022年7月更新

从更快的服务器端渲染到在 SvelteKit 中支持 Vitest 和 Storybook，这个月的通讯有很多内容需要涵盖……

所以让我们深入了解一下！

OpenCollective 资助推动 Svelte 发展

Svelte 支持者已向 OpenCollective 上的项目 捐赠了约 80,000 美元。我们很高兴地分享，这些资金正在被用于以有意义的方式推动 Svelte 发展。@gtm-nayan 过去一个月作为项目的付费贡献者开始对 SvelteKit 问题进行分类和修复，以帮助我们将 SvelteKit 提升到 1.0 级别的稳定性！@gtm-nayan 一直是 Svelte 社区的活跃成员，并且以编写帮助维护我们 Discord 服务器运行的机器人而闻名。我们很高兴这项资助让 Svelte 能获得更多他的时间。

我们还将利用 OpenCollective 资金让 Svelte 核心维护人员能够亲自参加今年秋季的 Svelte Summit。感谢迄今为止所有捐赠的人！

Svelte 和语言工具的新功能

• 教程 是一种从头开始学习 Svelte 和 SvelteKit 的新方法，目前正在开发中
• 更快的服务器端渲染将在下一个 Svelte 版本中推出。一个历时两年的 PR，在一些基准测试中使渲染速度提高了 3 倍！(PR)
• 在最新版本的 Svelte 扩展中，“查找文件引用”（0.14.28）和“查找组件引用”（0.14.29）显示了 Svelte 文件和组件在哪里被导入和使用(演示)
• Svelte 扩展现在支持 CSS 路径补全(0.14.29)

SvelteKit 的新功能

• 引入了 @sveltejs/kit/experimental/vite，它允许 SvelteKit 与 Vite 生态系统中的其他工具（如 Vitest 和 Storybook）互操作(#5094)。请 提供反馈，说明该功能是否有效且有用，因为我们正在考虑将其从实验性功能中移除，并要求所有用户使用 vite.config.js
• 现在支持端点中的流式传输(#3419)。这是通过切换到 Undici fetch 实现(#5117)来实现的
• 静态资产现在可以在开发环境中进行符号链接(#5089)
• server 和 prod 环境变量现在可用，作为 browser 和 dev 的补充(#5251)

---

社区展示

使用 Svelte 构建的应用和网站

• Virtual Maker 允许您在浏览器中创建交互式 3D 和 VR 场景
• Apple Beta Music 似乎是用 Svelte 和 Web Components 的某种组合编写的
• Itatiaia，巴西最大的广播电台，刚刚使用 SvelteKit 重新推出了其新闻门户网站
• Pronauns 通过 IPA 帮助您在线学习发音，以便更好地说话并听起来更像母语人士
• Immich 是一个开源、高性能的自托管备份解决方案，用于您手机上的视频和照片
• Pendek 是一个使用 SvelteKit、Prisma 和 PlanetScale 构建的链接缩短器
• Grunfy 是一套吉他工具 - 最近迁移到 SvelteKit
• Radiant: The Future of Radio 是一款使用 Svelte 和 Capacitor 构建的个人广播电台应用程序
• Imperfect Reminders 是一个用于处理时间不那么敏感的事项的任务清单
• 元素周期表 是一个用 Svelte 编写的动态元素周期表组件
• Svelvet 是一个用于构建交互式基于节点的图表的轻量级 Svelte 组件库
• publint 用于检查打包错误以确保跨环境的兼容性
• Playlistr 帮助管理和创建 Spotify 播放列表
• Geoff Rich 的页面过渡演示 展示了 SvelteKit 的 beforeNavigate / afterNavigate 钩子如何在最新的 Chrome Canary 中实现流畅的文档过渡
• 孟格海绵 是一个用 Threlte 构建的分形

想为使用最新 SvelteKit 功能的网站做出贡献吗？帮助构建 Svelte Society 网站！

学习资源

Svelte 团队推荐

• Svelte 起源：一部 JavaScript 纪录片 由 OfferZen Origins 制作
• 全栈文档（宣布 learn.svelte.dev） 由 Rich Harris 在 JSNation 2022 上发表
• 关于警报器的一切 由 Svelte Radio 制作

观看

• SvelteKit 页面端点、命名布局 和 使用 $page.stuff 将数据从页面组件传递到布局组件 由 lihautan 制作
• 🍞 & 🧈：使用 SvelteKit 端点神奇地加载数据 由 Johnny Magrippis 制作
• 面向 React 开发人员的 Svelte 由 frontendtier 制作
• 学习 Svelte JS || 用于构建前端应用程序的 JavaScript 编译器 由 Code with tsksharma 制作
• SvelteKit 身份验证 由 Joy of Code 制作
• Svelte + WebSockets：构建实时拍卖应用程序 由 Evgeny Maksimov 制作

阅读

• 静态网站上的最新分析 和 使用 Fuse.js 进行快速、轻量级的模糊搜索 由 paullj 撰写
• 在 ExpressJs 项目中使用 SvelteKit 作为处理程序 由 Tran Chien 撰写
• 使用 Tauri 和 SvelteKit 创建桌面应用程序 由 Stijn-B 撰写
• 很棒的 Svelte 存储列表 由 samuba 撰写
• SvelteKit 内容安全策略：用于 XSS 防护的 CSP 由 Rodney Lab 撰写
• SvelteKit 钩子。您需要了解的一切 由 Lucretius K. Biah 撰写
• 提升 Svelte 存储性能的 3 个技巧 由 Mathias Picker 撰写

库、工具和组件

• Svend3r 是一个用于 Svelte 的即插即用 D3 图表库
• Svelte Hover Draw SVG 是一个轻量级的 Svelte 组件，用于在悬停时绘制 SVG
• Svelte French Toast 提供默认情况下轻量级、可定制且美观的黄油般顺滑的吐司通知
• SVooltip 是一个基本的 Svelte 工具提示指令，由 Floating UI 提供支持
• Svelte Brick Gallery 是一个用于 Svelte 的类似砌体布局的图像库组件
• use-vest 是一个用于 Vest 的 Svelte 操作 - 一个使验证表单和在必要时显示错误变得容易的库
• Svelidate 是一个简单且轻量级的 Svelte 表单验证库，没有任何依赖项
• Svve11 是一个用于 Svelte 的“以无障碍为先”的组件库
• Slidy 是一个简单、可配置且可重用的轮播滑动操作脚本，带有一些模板和一些有用的插件
• Svelte 组件代码片段 是一个 VS Code 扩展，可以访问常见的 Svelte 代码片段
• Svelte Confetti 通过一些五彩纸屑🎊为您的应用程序增添一抹色彩。

我们错过了什么？请在 Reddit 或 Discord 上告诉我们，分享您的想法。

别忘了您还可以亲自参加在斯德哥尔摩举办的 Svelte Summit！加入我们，共度两天精彩的 Svelte 内容！立即获取门票。

下个月见！