feat: add SSR support for fp-only tests and enhance template handling by PupilTong · Pull Request #838 · lynx-family/lynx-stack

PupilTong · 2025-05-19T05:37:04Z

introduce usage of @lynx-js/web-elements-template
revert innerHTML getter and use a private function to generate html string

* removed some top level await

* introduce usage of `@lynx-js/web-elements-template` * revert innerHTML getter and use a private function to generate html string

This reverts commit 1152a81.

changeset-bot · 2025-05-19T05:37:08Z

🦋 Changeset detected

Latest commit: 9c7cf2e

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

This PR includes changesets to release 7 packages

Name	Type
@lynx-js/web-core-server	Patch
@lynx-js/offscreen-document	Patch
@lynx-js/web-constants	Patch
@lynx-js/web-core	Patch
@lynx-js/web-worker-runtime	Patch
@lynx-js/web-mainthread-apis	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 adds server-side rendering (SSR) support for fp-only tests and enhances the template handling process by integrating @lynx-js/web-elements-template and revising HTML generation functions.

Consolidates test setup by replacing individual test cases with loops that use the new SSR functions.
Updates configuration files to support SSR and fp-only testing scenarios.
Revises underlying rendering logic in createLynxView and OffscreenDocument to accommodate shadow DOM templates.

Reviewed Changes

Copilot reviewed 18 out of 19 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	Refactored test definitions using genTemplate in a loop
packages/web-platform/web-tests/tests/server.bench.vitest.spec.ts	Updated benchmark tests to use SSR via loadTemplate and SSR functions
packages/web-platform/web-tests/tests/react/commonConfig.ts	Updated config to pull SSR settings from process.env
packages/web-platform/web-tests/tests/fp-only.spec.ts	Added fp-only SSR test suite
packages/web-platform/web-tests/server.js	Introduced SSR, loadTemplate, and genHtml functions
packages/web-platform/web-tests/rspack.config.js	Added fp-only entry and middleware for SSR output
packages/web-platform/web-tests/playwright.config.ts	Adjusted Playwright test matching based on fp-only and SSR
packages/web-platform/web-core-server/src/createLynxView.ts	Extended createLynxView to support new SSR properties and template injection
packages/web-platform/web-mainthread-apis/src/elementAPI/style/styleFunctions.ts	Changed inline style application to use style.setProperty with !important handling
packages/web-platform/offscreen-document/src/webworker/OffscreenDocument.ts	Refactored innerHTML generation to support shadow DOM templates
packages/web-platform/offscreen-document/src/webworker/OffscreenCSSStyleDeclaration.ts	Enhanced style management with a new styleMapSymbol

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

packages/web-platform/web-core-server/src/createLynxView.ts:76

[nitpick] The property name 'overrideElemenTemplates' appears to be a misspelling. It might be clearer to use 'overrideElementTemplates' to enhance readability and consistency.

const { overrideElemenTemplates = {} ... } = config;

packages/web-platform/web-tests/rspack.config.js

packages/web-platform/web-mainthread-apis/src/elementAPI/style/styleFunctions.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: PupilTong <12288479+PupilTong@users.noreply.github.com>

…/styleFunctions.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: PupilTong <12288479+PupilTong@users.noreply.github.com>

codecov · 2025-05-19T07:44:56Z

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 · 2025-05-19T07:50:09Z

CodSpeed Performance Report

Merging #838 will degrade performances by 22.68%

_{Comparing PupilTong:p/hw/enable-ssr-for-web-template (9c7cf2e) with main (fe5983d)}

Summary

❌ 3 regressions
✅ 3 untouched benchmarks

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

Benchmarks breakdown

	Benchmark	`BASE`	`HEAD`	Change
❌	`basic-performance-div-100`	11.8 ms	14 ms	-15.75%
❌	`basic-performance-div-1000`	110.2 ms	142.6 ms	-22.68%
❌	`basic-performance-div-10000`	1.3 s	1.6 s	-19.9%

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/react@0.109.0 ### Minor Changes - Support MTS functions running on the first screen. ([#840](#840)) ### Patch Changes - Fix type error when using `Suspense` with `"jsx": "react-jsx"`. ([#854](#854)) - Support lazy bundle in ReactLynx testing library. ([#869](#869)) - Fix a bug in HMR that snapshots are always updated because the same unique ID check is not performed correctly. ([#869](#869)) - Fix missing types of `key` on components when using `"jsx": "react-jsx"`. ([#872](#872)) ## @lynx-js/react-rsbuild-plugin@0.10.0 ### Minor Changes - **BREAKING CHANGE**: Remove the unused `jsx` option. ([#903](#903)) ### Patch Changes - Support `output.inlineScripts`, which controls whether to inline scripts into Lynx bundle (`.lynx.bundle`). ([#874](#874)) Only background thread scripts can remain non-inlined, whereas the main thread script is always inlined. example: ```js import { defineConfig } from "@lynx-js/rspeedy"; export default defineConfig({ output: { inlineScripts: false, }, }); ``` - Support `@lynx-js/react` v0.109.0. ([#840](#840)) - Use `WebEncodePlugin` instead of `WebWebpackPlugin`. ([#904](#904)) - Updated dependencies \[[`7beb35e`](7beb35e), [`b6e27da`](b6e27da), [`5ddec12`](5ddec12), [`77524bc`](77524bc), [`fdab5dc`](fdab5dc), [`ff63b58`](ff63b58), [`fdab5dc`](fdab5dc), [`2b83934`](2b83934), [`3520031`](3520031)]: - @lynx-js/template-webpack-plugin@0.7.0 - @lynx-js/css-extract-webpack-plugin@0.5.4 - @lynx-js/react-refresh-webpack-plugin@0.3.3 - @lynx-js/react-webpack-plugin@0.6.14 - @lynx-js/react-alias-rsbuild-plugin@0.10.0 ## @lynx-js/template-webpack-plugin@0.7.0 ### Minor Changes - Rename `lepus` to `mainThreadAssets` in `beforeEmit` hook. ([#901](#901)) - Remove the unused `encodeBinary` option of `LynxEncodePlugin`. ([#880](#880)) ### Patch Changes - Support `output.inlineScripts`, which controls whether to inline scripts into Lynx bundle (`.lynx.bundle`). ([#874](#874)) Only background thread scripts can remain non-inlined, whereas the main thread script is always inlined. example: ```js import { defineConfig } from "@lynx-js/rspeedy"; export default defineConfig({ output: { inlineScripts: false, }, }); ``` - refactor: code clean ([#897](#897)) rename many internal apis to make logic be clear: multi-thread: startMainWorker -> prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) all-on-ui: prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) - Add `WebEncodePlugin`. ([#904](#904)) This is previously known as `WebWebpackPlugin` from `@lynx-js/web-webpack-plugin`. - Fix a bug that the `lepus` arg of `beforeEmit` hook does not contains the `root` main chunk of the main thread. ([#898](#898)) ## @lynx-js/rspeedy@0.9.6 ### Patch Changes - Support `output.inlineScripts`, which controls whether to inline scripts into Lynx bundle (`.lynx.bundle`). ([#874](#874)) Only background thread scripts can remain non-inlined, whereas the main thread script is always inlined. example: ```js import { defineConfig } from "@lynx-js/rspeedy"; export default defineConfig({ output: { inlineScripts: false, }, }); ``` - Bump Rsbuild v1.3.21 with Rspack v1.3.11. ([#863](#863)) - Updated dependencies \[[`5b67bde`](5b67bde)]: - @lynx-js/chunk-loading-webpack-plugin@0.2.1 ## @lynx-js/offscreen-document@0.0.4 ### Patch Changes - fix: remove all children after the innerHTML setter is called ([#850](#850)) - refactor: code clean ([#897](#897)) rename many internal apis to make logic be clear: multi-thread: startMainWorker -> prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) all-on-ui: prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) - perf: improve dom operation performance ([#881](#881)) - code clean for offscreen-document, cut down inheritance levels - add `appendChild` method for OffscreenElement, improve performance for append one node - bypass some JS getter for dumping SSR string ## @lynx-js/web-constants@0.13.3 ### Patch Changes - refactor: code clean ([#897](#897)) rename many internal apis to make logic be clear: multi-thread: startMainWorker -> prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) all-on-ui: prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.13.3 ## @lynx-js/web-core@0.13.3 ### Patch Changes - refactor: code clean ([#897](#897)) rename many internal apis to make logic be clear: multi-thread: startMainWorker -> prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) all-on-ui: prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) - perf: improve dom operation performance ([#881](#881)) - code clean for offscreen-document, cut down inheritance levels - add `appendChild` method for OffscreenElement, improve performance for append one node - bypass some JS getter for dumping SSR string - fix: worker not released when backgroundWorkerContextCount != 1 ([#845](#845)) - Updated dependencies \[[`bb1f9d8`](bb1f9d8), [`b6e27da`](b6e27da), [`3d716d7`](3d716d7)]: - @lynx-js/offscreen-document@0.0.4 - @lynx-js/web-mainthread-apis@0.13.3 - @lynx-js/web-worker-runtime@0.13.3 - @lynx-js/web-constants@0.13.3 - @lynx-js/web-worker-rpc@0.13.3 ## @lynx-js/web-core-server@0.13.3 ### Patch Changes - refactor: code clean ([#897](#897)) rename many internal apis to make logic be clear: multi-thread: startMainWorker -> prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) all-on-ui: prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) - feat: support to dump ssrEncode string ([#876](#876)) - perf: improve dom operation performance ([#881](#881)) - code clean for offscreen-document, cut down inheritance levels - add `appendChild` method for OffscreenElement, improve performance for append one node - bypass some JS getter for dumping SSR string - feat: dump dehydrate string with shadow root template ([#838](#838)) ## @lynx-js/web-elements@0.7.3 ### Patch Changes - refactor: allow elements to be rendered before :defined ([#855](#855)) Before this commit, we don't allow developers to render these elements before they're defined. In this commit, we will remove these restrictions. - fix: remove the style `contain: content` of x-foldview-ng, otherwise it will cause the `position: fixed` elements to be positioned incorrectly after scrolling. ([#878](#878)) - fix: x-list should observe property list-type change. ([#862](#862)) Before this commit, list-type only works when it was first assigned. use `requestAnimationFrame` instead of `queueMicrotask` to layoutListItem, this is because it may cause crashes in webkit. - fix: list-item should support linear layout. ([#859](#859)) - Updated dependencies \[]: - @lynx-js/web-elements-template@0.7.3 ## @lynx-js/web-explorer@0.0.9 ### Patch Changes - chore: update dependencies: ([#868](#868)) - @lynx-js/web-elements@0.7.2 - @lynx-js/web-core@0.13.2 ## @lynx-js/web-mainthread-apis@0.13.3 ### Patch Changes - refactor: code clean ([#897](#897)) rename many internal apis to make logic be clear: multi-thread: startMainWorker -> prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) all-on-ui: prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) - perf: improve dom operation performance ([#881](#881)) - code clean for offscreen-document, cut down inheritance levels - add `appendChild` method for OffscreenElement, improve performance for append one node - bypass some JS getter for dumping SSR string - Updated dependencies \[[`b6e27da`](b6e27da)]: - @lynx-js/web-constants@0.13.3 ## @lynx-js/web-worker-runtime@0.13.3 ### Patch Changes - refactor: code clean ([#897](#897)) rename many internal apis to make logic be clear: multi-thread: startMainWorker -> prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) all-on-ui: prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime) - Updated dependencies \[[`bb1f9d8`](bb1f9d8), [`b6e27da`](b6e27da), [`3d716d7`](3d716d7)]: - @lynx-js/offscreen-document@0.0.4 - @lynx-js/web-mainthread-apis@0.13.3 - @lynx-js/web-constants@0.13.3 - @lynx-js/web-worker-rpc@0.13.3 ## @lynx-js/chunk-loading-webpack-plugin@0.2.1 ### Patch Changes - Add `StartupChunkDependenciesRuntimeModule` to fix `RuntimeGlobals.ensureChunkHandler` not found when using chunk splitting ([#798](#798)) ## @lynx-js/css-extract-webpack-plugin@0.5.4 ### Patch Changes - Support `@lynx-js/template-webpack-plugin` v0.7.0. ([#880](#880)) - Support Rspack v1.3.11. ([#866](#866)) ## @lynx-js/react-refresh-webpack-plugin@0.3.3 ### Patch Changes - Support `@lynx-js/template-webpack-plugin` v0.7.0. ([#880](#880)) ## @lynx-js/react-webpack-plugin@0.6.14 ### Patch Changes - Support `@lynx-js/template-webpack-plugin` v0.7.0. ([#880](#880)) - Support `@lynx-js/react` v0.109.0. ([#840](#840)) ## create-rspeedy@0.9.6 ## @lynx-js/react-alias-rsbuild-plugin@0.10.0 ## upgrade-rspeedy@0.9.6 ## @lynx-js/web-elements-template@0.7.3 ## @lynx-js/web-worker-rpc@0.13.3 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

