为客户端渲染做贡献
@remotion/web-renderer 的代码位于 packages/web-renderer 文件夹中。
在运行任何这些命令之前，请先进行 主要设置。
🌐 The code for @remotion/web-renderer is located in the packages/web-renderer folder.
Before running any of these commands, do the main setup.
在观察模式下开发
🌐 Developing in watch mode
要开发网页渲染器，你可以使用观察模式：
🌐 To develop the web renderer, you can use the watch mode:
In ./bun run watchwebrenderer
当你对代码进行更改时，这将自动重建该包。
🌐 This will automatically rebuild the package when you make changes to the code.
运行测试
🌐 Running tests
此包使用测试驱动开发。更改通过 Vitest 浏览器模式 进行测试。
🌐 This package uses test-driven development. Changes are tested using Vitest Browser Mode.
首先，你需要安装浏览器依赖：
🌐 First you need to install the browser dependencies:
In packages/web-rendererbunx playwright install --with-deps
然后你可以运行测试：
🌐 Then you can run the tests:
bun run testwebrenderer要只运行特定的测试文件，你可以指定文件名：
🌐 To only run a specific test file, you can specify the file name:
bunx vitest src/test/video.test.tsx要只运行特定测试，你可以将 test() 改为 test.only()。
🌐 To only run a specific test, you can change test() to test.only().
要仅在特定浏览器中运行测试，你可以指定浏览器名称：
🌐 To only run the test in a specific browser, you can specify the browser name:
bunx vitest --browser chromium
bunx vitest --browser firefox
bunx vitest --browser webkit添加对新样式的支持
🌐 Adding support for new styles
要修复视觉错误或添加对新 CSS 属性的支持，首先获取一些看起来不正确的标记，然后将其添加到 packages/web-renderer/src/test/fixtures 文件夹中。
🌐 To fix a visual bug or add support for a new CSS property, first obtain some markup that does not look correct, then add it to the packages/web-renderer/src/test/fixtures folder.
还将其添加到 packages/web-renderer/src/test/Root.tsx，以便在 Studio（bun run studio）中呈现 —— 你可以轻松地将其与服务器端渲染进行比较，或查看浏览器是如何呈现的。
🌐 Also add it to packages/web-renderer/src/test/Root.tsx so it is rendered in the Studio (bun run studio) - you can easily compare it to a server-side render or see how the browser renders it.
然后添加一个新的测试（示例: packages/web-renderer/src/test/transforms.test.tsx），在 3 个不同的浏览器中渲染该夹具并截图。
🌐 Then add a new test (Example: packages/web-renderer/src/test/transforms.test.tsx) that renders the fixture in 3 different browsers and makes a screenshot of it.
在运行测试时，第一次会失败。这是因为预期的截图尚不可用，但它将在第一次运行时生成。
🌐 When running the tests, it will fail the first time. This is because the expected screenshot is not yet available, but it will be generated the first time.
更新 packages/web-renderer/src/drawing 中的代码，为网页渲染器添加新功能，然后再次运行测试。
🌐 Update the code in packages/web-renderer/src/drawing to add a new feature to the web renderer and run the tests again.
一旦截图看起来符合预期，删除最初创建的截图，然后重新运行测试以生成新的截图。提交它们并发送一个拉取请求！
🌐 Once the screenshots look like they should, delete the screenshots originally created and run the tests again to generate new ones. Commit them and send a PR!
还要更新 /docs/client-side-rendering/limitations.mdx 文档，以记录你添加的支持。
🌐 Also update the /docs/client-side-rendering/limitations.mdx documentation to document the support you added.
像 Claude Code 这样的 AI 代理可以帮助你完成大部分工作。这是一个示例提示，它为文本添加了字母间距和文本转换的支持：
🌐 AI Agents like Claude Code can help you do most of this work. This is an example prompt that adds support for letter spacing and text transform for text:
在 packages/web-renderer/src/test/text.test.tsx 中，有用于绘制文本的测试。这在 packages/web-renderer/src/drawing/text/handle-text-node.ts 中实现，并且在 packages/web-renderer/src/test/Root.tsx 中添加了一个测试夹具。添加对字母间距和文本转换的支持，并添加测试！
记得审核 AI 生成的代码并进行微调。
我们不会处理马虎、未经过筛选的 AI PR。
🌐 Remember to review AI-generated code and finetune it.
Sloppy, unfiltered AI PRs will not be processed by us.
启用工作室渲染按钮
🌐 Enabling the Studio Render Button
在你的 remotion.config.ts 中启用实验性的客户端渲染标志：
🌐 Enable the experimental client-side rendering flag in your remotion.config.ts:
import {Config} from '@remotion/cli/config';
Config.setExperimentalClientSideRenderingEnabled(true);或者在启动 Studio 时传递 --enable-experimental-client-side-rendering 标志：
🌐 Or pass the --enable-experimental-client-side-rendering flag when starting the Studio:
npx remotion studio --enable-experimental-client-side-rendering现在，在 packages/example 中，以及在任何模板中，你都会看到一个“在网页上渲染”按钮。
🌐 Now, in packages/example, and in any template, you will see a "Render on web" button.
另请参阅
🌐 See also