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

Ensure FastBoot rendered content is cleared even if the server rendered application contains malformed HTML. #699

Merged
merged 2 commits into from Jun 3, 2019

Conversation

noslouch
Copy link
Contributor

@noslouch noslouch commented May 29, 2019

When rendering dynamic markup pulled from a database, we don't have a guarantee things will end up in the DOM where we want them to be.

Ember enforces good markup during the build, but there's no way to know if the following template will have valid markup:

// e.g. app/templates/article.hbs
<main id="content">
  {{{model.body}}}
</main>

The browser is a tolerant place, and it will do whatever it needs to do to create a valid DOM tree, even if that means swallowing up elements. A certain type of bad markup can wreak havoc on desired trees.

For example, let's say your fastboot returns the following HTML document to your browser:

<!-- snip... -->
<body>
  <script type="x/boundary" id="fastboot-body-start"></script>
  <div>
    <p>
      Great article content here.
    </p>
    <em>With additional reporting<em> <---- ¯\_(ツ)_</div>
  <script type="x/boundary" id="fastboot-body-end"></script>
</body>

When a browser parses that (at least when Chrome does), here's the DOM tree you wind up with:

<body>
  <script type="x/boundary" id="fastboot-body-start"></script>
  <div>
    <p>
      Great article content here.
    </p>
    <em>
      With additional reporting
      <em></em>
    </em>
  </div>
  <em>
    <em>
      <script type="x/boundary" id="fastboot-body-end"></script>
    </em>
  </em>
</body>

Yikes.

When the clear-double-boot initializer runs, it assumes that the start and end markers have the same parent, which is sometimes not the case, as seen above.

Does this proposed solution work for you all? I know it might open a can of worms as far as working around DOM quirks, but this seems like a particularly nasty case that we can fix to ensure that the app finishes booting.

@rwjblue
Copy link
Member

rwjblue commented Jun 3, 2019

Thank you @noslouch!

@rwjblue rwjblue merged commit 13f96e7 into ember-fastboot:master Jun 3, 2019
@rwjblue rwjblue changed the title Terrible, Awful, No Good, Very Bad Markup Crashes App Ensure FastBoot rendered content is cleared even if the server rendered application contains malformed HTML. Jun 3, 2019
@rwjblue rwjblue added the bug label Jun 3, 2019
@noslouch noslouch deleted the tolerate-bad-markup branch June 3, 2019 14:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants