2025 年 5 月 14 日

#Lynx 3.2 发布公告

石文涛

渲染团队工程主管 @ Lynx

Lynx 团队

lynxjs.org

今天，我很高兴地与大家分享我们自 2025 年 3 月开源以来第一个稳定版本 Lynx 3.2，现已正式发布！

Lynx 3.2 对框架、引擎和工具进行了全面更新，包括 ReactLynx 测试工具、llms.txt 支持、Grid 布局新特性、对 <list> 和 <text> 的优化等等，旨在为开发者带来更熟悉的开发体验和更多的能力。该版本拥有来自 61 位贡献者（包括一些首次贡献者）的超过 296 次提交。让我们一起来看看有哪些新特性！

#ReactLynx Testing Library

我们将 JavaScript 社区广受欢迎的 UI 组件测试工具 Testing Library 引入到了 Lynx 中。新增的 @lynx-js/react/testing-library/ 包提供了 render 等测试工具函数。同时，它也可以与官方的 @testing-library/jest-dom 搭配使用，让你能够使用 toBeInTheDocument 等匹配器来验证元素是否存在及其行为表现。

import '@testing-library/jest-dom';
import { expect, it } from 'vitest';
import { render } from '@lynx-js/react/testing-library';

it('renders', () => {
  const Wrapper = ({ children }) => (
    <view data-testid="wrapper">{children}</view>
  );
  const Comp = () => (
    <view data-testid="inner" style="background-color: yellow;" />
  );
  const { container, getByTestId } = render(<Comp />, { wrapper: Wrapper });

  expect(getByTestId('wrapper')).toBeInTheDocument();
  expect(container.firstChild).toMatchInlineSnapshot(`
    <view data-testid="wrapper">
      <view data-testid="inner" style="background-color: yellow;"/>
    </view>
  `);
});

了解更多关于 ReactLynx Testing Library 的使用指南。

#网站: llms.txt 支持

通过升级到 Rspress v2 并利用新的 LLM 插件，Lynx 网站现已完全支持 https://lynxjs.org/llms.txt 和 https://lynxjs.org/llms-full.txt，以帮助 AI 更好地理解 Lynx，提升你使用 AI 辅助编程的体验。对于每个页面，你都可以通过将 .html 扩展名替换为 .md 来获取原始的 markdown 文件。

了解更多关于 llms.txt 的信息。

#CSS 网格布局: minmax(), max-content, fit-content Web 友好

Lynx 3.2 添加了三个 CSS 函数 minmax()、max-content 和 fit-content，以帮助你在 CSS 网格布局中更好地控制网格大小。你可以在 grid-template-columns、grid-template-rows、grid-auto-columns 和 grid-auto-rows 中使用它们。

让我们来看一个三列布局的例子，使用 grid-template-columns: 20% max-content minmax(50px, max-content) 来实现：

• 第一列固定为容器宽度的 20%
• 第二列宽度自动适应其内容的最大宽度
• 第三列的宽度在最小 50px 和最大内容宽度之间动态调整，同时受容器宽度约束

csssrc/grid_layout/index.tsx

预览

#<list> 元件优化

#使用 item-snap 进行滚动吸附

使用 item-snap 滚动吸附 在 Lynx 3.2 中已经成为一个稳定特性。它可以在所有平台上提供了流畅且易用的分页功能，使开发者能够创建具有精确滚动交互的信息流或轮播图。

listsrc/horizontal-snap/index.tsx

预览

学习如何使用 item-snap 实现分页。

#新增 <list-item> 的 z-index 支持

增加对 <list-item> 上 z-index 的支持，能够更方便的调整列表项的视图层级。

listsrc/zIndex/index.tsx

预览

#<text> 可被定制为跨节点选择 Web 友好

在长文章场景下，通过新增的 custom-text-selection 特性，你可以 自定义实现跨文本节点的选择和复制功能，使文本选择体验更接近 Web。

textsrc/cross_text_selection/index.tsx

预览

#微任务 Web 友好

在 Lynx 3.2 之前，Lynx 并不支持微任务，以下代码的行为与Web 浏览器并不一致。Lynx 3.2 中支持了基于微任务的 Promise，并新增了 API lynx.queueMicrotask。

setTimeout(() => {
  console.log('this is a timeout, will exec after');
}, 0);

Promise.resolve().then((value) => {
  console.log('this is a Promise, will exec before');
});

3.2 之前 Lynx 运行结果	Chrome 运行结果

#console API 完善 Web 友好

Lynx 3.2 进一步实现了大部分符合 W3C 标准的 console API，提供了更全面的调试体验。更多详情请参阅 API 参考。

#Rspeedy: Rslib 与 Rspack 1.3

