Use es module shims in docs for Safari/Firefox compatibility (#105)

* add es module shims * Enable json modules with shim * Set options before shims * Remove comment from importmap json
excid3 · Oct 4, 2021 · 7727f3a · 7727f3a
1 parent fc99b33
commit 7727f3a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/docs/alert.html b/docs/alert.html
@@ -5,6 +5,10 @@
     <title>Tailwind Stimulus Components</title>
     <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
     <link href="https://unpkg.com/@tailwindcss/[email protected]/dist/forms.min.css" rel="stylesheet">
+    <script>
+      window.esmsInitOptions = { enable: ['css-modules', 'json-modules'] }
+    </script>
+    <script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
   <body>
     <div class="container mx-auto p-8">
       <h1 class="text-3xl font-semibold mb-2">Tailwind Stimulus Components Alert Examples</h1>
@@ -62,11 +66,13 @@ <h1 class="text-3xl font-semibold mb-2">Tailwind Stimulus Components Alert Examp
         "imports": {
           "@hotwired/stimulus": "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js",
           "tailwindcss-stimulus-components": "https://unpkg.com/tailwindcss-stimulus-components/dist/tailwindcss-stimulus-components.modern.js"
-          // Uncomment to use local package with "npx serve"
-          //"tailwindcss-stimulus-components": "../dist/tailwindcss-stimulus-components.modern.js"
         }
       }
     </script>
+    <!--
+      Use the following importmap for local package with "npx serve"
+      "tailwindcss-stimulus-components": "../dist/tailwindcss-stimulus-components.modern.js"
+    -->
 
     <script type="module">
       import { Application } from "@hotwired/stimulus"

diff --git a/docs/index.html b/docs/index.html
@@ -5,7 +5,11 @@
     <title>Tailwind Stimulus Components</title>
     <link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
     <link href="https://unpkg.com/@tailwindcss/forms/dist/forms.min.css" rel="stylesheet">
-  </head>
+    <script>
+      window.esmsInitOptions = { enable: ['css-modules', 'json-modules'] }
+    </script>
+    <script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
+</head>
   <body>
     <div class="container mx-auto p-8"
          data-controller="slideover"
@@ -290,11 +294,13 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Color Picker and Preview</
         "imports": {
           "@hotwired/stimulus": "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js",
           "tailwindcss-stimulus-components": "https://unpkg.com/tailwindcss-stimulus-components/dist/tailwindcss-stimulus-components.modern.js"
-          // Uncomment to use local package with "npx serve"
-          //"tailwindcss-stimulus-components": "../dist/tailwindcss-stimulus-components.modern.js"
         }
       }
     </script>
+    <!--
+      Use the following importmap for local package with "npx serve"
+      "tailwindcss-stimulus-components": "../dist/tailwindcss-stimulus-components.modern.js"
+    -->
 
     <script type="module">
       import { Application } from "@hotwired/stimulus"