Fetch will reject your GET if it contains a body (a deliberate maintainer decision), even though it's entirely permissible by HTTP and done by many real-world AJAX APIs. Real AJAX will do what it's supposed to. (The HTTP 1.1 2014 Spec says that including a request body in a GET "might cause some implementations to reject the request." Guess which one!)

Also, advanced features like progress are completely absent from Fetch as well.

However, there are some fantastic libraries like Axios[1], SuperAgent (requires npm), and, yes, jQuery[2], that have really excellent API's (far superior to Fetch), or you could just write your own (or use an LLM) short wrapper around modern AJAX and call it a day. h/t to Claude:

    const xhr = ['GET','POST','PUT','PATCH','DELETE'].reduce((x,m) => (x[m.toLowerCase()] = 
      (u,d,opt={}) => new Promise((r,j) => {
        const q = new XMLHttpRequest();
        q.open(m,u);
        q.responseType = opt.responseType || '';
        if(opt.headers) Object.entries(opt.headers).forEach(([k,v]) => q.setRequestHeader(k,v));
        if(opt.signal) opt.signal.addEventListener('abort', () => q.abort());
        q.withCredentials = opt.credentials === 'include';
        q.onload = () => r({
          ok: q.status >= 200 && q.status < 300,
          status: q.status,
          headers: new Headers(q.getAllResponseHeaders()),
          text: () => Promise.resolve(q.responseText),
          json: () => Promise.resolve(JSON.parse(q.responseText)),
          blob: () => Promise.resolve(new Blob([q.response])),
          response: q
        });
        q.onerror = () => j(new TypeError('Network request failed'));
        q.send(d instanceof FormData ? d : JSON.stringify(d));
      }), x), {});

Each method listed above returns a Promise that resolves with the XMLHttpRequest object or rejects with the error. So you get both the Promise functionality and full access to the XHR object in the resolution.

Usage:

    xhr.post('/api', { data: 123 }, {
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      signal: abortController.signal
    })
    .then(res => res.json())
    .then(data => console.log(data));

And, if you don't need AJAX but do want some of the features from jQuery (like some of the more unusual selectors) that aren't in Cash (to save bytes!), AJAX (and special effects) is excluded from jQuery Slim which brings the code down to only 69KB[3].

1. Axios https://github.com/axios/axios (41kb)

2. jQuery AJAX https://api.jquery.com/jQuery.ajax/ (87kb but includes ALL of jquery!)

3. https://code.jquery.com/jquery-3.7.1.slim.min.js

window.$ = (x => document.querySelectorAll(x))

But I think the OP's jQuery replacement is also dropping features in the service of a small footprint. So this was my 80/20 contribution to the "smallest jQuery replacement" problem ;)

B. Your two examples provide different things. This is like saying it's OK to include any old multi-megabyte dependency if a site loads a couple mb worth of images. There's no reason to stop considering the size of the small parts just because you decided you need some large parts. Things add up - that will never stop being a useful thing to remember, in any context.

Lightweight development for lightweight applications is a bit of an oxymoron at this time.

About the only place I could see a benefit from this library is maybe in embedded, where space really is an issue. I've created a few IoT devices with web interfaces that are built-into the tiny ROM of the device. A 6KB library is nice, but I'm using Preact with everything gzipped in one single .html file and my very complex web app hosted in the IoT device is about 50KB total size gzipped - including code, content, SVG images and everything, so jQuery or a JQ substitute isn't going to be a better solution for me, but maybe it fits for someone that doesn't know how to set up the tooling for a react/preact app.

My current client has a web application written in a lightweight strongly typed php framework, htmx and sprinkled jquery.

Devs move very quickly, the website is blazing fast, and it makes around 140k mrr. It's not small. About 350 database tables and 200 crud pages. Business logic is well unit tested.

You don't need to make jQuery the center of DOM manipulation if your application swaps dom with htmx with all the safety and comfort of a cozy backend.

It feels magical. And the node_modules folder is smol. Icing on the cake.

I look forward to jQuery 4 and 5.

You don't see this kind of architecture in CVs because these people are too busy making money to bother.

Reminds me of this old joke: "Why do greedy developers all learn PHP? Because there's a lot of dollars in that."

