Remove jQuery dependency

gravityrail commented 4 years ago

What follows is a list of files that we have detected jQuery-like syntax in, listed in approximate priority order.

Prioritisation was based on the following(rough) criteria:

is the asset enqueued on the front-end of a site, where performance is most critical?
how often is the asset rendered, based on rough popularity and how it's implemented?

In eliminating these uses of jQuery, you may find this web site useful: http://youmightnotneedjquery.com/

Files

The following list of files was generated using eslint. Don't forget, once you modify a file, to remove jquery as a dependency wherever that file was enqueued.

Front-end

Carousel

[x] modules/carousel/jetpack-carousel.js

Tiled Gallery

[x] modules/tiled-gallery/tiled-gallery/tiled-gallery.js

Sharing Buttons

[ ] modules/sharedaddy/admin-sharing.js
[x] modules/sharedaddy/sharing.js

Gutenberg

[x] modules/calypsoify/mods-gutenberg.js
[x] modules/calypsoify/mods.js

Contact Forms

[ ] modules/contact-form/js/editor-view.js (these both in progress by @davidlonjon )
[ ] modules/contact-form/js/grunion-admin.js

Contact Info Widget

[ ] modules/widgets/contact-info/contact-info-admin.js

EU Cookie Widget

[ ] modules/widgets/eu-cookie-law/eu-cookie-law-admin.js

Likes

