Skip to content

fix(content): prevent forceUpdate in SSR#27440

Merged
sean-perkins merged 3 commits intomainfrom
sp/content-fullscreen-ssr
May 9, 2023
Merged

fix(content): prevent forceUpdate in SSR#27440
sean-perkins merged 3 commits intomainfrom
sp/content-fullscreen-ssr

Conversation

@sean-perkins
Copy link
Copy Markdown
Contributor

@sean-perkins sean-perkins commented May 9, 2023

Issue number: Resolves #27411, stenciljs/core#2429, stenciljs/core#4076


What is the current behavior?

Rendering <ion-content fullscreen="true"> in an Angular Universal project will result in a javascript heap exception and the browser tab timing out.

forceUpdate is not a compatible API with pre-rendering and results in calling itself indefinitely.

What is the new behavior?

  • Updates the fullscreen implementation of ion-content to only call forceUpdate and related functionality when running in a browser environment.
  • <ion-content fullscreen="true"> is compatible with Angular Universal

Does this introduce a breaking change?

  • Yes
  • No

Other information

Dev-build: 7.0.6-dev.11683653232.1ddc5840

@bolt-new-by-stackblitz
Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions github-actions bot added the package: core @ionic/core package label May 9, 2023
@sean-perkins sean-perkins marked this pull request as ready for review May 9, 2023 20:30
@sean-perkins sean-perkins requested a review from a team as a code owner May 9, 2023 20:30
} else if (this.cTop !== 0 || this.cBottom !== 0) {
this.cTop = this.cBottom = 0;
forceUpdate(this);
if (Build.isBrowser) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

And so I understand, this is to work around a stencil bug correct?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This isn't a workaround per-say. The reported issues attached are resolved by this change.

I had some discussions with Tanner around if forceUpdate should internally account for this. It checks for build conditions to see if it updatable: https://github.com/ionic-team/stencil/blob/main/src/runtime/update-component.ts#L328-L342, but should likely also check if it is in a browser context. At this time, we don't have enough historic data to confidently determine if forceUpdate should only execute in the browser or not. He is leading that conversation with the team and we will re-sync on the outcomes (if we can remove this in a future update of Stencil).

The problem that was occurring is that the pre-rendering logic would attempt to mock ion-content DOM tree, but would call forceUpdate as part of the first render, resulting in an infinite loop.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks! Can we include this context in the comment too?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Also if there's an open stencil issue it would be good to link to that in the comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Added some extra context + created a spike in JIRA for Stencil to track (and referenced it in the code comments).

@sean-perkins sean-perkins requested a review from liamdebeasi May 9, 2023 21:03
Copy link
Copy Markdown
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

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

Good to go once comments are addressed. thanks for the quick turnaround!

@sean-perkins sean-perkins enabled auto-merge May 9, 2023 21:14
@sean-perkins sean-perkins added this pull request to the merge queue May 9, 2023
Merged via the queue into main with commit e930988 May 9, 2023
@sean-perkins sean-perkins deleted the sp/content-fullscreen-ssr branch May 9, 2023 21:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: ion-content fullscreen is not compatible with pre-rendering

2 participants