Warn if directive from plugin is being used without plugin

packages/alpinejs/src/directives/index.js

@@ -1,3 +1,7 @@
+import { directive } from '../directives'
+import { warn } from '../utils/warn'
+import { magic } from '../magics'
+
 import './x-transition'
 import './x-modelable'
 import './x-teleport'
@@ -16,3 +20,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

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