Added test + improved Vue props object merger

protonemedia · Dec 20, 2023 · f920f04 · f920f04
1 parent d8b898c
commit f920f04
Show file tree

Hide file tree

Showing 22 changed files with 211 additions and 44 deletions.
diff --git a/app/app/View/Components/ToVueProp.php b/app/app/View/Components/ToVueProp.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+use ProtoneMedia\SpladeCore\Attributes\VueProp;
+
+class ToVueProp extends Component
+{
+    #[VueProp]
+    public mixed $mixed = 'foo';
+
+    #[VueProp]
+    public string $string = 'foo';
+
+    #[VueProp]
+    public string $defaultString = 'foo';
+
+    #[VueProp]
+    public ?string $nullableString = null;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        #[VueProp] public int $int,
+        #[VueProp] public bool $bool,
+        #[VueProp] public array $array,
+        #[VueProp] public object $object,
+        #[VueProp] public ?int $nullableInt = null,
+        #[VueProp] public ?bool $nullableBool = null,
+        #[VueProp] public ?array $nullableArray = null,
+        #[VueProp] public ?object $nullableObject = null,
+        #[VueProp] public int $defaultInt = 1,
+        #[VueProp] public bool $defaultBool = true,
+        #[VueProp] public array $defaultArray = ['foo'],
+        #[VueProp] public array|bool|string $multipleTypes = ['foo'],
+    ) {
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.to-vue-prop');
+    }
+}
diff --git a/app/resources/views/components/to-vue-prop.blade.php b/app/resources/views/components/to-vue-prop.blade.php
@@ -0,0 +1,19 @@
+<script setup></script>
+<div>
+<p>Mixed: <span v-text="mixed" /></p>
+<p>String: <span v-text="string" /></p>
+<p>Default String: <span v-text="defaultString" /></p>
+<p>Nullable String: <span v-text="nullableString" /></p>
+<p>Int: <span v-text="int" /></p>
+<p>Bool: <span v-text="bool" /></p>
+<p>Array: <span v-text="array" /></p>
+<p>Object: <span v-text="object" /></p>
+<p>Nullable Int: <span v-text="nullableInt" /></p>
+<p>Nullable Bool: <span v-text="nullableBool" /></p>
+<p>Nullable Array: <span v-text="nullableArray" /></p>
+<p>Nullable Object: <span v-text="nullableObject" /></p>
+<p>Default Int: <span v-text="defaultInt" /></p>
+<p>Default Bool: <span v-text="defaultBool" /></p>
+<p>Default Array: <span v-text="defaultArray" /></p>
+<p>Multiple Types: <span v-text="multipleTypes" /></p>
+</div>
diff --git a/app/resources/views/to-vue-prop.blade.php b/app/resources/views/to-vue-prop.blade.php
@@ -0,0 +1,8 @@
+<x-layout>
+    <x-to-vue-prop
+        :int="1"
+        :bool="false"
+        :array="['foo', 'bar']"
+        :object="(object) ['foo' => 'bar']"
+    />
+</x-layout>
diff --git a/app/routes/web.php b/app/routes/web.php
@@ -32,6 +32,7 @@
 Route::view('/refresh', 'refresh')->middleware(Refreshable::class);
 Route::view('/refresh-state', 'refresh-state')->middleware(Refreshable::class);
 Route::view('/regular-view', 'regular-view');
+Route::view('/to-vue-prop', 'to-vue-prop');
 Route::view('/two-way-binding', 'two-way-binding');
 
 Route::get('/login', function () {

diff --git a/app/tests/Browser/ToVuePropTest.php b/app/tests/Browser/ToVuePropTest.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Tests\Browser;
+
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+class ToVuePropTest extends DuskTestCase
+{
+    /** @test */
+    public function it_can_pass_blade_props_as_vue_rops()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/to-vue-prop')
+                ->waitForText('Splade Core demo app')
+                ->assertSee('Mixed: foo')
+                ->assertSee('String: foo')
+                ->assertSee('Default String: foo')
+                ->assertSee('Nullable String:')
+                ->assertSee('Int: 1')
+                ->assertSee('Bool: false')
+                ->assertSee('Array: { "foo": "bar" }')
+                ->assertSee('Object: { "foo": "bar" }')
+                ->assertSee('Nullable Int:')
+                ->assertSee('Nullable Bool:')
+                ->assertSee('Nullable Array:')
+                ->assertSee('Nullable Object:')
+                ->assertSee('Default Int: 1')
+                ->assertSee('Default Bool: true')
+                ->assertSee('Default Array: [ "foo" ]');
+        });
+    }
+}
diff --git a/app/tests/Unit/Console/BuildComponentsTest.php b/app/tests/Unit/Console/BuildComponentsTest.php
@@ -31,6 +31,7 @@ public function it_builds_the_components()
             'ComponentTwoWayBinding',
             'IncludedView',
             'RegularView',
