Skip to content

refactor: split shadowroot templates into a package#811

Merged
PupilTong merged 4 commits intolynx-family:mainfrom
PupilTong:p/hw/ssr-web-elements-template
May 15, 2025
Merged

refactor: split shadowroot templates into a package#811
PupilTong merged 4 commits intolynx-family:mainfrom
PupilTong:p/hw/ssr-web-elements-template

Conversation

@PupilTong
Copy link
Copy Markdown
Collaborator

@PupilTong PupilTong commented May 15, 2025

We're going to implement Lynx Web Platform's SSR based on the shadowrootmode.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/shadowRootMode

(chrome 111, firefox 123, safari 16.4)

This means those modern browsers are able to show the correct layout before the web components are defined.

To make this work, we have to split the shadowroot template string into a new package @lynx-js/web-elements-template.

@PupilTong PupilTong requested review from Sherry-hue and Copilot May 15, 2025 04:48
@PupilTong PupilTong self-assigned this May 15, 2025
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 15, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: df19444

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

This PR includes changesets to release 3 packages
Name Type
@lynx-js/web-elements Patch
@lynx-js/web-elements-template Patch
@lynx-js/web-elements-reactive 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 AI reviewed May 15, 2025
View reviewed changes
Copy link
Copy Markdown
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 the shadowroot template usage by extracting inline HTML templates into a new package, @lynx-js/web-elements-template, to support SSR via modern browser features.

  • Replaces inline html templates in multiple web element components with imported template strings.
  • Updates package dependencies, tsconfig references, and related configuration files to incorporate the new package.
  • Adjusts the component.ts implementation to avoid re-attaching an already existing shadowRoot.

Reviewed Changes

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

