Skip to content

Conversation

@PupilTong
Copy link
Collaborator

It's essential for SSR

Implement SSR for Web #52

@changeset-bot
Copy link

changeset-bot bot commented May 27, 2025

🦋 Changeset detected

Latest commit: be7686c

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

This PR includes changesets to release 6 packages
Name Type
@lynx-js/web-mainthread-apis Patch
@lynx-js/web-constants Patch
@lynx-js/web-core Patch
@lynx-js/web-core-server Patch
@lynx-js/web-worker-runtime Patch
@lynx-js/web-worker-rpc 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

@PupilTong PupilTong requested a review from Copilot May 27, 2025 13:10
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 pull request refactors internal status management by moving the parent component unique identifier from runtime state into a DOM attribute, supporting SSR for Web.

  • Replace usage of the getElementByUniqueId symbol with accessing runtime[lynxUniqueIdToElement] and dereferencing elements.
  • Update element creation logic to set a parent component unique ID attribute (using new constant names) on page elements rather than in runtime info.
  • Adjust constants definitions to use shorter attribute names for brevity and consistency.

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
packages/web-platform/web-mainthread-apis/src/elementAPI/event/eventFunctions.ts Refactored how parent component IDs are retrieved, now converting an attribute to a number and using the new runtime mapping.
packages/web-platform/web-mainthread-apis/src/elementAPI/elementCreating/elementCreatingFunctions.ts Updated element creation to remove runtime state for parentComponentUniqueId and instead set it as a DOM attribute.
packages/web-platform/web-mainthread-apis/src/elementAPI/ElementThreadElement.ts Removed the now-unused parentComponentUniqueId from the runtime info interface.
packages/web-platform/web-mainthread-apis/src/MainThreadRuntime.ts Removed the deprecated getElementByUniqueId function in favor of the updated lookup mechanism.
packages/web-platform/web-constants/src/constants.ts Updated attribute constants with shorter names and introduced a new constant for the parent component unique ID.
.changeset/busy-suits-build.md Updated versioning and changelog to reflect these refactoring changes.
Comments suppressed due to low confidence (2)

packages/web-platform/web-mainthread-apis/src/elementAPI/event/eventFunctions.ts:41

  • Consider verifying that the parentComponentUniqueId attribute exists and is a valid number to prevent potential runtime errors in SSR scenarios.
const parentComponentUniqueId = Number(currentTarget.getAttribute(parentComponentUniqueIdAttribute)!);

packages/web-platform/web-mainthread-apis/src/elementAPI/elementCreating/elementCreatingFunctions.ts:115

  • Ensure that setting the parent component unique ID to '0' for page elements aligns with the intended SSR behavior across the codebase.
page.setAttribute(parentComponentUniqueIdAttribute, '0');

@codecov
Copy link

codecov bot commented May 27, 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!

@codspeed-hq
Copy link

codspeed-hq bot commented May 27, 2025

CodSpeed Performance Report

Merging #945 will not alter performance

Comparing PupilTong:p/hw/reduce-runtime-info (be7686c) with main (fadfbcf)

Summary

✅ 9 untouched benchmarks

@PupilTong PupilTong force-pushed the p/hw/reduce-runtime-info branch from 2b31eee to ae925cd Compare May 27, 2025 13:18
@PupilTong PupilTong changed the title (WIP)refactor: move some internal status to dom's attribute refactor: move some internal status to dom's attribute May 27, 2025
@PupilTong PupilTong marked this pull request as ready for review May 27, 2025 13:18
@relativeci
Copy link

relativeci bot commented May 27, 2025

React Example

#1069 Bundle Size — 231.7KiB (-0.91%).

be7686c(current) vs fadfbcf main#1047(baseline)

Bundle metrics  Change 1 change
                 Current
#1069
     Baseline
#1047
No change  Initial JS 0B 0B
No change  Initial CSS 0B 0B
Change  Cache Invalidation 37.67% 0%
No change  Chunks 0 0
No change  Assets 4 4
No change  Modules 141 141
No change  Duplicate Modules 56 56
No change  Duplicate Code 46.17% 46.17%
No change  Packages 2 2
No change  Duplicate Packages 0 0
Bundle size by type  Change 1 change Improvement 1 improvement
                 Current
#1069
     Baseline
#1047
No change  IMG 145.76KiB 145.76KiB
Improvement  Other 85.94KiB (-2.42%) 88.08KiB

Bundle analysis reportBranch PupilTong:p/hw/reduce-runtime-in...Project dashboard


Generated by RelativeCIDocumentationReport issue

@PupilTong PupilTong force-pushed the p/hw/reduce-runtime-info branch 10 times, most recently from 0f6bb09 to 087c77a Compare May 29, 2025 10:20
@PupilTong PupilTong requested a review from Copilot May 29, 2025 10:25
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 refactors several internal state mappings onto DOM attributes to enable server-side rendering (SSR) support.

  • Renames and centralizes attribute names (unique ID, CSS ID, component ID) to shorter l- prefixed attributes and adds l-p-comp-uid and l-dataset.
  • Updates serialization, event handling, element creation, and dataset functions to read/write from these new attributes instead of runtime maps.
  • Removes the getElementByUniqueId symbol/method and adjusts snapshot tests to match the new attribute output.

