From 724303ef6612b72d65794cc9f612f31dd233c7eb Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Mon, 15 May 2023 14:19:05 -0700
Subject: [PATCH] (dev/core#4279) Use esm-module-shims

---
 Civi/Core/Container.php |  3 +-
 Civi/Esm/ShimLoader.php | 81 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 Civi/Esm/ShimLoader.php

diff --git a/Civi/Core/Container.php b/Civi/Core/Container.php
index b7907b99db..e92ab7ebf0 100644
--- a/Civi/Core/Container.php
+++ b/Civi/Core/Container.php
@@ -392,7 +392,8 @@ class Container {
       [new Reference('action_object_provider')]
     );
 
-    $container->setAlias('esm.loader', 'esm.loader.browser')->setPublic(TRUE);
+    // $container->setAlias('esm.loader', 'esm.loader.browser')->setPublic(TRUE);
+    $container->setAlias('esm.loader', 'esm.loader.shim')->setPublic(TRUE);
 
     \CRM_Utils_Hook::container($container);
 
diff --git a/Civi/Esm/ShimLoader.php b/Civi/Esm/ShimLoader.php
new file mode 100644
index 0000000000..49393e90d1
--- /dev/null
+++ b/Civi/Esm/ShimLoader.php
@@ -0,0 +1,81 @@
+<?php
+
+namespace Civi\Esm;
+
+use Civi;
+
+/**
+ * The ShimLoader leverages `es-module-shims` for loading ECMAScript Modules (ESM's).
+ *
+ * @link https://github.com/guybedford/es-module-shims
+ *
+ * ShimLoader is very similar to BrowserLoader. It adds more backward compatibility
+ * (e.g. Safari 10 vs 16; Firefox 60 vs 108) and more features (e.g. "JSON Modules"), but
+ * it also incurs more runtime overhead.
+ *
+ * ShimLoader works by:
+ *
+ * 1. Adding the extra `es-module-shims.js` file.
+ * 2. Swapping HTML tags to prefer shim-loading.
+ *     -<script type='importmap'>
+ *     +<script type='importmap-shim'>
+ *     -<script type='module'>
+ *     +<script type='module-shim'>
+ *
+ * The current implementation prefers the shim-based loader regardless of the extent of browser
+ * support. This ensures consistent functionality on all browsers, but it also makes the overhead
+ * mandatory.
+ *
+ * @service esm.loader.shim
+ */
+class ShimLoader extends BrowserLoader {
+
+  /**
+   * Format the list of imports as an HTML tag.
+   *
+   * @param array $importMap
+   *   Ex: ['imports' => ['square/' => 'https://example.com/square/']]
+   * @return string
+   *   Ex: '<script type="importmap">{"imports": ...}</script>'
+   */
+  protected function renderImportMap(array $importMap): string {
+    if (!$this->enableMap || empty($importMap)) {
+      return '';
+    }
+
+    $shimUrl = Civi::paths()->getUrl('[civicrm.bower]/es-module-shims/dist/es-module-shims.js');
+    $shimHtml = sprintf("<script async src='%s'></script>\n", htmlentities($shimUrl));
+
+    $flags = JSON_UNESCAPED_SLASHES;
+    if (Civi::settings()->get('debug_enabled')) {
+      $flags |= JSON_PRETTY_PRINT;
+    }
+    return $shimHtml . sprintf("<script type='importmap-shim'>\n%s\n</script>", json_encode($importMap, $flags));
+  }
+
+  /**
+   * @param array $snippet
+   *   The module resource being rendered, as per "CollectionInterface::add()".
+   *   Ex: ['type' => 'scriptUrl', 'scriptUrl' => 'https://example.com/foo.js', 'esm' => TRUE]
+   * @return string
+   *   HTML
+   * @see \CRM_Core_Resources_CollectionInterface::add()
+   */
+  public function renderModule(array $snippet): string {
+    if (!$this->enableModules) {
+      return '';
+    }
+
+    switch ($snippet['type']) {
+      case 'script':
+        return sprintf("<script type=\"module-shim\">\n%s\n</script>\n", $snippet['script']);
+
+      case 'scriptUrl':
+        return sprintf("<script type=\"module-shim\" src=\"%s\">\n</script>\n", $snippet['scriptUrl']);
+
+      default:
+        return parent::renderModule($snippet);
+    }
+  }
+
+}
-- 
2.25.1