4.12+ / jQuery 3 - Entwine onmatch events firing before document-ready

[kinglozzer]

Still investigating this and trying to nailing down some easier recreation steps, as this is all a follow-on from tractorcow-farm/silverstripe-fluent#780. Currently I’m testing/debugging this by just hacking around in dist files, so to illustrate it you can dump the following in the dist file admin/thirdparty/popper/popper.min.js:

window.jQuery(() => console.log('domready'));
window.jQuery('body').entwine({
  onmatch: () => console.log('onmatch', window.ss.config)
});

In 4.12, onmatch is fired before document ready, prior to 4.12 it’s fired afterwards.

Digging deeper, the EntwineSubtreeMaybeChanged event is now firing prior to DOM-ready. The root cause of that is probably this change in jQuery 3 https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous

One workaround that appears to fix this is to wrap this runSoon() function so it’ll only fire after document-ready:

silverstripe-admin/thirdparty/jquery-entwine/jquery.entwine.js

Lines 1392 to 1393 in 4f32407

	/** What to call to run a function 'soon'. Normally setTimeout, but for syncronous mode we override so soon === now */
	var runSoon = window.setTimeout;

Instead use:

var runSoon = (fn, delay) => $(() => window.setTimeout(fn, delay));

PRs

• FIX: Delay entwine onmatch until DOMContentLoaded (fixes #1469) #1476

[kinglozzer]

I’m actually noticing this in SS5 too: currently TinyMCE appears to be attempting to initialise too early, causing console errors:

vendor.js?m=1678894496:2996 Uncaught exception ReferenceError: tinymce is not defined
    at Object.create (bundle.js?m=1675732377:1:221238)
    at Object.init (bundle.js?m=1675732377:1:220176)
    at e.fn.init.onadd (bundle.js?m=1675732377:1:223351)
    at o (vendor.js?m=1678894496:3054:64)
    at e.fn.init.onadd (vendor.js?m=1678894496:3398:58)
    at e.fn.init.onmatch (bundle.js?m=1675732377:1:223430)
    at o.<computed> [as onmatchproxy] (vendor.js?m=1678894496:3349:23)
    at HTMLDocument.<anonymous> (vendor.js?m=1678894496:3385:624)
    at HTMLDocument.dispatch (vendor.js?m=1678894496:25374:392)
    at m.handle (vendor.js?m=1678894496:25349:86) in onmatch on 

TinyMCE will still load (presumably onmatch fires again later), but applying the hotfix above stops the errors occurring.

Edit: this warning also shows in SS4

[GuySartorelli]

PR merged