add alpine integration tests

docs/advanced-usage.md

@@ -30,6 +30,28 @@ If a module supports per method exports, like `lodash` does, it is recomended to
 <x-import module="lodash" as="lodash" /> <!-- 78kb -->
 ```
 
+## Global helper functions
+
+```javascript
+export function foo() {
+  //
+}
+
+export function bar() {
+  //
+}
+```
+
+```html
+<x-import module="~/named-functions" as="helpers" />
+
+<script type="module">
+  const foo = await _import("helpers", "foo");
+
+  foo();
+</script>
+```
+
 ## Sourcemaps
 
 Sourcemaps are disabled by default. You may enable this by setting `BUNDLE_SOURCEMAPS_ENABLED` to true in your env file or by publishing and updating the bundle config.

tests/Browser/AlpineIntegrationTest.php

@@ -0,0 +1,118 @@
+<?php
+
+namespace Leuverink\Bundle\Tests\Browser;
+
+use Leuverink\Bundle\Tests\DuskTestCase;
+
+// Pest & Workbench Dusk don't play nicely together
+// We need to fall back to PHPUnit syntax.
+
+class AlpineIntegrationTest extends DuskTestCase
+{
+    /** @test */
+    public function it_can_bootstrap_alpine_via_import()
+    {
+        $browser = $this->blade(<<< 'HTML'
+            <x-import module="~/bootstrap/alpine" />
+
+            <div
+                id="component"
+                x-text="message"
+                x-data="{
+                    message: 'Hello World!'
+                }"
+            ></div>
+        HTML);
+
+        // Doesn't raise console errors
+        $this->assertEmpty($browser->driver->manage()->getLog('browser'));
+
+        $browser->assertSeeIn('#component', 'Hello World!');
+    }
+
+    /** @test */
+    public function it_can_bootstrap_plugins_via_import()
+    {
+        $browser = $this->blade(<<< 'HTML'
+            <x-import module="~/bootstrap/alpine" />
+
+            <div
+                id="component"
+                x-text="message"
+                x-data="{
+                    message: 'Hello World!'
+                }"
+            ></div>
+        HTML);
+
+        // Doesn't raise console errors
+        $this->assertEmpty($browser->driver->manage()->getLog('browser'));
+
+        $browser->assertSeeIn('#component', 'Hello World!');
+    }
+
+    /** @test */
+    public function it_can_use_other_imports_inside_x_init_directive()
+    {
+        $browser = $this->blade(<<< 'HTML'
+            <x-import module="~/bootstrap/alpine" />
+            <x-import module="lodash/filter" as="filter" />
+
+            <div
+                id="component"
+                x-init="
+                    const filter = await _import('lodash', 'filter');
+
+                    let data = [
+                        { 'name': 'Foo', 'active': false },
+                        { 'name': 'Hello World!', 'active': true }
+                    ];
+
+                    // Filter only active
+                    let filtered = filter(data, o => o.active)
+
+                    $el.innerHTML = filtered[0].name
+                "
+            ></div>
+        HTML);
+
+        // Doesn't raise console errors
+        $this->assertEmpty($browser->driver->manage()->getLog('browser'));
+
+        $browser->assertSeeIn('#component', 'Hello World!');
+
+    }
+
+    /** @test */
+    public function it_can_use_other_imports_inside_x_data_directive()
+    {
+        $browser = $this->blade(<<< 'HTML'
+            <x-import module="~/bootstrap/alpine" />
+            <x-import module="lodash/filter" as="filter" />
+
+            <div
+                id="component"
+                x-data="
+                    async init() {
+                        const filter = await _import('lodash', 'filter');
+
+                        let data = [
+                            { 'name': 'Foo', 'active': false },
+                            { 'name': 'Hello World!', 'active': true }
+                        ];
+
+                        // Filter only active
+                        let filtered = filter(data, o => o.active)
+
+                        $el.innerHTML = filtered[0].name
+                    }
+                "
+            ></div>
+        HTML);
+
+        // Doesn't raise console errors
+        $this->assertEmpty($browser->driver->manage()->getLog('browser'));
+
+        $browser->assertSeeIn('#component', 'Hello World!');
+    }
+}

workbench/package.json

@@ -1,6 +1,8 @@
 {
   "devDependencies": {
     "bun": "^1.0.21",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "alpinejs": "^3.13.3",
+    "@alpinejs/persist": "^3.13.3"
   }
 }

workbench/resources/js/alert.js

@@ -1,3 +1,3 @@
-export default function(message) {
+export default function alert(message) {
     alert(message)
 }

workbench/resources/js/bootstrap/alpine-with-plugin.js

@@ -0,0 +1,10 @@
+import Alpine from "alpinejs";
+import persist from '@alpinejs/persist'
+
+Alpine.plugin(persist)
+
+export default (() => {
+  window.Alpine = Alpine;
+
+  Alpine.start();
+})();

workbench/resources/js/bootstrap/alpine.js

@@ -0,0 +1,7 @@
+import Alpine from "alpinejs";
+
+export default (() => {
+  window.Alpine = Alpine;
+
+  Alpine.start();
+})();