bigskysoftware / bigskysoftware/htmx

Change couple direct usages of querySelectorAll() to findAll()

Open
#2,335 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
49.4k
Forks
1.7k
Avg merge
3d 22h
Merged PRs (30d)
30

Description

What is the htmx internal policy on direct usage of querySelectorAll() versus using it through the internal findAll() function. I created an issue and proposal for supporting XPath selectors (https://github.com/devseppala/htmxpath), but as it has not received that much interest so far, so I thought if I could split one generic improvements of it into a separate issue.

So in this issue I would simply propose that oobSwap() and maybeSelectFromResponse() functions would be changed to use findAll() instead of directly calling querySelectorAll() . After all, what is the point of find() and findAll() functions if they are not systematically utilized.

```patch
@@ -801,25 +801,25 @@
function oobSwap(oobValue, oobElement, settleInfo) {
var selector = "#" + getRawAttribute(oobElement, "id");
var swapStyle = "outerHTML";
if (oobValue === "true") {
// do nothing
} else if (oobValue.indexOf(":") > 0) {
swapStyle = oobValue.substr(0, oobValue.indexOf(":"));
selector = oobValue.substr(oobValue.indexOf(":") + 1, oobValue.length);
} else {
swapStyle = oobValue;
}

- var targets = getDocument().querySelectorAll(selector);
+ var targets = findAll(selector);
if (targets) {
forEach(
targets,
function (target) {
var fragment;
var oobElementClone = oobElement.cloneNode(true);
fragment = getDocument().createDocumentFragment();
fragment.appendChild(oobElementClone);
if (!isInlineSwap(swapStyle, target)) {
fragment = oobElementClone; // if this is not an inline swap, we use the content of the node, not the node itself
}

@@ -1052,11 +1052,11 @@

function maybeSelectFromResponse(elt, fragment, selectOverride) {
var selector = selectOverride || getClosestAttributeValue(elt, "hx-select");
if (selector) {
var newFragment = getDocument().createDocumentFragment();
- forEach(fragment.querySelectorAll(selector), function (node) {
+ forEach(findAll(fragment, selector), function (node) {
newFragment.appendChild(node);
});
fragment = newFragment;
}
return fragment;

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.