Refactor

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

@@ -2,18 +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 { message, reversed }
     },
-    props,
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>

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

@@ -1,17 +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 { message }
     },
-    props,
+    props: { spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-template-id="spladeTemplateId" /></template>

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

@@ -1,17 +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 { message }
     },
-    props,
+    props: { spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-template-id="spladeTemplateId" /></template>

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

@@ -31,7 +31,53 @@ const spladeRender = h({
     data: () => {
         return {}
     },
-    props,
+    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>

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

@@ -2,23 +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 { openend, show }
     },
-    props,
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>

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

@@ -2,23 +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 { openend, show, TransitionRoot: markRaw(TransitionRoot), TransitionChild: markRaw(TransitionChild) }
     },
-    props,
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>

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

@@ -5,23 +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 { executeWithCallback, response, execute, sleep }
     },
-    props,
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>

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,15 +18,14 @@ execute.then((data) => {
 fail.catch((data) => {
     response.value = 'no!'
 })
-
 const spladeRender = h({
     name: 'SpladeComponentBladeMethodCallbacksRender',
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
         return { response, execute, fail }
     },
-    props,
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>

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

@@ -19,7 +19,7 @@ const spladeRender = h({
     data: () => {
         return { message, setMessage }
     },
-    props,
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>

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,15 +17,16 @@ onMounted(() => {
 
     instance.setDate(props.modelValue)
 })
-
 const spladeRender = h({
     name: 'SpladeComponentDatePickerRender',
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
         return { emit, setSpladeRef }
     },
-    props,
+    props: { spladeBridge: Object, spladeTemplateId: String, modelValue: {} },
 })
 </script>
-<template><spladeRender /></template>
+<template>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" :model-value="modelValue" />
+</template>

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

@@ -2,21 +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 { form }
     },
-    props,
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>

app/tests/Unit/Console/__snapshots__/BuildComponentsTest__it_builds_the_components__7.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 spladeRender = h({
     inheritAttrs: false,
     name: 'SpladeComponentTimeRender',
@@ -14,7 +13,7 @@ const spladeRender = h({
     data: () => {
         return { refreshComponent }
     },
-    props,
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>

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,15 +18,14 @@ refreshComponent.then(() => {
 refreshComponent.finally(() => {
     console.log('finally refreshed')
 })
-
 const spladeRender = h({
     name: 'SpladeComponentTimeStateRender',
     components: { GenericSpladeComponent },
     template: spladeTemplates[props.spladeTemplateId],
     data: () => {
         return { status, refreshComponent }
     },
-    props,
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>

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

@@ -2,18 +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 { message, uppercase }
     },
-    props,
+    props: { spladeBridge: Object, spladeTemplateId: String },
 })
 </script>
-<template><spladeRender /></template>
+<template><spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" /></template>