PupilTong added 5 commits May 19, 2025 13:34

refactor: bundle web-core-server

5ec78e4

* removed some top level await

feat: add SSR support for fp-only tests and enhance template handling

eab39aa

* introduce usage of `@lynx-js/web-elements-template` * revert innerHTML getter and use a private function to generate html string

ignore fp-only on normal testing flow

09bb755

Revert "refactor: bundle web-core-server"

8c025dc

This reverts commit 1152a81.

add changeset

1bcc3fd

PupilTong requested review from Sherry-hue and Copilot May 19, 2025 05:37

Copilot AI reviewed May 19, 2025

View reviewed changes

packages/web-platform/web-tests/rspack.config.js Outdated Show resolved Hide resolved

packages/web-platform/web-mainthread-apis/src/elementAPI/style/styleFunctions.ts Outdated Show resolved Hide resolved

PupilTong and others added 2 commits May 19, 2025 13:44

Update packages/web-platform/web-tests/rspack.config.js

4d8ccee

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: PupilTong <12288479+PupilTong@users.noreply.github.com>

Update packages/web-platform/web-mainthread-apis/src/elementAPI/style…

6446b35

…/styleFunctions.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: PupilTong <12288479+PupilTong@users.noreply.github.com>

PupilTong self-assigned this May 19, 2025

