itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update tests

Browse Source 
- hx-target test now works correctly
- fixed problem targeting correct nodes
This commit is contained in:
Ben Pate 2021-11-15 12:01:30 -07:00
parent 4a384739c6
commit b5c3b4723d
8 changed files with 69 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/ext/sse.js
View File

@ -83,7 +83,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
var internalData = api.getInternalData(parent);
// get URL from element's attribute
var sseURL = api.getAttributeValue(parent, "sse-url");
var sseURL = api.getAttributeValue(parent, "sse-connect");
if (sseURL == undefined) {
return;
@ -126,7 +126,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
source.removeEventListener(sseEventName, listener);
return;
}
// swap the response into the DOM and trigger a notification
swap(child, event.data);
api.triggerEvent(parent, "htmx:sseMessage", event);
@ -222,8 +222,45 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions
var target = api.getTarget(elt);
var settleInfo = api.makeSettleInfo(elt);
api.selectAndSwap(swapSpec.swapStyle, elt, target, content, settleInfo);
api.settleImmediately(settleInfo.tasks);
api.selectAndSwap(swapSpec.swapStyle, target, elt, content, settleInfo);
settleInfo.elts.forEach(function (elt) {
if (elt.classList) {
elt.classList.add(htmx.config.settlingClass);
}
api.triggerEvent(elt, 'htmx:beforeSettle');
});
// Handle settle tasks (with delay if requested)
if (swapSpec.settleDelay > 0) {
setTimeout(doSettle(settleInfo), swapSpec.settleDelay);
} else {
doSettle(settleInfo)();
}
}
/**
* doSettle mirrors much of the functionality in htmx that
* settles elements after their content has been swapped.
* TODO: this should be published by htmx, and not duplicated here
* @param {import("../htmx").HtmxSettleInfo} settleInfo
* @returns () => void
*/
function doSettle(settleInfo) {
return function() {
settleInfo.tasks.forEach(function (task) {
task.call();
});
settleInfo.elts.forEach(function (elt) {
console.log(elt.classList);
if (elt.classList) {
elt.classList.remove(htmx.config.settlingClass);
}
triggerEvent(elt, 'htmx:afterSettle', responseInfo);
});
}
}
})();

4
test/servers/sse/static/index.html
View File

@ -35,7 +35,7 @@
<td>Make sure the SSE extension is initialized on every page or page fragment where you use SSE streams.</td>
</tr>
<tr>
<td class="bold nowrap">sse-url</td>
<td class="bold nowrap">sse-connect</td>
<td>Connects to a SSE event stream</td>
</tr>
<tr>
@ -48,7 +48,7 @@
<pre class="code">
&lt;body hx-ext="sse"&gt;
&lt;div sse-url="https://my.sse.server.com" sse-swap="message"&gt;&lt;/div&gt;
&lt;div sse-connect="https://my.sse.server.com" sse-swap="message"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>
<h3>SSE Resources</h3>

4
test/servers/sse/static/sse-multichannel.html
View File

@ -6,11 +6,11 @@
</p>
<h3>Example HTML</h3>
<pre class="code">
&lt;div hx-ext="sse" sse-url="http://localhost/posts.html?types=Event1%2cEvent2%2cEvent3%2cEvent4"&gt;
&lt;div hx-ext="sse" sse-connect="http://localhost/posts.html?types=Event1%2cEvent2%2cEvent3%2cEvent4"&gt;
&lt;div sse-swap="Event1"&gt;Waiting for Posts in Event1 channel...&lt;/div&gt;
&lt;/div&gt;
</pre>
<div hx-ext="sse" sse-url="http://localhost/posts.html?types=Event1%2cEvent2%2cEvent3%2cEvent4">
<div hx-ext="sse" sse-connect="http://localhost/posts.html?types=Event1%2cEvent2%2cEvent3%2cEvent4">
<h3>Test Cases</h3>
<div class="container" sse-swap="Event1">Waiting for Posts in Event1 channel...</div>
<div class="container" sse-swap="Event2">Waiting for Posts in Event2 channel...</div>

14
test/servers/sse/static/sse-settle.html
View File

@ -6,16 +6,16 @@
</p>
<h3>Example HTML</h3>
<pre class="code">
&lt;div hx-ext="sse" sse-url="http://localhost/comments.html"&gt;
&lt;div hx-ext="sse" sse-connect="http://localhost/comments.html"&gt;
&lt;div sse-swap="message" hx-swap="settle:100ms"&gt;Waiting for Comments...&lt;/div&gt;
&lt;/div&gt;
</pre>
<h3>Test Cases</h3>
<div hx-ext="sse" sse-url="http://localhost/comments.html">
<div class="container" sse-swap="message" sse-settle="100ms" hx-swap="settle:100ms">Waiting for Comments...</div>
<div class="container" sse-swap="message" sse-settle="200ms" hx-swap="settle:200ms">Waiting for Comments...</div>
<div class="container" sse-swap="message" sse-settle="300ms" hx-swap="settle:300ms">Waiting for Comments...</div>
<div class="container" sse-swap="message" sse-settle="400ms" hx-swap="settle:400ms">Waiting for Comments...</div>
<div class="container" sse-swap="message" sse-settle="500ms" hx-swap="settle:500ms">Waiting for Comments...</div>
<div hx-ext="sse" sse-connect="http://localhost/comments.html">
<div class="container" sse-swap="message" hx-swap="innerHTML settle:50ms">Waiting for Comments...</div>
<div class="container" sse-swap="message" hx-swap="innerHTML settle:100ms">Waiting for Comments...</div>
<div class="container" sse-swap="message" hx-swap="innerHTML settle:150ms">Waiting for Comments...</div>
<div class="container" sse-swap="message" hx-swap="innerHTML settle:200ms">Waiting for Comments...</div>
<div class="container" sse-swap="message" hx-swap="innerHTML settle:250ms">Waiting for Comments...</div>
</div>
</div>

