[4.0] Resolving JavaScript conflicts by reordering Scripts

[jschmi102]

Steps to reproduce the issue

to use mootols framework reorder mootools libraries as with Joomla3 using. $headData = $document->getHeadData(); reorder scripts and store modified $headData (ref. e.g. https://jinput.com/blog/5-resolving-javascript-conflicts-and-override-the-scripts-ordering-in-joomla-3.html) solution works fine with Joomal v3 does not with V4

Expected result

reordered scripts in head section

Actual result

does not get valid data with getHeadData(); to be used

System information (as much as possible)

Additional comments

pls. advise how to solve rordering of scripts in oder to avoid conflicts e.g. using mootols together with jquery (mootools libs must be first in the row) with Joomla 4

[infograf768]

Do I understand this issue concerns J4?

[jschmi102]

yes - its only a problem with J4

[ReLater]

First: You know that Joomla 4 has kicked Mootools library out of the package?

In Joomla 4 the so called WebAsset Manger has been established which breaks backwards compatibility at several script loading/manipulating places and for several techniques that worked fine with Joomla 3.

On the other hand the old techniques/codes (addscript() etc. pp.) are still working but in conflict with the Manager at many places.

That's just the background of the story. Because the Web Asset Manger is just complicated, occupational therapy and pure obscurity for me but "modern" ;-) I have no answer to your question:

pls. advise how to solve rordering of scripts in oder to avoid conflicts e.g. using mootols together with jquery (mootools libs must be first in the row) with Joomla 4

Have fun! https://docs.joomla.org/J4.x:Web_Assets

[jschmi102]

OK! Thanks for your response - I'm having my first try with WebAsset Manager but it seems that I'm missing something: got this whith checking state for my script "Active! Was enabled manually" - but my script has not yet been added to document (html) - I thought "$wa->useScript" would cause rendering of script. What is missing for this yet?

[jschmi102]

did not see that script tags have been added hash-numbers - so I did not detect my scripts - sorry all is OK so far.

[jschmi102]

now I'm searching for a wa method to place my scripts before "jquery" and "bootstrap.js.bundle" joomla asset. can you help me?

[jschmi102]

hi, found it - pls check my code (which is working with casiopeia;

` function add_mootool_scripts() {

    $wa = Factory::getApplication()->getDocument()->getWebAssetManager();
    $wr = $wa->getRegistry();

    $wr->addRegistryFile('plugins/system/jmootips/joomla.asset.json');
    $wr->addRegistryFile('media/vendor/joomla.asset.json');
    $wa->registerScript('mootools.core', 'plugins/system/jmootips/js/mootools-core.js');
    $wa->registerScript('mootools.more', 'plugins/system/jmootips/js/mootools-more-jmootips.js');
    $wa->registerScript('jmootips', 'plugins/system/jmootips/js/jmootips.min.js');
    $wa->registerScript('jquery', 'media/vendor/jquery/js/jquery.min.js');

     $wa->useScript('mootools.core')
        ->useScript('mootools.more')
        ->useScript('jmootips')
        ->useScript('jquery');
}
`

[Fedik]

You do not need to register jquery, it already exist in the core assets.

All your code can be replaced with this:

$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->registerAndUseScript('mootools.core', 'plugins/system/jmootips/js/mootools-core.js')
 ->registerAndUseScript('mootools.more.jmootips', 'plugins/system/jmootips/js/mootools-more-jmootips.js', [], [], ['mootools.core'])
 ->registerAndUseScript('jmootips', 'plugins/system/jmootips/js/jmootips.min.js', [], [], ['mootools.more.jmootips'])
 ->useScript('jquery');

Two note, for your extension:

• you should place all js/css in /media folder, eg /media/plg_system_jmootips/js, /media/plg_system_jmootips/css
• it better if you reduce amount of libraries loaded on User site. eg replace mootools to something, ideally with vanilla js, or jquery at least.

[jschmi102]

thanks for your tips - will consider/implement your suggestions.

[Quy]

@jschmi102 Please close issue if resolved. Thanks.

[jschmi102]

problem is not completely solved as reordering works fine, if scripts are added only by one requestor (plugin, module or component). If e.g. another plugin adds its script e.g. with

$wa->registerAndUseScript("new.script', 'url-of_new_script", [], [], ['jquery']);

it will be placed (as req. after 'jquery') but the first order (with mootools scripts) will be destryoyed and scripts will be placed somewhere after "new,script'). I could not find a solution where joomla V4 would keep/honor an order setting.

[dgrammatiko]

This should be closed as a WONT FIX Reason: Developers should place all their static files in the media folder following the existing conventions. The convention exists for many reasons, the most prominent security!