Show a summary per file
File Description
packages/web-platform/web-elements/src/XOverlayNg/XOverlayNg.ts Replaced inline shadow DOM template with imported templateXOverlayNg.
packages/web-platform/web-elements/src/XList/XList.ts Replaced inline template with imported templateXList.
packages/web-platform/web-elements/src/XInput/XInput.ts Replaced inline template with imported templateXInput.
packages/web-platform/web-elements/src/XImage/XImage.ts Replaced inline template with imported templateXImage.
packages/web-platform/web-elements/src/XImage/FilterImage.ts Replaced inline template with imported templateFilterImage.
packages/web-platform/web-elements/src/XAudioTT/XAudioTT.ts Replaced inline template with imported templateXAudioTT.
packages/web-platform/web-elements/src/ScrollView/ScrollView.ts Replaced inline template with imported templateScrollView.
packages/web-platform/web-elements/package.json Added dependency on @lynx-js/web-elements-template.
packages/web-platform/web-elements-template/* New package files including TS config, template definitions, README, and license.
packages/web-platform/web-elements-reactive/src/component.ts Updated shadowRoot creation logic to attach template only if not already present.
packages/web-platform/tsconfig.json Added reference to the new web-elements-template package.
.changeset/* Updated changeset files to reflect the new refactor.

Comment thread packages/web-platform/web-elements-template/src/index.ts Outdated
github-advanced-security[bot]
github-advanced-security AI found potential problems May 15, 2025
View reviewed changes
Comment thread packages/web-platform/web-elements-template/src/index.ts Fixed
@codspeed-hq
Copy link
Copy Markdown

codspeed-hq Bot commented May 15, 2025 •
edited
Loading

CodSpeed Performance Report

Merging #811 will not alter performance

Comparing PupilTong:p/hw/ssr-web-elements-template (df19444) with main (d94f058)

Summary

✅ 6 untouched benchmarks

github-advanced-security[bot]
github-advanced-security AI found potential problems May 15, 2025
View reviewed changes
Comment thread packages/web-platform/web-elements-template/src/index.ts Fixed
github-advanced-security[bot]
github-advanced-security AI found potential problems May 15, 2025
View reviewed changes
Comment thread packages/web-platform/web-elements-template/src/index.ts Dismissed
PupilTong and others added 4 commits May 15, 2025 15:04
@PupilTong
refactor: split shadowroot templates into a package
d60ddb9 
We're going to implement Lynx Web Platform's SSR based on the `shadowrootmode`.

`https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/shadowRootMode`

(chrome 111, firefox 123, safari 16.4)

This means those modern browsers are able to show the correct layout before the web components are defined.

To make this work, we have to split the shadowroot template string into a new package `@lynx-js/web-elements-template`.
@PupilTong
Update packages/web-platform/web-elements-template/src/index.ts
3a58976 
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: PupilTong <12288479+PupilTong@users.noreply.github.com>
@PupilTong
add a simple xss attack check
f83a38f
@PupilTong
the blank charatar is removed
df19444
@PupilTong PupilTong force-pushed the p/hw/ssr-web-elements-template branch from 0cddfec to df19444 Compare May 15, 2025 07:04
@PupilTong PupilTong added this pull request to the merge queue May 15, 2025
Merged via the queue into lynx-family:main with commit ae9652a May 15, 2025
38 checks passed
@PupilTong PupilTong deleted the p/hw/ssr-web-elements-template branch May 15, 2025 08:39
@github-actions github-actions Bot mentioned this pull request May 15, 2025
Merged
colinaaa pushed a commit that referenced this pull request May 16, 2025
@github-actions
chore: Release 2025-05-16 13:54:27 (#761)
f63ddc2 
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/runtime-wrapper-webpack-plugin@0.1.0

### Minor Changes

- Add parameter forwarding for Browser Object Model (BOM) APIs.
([#787](#787))

This allows direct access to APIs like `fetch`, `requestAnimationFrame`.

## @lynx-js/react@0.108.1

### Patch Changes

- Bump swc_core v23.2.0.
([#827](#827))

## @lynx-js/rspeedy@0.9.5

### Patch Changes

- Support `source.preEntry`.
([#750](#750))

Add a script before the entry file of each page. This script will be
executed before the page code.
It can be used to execute global logics, such as injecting polyfills,
setting global styles, etc.

    example：

    ```js
    import { defineConfig } from "@lynx-js/rspeedy";
    export default defineConfig({
      source: {
        preEntry: "./src/polyfill.ts",
      },
    });
    ```

- Bump Rsbuild v1.3.20 with Rspack v1.3.10.
([#799](#799))

- Add `callerName` option to `createRspeedy`.
([#757](#757))

It can be accessed by Rsbuild plugins through
[`api.context.callerName`](https://rsbuild.dev/api/javascript-api/instance#contextcallername),
and execute different logic based on this identifier.

    ```js
    export const myPlugin = {
      name: "my-plugin",
      setup(api) {
        const { callerName } = api.context;

        if (callerName === "rslib") {
          // ...
        } else if (callerName === "rspeedy") {
          // ...
        }
      },
    };
    ```

- Support `performance.buildCache`.
([#766](#766))

- Updated dependencies
\[[`fbc4fbb`](fbc4fbb)]:
    -   @lynx-js/webpack-dev-transport@0.1.3

## @lynx-js/react-rsbuild-plugin@0.9.10

### Patch Changes

- Updated dependencies
\[[`e599635`](e599635),
[`c38c737`](c38c737),
[`d16522e`](d16522e)]:
    -   @lynx-js/template-webpack-plugin@0.6.11
    -   @lynx-js/web-webpack-plugin@0.6.7
    -   @lynx-js/runtime-wrapper-webpack-plugin@0.1.0
    -   @lynx-js/react-alias-rsbuild-plugin@0.9.10
    -   @lynx-js/react-refresh-webpack-plugin@0.3.2
    -   @lynx-js/react-webpack-plugin@0.6.13
    -   @lynx-js/css-extract-webpack-plugin@0.5.3

## @lynx-js/offscreen-document@0.0.3

### Patch Changes

- feat: support OffscreenDocument.innerHTML
([#772](#772))

## @lynx-js/web-constants@0.13.2

### Patch Changes

- fix: corrupt mainthread module cache
([#806](#806))

-   Updated dependencies \[]:
    -   @lynx-js/web-worker-rpc@0.13.2

## @lynx-js/web-core@0.13.2

### Patch Changes

- feat: allow lynx code to get JS engine provided properties on
globalThis ([#786](#786))

        globalThis.Reflect; // this will be the Reflect Object

    Note that `assigning to the globalThis` is still not allowed.

- perf: use v8 hint for generated javascript file
([#807](#807))

    <https://v8.dev/blog/explicit-compile-hints>

- feat: add new property `inject-style-rules` for LynxView
([#785](#785))

This property allows developer to inject some style rules into the
shadowroot.

It's a wrapper of
<https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/insertRule>

- fix: corrupt mainthread module cache
([#806](#806))

- Updated dependencies
\[[`03a5f64`](03a5f64),
[`6d3d852`](6d3d852),
[`8cdd288`](8cdd288),
[`6d3d852`](6d3d852)]:
    -   @lynx-js/web-mainthread-apis@0.13.2
    -   @lynx-js/web-worker-runtime@0.13.2
    -   @lynx-js/web-constants@0.13.2
    -   @lynx-js/offscreen-document@0.0.3
    -   @lynx-js/web-worker-rpc@0.13.2

## @lynx-js/web-core-server@0.13.2

### Patch Changes

- perf: use v8 hint for generated javascript file
([#807](#807))

    <https://v8.dev/blog/explicit-compile-hints>

- fix: corrupt mainthread module cache
([#806](#806))

- feat: improve template js loading
([#807](#807))

now we will create temp js file based on the new `templateName`
argument.

## @lynx-js/web-elements@0.7.2

### Patch Changes

- refactor: split shadowroot templates into a package
([#811](#811))

We're going to implement Lynx Web Platform's SSR based on the
`shadowrootmode`.


`https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/shadowRootMode`

    (chrome 111, firefox 123, safari 16.4)

This means those modern browsers are able to show the correct layout
before the web components are defined.

To make this work, we have to split the shadowroot template string into
a new package `@lynx-js/web-elements-template`.

    No features affected.

- Updated dependencies
\[[`ae9652a`](ae9652a),
[`ae9652a`](ae9652a)]:
    -   @lynx-js/web-elements-template@0.7.2
    -   @lynx-js/web-elements-reactive@0.2.2

## @lynx-js/web-elements-reactive@0.2.2

### Patch Changes

- feat: do not create shadowroot if there already have one
([#811](#811))

    the shadowroot may already be created by


<https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/shadowRootMode>

## @lynx-js/web-elements-template@0.7.2

### Patch Changes

- refactor: split shadowroot templates into a package
([#811](#811))

We're going to implement Lynx Web Platform's SSR based on the
`shadowrootmode`.


`https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/shadowRootMode`

    (chrome 111, firefox 123, safari 16.4)

This means those modern browsers are able to show the correct layout
before the web components are defined.

To make this work, we have to split the shadowroot template string into
a new package `@lynx-js/web-elements-template`.

    No features affected.

## @lynx-js/web-explorer@0.0.8

### Patch Changes

- chore: import qr-scanner from unpkg
([#815](#815))

## @lynx-js/web-mainthread-apis@0.13.2

### Patch Changes

- feat: allow lynx code to get JS engine provided properties on
globalThis ([#786](#786))

        globalThis.Reflect; // this will be the Reflect Object

    Note that `assigning to the globalThis` is still not allowed.

- fix: corrupt mainthread module cache
([#806](#806))

- Updated dependencies
\[[`8cdd288`](8cdd288)]:
    -   @lynx-js/web-constants@0.13.2

## @lynx-js/web-worker-runtime@0.13.2

### Patch Changes

- feat: allow lynx code to get JS engine provided properties on
globalThis ([#786](#786))

        globalThis.Reflect; // this will be the Reflect Object

    Note that `assigning to the globalThis` is still not allowed.

- feat: return the offscreenDocument instance for startMainThread()
([#772](#772))

- Updated dependencies
\[[`03a5f64`](03a5f64),
[`8cdd288`](8cdd288),
[`6d3d852`](6d3d852)]:
    -   @lynx-js/web-mainthread-apis@0.13.2
    -   @lynx-js/web-constants@0.13.2
    -   @lynx-js/offscreen-document@0.0.3
    -   @lynx-js/web-worker-rpc@0.13.2

## @lynx-js/template-webpack-plugin@0.6.11

### Patch Changes

- Be compatible with rspack-manifest-plugin.
([#812](#812))

Now only the `[name].lynx.bundle` and `[name].web.bundle` would exist in
`manifest.json`.

See
[#763](#763)
for details.

- Avoid CSS encode crash on Web platform.
([#814](#814))

## @lynx-js/web-webpack-plugin@0.6.7

### Patch Changes

- Be compatible with rspack-manifest-plugin.
([#812](#812))

Now only the `[name].lynx.bundle` and `[name].web.bundle` would exist in
`manifest.json`.

See
[#763](#763)
for details.

## @lynx-js/webpack-dev-transport@0.1.3

### Patch Changes

- Fix live-reload not working on Lynx 3.3
([#795](#795))

## create-rspeedy@0.9.5



## @lynx-js/react-alias-rsbuild-plugin@0.9.10



## upgrade-rspeedy@0.9.5



## @lynx-js/web-worker-rpc@0.13.2

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

Reviewers

Copilot code review Copilot Copilot left review comments

@Sherry-hue Sherry-hue Sherry-hue approved these changes

Assignees

@PupilTong PupilTong

Labels

platform:Web

Projects

Lynx for Web
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@PupilTong @Sherry-hue @github-advanced-security