8000 [AssetMapper] Load es-module-shims only if importmap is not supported · symfony/symfony@c92ed3f · GitHub
[go: up one dir, main page]
Skip to content

Commit c92ed3f

Browse files
nicolas-grekasnicolas-grekas
committed
[AssetMapper] Load es-module-shims only if importmap is not supported
1 parent 2bbe79a commit c92ed3f

File tree

2 files changed

+32
-11
lines changed

2 files changed

+32
-11
lines changed

‎src/Symfony/Component/AssetMapper/ImportMap/ImportMapRenderer.php

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -114,21 +114,37 @@ public function render(string|array $entryPoint, array $attributes = []): string
114114
}
115115

116116
if ($polyfillPath) {
117-
$url = $this->escapeAttributeValue($polyfillPath);
118-
$polyfillAttributes = $scriptAttributes;
117+
$polyfillAttributes = [
118+
'src' => $polyfillPath,
119+
'async' => true,
120+
] + $attributes + $this->scriptAttributes;
119121

120122
// Add security attributes for the default polyfill hosted on jspm.io
121123
if (self::DEFAULT_ES_MODULE_SHIMS_POLYFILL_URL === $polyfillPath) {
122-
$polyfillAttributes = $this->createAttributesString([
124+
$polyfillAttributes = [
123125
'crossorigin' => 'anonymous',
124126
'integrity' => self::DEFAULT_ES_MODULE_SHIMS_POLYFILL_INTEGRITY,
125-
] + $attributes);
127+
] + $polyfillAttributes;
126128
}
127-
128129
$output .= <<<HTML
130+
<script async$scriptAttributes>
131+
if (!HTMLScriptElement.supports('importmap')) (function () {
132+
const script = document.createElement('script');
133+
HTML;
134+
135+
foreach ($polyfillAttributes as $name => $value) {
136+
if (true === $value) {
137+
$value = $name;
138+
}
139+
$name = addslashes(htmlspecialchars($name, \ENT_NOQUOTES));
140+
$value = addslashes(htmlspecialchars($value, \ENT_NOQUOTES));
141+
$output .= "\n script.setAttribute('{$name}', '{$value}');";
142+
}
129143

130-
<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support -->
131-
<script async src="$url"$polyfillAttributes></script>
144+
$output .= "\n".<<<HTML
145+
document.head.appendChild(script);
146+
})();
147+
</script>
132148
HTML;
133149
}
134150

‎src/Symfony/Component/AssetMapper/Tests/ImportMap/ImportMapRendererTest.php

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ public function testBasicRender()
7777

7878
$this->assertStringContainsString('<script type="importmap">', $html);
7979
// polyfill is rendered as a normal script tag
80-
$this->assertStringContainsString('<script async src="https://ga.jspm.io/npm:es-module-shims"></script>', $html);
80+
$this->assertStringContainsString("script.setAttribute('src', 'https://ga.jspm.io/npm:es-module-shims')", $html);
8181
// and is hidden from the import map
8282
$this->assertStringNotContainsString('"es-module-shim"', $html);
8383
$this->assertStringContainsString('import \'app\';', $html);
@@ -120,8 +120,8 @@ public function testDefaultPolyfillUsedIfNotInImportmap()
120120
polyfillImportName: 'es-module-shims',
121121
);
122122
$html = $renderer->render(['app']);
123-
$this->assertStringContainsString('<script async src="https://ga.jspm.io/npm:es-module-shims@', $html);
124-
$this->assertStringContainsString('es-module-shims.js" crossorigin="anonymous" integrity="sha384-', $html);
123+
$this->assertStringContainsString("script.setAttribute('src', 'https://ga.jspm.io/npm:es-module-shims@", $html);
124+
$this->assertStringContainsString("script.setAttribute('crossorigin', 'anonymous');\n script.setAttribute('integrity', 'sha384-", $html);
125125
}
126126

127127
public function testCustomScriptAttributes()
@@ -132,7 +132,12 @@ public function testCustomScriptAttributes()
132132
]);
133133
$html = $renderer->render([]);
134134
$this->assertStringContainsString('<script type="importmap" something data-turbo-track="reload">', $html);
135-
$this->assertStringContainsString('<script async src="https://polyfillUrl.example" something data-turbo-track="reload"></script>', $html);
135+
$this->assertStringContainsString(<<<EOTXT
136+
script.setAttribute('src', 'https://polyfillUrl.example');
137+
script.setAttribute('async', 'async');
138+
script.setAttribute('something', 'something');
139+
script.setAttribute('data-turbo-track', 'reload');
140+
EOTXT, $html);
136141
}
137142

138143
public function testWithEntrypoint()

0 commit comments

Comments
 (0)
0