devbridie / unjquerify Goto Github PK
View Code? Open in Web Editor NEWAST-based tool for converting jQuery code to modern vanilla JavaScript
Home Page: https://unjquerify.com
License: MIT License
AST-based tool for converting jQuery code to modern vanilla JavaScript
Home Page: https://unjquerify.com
License: MIT License
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.
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.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.
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.
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.
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.
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:
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()
.
Since the documentation is used exclusively in unjquerify-frontend and not here, the documentation, references, and samples should be moved from here to there.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.