activitypub-remote-reply script enqueues 29 dependencies on all is_singular() requests

[kasparsd]

Quick summary

Introduced in #689 the activitypub-remote-reply script handle now enqueues itself with 29 dependencies:

wp-polyfill-inert, regenerator-runtime, wp-polyfill, wp-hooks, wp-i18n, wp-url, wp-api-fetch, react, react-dom, wp-dom-ready, wp-a11y, wp-deprecated, wp-dom, wp-escape-html, wp-element, wp-is-shallow-equal, wp-keycodes, wp-priority-queue, wp-compose, moment, wp-date, wp-html-entities, wp-primitives, wp-private-apis, wp-redux-routine, wp-data, wp-rich-text, wp-warning, wp-components

This happens on posts and pages that (1) don't support comments, (2) don't have comments enabled.

This also adds a combined total of almost 2MB of potentially unused JS to all of those requests.

Steps to reproduce

1. Enable the plugin.
2. Visit any single post or page and confirm that all of the mentioned dependencies are enqueued in the HTML source code.

What you expected to happen

1. The reply script is enqueued only on posts and pages that support comments and have comments enabled.
2. The script is lazy-loaded only when the user clicks on the call-to-action link/button.

What actually happened

The mentioned script and style gets enqueued on all post and page views. The enqueued dependency bundle size is incredibly large.

Impact

Most (> 50%)

Available workarounds?

Yes, difficult to implement

Logs or notes

No response

[pfefferle]

Sadly #706 removes the JS completely, so I had to remove it for now. I reopened the issue, because we still need a solution for the issue.

[janboddez]

Stupid question, perhaps, and I get that you may want to reuse Gutenberg components, etc., but wouldn't it make sense to just whip up a custom script, to essentially render only a modal with two input fields and two buttons?

I also found it doesn't necessarily respect the theme CSS. E.g., the input and buttons' font family is reset. The reply link itself also gets a "hardcoded"---via Gutenberg---font size which is (likely) different from the default "Reply link" size. (Possibly related: the CSS issues mentioned in #720, which mentions undefined CSS variables in the context of---I think---a classic theme.)

[edent]

I've just found a ton of GlotPress translation stuff in my blog which appears to be coming from this plugin.

I love having my blog on the Fediverse. But I want to run a lean and quick website which, as far as possible, works without JS.

Would it be possible to have an option to switch off the things we don't need?

[jeherve]

Related: #426

[janboddez]

Wanted to try and create a vanilla JS modal ... but I did notice WP itself also loads quite a few of these: view, hooks, api-fetch, polyfill-inert, regenerator-runtime, url, i18n, interactivity, polyfill.

Could be 'cause I use a block theme with, e.g., a navigation block ... Could be the Interactivity API.

Still interested in either a vanilla JS alternative (or something Interactivity API based for reasons of consistency, although user experience and speed should be more important).

Looked at some examples and nearly all vanilla JS modals are just a matter of tacking on/removing some classes to/from body and an otherwise hidden div. Should be rather simple.

Edit: Not loading these files where they aren't needed (per this issue's title) is probably even more important, haha. Meaning I'm not making demands or anything, whatever solution is fine.

Another edit: Just in case anyone wanted to disable 😬 the link/modal, this seems to work ...

add_action( 'init', function() {
  if ( ! class_exists( '\\Activitypub\\Comment' ) ) {
    return;
  }

  remove_action( 'wp_enqueue_scripts', array( \Activitypub\Comment::class, 'enqueue_scripts' ) );
  remove_filter( 'comment_reply_link', array( \Activitypub\Comment::class, 'comment_reply_link' ) );
}, 999 );

[mattwiebe]

I've made a PR that should eliminate loading the script (and its heavy dependencies) in all situations where it's not needed