At the moment, any MemberExpression that matches a transformable function signature will be transformed. This includes expressions like [0,0].hide().

One implementation suggestion is that the engine should walk up a tree first to see if the left-most expression (in this case, the object of the callexpression body of the top statement) appears to be a jQuery.

The performance of such an approach should be checked.

When transforming $("a").hide().hide().hide().hide(), extra newlines will be inserted between each output statement, resulting in the following:

const element = document.querySelectorAll("a");

element.style.display = "none";

element.style.display = "none";

...

As the output will be very verbose with many chained statements, this is undesirable. When removing the outer callExpression so that the outer expression is a memberExpression, no newlines seem to be inserted.

Possible babel-core bug. See related issue.

What is exceptional is that each statement separately will not generate a newline when used with babel-generate to output each statement, however, joining them with insertBefore, insertAfter, or replaceWithMultiple with or without the use of a BlockStatement will cause them to appear.

• Create reproduction case on AST Explorer.
• Bug report?

Example: DocumentReadyPlugin.

The example $(document).ready(e) does not transform due to a isFunctionExpression check on the first argument.

Whether or not this check should be done at all is one thing, but all examples should demonstrate a mutation.

Check the following plugins:

• DocumentReadyPlugin
• GetElementByIdPlugin
• GetElementsByClassNamePlugin
• QuerySelectorAllPlugin
• CssGetPlugin
• OnPlugin()
• ClickHandlerPlugin
• AddClassPlugin
• TextSetPlugin
• TextGetPlugin
• HidePlugin
• UnwrapPlugin
• IsPlugin

Example:

const x = $("a.nav-link");
x.hide();
x.show();

For simple assignments, the engine should be able to follow references to statically determine if an element is a jQuery where possible.

Since the documentation is used exclusively in unjquerify-frontend and not here, the documentation, references, and samples should be moved from here to there.

For input $("a").hide().hide();, the transformation given is document.querySelectorAll("a").map((_element) => (_element.style.display = "none")[0].style.display = "none");.

Possibly very high-effort fix.

Currently, the UnchainPlugin will always cause a reassignment for each chained method call. However, many methods do not return a different collection on each call.

For methods that do not return a new collection upon transformation, a reassignment is unnecessary. Consider $("a").hide().hide().

For functions that cause mutations, the current approach of translating $("a").hide() to document.querySelectorAll("a").forEach(e => e.style.display = "none"); is possible, but functions that return values will not be transformed as expected.

Consider the following cases:

• const a = $("a").css("font-size"); - The documentation specifies that the value of the first element in the collection is returned.
• const t = $("a").matches(".active"); - The documentation specifies that the value should be true if one of the elements matches the selector.
• There could be more collectors.

Therefore, the current forEach approach does not work for all cases.

Each transformation should be augmented with a transformation that should be used to collect the results of an application to a collection.

In the character counter example, for example the jQuery each function is not converted to forEach

And it looks like while converting jQuery using this the converted code isn't working as it should.

The transformation list on You Don't Need jQuery will be used as a milestone indicator.

• 1.0 Query by selector
• 1.1 Query by class
• 1.2 Query by id
• 1.3 Query by attribute
• 1.4 Query in descendants
• 1.5 Sibling/Previous/Next Elements
• 1.6 Closest
• 1.7 Parents Until
• 1.8 Form
• 1.9 Iframe Contents
• 1.10 Get body
• 1.11 Attribute getter and setter
• 1.12 Selector containing string (case-sensitive)
• 2.1 CSS
• 2.2 Width & Height
• 2.3 Position & Offset
• 2.4 Scroll Top
• 3.1 Remove
• 3.2 Text
• 3.3 HTML
• 3.4 Append
• 3.5 Prepend
• 3.6 insertBefore
• 3.7 insertAfter
• 3.8 is
• 3.9 clone
• 3.10 empty
• 3.11 wrap
• 3.12 unwrap
• 3.13 replaceWith
• 3.14 simple parse
• 4.1 Load data from the server and place the returned HTML into the matched element.
• 5.0 Document ready by DOMContentLoaded
• 5.1 Bind an event with on
• 5.2 Unbind an event with off
• 5.3 Trigger
• 6.1 Basic utilities
• 6.2 Contains
• 6.3 Globaleval
• 6.4 parse
• 7.1 done, fail, always
• 7.2 when
• 7.3 Deferred
• 8.1 Show & Hide
• 8.2 Toggle
• 8.3 FadeIn & FadeOut
• 8.4 FadeTo
• 8.5 FadeToggle
• 8.6 SlideUp & SlideDown
• 8.7 SlideToggle
• 8.8 Animate