Reviewed Changes

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

Show a summary per file
File Description
packages/web-platform/web-tests/tests/__snapshots__/server.vitest.spec.ts.snap Updated snapshots to use new l-uid, l-css-id, l-comp-id, and l-p-comp-uid attributes.
packages/web-platform/web-tests/shell-project/mainthread-test.ts Switched from getElementByUniqueId to lynxUniqueIdToElement and .deref().
packages/web-platform/web-mainthread-apis/src/utils/createExposureService.ts Removed obsolete runtime argument from createCrossThreadEvent call.
packages/web-platform/web-mainthread-apis/src/utils/createCrossThreadEvent.ts Dropped runtime param and now pulls IDs/dataset from attributes.
packages/web-platform/web-mainthread-apis/src/elementAPI/event/eventFunctions.ts Reads parent component ID from l-p-comp-uid attribute instead of runtime info.
packages/web-platform/web-mainthread-apis/src/elementAPI/elementCreating/elementCreatingFunctions.ts Sets l-p-comp-uid on created elements instead of runtime map.
packages/web-platform/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts Replaces in-memory dataset map with URI-encoded JSON in l-dataset.
packages/web-platform/web-mainthread-apis/src/elementAPI/ElementThreadElement.ts Removed parentComponentUniqueId and lynxDataset from LynxRuntimeInfo.
packages/web-platform/web-mainthread-apis/src/MainThreadRuntime.ts Removed getElementByUniqueId symbol and method.
packages/web-platform/web-constants/src/constants.ts Renamed attribute constants and added parentComponentUniqueIdAttribute, lynxDatasetAttribute.
.changeset/busy-suits-build.md Added changeset describing the attribute–based refactor.
Comments suppressed due to low confidence (3)

packages/web-platform/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts:76

  • This implementation reparses the entire dataset JSON on each call; for large datasets, consider caching the parsed object (e.g., in a WeakMap) to avoid repeated JSON operations.
