feat(react): introduce `@lynx-js/react/debug` #1250

colinaaa · 2025-07-08T12:08:45Z

Summary

Integrate with preact/debug.

A new exports @lynx-js/react/debug has been added.

import '@lynx-js/react/debug';
import { root } from '@lynx-js/react';

import { App } from './App.jsx';

root.render(
  <App />,
);

close: m-6732088176

Checklist

Tests updated (or not required).
Documentation updated (or not required).

changeset-bot · 2025-07-08T12:08:49Z

🦋 Changeset detected

Latest commit: 1dc889d

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

This PR includes changesets to release 6 packages

Name	Type
create-rspeedy	Patch
@lynx-js/react	Patch
@lynx-js/react-alias-rsbuild-plugin	Patch
@lynx-js/react-rsbuild-plugin	Patch
upgrade-rspeedy	Patch
@lynx-js/rspeedy	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

codspeed-hq · 2025-07-08T12:44:50Z

CodSpeed Performance Report

Merging #1250 will not alter performance

_{Comparing colinaaa:colin/0708/debug (1dc889d) with main (b0765ae)}

Summary

✅ 10 untouched benchmarks

relativeci · 2025-07-08T13:00:16Z

Web Explorer

#2714 Bundle Size — 259.2KiB (0%).

1dc889d(current) vs b0765ae main#2703(baseline)

Bundle metrics

1 change

	Current #2714	Baseline #2703
Initial JS	`141.05KiB`	`141.05KiB`
Initial CSS	`31.88KiB`	`31.88KiB`
Cache Invalidation	`0%`	`0%`
Chunks	`4`	`4`
Assets	`4`	`4`
Modules	`209`(`-0.48%`)	`210`
Duplicate Modules	`17`	`17`
Duplicate Code	`4.15%`	`4.15%`
Packages	`4`	`4`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #2714	Baseline #2703
JS	`227.32KiB`	`227.32KiB`
CSS	`31.88KiB`	`31.88KiB`

Bundle analysis report Branch colinaaa:colin/0708/debug Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2025-07-08T13:00:20Z

React Example

#2723 Bundle Size — 234.18KiB (+0.03%).

1dc889d(current) vs b0765ae main#2712(baseline)

Bundle metrics

3 changes

1 regression

	Current #2723	Baseline #2712
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`37.74%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`155`(`+1.31%`)	`153`
Duplicate Modules	`62`(`+1.64%`)	`61`
Duplicate Code	`45.85%`	`45.85%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type

1 change

1 regression

	Current #2723	Baseline #2712
IMG	`145.76KiB`	`145.76KiB`
Other	`88.43KiB` (`+0.07%`)	`88.37KiB`

Bundle analysis report Branch colinaaa:colin/0708/debug Project dashboard

^{Generated by RelativeCI Documentation Report issue}

colinaaa · 2025-07-08T15:02:12Z

bugbot run

cursor

✅ BugBot reviewed your changes and found no bugs!

BugBot free trial expires on July 22, 2025
You have used $0.00 of your $0.00 spend limit so far. Manage your spend limit in the Cursor dashboard.

Was this report helpful? Give feedback by reacting with 👍 or 👎

upupming

Do we need some test case to ensure preact/debug work as expected?

