refactor: save dataset on an attribute #981

PupilTong · 2025-06-03T07:47:43Z

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.

Implement SSR for Web #52

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. Implement SSR for Web #52

changeset-bot · 2025-06-03T07:47:47Z

🦋 Changeset detected

Latest commit: 3b6d8a6

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

Copilot

Pull Request Overview

This PR refactors how element datasets are stored and accessed by persisting them in a custom l-dset attribute rather than in runtime memory, enabling SSR support.

Switch createCrossThreadEvent and event functions to read dataset and uniqueId from element attributes.
Refactor attribute/property APIs to encode/decode dataset via l-dset and update native data-* attributes.
Remove in-memory lynxDataset from runtime info and initialize dataset entirely through attributes.

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/web-platform/.../createExposureService.ts	Dropped runtime parameter when calling `createCrossThreadEvent`.
packages/web-platform/.../createCrossThreadEvent.ts	Reads dataset (`l-dset`) and `uniqueId` via `getAttribute` instead of runtime info.
packages/web-platform/.../eventFunctions.ts	Updated `createCrossThreadEvent` calls to match new signature.
packages/web-platform/.../elementCreatingFunctions.ts	Removed default `lynxDataset` initialization from runtime info.
packages/web-platform/.../attributeAndPropertyFunctions.ts	Persist dataset to `l-dset` attribute; removed internal `setDatasetAttribute`.
packages/web-platform/.../ElementThreadElement.ts	Removed `lynxDataset` property from `LynxRuntimeInfo` interface.
packages/web-platform/web-constants/src/constants.ts	Added `lynxDatasetAttribute` constant (`'l-dset'`).
.changeset/funny-otters-yawn.md	Added changeset entry for this refactor.

Comments suppressed due to low confidence (1)

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

Add unit tests for the new dataset encoding/decoding logic (l-dset and data-* synchronization) to ensure correct behavior under various edge cases.

