feat: move SSR hydrate essential info to the ssr attribute #1292
Conversation
🦋 Changeset detectedLatest commit: 63fae1b The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 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 |
|
Warning Rate limit exceeded@PupilTong has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 2 minutes and 48 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (9)
WalkthroughThis change refactors how server-side rendering (SSR) hydration and event replay data are embedded in the rendered HTML. Instead of using a base64-encoded comment, SSR data is now included as a URI-encoded JSON object in a dedicated Changes
Sequence Diagram(s)sequenceDiagram
participant Server
participant prepareMainThreadAPIs
participant createMainThreadGlobalThis
participant LynxView
Server->>prepareMainThreadAPIs: Call with ssrHooks (includes __AddEvent)
prepareMainThreadAPIs->>createMainThreadGlobalThis: Pass ssrHooks
createMainThreadGlobalThis->>createMainThreadGlobalThis: Override __AddEvent if ssrHooks provided
prepareMainThreadAPIs-->>Server: Returns APIs with hooked __AddEvent
Server->>LynxView: Render <lynx-view> with ssr attribute (URI-encoded JSON)
Possibly related PRs
Suggested reviewers
Poem
✨ 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.
Pull Request Overview
This PR moves SSR hydration data from base64-encoded comments into a dedicated ssr attribute on the <lynx-view> element, wires SSR dehydrate hooks through the main-thread APIs, and updates related type definitions.
- Introduce
ssrHooksacrossprepareMainThreadAPIsandcreateMainThreadGlobalThisto capture events during server render. - Collect and serialize SSR dump info (encoded data + event list) into the
ssrattribute. - Update type exports and adjust test suite to cover basic SSR bindings.
Reviewed Changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/web-platform/web-tests/tests/server.vitest.spec.ts | Added a new test for basic-bindtap but test name mismatches the input. |
| packages/web-platform/web-mainthread-apis/src/pureElementPAPIs.ts | Coerce style values to strings before parsing inline styles. |
| packages/web-platform/web-mainthread-apis/src/prepareMainThreadAPIs.ts | Pass new ssrHooks parameter into API initializer. |
| packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts | Support overriding __AddEvent via SSR hooks. |
| packages/web-platform/web-core-server/src/createLynxView.ts | Serialize SSR data into the ssr attribute instead of HTML comments. |
| packages/web-platform/web-constants/src/types/index.ts | Export new SSR-related types. |
| packages/web-platform/web-constants/src/types/SSR.ts | Define SSREventReplayInfo, SSRDumpInfo, and SSRDehydrateHooks. |
| packages/web-platform/web-constants/src/types/MainThreadGlobalThis.ts | Allow ssrHydrate to accept null. |
Comments suppressed due to low confidence (1)
packages/web-platform/web-tests/tests/server.vitest.spec.ts:24
- The test name 'config-css-selector-false-exchange-class' does not match the template key 'basic-bindtap' used inside. Rename the test to 'basic-bindtap' (or another descriptive name) to reflect its purpose.
test('config-css-selector-false-exchange-class', async () => {
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
packages/web-platform/web-tests/tests/__snapshots__/server.vitest.spec.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (9)
.changeset/lemon-colts-hang.md(1 hunks)packages/web-platform/web-constants/src/types/MainThreadGlobalThis.ts(1 hunks)packages/web-platform/web-constants/src/types/SSR.ts(1 hunks)packages/web-platform/web-constants/src/types/index.ts(1 hunks)packages/web-platform/web-core-server/src/createLynxView.ts(4 hunks)packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts(4 hunks)packages/web-platform/web-mainthread-apis/src/prepareMainThreadAPIs.ts(3 hunks)packages/web-platform/web-mainthread-apis/src/pureElementPAPIs.ts(1 hunks)packages/web-platform/web-tests/tests/server.vitest.spec.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (5)
packages/web-platform/web-tests/tests/server.vitest.spec.ts (1)
packages/web-platform/web-tests/server.js (1)
genTemplate(35-42)
packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts (2)
packages/web-platform/web-constants/src/types/SSR.ts (1)
SSRDehydrateHooks(15-17)packages/web-platform/web-core-server/src/createLynxView.ts (1)
__AddEvent(144-151)
packages/web-platform/web-constants/src/types/SSR.ts (1)
packages/web-platform/web-constants/src/types/MainThreadGlobalThis.ts (1)
AddEventPAPI(19-24)
packages/web-platform/web-core-server/src/createLynxView.ts (2)
packages/web-platform/web-constants/src/types/SSR.ts (2)
SSREventReplayInfo(3-8)SSRDumpInfo(10-13)packages/web-platform/web-constants/src/constants.ts (1)
lynxUniqueIdAttribute(5-5)
packages/web-platform/web-mainthread-apis/src/prepareMainThreadAPIs.ts (1)
packages/web-platform/web-constants/src/types/SSR.ts (1)
SSRDehydrateHooks(15-17)
🔇 Additional comments (8)
.changeset/lemon-colts-hang.md (1)
1-15: Well-documented changeset.The changeset clearly describes the feature change and provides proper context for why the SSR hydration data is being moved from base64 encoding to a dedicated
ssrattribute.packages/web-platform/web-constants/src/types/index.ts (1)
21-21: LGTM: Proper SSR type export.The addition correctly exports the new SSR types following the established pattern.
packages/web-platform/web-constants/src/types/MainThreadGlobalThis.ts (1)
345-345: LGTM: Appropriate type extension for SSR hydration.The parameter type change from
stringtostring | nullcorrectly reflects that SSR hydration data might not always be present, improving type safety.packages/web-platform/web-mainthread-apis/src/pureElementPAPIs.ts (1)
317-322: LGTM: Improved style value type safety.The stringification of style values using optional chaining and nullish coalescing ensures type safety and consistent string conversion. The explicit type annotation
[string, string]improves type clarity.packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts (1)
674-674: LGTM! Clean conditional override for SSR event capturing.The implementation correctly uses optional chaining and nullish coalescing to conditionally override
__AddEventwith the SSR version when available, maintaining backward compatibility.packages/web-platform/web-mainthread-apis/src/prepareMainThreadAPIs.ts (3)
27-27: LGTM - Import looks correct.The import of
SSRDehydrateHooksfrom the web-constants package is properly placed and follows the existing import pattern.
51-51: LGTM - Optional parameter follows TypeScript best practices.The addition of the optional
ssrHooksparameter with proper typing ensures backward compatibility while enabling SSR dehydration functionality.
120-120: LGTM - Parameter threading is correctly implemented.The
ssrHooksparameter is properly passed through tocreateMainThreadGlobalThis, enabling the main thread global context to optionally use SSR dehydration hooks as described in the AI summary.
PupilTong
force-pushed
the
p/hw/ssr-attribute
branch
from
19c1b22 to
efc776a
Compare
PupilTong
force-pushed
the
p/hw/ssr-attribute
branch
from
efc776a to
7a8d871
Compare
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 Implement SSR for Web #52
Co-authored-by: Copilot <[email protected]> Signed-off-by: PupilTong <[email protected]>
PupilTong
force-pushed
the
p/hw/ssr-attribute
branch
from
7a8d871 to
63fae1b
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅ ✅ All tests successful. No failed tests found. 📢 Thoughts on this report? Let us know! |
CodSpeed Performance ReportMerging #1292 will not alter performanceComparing Summary
|
Web Explorer#2945 Bundle Size — 303.62KiB (+0.02%).63fae1b(current) vs f656b7f main#2943(baseline) Bundle metrics
|
| Current #2945 |
Baseline #2943 |
|
|---|---|---|
 Initial JS |
139.94KiB |
139.94KiB |
| Initial CSS |
31.88KiB |
31.88KiB |
| Cache Invalidation |
7.29% |
7.29% |
| Chunks |
4 |
4 |
| Assets |
5 |
5 |
 Modules |
205(+0.49%) |
204 |
| Duplicate Modules |
17 |
17 |
| Duplicate Code |
4.23% |
4.23% |
| Packages |
3 |
3 |
| Duplicate Packages |
0 |
0 |
Bundle size by type 1 change 
1 regression
| Current #2945 |
Baseline #2943 |
|
|---|---|---|
| JS |
220.85KiB (+0.03%) |
220.79KiB |
| Other |
50.89KiB |
50.89KiB |
| CSS |
31.88KiB |
31.88KiB |
Bundle analysis report Branch PupilTong:p/hw/ssr-attribute Project dashboard
Generated by RelativeCI Documentation Report issue
React Example#2954 Bundle Size — 234.12KiB (0%).63fae1b(current) vs f656b7f main#2952(baseline) Bundle metrics
|
| Current #2954 |
Baseline #2952 |
|
|---|---|---|
| Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
4 |
4 |
| Modules |
153 |
153 |
| Duplicate Modules |
61 |
61 |
| Duplicate Code |
45.85% |
45.85% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #2954 |
Baseline #2952 |
|
|---|---|---|
| IMG |
145.76KiB |
145.76KiB |
| Other |
88.37KiB |
88.37KiB |
Bundle analysis report Branch PupilTong:p/hw/ssr-attribute Project dashboard
Generated by RelativeCI Documentation Report issue
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>
2 participants
We found that in browser there is no simple tool to decode a base64 string
Therefore we move the data to
ssrattributeAlso fix some ssr issues
Implement SSR for Web #52
Summary by CodeRabbit
New Features
Bug Fixes
Tests
Refactor