跳至主要内容

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 配置允许您将其子文件夹的名称作为其 prerender index.html 文件的名称（#2632）
  • 现在可以使用 kit.methodOverride 覆盖 HTTP 方法（文档，#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 是一款为注意力缺陷多动障碍/自闭症人士设计的视觉例程计时器
  • 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 是一组 UI 原语，它们以干净的 HTML 和 CSS 开始
  • 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 测试 svelte 组件时获得更愉快的体验
  • @feltcoop/svelte-mutable-store 是一个用于可变值的 Svelte 存储，并具有 immutable 编译器选项
  • headless-svelte-ui 是一组无头组件，可用于构建 Svelte 应用。

我们错过了什么吗？需要帮助将您的下一个想法付诸实践于 Svelte 中吗？加入我们 Reddit 或 Discord。

下个月见！