Rspeedy v0.9.0 已发布，默认打包库使用 Rslib，整体安装体积减少了超过 50%。同时该版本将 Rspack 升级至 1.3 带来了更多增强功能，例如更快的代码拆分、更小的打包体积、更低的内存消耗。此外，该版本还包含一些其他改进，如新增配置项等功能。有关这些更改的完整概述，请查看 @lynx-js/rspeedy v0.9.0 变更日志。

若要体验 Rspeedy v0.9.0 版本的新功能，您可以在 Rspeedy 项目中使用以下命令进行升级：

npx upgrade-rspeedy@latest

#DevTool 支持清晰度切换

使用过 DevTool 的 Lynx 开发者会发现 DevTool 的左侧有一个投屏区域，用于镜像显示调试设备上的 Lynx 页面。在新的版本中新增了一个分辨率切换开关，可切换至高清 (HD) 或标清 (SD) 模式。当设备连接不稳定时，可使用标清模式减少数据传输带宽，使画面更流畅。

如要体验该功能，访问 DevTool Release 记录 下载最新 Lynx DevTool 桌面应用程序。

#升级到 Lynx 3.2

#Android

参照官网接入 Lynx 到现有应用，更新 Lynx 以及 LynxService 依赖版本，完成 Lynx 3.2 版本升级。

在工程的 build.gradle 或 build.gradle.kts 中，升级 Lynx 依赖至如下版本：

dependencies {
    // lynx dependencies
    implementation "org.lynxsdk.lynx:lynx:3.2.0"
    implementation "org.lynxsdk.lynx:lynx-jssdk:3.2.0"
    implementation "org.lynxsdk.lynx:lynx-trace:3.2.0"
    implementation "org.lynxsdk.lynx:primjs:2.12.0"
}

在工程的 build.gradle 或 build.gradle.kts 中，升级 LynxService 依赖至如下版本：

dependencies {
    // lynx dependencies
    implementation "org.lynxsdk.lynx:lynx:3.2.0"
    implementation "org.lynxsdk.lynx:lynx-jssdk:3.2.0"
    implementation "org.lynxsdk.lynx:lynx-trace:3.2.0"
    implementation "org.lynxsdk.lynx:primjs:2.12.0"

    // integrating image-service
    implementation "org.lynxsdk.lynx:lynx-service-image:3.2.0"

    // image-service dependencies, if not added, images cannot be loaded; if the host APP needs to use other image libraries, you can customize the image-service and remove this dependency
    implementation "com.facebook.fresco:fresco:2.3.0"
    implementation "com.facebook.fresco:animated-gif:2.3.0"
    implementation "com.facebook.fresco:animated-webp:2.3.0"
    implementation "com.facebook.fresco:webpsupport:2.3.0"
    implementation "com.facebook.fresco:animated-base:2.3.0"

    // integrating log-service
    implementation "org.lynxsdk.lynx:lynx-service-log:3.2.0"

    // integrating http-service
    implementation "org.lynxsdk.lynx:lynx-service-http:3.2.0"

    implementation "com.squareup.okhttp3:okhttp:4.9.0"

}

#iOS

在项目的 Podfile 中，更新 Lynx 依赖至如下版本：

source 'https://cdn.cocoapods.org/'

platform :ios, '10.0'

target 'YourTarget' do
pod 'Lynx', '3.2.0', :subspecs => [
'Framework',
]

pod 'PrimJS', '2.12.0', :subspecs => ['quickjs', 'napi']
end

在项目的 Podfile 中，更新 LynxService 依赖至如下版本：

source 'https://cdn.cocoapods.org/'
platform :ios, '10.0'
target 'YourTarget' do
  pod 'Lynx', '3.2.0', :subspecs => [
    'Framework',
  ]
  pod 'PrimJS', '2.12.0', :subspecs => ['quickjs', 'napi']
  # integrate image-service, log-service, and http-service
  pod 'LynxService', '3.2.0', :subspecs => [
      'Image',
      'Log',
      'Http',
  ]

  # ImageService
  pod 'SDWebImage','5.15.5'
  pod 'SDWebImageWebPCoder', '0.11.0'

end

#写在最后

感谢 Lynx 社区全体成员对 Lynx 3.2 版本发布的支持！Lynx 作为一个开源项目的新成员，我们对其未来满怀憧憬，也迫切地期待社区成员基于 Lynx 开发的应用程序早日亮相。

未来，我们将与社区携手共进，按规划陆续推出更多功能支持，例如新增 Input 等组件、适配鸿蒙与 PC 等更多平台。

请查阅版本说明和更新，开启您全新的 Lynx 开发构建之旅！

感谢黄玄、张磊和刘守群在撰写此博客时提供的帮助。