Skip to content
This repository was archived by the owner on Feb 27, 2024. It is now read-only.

Commit db7ddbb

Browse files
pascalbaljetpascalbaljet
committed
Added additional test + new props object
1 parent 63ac377 commit db7ddbb

File tree

5 files changed

+54
-10
lines changed

5 files changed

+54
-10
lines changed

‎app/resources/views/props-in-template.blade.php

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
11
<x-layout>
2-
<x-props-in-template />
2+
<script setup>
3+
const title = ref('Default title')
4+
5+
function updateTitle() {
6+
title.value = 'New title'
7+
}
8+
</script>
9+
10+
<x-props-in-template v-bind:title="title" />
11+
12+
<button @click="updateTitle">Update title</button>
313
</x-layout>

‎app/tests/Browser/PropsTest.php

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ public function it_exposes_the_props_to_the_template_data()
1313
$this->browse(function (Browser $browser) {
1414
$browser->visit('/props-in-template')
1515
->assertSeeIn('h2', 'Default title')
16-
->assertSeeIn('h3', 'Default subtitle');
16+
->assertSeeIn('h3', 'Default subtitle')
17+
->press('Update title')
18+
->assertSeeIn('h2', 'New title');
1719
});
1820
}
1921
}

‎app/tests/Unit/ScriptParserTest.php

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ public function it_can_merge_the_props_when_no_props_are_defined()
1515
$this->assertEquals([
1616
'original' => '',
1717
'new' => 'const props = defineProps({foo: String});',
18+
'keys' => ['foo'],
1819
], $parser->getDefineProps([
1920
'foo' => 'String',
2021
]));
@@ -32,6 +33,7 @@ public function it_can_extract_the_define_props_when_called_with_an_array()
3233
$this->assertEquals([
3334
'original' => "defineProps(['foo', 'bar']);",
3435
'new' => 'const props = defineProps({foo: {}, bar: {}});',
36+
'keys' => ['foo', 'bar'],
3537
], $parser->getDefineProps());
3638
}
3739

@@ -47,6 +49,7 @@ public function it_can_extract_the_define_props_when_called_with_an_array_with_a
4749
$this->assertEquals([
4850
'original' => "const props = defineProps(['foo', 'bar']);",
4951
'new' => 'const props = defineProps({foo: {}, bar: {}});',
52+
'keys' => ['foo', 'bar'],
5053
], $parser->getDefineProps());
5154
}
5255

@@ -62,6 +65,7 @@ public function it_can_extract_the_define_props_when_called_with_an_array_and_me
6265
$this->assertEquals([
6366
'original' => "defineProps(['foo', 'bar']);",
6467
'new' => 'const props = defineProps({foo: {}, bar: {}, baz: String});',
68+
'keys' => ['foo', 'bar', 'baz'],
6569
], $parser->getDefineProps([
6670
'baz' => 'String',
6771
]));
@@ -79,6 +83,7 @@ public function it_can_extract_the_define_props_when_called_with_an_object()
7983
$this->assertEquals([
8084
'original' => 'defineProps({foo: {type: String}, bar: {type: Array}});',
8185
'new' => 'const props = defineProps({foo: {type: String}, bar: {type: Array}});',
86+
'keys' => ['foo', 'bar'],
8287
], $parser->getDefineProps());
8388
}
8489

@@ -94,6 +99,7 @@ public function it_can_extract_the_define_props_when_called_with_an_object_and_o
9499
$this->assertEquals([
95100
'original' => 'defineProps({foo: String, bar: Array});',
96101
'new' => 'const props = defineProps({foo: String, bar: Array});',
102+
'keys' => ['foo', 'bar'],
97103
], $parser->getDefineProps());
98104
}
99105

@@ -109,6 +115,7 @@ public function it_can_extract_the_define_props_when_called_with_an_object_and_m
109115
$this->assertEquals([
110116
'original' => 'defineProps({foo: {type: String}, bar: {type: Array}});',
111117
'new' => 'const props = defineProps({baz: String, foo: {type: String}, bar: {type: Array}});',
118+
'keys' => ['foo', 'bar', 'baz'],
112119
], $parser->getDefineProps([
113120
'baz' => 'String',
114121
]));
@@ -126,6 +133,7 @@ public function it_can_extract_the_define_props_when_called_with_an_object_and_o
126133
$this->assertEquals([
127134
'original' => 'defineProps({foo: String, bar: Array});',
128135
'new' => 'const props = defineProps({baz: String, foo: String, bar: Array});',
136+
'keys' => ['foo', 'bar', 'baz'],
129137
], $parser->getDefineProps([
130138
'baz' => 'String',
131139
]));
@@ -143,6 +151,7 @@ public function it_can_extract_the_define_props_when_called_with_an_object_with_
143151
$this->assertEquals([
144152
'original' => 'const props = defineProps({foo: {type: String}, bar: {type: Array}});',
145153
'new' => 'const props = defineProps({foo: {type: String}, bar: {type: Array}});',
154+
'keys' => ['foo', 'bar'],
146155
], $parser->getDefineProps());
147156
}
148157

‎src/BladeViewExtractor.php

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
use Illuminate\Support\Collection;
88
use Illuminate\Support\Facades\Process;
99
use Illuminate\Support\Str;
10+
use Illuminate\View\ComponentAttributeBag;
1011
use InvalidArgumentException;
1112
use ProtoneMedia\SpladeCore\Facades\SpladePlugin;
1213

