Support for Vue Components import + passthrough

app/package.json

@@ -6,19 +6,20 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@headlessui/vue": "^1.7.17",
         "@protonemedia/laravel-splade-core": "file:../protonemedia-laravel-splade-core-1.1.0.tgz",
         "@protonemedia/laravel-splade-vite": "^1.0.3",
         "@vitejs/plugin-vue": "^4.3.4",
         "axios": "^1.1.2",
+        "eslint": "^8.51.0",
         "eslint-config-prettier": "^9.0.0",
-        "eslint-plugin-prettier-vue": "^5.0.0",
         "eslint-plugin-prettier": "^5.0.0",
+        "eslint-plugin-prettier-vue": "^5.0.0",
         "eslint-plugin-vue": "^9.17.0",
-        "eslint": "^8.51.0",
         "flatpickr": "^4.6.13",
         "laravel-vite-plugin": "^0.8.0",
         "prettier": "^3.0.3",
         "vite": "^4.0.0",
         "vue": "^3.3.4"
     }
-}
+}

app/resources/views/component-import.blade.php

@@ -0,0 +1,3 @@
+<x-layout>
+    <x-component-import />
+</x-layout>

app/resources/views/components/component-import.blade.php

@@ -0,0 +1,23 @@
+<script setup>
+import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from "@headlessui/vue";
+
+const openend = ref(false);
+
+function show() {
+    openend.value = true;
+}
+</script>
+
+<div>
+    <button type="button" @click="show">Open Dialog</button>
+
+    <TransitionRoot :show="openend">
+        <TransitionChild>
+            <Dialog>
+                <DialogPanel>
+                    <h2>Dialog</h2>
+                </DialogPanel>
+            </Dialog>
+        </TransitionChild>
+    </TransitionRoot>
+</div>

app/resources/views/components/dynamic-component-import.blade.php

@@ -0,0 +1,23 @@
+<script setup>
+import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from "@headlessui/vue";
+
+const openend = ref(false);
+
+function show() {
+    openend.value = true;
+}
+</script>
+
+<div>
+    <button type="button" @click="show">Open Dialog</button>
+
+    <component :is="true ? TransitionRoot : 'div'" :show="openend">
+        <component :is="true ? TransitionChild : 'div'">
+            <Dialog>
+                <DialogPanel>
+                    <h2>Dialog</h2>
+                </DialogPanel>
+            </Dialog>
+        </component >
+    </component>
+</div>

app/resources/views/dynamic-component-import.blade.php

@@ -0,0 +1,3 @@
+<x-layout>
+    <x-dynamic-component-import />
+</x-layout>

app/routes/web.php

@@ -25,6 +25,8 @@
 Route::view('/base-view', 'base-view');
 Route::view('/blade-method', 'blade-method');
 Route::view('/blade-method-callbacks', 'blade-method-callbacks');
+Route::view('/component-import', 'component-import');
+Route::view('/dynamic-component-import', 'dynamic-component-import');
 Route::view('/change-blade-prop', 'change-blade-prop');
 Route::view('/dynamic', 'dynamic')->withoutMiddleware(SubstituteBindings::class);
 Route::view('/form', 'form');

app/tests/Browser/ComponentImportTest.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace Tests\Browser;
+
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+class ComponentImportTest extends DuskTestCase
+{
+    public static function urls()
+    {
+        return [
+            ['/component-import'],
+            ['/dynamic-component-import'],
+        ];
+    }
+
+    /**
+     * @dataProvider urls
+     *
+     * @test */
+    public function it_handles_js_imports($url)
+    {
+        $this->browse(function (Browser $browser) use ($url) {
+            $browser->visit($url)
+                ->assertMissing('h2')
+                ->assertMissing('#headlessui-portal-root')
+                ->press('Open Dialog')
+                ->assertSeeIn('h2', 'Dialog')
+                ->assertPresent('#headlessui-portal-root');
+        });
+    }
+}

app/tests/Unit/Console/BuildComponentsTest.php

@@ -32,6 +32,8 @@ public function it_builds_the_components()
             'IncludedView',
             'RegularView',
             'ComponentToVueProp',
