-
Notifications
You must be signed in to change notification settings - Fork 111
feat(react): support alog of component rendering #1164
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
CodSpeed Performance ReportMerging #1164 will not alter performanceComparing Summary
|
Web Explorer#2811 Bundle Size — 258.71KiB (0%).1ac54b1(current) vs f54a7aa main#2806(baseline) Bundle metrics
Bundle size by type
|
| Current #2811 |
Baseline #2806 |
|
|---|---|---|
226.83KiB |
226.83KiB |
|
31.88KiB |
31.88KiB |
Bundle analysis report Branch upupming:feat/alog Project dashboard
Generated by RelativeCI Documentation Report issue
React Example#2820 Bundle Size — 234.13KiB (~+0.01%).1ac54b1(current) vs f54a7aa main#2815(baseline) Bundle metrics
Bundle size by type
Bundle analysis report Branch upupming:feat/alog Project dashboard Generated by RelativeCI Documentation Report issue |
🦋 Changeset detectedLatest commit: 1ac54b1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
Codecov ReportAttention: Patch coverage is ✅ All tests successful. No failed tests found.
📢 Thoughts on this report? Let us know! |
22741b2 to
acc6ec5
Compare
796f05d to
3aa7f00
Compare
|
Whats the difference between log and alog? |
WalkthroughThis change introduces an "alog" feature for enhanced component render logging in production, enabled via environment variables or configuration. It adds new modules for logging logic, updates global typings and test environments, and modifies build tooling to support the feature. New tests and configuration adjustments ensure correct logging behavior across threads. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Env/Config
participant ReactRuntime
participant AlogModule
participant Console
User->>Env/Config: Set REACT_ALOG=true or __ALOG__=true
Env/Config->>ReactRuntime: Pass __ALOG__ flag
ReactRuntime->>AlogModule: If __ALOG__ is true, call initAlog()
AlogModule->>ReactRuntime: Patch render hook for logging
ReactRuntime->>Console: On component render, call console.alog(message)
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ERROR Cannot resolve version $@rspack/core in overrides. The direct dependencies don't have dependency "@rspack/core". 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 4
🧹 Nitpick comments (4)
.changeset/twelve-days-design.md (1)
5-5: Fix grammatical errors in changeset description.The changeset description contains several grammatical issues flagged by static analysis tools.
Apply this diff to correct the grammar:
-Supports `console.alog` and use different `console` object in main thread and background thread. +Supports `console.alog` and uses different `console` objects in main thread and background thread.packages/testing-library/testing-environment/src/index.ts (1)
216-216: Consider making ALOG configurable in tests.The ALOG flag is set to
trueby default in both main and background threads, which enables alog logging in all tests. Consider making this configurable via environment variables to allow selective enabling.- target.__ALOG__ = true; + target.__ALOG__ = process.env.ENABLE_ALOG === 'true';This would allow developers to control alog logging in tests without code changes.
Also applies to: 293-293
packages/react/testing-library/src/__tests__/alog.test.jsx (2)
40-71: Consider making snapshot tests more maintainable.The current snapshot tests are very brittle and contain hardcoded values that may change with different test runs or environments. This makes the tests fragile and difficult to maintain.
Consider testing the structure and key information rather than exact string matches:
- expect(lynxTestingEnv.mainThread.console.alog.mock.calls).toMatchInlineSnapshot(` - [ - [ - "[MainThread Component Render] name: Fragment, snapshotId: undefined, __id: undefined", - ], - [ - "[MainThread Component Render] name: App, snapshotId: undefined, __id: undefined", - ], - [ - "[MainThread Component Render] name: ClassComponent, snapshotId: undefined, __id: undefined", - ], - [ - "[MainThread Component Render] name: FunctionComponent, snapshotId: undefined, __id: undefined", - ], - ] - `); + const mainThreadCalls = lynxTestingEnv.mainThread.console.alog.mock.calls; + expect(mainThreadCalls).toHaveLength(4); + expect(mainThreadCalls[0][0]).toContain('[MainThread Component Render] name: Fragment'); + expect(mainThreadCalls[1][0]).toContain('[MainThread Component Render] name: App'); + expect(mainThreadCalls[2][0]).toContain('[MainThread Component Render] name: ClassComponent'); + expect(mainThreadCalls[3][0]).toContain('[MainThread Component Render] name: FunctionComponent');
8-104: Add test documentation and edge case coverage.The test lacks documentation explaining its purpose and doesn't cover potential edge cases for the alog feature.
Consider adding:
- Test documentation explaining the alog behavior
- Edge case coverage for error scenarios
- Tests for disabled alog functionality
describe('alog', () => { + // Test that console.alog properly logs component renders on both threads + // Initial render: logs on both threads + // Same state update: no logs (no re-render) + // Different state update: logs only on background thread test('should log', async () => {Additional test cases to consider:
- Test behavior when
__ALOG__is disabled- Test error handling during logging
- Test with deeply nested components
- Test with components that throw errors during render
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
.changeset/chubby-words-stick.md(1 hunks).changeset/twelve-days-design.md(1 hunks).typos.toml(1 hunks)examples/react/lynx.config.js(1 hunks)packages/react/runtime/__test__/utils/globals.js(1 hunks)packages/react/runtime/src/alog/index.ts(1 hunks)packages/react/runtime/src/alog/render.ts(1 hunks)packages/react/runtime/src/debug/profile.ts(1 hunks)packages/react/runtime/src/lynx.ts(2 hunks)packages/react/runtime/src/renderToOpcodes/constants.ts(1 hunks)packages/react/runtime/src/utils.ts(2 hunks)packages/react/runtime/types/types.d.ts(2 hunks)packages/react/testing-library/src/__tests__/alog.test.jsx(1 hunks)packages/testing-library/testing-environment/src/index.ts(5 hunks)packages/webpack/react-webpack-plugin/src/ReactWebpackPlugin.ts(1 hunks)packages/webpack/test-tools/src/suite.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
packages/react/runtime/src/alog/index.ts (1)
packages/react/runtime/src/alog/render.ts (1)
initRenderAlog(11-23)
packages/react/runtime/src/utils.ts (1)
packages/react/types/react.d.ts (1)
ComponentClass(17-17)
packages/react/runtime/src/alog/render.ts (3)
packages/react/runtime/src/renderToOpcodes/constants.ts (2)
RENDER(5-5)DOM(16-16)packages/react/runtime/src/utils.ts (1)
getDisplayName(39-41)packages/react/types/react.d.ts (1)
ComponentClass(17-17)
packages/react/runtime/src/lynx.ts (1)
packages/react/runtime/src/alog/index.ts (1)
initAlog(6-8)
🪛 LanguageTool
.changeset/twelve-days-design.md
[grammar] ~5-~5: Make sure you are using the right part of speech
Context: ... patch --- Supports console.alog and use different console object in main thre...
(QB_NEW_EN_OTHER_ERROR_IDS_21)
[grammar] ~5-~5: Make sure to use plural and singular nouns correctly
Context: ...nsole.alogand use differentconsole` object in main thread and background thread.
(QB_NEW_EN_OTHER_ERROR_IDS_10)
[grammar] ~5-~5: Use articles correctly
Context: ...and use differentconsole` object in main thread and background thread.
(QB_NEW_EN_OTHER_ERROR_IDS_11)
.changeset/chubby-words-stick.md
[grammar] ~5-~5: There might be a problem here.
Context: ...nt": patch "@lynx-js/react": patch --- Supports alog of component rendering on production fo...
(QB_NEW_EN_MERGED_MATCH)
[grammar] ~6-~6: Use the right verb tense
Context: ...or better error reporting. Enable it by define __ALOG__ to true in `lynx.config.js...
(QB_NEW_EN_OTHER_ERROR_IDS_13)
[grammar] ~6-~6: Use correct spacing
Context: ...le it by define __ALOG__ to true in lynx.config.js: js export default defineConfig({ // ... source: { define: { __ALOG__: true, }, }, });
(QB_NEW_EN_OTHER_ERROR_IDS_5)
🔇 Additional comments (18)
.typos.toml (1)
33-33: LGTM! Proper addition of "alog" to valid words.This change correctly adds "alog" to the typos checker's valid words list, preventing false positives for the new logging feature.
packages/react/runtime/src/alog/index.ts (1)
6-8: LGTM! Clean and simple initialization function.The
initAlogfunction provides a clean API for initializing the alog feature. The implementation is straightforward and follows good architectural practices by delegating to the specific render logging initialization.packages/react/runtime/src/renderToOpcodes/constants.ts (1)
16-16: Audit and Resolve Duplicate VNode Property KeysThe file packages/react/runtime/src/renderToOpcodes/constants.ts defines several constants that share the same string value, which will collide when used as VNode property keys:
- '__e' is used by
• CATCH_ERROR
• DOM
• FORCE- '__c' is used by
• COMMIT
• COMPONENT
• CHILD_DID_SUSPEND- '__s' is used by
• SKIP_EFFECTS
• NEXT_STATESuch overlaps can lead to key collisions, unexpected behavior, and maintenance headaches. Please:
- Verify whether these shared mappings are intentional (i.e. aliasing distinct operations onto the same opcode).
- If not, assign unique values for each constant (e.g. choose distinct minified keys) and update all usages accordingly.
packages/react/runtime/src/debug/profile.ts (1)
8-8: Good refactoring to use shared utility.The refactoring of
getDisplayNameto use a shared utility from../utils.jspromotes code reuse and maintainability. This change aligns well with the broader alog feature implementation that also needs access to component display names.packages/react/runtime/__test__/utils/globals.js (1)
126-126: Appropriate test mock addition for the new alog feature.The addition of
console.alog = vi.fn();follows the existing pattern of mocking console methods and is necessary for testing the new alog feature without actual console output.examples/react/lynx.config.js (1)
17-21: Correct configuration for enabling the alog feature.The addition of the
source.defineconfiguration with__ALOG__: truecorrectly demonstrates how to enable the alog feature, aligning with the changeset documentation.packages/react/runtime/types/types.d.ts (2)
22-22: Appropriate global constant declaration.The
__ALOG__global constant declaration with typeboolean | undefinedis properly typed to support the compile-time feature toggle for the alog functionality.
250-252: Proper Console interface extension.The Console interface extension with the
alog(message?: string): voidmethod provides type safety and IDE support for the new alog feature. The optional string parameter is appropriately typed.packages/react/runtime/src/lynx.ts (2)
8-8: LGTM: Clean import addition.The import follows the existing pattern and aligns with the conditional initialization below.
44-48: LGTM: Consistent feature initialization pattern.The conditional initialization follows the same pattern as the existing profiling feature above. The guard ensures the feature is only enabled when explicitly configured.
packages/react/runtime/src/utils.ts (2)
4-4: LGTM: Appropriate type import.The
ComponentClassimport is correctly typed and supports the new utility function.
39-41: LGTM: Standard component display name extraction.The implementation follows React/Preact conventions for getting component display names with proper fallback logic.
packages/webpack/test-tools/src/suite.ts (2)
95-106: LGTM: Efficient config loading with proper alog mocking.The refactoring to load the config once is a good optimization. The
console.alogmocking as a no-op function is appropriate for test environments while preserving any existingmoduleScopefunctionality.
122-122: LGTM: Consistent config usage.Using the pre-loaded and modified
testConfigmaintains consistency with the optimization above.packages/testing-library/testing-environment/src/index.ts (2)
12-12: LGTM: Appropriate import for console replacement.The Console import is necessary for the custom console setup in testing environments.
237-243: The full-console replacement here is intentional and safe—please disregard the “extend instead of replace” suggestion.The custom
new Console(process.stdout, process.stderr)ensures all console methods (log, debug, info, warn, error, table, trace, etc.) route to the real stdout/stderr instead of the VM’s no-op stubs. The built-inConsoleclass already provides every standard method, and you’ve also added the necessaryprofile,profileEnd, andaloghooks.No changes needed.
Likely an incorrect or invalid review comment.
packages/react/testing-library/src/__tests__/alog.test.jsx (2)
5-5: Using Preact’s built-inactis correct
Lynx-React is implemented on top of Preact, and neither@lynx-js/reactnor@lynx-js/react/testing-libraryexports its ownact. All tests and the internalpure.jsxrenderer consistently importactfrompreact/test-utils. No change is needed.
91-103: Inline snapshot IDs are deterministic, not random
The__snapshot_…identifiers are injected at compile time by the SWC plugin and remain consistent across environments so long as the source hasn’t changed. They aren’t runtime‐generated or environment‐specific. The inline assertion in alog.test.jsx is therefore stable and need not be refactored.Likely an incorrect or invalid review comment.
packages/webpack/react-webpack-plugin/src/ReactWebpackPlugin.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR introduces a new console.alog hook to log component renders in both main and background threads, controlled by an __ALOG__ flag.
- Add
__ALOG__define in webpack plugin to enable per‐build logging - Inject and stub
console.alogin the testing environment and suite runner - Wire up runtime hooks (
initAlog,initRenderAlog) to emitconsole.alogon each render
Reviewed Changes
Copilot reviewed 15 out of 16 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/webpack/test-tools/src/suite.ts | Mock console.alog in test runner via moduleScope hook |
| packages/webpack/react-webpack-plugin/src/ReactWebpackPlugin.ts | Define __ALOG__ from REACT_ALOG environment variable |
| packages/testing-library/testing-environment/src/index.ts | Inject console.alog and __ALOG__ in main/background globals |
| packages/react/testing-library/src/tests/alog.test.jsx | Add Vitest tests to verify console.alog calls |
| packages/react/runtime/src/utils.ts | Extract getDisplayName helper for component types |
| packages/react/runtime/src/renderToOpcodes/constants.ts | Add DOM constant for snapshot metadata |
| packages/react/runtime/src/lynx.ts | Conditionally initialize initAlog when __ALOG__ is truthy |
| packages/react/runtime/src/debug/profile.ts | Remove duplicate displayName function in profile hook |
| packages/react/runtime/src/alog/render.ts | Implement initRenderAlog to hook into Preact’s render opcode |
| packages/react/runtime/src/alog/index.ts | Expose initAlog entrypoint |
| packages/react/runtime/test/utils/globals.js | Stub console.alog in runtime tests |
| examples/react/lynx.config.js | Show __ALOG__ define in example config |
| .typos.toml | Permit alog as a recognized word |
| .changeset/* | Document new alog support in changesets |
Comments suppressed due to low confidence (2)
packages/react/runtime/src/utils.ts:48
getDisplayNameaccepts only class components. Consider widening the signature to handle function components and native tags (e.g.,type: anyor a union) to avoid runtime errors whenvnode.typeisn't aComponentClass.
export function getDisplayName(type: ComponentClass): string {
packages/react/testing-library/src/tests/alog.test.jsx:9
- [nitpick] The test refers to
lynxTestingEnv.mainThreadbut doesn't import or explain wherelynxTestingEnvcomes from. Consider adding an import or comment to clarify how the test harness provides this global.
vi.spyOn(lynxTestingEnv.mainThread.console, 'alog');
packages/webpack/react-webpack-plugin/src/ReactWebpackPlugin.ts
Outdated
Show resolved
Hide resolved
|
bugbot run |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✅ 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 👎
|
@colinaaa PTAL~ |
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>
Summary
console.alogis added for component rendering hook:Checklist
Summary by CodeRabbit
New Features
console.alog, with differentiation between main and background threads.__ALOG__allows toggling of logging functionality.Bug Fixes
Tests
Chores