14
test/servers/sse/static/sse-simple.html
View File

@ -6,15 +6,15 @@
</p>
<h3>Example HTML</h3>
<pre class="code">
&lt;div hx-ext="sse" sse-url="http://localhost/posts.html" sse-swap="message"&gt;Waiting for Posts...&lt;/div&gt;
&lt;div hx-ext="sse" sse-connect="http://localhost/posts.html" sse-swap="message"&gt;Waiting for Posts...&lt;/div&gt;
</pre>
<h3>Test Cases</h3>
<div hx-ext="sse">
<div class="container" hx-ext="sse" sse-url="http://localhost/posts.html" sse-swap="message">Waiting for Posts...</div>
<div class="container" hx-ext="sse" sse-url="http://localhost/comments.html" sse-swap="message">Waiting for Comments...</div>
<div class="container" hx-ext="sse" sse-url="http://localhost/albums.html" sse-swap="message">Waiting for Albums...</div>
<div class="container" hx-ext="sse" sse-url="http://localhost/todos.html" sse-swap="message">Waiting for ToDos...</div>
<div class="container" hx-ext="sse" sse-url="http://localhost/users.html" sse-swap="message">Waiting for Users...</div>
<div>
<div class="container" hx-ext="sse" sse-connect="http://localhost/posts.html" sse-swap="message">Waiting for Posts...</div>
<div class="container" hx-ext="sse" sse-connect="http://localhost/comments.html" sse-swap="message">Waiting for Comments...</div>
<div class="container" hx-ext="sse" sse-connect="http://localhost/albums.html" sse-swap="message">Waiting for Albums...</div>
<div class="container" hx-ext="sse" sse-connect="http://localhost/todos.html" sse-swap="message">Waiting for ToDos...</div>
<div class="container" hx-ext="sse" sse-connect="http://localhost/users.html" sse-swap="message">Waiting for Users...</div>
</div>

12
test/servers/sse/static/sse-target.html
View File

@ -13,12 +13,12 @@
<h3>Test Cases</h3>
<h3>Multiple Listeners using HX-Target to write to a single target node.</h3>
<div hx-ext="sse">
<div sse-connect="/posts/sse.html" hx-target="#otherNode"></div>
<div sse-connect="/comments/sse.html" hx-target="#otherNode"></div>
<div sse-connect="/albums/sse.html" hx-target="#otherNode"></div>
<div sse-connect="/todos/sse.html" hx-target="#otherNode"></div>
<div sse-connect="/users/sse.html" hx-target="#otherNode"></div>
<div>
<div hx-ext="sse" sse-connect="/posts.html" sse-swap="message" hx-target="#otherNode"></div>
<div hx-ext="sse" sse-connect="/comments.html" sse-swap="message" hx-target="#otherNode"></div>
<div hx-ext="sse" sse-connect="/albums.html" sse-swap="message" hx-target="#otherNode"></div>
<div hx-ext="sse" sse-connect="/todos.html" sse-swap="message" hx-target="#otherNode"></div>
<div hx-ext="sse" sse-connect="/users.html" sse-swap="message" hx-target="#otherNode"></div>
</div>
<div class="container" id="otherNode">Waiting for records from any of: Posts/Comments/Albums/ToDos/Users</div>

4
test/servers/sse/static/sse-triggers.html
View File

@ -7,12 +7,12 @@
</p>
<h3>Example HTML</h3>
<pre class="code">
&lt;div hx-ext="sse" sse-url="http://localhost/posts.html?types=Event1%2cEvent2%2cEvent3%2cEvent4"&gt;
&lt;div hx-ext="sse" sse-connect="http://localhost/posts.html?types=Event1%2cEvent2%2cEvent3%2cEvent4"&gt;
&lt;div hx-get="http://localhost/page/random" hx-trigger="sse:Event1"&gt;Waiting for Posts...&lt;/div&gt;
&lt;/div&gt;
</pre>
<div hx-ext="sse" sse-url="http://localhost/posts.html?types=Event1%2cEvent2%2cEvent3%2cEvent4">
<div hx-ext="sse" sse-connect="http://localhost/posts.html?types=Event1%2cEvent2%2cEvent3%2cEvent4">
<h3>Test Cases</h3>
<div class="container" hx-get="http://localhost/page/random" hx-trigger="sse:Event1">Waiting for Posts in Event1 channel...</div>
<div class="container" hx-get="http://localhost/page/random" hx-trigger="sse:Event2">Waiting for Posts in Event2 channel...</div>

2
test/servers/sse/static/stylesheet.css
View File

@ -53,6 +53,8 @@ body {
border: solid 1px gray;
margin-bottom: 20px;
background-color:#f7f7f7;
height:130px;
overflow:hidden;
}
.container.htmx-settling {