More tests

app/tests/Feature/DemoRoutesTest.php

@@ -14,11 +14,17 @@ public static function demoRoutes(): array
             ['/blade-method-callbacks'],
             ['/blade-method'],
             ['/change-blade-prop'],
+            ['/component-import'],
             ['/dynamic'],
+            ['/dynamic-component-import'],
+            ['/emit'],
             ['/form'],
+            ['/props-in-template'],
             ['/refresh-state'],
             ['/refresh'],
             ['/regular-view'],
+            ['/slot'],
+            ['/to-vue-prop'],
             ['/two-way-binding'],
         ];
     }

app/tests/Unit/Console/BuildComponentsTest.php

@@ -34,6 +34,13 @@ public function it_builds_the_components()
             'ComponentToVueProp',
             'ComponentComponentImport',
             'ComponentDynamicComponentImport',
+            'ComponentChild',
+            'ComponentEmit',
+            'ComponentPropsInTemplate',
+            'ComponentRoot',
+            'Emit',
+            'PropsInTemplate',
+            'Slot',
         ] 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__12.vue

@@ -1,5 +1,4 @@
 <script setup>
-import {} from 'vue'
 const props = defineProps({
     spladeBridge: Object,
     spladeTemplateId: String,

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

@@ -0,0 +1,16 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
+const childVar = ref("What's that, Hawaiian Noises?")
+const spladeRender = {
+    name: 'SpladeComponentChildRender',
+    template: spladeTemplates[props.spladeTemplateId],
+    props: { spladeBridge: Object, spladeTemplateId: String },
+    data: () => ({ childVar }),
+}
+</script>
+<template>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup>
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
+const emit = defineEmits(['trigger'])
+
+const trigger = () => {
+    emit('trigger')
+}
+const spladeRender = {
+    name: 'SpladeComponentEmitRender',
+    template: spladeTemplates[props.spladeTemplateId],
+    props: { spladeBridge: Object, spladeTemplateId: String },
+    data: () => ({ emit, trigger }),
+}
+</script>
+<template>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+    spladeBridge: Object,
+    spladeTemplateId: String,
+    title: { type: String, required: false, default: 'Default title' },
+})
+const subtitle = ref('Default subtitle')
+const spladeRender = {
+    name: 'SpladeComponentPropsInTemplateRender',
+    template: spladeTemplates[props.spladeTemplateId],
+    props: {
+        spladeBridge: Object,
+        spladeTemplateId: String,
+        title: { type: String, required: false, default: 'Default title' },
+    },
+    data: () => ({ subtitle }),
+}
+</script>
+<template>
+    <spladeRender :title="title" :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
+const rootCounter = ref(0)
+
+const emit = defineEmits(['incremented'])
+
+function increment() {
+    rootCounter.value++
+    emit('incremented')
+}
+const spladeRender = {
+    name: 'SpladeComponentRootRender',
+    template: spladeTemplates[props.spladeTemplateId],
+    props: { spladeBridge: Object, spladeTemplateId: String },
+    data: () => ({ emit, increment, rootCounter }),
+}
+</script>
+<template>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({ spladeTemplateId: String })
+const show = ref(false)
+
+function toggle() {
+    show.value = !show.value
+}
+const spladeRender = {
+    name: 'SpladeEmitRender',
+    template: spladeTemplates[props.spladeTemplateId],
+    props: { spladeTemplateId: String },
+    data: () => ({ show, toggle }),
+}
+</script>
+<template>
+    <spladeRender :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({ spladeTemplateId: String })
+const title = ref('Default title')
+
+function updateTitle() {
+    title.value = 'New title'
+}
+const spladeRender = {
+    name: 'SpladePropsInTemplateRender',
+    template: spladeTemplates[props.spladeTemplateId],
+    props: { spladeTemplateId: String },
+    data: () => ({ title, updateTitle }),
+}
+</script>
+<template>
+    <spladeRender :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
+</template>

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

@@ -0,0 +1,16 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({ spladeTemplateId: String })
+const layoutCounter = ref(0)
+const spladeRender = {
+    name: 'SpladeSlotRender',
+    template: spladeTemplates[props.spladeTemplateId],
+    props: { spladeTemplateId: String },
+    data: () => ({ layoutCounter }),
+}
+</script>
+<template>
+    <spladeRender :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
+</template>

src/BladeViewExtractor.php

@@ -365,9 +365,9 @@ protected function renderImports(): string
             ->sort()
             ->implode(',');
 
-        return <<<JS
+        return $vueFunctionsImports ? <<<JS
 import { {$vueFunctionsImports} } from 'vue';
-JS;
+JS : '';
     }
 
     /**