bug#69132: [ELPA] Remove jQuery from elpa.gnu.org

[Philip Kaludercic]

Daniel Mendler <mail@daniel-mendler.de> writes:

> Philip Kaludercic <philipk@posteo.net> writes:
>
> Hello Philip!
>
>>> I was recently surprised to see that elpa.gnu.org uses a jQuery library,
>>> where it really isn't necessary.  Re-implementing the same functionality
>>> can be done in a few more lines of plain Javascript, without the need
>>> for any minified code.  Tested with relatively recent versions of
>>> Firefox and Chromium, so perhaps it would be nice if someone with an
>>> older browser could check if I didn't make any bold assumptions. 
>>
>> I have pushed updated versions of these patches to elpa.git, does the
>> same have to be done for nongnu.git?
>
> I just tried the updated website on elpa.gnu.org and I observed the
> following issues:
>
> - The filtering feels less responsive. I don't know where the problem
>   lies, maybe Jquery uses some kind of debouncing, a more efficient
>   matching or a more efficient way to manipulate the DOM?

According to the profiler, most of the CPU time went to reflowing CSS.
It appears that if I move around the classList manipulation calls, then
the performance improves.

> - When deleting the input string after filtering, such that the input
>   field becomes empty again, all packages are highlighted.

Apparently the issue here is that while an empty string is false-y in
Javascript

  "" ? true : false => false

an empty regular expression is true-thy

  new RegExp("") ? true : false => false

I updated my patch before pushing it to use RegExp for performance
reasons.  Due to the above, my "empty-input" check breaks, and the table
fields are all highlighted, since the empty regular expression matches
every string.  That can be easily fixed.

A different issue I noticed is that if I input a malformed regular
expression, say "+", the site freezes due to an exception.  I cannot
find any simple analogue for `regexp-quote', but there is a .includes()
method on strings that could be used instead (appears to be well
supported).

> - The jslicense.html website has not been updated yet. Maybe this
>   website is also not necessary given that no third-party packages are
>   used?

The file has been changed[0], perhaps it also has to be manually updated.

[0] 
https://git.savannah.gnu.org/cgit/emacs/elpa.git/diff/html/jslicense.html?id=4c73cd608e8da3e614aabc083e2a6078c1e631bb

> Daniel

In effect, I propose these changes:

diff --git a/html/javascript/package-search.js 
b/html/javascript/package-search.js
index e603853eda..c690632938 100644
--- a/html/javascript/package-search.js
+++ b/html/javascript/package-search.js
@@ -21,27 +21,38 @@ window.addEventListener("load", function (event) {
        search.setAttribute("placeholder", "Search packages...");
        search.setAttribute("type", "search");
        search.addEventListener("input", function(event) {
-               const query = new RegExp(event.target.value, "i");
+               let query = event.target.value;
+               
+               if (!query) { // empty input
+                       for (let i = 1; i < table.rows.length; i++) {
+                               const row = table.rows.item(i);
+                               const name = row.childNodes.item(0);
+                               const desc = row.childNodes.item(2);
+                               name.classList.remove("alt");
+                               desc.classList.remove("alt");
+                               row.classList.remove("invisible");
+                       }
+                       return;
+               }
 
+               query = query.toLowerCase();
                for (let i = 1; i < table.rows.length; i++) {
                        const row = table.rows.item(i);
-                       row.classList.remove("invisible");
 
                        const name = row.childNodes.item(0);
-                       const name_matches = name.innerText.match(query);
+                       const name_matches = 
name.innerText.toLowerCase().includes(query);
                        name.classList.remove("alt");
 
                        const desc = row.childNodes.item(2);
-                       const desc_matches = desc.innerText.match(query);
+                       const desc_matches = 
desc.innerText.toLowerCase().includes(query);
                        desc.classList.remove("alt");
 
-                       if (query) { // avoid matching the empty string
-                               if (name_matches || desc_matches) {
-                                       if (name_matches) { 
name.classList.add("alt"); }
-                                       if (desc_matches) { 
desc.classList.add("alt"); }
-                               } else {
-                                       row.classList.add("invisible");
-                               }
+                       if (name_matches || desc_matches) {
+                               row.classList.remove("invisible");
+                               if (name_matches) { name.classList.add("alt"); }
+                               if (desc_matches) { desc.classList.add("alt"); }
+                       } else {
+                               row.classList.add("invisible");
                        }
                }
        });

-- 
Philip Kaludercic