Maybe you'll never write enough JavaScript to have additional utility functions. You'll probably never need to modify those two lines. But copying and pasting like that makes for quite the code smell. Because if you're copying and pasting that, the question that someone may never actually verbalize to you is what else in the code is copy and pasting instead of being turned into a shared function in a libray?

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputEl...

    NodeList.prototype.__proto__ = Array.prototype;

I wonder what I would have to look for in my codebase in terms of what could break when dqsA starts returning an array instead of a NodeList?

https://github.com/tc39/proposal-iterator-helpers

    export type inferSelectorElementName<sel extends selector> =
    | string extends sel ? HTMLElement
      : sel extends `${infer A},${infer B}` ? inferSelectorElementName<A | B>
        : sel extends `${infer A}${'.' | '[' | '#'}${infer _}` ? inferSelectorElementName<A>
          : sel

    export type inferElementFromSelector<sel extends selector> =
    | string extends sel ? HTMLElement
      : inferSelectorElementName<sel> extends infer S ?
        S extends '' ? HTMLElement
          : S extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[S]
            : never
        : never

    const user = type({
        name: "string",
        platform: "'android' | 'ios'",
        "version?": "number | string"
    })

- A SQL database implemented purely in TypeScript type system (https://github.com/codemix/ts-sql)

- Chess implemented entirely in TypeScript (and Rust) type systems (https://github.com/Dragon-Hatcher/type-system-chess)

- Lambda calculus in TypeScript type system (https://ayazhafiz.com/articles/21/typescript-type-system-lam...)

Thanks for your continued work on it!

It's possible it's also situationally useful to say "if there aren't any document elements that match this selector, error out, if so do this with all of them." I'm struggling to imagine a specific situation in which that has compelling advantages (and would be interested in elaboration), but let's say it exists. Then something like this:

    $.fn.mustMatch = function(onNoMatch) {
        if (!this.length) {
            if(typeof onNoMatch == 'function') onNoMatch(this);
            else throw "mustMatch failed on selector " + this.selector;
        }
        return this;
    }

And if for some reason one were possessed of the conviction that implicit enforcement of this universally within their project outweighed the advantages of explicit options for both ways, it'd probably be better to patch the jQuery lib for that specific project than enforce it as a standard for everyone worldwide.

if (!!foo) { //do thing }

As I said above, you’d want a way to override the behavior in the few cases where it’s inappropriate

    <html>
    <head>
        <script src="https://code.jquery.com/jquery-4.0.0-beta.2.js"></script>
    </head>
    <body>
    <ul id="list">
        <li>foo</li>
        <li>bar</li>
        <li>gnord</li>
    </ul>
    <script>
        (function ($) {
            "use strict";

            if ("development") {
                // jQuery strict mode, logs errors on empty selectors if not opting out
                const getStackTrace = function (error) {
                    const stack = error.stack || '';
                    return stack
                        .split('\n')
                        .map(function (line) {
                            return line.trim();
                        })
                        .filter(function (line) {
                            return !!line;
                        });
                };

                // by calling try() we silence selectors that returns empty
                // problem is that this function runs after the selector
                $.fn.try = function () {
                    this.__store.try = true;
                    return this;
                };

                // thus we use the GC to check when the jQuery object is destroyed
                const registry = new FinalizationRegistry((store) => {
                    if (!store.try) {
                        console.error(
                            'Empty result for selector "' + store.selector + '"',
                            getStackTrace(store.error)
                        );
                    }
                });

                // override the init method
                const jQueryInit = $.fn.init;
                $.fn.init = function (selector, context) {
                    const result = new jQueryInit(selector, context);
                    if (selector && result.length === 0) {
                        const store = {selector: selector, try: false, error: new Error()};
                        result.__store = store;
                        registry.register(result, store);
                    }
                    return result;
                };
            } else {
                $.fn.try = function () {
                    return this;
                };
            }
        })(jQuery);

        // normal usage, have result, no error
        $("#list li").each(function (i, el) {
            console.log(el);
        });

        // empty result, triggers error log
        $("#nolist li").each(function (i, el) {
            console.log(el);
        });

        // empty result but with try, no error
        $("#trylist li").try().each(function (i, el) {
            console.log(el);
        });
    </script>
    </body>
    </html>