+            'ComponentToVueProp',
         ] as $component) {
             $this->assertFileExists(resource_path('js/splade/Splade'.$component.'.vue'));
             $this->assertMatchesVueSnapshot($filesytem->get(resource_path('js/splade/Splade'.$component.'.vue')));

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__1.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__1.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
 import { computed, h, ref } from 'vue'
-const props = defineProps(['spladeBridge', 'spladeTemplateId'])
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
 
 const message = ref('Hello Vue!')
 const reversed = computed(() => message.value.split('').reverse().join(''))

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__10.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__10.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { h, ref } from 'vue'
-const props = defineProps(['spladeTemplateId'])
+const props = defineProps({ spladeTemplateId: String })
 
 const message = ref('Hello Included view!')
 

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__11.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__11.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { h, ref } from 'vue'
-const props = defineProps(['spladeTemplateId'])
+const props = defineProps({ spladeTemplateId: String })
 
 const message = ref('Hello World!')
 

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__12.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__12.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
+import { h } from 'vue'
+const props = defineProps({
+    spladeBridge: Object,
+    spladeTemplateId: String,
+    mixed: { default: 'foo' },
+    string: { type: String, default: 'foo' },
+    defaultString: { type: String, default: 'foo' },
+    nullableString: { type: String, default: null },
+    int: { type: Number, default: null },
+    bool: { type: Boolean, default: null },
+    array: { type: Array, default: null },
+    object: { type: Object, default: null },
+    nullableInt: { type: Number, default: null },
+    nullableBool: { type: Boolean, default: null },
+    nullableArray: { type: Array, default: null },
+    nullableObject: { type: Object, default: null },
+    defaultInt: { type: Number, default: 1 },
+    defaultBool: { type: Boolean, default: true },
+    defaultArray: { type: Array, default: JSON.parse('[\u0022foo\u0022]') },
+    multipleTypes: { type: [Array, String, Boolean], default: JSON.parse('[\u0022foo\u0022]') },
+})
+const spladeRender = h({
+    name: 'SpladeComponentToVuePropRender',
+    components: { GenericSpladeComponent },
+    template: spladeTemplates[props.spladeTemplateId],
+    data: () => {
+        return { ...props }
+    },
+})
+</script>
+<template><spladeRender /></template>
diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__2.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__2.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { BladeComponent, GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
 import { h, ref } from 'vue'
-const props = defineProps(['spladeBridge', 'spladeTemplateId'])
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
 const _spladeBridgeState = ref(props.spladeBridge)
 const execute = BladeComponent.asyncComponentMethod('execute', _spladeBridgeState)
 const sleep = BladeComponent.asyncComponentMethod('sleep', _spladeBridgeState)

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__3.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__3.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { BladeComponent, GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
 import { h, ref } from 'vue'
-const props = defineProps(['spladeBridge', 'spladeTemplateId'])
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
 const _spladeBridgeState = ref(props.spladeBridge)
 const execute = BladeComponent.asyncComponentMethod('execute', _spladeBridgeState)
 const fail = BladeComponent.asyncComponentMethod('fail', _spladeBridgeState)

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__4.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__4.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { BladeComponent, GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
 import { computed, h, ref } from 'vue'
-const props = defineProps(['spladeBridge', 'spladeTemplateId'])
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
 const _spladeBridgeState = ref(props.spladeBridge)
 const setMessage = BladeComponent.asyncComponentMethod('setMessage', _spladeBridgeState)
 const message = computed({

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__5.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__5.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
 import { h, onMounted } from 'vue'
-const props = defineProps(['spladeBridge', 'spladeTemplateId', 'modelValue'])
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String, modelValue: {} })
 const $refs = {}
 const setSpladeRef = (key, value) => ($refs[key] = value)
 

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__6.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__6.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
 import { h, ref } from 'vue'
-const props = defineProps(['spladeBridge', 'spladeTemplateId'])
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
 
 const form = ref({
     package: 'Splade',

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__7.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__7.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { BladeComponent, GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
 import { h, inject, ref } from 'vue'
-const props = defineProps(['spladeBridge', 'spladeTemplateId'])
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
 const _spladeBridgeState = ref(props.spladeBridge)
 const _spladeTemplateBus = inject('$spladeTemplateBus')
 const refreshComponent = BladeComponent.asyncRefreshComponent(_spladeBridgeState, _spladeTemplateBus)

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__8.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__8.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { BladeComponent, GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
 import { h, inject, ref } from 'vue'
-const props = defineProps(['spladeBridge', 'spladeTemplateId'])
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
 const _spladeBridgeState = ref(props.spladeBridge)
 const _spladeTemplateBus = inject('$spladeTemplateBus')
 const refreshComponent = BladeComponent.asyncRefreshComponent(_spladeBridgeState, _spladeTemplateBus)

diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__9.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__9.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
 import { computed, h, ref } from 'vue'
-const props = defineProps(['spladeBridge', 'spladeTemplateId'])
+const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
 
 const message = ref('Hello Vue!')
 const uppercase = computed(() => message.value.toUpperCase())

diff --git a/app/tests/Unit/ScriptParserTest.php b/app/tests/Unit/ScriptParserTest.php
@@ -14,7 +14,7 @@ public function it_can_merge_the_props_when_no_props_are_defined()
 
         $this->assertEquals([
             'original' => '',
-            'new' => "const props = defineProps(['foo']);",
+            'new' => 'const props = defineProps({foo: String});',
         ], $parser->getDefineProps([
             'foo' => 'String',
         ]));
@@ -31,7 +31,7 @@ public function it_can_extract_the_define_props_when_called_with_an_array()
 
         $this->assertEquals([
             'original' => "defineProps(['foo', 'bar']);",
-            'new' => "const props = defineProps(['foo', 'bar']);",
+            'new' => 'const props = defineProps({foo: {}, bar: {}});',
         ], $parser->getDefineProps());
     }
 
@@ -46,7 +46,7 @@ public function it_can_extract_the_define_props_when_called_with_an_array_with_a
 
         $this->assertEquals([
             'original' => "const props = defineProps(['foo', 'bar']);",
-            'new' => "const props = defineProps(['foo', 'bar']);",
+            'new' => 'const props = defineProps({foo: {}, bar: {}});',
         ], $parser->getDefineProps());
     }
 
@@ -61,7 +61,7 @@ public function it_can_extract_the_define_props_when_called_with_an_array_and_me
 
         $this->assertEquals([
             'original' => "defineProps(['foo', 'bar']);",
-            'new' => "const props = defineProps(['foo', 'bar', 'baz']);",
+            'new' => 'const props = defineProps({foo: {}, bar: {}, baz: String});',
         ], $parser->getDefineProps([
             'baz' => 'String',
         ]));

diff --git a/src/BladeViewExtractor.php b/src/BladeViewExtractor.php
@@ -305,7 +305,9 @@ protected function extractDefinePropsFromScript(): array
                 $type = is_array($specs->type) ? '['.implode(',', $specs->type).']' : "{$specs->type}";
                 $default = Js::from($specs->default)->toHtml();
 
-                return "{type: {$type}, default: {$default}}";
+                return $type
+                    ? "{type: {$type}, default: {$default}}"
+                    : "{default: {$default}}";
             });
 
         $defaultProps = Collection::make(['spladeTemplateId' => 'String'])

diff --git a/src/ComponentSerializer.php b/src/ComponentSerializer.php
@@ -230,7 +230,9 @@ public function getPropsFromComponent(): array
                 continue;
             }
 
-            $value = $property->isInitialized($this->component) ? $property->getValue($this->component) : null;
+            $value = $property->isInitialized($this->component)
+                ? $property->getValue($this->component)
+                : null;
 
             if ($value instanceof Model) {
                 $value = (object) $value->jsonSerialize();
@@ -250,9 +252,12 @@ public function getPropsFromComponent(): array
                 $value = $value->jsonSerialize();
             }
 
-            $defaultValue = $property->getDefaultValue();
+            $defaultValue = $property->hasDefaultValue()
+                ? $property->getDefaultValue()
+                : null;
 
-            $constructorParameter = collect($constructorParameters)->first(fn ($parameter) => $parameter->getName() === $name);
+            $constructorParameter = collect($constructorParameters)
+                ->first(fn ($parameter) => $parameter->getName() === $name);
 
             if ($constructorParameter?->isDefaultValueAvailable()) {
                 $defaultValue = $constructorParameter->getDefaultValue();
@@ -271,22 +276,25 @@ public function getPropsFromComponent(): array
     /**
      * Maps a PHP type to a Vue type.
      */
-    public static function mapTypeToVueType(?ReflectionType $type = null): array|string
+    public static function mapTypeToVueType(?ReflectionType $type = null): array|string|null
     {
         if ($type instanceof \ReflectionUnionType) {
-            return collect($type->getTypes())->map(fn ($type) => static::mapTypeToVueType($type))->all();
+            $types = collect($type->getTypes())
+                ->map(fn ($type = null) => static::mapTypeToVueType($type))
+                ->filter();
+
+            return $types->isEmpty() ? null : $types->all();
         }
 
-        return match ($type->getName()) {
+        return match ($type?->getName()) {
             'bool' => 'Boolean',
             'int' => 'Number',
             'float' => 'Number',
             'string' => 'String',
             'array' => 'Array',
             'object' => 'Object',
             'null' => 'Null',
-            'mixed' => 'Any',
-            default => 'Any',
+            default => null,
         };
     }