Merge pull request #25 from protonemedia/experimental-props-passthrough

Improved props passthrough
protonemedia · Jan 17, 2024 · 5ad886c · 5ad886c
2 parents 851f7f3 + 52d218c
commit 5ad886c
Show file tree

Hide file tree

Showing 20 changed files with 258 additions and 107 deletions.
diff --git a/app/resources/views/props-in-template.blade.php b/app/resources/views/props-in-template.blade.php
@@ -1,3 +1,13 @@
 <x-layout>
-    <x-props-in-template />
+    <script setup>
+        const title = ref('Default title')
+
+        function updateTitle() {
+            title.value = 'New title'
+        }
+    </script>
+
+    <x-props-in-template v-bind:title="title" />
+
+    <button @click="updateTitle">Update title</button>
 </x-layout>
diff --git a/app/tests/Browser/PropsTest.php b/app/tests/Browser/PropsTest.php
@@ -13,7 +13,9 @@ public function it_exposes_the_props_to_the_template_data()
         $this->browse(function (Browser $browser) {
             $browser->visit('/props-in-template')
                 ->assertSeeIn('h2', 'Default title')
-                ->assertSeeIn('h3', 'Default subtitle');
+                ->assertSeeIn('h3', 'Default subtitle')
+                ->press('Update title')
+                ->assertSeeIn('h2', 'New title');
         });
     }
 }
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
@@ -2,17 +2,16 @@
 import { GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
 import { computed, h, ref } from 'vue'
 const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
-
 const message = ref('Hello Vue!')
 const reversed = computed(() => message.value.split('').reverse().join(''))
-
 const spladeRender = h({
     name: 'SpladeComponentAnonymousRender',
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
-        return { ...props, message, reversed }
+        return { message, reversed }
     },
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>
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,16 +1,15 @@
 <script setup>
 import { h, ref } from 'vue'
 const props = defineProps({ spladeTemplateId: String })
-
 const message = ref('Hello Included view!')
-
 const spladeRender = h({
     name: 'SpladeIncludedViewRender',
 
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
-        return { ...props, message }
+        return { message }
     },
+    props: { spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-template-id="spladeTemplateId" /></template>
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,16 +1,15 @@
 <script setup>
 import { h, ref } from 'vue'
 const props = defineProps({ spladeTemplateId: String })
-
 const message = ref('Hello World!')
-
 const spladeRender = h({
     name: 'SpladeRegularViewRender',
 
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
-        return { ...props, message }
+        return { message }
     },
+    props: { spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-template-id="spladeTemplateId" /></template>
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
@@ -29,8 +29,55 @@ const spladeRender = h({
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
-        return { ...props }
+        return {}
+    },
+    props: {
+        spladeBridge: Object,
+        spladeTemplateId: String,
+        mixed: {},
+        string: { type: String },
+        defaultString: { type: String },
+        nullableString: { type: String },
+        int: { type: Number },
+        bool: { type: Boolean },
+        array: { type: Array },
+        object: { type: Object },
+        nullableInt: { type: Number },
+        nullableBool: { type: Boolean },
+        nullableArray: { type: Array },
+        nullableObject: { type: Object },
+        defaultInt: { type: Number },
+        defaultBool: { type: Boolean },
+        defaultArray: { type: Array },
+        multipleTypes: { type: [Array, String, Boolean] },
+        renamed: { type: String },
+        jsObject: {},
+        dataFromMethod: { type: Array },
     },
 })
 </script>
-<template><spladeRender /></template>
+<template>
+    <spladeRender
+        :splade-bridge="spladeBridge"
+        :splade-template-id="spladeTemplateId"
+        :mixed="mixed"
+        :string="string"
+        :default-string="defaultString"
+        :nullable-string="nullableString"
+        :int="int"
+        :bool="bool"
+        :array="array"
+        :object="object"
+        :nullable-int="nullableInt"
+        :nullable-bool="nullableBool"
+        :nullable-array="nullableArray"
+        :nullable-object="nullableObject"
+        :default-int="defaultInt"
+        :default-bool="defaultBool"
+        :default-array="defaultArray"
+        :multiple-types="multipleTypes"
+        :renamed="renamed"
+        :js-object="jsObject"
+        :data-from-method="dataFromMethod"
+    />
+</template>
diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__13.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__13.vue
@@ -2,22 +2,21 @@
 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 }
+        return { openend, show }
     },
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>
diff --git a/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__14.vue b/app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__14.vue
@@ -2,28 +2,21 @@
 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),
-        }
+        return { openend, show, TransitionRoot: markRaw(TransitionRoot), TransitionChild: markRaw(TransitionChild) }
     },
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></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
@@ -5,22 +5,21 @@ const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
 const _spladeBridgeState = ref(props.spladeBridge)
 const execute = BladeComponent.asyncComponentMethod('execute', _spladeBridgeState)
 const sleep = BladeComponent.asyncComponentMethod('sleep', _spladeBridgeState)