PupilTong added the platform:Web label May 19, 2025

PupilTong added this to Lynx for Web May 19, 2025

PupilTong force-pushed the p/hw/enable-ssr-for-web-template branch from 3904a8c to ef1b6f2 Compare May 19, 2025 09:07

code style

f574152

PupilTong force-pushed the p/hw/enable-ssr-for-web-template branch from ef1b6f2 to f574152 Compare May 19, 2025 09:25

update test

9c7cf2e

PupilTong enabled auto-merge May 19, 2025 11:22

Sherry-hue approved these changes May 19, 2025

View reviewed changes

PupilTong added this pull request to the merge queue May 19, 2025

Merged via the queue into lynx-family:main with commit ced10b0 May 19, 2025
38 of 39 checks passed

PupilTong deleted the p/hw/enable-ssr-for-web-template branch May 19, 2025 12:29

github-project-automation bot moved this to Done in Lynx for Web May 19, 2025

github-actions bot mentioned this pull request May 19, 2025

chore: Release 2025-05-23 15:46:22 #844

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add SSR support for fp-only tests and enhance template handling#838

feat: add SSR support for fp-only tests and enhance template handling#838
PupilTong merged 9 commits intolynx-family:mainfrom
PupilTong:p/hw/enable-ssr-for-web-template

PupilTong commented May 19, 2025

Uh oh!

changeset-bot bot commented May 19, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

codecov bot commented May 19, 2025 •

edited

Loading

Uh oh!

codspeed-hq bot commented May 19, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

PupilTong commented May 19, 2025

Uh oh!

changeset-bot bot commented May 19, 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!

codecov bot commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

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

Uh oh!

CodSpeed Performance Report

Merging #838 will degrade performances by 22.68%

Summary

Benchmarks breakdown

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented May 19, 2025 •

edited

Loading

codecov bot commented May 19, 2025 •

edited

Loading

codspeed-hq bot commented May 19, 2025 •

edited

Loading