fix(react): MTF variable capture in class components

[Yradex]

Summary by CodeRabbit

• Bug Fixes
  • Fixed captured variables in main-thread functions inside class components so they update correctly.
• Refactor
  • Certain class-level worklets are now exposed via computed accessors instead of initialized fields, which may change initialization timing.
• Tests
  • Added/updated tests and snapshots covering class methods and class properties capture scenarios.

Problem

Main-thread worklets inside class components could read stale captured values (e.g. this.a in onTapLepus), because:

• For TransformTarget::JS, worklet ctx objects are later transformed into functions and invoked with this bound to the ctx object, not the component instance.
• When the transform emits a class field initializer like onTapLepus = { ... a: this.a }, captured values (this.a, or _c for lexical/module vars) are computed once during construction, then remain frozen on the ctx.

This breaks cases like onTapLepus reading the latest this.a / updated module variables.

What changed

• swc_plugin_worklet: For TransformTarget::JS, non-static class members that are worklets now emit a getter (get onTapLepus() { return { ... } }) when the worklet captures anything (_c / extracted this.xxx / _jsFn), so the ctx object is re-created on each access.
• Added helper predicates on the identifier collector to detect whether _c / this / _jsFn captures exist.
• Coverage: applies to both
  • class methods: class A { onTapLepus(e) { "main thread"; ... } }
  • class properties: class A { onTapLepus = (e) => { "main thread"; ... } }
• Intentionally JS-only: we do not emit getters for LEPUS/MIXED because the lepus registration path writes this["onTapLepus"] = ..., which can conflict with getter-only accessors.

Tests

• Updated existing snapshots:
  • should_transform_in_class_js
  • should_transform_in_class_property_js
• Added new snapshot tests to ensure “capture non-this values” also triggers getter:
  • should_transform_in_class_js_capture_values
  • should_transform_in_class_property_js_capture_values

How to review

1. Start at packages/react/transform/crates/swc_plugin_worklet/lib.rs:
   • WorkletVisitor::visit_mut_class_member:
     • method branch: when/why it becomes get onTapLepus()
     • class property branch: same rule for onTapLepus = (...) => { ... }
2. Check the new “has captured” predicates in packages/react/transform/crates/swc_plugin_worklet/extract_ident.rs.
3. Review snapshots under packages/react/transform/crates/swc_plugin_worklet/tests/__swc_snapshots__/lib.rs/ and confirm JS output now uses getter in the capture cases.
4. Sanity-check that LEPUS output is unchanged for class methods (still a class field worklet ctx object) to avoid runtime assignment issues.

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]

🦋 Changeset detected

Latest commit: 9d3d256

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@lynx-js/react	Patch

Not sure what this means? Click here to learn what changesets are.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a patch changeset and three accessor methods to the identifier extractor; refactors class-member worklet transformation to explicitly handle class methods and class properties (including converting fields to getters for JS targets when captures are present) and updates/adds snapshot tests for these code paths.

Changes

Cohort / File(s)	Summary
Release documentation \.changeset/yummy-memes-punch.md	Patch changeset documenting fix for captured variables in main-thread functions within class components.
Identifier extraction utilities packages/react/transform/crates/swc_plugin_worklet/extract_ident.rs	Added three public accessor methods (has_extracted_values_props, has_extracted_this_props, has_extracted_js_fns) to check presence/content of extracted identifier collections.
Worklet transformation logic packages/react/transform/crates/swc_plugin_worklet/lib.rs	Refactored visit_mut_class_member to match on ClassMember variants, handle Method and ClassProp specially: run ident collection, compute worklet type, optionally generate dynamic getters for JS targets, transform worklet bodies, and push top-level registration statements.
Test snapshots packages/react/transform/crates/swc_plugin_worklet/tests/__swc_snapshots__/lib.rs/should_transform_in_class_js.js, .../should_transform_in_class_js_capture_values.js, .../should_transform_in_class_property_js.js, .../should_transform_in_class_property_js_capture_values.js	Updated and added snapshots verifying getter-based transformations for class methods and properties and handling of captured values.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• fix(react): resolve early 'this' access issue in main thread functions #2194: Modifies swc_plugin_worklet class-member transformation and captured this/props handling, closely related to the changes here.

Suggested reviewers

• gaoachao
• colinaaa
• upupming

Poem

🐇 I hop through code with nimble paws and cheer,
I turn fields to getters so captures appear,
Values stay fresh on each eager call,
Worklets dance lightly, no pitfalls at all,
A tiny rabbit applauds this fix — hooray! 🎉

🚥 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
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'fix(react): MTF variable capture in class components' clearly and specifically summarizes the main change: fixing variable capture for main-thread function (MTF) worklets in class components.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 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

❌ Patch coverage is 78.92720% with 55 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...s/react/transform/crates/swc_plugin_worklet/lib.rs	94.63%	11 Missing ⚠️
....rs/should_transform_in_class_js_capture_values.js	0.00%	11 Missing ⚠️
...__/lib.rs/should_transform_in_class_property_js.js	0.00%	11 Missing ⚠️
...d_transform_in_class_property_js_capture_values.js	0.00%	11 Missing ⚠️
...snapshots__/lib.rs/should_transform_in_class_js.js	0.00%	8 Missing ⚠️
...ansform/crates/swc_plugin_worklet/extract_ident.rs	80.00%	3 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@packages/react/transform/crates/swc_plugin_worklet/lib.rs`:
- Around line 138-149: Clippy flags the redundant .into() call on the BlockStmt
construction assigned to getter_fn.body; remove the unnecessary conversion so
you construct the BlockStmt and provide it in the expected form (i.e., avoid
calling .into() on the BlockStmt literal) while keeping the ReturnStmt.into()
as-is; update the expression that assigns getter_fn.body (the BlockStmt { ...
}.into() portion) to directly use the BlockStmt in the type expected by
getter_fn.body, referencing GetterFn.body, BlockStmt, ReturnStmt, and
worklet_object_expr to locate the code.
- Around line 256-267: The BlockStmt construction used for the class property
getter is being unnecessarily converted with an extra .into() causing a clippy
lint; locate the body: Some(BlockStmt { ... .stmts: vec![ReturnStmt { ... arg:
Some(worklet_object_expr), } .into()], } .into(),) expression and remove the
redundant .into() on the BlockStmt (leave the BlockStmt value or a single
appropriate conversion), so the BlockStmt is not double-converted while keeping
the ReturnStmt and worklet_object_expr usage intact.

[codspeed-hq]

Merging this PR will degrade performance by 8.72%

❌ 1 regressed benchmark
✅ 62 untouched benchmarks
⏩ 3 skipped benchmarks¹

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
❌	transform 1000 view elements	42.2 ms	46.3 ms	-8.72%

---

_{Comparing Yradex:wt/fix-mtf-component-not-updating-20260205 (9d3d256) with main (f9f0987)}

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

#7548 Bundle Size — 383.72KiB (0%).

9d3d256(current) vs f9f0987 main#7546(baseline)

Bundle metrics  no changes

	Current #7548	Baseline #7546
Initial JS	154.88KiB	154.88KiB
Initial CSS	35.05KiB	35.05KiB
Cache Invalidation	0%	0%
Chunks	8	8
Assets	8	8
Modules	237	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 #7548	Baseline #7546
JS	252.83KiB	252.83KiB
Other	95.85KiB	95.85KiB
CSS	35.05KiB	35.05KiB

Bundle analysis report Branch Yradex:wt/fix-mtf-component-not-... Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}