[AssetMapper] Add support for loading JSON using import statements

nicolas-grekas · nicolas-grekas · commit 12eba70c4097 · 2025-07-16T10:14:32.000+02:00
diff --git a/src/Symfony/Component/AssetMapper/Command/DebugAssetMapperCommand.php b/src/Symfony/Component/AssetMapper/Command/DebugAssetMapperCommand.php
@@ -43,7 +43,7 @@ protected function configure(): void
     {
         $this
             ->addArgument('name', InputArgument::OPTIONAL, 'An asset name (or a path) to search for (e.g. "app")')
-            ->addOption('ext', null, InputOption::VALUE_REQUIRED, 'Filter assets by extension (e.g. "css")', null, ['js', 'css', 'png'])
+            ->addOption('ext', null, InputOption::VALUE_REQUIRED, 'Filter assets by extension (e.g. "css")', null, ['js', 'css', 'json'])
             ->addOption('full', null, null, 'Whether to show the full paths')
             ->addOption('vendor', null, InputOption::VALUE_NEGATABLE, 'Only show assets from vendor packages')
             ->setHelp(<<<'EOT'
diff --git a/src/Symfony/Component/AssetMapper/ImportMap/ImportMapConfigReader.php b/src/Symfony/Component/AssetMapper/ImportMap/ImportMapConfigReader.php
@@ -49,7 +49,7 @@ public function getEntries(): ImportMapEntries
                 throw new \InvalidArgumentException(\sprintf('The following keys are not valid for the importmap entry "%s": "%s". Valid keys are: "%s".', $importName, implode('", "', $invalidKeys), implode('", "', $validKeys)));
             }
 
-            $type = isset($data['type']) ? ImportMapType::tryFrom($data['type']) : ImportMapType::JS;
+            $type = ImportMapType::tryFrom($data['type'] ?? 'js') ?? ImportMapType::JS;
             $isEntrypoint = $data['entrypoint'] ?? false;
 
             if (isset($data['path'])) {
diff --git a/src/Symfony/Component/AssetMapper/ImportMap/ImportMapManager.php b/src/Symfony/Component/AssetMapper/ImportMap/ImportMapManager.php
@@ -162,7 +162,7 @@ public function requirePackages(array $packagesToRequire, ImportMapEntries $impo
 
             $newEntry = ImportMapEntry::createLocal(
                 $requireOptions->importName,
-                self::getImportMapTypeFromFilename($requireOptions->path),
+                ImportMapType::tryFrom(pathinfo($path, \PATHINFO_EXTENSION)) ?? ImportMapType::JS,
                 $path,
                 $requireOptions->entrypoint,
             );
@@ -200,11 +200,6 @@ private function cleanupPackageFiles(ImportMapEntry $entry): void
         }
     }
 
-    private static function getImportMapTypeFromFilename(string $path): ImportMapType
-    {
-        return str_ends_with($path, '.css') ? ImportMapType::CSS : ImportMapType::JS;
-    }
-
     /**
      * Finds the MappedAsset allowing for a "logical path", relative or absolute filesystem path.
      */
diff --git a/src/Symfony/Component/AssetMapper/ImportMap/ImportMapRenderer.php b/src/Symfony/Component/AssetMapper/ImportMap/ImportMapRenderer.php
@@ -31,6 +31,9 @@ class ImportMapRenderer
     private const DEFAULT_ES_MODULE_SHIMS_POLYFILL_URL = 'https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js';
     private const DEFAULT_ES_MODULE_SHIMS_POLYFILL_INTEGRITY = 'sha384-ie1x72Xck445i0j4SlNJ5W5iGeL3Dpa0zD48MZopgWsjNB/lt60SuG1iduZGNnJn';
 
+    private const LOADER_JSON = "export default (async()=>await(await fetch('%s')).json())()";
+    private const LOADER_CSS = "document.head.appendChild(Object.assign(document.createElement('link'),{rel:'stylesheet',href:'%s'}))";
+
     public function __construct(
         private readonly ImportMapGenerator $importMapGenerator,
         private readonly ?Packages $assetPackages = null,
@@ -70,7 +73,9 @@ public function render(string|array $entryPoint, array $attributes = []): string
             }
 
             $preload = $data['preload'] ?? false;
-            if ('css' !== $data['type']) {
+            if ('json' === $data['type']) {
+                $importMap[$importName] = 'data:application/javascript,'.str_replace('%', '%25', \sprintf(self::LOADER_JSON, addslashes($path)));
+            } elseif ('css' !== $data['type']) {
                 $importMap[$importName] = $path;
                 if ($preload) {
                     $modulePreloads[] = $path;
@@ -80,7 +85,7 @@ public function render(string|array $entryPoint, array $attributes = []): string
                 // importmap entry is a noop
                 $importMap[$importName] = 'data:application/javascript,';
             } else {
-                $importMap[$importName] = 'data:application/javascript,'.rawurlencode(\sprintf('document.head.appendChild(Object.assign(document.createElement("link"),{rel:"stylesheet",href:"%s"}))', addslashes($path)));
+                $importMap[$importName] = 'data:application/javascript,'.str_replace('%', '%25', \sprintf(self::LOADER_CSS, addslashes($path)));
             }
         }
 
diff --git a/src/Symfony/Component/AssetMapper/ImportMap/ImportMapType.php b/src/Symfony/Component/AssetMapper/ImportMap/ImportMapType.php
@@ -15,4 +15,5 @@ enum ImportMapType: string
 {
     case JS = 'js';
     case CSS = 'css';
+    case JSON = 'json';
 }
diff --git a/src/Symfony/Component/AssetMapper/Tests/ImportMap/ImportMapRendererTest.php b/src/Symfony/Component/AssetMapper/Tests/ImportMap/ImportMapRendererTest.php
@@ -92,7 +92,7 @@ public function testBasicRender()
         $this->assertStringContainsString('"app_css_preload": "data:application/javascript,', $html);
         $this->assertStringContainsString('<link rel="stylesheet" href="/subdirectory/assets/styles/app-preload-d1g35t.css">', $html);
         // non-preloaded CSS file
-        $this->assertStringContainsString('"app_css_no_preload": "data:application/javascript,document.head.appendChild%28Object.assign%28document.createElement%28%22link%22%29%2C%7Brel%3A%22stylesheet%22%2Chref%3A%22%2Fsubdirectory%2Fassets%2Fstyles%2Fapp-nopreload-d1g35t.css%22%7D', $html);
+        $this->assertStringContainsString('"app_css_no_preload": "data:application/javascript,document.head.appendChild(Object.assign(document.createElement(\'link\'),{rel:\'stylesheet\',href:\'/subdirectory/assets/styles/app-nopreload-d1g35t.css\'}))', $html);
         $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);

Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ protected function configure(): void`
`43`	`43`	`{`
`44`	`44`	`$this`
`45`	`45`	`->addArgument('name', InputArgument::OPTIONAL, 'An asset name (or a path) to search for (e.g. "app")')`
`46`		`- ->addOption('ext', null, InputOption::VALUE_REQUIRED, 'Filter assets by extension (e.g. "css")', null, ['js', 'css', 'png'])`
	`46`	`+ ->addOption('ext', null, InputOption::VALUE_REQUIRED, 'Filter assets by extension (e.g. "css")', null, ['js', 'css', 'json'])`
`47`	`47`	`->addOption('full', null, null, 'Whether to show the full paths')`
`48`	`48`	`->addOption('vendor', null, InputOption::VALUE_NEGATABLE, 'Only show assets from vendor packages')`
`49`	`49`	`->setHelp(<<<'EOT'`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ public function getEntries(): ImportMapEntries`
`49`	`49`	`throw new \InvalidArgumentException(\sprintf('The following keys are not valid for the importmap entry "%s": "%s". Valid keys are: "%s".', $importName, implode('", "', $invalidKeys), implode('", "', $validKeys)));`
`50`	`50`	`}`
`51`	`51`
`52`		`- $type = isset($data['type']) ? ImportMapType::tryFrom($data['type']) : ImportMapType::JS;`
	`52`	`+ $type = ImportMapType::tryFrom($data['type'] ?? 'js') ?? ImportMapType::JS;`
`53`	`53`	`$isEntrypoint = $data['entrypoint'] ?? false;`
`54`	`54`
`55`	`55`	`if (isset($data['path'])) {`
Original file line number	Diff line number	Diff line change
`@@ -15,4 +15,5 @@ enum ImportMapType: string`
`15`	`15`	`{`
`16`	`16`	`case JS = 'js';`
`17`	`17`	`case CSS = 'css';`
	`18`	`+ case JSON = 'json';`
`18`	`19`	`}`