Added method of providing options for script install

Accudio · Sep 23, 2022 · a0c5b7d · a0c5b7d
1 parent da6f842
commit a0c5b7d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -290,6 +290,8 @@ AsyncAlpine.init(Alpine, {
 Alpine.prefix('data-x-')
 ```
 
+For a script installation, advanced options can be specified by setting `window.AsyncAlpineOptions` to the object as above.
+
 ### Available Options
 
 | Option Name          | property          | Default | Notes |

diff --git a/dist/async-alpine.script.js b/dist/async-alpine.script.js
diff --git a/src/script.js b/src/script.js
@@ -4,7 +4,10 @@ import { AsyncAlpine } from './core/async-alpine.js';
 
 document.addEventListener('alpine:init', () => {
   window.AsyncAlpine = AsyncAlpine;
-  AsyncAlpine.init(Alpine);
+  AsyncAlpine.init(
+    Alpine,
+    window.AsyncAlpineOptions || {}
+  );
   document.dispatchEvent(new CustomEvent('async-alpine:init'));
   AsyncAlpine.start();
 });
diff --git a/tests/index.html b/tests/index.html
@@ -53,6 +53,7 @@ <h2>Misc</h2>
     <li><a href="/dynamic">Dynamic Import</a></li>
     <li><a href="/mutation">Mutation</a></li>
     <li><a href="/mutation-nested">Nested Mutation</a></li>
+    <li><a href="/script-options">Script Options</a></li>
   </ul>
 </body>
 </html>
diff --git a/tests/script-options.html b/tests/script-options.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="">
+  <title>Script Options - Async Alpine tests</title>
+</head>
+<body>
+  <div
+    ax-load
+    ax-load-src="/components/output.js"
+    x-data="output('loaded')"
+    x-ignore
+  ></div>
+
+  <script>
+    window.AsyncAlpineOptions = {
+      defaultStrategy: 'media (max-width:800px)'
+    }
+  </script>
+  <script src="/dist/async-alpine.script.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
+</body>
+</html>