bug symfony#52519 [AssetMapper] If assets are served from a subdirectory or CDN, also adjust importmap keys (weaverryan)

This PR was merged into the 6.4 branch.

Discussion
----------

[AssetMapper] If assets are served from a subdirectory or CDN, also adjust importmap keys

| Q             | A
| ------------- | ---
| Branch?       | 6.4
| Bug fix?      | yes
| New feature?  | no
| Deprecations? | none
| Issues        | Fixes symfony#52520 (extra points for opening the PR before the issue was submitted? Anyone?)
| License       | MIT

Hi!

Subdirectories & CDN paths are tricky. Suppose you have:

```
// assets/app.js
import './foo.js';
```

When we see that relative import to `foo.js`, we automatically add an entry in the `importmap` - e.g.:

```
"/assets/foo.js": "/assets/foo-abcd1234digest.js"
```

So, when the browser downloads `/assets/app-abcd1234diegest.js`, it follows the `./foo.js` relative path to resolve to `/assets/foo.js`. It then sees that *key* in the `importmap`, and downloads the final file.

However, suppose you're under a subdirectory so that the browser downloads `/subdir/assets/app-abcd1234diegest.js`. In that case, it will resolve the relative import to `/subdir/assets/foo.js`. And so, the *key* in the importmap also needs to have the `/subdir` inside of it.

Additionally, for a CDN, if the browser downloads `https://cdn.com/assets/app.js`, then it will resolve the import to `https://cdn.com/assets/bar.js`. If the key in the importmap is `/assets/bar.js`, that will NOT be used, as this is interpreted as the URL of the site - e.g. `https://myfrontendsite.com/assets/bar.js`. So even in this case, the key needs to be the full `https://cdn.com/assets/bar.js` so that it's used.

I tested this locally on a subdirectory project as well as a CDN, where you set `framework.asset.base_urls` to some `https://cdn.com/` type of URL.

Cheers!

Commits
-------

85c85d3 [AssetMapper] If assets are served from a subdirectory or CDN, also adjust importmap keys

Author: nicolas-grekas

src/Symfony/Component/AssetMapper/ImportMap/ImportMapRenderer.php

@@ -62,6 +62,11 @@ public function render(string|array $entryPoint, array $attributes = []): string
                 continue;
             }
 
+            // for subdirectories or CDNs, the import name needs to be the full URL
+            if (str_starts_with($importName, '/') && $this->assetPackages) {
+                $importName = $this->assetPackages->getUrl(ltrim($importName, '/'));
+            }
+
             $preload = $data['preload'] ?? false;
             if ('css' !== $data['type']) {
                 $importMap[$importName] = $path;

src/Symfony/Component/AssetMapper/Tests/ImportMap/ImportMapRendererTest.php

@@ -54,6 +54,10 @@ public function testBasicRender()
                     'path' => 'https://ga.jspm.io/npm:es-module-shims',
                     'type' => 'js',
                 ],
+                '/assets/implicitly-added' => [
+                    'path' => '/assets/implicitly-added-d1g35t.js',
+                    'type' => 'js',
+                ],
             ]);
 
         $assetPackages = $this->createMock(Packages::class);
@@ -92,6 +96,8 @@ public function testBasicRender()
         $this->assertStringNotContainsString('<link rel="stylesheet" href="/subdirectory/assets/styles/app-nopreload-d1g35t.css">', $html);
         // remote js
         $this->assertStringContainsString('"remote_js": "https://cdn.example.com/assets/remote-d1g35t.js"', $html);
+        // both the key and value are prefixed with the subdirectory
+        $this->assertStringContainsString('"/subdirectory/assets/implicitly-added": "/subdirectory/assets/implicitly-added-d1g35t.js"', $html);
     }
 
     public function testNoPolyfill()