feature #61133 [AssetMapper] Add support for loading JSON using import statements (nicolas-grekas)

fabpot · fabpot · commit c7493bb0101e · 2025-07-26T14:22:58.000+02:00
This PR was merged into the 7.4 branch. Discussion ---------- [AssetMapper] Add support for loading JSON using import statements | Q | A | ------------- | --- | Branch? | 7.4 | Bug fix? | no | New feature? | no | Deprecations? | no | Issues | - | License | MIT This is inspired by https://web.dev/blog/json-imports-baseline-newly-available Modern browsers [support loading JSONs](https://caniuse.com/mdn-javascript_statements_import_import_attributes_type_json) via the `import data from './foo.json' with {type: 'json'}` syntax. While this has been promoted as a new baseline, that's still not widely supported. This PR proposes to add support for a more portable alternative using `import jsonPromise from './foo.json'` instead, with some server-side assisted loader. On the client-side, one could then use the imported data by awaiting it first (the import returns a Promise): `json = await jsonPromise` Note that we already support importing css via import statements. Native support for `import './foo.css' with {type: 'css'}` exists, but that's [even less available](https://caniuse.com/mdn-javascript_statements_import_import_attributes_type_css). Commits ------- 990a44c [AssetMapper] Add support for loading JSON using import statements
diff --git a/src/Symfony/Component/AssetMapper/CHANGELOG.md b/src/Symfony/Component/AssetMapper/CHANGELOG.md
@@ -1,6 +1,11 @@
 CHANGELOG
 =========
 
+7.4
+---
+
+ * Add support for loading JSON using import statements
+
 7.3
 ---
 
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,
@@ -48,7 +51,7 @@ public function render(string|array $entryPoint, array $attributes = []): string
         $importMapData = $this->importMapGenerator->getImportMapData($entryPoint);
         $importMap = [];
         $modulePreloads = [];
-        $cssLinks = [];
+        $webLinks = [];
         $polyfillPath = null;
         foreach ($importMapData as $importName => $data) {
             $path = $data['path'];
@@ -70,29 +73,34 @@ 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)));
+                if ($preload) {
+                    $webLinks[$path] = 'fetch';
+                }
+            } elseif ('css' !== $data['type']) {
                 $importMap[$importName] = $path;
                 if ($preload) {
                     $modulePreloads[] = $path;
                 }
             } elseif ($preload) {
-                $cssLinks[] = $path;
+                $webLinks[$path] = 'style';
                 // 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)));
             }
         }
 
         $output = '';
-        foreach ($cssLinks as $url) {
-            $url = $this->escapeAttributeValue($url);
-
-            $output .= "\n<link rel=\"stylesheet\" href=\"$url\">";
+        foreach ($webLinks as $url => $as) {
+            if ('style' === $as) {
+                $output .= "\n<link rel=\"stylesheet\" href=\"{$this->escapeAttributeValue($url)}\">";
+            }
         }
 
         if (class_exists(AddLinkHeaderListener::class) && $request = $this->requestStack?->getCurrentRequest()) {
-            $this->addWebLinkPreloads($request, $cssLinks);
+            $this->addWebLinkPreloads($request, $webLinks);
         }
 
         $scriptAttributes = $attributes || $this->scriptAttributes ? ' '.$this->createAttributesString($attributes) : '';
@@ -186,12 +194,17 @@ private function createAttributesString(array $attributes, string $pattern = '%s
         return $attributeString;
     }
 
-    private function addWebLinkPreloads(Request $request, array $cssLinks): void
+    private function addWebLinkPreloads(Request $request, array $links): void
     {
-        $cssPreloadLinks = array_map(fn ($url) => (new Link('preload', $url))->withAttribute('as', 'style'), $cssLinks);
+        foreach ($links as $url => $as) {
+            $links[$url] = (new Link('preload', $url))->withAttribute('as', $as);
+            if ('fetch' === $as) {
+                $links[$url] = $links[$url]->withAttribute('crossorigin', 'anonymous');
+            }
+        }
 
         if (null === $linkProvider = $request->attributes->get('_links')) {
-            $request->attributes->set('_links', new GenericLinkProvider($cssPreloadLinks));
+            $request->attributes->set('_links', new GenericLinkProvider($links));
 
             return;
         }
@@ -200,7 +213,7 @@ private function addWebLinkPreloads(Request $request, array $cssLinks): void
             return;
         }
 
-        foreach ($cssPreloadLinks as $link) {
+        foreach ($links as $link) {
             $linkProvider = $linkProvider->withLink($link);
         }
 
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`	`}`