Skip to content

Conversation

@PupilTong
Copy link
Collaborator

@PupilTong PupilTong commented Aug 28, 2025

…d refactoring style handling

Summary by CodeRabbit

  • New Features

    • Improved SSR hydration and per-entry style scoping for more accurate initial styling and isolation.
    • Exposed runtime hook for dynamic CSS updates to improve style refresh reliability.
  • Refactor

    • Centralized CSS update handling and updated selectors to exclude lazy components without an entry name.
  • Behavior Change

    • DOM content updates now use textContent instead of innerHTML for safer content assignment.
  • Chores

    • Patch bumps for several web packages.

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
Copy link

changeset-bot bot commented Aug 28, 2025

🦋 Changeset detected

Latest commit: 6d15241

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

This PR includes changesets to release 8 packages
Name Type
@lynx-js/web-mainthread-apis Patch
@lynx-js/web-constants Patch
@lynx-js/web-core Patch
@lynx-js/offscreen-document Patch
@lynx-js/web-core-server Patch
@lynx-js/web-worker-runtime Patch
@lynx-js/web-worker-rpc Patch
@lynx-js/web-style-transformer 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
Copy link
Contributor

coderabbitai bot commented Aug 28, 2025

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

Moves CSS generation and runtime style updates out of createMainThreadGlobalThis into a new appendStyleElement utility with SSR hydration and a returned updateCssOGStyle callback; adds lynxEntryNameAttribute; and replaces innerHTML usage with textContent across offscreen/document rendering and related types. Includes changeset files.

Changes

Cohort / File(s) Change Summary
Changesets
.changeset/busy-streets-invite.md, .changeset/little-games-clap.md
Add patch release notes for packages and document innerHTML→textContent change.
Constants
packages/web-platform/web-constants/src/constants.ts
Add exported lynxEntryNameAttribute = 'l-e-name' as const.
Main thread runtime API
packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts
Remove internal CSS generation/state and styleInfo from MainThreadRuntimeConfig; add callbacks.updateCssOGStyle(uniqueId, newClassName, cssID) and route CSS OG updates through it.
Main thread wiring
packages/web-platform/web-mainthread-apis/src/prepareMainThreadAPIs.ts
Call appendStyleElement(...) during init, obtain updateCssOGStyle, inject it into callbacks, and stop passing styleInfo into createMainThreadGlobalThis.
Style processing & SSR
packages/web-platform/web-mainthread-apis/src/utils/processStyleInfo.ts
Add appendStyleElement(...) (returns updateCssOGStyle), extend genCssContent(..., entryName?), implement per-entry selectors using lynxEntryNameAttribute or :not([lynxEntryNameAttribute]), and manage SSR hydrate style element / rule index mapping.
Offscreen document: content API
packages/web-platform/offscreen-document/src/webworker/OffscreenElement.ts, packages/web-platform/offscreen-document/src/webworker/index.ts, packages/web-platform/offscreen-document/src/main/initOffscreenDocument.ts, packages/web-platform/offscreen-document/src/types/ElementOperation.ts
Rename public symbol and opcodes from innerHTMLtextContent, update emitted operation opcode to SetTextContent, switch runtime to assign textContent instead of innerHTML.
Web element types & rendering
packages/web-platform/web-constants/src/types/Element.ts, packages/web-platform/web-core-server/src/dumpHTMLString.ts
Replace innerHTML property with textContent on element types and server-side dump logic; rename helper to getTextContentImpl and use textContent when emitting children content.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

Suggested reviewers

  • Sherry-hue
  • hzy
  • Yradex

Poem

I twitch my nose and thump my feet,
Styles hop out to find new seats.
A tiny tag, l‑e‑name so neat,
Text now whispers where HTML beat.
I nibble rules and make them meet — hop, patch, and neat! 🐇✨

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • 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
🪧 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.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbit in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbit 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:
    • @coderabbit gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbit read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbit help to get the list of available commands.

Other keywords and placeholders

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

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • 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.

@PupilTong PupilTong self-assigned this Aug 28, 2025
@PupilTong
Copy link
Collaborator Author

split from #1235

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 enhances style management by refactoring style-related code and adding support for entry-specific CSS scoping. The changes improve the separation of concerns by moving style processing logic into a dedicated utility function and introduce new functionality for handling lazy components through CSS selectors.