packages/react/runtime/debug/index.cjs

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/[email protected] ### Patch Changes - Optimize `componentAtIndex` by a few hundreds microseconds: avoiding manipulate `__pendingListUpdates` unless SnapshotInstance tree is changed ([#1201](#1201)) - Support alog of component rendering on production for better error reporting. Enable it by using `REACT_ALOG=true rspeedy dev/build` or defining `__ALOG__` to `true` in `lynx.config.js`: ([#1164](#1164)) ```js export default defineConfig({ // ... source: { define: { __ALOG__: true, }, }, }); ``` - Make `preact/debug` work with `@lynx-js/react`. ([#1222](#1222)) - Introduce `@lynx-js/react/debug` which would include debugging warnings and error messages for common mistakes found. ([#1250](#1250)) Add the import to `@lynx-js/react/debug` at the first line of the entry: ```js import "@lynx-js/react/debug"; import { root } from "@lynx-js/react"; import { App } from "./App.jsx"; root.render(<App />); ``` - `<list-item/>` deferred now accepts an object with `unmountRecycled` property to control unmounting behavior when the item is recycled. ([#1302](#1302)) For example, you can use it like this: ```jsx <list-item defer={{ unmountRecycled: true }} item-key="1"> <WillBeUnmountIfRecycled /> </list-item> ``` Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios. - Avoid some unexpected `__SetAttribute` in hydrate when `undefined` is passed as an attribute value to intrinsic elements, for example: ([#1318](#1318)) ```jsx <image async-mode={undefined} /> ``` ## @lynx-js/[email protected] ### Patch Changes - Bump Rsbuild v1.4.6 with Rspack v1.4.8. ([#1282](#1282)) ## [email protected] ### Patch Changes - Add `import '@lynx-js/react/debug'` for all templates. ([#1250](#1250)) ## @lynx-js/[email protected] ### Patch Changes - Fix "TypeError: cannot read property 'call' of undefined" error during HMR updates. ([#1304](#1304)) - Supports extractStr for large JSON ([#1230](#1230)) - Change `extractStr` to `false` when `performance.chunkSplit.strategy` is not `all-in-one`. ([#1251](#1251)) - Updated dependencies \[[`cb7feb6`](cb7feb6), [`ec7228f`](ec7228f)]: - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] ## @lynx-js/[email protected] ### Patch Changes - Support `@lynx-js/react/debug`. ([#1250](#1250)) ## @lynx-js/[email protected] ### Patch Changes - Support alog of component rendering on production for better error reporting. Enable it by using `REACT_ALOG=true rspeedy dev/build` or defining `__ALOG__` to `true` in `lynx.config.js`: ([#1164](#1164)) ```js export default defineConfig({ // ... source: { define: { __ALOG__: true, }, }, }); ``` - Supports `console.alog` and use different `console` object in main thread and background thread. ([#1164](#1164)) ## @lynx-js/[email protected] ### Patch Changes - feat: move SSR hydrate essential info to the ssr attribute ([#1292](#1292)) We found that in browser there is no simple tool to decode a base64 string Therefore we move the data to `ssr` attribute Also fix some ssr issues - feat: support \_\_MarkTemplateElement, \_\_MarkPartElement and \_\_GetTemplateParts for all-on-ui ([#1275](#1275)) - Updated dependencies \[]: - @lynx-js/[email protected] ## @lynx-js/[email protected] ### Patch Changes - feat: support SSR for all-on-ui ([#1029](#1029)) - feat: move SSR hydrate essential info to the ssr attribute ([#1292](#1292)) We found that in browser there is no simple tool to decode a base64 string Therefore we move the data to `ssr` attribute Also fix some ssr issues - feat: support \_\_MarkTemplateElement, \_\_MarkPartElement and \_\_GetTemplateParts for all-on-ui ([#1275](#1275)) - feat: mark template elements for SSR and update part ID handling ([#1286](#1286)) - Updated dependencies \[[`cebda59`](cebda59), [`1443e46`](1443e46), [`5062128`](5062128), [`f656b7f`](f656b7f)]: - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] ## @lynx-js/[email protected] ### Patch Changes - feat: support SSR for all-on-ui ([#1029](#1029)) - feat: move SSR hydrate essential info to the ssr attribute ([#1292](#1292)) We found that in browser there is no simple tool to decode a base64 string Therefore we move the data to `ssr` attribute Also fix some ssr issues - feat: dump the event info on ssr stage ([#1237](#1237)) - feat: mark template elements for SSR and update part ID handling ([#1286](#1286)) ## @lynx-js/[email protected] ### Patch Changes - fix: indicator dots' bg-color on safari 26 ([#1298](#1298)) <https://bugs.webkit.org/show_bug.cgi?id=296048> The animation name should be defined in the template - fix: list may only render only one column in ReactLynx. ([#1280](#1280)) This is because `span-count` may not be specified when `list-type` is specified, resulting in layout according to `span-count="1"`. Postponing the acquisition of `span-count` until layoutListItem can solve this problem. - Updated dependencies \[[`443f3d5`](443f3d5)]: - @lynx-js/[email protected] ## @lynx-js/[email protected] ### Patch Changes - fix: indicator dots' bg-color on safari 26 ([#1298](#1298)) <https://bugs.webkit.org/show_bug.cgi?id=296048> The animation name should be defined in the template ## @lynx-js/[email protected] ### Patch Changes - feat: support SSR for all-on-ui ([#1029](#1029)) - feat: move SSR hydrate essential info to the ssr attribute ([#1292](#1292)) We found that in browser there is no simple tool to decode a base64 string Therefore we move the data to `ssr` attribute Also fix some ssr issues - feat: support \_\_MarkTemplateElement, \_\_MarkPartElement and \_\_GetTemplateParts for all-on-ui ([#1275](#1275)) - feat: mark template elements for SSR and update part ID handling ([#1286](#1286)) - Updated dependencies \[[`1443e46`](1443e46), [`5062128`](5062128)]: - @lynx-js/[email protected] ## @lynx-js/[email protected] ### Patch Changes - Updated dependencies \[[`cebda59`](cebda59), [`1443e46`](1443e46), [`5062128`](5062128), [`f656b7f`](f656b7f)]: - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] ## @lynx-js/[email protected] ### Patch Changes - Fix the `Syntax Error: expecting ';'` error of chunk splitting ([#1279](#1279)) ## [email protected] ## @lynx-js/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

