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

Commit bdd4386

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

File tree

2 files changed

+24
-11
lines changed

2 files changed

+24
-11
lines changed

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

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

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

120119
// Add security attributes for the default polyfill hosted on jspm.io
121120
if (self::DEFAULT_ES_MODULE_SHIMS_POLYFILL_URL === $polyfillPath) {
122-
$polyfillAttributes = $this->createAttributesString([
121+
$polyfillAttributes = [
123122
'crossorigin' => 'anonymous',
124123
'integrity' => self::DEFAULT_ES_MODULE_SHIMS_POLYFILL_INTEGRITY,
125-
] + $attributes);
124+
] + $polyfillAttributes;
126125
}
127-
128126
$output .= <<<HTML
127+
<script async$scriptAttributes>
128+
if (!HTMLScriptElement.supports('importmap')) (function () {
129+
const script = document.createElement('script');
130+
HTML;
131+
132+
foreach ($polyfillAttributes as $name => $value) {
133+
if (true === $value) {
134+
$value = $name;
135+
}
136+
$name = addslashes(htmlspecialchars($name, \ENT_NOQUOTES));
137+
$value = addslashes(htmlspecialchars($value, \ENT_NOQUOTES));
138+
$output .= "\n script.setAttribute('{$name}', '{$value}')";
139+
}
129140

130-
<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support -->
131-
<script async src="$url"$polyfillAttributes></script>
141+
$output .= "\n".<<<HTML
142+
document.head.appendChild(script);
143+
})();
144+
</script>
132145
HTML;
133146
}
134147

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

Lines changed: 4 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,7 @@ 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("script.setAttribute('src', 'https://polyfillUrl.example')\n script.setAttribute('async', 'async')\n script.setAttribute('something', 'something')", $html);
136136
}
137137

138138
public function testWithEntrypoint()

0 commit comments

Comments
 (0)
0