Check Alpine.js is loaded when morph is called to deal with it being loaded with defer.

Author: adamghill

django_unicorn/static/unicorn/js/morphers/alpine.js

@@ -1,18 +1,18 @@
 export class AlpineMorpher {
   constructor(options) {
-    // Check if window has Alpine and Alpine Morph
-    if (!window.Alpine || !window.Alpine.morph) {
-      throw Error(`
-Alpine morpher requires Alpine to be loaded. Add Alpine and Alpine Morph to your page.
-See https://www.django-unicorn.com/docs/custom-morphers/#alpine for more information.
-`);
-    }
-
     this.options = options;
   }
 
   morph(dom, htmlElement) {
     if (htmlElement) {
+      // Check if window has Alpine and Alpine Morph
+      if (!window.Alpine || !window.Alpine.morph) {
+        throw Error(`
+  Alpine.js and the Alpine morph plugin can not be found.
+  See https://www.django-unicorn.com/docs/custom-morphers/#alpine for more information.
+  `);
+      }
+
       return window.Alpine.morph(dom, htmlElement, this.getOptions());
     }
   }

django_unicorn/static/unicorn/js/unicorn.min.js

@@ -4,6 +4,8 @@
 
 {% if MINIFIED %}
 <script src="{% static 'unicorn/js/unicorn.min.js' %}"></script>
+{% comment %} <script src="../static/unicorn/js/unicorn.min.js"></script> {% endcomment %}
+
 <script>
   const url = "{% url 'django_unicorn:message' %}";
   const morpherSettings = JSON.parse(document.getElementById("unicorn:settings:morpher").textContent);

django_unicorn/templates/unicorn/scripts.html

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.56.1
+
+- Handle Alpine.js being loaded with defer.
+
 ## 0.56.0
 
 - Add support for using both Alpine.js and `Unicorn` together in a component ([#597](https://github.com/adamghill/django-unicorn/pull/597) by [imankulov](https://github.com/imankulov)).

docs/source/changelog.md

@@ -25,6 +25,7 @@
 
   <script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
   <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
+
   {% unicorn_scripts %}
 </head>
 

example/www/templates/www/base.html

@@ -1,5 +1,5 @@
 {
-    "version": "0.56.0",
+    "version": "0.56.1",
     "name": "django-unicorn",
     "scripts": {
         "build": "npx rollup -c",

package-lock.json

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "django-unicorn"
-version = "0.56.0"
+version = "0.56.1"
 description = "A magical full-stack framework for Django."
 authors = ["Adam Hill <[email protected]>"]
 license = "MIT"
@@ -144,6 +144,7 @@ tp = { cmd = "nox -r", help = "Run the entire Python test suite with nox" }
 tj = { cmd = "npm run-script test", help = "Run the JavaScript unit tests" }
 ta = ["tp", "tj"]
 jb = { cmd = "npm run build", help = "Build the JavaScript library" }
+ji = { cmd = "npm install", help = "Install JS" }
 t = { cmd = "pytest -m 'not slow'", help = "Run Python unit tests" }
 tb = { cmd = "pytest tests/benchmarks/ --benchmark-autosave --benchmark-only", help = "Run Python unit tests with benchmarks" }
 tbc = { cmd = "pytest tests/benchmarks/ --benchmark-only --benchmark-compare", help = "Run Python unit tests with compared benchmarks" }
@@ -155,7 +156,7 @@ rf = { cmd = "ruff .", help = "Run ruff" }
 tm = ["b", "rf", "tc", "my"]
 sa = { cmd = "sphinx-autobuild -W docs/source docs/build", help = "Sphinx autobuild" }
 sb = { cmd = "sphinx-build -W docs/source docs/build", help = "Build documentation" }
-build = ["b", "rf", "tc", "tj", "jb", "sb"]
+build = ["b", "rf", "tc", "ji", "tj", "jb", "sb"]
 publish = { shell = "poetry publish --build -r test && poetry publish" }
 
 [build-system]