Skip to main content

Svelte 的新变化：2022 年 2 月

Svelte、SvelteKit 及社区的快速更新

Dani Sandoval

大家好！二月快乐！在过去的一个月里，我们见证了 Svelte 和 SvelteKit 快速发展、社区规则的更新（包括 Reddit、GitHub 和 Discord），还有许多令人惊叹的应用、教程和库。

让我们看看亮点吧……

Svelte 更新日志的亮点

SvelteKit 的新变化

  • inlineStyleThreshold 允许您指定内联样式表插入页面的位置（文档，#2620）
  • beforeNavigate / afterNavigate 生命周期函数允许您在页面导航之前或之后添加功能（文档，#3293）
  • 平台上下文现可以从适配器中传递（文档，#3429）
  • 钩子中的 resolve 现在有一个 ssr 参数，可以更轻松地在需要时跳过 SSR（文档，#2804）
  • $page.stuff 为页面提供了一种将数据“向上”传递给布局的机制（文档，#3252）
  • 穿透路由允许您指定在路由无法加载时的重定向路径（#3217）

新配置

  • 内容安全策略（CSP）现已支持，以在使用内联 JavaScript 或样式表时增加安全性（文档，#3499）
  • kit.routes 配置允许您在构建过程中自定义公共/私有模块（#3576）
  • prerender.createIndexFiles 配置允许您将 index.html 文件预渲染为其子文件夹的名称（#2632）
  • HTTP 方法现在可以通过 kit.methodOverride 覆盖（文档，#2989）

配置更改

  • config.kit.hydrate 和 config.kit.router 现在嵌套在 config.kit.browser 下（#3578）

重大更改

  • 在端点和钩子中使用 Request 和 Response 对象（#3384）

社区展示

应用和网站

  • timb(re) 是一个实时音乐编程环境
  • Music for Programming 是一系列混音，用于在完成 ${task} 时集中大脑和启发思维
  • Team Tale 允许两个作者以接力的方式共同编写一个故事
  • Puzzlez 是一个在线玩数独和 Wordle 的地方
  • Closed Caption Creator 让您在 Windows、Mac 和 Google Chrome 上轻松为视频添加字幕
  • SC3Lab 是一个用于实验 svelte-cubed 和 three.js 的代码生成器
  • Donkeytype 是一个极简且轻量的打字测试工具，灵感来自 Monkeytype
  • Above 是一个为 ADHD/自闭症人群设计的可视化例行计时器
  • base.report 是一个现代化的研究平台，面向严肃投资者
  • String 将您的手机变成一个安全的便携式音频记录器，让您轻松捕捉和分享个人笔记、家庭时刻、课堂讲座等
  • The Raytracer Challenge REPL 提供一个实时编辑器界面，用于配置光线追踪场景并在现代浏览器中实时渲染
  • awesome-svelte-kit 是关于 SvelteKit 的优秀案例合集
  • Map Projection Explorer 让您可以探索不同的地图投影及其差异
  • Rubiks 是一个魔方模拟器
  • Pianisto 是一个使用 SVG、ToneJS 和大量耐心制作的钢琴项目

想参与 SvelteKit 网站工作？试试为 Svelte Society 网站贡献代码。

学习和资源

阅读

观看

收听

库、工具与组件

  • threlte 是 Svelte 的 three.js 组件库
  • svelte-formify 是一个使用装饰器定义验证规则的表单管理和验证库
  • gQuery 是一个用于 Svelte Kit 的 GraphQL 抓取器与缓存工具
  • Unlock-protocol 是一个与 MetaMask、Firebase 和付费墙客户集成的工具
  • AgnosticUI 是一套从干净 HTML 和 CSS 开始的 UI 原件
  • Vitebook 是一个由 Vite 驱动的快速轻量 Storybook 替代方案
  • SwyxKit 是一个用于 SvelteKit + Tailwind + Netlify 的博客起始模板（2022 年更新版！）
  • svelte-themes 是 SvelteKit 应用程序中的主题抽象工具
  • svelte-transition 是一个 Svelte 组件，用于简化基于 CSS 类的过渡效果的使用，特别适合与 TailwindCSS 搭配使用
  • Svelte Inview 是一个 Svelte 动作，用于监控元素何时进入或离开视口/父元素
  • svelte-inline-compile 是一个 Babel 转换插件，优化使用 Jest 和 @testing-library/svelte 测试组件的体验
  • @feltcoop/svelte-mutable-store 是 Svelte 的一个可变值 store，带有 immutable 编译器选项
  • headless-svelte-ui 是一组无头组件，可用于构建 Svelte 应用程序

我们漏掉了什么吗？需要帮助实现您的下一个 Svelte 想法吗？加入 Reddit 或 Discord 与我们互动。

下月见！