-
Notifications
You must be signed in to change notification settings - Fork 113
refactor: move some internal status to dom's attribute #945
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
🦋 Changeset detectedLatest commit: be7686c 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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This 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 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 #945 will not alter performanceComparing Summary
|
2b31eee to
ae925cd
Compare
React Example#1069 Bundle Size — 231.7KiB (-0.91%).be7686c(current) vs fadfbcf main#1047(baseline) Bundle metrics
Bundle size by type
Bundle analysis report Branch PupilTong:p/hw/reduce-runtime-in... Project dashboard Generated by RelativeCI Documentation Report issue |
0f6bb09 to
087c77a
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR 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 addsl-p-comp-uidandl-dataset. - Updates serialization, event handling, element creation, and dataset functions to read/write from these new attributes instead of runtime maps.
- Removes the
getElementByUniqueIdsymbol/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 renamelynx-tagtol-tagor 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,
...orm/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts
Outdated
Show resolved
Hide resolved
packages/web-platform/web-mainthread-apis/src/utils/createCrossThreadEvent.ts
Outdated
Show resolved
Hide resolved
94d87a0 to
d0e6c37
Compare
It's essential for SSR Implement SSR for Web #52
db603bb to
be7686c
Compare
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 <-> 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 <-> 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 <-> 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 <-> 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>
It's essential for SSR
Implement SSR for Web #52