[AssetMapper] Load es-module-shims only if importmap is not supported

nicolas-grekas · nicolas-grekas · commit c92ed3f4aa20 · 2024-08-29T16:17:00.000+02:00
diff --git a/src/Symfony/Component/AssetMapper/ImportMap/ImportMapRenderer.php b/src/Symfony/Component/AssetMapper/ImportMap/ImportMapRenderer.php
@@ -114,21 +114,37 @@ public function render(string|array $entryPoint, array $attributes = []): string
         }
 
         if ($polyfillPath) {
-            $url = $this->escapeAttributeValue($polyfillPath);
-            $polyfillAttributes = $scriptAttributes;
+            $polyfillAttributes = [
+                'src' => $polyfillPath,
+                'async' => true,
+            ] + $attributes + $this->scriptAttributes;
 
             // Add security attributes for the default polyfill hosted on jspm.io
             if (self::DEFAULT_ES_MODULE_SHIMS_POLYFILL_URL === $polyfillPath) {
-                $polyfillAttributes = $this->createAttributesString([
+                $polyfillAttributes = [
                     'crossorigin' => 'anonymous',
                     'integrity' => self::DEFAULT_ES_MODULE_SHIMS_POLYFILL_INTEGRITY,
-                ] + $attributes);
+                ] + $polyfillAttributes;
             }
-
             $output .= <<<HTML
+                <script async$scriptAttributes>
+                if (!HTMLScriptElement.supports('importmap')) (function () {
+                    const script = document.createElement('script');
+                HTML;
+
+            foreach ($polyfillAttributes as $name => $value) {
+                if (true === $value) {
+                    $value = $name;
+                }
+                $name = addslashes(htmlspecialchars($name, \ENT_NOQUOTES));
+                $value = addslashes(htmlspecialchars($value, \ENT_NOQUOTES));
+                $output .= "\n    script.setAttribute('{$name}', '{$value}');";
+            }
 
-                <!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support -->
-                <script async src="$url"$polyfillAttributes></script>
+            $output .= "\n".<<<HTML
+                    document.head.appendChild(script);
+                })();
+                </script>
                 HTML;
         }
 
diff --git a/src/Symfony/Component/AssetMapper/Tests/ImportMap/ImportMapRendererTest.php b/src/Symfony/Component/AssetMapper/Tests/ImportMap/ImportMapRendererTest.php
@@ -77,7 +77,7 @@ public function testBasicRender()
 
         $this->assertStringContainsString('<script type="importmap">', $html);
         // polyfill is rendered as a normal script tag
-        $this->assertStringContainsString('<script async src="https://ga.jspm.io/npm:es-module-shims"></script>', $html);
+        $this->assertStringContainsString("script.setAttribute('src', 'https://ga.jspm.io/npm:es-module-shims')", $html);
         // and is hidden from the import map
         $this->assertStringNotContainsString('"es-module-shim"', $html);
         $this->assertStringContainsString('import \'app\';', $html);
@@ -120,8 +120,8 @@ public function testDefaultPolyfillUsedIfNotInImportmap()
             polyfillImportName: 'es-module-shims',
         );
         $html = $renderer->render(['app']);
-        $this->assertStringContainsString('<script async src="https://ga.jspm.io/npm:es-module-shims@', $html);
-        $this->assertStringContainsString('es-module-shims.js" crossorigin="anonymous" integrity="sha384-', $html);
+        $this->assertStringContainsString("script.setAttribute('src', 'https://ga.jspm.io/npm:es-module-shims@", $html);
+        $this->assertStringContainsString("script.setAttribute('crossorigin', 'anonymous');\n    script.setAttribute('integrity', 'sha384-", $html);
     }
 
     public function testCustomScriptAttributes()
@@ -132,7 +132,12 @@ public function testCustomScriptAttributes()
         ]);
         $html = $renderer->render([]);
         $this->assertStringContainsString('<script type="importmap" something data-turbo-track="reload">', $html);
-        $this->assertStringContainsString('<script async src="https://polyfillUrl.example" something data-turbo-track="reload"></script>', $html);
+        $this->assertStringContainsString(<<<EOTXT
+            script.setAttribute('src', 'https://polyfillUrl.example');
+            script.setAttribute('async', 'async');
+            script.setAttribute('something', 'something');
+            script.setAttribute('data-turbo-track', 'reload');
+        EOTXT, $html);
     }
 
     public function testWithEntrypoint()