function __GetDataset(
      element: HTMLElement,
    ): Record<string, any> {

packages/web-platform/web-constants/src/constants.ts:5

  • [nitpick] Most attributes have been renamed to the l- prefix; to maintain consistency, you may want to rename lynx-tag to l-tag or document the exception clearly.
export const lynxTagAttribute = 'lynx-tag' as const;

packages/web-platform/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts:42

  • None of the new dataset-related functions (__GetDataset, __SetDataset, __GetAttributes) appear to have dedicated unit tests; consider adding tests to validate correct encoding/decoding and merge behavior.
function __GetAttributes(
      element: HTMLElement,
      key: string,

@PupilTong PupilTong force-pushed the p/hw/reduce-runtime-info branch from 94d87a0 to d0e6c37 Compare May 29, 2025 13:32
It's essential for SSR

Implement SSR for Web #52
@PupilTong PupilTong force-pushed the p/hw/reduce-runtime-info branch from db603bb to be7686c Compare May 30, 2025 08:46
@PupilTong PupilTong requested a review from Sherry-hue May 30, 2025 09:21
@PupilTong PupilTong added this pull request to the merge queue Jun 3, 2025
Merged via the queue into lynx-family:main with commit 70b82d2 Jun 3, 2025
39 checks passed
@PupilTong PupilTong deleted the p/hw/reduce-runtime-info branch June 3, 2025 04:16
colinaaa pushed a commit that referenced this pull request Jun 6, 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

- Support for locating errors in the source code directly on the device
when exceptions occur when using MTS.
([#1019](#1019))

    This requires Lynx engine v3.4 or later.

- Fix the "main-thread.js exception: ReferenceError:
`__webpack_require__` is not defined" error in HMR.
([#985](#985))

This error occurred when setting `output.iife: true`, which is the
default value in `@lynx-js/rspeedy` v0.9.8.

## @lynx-js/[email protected]

### Patch Changes

- Set `optimization.emitOnErrors` when `DEBUG` is enabled.
([#1000](#1000))

    This is useful for debugging PrimJS Syntax error.

## @lynx-js/[email protected]

### Patch Changes

- Better [zustand](https://github.com/pmndrs/zustand) support by
creating an alias for `use-sync-external-store`.
([#980](#980))

See
[#893](#893)
for more details.

- Updated dependencies
\[[`acc0d80`](acc0d80)]:
    -   @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]

## @lynx-js/[email protected]

### Patch Changes

- Support Windows.
([#1007](#1007))

## @lynx-js/[email protected]

### Patch Changes

- feat: add sheet.insertRule support
([#1026](#1026))

- refactor: implement mts apis in closure pattern
([#1004](#1004))

## @lynx-js/[email protected]

### Patch Changes

- refactor: move some internal status to dom's attribute
([#945](#945))

    It's essential for SSR

- fix: target.id is undefined
([#1016](#1016))

- feat: add new pageConfig configuration: enableJSDataProcessor
([#886](#886))

- refactor: move component config info to attribute
([#984](#984))

- refactor: save dataset on an attribute
([#981](#981))

On lynx, the `data-*` attributes have different behaviors than the
HTMLElement has.

The dataset will be treated as properties, the key will not be applied
the camel-case &lt;-> hyphenate name transformation.

Before this commit we use it as a runtime data, but after this commit we
will use encodeURI(JSON.stringify(dataset)) to encode it as a string.

- refactor: create elements of `elementToRuntimeInfoMap` on demand
([#986](#986))

- refactor: implement mts apis in closure pattern
([#1004](#1004))

-   Updated dependencies \[]:
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- refactor: move some internal status to dom's attribute
([#945](#945))

    It's essential for SSR

- refactor: avoid to create many style element for cssog
([#1026](#1026))

- refactor: move component config info to attribute
([#984](#984))

- fix: ensure render starts after dom connected
([#1020](#1020))

- refactor: save dataset on an attribute
([#981](#981))

On lynx, the `data-*` attributes have different behaviors than the
HTMLElement has.

The dataset will be treated as properties, the key will not be applied
the camel-case &lt;-> hyphenate name transformation.

Before this commit we use it as a runtime data, but after this commit we
will use encodeURI(JSON.stringify(dataset)) to encode it as a string.

- refactor: implement mts apis in closure pattern
([#1004](#1004))

- Updated dependencies
\[[`70b82d2`](70b82d2),
[`5651e24`](5651e24),
[`9499ea9`](9499ea9),
[`50f0193`](50f0193),
[`57bf0ef`](57bf0ef),
[`5651e24`](5651e24),
[`0525fbf`](0525fbf),
[`b6b87fd`](b6b87fd),
[`c014327`](c014327)]:
    -   @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

- refactor: move some internal status to dom's attribute
([#945](#945))

    It's essential for SSR

- refactor: move component config info to attribute
([#984](#984))

- refactor: save dataset on an attribute
([#981](#981))

On lynx, the `data-*` attributes have different behaviors than the
HTMLElement has.

The dataset will be treated as properties, the key will not be applied
the camel-case &lt;-> hyphenate name transformation.

Before this commit we use it as a runtime data, but after this commit we
will use encodeURI(JSON.stringify(dataset)) to encode it as a string.

- fix: dump encode data in comment
([#989](#989))

## @lynx-js/[email protected]

### Patch Changes

- feat: x-input && x-textarea add new method: `getValue`, which returns
the value of the input element, selectionStart and selectEnd when
success. ([#982](#982))

- feat: x-input and x-textarea bindinput event return structures add
`selectionStart`, `selectionEnd`, and `textLength`, `textLength` are
marked as @deprecated
([#996](#996))

- feat: x-input and x-textarea support bindselection event, the returned
type structure is `{ selectionStart: number; selectionEnd: number }`.
([#990](#990))

-   Updated dependencies \[]:
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- refactor: move some internal status to dom's attribute
([#945](#945))

    It's essential for SSR

- refactor: avoid to create many style element for cssog
([#1026](#1026))

- fix: target.id is undefined
([#1016](#1016))

- feat: add new pageConfig configuration: enableJSDataProcessor
([#886](#886))

- refactor: move component config info to attribute
([#984](#984))

- refactor: save dataset on an attribute
([#981](#981))

On lynx, the `data-*` attributes have different behaviors than the
HTMLElement has.

The dataset will be treated as properties, the key will not be applied
the camel-case &lt;-> hyphenate name transformation.

Before this commit we use it as a runtime data, but after this commit we
will use encodeURI(JSON.stringify(dataset)) to encode it as a string.

- refactor: create elements of `elementToRuntimeInfoMap` on demand
([#986](#986))

- refactor: implement mts apis in closure pattern
([#1004](#1004))

- Updated dependencies
\[[`70b82d2`](70b82d2),
[`9499ea9`](9499ea9),
[`50f0193`](50f0193),
[`57bf0ef`](57bf0ef),
[`0525fbf`](0525fbf),
[`b6b87fd`](b6b87fd),
[`c014327`](c014327)]:
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- refactor: implement mts apis in closure pattern
([#1004](#1004))

- Updated dependencies
\[[`70b82d2`](70b82d2),
[`5651e24`](5651e24),
[`9499ea9`](9499ea9),
[`50f0193`](50f0193),
[`57bf0ef`](57bf0ef),
[`5651e24`](5651e24),
[`0525fbf`](0525fbf),
[`b6b87fd`](b6b87fd),
[`c014327`](c014327)]:
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]
    -   @lynx-js/[email protected]

## @lynx-js/[email protected]

### Patch Changes

- Fix `requestAnimationFrame` is not working.
([#1021](#1021))

## @lynx-js/[email protected]

### Patch Changes

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

## [email protected]



## @lynx-js/[email protected]



## [email protected]



## @lynx-js/[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