Key changes:

  • Extracted style processing logic from createMainThreadGlobalThis into a reusable appendStyleElement function
  • Added support for entry-specific CSS scoping with a new lynxEntryNameAttribute constant
  • Enhanced the updateCssOGStyle callback signature to include CSS ID parameter for more precise style updates

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
packages/web-platform/web-mainthread-apis/src/utils/processStyleInfo.ts Added appendStyleElement function and enhanced genCssContent with entry name support
packages/web-platform/web-mainthread-apis/src/prepareMainThreadAPIs.ts Integrated new style processing approach using appendStyleElement
packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts Removed inline style processing code and updated callback usage
packages/web-platform/web-constants/src/constants.ts Added new lynxEntryNameAttribute constant
.changeset/busy-streets-invite.md Added changeset documenting the refactoring changes

@codecov
Copy link

codecov bot commented Aug 28, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

Sherry-hue
Sherry-hue previously approved these changes Aug 28, 2025
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: 2

🧹 Nitpick comments (4)
.changeset/busy-streets-invite.md (1)

7-7: Polish the release note wording for clarity.
Consider rephrasing.

-refactor: add `:not([l-e-name])` at the end of selector for lazy component
+refactor: append `:not([l-e-name])` to lazy component selectors
packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts (1)

132-136: New callback in MainThreadRuntimeCallbacks — LGTM.
Consider documenting “used only when enableCSSSelector === false”.

packages/web-platform/web-mainthread-apis/src/utils/processStyleInfo.ts (2)

89-111: Entry scoping logic is correct; confirm allowed characters in entryName.
If entryName can include double quotes, CSS could break.

Would you confirm entryName is restricted to a safe charset (e.g., [a-zA-Z0-9_-])? If not, minimally escape quotes:

