[6.1] WebAsset cross-dependencies support

administrator/components/com_categories/layouts/joomla/form/field/categoryedit.php

@@ -137,7 +137,6 @@
 Text::script('JGLOBAL_SELECT_PRESS_TO_SELECT');
 
 Factory::getDocument()->getWebAssetManager()
-    ->usePreset('choicesjs')
     ->useScript('webcomponent.field-fancy-select');
 ?>
 

administrator/components/com_modules/layouts/joomla/form/field/modulespositionedit.php

@@ -75,7 +75,6 @@
 Text::script('JGLOBAL_SELECT_PRESS_TO_SELECT');
 
 Factory::getDocument()->getWebAssetManager()
-    ->usePreset('choicesjs')
     ->useScript('webcomponent.field-fancy-select');
 
 ?>

administrator/components/com_modules/tmpl/modules/default_batch_body.php

@@ -35,7 +35,6 @@
 Text::script('JGLOBAL_SELECT_PRESS_TO_SELECT');
 
 $this->getDocument()->getWebAssetManager()
-    ->usePreset('choicesjs')
     ->useScript('webcomponent.field-fancy-select')
     ->useScript('joomla.batch-copymove');
 

administrator/components/com_templates/tmpl/template/default.php

@@ -41,7 +41,7 @@
 }
 
 if ($this->type == 'image') {
-    $wa->usePreset('cropperjs');
+    $wa->useScript('cropperjs');
 }
 
 if ($this->type == 'font') {

administrator/components/com_templates/tmpl/template/default_modal_child_body.php

@@ -17,7 +17,7 @@
 
 /** @var \Joomla\Component\Templates\Administrator\View\Template\HtmlView $this */
 
-Factory::getDocument()->getWebAssetManager()->usePreset('choicesjs');
+Factory::getDocument()->getWebAssetManager()->useScript('choicesjs');
 
 // Generate a list of styles for the child creation modal
 $options = [];

build/build-modules-js/settings.json

@@ -26,15 +26,20 @@
             "uri": "awesomplete.min.js",
             "attributes": {
               "defer": true
-            }
+            },
+            "crossDependencies": [
+              "awesomplete#style"
+            ]
           },
           {
             "name": "awesomplete",
             "type": "preset",
             "dependencies": [
               "awesomplete#style",
               "awesomplete#script"
-            ]
+            ],
+            "deprecated": true,
+            "deprecatedMsg": "Use script asset directly. Will be removed in 7.0"
           }
         ],
         "dependencies": [],
@@ -219,7 +224,10 @@
             "name": "cropper-module",
             "type": "script",
             "uri": "cropper.esm.js",
-            "importmap": true
+            "importmap": true,
+            "crossDependencies": [
+              "cropperjs#style"
+            ]
           },
           {
             "name": "cropperjs",
@@ -228,15 +236,20 @@
             "uri": "cropper.min.js",
             "attributes": {
               "defer": true
-            }
+            },
+            "crossDependencies": [
+              "cropperjs#style"
+            ]
           },
           {
             "name": "cropperjs",
             "type": "preset",
             "dependencies": [
               "cropperjs#style",
               "cropperjs#script"
-            ]
+            ],
+            "deprecated": true,
+            "deprecatedMsg": "Use script asset directly. Will be removed in 7.0"
           }
         ],
         "dependencies": [],
@@ -268,15 +281,20 @@
             "uri": "choices.min.js",
             "attributes": {
               "defer": true
-            }
+            },
+            "crossDependencies": [
+              "choicesjs#style"
+            ]
           },
           {
             "name": "choicesjs",
             "type": "preset",
             "dependencies": [
               "choicesjs#style",
               "choicesjs#script"
-            ]
+            ],
+            "deprecated": true,
+            "deprecatedMsg": "Use script asset directly. Will be removed in 7.0"
           }
         ],
         "dependencies": [],
@@ -322,15 +340,20 @@
             "uri": "dragula.min.js",
             "attributes": {
               "defer": true
-            }
+            },
+            "crossDependencies": [
+              "dragula#style"
+            ]
           },
           {
             "name": "dragula",
             "type": "preset",
             "dependencies": [
               "dragula#style",
               "dragula#script"
-            ]
+            ],
+            "deprecated": true,
+            "deprecatedMsg": "Use script asset directly. Will be removed in 7.0"
           }
         ],
         "dependencies": [],

