From aef37ad52bc3009e684dae700ae8b9608794c307 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Mon, 22 May 2023 17:42:06 -0700
Subject: [PATCH] Allow using the shim in fast or slow modes

---
 Civi/Core/Container.php        |  2 +-
 Civi/Esm/README.md             |  3 ++-
 Civi/Esm/ShimLoader.php        | 46 ++++++++++++++++++++++++++++++----
 settings/Developer.setting.php |  2 +-
 4 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/Civi/Core/Container.php b/Civi/Core/Container.php
index 82768108dd..a4fb4aa275 100644
--- a/Civi/Core/Container.php
+++ b/Civi/Core/Container.php
@@ -589,7 +589,7 @@ class Container {
   public static function createEsmLoader($container): object {
     $name = \Civi::settings()->get('esm_loader');
     if ($name === 'auto') {
-      $name = 'shim';
+      $name = 'shim-fast';
       \Civi::dispatcher()->dispatch('civi.esm.loader.default', GenericHookEvent::create(['default' => &$name]));
     }
     if ($container->has("esm.loader.$name")) {
diff --git a/Civi/Esm/README.md b/Civi/Esm/README.md
index e19115de34..68048ef49c 100644
--- a/Civi/Esm/README.md
+++ b/Civi/Esm/README.md
@@ -107,7 +107,8 @@ There are a few variations on how to perform these steps. Each variant defines a
 (implemented in `Civi\Esm\XXX`).  For example, these two are currently implemented:
 
 * `esm.loader.browser` (`Civi\Esm\BrowserLoader`): Use pure, browser-based loading with `<script type="module">` and `<script type="importmap">`.
-* `esm.loader.shim` (`Civi\Esm\ShimLoader`): Use [es-module-shims](https://github.com/guybedford/es-module-shims) with `<script type="module-shim">` and `<script type="importmap-shim">`.
+* `esm.loader.shim-fast` (`Civi\Esm\ShimLoader`): Use [es-module-shims](https://github.com/guybedford/es-module-shims) as dynamic polyfill (with preference for browser-based loading).
+* `esm.loader.shim-slow` (`Civi\Esm\ShimLoader`): Use [es-module-shims](https://github.com/guybedford/es-module-shims) with more guarantees of cross-browser functionality.
 
 Depending on the local settings/defaults, the _active loader_ will be available as `Civi::service('esm.loader')`.
 
diff --git a/Civi/Esm/ShimLoader.php b/Civi/Esm/ShimLoader.php
index a7e46d9fa7..f273fd1cd8 100644
--- a/Civi/Esm/ShimLoader.php
+++ b/Civi/Esm/ShimLoader.php
@@ -31,13 +31,49 @@ use Symfony\Component\EventDispatcher\EventSubscriberInterface;
  *
  * @see \Civi\Esm\BrowserLoader
  * @see ./README.md
- *
- * @service esm.loader.shim
  */
 class ShimLoader extends \Civi\Core\Service\AutoService implements EventSubscriberInterface {
 
   use BasicLoaderTrait;
 
+  /**
+   * List of supported script types.
+   *
+   * @var array
+   *   Ex: ['importmap' => 'importmap-shim', 'module' => 'module-shim'];
+   */
+  protected $scriptTypes;
+
+  /**
+   * Load the importmap with `es-module-shims`. Allow it to auto-detect browser support for ESM.
+   *
+   * For browsers that support ESM, this should allow faster execution. However, there may be
+   * small variations or missing features in specific browser implementations.
+   *
+   * @service esm.loader.shim-fast
+   * @return \Civi\Esm\ShimLoader
+   */
+  public static function createFashShim() {
+    $loader = new static();
+    $loader->scriptTypes = ['importmap' => 'importmap', 'module' => 'module'];
+    return $loader;
+  }
+
+  /**
+   * In this flavor, we use `es-module-shims`. We force it to use "shim mode".
+   *
+   * This should provide the most consistent functionality across browser implementations, but
+   * there may be a performance penalty.
+   *
+   * @service esm.loader.shim-slow
+   * @return \Civi\Esm\ShimLoader
+   */
+  public static function createSlowShim() {
+    $loader = new static();
+    $loader->scriptTypes = ['importmap' => 'importmap-shim', 'module' => 'module-shim'];
+    return $loader;
+  }
+
   /**
    * @inheritDoc
    */
@@ -49,21 +85,21 @@ class ShimLoader extends \Civi\Core\Service\AutoService implements EventSubscrib
     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));
+    return $shimHtml . sprintf("<script type='%s'>\n%s\n</script>", htmlentities($this->scriptTypes['importmap']), json_encode($importMap, $flags));
   }
 
   /**
    * @inheritDoc
    */
   protected function renderModuleScript(array $snippet): string {
-    return sprintf("<script type=\"module-shim\">\n%s\n</script>\n", $snippet['script']);
+    return sprintf("<script type=\"%s\">\n%s\n</script>\n", htmlentities($this->scriptTypes['module']), $snippet['script']);
   }
 
   /**
    * @inheritDoc
    */
   protected function renderModuleUrl(array $snippet): string {
-    return sprintf("<script type=\"module-shim\" src=\"%s\">\n</script>\n", $snippet['scriptUrl']);
+    return sprintf("<script type=\"%s\" src=\"%s\">\n</script>\n", htmlentities($this->scriptTypes['module']), $snippet['scriptUrl']);
   }
 
 }
diff --git a/settings/Developer.setting.php b/settings/Developer.setting.php
index 8dea989ea6..74258511de 100644
--- a/settings/Developer.setting.php
+++ b/settings/Developer.setting.php
@@ -120,7 +120,7 @@ return [
     'is_contact' => 0,
     'description' => NULL,
     'help_text' => NULL,
-    'options' => ['auto' => ts('Default (Auto-detect)'), 'browser' => ts('Browser'), 'shim' => ts('es-module-shims')],
+    'options' => ['auto' => ts('Default (Auto-detect)'), 'browser' => ts('Browser'), 'shim-fast' => ts('es-module-shims (fast mode)'), 'shim-slow' => ts('es-module-shims (slow mode)')],
   ],
   'fatalErrorHandler' => [
     'group_name' => 'Developer Preferences',
-- 
2.25.1