Skip to content

Conversation

@upupming
Copy link
Collaborator

@upupming upupming commented Jun 26, 2025

Summary

console.alog is added for component rendering hook:

image

Checklist

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

Summary by CodeRabbit

  • New Features

    • Introduced an "alog" feature for logging component rendering in production, which can be enabled via environment variable or configuration.
    • Added support for a new console method, console.alog, with differentiation between main and background threads.
    • New global flag __ALOG__ allows toggling of logging functionality.
  • Bug Fixes

    • Improved test environment setup to ensure consistent logging and console behavior across threads.
  • Tests

    • Added comprehensive tests to verify the new logging feature and its behavior during component rendering.
  • Chores

    • Updated configuration to recognize "alog" as a valid word for typo checking.
    • Enhanced plugin and environment configuration for easier feature toggling.

@codspeed-hq
Copy link

codspeed-hq bot commented Jun 26, 2025

CodSpeed Performance Report

Merging #1164 will not alter performance

Comparing upupming:feat/alog (1ac54b1) with main (f54a7aa)

Summary

✅ 10 untouched benchmarks

@relativeci
Copy link

relativeci bot commented Jun 26, 2025

Web Explorer

#2811 Bundle Size — 258.71KiB (0%).

1ac54b1(current) vs f54a7aa main#2806(baseline)

Bundle metrics  Change 1 change
                 Current
#2811
     Baseline
#2806
No change  Initial JS 139.86KiB 139.86KiB
No change  Initial CSS 31.88KiB 31.88KiB
No change  Cache Invalidation 0% 0%
No change  Chunks 4 4
No change  Assets 4 4
Change  Modules 209(-0.48%) 210
No change  Duplicate Modules 17 17
No change  Duplicate Code 4.18% 4.18%
No change  Packages 4 4
No change  Duplicate Packages 0 0
Bundle size by type  no changes
                 Current
#2811
     Baseline
#2806
No change  JS 226.83KiB 226.83KiB
No change  CSS 31.88KiB 31.88KiB

Bundle analysis reportBranch upupming:feat/alogProject dashboard


Generated by RelativeCIDocumentationReport issue

@relativeci
Copy link

relativeci bot commented Jun 26, 2025

React Example

#2820 Bundle Size — 234.13KiB (~+0.01%).

1ac54b1(current) vs f54a7aa main#2815(baseline)

Bundle metrics  Change 4 changes Regression 1 regression
                 Current
#2820
     Baseline
#2815
No change  Initial JS 0B 0B
No change  Initial CSS 0B 0B
Change  Cache Invalidation 37.74% 0%
No change  Chunks 0 0
No change  Assets 4 4
Change  Modules 157(+2.61%) 153
Regression  Duplicate Modules 63(+3.28%) 61
Change  Duplicate Code 45.87%(+0.04%) 45.85%
No change  Packages 2 2
No change  Duplicate Packages 0 0
Bundle size by type  Change 1 change Regression 1 regression
                 Current
#2820
     Baseline
#2815
No change  IMG 145.76KiB 145.76KiB
Regression  Other 88.37KiB (~+0.01%) 88.37KiB

Bundle analysis reportBranch upupming:feat/alogProject dashboard


Generated by RelativeCIDocumentationReport issue

@changeset-bot
Copy link

changeset-bot bot commented Jun 26, 2025

🦋 Changeset detected

Latest commit: 1ac54b1

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/testing-environment Patch
@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

@codecov
Copy link

codecov bot commented Jun 26, 2025

Codecov Report

Attention: Patch coverage is 67.74194% with 10 lines in your changes missing coverage. Please review.

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...s/testing-library/testing-environment/src/index.ts 0.00% 10 Missing ⚠️

📢 Thoughts on this report? Let us know!

@upupming upupming force-pushed the feat/alog branch 2 times, most recently from 22741b2 to acc6ec5 Compare June 26, 2025 14:28
@upupming upupming force-pushed the feat/alog branch 3 times, most recently from 796f05d to 3aa7f00 Compare June 27, 2025 09:20
@PupilTong
Copy link
Collaborator

Whats the difference between log and alog?

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jul 9, 2025

Walkthrough

This 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

