Skip to content
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

fix(runtime): create unique host ids #6018

Merged
merged 8 commits into from
Oct 8, 2024
Merged

Conversation

christian-bromann
Copy link
Member

What is the current behavior?

When hydrating components in e.g. Next.js we usually never hydrate the whole application at once and instead each individual component on its own. For example given the following example:

<cmp-a class="hydrated" s-id="1">
  <!--r.1-->
  <cmp-b class="hydrated" c-id="1.0.0.0" s-id="2">
    <!--r.2-->
    <header c-id="2.0.0.0"></header>
    <!--s.2.1.0.1.-->
  </cmp-b>
</cmp-a>

Our SSR logic for React and Next.js that is responsible for server side rendering the component would be first called on the <cmp-a /> element. As many components introspect their light dom for rendering, what we are trying to do is to resolve the light dom as part of the process. At this point we would get the correct assignment of host ids as seen above.

However, Next.js then goes through each individual component again to render it in a new context. It then replaces the result of that rendering with the previous generated code, ultimately responding the following to the server:

<cmp-a class="hydrated" s-id="1">
  <!--r.1-->
  <cmp-b class="hydrated" s-id="1">
    <!--r.1-->
    <header c-id="1.0.0.0"></header>
    <!--s.1.1.0.1.-->
  </cmp-b>
</cmp-a>

This particularly happens if you have components with ShadowRoots within the Light Dom of another component with ShadowRoot.

What is the new behavior?

For all hydration functions Stencil provides, e.g. hydrateDocument, renderToString, serializeDocumentToString and streamToString, we attach a unique docData object to the document that allows us to continue the host id count throughout multiple hydration calls.

Documentation

Does this introduce a breaking change?

  • Yes
  • No

Testing

n/a

Other information

n/a

@christian-bromann christian-bromann requested a review from a team as a code owner October 7, 2024 19:09
Copy link
Member

@tanner-reits tanner-reits left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Think this makes sense!

@christian-bromann christian-bromann added this pull request to the merge queue Oct 8, 2024
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 8, 2024
@christian-bromann christian-bromann added this pull request to the merge queue Oct 8, 2024
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 8, 2024
@christian-bromann christian-bromann added this pull request to the merge queue Oct 8, 2024
Merged via the queue into main with commit 1564b7a Oct 8, 2024
88 checks passed
@christian-bromann christian-bromann deleted the cb/unique-host-ids branch October 8, 2024 19:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants