feat(react): add createPortal support

[upupming]

Note

Depends on #2500 (ref-apply dedup) for the idiomatic ref={setState} pattern; the skipped test block flips to describe once #2500 lands.

Summary

• createPortal(children, container) from @lynx-js/react. container is a ref to a ReactLynx element marked with the new portal-container attribute.
• New compile-time attribute portal-container — SWC pre-pass (swc_plugin_portal_container) emits a snapshot with a single empty slot at element_index 0, which is exactly what createPortal validates.

Usage

function App() {
  const hostRef = useRef(null);
  const [host, setHost] = useState(null);
  useEffect(() => setHost(hostRef.current), []);
  return (
    <view>
      <view portal-container ref={hostRef} />
      {host && createPortal(<text>hi</text>, host)}
    </view>
  );
}

• portal-container element must have no children (compile error otherwise).
• Only static-truthy values transform; ={false} / dynamic exprs are no-ops.
• Null/undefined container renders nothing (mirrors ReactDOM).
• Refs from lynx.createSelectorQuery() or third-party sources throw.

Notes

• Context propagates across the portal; events do not bubble through the React tree (preact has no synthetic event system) — they follow the physical element tree.
• delay.ts stays cycle-free by keeping only refProxyRefAttr: WeakMap<object, [siId, expIndex]>; snapshot/refProxyBackgroundSnapshotInstance.ts composes it with the snapshot manager.

Test plan

• pnpm --filter @lynx-js/react-runtime test (coverage 100% on portals.ts)
• pnpm --filter @lynx-js/react-testing-library test — block (A) 11/11 green
• cargo test -p swc_plugin_portal_container -p swc_plugin_snapshot
• pnpm run api-extractor
• fix(react): handle ref changes across rerenders before hydration #2500 merged, describe.skip flipped

[changeset-bot]

🦋 Changeset detected

Latest commit: e0f4a9f

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

This PR includes changesets to release 2 packages

Name	Type
@lynx-js/react	Patch
@lynx-js/react-umd	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]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6f5cb09b-47da-4e04-abd8-9e406b928aa0

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/support-portal

---

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 58.29596% with 93 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...ted_portal_container_extracts_separate_snapshot.js	0.00%	38 Missing ⚠️
...ransform/crates/swc_plugin_portal_container/lib.rs	83.47%	20 Missing ⚠️
...andalone_portal_container_emits_slot_at_index_0.js	0.00%	16 Missing ⚠️
...orthand_attribute_wraps_child_in_expr_container.js	0.00%	4 Missing ⚠️
packages/react/transform/src/lib.rs	0.00%	4 Missing ⚠️
...es/react/transform/swc-plugin-reactlynx/src/lib.rs	0.00%	4 Missing ⚠️
...apshots__/lib.rs/without_attribute_is_untouched.js	0.00%	3 Missing ⚠️
...s/dynamic_value_is_stripped_but_not_transformed.js	0.00%	1 Missing ⚠️
...s/literal_false_is_stripped_but_not_transformed.js	0.00%	1 Missing ⚠️
..._snapshots__/lib.rs/literal_true_is_transformed.js	0.00%	1 Missing ⚠️
... and 1 more

📢 Thoughts on this report? Let us know!

[codspeed-hq]

Merging this PR will improve performance by 8.86%

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 1 improved benchmark
✅ 80 untouched benchmarks
⏩ 26 skipped benchmarks¹

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡	002-hello-reactLynx-destroyBackground	893.7 µs	821 µs	+8.86%

---

_{Comparing feat/support-portal (e0f4a9f) with main (b1809ef)}

Footnotes

1. 26 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

#9242 Bundle Size — 900.02KiB (0%).

e0f4a9f(current) vs b1809ef main#9240(baseline)

Bundle metrics   2 changes

	Current #9242	Baseline #9240
Initial JS	44.46KiB	44.46KiB
Initial CSS	2.22KiB	2.22KiB
Cache Invalidation	0%	0%
Chunks	9	9
Assets	11	11
Modules	229(+0.88%)	227
Duplicate Modules	11	11
Duplicate Code	27.28%(-0.04%)	27.29%
Packages	10	10
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #9242	Baseline #9240
JS	495.88KiB	495.88KiB
Other	401.92KiB	401.92KiB
CSS	2.22KiB	2.22KiB

Bundle analysis report Branch feat/support-portal Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

React Example

#7669 Bundle Size — 225.43KiB (+0.02%).

e0f4a9f(current) vs b1809ef main#7667(baseline)

Bundle metrics   4 changes 1 regression

	Current #7669	Baseline #7667
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	35.33%	0%
Chunks	0	0
Assets	4	4
Modules	181(+1.12%)	179
Duplicate Modules	70(+1.45%)	69
Duplicate Code	44.61%(+0.09%)	44.57%
Packages	2	2
Duplicate Packages	0	0

Bundle size by type   1 change 1 regression

	Current #7669	Baseline #7667
IMG	145.76KiB	145.76KiB
Other	79.67KiB (+0.06%)	79.63KiB

Bundle analysis report Branch feat/support-portal Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

React MTF Example

#801 Bundle Size — 196.59KiB (+0.03%).

e0f4a9f(current) vs b1809ef main#799(baseline)

Bundle metrics   4 changes 1 regression

	Current #801	Baseline #799
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	43.4%	0%
Chunks	0	0
Assets	3	3
Modules	175(+1.16%)	173
Duplicate Modules	67(+1.52%)	66
Duplicate Code	44.12%(+0.09%)	44.08%
Packages	2	2
Duplicate Packages	0	0

Bundle size by type   1 change 1 regression

	Current #801	Baseline #799
IMG	111.23KiB	111.23KiB
Other	85.36KiB (+0.06%)	85.31KiB

Bundle analysis report Branch feat/support-portal Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

React External

#785 Bundle Size — 684.64KiB (+0.64%).

e0f4a9f(current) vs b1809ef main#783(baseline)

Bundle metrics   1 change

	Current #785	Baseline #783
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	39.7%	0%
Chunks	0	0
Assets	3	3
Modules	17	17
Duplicate Modules	5	5
Duplicate Code	8.59%	8.59%
Packages	0	0
Duplicate Packages	0	0

Bundle size by type   1 change 1 regression

	Current #785	Baseline #783
Other	684.64KiB (+0.64%)	680.27KiB

Bundle analysis report Branch feat/support-portal Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}