File(s) Change Summary
.changeset/chubby-words-stick.md
.changeset/twelve-days-design.md
Added changeset files documenting patch updates and new features for logging and console methods.
.typos.toml Added "alog" to the list of words ignored by the typo checker.
packages/react/runtime/test/utils/globals.js Added global __ALOG__ flag and mocked console.alog for test environments.
packages/react/runtime/src/alog/index.ts
packages/react/runtime/src/alog/render.ts
Introduced new modules for initializing and implementing the "alog" render logging feature.
packages/react/runtime/src/debug/profile.ts
packages/react/runtime/src/utils.ts
Refactored getDisplayName utility: moved to a shared module and updated imports.
packages/react/runtime/src/lynx.ts Imported and conditionally initialized the "alog" feature based on the __ALOG__ global flag.
packages/react/runtime/src/renderToOpcodes/constants.ts Added new constant DOM for vnode property referencing DOM elements.
packages/react/runtime/types/types.d.ts Declared global __ALOG__ constant and extended Console with alog method signature.
packages/react/testing-library/src/tests/alog.test.jsx Added a new test suite verifying component render logging across main and background threads.
packages/testing-library/testing-environment/src/index.ts Introduced createPreconfiguredConsole with alog method; updated global injections to use this console.
packages/webpack/react-webpack-plugin/src/ReactWebpackPlugin.ts Added __ALOG__ define variable based on REACT_ALOG environment variable.
packages/webpack/test-tools/src/suite.ts Improved test config loading and ensured console.alog is a no-op in test module scope.

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)
Loading

Poem

In the warren where logs now hop,
"alog" whispers as renders drop.
Components frolic, their names in tow,
Across threads, their stories flow.
With every build and every test,
This bunny ensures logging’s best!
🐇✨

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

 ERROR  Cannot resolve version $@rspack/core in overrides. The direct dependencies don't have dependency "@rspack/core".
For help, run: pnpm help install


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 08886bf and 1ac54b1.

📒 Files selected for processing (3)
  • packages/react/runtime/src/alog/render.ts (1 hunks)
  • packages/react/runtime/src/lynx.ts (2 hunks)
  • packages/react/testing-library/src/__tests__/alog.test.jsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
  • packages/react/runtime/src/lynx.ts
  • packages/react/runtime/src/alog/render.ts
  • packages/react/testing-library/src/tests/alog.test.jsx
⏰ 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)
  • GitHub Check: build / Build (Windows)
  • GitHub Check: build / Build (Ubuntu)
  • GitHub Check: code-style-check
  • GitHub Check: CodeQL Analyze (actions)
  • GitHub Check: CodeQL Analyze (javascript-typescript)
✨ Finishing Touches
  • 📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 true by 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:

  1. Test documentation explaining the alog behavior
  2. Edge case coverage for error scenarios
  3. 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

📥 Commits

Reviewing files that changed from the base of the PR and between a7e8b5b and 4702fb8.

📒 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 initAlog function 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 Keys

The 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_STATE

Such 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 getDisplayName to use a shared utility from ../utils.js promotes 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.define configuration with __ALOG__: true correctly 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 type boolean | undefined is 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): void method 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 ComponentClass import 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.alog mocking as a no-op function is appropriate for test environments while preserving any existing moduleScope functionality.


122-122: LGTM: Consistent config usage.

Using the pre-loaded and modified testConfig maintains 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-in Console class already provides every standard method, and you’ve also added the necessary profile, profileEnd, and alog hooks.

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-in act is correct
Lynx-React is implemented on top of Preact, and neither @lynx-js/react nor @lynx-js/react/testing-library exports its own act. All tests and the internal pure.jsx renderer consistently import act from preact/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.

@PupilTong PupilTong requested a review from Copilot July 9, 2025 05:47
Copy link
Contributor

Copilot AI left a 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.alog in the testing environment and suite runner
  • Wire up runtime hooks (initAlog, initRenderAlog) to emit console.alog on 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

  • getDisplayName accepts only class components. Consider widening the signature to handle function components and native tags (e.g., type: any or a union) to avoid runtime errors when vnode.type isn't a ComponentClass.
export function getDisplayName(type: ComponentClass): string {

packages/react/testing-library/src/tests/alog.test.jsx:9

  • [nitpick] The test refers to lynxTestingEnv.mainThread but doesn't import or explain where lynxTestingEnv comes from. Consider adding an import or comment to clarify how the test harness provides this global.
    vi.spyOn(lynxTestingEnv.mainThread.console, 'alog');

@colinaaa
Copy link
Collaborator

colinaaa commented Jul 9, 2025

bugbot run

Copy link

@cursor cursor bot left a 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 👎

@upupming upupming enabled auto-merge July 14, 2025 11:23
@upupming upupming removed the request for review from PupilTong July 16, 2025 02:25
@upupming
Copy link
Collaborator Author

@colinaaa PTAL~

@upupming upupming added this pull request to the merge queue Jul 17, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jul 17, 2025
@upupming upupming added this pull request to the merge queue Jul 17, 2025
Merged via the queue into lynx-family:main with commit 6ad7295 Jul 17, 2025
45 checks passed
@upupming upupming deleted the feat/alog branch July 17, 2025 07:28
colinaaa pushed a commit that referenced this pull request Jul 19, 2025
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants