BasicLoaderTrait
The BasicLoaderTrait is a building-block for BrowserLoader and ShimLoader.
These are similar -- both need to get a list of modules and format the list as HTML markup, e.g.
<script type="importmap"> { "import": {"civicrm/": "https://example.com/sites/all/modules/civicrm"}} </script> <script type="module"> import { TableWidget } from "civicrm/TableWidget.js"; const table = new TableWidget(); </script>However, the HTML formatting is slightly different. Observe how BrowserLoader
and ShimLoader both BasicLoaderTrait and then implements methods like renderModuleScript().
Tags
Table of Contents
Properties
- $importMap : ImportMap
- $required : bool
- Do we need to send an import-map for the current page-view?
Methods
- getSubscribedEvents() : array<string|int, mixed>
- onRegionRender() : void
- Listen to 'civi.region.render[html-header]'.
- onUseModule() : void
- Receive a notification that an ESM is being used.
- renderModule() : string
- buildImportMap() : array<string|int, mixed>
- renderImportMap() : string
- Format the list of imports as an HTML tag.
- renderModuleScript() : string
- renderModuleUrl() : string
Properties
$importMap
protected
ImportMap
$importMap
Tags
$required
Do we need to send an import-map for the current page-view?
protected
bool
$required
= FALSE
For the moment, we figure this dynamically -- based on whether any "esm" scripts have been added. During the early stages (where ESMs aren't in widespread use), this seems safer. However, in the future, we might find some kind of race (e.g. where the system renders "
" before it decides on a specific "<script type=module"> to load. If that edge-case happens, then it's probably fair to switch this default ($required=TRUE).
Methods
getSubscribedEvents()
public
static getSubscribedEvents() : array<string|int, mixed>
Return values
array<string|int, mixed>onRegionRender()
Listen to 'civi.region.render[html-header]'.
public
onRegionRender(CRM_Core_Region $region) : void
If there are any active "module"s on this page, then output the "import-map".
Parameters
- $region : CRM_Core_Region
onUseModule()
Receive a notification that an ESM is being used.
public
onUseModule(array<string|int, mixed> &$snippet) : void
Parameters
- $snippet : array<string|int, mixed>
-
The module resource being rendered, as per "CollectionInterface::add()". Ex: ['type' => 'scriptUrl', 'scriptUrl' => 'https://example.com/foo.js', 'esm' => TRUE, 'region' => 'page-footer']
Tags
renderModule()
public
renderModule(array<string|int, mixed> $snippet) : string
Parameters
- $snippet : array<string|int, mixed>
-
The module resource being rendered, as per "CollectionInterface::add()". Ex: ['type' => 'scriptUrl', 'scriptUrl' => 'https://example.com/foo.js', 'esm' => TRUE]
Tags
Return values
string —HTML
buildImportMap()
protected
buildImportMap() : array<string|int, mixed>
Tags
Return values
array<string|int, mixed> —The import-map, as defined by the browser-vendor or browser-based polyfill. For BasicLoaderTrait, we do a straight-through mapping (read extension-names, generate extension-URLs).
renderImportMap()
Format the list of imports as an HTML tag.
protected
abstract renderImportMap(array<string|int, mixed> $importMap) : string
Parameters
- $importMap : array<string|int, mixed>
-
Ex: ['imports' => ['square/' => 'https://example.com/square/']]
Return values
string —Ex: '<script type="importmap">{"imports": ...}</script>'
renderModuleScript()
protected
abstract renderModuleScript(array<string|int, mixed> $snippet) : string
Parameters
- $snippet : array<string|int, mixed>
-
The module resource being rendered, as per "CollectionInterface::add()". Ex: ['type' => 'scriptUrl', 'scriptUrl' => 'https://example.com/foo.js', 'esm' => TRUE]
Tags
Return values
string —HTML
renderModuleUrl()
protected
abstract renderModuleUrl(array<string|int, mixed> $snippet) : string
Parameters
- $snippet : array<string|int, mixed>
-
The module resource being rendered, as per "CollectionInterface::add()". Ex: ['type' => 'scriptUrl', 'scriptUrl' => 'https://example.com/foo.js', 'esm' => TRUE]
Tags
Return values
string —HTML