jQuery to JavaScript Converter

Lines in                      17
Statements translated         8
Left alone, needs a decision  2
Left alone, no rule fits      0

What was translated
  ready ×1                    DOMContentLoaded fires once, so a script that loads after it will not run the callback. jQuery ran it anyway; for a deferred or dynamically inserted script, check document.readyState first.
  hide, write ×1              jQuery stored the previous display value so show() could restore it. Nothing native does, which is why show() below sets an empty string and falls back to the stylesheet.
  each ×1                     jQuery passed (index, element) and bound this to the element; forEach passes (element, index) and binds nothing. Any `this` in the body becomes the element parameter, and the closing `});` needs checking.
  attr, write ×1              Direct equivalent.
  on ×1                       A for..of loop rather than forEach, so a `return` inside the handler still returns from the handler. The element is in scope as `element`, which is what `this` used to be, and the statement now needs two closing braces.
  addClass, write ×1          classList.add takes one class per argument, where jQuery took a space-separated string.
  val, read ×1                Reading a multiple select gave an array in jQuery and gives one string here; use [ ...el.selectedOptions ].map( o => o.value ) for that case.
  html, write ×1              innerHTML with untrusted content is an XSS. textContent unless the markup is yours.

What needs a decision
  line 15                     jQuery animations have no native equivalent. Use a CSS transition, or element.animate() from the Web Animations API, both of which run on the compositor and are smoother than jQuery ever was.
  line 16                     This is a plugin rather than jQuery. Replace it or keep jQuery for this page: converting the code around a plugin and keeping the plugin means shipping the library anyway.

JavaScript
// Two helpers, which is most of what jQuery was for.
const $$ = ( selector, root = document ) => [ ...root.querySelectorAll( selector ) ];
const $1 = ( selector, root = document ) => root.querySelector( selector );

document.addEventListener( 'DOMContentLoaded', () => {
	$$( ".alert" ).forEach( ( element ) => element.style.display = 'none' );

	$$( ".tabs a" ).forEach( ( el, i ) => {
		el.setAttribute( "data-index", i );
	});

	for ( const element of $$( ".btn" ) ) {
		element.addEventListener( 'click', ( e ) => {
		$$( ".panel" ).forEach( ( element ) => element.classList.add( "is-open" ) );
	});

	var label = $1( "#name" )?.value;
	$$( "#out" ).forEach( ( element ) => element.innerHTML = "<b>" + label + "</b>" );

	// TODO, jQuery: jQuery animations have no native equivalent. Use a CSS transition, or element.animate() from the Web Animations API, both of which run on the compositor and are smoother than jQuery ever was.
	$(".legacy").fadeIn(200);
	// TODO, jQuery: This is a plugin rather than jQuery. Replace it or keep jQuery for this page: converting the code around a plugin and keeping the plugin means shipping the library anyway.
	$("#picker").datepicker({ format: "yyyy-mm-dd" });
});

This is a translation guide rather than a compiler. It matches
statements with a pattern and does not parse the JavaScript, so it
cannot tell code from a string, and a line it does not recognise is left
exactly as it was rather than guessed at. Read the output as a draft and
run the tests.

Setters become a loop and getters become one element, because that is
the difference jQuery hid: `$(".item").addClass("on")` touched every
match, and `$(".item").text()` read the first one. A converter that
translates fragments cannot make that distinction and produces code that
looks right and does nothing.

2 lines have no equivalent at all: an animation, a plugin, a Deferred or
a geometry method. Those are listed above with what to use instead, and
they are the work a converter cannot do for you.

Three differences cause most of the bugs in a migration. A
jQuery-triggered event is invisible to a native listener and the
reverse, so a half-migrated page breaks in the middle. `.off()` needs
the same function reference that was passed to `.on()`, so an inline
arrow function can never be removed. And `this` inside a jQuery callback
was the element, which an arrow function does not preserve.

Check whether you need to convert at all. jQuery is about 30 KB gzipped
and it is not slow; the reason to remove it is to drop a dependency, and
a page that keeps one plugin keeps the whole library. Removing it from a
theme that also loads it for the admin bar saves nothing.

What replaces it is mostly the platform: querySelectorAll, classList,
closest, matches, dataset, Element.append, fetch and element.animate are
in every browser in use. The gap is terseness, and the two helpers at
the top of the output close most of it.