[ ] modules/likes/post-count-jetpack.js
[ ] modules/likes/post-count.js
[x] modules/likes/queuehandler.js (ready for review #21726)
[x] _inc/postmessage.js #17592

Masterbar

[x] modules/masterbar/tracks-events.js

Post by Email

[ ] modules/post-by-email/post-by-email.js

Misc Shortcodes (rarely used)

[ ] modules/shortcodes/js/brightcove.js
[x] modules/shortcodes/js/gist.js
[ ] modules/shortcodes/js/jmpress.js
[ ] modules/shortcodes/js/main.js
[ ] modules/shortcodes/js/quiz.js
[ ] modules/shortcodes/js/recipes-printthis.js
[ ] modules/shortcodes/js/recipes.js
[ ] modules/shortcodes/js/slideshow-shortcode.js
[x] _inc/polldaddy-shortcode.js

Responsive Videos

[x] modules/theme-tools/responsive-videos/responsive-videos.js

Site Logo Control

[x] modules/theme-tools/site-logo/js/site-logo-control.js
[ ] modules/theme-tools/site-logo/js/site-logo-header-text.js
[x] modules/theme-tools/site-logo/js/site-logo.js

Widget Visibility

[ ] modules/widget-visibility/widget-conditions/widget-conditions.js
[ ] modules/widgets/gallery/js/admin.js
[ ] modules/widgets/milestone/admin.js
[ ] modules/widgets/social-icons/social-icons-admin.js
[ ] modules/widgets/twitter-timeline-admin.js

Comics

[ ] modules/custom-post-types/comics/comics.js
[ ] modules/custom-post-types/js/many-items.js
[ ] modules/custom-post-types/js/menu-checkboxes.js
[ ] modules/custom-post-types/js/nova-drag-drop.js

VideoPress

[ ] modules/videopress/js/editor-view.js
[ ] modules/videopress/js/videopress-plupload.js

Customizer

CSS Editor

[ ] modules/custom-css/custom-css/js/css-editor.js
[ ] modules/custom-css/custom-css/js/use-codemirror.js

Content Options

[x] modules/theme-tools/content-options/customizer.js

Customizer Utils

[ ] modules/widgets/customizer-utils.js

Simple Payments

[ ] modules/widgets/simple-payments/customizer.js

Infinite Scroll

[ ] modules/infinite-scroll/infinity-customizer.js

WP-Admin

It might not be worth bothering removing jQuery from wp-admin, as on these pages performance is less of an issue, and they prrrrobably enqueue jQuery no matter what you do.

Comment Likes

[ ] modules/comment-likes/comment-like-count.js

Just in Time Messages

[ ] _inc/jetpack-jitm.js

Notices

[ ] _inc/client/components/admin-notices/index.jsx

Jetpack Settings

[ ] _inc/client/components/form/input-checkbox-multiple.jsx
[ ] _inc/client/main.jsx
[ ] _inc/jetpack-admin.js
[ ] _inc/jetpack-modules.js
[ ] _inc/jetpack-modules.views.js

Connection

[ ] _inc/connect-button.js
[ ] _inc/jetpack-connection-banner.js

Deactivate warning

[ ] _inc/jetpack-deactivate-dialog.js

"Identity Crisis"

[ ] _inc/idc-notice.js

Gallery settings

[ ] _inc/gallery-settings.js

Plugin Search (unused)

[ ] modules/plugin-search/plugin-search.js

MISC

I don't yet know the scope of these:

[ ] _inc/jetpack-wizard-banner.js
[x] _inc/jquery.jetpack-resize.js (deleted; ready for review #21726)
[ ] _inc/lib/debugger/jetpack-debugger-site-health.js
[ ] _inc/lib/tracks/tracks-ajax.js
[ ] packages/debug-helper/modules/inc/js/xmlrpc-errors.js
[ ] tools/jetpack-live-branches/jetpack-live-branches.user.js

dero commented 4 years ago

It might not be worth bothering removing jQuery from wp-admin, as on these pages performance is less of an issue, and they prrrrobably enqueue jQuery no matter what you do.

+1

jeherve commented 4 years ago

Noting that any effort in this direction will most likely help avoiding any conflicts that may come up when Core updates the version of jQuery bundled with WordPress:

davidlonjon commented 4 years ago

I'll have a go at

Contact Forms

modules/contact-form/js/editor-view.js
modules/contact-form/js/grunion-admin.js

dero commented 4 years ago

I'm starting to work on:

Tiled Gallery

modules/tiled-gallery/tiled-gallery/tiled-gallery.js

gravityrail commented 4 years ago

@dero @davidlonjon - if you're working on something please update the description to put your name on it, and if possible a link to your PR, so we don't overlap.

gravityrail commented 4 years ago

I'll have a go at

Contact Forms

modules/contact-form/js/editor-view.js

modules/contact-form/js/grunion-admin.js

@davidlonjon Just make sure you aren't removing jQuery as a dep from anything shown in wp-admin. I am not really interested in wp-admin right now - only front-end code.

davidlonjon commented 4 years ago

I'll have a go at Contact Forms

modules/contact-form/js/editor-view.js

modules/contact-form/js/grunion-admin.js

@davidlonjon Just make sure you aren't removing jQuery as a dep from anything shown in wp-admin. I am not really interested in wp-admin right now - only front-end code.

Ok thanks for the feedback. For info I have not done much work on this as I refocused my attention on our other project.

sgomes commented 4 years ago

Moved modules/comment-likes/comment-like-count.js to the wp-admin section, as it doesn't appear to be used outside of there. Dropping ongoing work there and picking up something else.

gravityrail commented 4 years ago

Noting here that we should use the wp-dom-ready package instead of jQuery.ready

https://developer.wordpress.org/block-editor/packages/packages-dom-ready/

Aurorum commented 4 years ago

I had a go at modules/shortcodes/js/gist.js in #16700. :)

sgomes commented 4 years ago

@gravityrail: Adding a note here that once the plan we've been discussing in https://github.com/Automattic/jetpack/pull/16592#discussion_r463200046 has been finalised, we should probably document it and add a link to it on this issue.

jeherve commented 4 years ago

Noting that the modules/widgets/eu-cookie-law/eu-cookie-law-admin.js file currently generates a warning with Core's Enable jQuery Migrate Helper plugin:

Same in modules/calypsoify/mods.js: jQuery.fn.load() is deprecated

It may be worth prioritizing these files (and others that trigger such warnings) accordingly.

jeherve commented 1 week ago

@sgomes I know you had worked on removing jQuery dependencies at some point. Is that something that's still on you radar today?

sgomes commented 1 week ago

@jeherve I haven't looked at this in a while, but I seem to recall jQuery usage was fairly small at this point, outside of wp-admin (which is out of scope, as I see it).

Perhaps a new audit of jQuery usage in Jetpack is needed at this point, but I won't be able to pick that up in the foreseeable future 😕

Automattic / jetpack