components/com_finder/tmpl/search/default_form.php

@@ -19,7 +19,7 @@
 * This segment of code sets up the autocompleter.
 */
 if ($this->params->get('show_autosuggest', 1)) {
-    $this->getDocument()->getWebAssetManager()->usePreset('awesomplete');
+    $this->getDocument()->getWebAssetManager()->useScript('awesomplete');
     $this->getDocument()->addScriptOptions('finder-search', ['url' => Route::_('index.php?option=com_finder&task=suggestions.suggest&format=json&tmpl=component', false)]);
 
     Text::script('JLIB_JS_AJAX_ERROR_OTHER');

layouts/joomla/form/field/groupedlist-fancy-select.php

@@ -114,7 +114,6 @@
 Text::script('JGLOBAL_SELECT_PRESS_TO_SELECT');
 
 Factory::getApplication()->getDocument()->getWebAssetManager()
-    ->usePreset('choicesjs')
     ->useScript('webcomponent.field-fancy-select');
 
 ?>

layouts/joomla/form/field/list-fancy-select.php

@@ -96,7 +96,6 @@
 Text::script('JGLOBAL_SELECT_PRESS_TO_SELECT');
 
 Factory::getApplication()->getDocument()->getWebAssetManager()
-    ->usePreset('choicesjs')
     ->useScript('webcomponent.field-fancy-select');
 
 ?>

layouts/joomla/form/field/tag.php

@@ -115,7 +115,6 @@
 Text::script('JGLOBAL_SELECT_PRESS_TO_SELECT');
 
 Factory::getDocument()->getWebAssetManager()
-    ->usePreset('choicesjs')
     ->useScript('webcomponent.field-fancy-select');
 
 ?>

libraries/src/Document/Renderer/Html/ScriptsRenderer.php

@@ -10,6 +10,7 @@
 namespace Joomla\CMS\Document\Renderer\Html;
 
 use Joomla\CMS\Document\DocumentRenderer;
+use Joomla\CMS\WebAsset\WebAssetItemCrossDependenciesInterface;
 use Joomla\CMS\WebAsset\WebAssetItemInterface;
 
 // phpcs:disable PSR1.Files.SideEffects
@@ -163,6 +164,10 @@ private function renderElement($item): string
                     $attribs['data-asset-dependencies'] = implode(',', $asset->getDependencies());
                 }
 