-  if (entryName) {
-    suffix = `${suffix}[${lynxEntryNameAttribute}="${entryName}"]`;
+  if (entryName) {
+    const safe = entryName.replaceAll('"', '\\"');
+    suffix = `${suffix}[${lynxEntryNameAttribute}="${safe}"]`;

173-238: appendStyleElement extraction — solid separation of concerns.

  • Reuses SSR style element; maintains rule index mapping.
  • Keeps CSSOG updates localized via the returned callback.

Want a follow-up test plan? I can add DOM-based tests for:

  • base vs. entry-scoped CSS generation,
  • CSSOG rule updates (insert/overwrite),
  • SSR reuse of style element and rule indices.
📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between ff4ede6 and dba1812.

📒 Files selected for processing (5)
  • .changeset/busy-streets-invite.md (1 hunks)
  • packages/web-platform/web-constants/src/constants.ts (1 hunks)
  • packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts (3 hunks)
  • packages/web-platform/web-mainthread-apis/src/prepareMainThreadAPIs.ts (3 hunks)
  • packages/web-platform/web-mainthread-apis/src/utils/processStyleInfo.ts (3 hunks)
🧰 Additional context used
🧠 Learnings (10)
📓 Common learnings
Learnt from: PupilTong
PR: lynx-family/lynx-stack#1029
File: packages/web-platform/web-core/src/uiThread/createRenderAllOnUI.ts:95-99
Timestamp: 2025-07-16T06:28:26.463Z
Learning: In the lynx-stack codebase, CSS selectors in SSR hydration are generated by their own packages, ensuring a predictable format that makes simple string manipulation safe and preferable over regex for performance reasons.
Learnt from: PupilTong
PR: lynx-family/lynx-stack#1029
File: packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts:214-217
Timestamp: 2025-07-16T06:25:41.055Z
Learning: In the lynx-stack codebase, CSS strings produced by `genCssContent` are considered trusted developer input, so additional sanitization/escaping is not required.
📚 Learning: 2025-08-27T12:42:01.095Z
Learnt from: upupming
PR: lynx-family/lynx-stack#1616
File: packages/webpack/cache-events-webpack-plugin/test/cases/not-cache-events/lazy-bundle/index.js:3-3
Timestamp: 2025-08-27T12:42:01.095Z
Learning: In webpack, properties like __webpack_require__.lynx_ce are injected during compilation/build time when webpack processes modules and generates bundles, not at runtime when dynamic imports execute. Tests for such properties don't need to wait for dynamic imports to complete.

Applied to files:

  • packages/web-platform/web-mainthread-apis/src/prepareMainThreadAPIs.ts
  • packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts
📚 Learning: 2025-07-22T09:23:07.797Z
Learnt from: colinaaa
PR: lynx-family/lynx-stack#1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:23:07.797Z
Learning: In the lynx-family/lynx-stack repository, changesets are only required for meaningful changes to end-users such as bugfixes and features. Internal/development changes like chores, refactoring, or removing debug info do not need changeset entries.

Applied to files:

  • .changeset/busy-streets-invite.md
📚 Learning: 2025-07-22T09:26:16.722Z
Learnt from: colinaaa
PR: lynx-family/lynx-stack#1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:26:16.722Z
Learning: In the lynx-family/lynx-stack repository, CI checks require changesets when files matching the pattern "src/**" are modified (as configured in .changeset/config.json). For internal changes that don't need meaningful changesets, an empty changeset file is used to satisfy the CI requirement while not generating any release notes.

Applied to files:

  • .changeset/busy-streets-invite.md
📚 Learning: 2025-08-19T11:25:36.127Z
Learnt from: colinaaa
PR: lynx-family/lynx-stack#1558
File: .changeset/solid-squids-fall.md:2-2
Timestamp: 2025-08-19T11:25:36.127Z
Learning: In the lynx-family/lynx-stack repository, changesets should use the exact package name from package.json#name, not generic or unscoped names. Each package has its own specific scoped name (e.g., "lynx-js/react-transform" for packages/react/transform).

Applied to files:

  • .changeset/busy-streets-invite.md
📚 Learning: 2025-08-07T04:00:59.645Z
Learnt from: colinaaa
PR: lynx-family/lynx-stack#1454
File: pnpm-workspace.yaml:46-46
Timestamp: 2025-08-07T04:00:59.645Z
Learning: In the lynx-family/lynx-stack repository, the webpack patch (patches/webpack5.101.0.patch) was created to fix issues with webpack5.99.9 but only takes effect on webpack5.100.0 and later versions. The patchedDependencies entry should use "webpack@^5.100.0" to ensure the patch applies to the correct version range.

Applied to files:

  • .changeset/busy-streets-invite.md
📚 Learning: 2025-07-16T06:28:26.463Z
Learnt from: PupilTong
PR: lynx-family/lynx-stack#1029
File: packages/web-platform/web-core/src/uiThread/createRenderAllOnUI.ts:95-99
Timestamp: 2025-07-16T06:28:26.463Z
Learning: In the lynx-stack codebase, CSS selectors in SSR hydration are generated by their own packages, ensuring a predictable format that makes simple string manipulation safe and preferable over regex for performance reasons.

Applied to files:

  • .changeset/busy-streets-invite.md
  • packages/web-platform/web-mainthread-apis/src/utils/processStyleInfo.ts
  • packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts
📚 Learning: 2025-08-12T16:09:32.413Z
Learnt from: colinaaa
PR: lynx-family/lynx-stack#1497
File: packages/react/transform/tests/__swc_snapshots__/src/swc_plugin_snapshot/mod.rs/basic_full_static.js:9-10
Timestamp: 2025-08-12T16:09:32.413Z
Learning: In the Lynx stack, functions prefixed with `__` that are called in transformed code may be injected globally by the Lynx Engine at runtime rather than exported from the React runtime package. For example, `__CreateFrame` is injected globally by the Lynx Engine, not exported from lynx-js/react.

Applied to files:

  • packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts
📚 Learning: 2025-07-16T06:26:22.230Z
Learnt from: PupilTong
PR: lynx-family/lynx-stack#1029
File: packages/web-platform/web-core-server/src/createLynxView.ts:0-0
Timestamp: 2025-07-16T06:26:22.230Z
Learning: In the lynx-stack SSR implementation, each createLynxView instance is used to render once and then discarded. There's no reuse of the same instance for multiple renders, so event arrays and other state don't need to be cleared between renders.

Applied to files:

  • packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts
📚 Learning: 2025-08-21T08:46:54.494Z
Learnt from: upupming
PR: lynx-family/lynx-stack#1370
File: packages/webpack/cache-events-webpack-plugin/src/LynxCacheEventsRuntimeModule.ts:23-27
Timestamp: 2025-08-21T08:46:54.494Z
Learning: In Lynx webpack runtime modules, the team prioritizes performance and simplicity over defensive runtime error handling. They prefer relying on compile-time type safety (TypeScript) rather than adding runtime checks like try-catch blocks or type validation, especially for performance-critical code like cache event setup/cleanup functions.

Applied to files:

  • packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts
🧬 Code graph analysis (3)
packages/web-platform/web-mainthread-apis/src/prepareMainThreadAPIs.ts (1)
packages/web-platform/web-mainthread-apis/src/utils/processStyleInfo.ts (1)
  • appendStyleElement (173-238)
packages/web-platform/web-mainthread-apis/src/utils/processStyleInfo.ts (5)
packages/web-platform/web-constants/src/constants.ts (4)
  • cssIdAttribute (7-7)
  • lynxTagAttribute (15-15)
  • lynxEntryNameAttribute (13-13)
  • lynxUniqueIdAttribute (5-5)
packages/web-platform/web-constants/src/types/StyleInfo.ts (2)
  • StyleInfo (19-21)
  • CssOGInfo (26-30)
packages/web-platform/web-constants/src/types/PageConfig.ts (1)
  • PageConfig (4-10)
packages/web-platform/web-constants/src/types/SSR.ts (1)
  • SSRHydrateInfo (16-23)
packages/web-platform/web-mainthread-apis/src/utils/decodeCssOG.ts (1)
  • decodeCssOG (12-31)
packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts (1)
packages/web-platform/web-constants/src/constants.ts (2)
  • cssIdAttribute (7-7)
  • lynxUniqueIdAttribute (5-5)
🪛 LanguageTool
.changeset/busy-streets-invite.md

[grammar] ~7-~7: There might be a mistake here.
Context: ...ctor: add :not([l-e-name]) at the end of selector for lazy component

(QB_NEW_EN)


[grammar] ~7-~7: There might be a mistake here.
Context: ...not([l-e-name])` at the end of selector for lazy component

(QB_NEW_EN)


[grammar] ~7-~7: There might be a mistake here.
Context: ...t the end of selector for lazy component

(QB_NEW_EN)

⏰ 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). (6)
  • GitHub Check: build / Build (Windows)
  • GitHub Check: build / Build (Ubuntu)
  • GitHub Check: test-rust / Test (Ubuntu)
  • GitHub Check: CodeQL Analyze (actions)
  • GitHub Check: CodeQL Analyze (javascript-typescript)
  • GitHub Check: zizmor
🔇 Additional comments (6)
.changeset/busy-streets-invite.md (1)

1-5: Changeset scopes look correct (patch bumps for three packages).
Package names are properly scoped and align with repo conventions.

packages/web-platform/web-constants/src/constants.ts (1)

13-14: Add entry-name attribute constant — LGTM.
Consistent naming and placement alongside other short attributes.

packages/web-platform/web-mainthread-apis/src/prepareMainThreadAPIs.ts (3)

34-34: Import appendStyleElement — LGTM.
Keeps style concerns in one utility.


121-121: Expose updateCssOGStyle via callbacks — LGTM.
Matches new runtime interface and CSSOG path.


100-107: Initialize CSS pipeline before runtime wiring — LGTM. Runs after await initWasmPromise and reuses SSR style element when present. Only one usage of appendStyleElement exists and currently passes undefined for the entry name; ensure future lazy entries supply an entryName when needed.

packages/web-platform/web-mainthread-apis/src/utils/processStyleInfo.ts (1)

13-16: Imports for SSR and decode — LGTM.
Aligns with new hydration/update flow.

Also applies to: 18-18

@codspeed-hq
Copy link

codspeed-hq bot commented Aug 28, 2025

CodSpeed Performance Report

Merging #1622 will improve performances by ×6.5

Comparing PupilTong:p/hw/split-lazy-component-pr-1 (6d15241) with main (ff4ede6)

🎉 Hooray! codspeed-cpp just leveled up to 1.2.0!

A heads-up, this is a breaking change and it might affect your current performance baseline a bit. But here's the exciting part - it's packed with new, cool features and promises improved result stability 🥳!
Curious about what's new? Visit our releases page to delve into all the awesome details about this new version.

Summary

⚡ 5 improvements
✅ 14 untouched benchmarks

Benchmarks breakdown

Benchmark BASE HEAD Change
002-hello-reactLynx-commitChanges 107.7 µs 85.5 µs +25.96%
002-hello-reactLynx-hydrate 1.7 ms 1.4 ms +19.85%
002-hello-reactLynx__main-thread-renderOpcodesInto 10.6 ms 1.6 ms ×6.5
002-hello-reactLynx__main-thread-renderToString 2.1 ms 1.6 ms +30.95%
basic-performance-small-css 7.5 ms 6.8 ms +11.42%

@relativeci
Copy link

relativeci bot commented Aug 28, 2025

Web Explorer

#4680 Bundle Size — 367.43KiB (+0.05%).

6d15241(current) vs ff4ede6 main#4673(baseline)

Bundle metrics  Change 4 changes Regression 1 regression
                 Current
#4680
     Baseline
#4673
Regression  Initial JS 144.23KiB(+0.02%) 144.21KiB
No change  Initial CSS 31.84KiB 31.84KiB
Change  Cache Invalidation 63.22% 0%
No change  Chunks 8 8
No change  Assets 8 8
Change  Modules 218(-0.46%) 219
No change  Duplicate Modules 16 16
Change  Duplicate Code 3.33%(+0.3%) 3.32%
No change  Packages 4 4
No change  Duplicate Packages 0 0
Bundle size by type  Change 1 change Regression 1 regression
                 Current
#4680
     Baseline
#4673
Regression  JS 235.43KiB (+0.08%) 235.24KiB
No change  Other 100.16KiB 100.16KiB
No change  CSS 31.84KiB 31.84KiB

Bundle analysis reportBranch PupilTong:p/hw/split-lazy-compon...Project dashboard


Generated by RelativeCIDocumentationReport issue

@relativeci
Copy link

relativeci bot commented Aug 28, 2025

React Example

#4687 Bundle Size — 237.06KiB (0%).

6d15241(current) vs ff4ede6 main#4680(baseline)

Bundle metrics  no changes
                 Current
#4687
     Baseline
#4680
No change  Initial JS 0B 0B
No change  Initial CSS 0B 0B
No change  Cache Invalidation 0% 0%
No change  Chunks 0 0
No change  Assets 4 4
No change  Modules 158 158
No change  Duplicate Modules 64 64
No change  Duplicate Code 45.83% 45.83%
No change  Packages 2 2
No change  Duplicate Packages 0 0
Bundle size by type  no changes
                 Current
#4687
     Baseline
#4680
No change  IMG 145.76KiB 145.76KiB
No change  Other 91.3KiB 91.3KiB

Bundle analysis reportBranch PupilTong:p/hw/split-lazy-compon...Project dashboard


Generated by RelativeCIDocumentationReport issue

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: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/web-platform/web-core-server/src/dumpHTMLString.ts (1)

39-43: Avoid duplicate attribute and escape the injected id

Currently always emits lynxPartIdAttribute and doesn’t escape its value; can duplicate the attribute and risks malformed HTML/XSS in SSR strings.

Apply:

-  const partId = element[_attributes].get(lynxPartIdAttribute)
-    ?? element[_attributes].get(lynxUniqueIdAttribute)!;
-  buffer.push(' ', lynxPartIdAttribute, '="', partId, '"');
+  const existingPartId = element[_attributes].get(lynxPartIdAttribute);
+  const fallbackUniqueId = element[_attributes].get(lynxUniqueIdAttribute);
+  if (!existingPartId && fallbackUniqueId) {
+    buffer.push(' ', lynxPartIdAttribute, '="', escapeHtml(fallbackUniqueId), '"');
+  }
📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between dba1812 and 6d15241.

📒 Files selected for processing (7)
  • .changeset/little-games-clap.md (1 hunks)
  • packages/web-platform/offscreen-document/src/main/initOffscreenDocument.ts (2 hunks)
  • packages/web-platform/offscreen-document/src/types/ElementOperation.ts (3 hunks)
  • packages/web-platform/offscreen-document/src/webworker/OffscreenElement.ts (3 hunks)
  • packages/web-platform/offscreen-document/src/webworker/index.ts (1 hunks)
  • packages/web-platform/web-constants/src/types/Element.ts (1 hunks)
  • packages/web-platform/web-core-server/src/dumpHTMLString.ts (4 hunks)
✅ Files skipped from review due to trivial changes (1)
  • .changeset/little-games-clap.md
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: PupilTong
PR: lynx-family/lynx-stack#1029
File: packages/web-platform/web-core/src/uiThread/createRenderAllOnUI.ts:95-99
Timestamp: 2025-07-16T06:28:26.463Z
Learning: In the lynx-stack codebase, CSS selectors in SSR hydration are generated by their own packages, ensuring a predictable format that makes simple string manipulation safe and preferable over regex for performance reasons.
Learnt from: PupilTong
PR: lynx-family/lynx-stack#1029
File: packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts:214-217
Timestamp: 2025-07-16T06:25:41.055Z
Learning: In the lynx-stack codebase, CSS strings produced by `genCssContent` are considered trusted developer input, so additional sanitization/escaping is not required.
🧬 Code graph analysis (2)
packages/web-platform/offscreen-document/src/webworker/OffscreenElement.ts (2)
packages/web-platform/offscreen-document/src/webworker/OffscreenDocument.ts (1)
  • operations (17-17)
packages/web-platform/offscreen-document/src/types/ElementOperation.ts (1)
  • OperationType (5-20)
packages/web-platform/web-core-server/src/dumpHTMLString.ts (2)
packages/web-platform/offscreen-document/src/webworker/OffscreenElement.ts (3)
  • textContent (15-15)
  • textContent (278-291)
  • _children (14-14)
packages/web-platform/offscreen-document/src/webworker/index.ts (2)
  • textContent (7-7)
  • _children (8-8)
⏰ 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). (4)
  • GitHub Check: build / Build (Windows)
  • GitHub Check: build / Build (Ubuntu)
  • GitHub Check: test-rust / Test (Ubuntu)
  • GitHub Check: CodeQL Analyze (javascript-typescript)
🔇 Additional comments (6)
packages/web-platform/web-constants/src/types/Element.ts (1)

80-80: Interface switch to textContent looks good

Change aligns with DOM semantics and the refactor away from innerHTML. No issues spotted.

packages/web-platform/web-core-server/src/dumpHTMLString.ts (1)

21-68: Name aligns but helper now mismatches behavior vs prior innerHTML path

Switch to textContent is correct, but please add unit tests covering:

  • Text with “< > &” is escaped for normal elements.
  • Style/script content remains intact.
  • No duplicate lynxPartIdAttribute emitted.

Would you like me to draft these SSR tests?

Also applies to: 70-82

packages/web-platform/offscreen-document/src/types/ElementOperation.ts (1)

17-20: Opcode rename to SetTextContent preserves numeric value—good

Keeps wire compatibility (12). Commented hint types updated consistently.

Also applies to: 106-109, 135-135

packages/web-platform/offscreen-document/src/main/initOffscreenDocument.ts (2)

122-126: Decode SetTextContent correctly assigns DOM.textContent

Change is correct and matches the new opcode.

Also applies to: 216-218


105-126: No lingering SetInnerHTML references in offscreen-document
Verified that there are no remaining OperationType.SetInnerHTML or SetInnerHTML usages in packages/web-platform/offscreen-document/src.

packages/web-platform/offscreen-document/src/webworker/OffscreenElement.ts (1)

288-290: Style rules cache invalidation is correct

Clearing _cssRuleContents on text updates prevents stale CSS emission. Good.

@PupilTong PupilTong merged commit 1a32dd8 into lynx-family:main Aug 28, 2025
92 of 97 checks passed
@coderabbitai coderabbitai bot mentioned this pull request Aug 29, 2025
2 tasks
colinaaa pushed a commit that referenced this pull request Sep 1, 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]

### Minor Changes

- Deprecate `source.alias`, use `resolve.alias` instead.
([#1610](#1610))

Note that `resolve.alias` has **lower** priority than the deprecated
`source.alias`.

- Bump Rsbuild v1.5.0 with Rspack v1.5.0.
([#1591](#1591))

- **BREAKING CHANGE**: Remove the `./register` exports from
`@lynx-js/rspeedy`.
([#1547](#1547))

    This should not affect most users.

### Patch Changes

- Support `resolve.alias`.
([#1610](#1610))

- Support `rspeedy build --watch`
([#1579](#1579))

- Updated dependencies
\[[`d7d0b9b`](d7d0b9b),
[`1952fc1`](1952fc1)]:
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Minor Changes

- refactor: provide the mts a real globalThis
([#1589](#1589))

Before this change, We create a function wrapper and a fake globalThis
for Javascript code.

    This caused some issues.

After this change, we will create an iframe for createing an isolated
Javascript context.

    This means the globalThis will be the real one.

### Patch Changes

- refactor: add `:not([l-e-name])` at the end of selector for lazy
component ([#1622](#1622))

- fix: the SystemInfo in bts should be assigned to the globalThis
([#1599](#1599))

- Updated dependencies
\[[`c1f8715`](c1f8715)]:
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Minor Changes

- refactor: provide the mts a real globalThis
([#1589](#1589))

Before this change, We create a function wrapper and a fake globalThis
for Javascript code.

    This caused some issues.

After this change, we will create an iframe for createing an isolated
Javascript context.

    This means the globalThis will be the real one.

### Patch Changes

- refactor: add `:not([l-e-name])` at the end of selector for lazy
component ([#1622](#1622))

- feat: remove multi-thread mts heating
([#1597](#1597))

The default rendering mode is "all-on-ui". Therefore the preheating for
"multi-thread" will be removed.

- fix: the SystemInfo in bts should be assigned to the globalThis
([#1599](#1599))

- Updated dependencies
\[[`1a32dd8`](1a32dd8),
[`bb53d9a`](bb53d9a),
[`1a32dd8`](1a32dd8),
[`c1f8715`](c1f8715)]:
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Minor Changes

- refactor: provide the mts a real globalThis
([#1589](#1589))

Before this change, We create a function wrapper and a fake globalThis
for Javascript code.

    This caused some issues.

After this change, we will create an iframe for createing an isolated
Javascript context.

    This means the globalThis will be the real one.

## @lynx-js/[email protected]

### Minor Changes

- refactor: provide the mts a real globalThis
([#1589](#1589))

Before this change, We create a function wrapper and a fake globalThis
for Javascript code.

    This caused some issues.

After this change, we will create an iframe for createing an isolated
Javascript context.

    This means the globalThis will be the real one.

### Patch Changes

- refactor: add `:not([l-e-name])` at the end of selector for lazy
component ([#1622](#1622))

- fix: the SystemInfo in bts should be assigned to the globalThis
([#1599](#1599))

- Updated dependencies
\[[`1a32dd8`](1a32dd8),
[`bb53d9a`](bb53d9a),
[`c1f8715`](c1f8715)]:
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Minor Changes

- refactor: provide the mts a real globalThis
([#1589](#1589))

Before this change, We create a function wrapper and a fake globalThis
for Javascript code.

    This caused some issues.

After this change, we will create an iframe for createing an isolated
Javascript context.

    This means the globalThis will be the real one.

## @lynx-js/[email protected]

### Minor Changes

- refactor: provide the mts a real globalThis
([#1589](#1589))

Before this change, We create a function wrapper and a fake globalThis
for Javascript code.

    This caused some issues.

After this change, we will create an iframe for createing an isolated
Javascript context.

    This means the globalThis will be the real one.

### Patch Changes

- fix: the SystemInfo in bts should be assigned to the globalThis
([#1599](#1599))

- Updated dependencies
\[[`1a32dd8`](1a32dd8),
[`bb53d9a`](bb53d9a),
[`1a32dd8`](1a32dd8),
[`c1f8715`](c1f8715)]:
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- Remove the "key is not on root element of snapshot" warning.
([#1558](#1558))

## [email protected]

### Patch Changes

- Use TypeScript [Project
References](https://www.typescriptlang.org/docs/handbook/project-references.html)
in templates.
([#1612](#1612))

## @lynx-js/[email protected]

### Patch Changes

- remove innerHTML, replace it by textContent
([#1622](#1622))

## @lynx-js/[email protected]

### Patch Changes

- Fix that `__webpack_require__.lynx_ce` is incorrectly injected when
lazy bundle is enabled.
([#1616](#1616))

## @lynx-js/[email protected]

### Patch Changes

- Should not load initial CSS chunks.
([#1601](#1601))

## [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

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants