In world with JavaScript bare module specifiers there's no good way to add them to Drupal.
We heavily leverage Drupal's library system to attach the needed JS if a web component is added to a page. This currently looks like:
Somewhere on the page:
<rh-cta><a href="#">Click me</a></rh-cta>
The Drupal library is attached to the bottom of the page:
<script src="/path/to/rhds/elements/rh-cta/rh-cta.js" type="module"></script>
Which works fine. However there's no good way to switch the plain type module script to using bare module specifiers.
Ideally we'd use an import map to point a bare module specifier at the correct directory of elements.
<script type="importmap">
{
"imports": {
"@rhds/elements/":"/path/to/rhds/elements/"
}
}
</script>
Then any page that attached the library would get something like this
<script type="module">
import "@rhds/elements/rh-cta/rh-cta.js";
</script>
While you could technically add a NEW entry point file that contains the import, that would add an additional network request and not great for performance. Yes you could preload the import but then we're getting adding complexity.
I propose adding a new JS asset type:
This would look something like:
// Defaults for each SCRIPT element.
$element_defaults = [
'#type' => 'html_tag',
'#tag' => 'script',
'#value' => '',
];
// Loop through all JS assets.
foreach ($js_assets as $js_asset) {
$element = $element_defaults;
// Element properties that depend on item type.
switch ($js_asset['type']) {
case 'setting':
// hidden for this example.
break;
// Support inline scripts with type module attribute.
case 'inline_module':
$element['#attributes'] = [
'type' => 'module',
];
$element['#value'] = $js_asset['data'];
break;
This would allow us to either manually add it, or use a hook_js_alter() to modify existing library files and switch them over to bare imports.
Active
10.4 ✨
asset library system