From 816971b1c7e7904b46b34afac815e4f8d347a2d4 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Thu, 18 Apr 2024 15:10:15 -0400
Subject: [PATCH] Add missing plugin warnings (#4158)

---
 packages/alpinejs/src/directives.js |  4 ++++
 packages/alpinejs/src/lifecycle.js  | 26 +++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/alpinejs/src/directives.js b/packages/alpinejs/src/directives.js
index 5c7f4f096..410086b09 100644
--- a/packages/alpinejs/src/directives.js
+++ b/packages/alpinejs/src/directives.js
@@ -30,6 +30,10 @@ export function directive(name, callback) {
     }
 }
 
+export function directiveExists(name) {
+    return Object.keys(directiveHandlers).includes(name)
+}
+
 export function directives(el, attributes, originalAttributeOverride) {
     attributes = Array.from(attributes)
 
diff --git a/packages/alpinejs/src/lifecycle.js b/packages/alpinejs/src/lifecycle.js
index 9d84298c5..82868a158 100644
--- a/packages/alpinejs/src/lifecycle.js
+++ b/packages/alpinejs/src/lifecycle.js
@@ -1,5 +1,5 @@
 import { startObservingMutations, onAttributesAdded, onElAdded, onElRemoved, cleanupAttributes, cleanupElement } from "./mutation"
-import { deferHandlingDirectives, directives } from "./directives"
+import { deferHandlingDirectives, directiveExists, directives } from "./directives"
 import { dispatch } from './utils/dispatch'
 import { walk } from "./utils/walk"
 import { warn } from './utils/warn'
@@ -33,6 +33,10 @@ export function start() {
         })
 
     dispatch(document, 'alpine:initialized')
+
+    setTimeout(() => {
+        warnAboutMissingPlugins()
+    })
 }
 
 let rootSelectorCallbacks = []
@@ -98,3 +102,23 @@ export function destroyTree(root, walker = walk) {
         cleanupElement(el)
     })
 }
+
+function warnAboutMissingPlugins() {
+    let pluginDirectives = [
+        [ 'ui', 'dialog', ['[x-dialog], [x-popover]'] ],
+        [ 'anchor', 'anchor', ['[x-anchor]'] ],
+        [ 'sort', 'sort', ['[x-sort]'] ],
+    ]
+
+    pluginDirectives.forEach(([ plugin, directive, selectors ]) => {
+        if (directiveExists(directive)) return
+
+        selectors.some(selector => {
+            if (document.querySelector(selector)) {
+                warn(`found "${selector}", but missing ${plugin} plugin`)
+
+                return true
+            }
+        })
+    })
+}