@@ -122,7 +123,15 @@ public function handle(Filesystem $filesystem): string
122123
}
123124

124125
// Adjust the current defineProps, or generate a new one if it didn't exist yet.
125-
[$script, $defineProps] = $this->extractDefinePropsFromScript();
126+
[$script, $defineProps, $definePropsObject, $definePropNames] = $this->extractDefinePropsFromScript();
127+
128+
$attrs = collect($definePropNames)->mapWithKeys(function (string $prop) {
129+
return ['v-bind:'.$prop => $prop];
130+
})->all();
131+
132+
$bag = new ComponentAttributeBag($attrs);
133+
134+
$template = "<template><spladeRender {$bag->toHtml()} /></template>";
126135

127136
$vueComponent = implode(PHP_EOL, array_filter([
128137
'<script setup>',
@@ -134,9 +143,9 @@ public function handle(Filesystem $filesystem): string
134143
$this->renderJavascriptFunctionToRefreshComponent(),
135144
$this->renderElementRefStoreAndSetter(),
136145
$script,
137-
$this->renderSpladeRenderFunction(),
146+
$this->renderSpladeRenderFunction($definePropsObject),
138147
'</script>',
139-
'<template><spladeRender /></template>',
148+
$template,
140149
]));
141150

142151
$directory = config('splade-core.compiled_scripts');
@@ -339,12 +348,14 @@ protected function extractDefinePropsFromScript(): array
339348
$defineProps = $this->scriptParser->getDefineProps($defaultProps->all());
340349

341350
if (! $defineProps['original']) {
342-
return [$this->originalScript, $defineProps['new']];
351+
return [$this->originalScript, $defineProps['new'], $defineProps['object'], $defineProps['keys']];
343352
}
344353

345354
return [
346355
str_replace($defineProps['original'], '', $this->originalScript),
347356
$defineProps['new'],
357+
$defineProps['object'],
358+
$defineProps['keys'],
348359
];
349360
}
350361

@@ -511,7 +522,7 @@ protected function getImportedComponents(): array
511522
/**
512523
* Renders the SpladeRender 'h'-function.
513524
*/
514-
protected function renderSpladeRenderFunction(): string
525+
protected function renderSpladeRenderFunction($definePropsObject): string
515526
{
516527
$inheritAttrs = $this->attributesAreCustomBound() ? <<<'JS'
517528
inheritAttrs: false,
@@ -545,7 +556,7 @@ protected function renderSpladeRenderFunction(): string
545556
{$componentsObject}
546557
template: spladeTemplates[props.spladeTemplateId],
547558
data: () => { return { {$dataObject} } },
548-
props,
559+
props: {$definePropsObject},
549560
});
550561
JS;
551562
}

‎src/ScriptParser.php

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,8 @@ private function toPropsObjectDefinition(array|Collection $props): string
9999
*/
100100
public function getDefineProps(array $mergeWith = []): array
101101
{
102+
$propKeys = [];
103+
102104
foreach ($this->rootNode->query('CallExpression[callee.name="defineProps"]') as $node) {
103105
/** @var CallExpression $node */
104106
$definePropsScript = collect(explode(PHP_EOL, $this->script))
@@ -114,16 +116,22 @@ public function getDefineProps(array $mergeWith = []): array
114116
if ($firstArgument instanceof ArrayExpression) {
115117
$props = collect($firstArgument->getElements())
116118
->map(fn (StringLiteral $element) => $element->getValue())
117-
->mapWithKeys(fn (string $prop) => [$prop => ''])
119+
->mapWithKeys(function (string $prop) use (&$propKeys) {
120+
$propKeys[] = $prop;
121+
122+
return [$prop => ''];
123+
})
118124
->merge($mergeWith)
119125
->pipe(fn (Collection $props) => $this->toPropsObjectDefinition($props));
120126

121127
$newPropsObject = "{{$props}}";
122128
} elseif ($firstArgument instanceof ObjectExpression) {
123129
$props = collect($firstArgument->getProperties())
124-
->mapWithKeys(function (Property $property) {
130+
->mapWithKeys(function (Property $property) use (&$propKeys) {
125131
$key = $property->getKey()->getName();
126132

133+
$propKeys[] = $key;
134+
127135
if ($property->getValue() instanceof Identifier) {
128136
return [$key => $property->getValue()->getName()];
129137
}
@@ -145,6 +153,8 @@ public function getDefineProps(array $mergeWith = []): array
145153
return [
146154
'original' => trim($definePropsScript),
147155
'new' => "const props = defineProps({$newPropsObject});",
156+
'object' => $newPropsObject,
157+
'keys' => [...$propKeys, ...array_keys($mergeWith)],
148158
];
149159
}
150160

@@ -153,6 +163,8 @@ public function getDefineProps(array $mergeWith = []): array
153163
return [
154164
'original' => '',
155165
'new' => 'const props = defineProps({'.$keys.'});',
166+
'object' => '{'.$keys.'}',
167+
'keys' => [...$propKeys, ...array_keys($mergeWith)],
156168
];
157169
}
158170

0 commit comments

Comments
 (0)