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

@@ -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))
+}

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))
+}