[AssetMapper] Load es-module-shims only if importmap is not supported #58121
Conversation
src/Symfony/Component/AssetMapper/Tests/ImportMap/ImportMapRendererTest.php
Show resolved
Hide resolved
bdd4386 to
c92ed3f
Compare
|
I'd suggest to create two separate methods if ($polyfillPath) {
$polyfillAttributes = array_merge([
'src' => $polyfillPath,
'async' => true,
], $attributes, $this->scriptAttributes);
// Add security attributes if using the default polyfill
if ($polyfillPath === self::DEFAULT_ES_MODULE_SHIMS_POLYFILL_URL) {
$polyfillAttributes = array_merge([
'crossorigin' => 'anonymous',
'integrity' => self::DEFAULT_ES_MODULE_SHIMS_POLYFILL_INTEGRITY,
], $polyfillAttributes);
}
$output .= '<script async' . $this->formatAttributes($scriptAttributes) . '>
if (!HTMLScriptElement.supports("importmap")) {
(function() {
const script = document.createElement("script");
' . $this->generateAttributeScript($polyfillAttributes) . '
document.head.appendChild(script);
})();
}
</script>';
}The methods: private function formatAttributes(array $attributes): string
{
$formatted = '';
foreach ($attributes as $name => $value) {
$formatted .= ' ' . htmlspecialchars($name, \ENT_NOQUOTES) . '="' . htmlspecialchars($value, \ENT_NOQUOTES) . '"';
}
return $formatted;
}
private function generateAttributeScript(array $attributes): string
{
$script = '';
foreach ($attributes as $name => $value) {
$name = addslashes(htmlspecialchars($name, \ENT_NOQUOTES));
$value = addslashes(htmlspecialchars($value, \ENT_NOQUOTES));
$script .= "\n script.setAttribute('{$name}', '{$value}');";
}
return $script;
}Improve code readability, maintainability, and reusability |
|
I would also allow developers to configure whether es-module-shims should be loaded, providing more flexibility |
603cbe3 to
0461579
Compare
Factorized: I leveraged the already existing method createAttributeString
Not sure this would provide any benefits. Options are complexity. Anyway, that's a discussion for another PR/ issue. |
0461579 to
32e28d0
Compare
| <!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support --> | ||
| <script async src="$url"$polyfillAttributes></script> | ||
| <script async$scriptAttributes> | ||
| if (!HTMLScriptElement.supports || !HTMLScriptElement.supports('importmap')) (function () { |
There was a problem hiding this comment.
I confirmed this works using Browerstack 
There was a problem hiding this comment.
Soon in Nicolas' bio "GPT+BrowserStack powered JS dev" 😁
Let's not load the polyfill if the browser already supports importmaps