Svelte 新闻:2021 年 10 月
一年一度的“Svelte 新闻”
大家好 👋 自从“Svelte 新闻”开始交叉发布到 Svelte 博客以来,已经过去一年了。我想借此机会感谢大家阅读,并感谢每个月的所有贡献者。从维护人员到在 Discord 和 Reddit 上发布作品的每个人,见证大家为使 Svelte 社区变得更好而付出的所有努力,真是令人惊叹。
大家继续努力!现在,让我们深入了解本月的新闻……
Svelte 周围的新内容
- Svelte 的导出映射中新增了生命周期函数的空操作版本,用于 SSR(Svelte 3.43.0)
- 带有
src
属性的自定义组件不再破坏svelte-native
构建(Svelte 3.42.4) - 未启用 TypeScript 插件 的 Svelte 插件用户现在将被提示启用它。它使用额外的智能感知增强了 TypeScript 和 JavaScript 文件,以便与 Svelte 文件交互。如果您正在使用它,请留下反馈(Svelte 扩展程序 105.4.0)
- 事件修饰符已作为自动完成和悬停信息添加到智能感知中(Svelte 扩展程序 105.4.0)
- 使用 Svelte 3.39 或更高版本和
svelte-preprocess
4.9.5 或更高版本时,TypeScript 用户不再需要严格分离类型导入和值导入。这意味着您现在可以编写import { MyInterface, myValue } from './somewhere'
而不是import type { MyInterface } from './somewhere'; import { myValue } from './somewhere'
。非常感谢社区成员 @SomaticIT 主要实现了这一点!
有关功能和错误修复的完整列表,请查看 Svelte 变更日志。
SvelteKit 更新
上个月再次提交了近 100 个 PR,但仍有很多工作要做,Svelte 维护人员正在 寻求帮助将 SvelteKit 推向 1.0。Antony 在该问题的 最近评论 中很好地表达了这一点
如果您认为自己太菜鸟而无法贡献(您不是),那么在添加功能之前,请添加测试或为要添加的功能编写测试!从小处着手,并以此方式学习代码库。
如果您想提供帮助,请考虑处理任何 标有“需要帮助”的 1.0 里程碑问题。
本月值得注意的 SvelteKit 改进包括……
- 服务工作者现在可以使用
$lib
别名访问文件(#2326) - Svelte 库现在应该可以开箱即用,无需任何 Vite 配置(#2343)
- 对包导出字段的改进(#2345 和 #2327)
- 【重大变更】
prerender.pages
配置选项已重命名为prerender.entries
(#2380) - 添加了一个新的泛型参数,允许从钩子中键入 Body(#2413)
- 运行包命令时,将向 package.json 添加
svelte
字段(#2431) - 【重大变更】加载函数的
context
参数已重命名为stuff
(#2439) - 添加了一个
entryPoint
选项,用于使用adapter-node
构建自定义服务器(#2414) vite-plugin-svelte
改进了对 useVitePreprocess 的支持,后者使用 Vite 自动预处理 Svelte 组件中的 TypeScript、PostCSS、Scss 等(#173)
要查看 SvelteKit 的所有更新,请查看 SvelteKit 变更日志。
社区展示
应用程序和网站
- radiofrance 刚刚将其网站迁移到 SvelteKit
- FLAYKS 是 Félix Péault 使用 SvelteKit、Sanity 和 Anime.js 制作的投资组合网站
- hirehive 是一个候选人和工作跟踪网站
- Microsocial 是一个实验性的点对点社交平台
- Dylan Ipsum 是一个随机文本生成器,用于用 Bob Dylan 的歌词替换 lorem ipsum
- Chip8 Svelte 是一个 CHIP-8 模拟器前端,构建在 CHIP8 TypeScript 之上
正在寻找一个 Svelte 项目来处理?有兴趣帮助改善 Svelte 在网络上的存在? 如果您想为 Svelte Society 的 SvelteKit 重写版做出贡献,请查看 开放问题列表。
以 Svelte 为特色的播客
- Syntax Podcast:从 React 到 SvelteKit Scott 与 Wes 讨论将 Level Up Tutorials 从 React 迁移到 SvelteKit 的过程——他为什么要这样做,如何操作,好处,需要注意的事项等等!
- Web Rush Podcast:Svelte 工具和 Svelte Society Kevin Åberg Kultalahti 讨论了 Svelte Society 是什么,他对 Svelte 的兴奋点,文档对于任何产品的重要性等等很多
- Svelte:前端的编译未来 详细介绍了基于组件的前端的历史以及编译器如何改变一切
- Svelte Radio:与 Martin ‘Grygrflzr’ Krisnanto Putra 一起为 Svelte 做贡献 Grygrflzr 分享了他成为维护人员的历程以及他对 React、Vite 和许多其他事物的看法
- Svelte Radio:Jake 和 Willow 的 Routify 3 Svelte Radio 团队与 Routify 的维护人员坐下来,讨论了刚刚发布的 Routify 3
- JS Party:1Password 在 The Changelog 的 JS Party 的最新一集中提到他们使用 Svelte 为其页面内建议提供支持
教育内容
- 我如何使用 Svelte 和 SvelteKit 构建博客 是对 Svelte、SvelteKit 和渐进增强(附代码示例)的介绍
- 我构建了一个去中心化的聊天 dapp 是一个关于如何使用流行的 web3 技术(如 GUN)构建去中心化 Web 应用程序 (dapp) 的教程
- 使用 TypeScript 编写 Svelte Store 深入探讨了使用 TypeScript 编写 Svelte 存储
- Svelte 如何限定组件样式 解释了使用类和更复杂的 CSS 说明符进行限定
- SvelteKit 钩子 展示了如何在 Sveltekit 中使用 hooks.js。完成后,请查看 第 2 部分
- 抢先了解 SvelteKit 是 Infoworld 的一篇帖子,介绍了 SvelteKit 的功能和入门指南
库、工具和组件
- sveltekit-netlify-cms 是一个为与 Netlify CMS 一起使用而配置的 SvelteKit 骨架应用程序
- SvelteFireTS 是一个受 Fireship.io 启发的 SvelteKit + TypeScript + Firebase 库
- stores-x 允许您像使用 vueX 一样使用 Svelte 存储
- sveltekit-snippets 是一个 VSCode 扩展,提供 SvelteKit 和 Vanilla Svelte 中常见模式的代码片段
- svelte-xactor 是一个中间件,允许您轻松地将 xactor 机器转换为实现存储契约的全局存储
- vite-plugin-pages-svelte 是一个用于基于文件系统的自动路由的 vite 插件
- sveltio 是 valtio(一个代理状态库)的 Svelte 包装器
- svelte-transition-classes 是一个自定义 Svelte 过渡,用于添加和交换 CSS 类
- Svelte-Boring-Avatars 是流行的 Boring Avatars React 项目的 Svelte 移植版
- Svelte DataTables 将 DataTable(一个流行的 JavaScript 库,允许您轻松地以用户友好的表格显示数据)引入您的 Svelte 项目。
- focus-svelte 是一个零依赖的 Svelte 焦点陷阱
- filedrop-svelte 是一个 Svelte 的文件拖放区域操作和组件
查看社区网站 sveltesociety.dev,了解来自整个 Svelte 生态系统的更多模板、添加器和适配器。
在您离开之前,请响应演讲者征集!
Svelte Summit 秋季 2021(2021 年 11 月 20 日举行)正在寻找演讲者。请在 10 月 30 日之前提交您的演讲提案……欢迎所有人提交演讲和参加会议。