Svelte 的最新动态:2021 年 10 月
一整年的“Svelte 最新动态”
大家好 👋 从“Svelte 最新动态”开始在 Svelte 博客上发布以来,已经有一年时间了。在这里,我想特别感谢每一位阅读内容的你们以及每个月贡献内容的贡献者们。从维护者到在 Discord 和 Reddit 上发布自己作品的各位,能见证大家为 Svelte 社区的壮大所付出的努力,真是太棒了。
大家继续努力吧!现在,让我们来看看本月的新闻吧...
Svelte 的最新变化
- Svelte 的导出映射新增加内容,现在支持为 SSR 提供 lifecycle 函数的无操作版本(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 里程碑问题中带有“help wanted”标签的事项。
本月值得注意的 SvelteKit 改进包括...
- 服务工作者现在可以使用
$lib
别名访问文件(#2326) - Svelte 库现在应可以在没有任何 Vite 配置的情况下开箱即用(#2343)
- 包导出字段的改进(#2345 和 #2327)
- 破坏性更改
prerender.pages
配置选项已被重命名为prerender.entries
(#2380) - 引入了一个新的泛型参数,以允许从 hooks 中对 Body 进行类型化(#2413)
- 当运行打包命令时,
svelte
字段将被添加到 package.json(#2431) - 破坏性更改
load
函数的context
参数被重命名为stuff
(#2439) - 为使用
adapter-node
构建自定义服务器添加了entryPoint
选项(#2414) vite-plugin-svelte
提高了对 useVitePreprocess 的支持,该功能使用 Vite 自动预处理 TypeScript、PostCSS、Scss 等 Svelte 组件中的内容(#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 在 Web 上的影响力变得更强? 如果你感兴趣,请查看 可参与的开放问题列表,为 Svelte 社区的 SvelteKit 重写做出贡献。
包括 Svelte 的播客
- Syntax Podcast: From React to SvelteKit Scott 与 Wes 讨论从 React 迁移到 SvelteKit 的过程——为什么要迁移、怎么迁移、迁移的好处、需要注意的地方等等!
- Web Rush Podcast: Svelte Tools and Svelte Society Kevin Åberg Kultalahti 讨论了 Svelte 社区的定位、他对 Svelte 的兴趣、文档的重要性以及其他许多内容
- Svelte: The Compiled Future of Front End 讲述了基于组件的前端历史以及编译器如何改变一切
- Svelte Radio: Contributing to Svelte with Martin ‘Grygrflzr’ Krisnanto Putra Grygrflzr 分享了他成为维护者的旅程,以及他对 React、Vite 等的看法
- Svelte Radio: Routify 3 with Jake and Willow Svelte Radio 团队与 Routify 的维护者们一起讨论了刚刚发布的 Routify 3
- JS Party: 1Password 在最新一期 The Changelog 的 JS Party 中提到他们使用 Svelte 来驱动其页面内的建议工具
教育内容
- How I built a blog with Svelte and SvelteKit 是一个入门教程,带有代码示例,介绍如何使用 Svelte、SvelteKit 和渐进增强构建博客
- I built a decentralized chat dapp 教程展示了如何使用流行的 web3 技术(例如 GUN)构建去中心化的 Web 应用程序(dapp)
- Writing a Svelte Store with TypeScript 深入探讨了如何使用 TypeScript 编写 Svelte 存储
- How Svelte scopes component styles 解释了 Svelte 如何使用 class 和更复杂的 CSS 选择器进行样式作用域划分
- SvelteKit Hooks 展示了如何在 SvelteKit 中使用 hooks.js.. 完成后,请查看 Part 2
- An early look at SvelteKit 是来自 Infoworld 的文章,介绍了 SvelteKit 的特点和上手体验
库、工具和组件
- sveltekit-netlify-cms 是一个为 Netlify CMS 配置的 SvelteKit 框架应用程序基础模板
- SvelteFireTS 是一个基于 SvelteKit + TypeScript + Firebase 的库,灵感来自 Fireship.io
- stores-x 让你可以像 vueX 一样使用 Svelte stores
- sveltekit-snippets 是一个 VSCode 扩展,为 SvelteKit 和 Vanilla Svelte 中的常见模式提供代码片段
- svelte-xactor 是一个中间件,允许你轻松地将 xactor 状态机转换为实现 store 合约的全局存储
- vite-plugin-pages-svelte 是一个用于基于文件系统自动化路由的 Vite 插件
- sveltio 是一个基于 Svelte 的 valtio 包装器——一个代理状态库
- svelte-transition-classes 是一个自定义 Svelte 过渡,用于添加和替换 CSS 类
- Svelte-Boring-Avatars 是流行 React 项目 Boring Avatars 的 Svelte 实现
- Svelte DataTables 将 DataTable——一个受欢迎的 JavaScript 库——引入到 Svelte 项目中,便于用户以表格形式展示数据
- focus-svelte 是一个零依赖的 Svelte 焦点陷阱
- filedrop-svelte 是 Svelte 的文件拖放组件和操作
更多模板、插件和适配器,请访问社区站点 sveltesociety.dev,了解 Svelte 生态系统中的更多资源。
在结束之前,来响应演讲者招募吧!
Svelte Summit 秋季 2021(将于 2021 年 11 月 20 日举办)正在寻找演讲者。在 10 月 30 日之前提交你的演讲提案……欢迎所有人报名和参加。