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.

Sign up for GitHub

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

Improve head tag parsing on template fragments #2024

Merged
merged 1 commit into from
Dec 20, 2023
Merged

Improve head tag parsing on template fragments #2024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 45 additions & 29 deletions src/htmx.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,10 +127,24 @@ return (function () {
return "[hx-" + verb + "], [data-hx-" + verb + "]"
}).join(", ");

var HEAD_TAG_REGEX = newTagRegex('head'),
TITLE_TAG_REGEX = newTagRegex('title'),
SVG_TAGS_REGEX = newTagRegex('svg', true);

//====================================================================
// Utilities
//====================================================================

/**
* @param {string} tag
* @param {boolean} global
* @returns {RegExp}
*/
function newTagRegex(tag, global = false) {
return new RegExp(`<${tag}(\\s[^>]*>|>)([\\s\\S]*?)<\\/${tag}>`,
global ? 'gim' : 'im');
}

function parseInterval(str) {
if (str == undefined) {
return undefined
Expand Down Expand Up @@ -281,38 +295,41 @@ return (function () {

/**
*
* @param {string} resp
* @param {string} response
* @returns {Element}
*/
function makeFragment(resp) {
var partialResponse = !aFullPageResponse(resp);
function makeFragment(response) {
var partialResponse = !aFullPageResponse(response);
var startTag = getStartTag(response);
var content = response;
if (startTag === 'head') {
content = content.replace(HEAD_TAG_REGEX, '');
}
if (htmx.config.useTemplateFragments && partialResponse) {
var documentFragment = parseHTML("<body><template>" + resp + "</template></body>", 0);
var documentFragment = parseHTML("<body><template>" + content + "</template></body>", 0);
// @ts-ignore type mismatch between DocumentFragment and Element.
// TODO: Are these close enough for htmx to use interchangeably?
return documentFragment.querySelector('template').content;
} else {
var startTag = getStartTag(resp);
switch (startTag) {
case "thead":
case "tbody":
case "tfoot":
case "colgroup":
case "caption":
return parseHTML("<table>" + resp + "</table>", 1);
case "col":
return parseHTML("<table><colgroup>" + resp + "</colgroup></table>", 2);
case "tr":
return parseHTML("<table><tbody>" + resp + "</tbody></table>", 2);
case "td":
case "th":
return parseHTML("<table><tbody><tr>" + resp + "</tr></tbody></table>", 3);
case "script":
case "style":
return parseHTML("<div>" + resp + "</div>", 1);
default:
return parseHTML(resp, 0);
}
}
switch (startTag) {
case "thead":
case "tbody":
case "tfoot":
case "colgroup":
case "caption":
return parseHTML("<table>" + content + "</table>", 1);
case "col":
return parseHTML("<table><colgroup>" + content + "</colgroup></table>", 2);
case "tr":
return parseHTML("<table><tbody>" + content + "</tbody></table>", 2);
case "td":
case "th":
return parseHTML("<table><tbody><tr>" + content + "</tr></tbody></table>", 3);
case "script":
case "style":
return parseHTML("<div>" + content + "</div>", 1);
default:
return parseHTML(content, 0);
}
}

Expand Down Expand Up @@ -1099,9 +1116,8 @@ return (function () {

function findTitle(content) {
if (content.indexOf('<title') > -1) {
var contentWithSvgsRemoved = content.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim, '');
var result = contentWithSvgsRemoved.match(/<title(\s[^>]*>|>)([\s\S]*?)<\/title>/im);

var contentWithSvgsRemoved = content.replace(SVG_TAGS_REGEX, '');
var result = contentWithSvgsRemoved.match(TITLE_TAG_REGEX);
if (result) {
return result[2];
}
Expand Down
8 changes: 8 additions & 0 deletions test/manual/hxboost_partial_template_parsing/index-partial.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<head>
<title>Index content</title>
</head>
<h1># Index</h1>
<ul>
<li><code>&lt;title&gt;</code> <b>should not</b> spawn inside <code>&lt;main&gt;</code></li>
<li><code>&lt;title&gt;</code> <b>should be</b> <em>index content</em></li>
</ul>
41 changes: 41 additions & 0 deletions test/manual/hxboost_partial_template_parsing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" hx-preserve="true">
<meta name="htmx-config" content='{"useTemplateFragments": true}' hx-preserve="true">

<title>Index content</title>

<style hx-preserve="true">
* {
font-family: Arial, sans-serif;
font-size: 24px;
}
code {
font-family: monospace;
font-size: 20px;
}
hr { border: 1px solid black; }
</style>

<script src="../../../src/htmx.js" hx-preserve="true"></script>
<script src="../../../src/ext/head-support.js" hx-preserve="true"></script>
</head>
<body hx-ext="head-support" hx-boost="true">
<header hx-push-url="false" hx-target="main" hx-swap="innerHTML">
<nav>
<ul>
<li><a href="./index-partial.html">Index</a></li>
<li><a href="./other-content.html">See other content</a></li>
</ul>
</nav><hr>
</header>
<main>
<h1># Index</h1>
<ul>
<li><code>&lt;title&gt;</code> <b>should not</b> spawn inside <code>&lt;main&gt;</code></li>
<li><code>&lt;title&gt;</code> <b>should be</b> <em>index content</em></li>
</ul>
</main>
</body>
</html>
16 changes: 16 additions & 0 deletions test/manual/hxboost_partial_template_parsing/other-content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<head>
<title>Other content</title>
<style>
body {
background: lightgreen;
}
</style>
</head>
<h1># Swapped content</h1>
<ul>
<li><code>&lt;title&gt;</code> and &lt;style&gt;
<b>should not</b> spawn inside <code>&lt;main&gt;</code></li>
<li><code>&lt;title&gt;</code> <b>should be</b> <em>other content</em></li>
<li>Background <b>should be</b> green</li>
</ul>

1 change: 1 addition & 0 deletions test/manual/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ <h2>Functionality</h2>
<ul>
<li><a href="hxboost_relative_resources">Relative Resources</a></li>
<li><a href="hxboost_template_parsing">Template Parsing</a></li>
<li><a href="hxboost_partial_template_parsing">Partial Template Parsing</a></li>
</ul>
</li>
</ul>
Expand Down