-
 const response = ref('-')
 
 const executeWithCallback = () => {
     execute(new Date()).then((data) => {
         response.value = data.data.response
     })
 }
-
 const spladeRender = h({
     name: 'SpladeComponentBladeMethodRender',
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
-        return { ...props, executeWithCallback, response, execute, sleep }
+        return { executeWithCallback, response, execute, sleep }
     },
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>
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
@@ -5,7 +5,6 @@ const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
 const _spladeBridgeState = ref(props.spladeBridge)
 const execute = BladeComponent.asyncComponentMethod('execute', _spladeBridgeState)
 const fail = BladeComponent.asyncComponentMethod('fail', _spladeBridgeState)
-
 const response = ref('-')
 
 execute.before((data) => {
@@ -19,14 +18,14 @@ execute.then((data) => {
 fail.catch((data) => {
     response.value = 'no!'
 })
-
 const spladeRender = h({
     name: 'SpladeComponentBladeMethodCallbacksRender',
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
-        return { ...props, response, execute, fail }
+        return { response, execute, fail }
     },
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>
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
@@ -17,8 +17,9 @@ const spladeRender = h({
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
-        return { ...props, message, setMessage }
+        return { message, setMessage }
     },
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>
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
@@ -4,7 +4,6 @@ import { h, onMounted } from 'vue'
 const props = defineProps({ spladeBridge: Object, spladeTemplateId: String, modelValue: {} })
 const $refs = {}
 const setSpladeRef = (key, value) => ($refs[key] = value)
-
 import flatpickr from 'flatpickr'
 
 const emit = defineEmits(['update:modelValue'])
@@ -18,14 +17,16 @@ onMounted(() => {
 
     instance.setDate(props.modelValue)
 })
-
 const spladeRender = h({
     name: 'SpladeComponentDatePickerRender',
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
-        return { ...props, emit, setSpladeRef }
+        return { emit, setSpladeRef }
     },
+    props: { spladeBridge: Object, spladeTemplateId: String, modelValue: {} },
 })
 </script>
-<template><spladeRender /></template>
+<template>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" :model-value="modelValue" />
+</template>
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
@@ -2,20 +2,19 @@
 import { GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
 import { h, ref } from 'vue'
 const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
-
 const form = ref({
     package: 'Splade',
     framework: 'laravel',
     date: '2021-01-01',
 })
-
 const spladeRender = h({
     name: 'SpladeComponentFormRender',
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
-        return { ...props, form }
+        return { form }
     },
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>
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
@@ -5,15 +5,15 @@ const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
 const _spladeBridgeState = ref(props.spladeBridge)
 const _spladeTemplateBus = inject('$spladeTemplateBus')
 const refreshComponent = BladeComponent.asyncRefreshComponent(_spladeBridgeState, _spladeTemplateBus)
-
 const spladeRender = h({
     inheritAttrs: false,
     name: 'SpladeComponentTimeRender',
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
-        return { ...props, refreshComponent }
+        return { refreshComponent }
     },
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>
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
@@ -5,7 +5,6 @@ const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
 const _spladeBridgeState = ref(props.spladeBridge)
 const _spladeTemplateBus = inject('$spladeTemplateBus')
 const refreshComponent = BladeComponent.asyncRefreshComponent(_spladeBridgeState, _spladeTemplateBus)
-
 const status = ref('idle')
 
 refreshComponent.before(() => {
@@ -19,14 +18,14 @@ refreshComponent.then(() => {
 refreshComponent.finally(() => {
     console.log('finally refreshed')
 })
-
 const spladeRender = h({
     name: 'SpladeComponentTimeStateRender',
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
-        return { ...props, status, refreshComponent }
+        return { status, refreshComponent }
     },
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>
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
@@ -2,17 +2,16 @@
 import { GenericSpladeComponent } from '@protonemedia/laravel-splade-core'
 import { computed, h, ref } from 'vue'
 const props = defineProps({ spladeBridge: Object, spladeTemplateId: String })
-
 const message = ref('Hello Vue!')
 const uppercase = computed(() => message.value.toUpperCase())
-
 const spladeRender = h({
     name: 'SpladeComponentTwoWayBindingRender',
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
-        return { ...props, message, uppercase }
+        return { message, uppercase }
     },
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>