export function createAttributeAndPropertyFunctions(

packages/web-platform/web-mainthread-apis/src/utils/createCrossThreadEvent.ts

...orm/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts

codspeed-hq · 2025-06-03T08:01:01Z

CodSpeed Performance Report

Merging #981 will degrade performances by 14.41%

_{Comparing PupilTong:p/hw/dataset (8bfd370) with main (70b82d2)}

Summary

❌ 1 regressions
✅ 8 untouched benchmarks

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Benchmarks breakdown

	Benchmark	`BASE`	`HEAD`	Change
❌	`basic-performance-div-10`	2.2 ms	2.6 ms	-14.41%

relativeci · 2025-06-03T08:03:22Z

React Example

#1121 Bundle Size — 231.7KiB (0%).

8bfd370(current) vs 70b82d2 main#1113(baseline)

Bundle metrics no changes

	Current #1121	Baseline #1113
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`141`	`141`
Duplicate Modules	`56`	`56`
Duplicate Code	`46.17%`	`46.17%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #1121	Baseline #1113
IMG	`145.76KiB`	`145.76KiB`
Other	`85.94KiB`	`85.94KiB`

Bundle analysis report Branch PupilTong:p/hw/dataset Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2025-06-03T08:03:26Z

Web Explorer

#1109 Bundle Size — 254.36KiB (+0.07%).

8bfd370(current) vs 70b82d2 main#1101(baseline)

Bundle metrics

3 changes

1 regression

	Current #1109	Baseline #1101
Initial JS	`136.61KiB`(`+0.02%`)	`136.58KiB`
Initial CSS	`31.79KiB`	`31.79KiB`
Cache Invalidation	`87.49%`	`87.5%`
Chunks	`4`	`4`
Assets	`4`	`4`
Modules	`202`	`202`
Duplicate Modules	`14`	`14`
Duplicate Code	`2.86%`(`+0.35%`)	`2.85%`
Packages	`4`	`4`
Duplicate Packages	`0`	`0`

Bundle size by type

1 change

1 regression

	Current #1109	Baseline #1101
JS	`222.57KiB` (`+0.08%`)	`222.39KiB`
CSS	`31.79KiB`	`31.79KiB`

Bundle analysis report Branch PupilTong:p/hw/dataset Project dashboard

^{Generated by RelativeCI Documentation Report issue}

Copilot

Pull Request Overview

This PR refactors dataset handling by moving from runtime-stored objects to attribute-based storage (l-dset), ensuring data persistence across render boundaries.

Migrate dataset reads/writes to use lynxDatasetAttribute with encodeURIComponent(JSON.stringify(...))
Remove lynxDataset from LynxRuntimeInfo and all runtime maps
Update event creation to parse dataset from attributes and drop the runtime parameter

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
createExposureService.ts	Remove `runtime` arg when calling `createCrossThreadEvent`
createCrossThreadEvent.ts	Read/write dataset from `l-dset` attribute instead of runtime
eventFunctions.ts	Update `createCrossThreadEvent` calls to new signature
elementCreatingFunctions.ts	Remove runtime dataset initialization
attributeAndPropertyFunctions.ts	Implement attribute-based dataset setters/getters
ElementThreadElement.ts	Remove `lynxDataset` from `LynxRuntimeInfo` interface
constants.ts	Add `lynxDatasetAttribute` constant
.changeset/funny-otters-yawn.md	Document dataset attribute refactor

...orm/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts

packages/web-platform/web-mainthread-apis/src/utils/createCrossThreadEvent.ts

...orm/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts

packages/web-platform/web-mainthread-apis/src/utils/createCrossThreadEvent.ts

Copilot

Pull Request Overview

This PR refactors how dataset information is stored and retrieved from DOM elements by encoding the entire dataset as a URI‐encoded JSON string using a new attribute. Key changes include:

Removing the use of in-memory runtime properties for dataset management in favor of using a dedicated attribute (lynxDatasetAttribute).
Updating functions throughout the codebase (createExposureService, createCrossThreadEvent, elementCreatingFunctions, and attributeAndPropertyFunctions) to align with the new dataset saving strategy.
Removing the lynxDataset property from runtime information and introducing its handling via DOM attributes.

Reviewed Changes

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

Show a summary per file

File	Description
packages/web-platform/web-mainthread-apis/src/utils/createExposureService.ts	Removed the runtime parameter in the createCrossThreadEvent call.
packages/web-platform/web-mainthread-apis/src/utils/createCrossThreadEvent.ts	Eliminated runtime-based dataset access and now reads dataset directly from attributes.
packages/web-platform/web-mainthread-apis/src/elementAPI/elementCreating/elementCreatingFunctions.ts	Removed initialization of the lynxDataset property from runtimeInfo.
packages/web-platform/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts	Updated dataset-setting logic to encode the dataset and to set individual data- attributes.
packages/web-platform/web-constants/src/constants.ts	Added lynxDatasetAttribute constant.
.changeset/funny-otters-yawn.md	Updated changeset with corresponding version bumps and summary.

Comments suppressed due to low confidence (1)

packages/web-platform/web-mainthread-apis/src/utils/createCrossThreadEvent.ts:92

Direct conversion with Number() might result in NaN if the attribute is missing or malformed. Consider providing a fallback or validating the attribute's presence before conversion.

uniqueId: Number(currentTargetElement.getAttribute?.(lynxUniqueIdAttribute)),

...orm/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts

@deprecated

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>

PupilTong requested a review from Copilot June 3, 2025 07:47

PupilTong self-assigned this Jun 3, 2025

PupilTong added this to Lynx for Web Jun 3, 2025

PupilTong added the platform:Web label Jun 3, 2025

Copilot AI reviewed Jun 3, 2025

View reviewed changes

PupilTong requested a review from Copilot June 3, 2025 08:21

Copilot AI reviewed Jun 3, 2025

View reviewed changes

PupilTong requested a review from Copilot June 3, 2025 08:27

Copilot AI reviewed Jun 3, 2025

View reviewed changes

...orm/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts Show resolved Hide resolved

accept copilot

8bfd370

PupilTong force-pushed the p/hw/dataset branch from 3b6d8a6 to 8bfd370 Compare June 3, 2025 08:47

PupilTong requested a review from Sherry-hue June 3, 2025 09:09

PupilTong enabled auto-merge June 3, 2025 09:16

Sherry-hue approved these changes Jun 3, 2025

View reviewed changes

PupilTong added this pull request to the merge queue Jun 3, 2025

Merged via the queue into lynx-family:main with commit 0525fbf Jun 3, 2025
38 of 39 checks passed

PupilTong deleted the p/hw/dataset branch June 3, 2025 09:31

github-project-automation bot moved this to Done in Lynx for Web Jun 3, 2025

github-actions bot mentioned this pull request Jun 3, 2025

chore: Release 2025-06-06 12:15:14 #979

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: save dataset on an attribute #981

refactor: save dataset on an attribute #981

Uh oh!

PupilTong commented Jun 3, 2025

Uh oh!

changeset-bot bot commented Jun 3, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codspeed-hq bot commented Jun 3, 2025 •

edited

Loading

Uh oh!

relativeci bot commented Jun 3, 2025 •

edited

Loading

Uh oh!

relativeci bot commented Jun 3, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

refactor: save dataset on an attribute #981

refactor: save dataset on an attribute #981

Uh oh!

Conversation

PupilTong commented Jun 3, 2025

Uh oh!

changeset-bot bot commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codspeed-hq bot commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #981 will degrade performances by 14.41%

Summary

Benchmarks breakdown

Uh oh!

relativeci bot commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example

#1121 Bundle Size — 231.7KiB (0%).

Uh oh!

relativeci bot commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Web Explorer

#1109 Bundle Size — 254.36KiB (+0.07%).

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot bot commented Jun 3, 2025 •

edited

Loading

codspeed-hq bot commented Jun 3, 2025 •

edited

Loading

relativeci bot commented Jun 3, 2025 •

edited

Loading

relativeci bot commented Jun 3, 2025 •

edited

Loading