stimulusreflex
Fix `StimulusReflex::Fragment` class in combination with page morphs
Type of PR
Bug Fix and Enhancement
Description
Extract fragment logic into StimulusReflex::HTML::Part and introduce StimulusReflex::HTML::Document (for page morphs) and StimulusReflex::HTML::Fragment (for selector morphs)
Why should this be added
#594 refactored and simplified some of the logic into a new StimulusReflex::Fragment class. This new class was then also being used for page morphs. Nokogiri fragments produce weird HTML if you pass them a whole HTML document. Since both page and selector morphs were now being passed through Nokogiri fragments this broke the behaviour for page morphs.
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>StimulusReflex Test</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="token" />
<link rel="stylesheet" href="/assets/application.css" data-turbo-track="reload" />
<script src="/assets/application.js" data-turbo-track="reload" defer="defer"></script>
</head>
<body id="body">
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
</body>
</html>
Output:
<body>
<title>StimulusReflex Test</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="token">
<link rel="stylesheet" href="/assets/application.css" data-turbo-track="reload">
<script src="/assets/application.js" data-turbo-track="reload" defer></script>
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>"
</body>
Interestingly enough, morphdom was still able to process this generated HTML without any noticeable issues. Though, this inconsistency should be fixed.
For example, the Alpine.morph() function wasn't able to process the generated HTML. I discovered this inconsistency while working on the CableReady alpine_morph package.
Checklist
- [x] My code follows the style guidelines of this project
- [x] Checks (StandardRB & Prettier-Standard) are passing
- [x] This is not a documentation update
