From 4a910c23214096a4b9d273a80349097d08cac3f6 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Thu, 7 Apr 2022 22:03:54 -0400
Subject: [PATCH] Warn if directive from plugin is being used without plugin
 (#2815)

* Warn if directive from plugin is being used without plugin

* wip
---
 packages/alpinejs/src/directives/index.js | 12 ++++++++++++
 packages/alpinejs/src/magics/index.js     | 11 +++++++++++
 2 files changed, 23 insertions(+)

diff --git a/packages/alpinejs/src/directives/index.js b/packages/alpinejs/src/directives/index.js
index 8da02c56f..181812b29 100644
--- a/packages/alpinejs/src/directives/index.js
+++ b/packages/alpinejs/src/directives/index.js
@@ -1,3 +1,6 @@
+import { directive } from '../directives'
+import { warn } from '../utils/warn'
+
 import './x-transition'
 import './x-modelable'
 import './x-teleport'
@@ -16,3 +19,12 @@ import './x-ref'
 import './x-if'
 import './x-id'
 import './x-on'
+
+// Register warnings for people using plugin syntaxes and not loading the plugin itself:
+warnMissingPluginDirective('Collapse', 'collapse', 'collapse')
+warnMissingPluginDirective('Intersect', 'intersect', 'intersect')
+warnMissingPluginDirective('Focus', 'trap', 'focus')
+
+function warnMissingPluginDirective(name, directiveName, slug) {
+    directive(directiveName, (el) => warn(`You can't use [x-${directiveName}] without first installing the "${name}" plugin here: https://alpine.dev/plugins/${slug}`, el))
+}
diff --git a/packages/alpinejs/src/magics/index.js b/packages/alpinejs/src/magics/index.js
index b3776c62b..9f5f47445 100644
--- a/packages/alpinejs/src/magics/index.js
+++ b/packages/alpinejs/src/magics/index.js
@@ -1,3 +1,6 @@
+import { warn } from '../utils/warn'
+import { magic } from '../magics'
+
 import './$nextTick'
 import './$dispatch'
 import './$watch'
@@ -7,3 +10,11 @@ import './$root'
 import './$refs'
 import './$id'
 import './$el'
+
+// Register warnings for people using plugin syntaxes and not loading the plugin itself:
+warnMissingPluginMagic('Focus', 'focus', 'focus')
+warnMissingPluginMagic('Persist', 'persist', 'persist')
+
+function warnMissingPluginMagic(name, magicName, slug) {
+    magic(magicName, (el) => warn(`You can't use [$${directiveName}] without first installing the "${name}" plugin here: https://alpine.dev/plugins/${slug}`, el))
+}