plesiecki · 2025-07-29T08:07:31Z

What would you say to injecting @lynx-js/react/debug automatically only for the dev build instead of introducing more boilerplate code?

colinaaa · 2025-07-29T11:30:52Z

What would you say to injecting @lynx-js/react/debug automatically only for the dev build instead of introducing more boilerplate code?

We've already done that. We have an alias from @lynx-js/react/debug to false in production.

lynx-stack/packages/rspeedy/plugin-react-alias/src/index.ts

Lines 149 to 151 in 54eb5bf

    
           if (isProd) { 
        
             chain.resolve.alias.set('@lynx-js/react/debug$', false) 
        
           }

This bundle size regression (88.37KiB -> 88.43KiB (+0.07%)) in this PR would be optimized after web-infra-dev/rspack#10954 is landed.

In short, the import '@lynx-js/react/debug' should not have any effect to the production bundle size.

plesiecki · 2025-07-29T13:26:38Z

Sorry, by the boilerplate code I actually meant the source code here #1250 (comment). The automatic injection in the dev mode would mean no import of the @lynx-js/react/debug module at all in the source code.

colinaaa · 2025-07-30T03:21:08Z

Sorry, by the boilerplate code I actually meant the source code here #1250 (comment). The automatic injection in the dev mode would mean no import of the @lynx-js/react/debug module at all in the source code.

This is what @preact/preset-vite does (https://github.com/preactjs/preset-vite/blob/779adf917991716532225eb6a6f029ad2df14a96/src/devtools.ts#L66) and we may want to do the same thing in the future.

But for now, we would like to make it opt-in so that it could be disabled when having problems.

feat(react): introduce @lynx-js/react/debug

1dc889d

colinaaa mentioned this pull request Jul 8, 2025

feat(react/runtime): integrate with preact/debug #1222

Merged

2 tasks

colinaaa marked this pull request as ready for review July 8, 2025 13:49

colinaaa requested review from Yradex, hzy and upupming July 8, 2025 13:49

cursor bot reviewed Jul 8, 2025

View reviewed changes

colinaaa mentioned this pull request Jul 8, 2025

Should delete unused ignored module (RawModule) webpack/webpack#19670

Closed

upupming reviewed Jul 9, 2025

View reviewed changes

packages/react/runtime/debug/index.cjs Show resolved Hide resolved

hzy approved these changes Jul 18, 2025

View reviewed changes

colinaaa added this pull request to the merge queue Jul 18, 2025

Merged via the queue into lynx-family:main with commit ec7228f Jul 18, 2025
41 of 44 checks passed

colinaaa deleted the colin/0708/debug branch July 18, 2025 04:38

github-actions bot mentioned this pull request Jul 18, 2025

chore: Release 2025-07-19 03:29:45 #1281

Merged

feat(react): introduce @lynx-js/react/debug #1250

feat(react): introduce @lynx-js/react/debug #1250

Uh oh!

Conversation

colinaaa commented Jul 8, 2025

Summary

Checklist

Uh oh!

changeset-bot bot commented Jul 8, 2025

🦋 Changeset detected

Uh oh!

codspeed-hq bot commented Jul 8, 2025

CodSpeed Performance Report

Merging #1250 will not alter performance

Summary

Uh oh!

relativeci bot commented Jul 8, 2025

Web Explorer

#2714 Bundle Size — 259.2KiB (0%).

Uh oh!

relativeci bot commented Jul 8, 2025

React Example

#2723 Bundle Size — 234.18KiB (+0.03%).

Uh oh!

colinaaa commented Jul 8, 2025

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

✅ BugBot reviewed your changes and found no bugs!

Uh oh!

upupming left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

plesiecki commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

colinaaa commented Jul 29, 2025

Uh oh!

plesiecki commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

colinaaa commented Jul 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(react): introduce `@lynx-js/react/debug` #1250

feat(react): introduce `@lynx-js/react/debug` #1250

plesiecki commented Jul 29, 2025 •

edited

Loading

plesiecki commented Jul 29, 2025 •

edited

Loading