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 index 98a0e32..2b055e0 100644 --- 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,10 +2,8 @@ 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 }, @@ -13,7 +11,7 @@ const spladeRender = h({ data: () => { return { message, reversed } }, - props, + props: { spladeBridge: Object, spladeTemplateId: String }, }) - + 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 index cd3747e..12e4537 100644 --- 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,9 +1,7 @@ - + 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 index a4d286b..014c7c7 100644 --- 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,9 +1,7 @@ - + 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 index 6b0c222..92b5da7 100644 --- 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 @@ -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 }, + }, }) - + 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 index ec35b3b..98e9c51 100644 --- 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,7 +2,6 @@ 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) @@ -10,7 +9,6 @@ const openend = ref(false) function show() { openend.value = true } - const spladeRender = h({ name: 'SpladeComponentComponentImportRender', components: { GenericSpladeComponent, Dialog, DialogPanel, TransitionRoot, TransitionChild }, @@ -18,7 +16,7 @@ const spladeRender = h({ data: () => { return { openend, show } }, - props, + props: { spladeBridge: Object, spladeTemplateId: String }, }) - + 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 index 64c345c..4d8c61d 100644 --- 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,7 +2,6 @@ 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) @@ -10,7 +9,6 @@ const openend = ref(false) function show() { openend.value = true } - const spladeRender = h({ name: 'SpladeComponentDynamicComponentImportRender', components: { GenericSpladeComponent, Dialog, DialogPanel }, @@ -18,7 +16,7 @@ const spladeRender = h({ data: () => { return { openend, show, TransitionRoot: markRaw(TransitionRoot), TransitionChild: markRaw(TransitionChild) } }, - props, + props: { spladeBridge: Object, spladeTemplateId: String }, }) - + 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 index 9ec8036..b74c776 100644 --- 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,7 +5,6 @@ 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 = () => { @@ -13,7 +12,6 @@ const executeWithCallback = () => { response.value = data.data.response }) } - const spladeRender = h({ name: 'SpladeComponentBladeMethodRender', components: { GenericSpladeComponent }, @@ -21,7 +19,7 @@ const spladeRender = h({ data: () => { return { executeWithCallback, response, execute, sleep } }, - props, + props: { spladeBridge: Object, spladeTemplateId: String }, }) - + 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 index 1b0ec91..110e7dd 100644 --- 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,7 +18,6 @@ execute.then((data) => { fail.catch((data) => { response.value = 'no!' }) - const spladeRender = h({ name: 'SpladeComponentBladeMethodCallbacksRender', components: { GenericSpladeComponent }, @@ -27,7 +25,7 @@ const spladeRender = h({ data: () => { return { response, execute, fail } }, - props, + props: { spladeBridge: Object, spladeTemplateId: String }, }) - + 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 index 0434a95..189a4dc 100644 --- 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 @@ -19,7 +19,7 @@ const spladeRender = h({ data: () => { return { message, setMessage } }, - props, + props: { spladeBridge: Object, spladeTemplateId: String }, }) - + 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 index 961f51a..7b9dd99 100644 --- 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,7 +17,6 @@ onMounted(() => { instance.setDate(props.modelValue) }) - const spladeRender = h({ name: 'SpladeComponentDatePickerRender', components: { GenericSpladeComponent }, @@ -26,7 +24,9 @@ const spladeRender = h({ data: () => { return { emit, setSpladeRef } }, - props, + props: { spladeBridge: Object, spladeTemplateId: String, modelValue: {} }, }) - + 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 index 40a094e..12eaeb6 100644 --- 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,13 +2,11 @@ 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 }, @@ -16,7 +14,7 @@ const spladeRender = h({ data: () => { return { form } }, - props, + props: { spladeBridge: Object, spladeTemplateId: String }, }) - + 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 index 630b897..3554dee 100644 --- 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,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 }, }) - + 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 index d3db628..837d346 100644 --- 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,7 +18,6 @@ refreshComponent.then(() => { refreshComponent.finally(() => { console.log('finally refreshed') }) - const spladeRender = h({ name: 'SpladeComponentTimeStateRender', components: { GenericSpladeComponent }, @@ -27,7 +25,7 @@ const spladeRender = h({ data: () => { return { status, refreshComponent } }, - props, + props: { spladeBridge: Object, spladeTemplateId: String }, }) - + 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 index 44b0bf5..b9d73b5 100644 --- 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,10 +2,8 @@ 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 }, @@ -13,7 +11,7 @@ const spladeRender = h({ data: () => { return { message, uppercase } }, - props, + props: { spladeBridge: Object, spladeTemplateId: String }, }) - + diff --git a/app/tests/Unit/ScriptParserTest.php b/app/tests/Unit/ScriptParserTest.php index 283744f..26b44e9 100644 --- a/app/tests/Unit/ScriptParserTest.php +++ b/app/tests/Unit/ScriptParserTest.php @@ -14,11 +14,11 @@ public function it_can_merge_the_props_when_no_props_are_defined() $this->assertEquals([ 'original' => '', - 'new' => 'const props = defineProps({foo: String});', + 'new' => '{foo: String}', 'keys' => ['foo'], ], $parser->getDefineProps([ 'foo' => 'String', - ])); + ])->toArray()); } /** @test */ @@ -32,9 +32,9 @@ 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' => '{foo: {}, bar: {}}', 'keys' => ['foo', 'bar'], - ], $parser->getDefineProps()); + ], $parser->getDefineProps()->toArray()); } /** @test */ @@ -48,9 +48,9 @@ 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' => '{foo: {}, bar: {}}', 'keys' => ['foo', 'bar'], - ], $parser->getDefineProps()); + ], $parser->getDefineProps()->toArray()); } /** @test */ @@ -64,11 +64,11 @@ 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: String});', + 'new' => '{foo: {}, bar: {}, baz: String}', 'keys' => ['foo', 'bar', 'baz'], ], $parser->getDefineProps([ 'baz' => 'String', - ])); + ])->toArray()); } /** @test */ @@ -82,9 +82,9 @@ public function it_can_extract_the_define_props_when_called_with_an_object() $this->assertEquals([ 'original' => 'defineProps({foo: {type: String}, bar: {type: Array}});', - 'new' => 'const props = defineProps({foo: {type: String}, bar: {type: Array}});', + 'new' => '{foo: {type: String}, bar: {type: Array}}', 'keys' => ['foo', 'bar'], - ], $parser->getDefineProps()); + ], $parser->getDefineProps()->toArray()); } /** @test */ @@ -98,9 +98,9 @@ public function it_can_extract_the_define_props_when_called_with_an_object_and_o $this->assertEquals([ 'original' => 'defineProps({foo: String, bar: Array});', - 'new' => 'const props = defineProps({foo: String, bar: Array});', + 'new' => '{foo: String, bar: Array}', 'keys' => ['foo', 'bar'], - ], $parser->getDefineProps()); + ], $parser->getDefineProps()->toArray()); } /** @test */ @@ -114,11 +114,11 @@ public function it_can_extract_the_define_props_when_called_with_an_object_and_m $this->assertEquals([ 'original' => 'defineProps({foo: {type: String}, bar: {type: Array}});', - 'new' => 'const props = defineProps({baz: String, foo: {type: String}, bar: {type: Array}});', + 'new' => '{baz: String, foo: {type: String}, bar: {type: Array}}', 'keys' => ['foo', 'bar', 'baz'], ], $parser->getDefineProps([ 'baz' => 'String', - ])); + ])->toArray()); } /** @test */ @@ -132,11 +132,11 @@ public function it_can_extract_the_define_props_when_called_with_an_object_and_o $this->assertEquals([ 'original' => 'defineProps({foo: String, bar: Array});', - 'new' => 'const props = defineProps({baz: String, foo: String, bar: Array});', + 'new' => '{baz: String, foo: String, bar: Array}', 'keys' => ['foo', 'bar', 'baz'], ], $parser->getDefineProps([ 'baz' => 'String', - ])); + ])->toArray()); } /** @test */ @@ -150,9 +150,9 @@ public function it_can_extract_the_define_props_when_called_with_an_object_with_ $this->assertEquals([ 'original' => 'const props = defineProps({foo: {type: String}, bar: {type: Array}});', - 'new' => 'const props = defineProps({foo: {type: String}, bar: {type: Array}});', + 'new' => '{foo: {type: String}, bar: {type: Array}}', 'keys' => ['foo', 'bar'], - ], $parser->getDefineProps()); + ], $parser->getDefineProps()->toArray()); } /** @test */ diff --git a/src/BladeViewExtractor.php b/src/BladeViewExtractor.php index 4dc2d04..4f506e0 100644 --- a/src/BladeViewExtractor.php +++ b/src/BladeViewExtractor.php @@ -7,7 +7,6 @@ use Illuminate\Support\Collection; use Illuminate\Support\Facades\Process; use Illuminate\Support\Str; -use Illuminate\View\ComponentAttributeBag; use InvalidArgumentException; use ProtoneMedia\SpladeCore\Facades\SpladePlugin; @@ -123,29 +122,22 @@ public function handle(Filesystem $filesystem): string } // Adjust the current defineProps, or generate a new one if it didn't exist yet. - [$script, $defineProps, $definePropsObject, $definePropNames] = $this->extractDefinePropsFromScript(); - - $attrs = collect($definePropNames)->mapWithKeys(function (string $prop) { - return ['v-bind:'.$prop => $prop]; - })->all(); - - $bag = new ComponentAttributeBag($attrs); - - $template = ""; + $defineVueProps = $this->extractDefinePropsFromScript(); + $propsBag = $defineVueProps->toAttributeBag(); $vueComponent = implode(PHP_EOL, array_filter([ '', - $template, + "", ])); $directory = config('splade-core.compiled_scripts'); @@ -324,10 +316,8 @@ protected function replaceElementRefs(string $script): string /** * Extract the defineProps from the script. - * - * @return array */ - protected function extractDefinePropsFromScript(): array + protected function extractDefinePropsFromScript(): DefineVueProps { $bladePropsAsVueProps = Collection::make($this->getBladePropsThatArePassedAsVueProps()) ->map(function (object $specs) { @@ -345,18 +335,18 @@ protected function extractDefinePropsFromScript(): array ->when($this->isComponent(), fn (Collection $collection) => $collection->prepend('Object', 'spladeBridge')) ->when($this->viewUsesVModel(), fn (Collection $collection) => $collection->put('modelValue', '{}')); - $defineProps = $this->scriptParser->getDefineProps($defaultProps->all()); + $defineVueProps = $this->scriptParser->getDefineProps($defaultProps->all()); - if (! $defineProps['original']) { - return [$this->originalScript, $defineProps['new'], $defineProps['object'], $defineProps['keys']]; + if (! $defineVueProps->getOriginalScript()) { + $defineVueProps->setOriginalScript($this->originalScript); + + } else { + $defineVueProps->setOriginalScript( + str_replace($defineVueProps->getOriginalScript(), '', $this->originalScript) + ); } - return [ - str_replace($defineProps['original'], '', $this->originalScript), - $defineProps['new'], - $defineProps['object'], - $defineProps['keys'], - ]; + return $defineVueProps; } /** @@ -522,7 +512,7 @@ protected function getImportedComponents(): array /** * Renders the SpladeRender 'h'-function. */ - protected function renderSpladeRenderFunction($definePropsObject): string + protected function renderSpladeRenderFunction(DefineVueProps $defineVueProps): string { $inheritAttrs = $this->attributesAreCustomBound() ? <<<'JS' inheritAttrs: false, @@ -549,6 +539,8 @@ protected function renderSpladeRenderFunction($definePropsObject): string components: { {$components} }, JS : ''; + $definePropsObject = $defineVueProps->getNewPropsObject(); + return <<getNewPropsObject(); + + return "const props = defineProps({$object});"; + } + + public function getPropKeys(): array + { + return $this->propKeys; + } + + public function addPropKey(string $key): self + { + $this->propKeys[] = $key; + + return $this; + } + + public function getNewPropsObject(): string + { + return $this->newPropsObject; + } + + public function setNewProjectObject(string $newPropsObject): self + { + $this->newPropsObject = $newPropsObject; + + return $this; + } + + public function getOriginalScript(): string + { + return $this->originalScript; + } + + public function setOriginalScript(string $script): self + { + $this->originalScript = trim($script); + + return $this; + } + + public function toArray() + { + return [ + 'original' => $this->getOriginalScript(), + 'new' => $this->getNewPropsObject(), + 'keys' => $this->getPropKeys(), + ]; + } + + public function toAttributeBag(): ComponentAttributeBag + { + $attrs = collect($this->getPropKeys())->mapWithKeys(function (string $prop) { + $key = Str::kebab($prop); + + return ['v-bind:'.$key => $prop]; + })->all(); + + return new ComponentAttributeBag($attrs); + } +} diff --git a/src/ScriptParser.php b/src/ScriptParser.php index a4391ab..b6bb895 100644 --- a/src/ScriptParser.php +++ b/src/ScriptParser.php @@ -97,9 +97,9 @@ private function toPropsObjectDefinition(array|Collection $props): string * Returns the defineProps() call expression and additionally merges * the given props with the ones that are defined in the script. */ - public function getDefineProps(array $mergeWith = []): array + public function getDefineProps(array $mergeWith = []): DefineVueProps { - $propKeys = []; + $defineVueProps = new DefineVueProps; foreach ($this->rootNode->query('CallExpression[callee.name="defineProps"]') as $node) { /** @var CallExpression $node */ @@ -110,14 +110,16 @@ public function getDefineProps(array $mergeWith = []): array }) ->implode(PHP_EOL); + $defineVueProps->setOriginalScript($definePropsScript); + $firstArgument = $node->getArguments()[0] ?? null; $newPropsObject = '{}'; if ($firstArgument instanceof ArrayExpression) { $props = collect($firstArgument->getElements()) ->map(fn (StringLiteral $element) => $element->getValue()) - ->mapWithKeys(function (string $prop) use (&$propKeys) { - $propKeys[] = $prop; + ->mapWithKeys(function (string $prop) use ($defineVueProps) { + $defineVueProps->addPropKey($prop); return [$prop => '']; }) @@ -127,10 +129,10 @@ public function getDefineProps(array $mergeWith = []): array $newPropsObject = "{{$props}}"; } elseif ($firstArgument instanceof ObjectExpression) { $props = collect($firstArgument->getProperties()) - ->mapWithKeys(function (Property $property) use (&$propKeys) { + ->mapWithKeys(function (Property $property) use ($defineVueProps) { $key = $property->getKey()->getName(); - $propKeys[] = $key; + $defineVueProps->addPropKey($key); if ($property->getValue() instanceof Identifier) { return [$key => $property->getValue()->getName()]; @@ -150,22 +152,23 @@ public function getDefineProps(array $mergeWith = []): array $newPropsObject = "{{$props}}"; } - return [ - 'original' => trim($definePropsScript), - 'new' => "const props = defineProps({$newPropsObject});", - 'object' => $newPropsObject, - 'keys' => [...$propKeys, ...array_keys($mergeWith)], - ]; + foreach (array_keys($mergeWith) as $key) { + $defineVueProps->addPropKey($key); + } + + return $defineVueProps->setNewProjectObject($newPropsObject); + } + + foreach (array_keys($mergeWith) as $key) { + $defineVueProps->addPropKey($key); } - $keys = $this->toPropsObjectDefinition($mergeWith); + return $defineVueProps + ->setOriginalScript('') + ->setNewProjectObject( + '{'.$this->toPropsObjectDefinition($mergeWith).'}' + ); - return [ - 'original' => '', - 'new' => 'const props = defineProps({'.$keys.'});', - 'object' => '{'.$keys.'}', - 'keys' => [...$propKeys, ...array_keys($mergeWith)], - ]; } /**