feat(react): add react-main-thread-function example

[Yradex]

Summary by CodeRabbit

• New Features

  • Added a new example project showcasing React development with main-thread integration, including sample application code, styling, and configuration.

• Chores

  • Updated CI/CD workflows to include the new example project in automated build analysis and monitoring.

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).
• Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2ab5fe4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

A new React example project named react-main-thread-function is introduced to the repository, including configuration files, TypeScript setup, package manifest, and source components. The project is registered in CI/CD workflows for bundling and relative size analysis.

Changes

Cohort / File(s)	Summary
GitHub Actions Workflows .github/workflows/relative-ci.yml, .github/workflows/workflow-bundle-analysis.yml	Added new project entry to CI matrices for bundle analysis tracking with path ./examples/react-main-thread-function and name example-react-main-thread-function.
Build Configuration examples/react-main-thread-function/lynx.config.js, examples/react-main-thread-function/tsconfig.json	Introduced Lynx RSBuild configuration with React Lynx and QRCode plugins, bundle analysis environment flag support, and TypeScript configuration extending root config with React JSX support via @lynx-js/react.
Project Manifest examples/react-main-thread-function/package.json	Created package manifest for ES module project with build scripts (rspeedy build, rspeedy dev), dependencies on @lynx-js/react, and devDependencies for Lynx ecosystem tools and React types.
Type Declarations examples/react-main-thread-function/src/rspeedy-env.d.ts	Added TypeScript ambient type reference to @lynx-js/rspeedy/client type declarations.
React Application examples/react-main-thread-function/src/App.tsx, examples/react-main-thread-function/src/index.tsx, examples/react-main-thread-function/src/App.css	Implemented React component with Lynx primitives, main-thread event binding, logo rotation animation, and application bootstrap logic with HMR support; added stylesheet with layout, typography, and animation definitions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat: add @lynx-js/preact-devtools to create-rspeedy #1593: Both PRs integrate @lynx-js/preact-devtools into example React projects via imports and devDependency declarations.

Suggested labels

framework:React

Suggested reviewers

• colinaaa
• gaoachao
• upupming

Poem

🐰 A new example hops along the way,
With React Lynx components to display,
Main-thread functions spinning bright,
QR codes and stylesheets just right,
Fresh configs bundled for the test array! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a new React example for main-thread-function functionality.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[codspeed-hq]

Merging this PR will improve performance by 16.7%

⚡ 1 improved benchmark
✅ 62 untouched benchmarks
⏩ 3 skipped benchmarks¹

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡	transform 1000 view elements	47.3 ms	40.5 ms	+16.7%

---

_{Comparing Yradex:mtf-example (2ab5fe4) with main (9033e2d)}

Footnotes

1. 3 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[relativeci]

Web Explorer

#7803 Bundle Size — 383.74KiB (0%).

2ab5fe4(current) vs 9033e2d main#7787(baseline)

Bundle metrics   1 change

	Current #7803	Baseline #7787
Initial JS	154.88KiB	154.88KiB
Initial CSS	35.06KiB	35.06KiB
Cache Invalidation	0%	0%
Chunks	8	8
Assets	8	8
Modules	238(+0.42%)	237
Duplicate Modules	16	16
Duplicate Code	2.99%	2.99%
Packages	4	4
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #7803	Baseline #7787
JS	252.83KiB	252.83KiB
Other	95.85KiB	95.85KiB
CSS	35.06KiB	35.06KiB

Bundle analysis report Branch Yradex:mtf-example Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

examples/react-main-thread-function/lynx.config.js (1)

5-5: Prefer explicit env parsing for bundle-analysis flag.

!!process.env['RSPEEDY_BUNDLE_ANALYSIS'] treats "0"/"false" as enabled. Explicit checks avoid accidental profiling.

Proposed fix

-const enableBundleAnalysis = !!process.env['RSPEEDY_BUNDLE_ANALYSIS'];
+const enableBundleAnalysis = ['1', 'true'].includes(
+  String(process.env['RSPEEDY_BUNDLE_ANALYSIS']).toLowerCase(),
+);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/react-main-thread-function/lynx.config.js` at line 5, The current
enableBundleAnalysis flag uses loose truthiness (const enableBundleAnalysis =
!!process.env['RSPEEDY_BUNDLE_ANALYSIS']) which treats "0"/"false" as true;
change it to explicit parsing by checking the env string value (for example
compare against "1" or lowercased "true") when setting enableBundleAnalysis so
only intended values enable the feature; update the const enableBundleAnalysis
initialization accordingly.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@examples/react-main-thread-function/lynx.config.js`:
- Around line 11-13: The schema(url) helper currently always appends
"?fullscreen=true", which breaks URLs that already contain query parameters;
update the schema(url) function to detect if url includes an existing "?" and
append "&fullscreen=true" in that case (otherwise use "?fullscreen=true"),
ensuring you preserve any existing query string or fragment when returning the
final URL.

In `@examples/react-main-thread-function/src/App.css`:
- Line 57: The CSS defines keyframes named Logo--spin and Logo--shake that are
unused and violate stylelint; either delete both `@keyframes` rules if animations
are handled via the Web Animations API in App.tsx, or rename them to kebab-case
(logo-spin and logo-shake) and update any future references accordingly; ensure
no leftover references to Logo--spin or Logo--shake remain in the codebase after
the change.

In `@examples/react-main-thread-function/src/index.tsx`:
- Line 5: Update the import in index.tsx to reference the actual TypeScript
React file: change the import of App (the statement "import { App } from
'./App.jsx'") to import from './App' (remove the .jsx extension) so it resolves
to App.tsx and fixes type-checking/build resolution issues.

---

Nitpick comments:
In `@examples/react-main-thread-function/lynx.config.js`:
- Line 5: The current enableBundleAnalysis flag uses loose truthiness (const
enableBundleAnalysis = !!process.env['RSPEEDY_BUNDLE_ANALYSIS']) which treats
"0"/"false" as true; change it to explicit parsing by checking the env string
value (for example compare against "1" or lowercased "true") when setting
enableBundleAnalysis so only intended values enable the feature; update the
const enableBundleAnalysis initialization accordingly.

---

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9033e2d and 2ab5fe4.

⛔ Files ignored due to path filters (4)

• examples/react-main-thread-function/src/assets/arrow.png is excluded by !**/*.png
• examples/react-main-thread-function/src/assets/lynx-logo.png is excluded by !**/*.png
• examples/react-main-thread-function/src/assets/react-logo.png is excluded by !**/*.png
• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (9)

• .github/workflows/relative-ci.yml
• .github/workflows/workflow-bundle-analysis.yml
• examples/react-main-thread-function/lynx.config.js
• examples/react-main-thread-function/package.json
• examples/react-main-thread-function/src/App.css
• examples/react-main-thread-function/src/App.tsx
• examples/react-main-thread-function/src/index.tsx
• examples/react-main-thread-function/src/rspeedy-env.d.ts
• examples/react-main-thread-function/tsconfig.json