+            'ComponentComponentImport',
+            'ComponentDynamicComponentImport',
         ] as $component) {
             $this->assertFileExists(resource_path('js/splade/Splade'.$component.'.vue'));
             $this->assertMatchesVueSnapshot($filesytem->get(resource_path('js/splade/Splade'.$component.'.vue')));

app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__13.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
+import { h, ref } from 'vue'
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
+
+import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
+
+const openend = ref(false)
+
+function show() {
+    openend.value = true
+}
+
+const spladeRender = h({
+    name: 'SpladeComponentComponentImportRender',
+    components: { GenericSpladeComponent, Dialog, DialogPanel, TransitionRoot, TransitionChild },
+    template: spladeTemplates[props.spladeTemplateId],
+    data: () => {
+        return { ...props, openend, show }
+    },
+})
+</script>
+<template><spladeRender /></template>

app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__14.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
+import { h, markRaw, ref } from 'vue'
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
+
+import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
+
+const openend = ref(false)
+
+function show() {
+    openend.value = true
+}
+
+const spladeRender = h({
+    name: 'SpladeComponentDynamicComponentImportRender',
+    components: { GenericSpladeComponent, Dialog, DialogPanel },
+    template: spladeTemplates[props.spladeTemplateId],
+    data: () => {
+        return {
+            ...props,
+            openend,
+            show,
+            TransitionRoot: markRaw(TransitionRoot),
+            TransitionChild: markRaw(TransitionChild),
+        }
+    },
+})
+</script>
+<template><spladeRender /></template>

app/tests/Unit/ScriptParserTest.php

@@ -179,4 +179,21 @@ function greet() {
 
         $this->assertEquals(['age', 'baz', 'city', 'country', 'foo', 'greet', 'name', 'quux'], $parser->getVariables()->toArray());
     }
+
+    /** @test */
+    public function it_returns_an_array_with_all_js_imports()
+    {
+        $script = <<<'JS'
+import { Dialog, DialogPanel, TransitionRoot, TransitionChild } from "@headlessui/vue";
+JS;
+
+        $parser = new ScriptParser($script);
+
+        $this->assertEquals([
+            'Dialog' => '@headlessui/vue',
+            'DialogPanel' => '@headlessui/vue',
+            'TransitionRoot' => '@headlessui/vue',
+            'TransitionChild' => '@headlessui/vue',
+        ], $parser->getImports());
+    }
 }

src/BladeViewExtractor.php

@@ -22,6 +22,8 @@ class BladeViewExtractor
 
     protected ScriptParser $scriptParser;
 
+    protected ?array $importedComponents = null;
+
     public function __construct(
         protected readonly string $originalView,
         protected readonly array $data,
@@ -109,6 +111,7 @@ public function handle(Filesystem $filesystem): string
 
         $this->splitOriginalView();
         $this->scriptParser = new ScriptParser($this->originalScript);
+        $this->scriptParser->getImports();
 
         // Some pre-processing of the view.
         $this->viewWithoutScriptTag = $this->replaceComponentMethodLoadingStates($this->viewWithoutScriptTag);
@@ -352,6 +355,7 @@ protected function renderImports(): string
     {
         $vueFunctionsImports = $this->scriptParser->getVueFunctions()
             ->push('h')
+            ->when($this->getImportedComponents()['dynamic']->isNotEmpty(), fn ($collection) => $collection->push('markRaw'))
             ->when($this->needsSpladeBridge(), fn ($collection) => $collection->push('ref'))
             ->when($this->isRefreshable(), fn ($collection) => $collection->push('inject'))
             ->when($this->isComponent() && ! empty($this->getBladeProperties()), fn ($collection) => $collection->push('computed'))
@@ -464,6 +468,46 @@ protected function renderElementRefStoreAndSetter(): string
 JS;
     }
 
+    /**
+     * Returns the imported components.
+     */
+    protected function getImportedComponents(): array
+    {
+        if ($this->importedComponents) {
+            return $this->importedComponents;
+        }
+
+        $this->importedComponents = [
+            'static' => Collection::make([]),
+            'dynamic' => Collection::make([]),
+        ];
+
+        if (! $this->isComponent()) {
+            return $this->importedComponents;
+        }
+
+        Collection::make($this->scriptParser->getImports())
+            ->keys()
+            ->each(function (string $import) {
+                if (Str::contains($this->viewWithoutScriptTag, "<{$import}")) {
+                    return $this->importedComponents['static'][] = $import;
+                }
+
+                // match anything in :is="" (e.g.: :is="true ? A : B") attribute
+                preg_match_all('/:is="(.+?)"/', $this->viewWithoutScriptTag, $matches);
+
+                $isDynamic = Collection::make($matches[1] ?? [])
+                    ->flatMap(fn (string $match) => explode(' ', $match))
+                    ->contains($import);
+
+                if ($isDynamic) {
+                    return $this->importedComponents['dynamic'][] = $import;
+                }
+            });
+
+        return $this->importedComponents;
+    }
+
     /**
      * Renders the SpladeRender 'h'-function.
      */
@@ -473,16 +517,25 @@ protected function renderSpladeRenderFunction(): string
 inheritAttrs: false,
 JS : '';
 
+        $importedComponents = $this->getImportedComponents();
+
         $dataObject = Collection::make(['...props'])
             ->merge($this->getBladeProperties())
             ->merge($this->scriptParser->getVariables()->reject(fn ($variable) => $variable === 'props'))
             ->merge($this->getBladeFunctions())
             ->when($this->isRefreshable(), fn (Collection $collection) => $collection->push('refreshComponent'))
             ->when($this->viewUsesElementRefs(), fn (Collection $collection) => $collection->push('setSpladeRef'))
+            ->merge($importedComponents['dynamic']->map(function (string $component) {
+                return "{$component}: markRaw({$component})";
+            }))
             ->implode(',');
 
-        $componentsObject = $this->isComponent() ? <<<'JS'
-components: { GenericSpladeComponent },
+        $components = Collection::make([
+            'GenericSpladeComponent', ...$importedComponents['static'],
+        ])->implode(',');
+
+        $componentsObject = $this->isComponent() ? <<<JS
+components: { {$components} },
 JS : '';
 
         return <<<JS