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()