+                if ($asset instanceof WebAssetItemCrossDependenciesInterface && $asset->getCrossDependencies()) {
+                    $attribs['data-asset-cross-dependencies'] = str_replace('"', '', json_encode($asset->getCrossDependencies()));
+                }
+
                 if ($asset->getOption('deprecated')) {
                     @trigger_error(
                         sprintf('Web Asset script [%s] is deprecated. %s', $asset->getName(), $asset->getOption('deprecatedMsg', '')),

libraries/src/HTML/Helpers/DraggableList.php

@@ -75,7 +75,6 @@ public static function draggable(
         }
 
         $doc->getWebAssetManager()
-            ->usePreset('dragula')
             ->useScript('joomla.draggable');
 
         // Set static array

libraries/src/WebAsset/WebAssetItem.php

@@ -25,7 +25,7 @@
  *
  * @since  4.0.0
  */
-class WebAssetItem implements WebAssetItemInterface
+class WebAssetItem implements WebAssetItemInterface, WebAssetItemCrossDependenciesInterface
 {
     /**
      * Asset name
@@ -67,6 +67,22 @@ class WebAssetItem implements WebAssetItemInterface
      */
     protected $dependencies = [];
 
+    /**
+     * Unparsed cross dependencies
+     *
+     * @var    array[]
+     * @since  __DEPLOY_VERSION__
+     */
+    private $rawCrossDependencies = [];
+
+    /**
+     * Asset cross dependencies
+     *
+     * @var    array[]
+     * @since  __DEPLOY_VERSION__
+     */
+    protected $crossDependencies = [];
+
     /**
      * Asset version
      *
@@ -78,11 +94,12 @@ class WebAssetItem implements WebAssetItemInterface
     /**
      * Class constructor
      *
-     * @param   string   $name          The asset name
-     * @param   ?string  $uri           The URI for the asset
-     * @param   array    $options       Additional options for the asset
-     * @param   array    $attributes    Attributes for the asset
-     * @param   array    $dependencies  Asset dependencies
+     * @param   string   $name               The asset name
+     * @param   ?string  $uri                The URI for the asset
+     * @param   array    $options            Additional options for the asset
+     * @param   array    $attributes         Attributes for the asset
+     * @param   array    $dependencies       Asset dependencies, from assets of the same type
+     * @param   array    $crossDependencies  Asset dependencies, from assets of another type
      *
      * @since   4.0.0
      */
@@ -91,7 +108,8 @@ public function __construct(
         ?string $uri = null,
         array $options = [],
         array $attributes = [],
-        array $dependencies = []
+        array $dependencies = [],
+        array $crossDependencies = []
     ) {
         $this->name    = $name;
         $this->uri     = $uri;
@@ -115,6 +133,13 @@ public function __construct(
             $this->dependencies = $dependencies;
         }
 
+        if (\array_key_exists('crossDependencies', $options)) {
+            $this->rawCrossDependencies = (array) $options['crossDependencies'];
+            unset($options['crossDependencies']);
+        } else {
+            $this->rawCrossDependencies = $crossDependencies;
+        }
+
         $this->options = $options;
     }
 
@@ -154,6 +179,46 @@ public function getDependencies(): array
         return $this->dependencies;
     }
 
+    /**
+     * Return associative list of cross dependencies.
+     * Example: ['script' => ['script1', 'script2'], 'style' => ['style1', 'style2']]
+     *
+     * @return  array[]
+     *
+     * @since   __DEPLOY_VERSION__
+     */
+    public function getCrossDependencies(): array
+    {
+        if ($this->rawCrossDependencies && !$this->crossDependencies) {
+            // Cross Dependencies as an associative array
+            if (!\is_int(key($this->rawCrossDependencies))) {
+                $this->crossDependencies = $this->rawCrossDependencies;
+            } else {
+                // Parse Cross Dependencies which comes in ["name#type"] format
+                foreach ($this->rawCrossDependencies as $crossDependency) {
+                    $pos     = strrpos($crossDependency, '#');
+                    $depType = $pos ? substr($crossDependency, $pos + 1) : '';
+                    $depName = $pos ? substr($crossDependency, 0, $pos) : '';
+
+                    if (!$depType || !$depName) {
+                        throw new \UnexpectedValueException(
+                            sprintf('Incomplete definition for cross dependency, for asset "%s"', $this->getName())
+                        );
+                    }
+
+                    if (empty($this->crossDependencies[$depType])) {
+                        $this->crossDependencies[$depType] = [];
+                    }
+
+                    $this->crossDependencies[$depType][] = $depName;
+                }
+            }
+            $this->rawCrossDependencies = [];
+        }
+
+        return $this->crossDependencies;
+    }
+
     /**
      * Get the file path
      *

libraries/src/WebAsset/WebAssetItemCrossDependenciesInterface.php

@@ -0,0 +1,34 @@
+<?php
+
+/**
+ * Joomla! Content Management System
+ *
+ * @copyright  (C) 2024 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+namespace Joomla\CMS\WebAsset;
+
+// phpcs:disable PSR1.Files.SideEffects
+\defined('_JEXEC') or die;
+// phpcs:enable PSR1.Files.SideEffects
+
+/**
+ * Interface for Web Asset Item with cross dependencies
+ *
+ * Asset Item are "read only" object, all properties must be set through class constructor.
+ *
+ * @since  __DEPLOY_VERSION__
+ */
+interface WebAssetItemCrossDependenciesInterface
+{
+    /**
+     * Return associative list of cross dependencies.
+     * Example: ['script' => ['script1', 'script2'], 'style' => ['style1', 'style2']]
+     *
+     * @return  array[]
+     *
+     * @since   __DEPLOY_VERSION__
+     */
+    public function getCrossDependencies(): array;
+}