[5.0] ESM importmap support

build/media_source/system/joomla.asset.json

@@ -36,6 +36,14 @@
         "type": "module"
       }
     },
+    {
+      "name": "esm-map",
+      "type": "script",
+      "uri": "system/esm-map.min.js",
+      "attributes": {
+        "type": "module"
+      }
+    },
     {
       "name": "messages-legacy",
       "type": "script",

build/media_source/system/js/esm-map.js

@@ -0,0 +1,27 @@
+/**
+ * @copyright  (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+let map;
+/**
+ * Resolve module name to it's URL when "importmap" is not supported,
+ * otherwise return module name unchanged.
+ *
+ * Usage example:
+ * const { foo } = await import(joomlaESMap('@bar-module'));
+ * or
+ * import(joomlaESMap('@bar-module')).then(({ foo }) => { ... });
+ *
+ * @param {String}   name  Module name
+ * @param {boolean}  force Force to resolve, even when "importmap" is supported
+ * @returns {String}
+ */
+window.joomlaESMap = (name, force) => {
+  if (HTMLScriptElement.supports('importmap') && !force) return name;
+  if (!map) {
+    const m = document.querySelector('script[type="importmap"]');
+    map = m ? JSON.parse(m.textContent) : {imports: {}};
+  }
+  return map.imports[name] || name;
+};

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

@@ -56,6 +56,9 @@ public function render($head, $params = [], $content = null)
         $inlineAssets   = $wam->filterOutInlineAssets($assets);
         $inlineRelation = $wam->getInlineRelation($inlineAssets);
 
+        // Generate importmap first
+        $buffer .= $this->renderImportmap($assets);
+
         // Merge with existing scripts, for rendering
         $assets = array_merge(array_values($assets), $this->_doc->_scripts);
 
@@ -138,7 +141,7 @@ private function renderElement($item): string
         $src    = $asset ? $asset->getUri() : ($item['src'] ?? '');
 
         // Make sure we have a src, and it not already rendered
-        if (!$src || !empty($this->renderedSrc[$src]) || ($asset && $asset->getOption('webcomponent'))) {
+        if (!$src || !empty($this->renderedSrc[$src]) || ($asset && $asset->getOption('importmapOnly'))) {
             return '';
         }
 
@@ -320,4 +323,53 @@ private function renderAttributes(array $attributes): string
 
         return $buffer;
     }
+
+    /**
+     * Renders ESM importmap element
+     *
+     * @param   WebAssetItemInterface[]  $assets  The assets list
+     *
+     * @return  string  The attributes string
+     *
+     * @since   __DEPLOY_VERSION__
+     */
+    private function renderImportmap(array $assets)
+    {
+        $buffer       = '';
+        $importmap    = ['imports' => []];
+        $tab          = $this->_doc->_getTab();
+        $mediaVersion = $this->_doc->getMediaVersion();
+
+        // Collect a modules for the map
+        foreach ($assets as $item) {
+            // Only importmap:true can be mapped
+            if (!$item->getOption('importmap')) {
+                continue;
+            }
+
+            $esmName  = $item->getOption('importmapName') ?: $item->getName();
+            $esmScope = $item->getOption('importmapScope');
+            $version  = $item->getVersion();
+            $src      = $item->getUri();
+
+            // Check if script uses media version.
+            if ($version && !str_contains($src, '?') && !str_ends_with($src, '/') && ($mediaVersion || $version !== 'auto')) {
+                $src .= '?' . ($version === 'auto' ? $mediaVersion : $version);
+            }
+
+            if (!$esmScope) {
+                $importmap['imports'][$esmName] = $src;
+            } else {
+                $importmap['scopes'][$esmScope][$esmName] = $src;
+            }
+        }
+
+        // Render map
+        if (!empty($importmap['imports'])) {
+            $jsonImports = json_encode($importmap, JDEBUG ? JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES : JSON_UNESCAPED_SLASHES);
+            $buffer .= $tab . '<script type="importmap">' . $jsonImports . '</script>';
+        }
+
+        return $buffer;
+    }
 }

libraries/src/WebAsset/WebAssetItem.php

@@ -10,6 +10,7 @@
 namespace Joomla\CMS\WebAsset;
 
 use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Uri\Uri;
 
 // phpcs:disable PSR1.Files.SideEffects
 \defined('_JEXEC') or die;
@@ -175,6 +176,10 @@ public function getUri($resolvePath = true): string
                     $path = $this->resolvePath($path, 'stylesheet');
                     break;
                 default:
+                    // Asset for the ES modules may give us a folder for ESM import map
+                    if (str_ends_with($path, '/') && !str_starts_with($path, '.')) {
+                        $path = Uri::root(true) . '/' . $path;
+                    }
                     break;
             }
         }