Added additional test + new props object

protonemedia · Jan 17, 2024 · db7ddbb · db7ddbb
1 parent 63ac377
commit db7ddbb
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 10 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/ScriptParserTest.php b/app/tests/Unit/ScriptParserTest.php
@@ -15,6 +15,7 @@ public function it_can_merge_the_props_when_no_props_are_defined()
         $this->assertEquals([
             'original' => '',
             'new' => 'const props = defineProps({foo: String});',
+            'keys' => ['foo'],
         ], $parser->getDefineProps([
             'foo' => 'String',
         ]));
@@ -32,6 +33,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: {}});',
+            'keys' => ['foo', 'bar'],
         ], $parser->getDefineProps());
     }
 
@@ -47,6 +49,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: {}});',
+            'keys' => ['foo', 'bar'],
         ], $parser->getDefineProps());
     }
 
@@ -62,6 +65,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: String});',
+            'keys' => ['foo', 'bar', 'baz'],
         ], $parser->getDefineProps([
             'baz' => 'String',
         ]));
@@ -79,6 +83,7 @@ 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}});',
+            'keys' => ['foo', 'bar'],
         ], $parser->getDefineProps());
     }
 
@@ -94,6 +99,7 @@ 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});',
+            'keys' => ['foo', 'bar'],
         ], $parser->getDefineProps());
     }
 
@@ -109,6 +115,7 @@ 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}});',
+            'keys' => ['foo', 'bar', 'baz'],
         ], $parser->getDefineProps([
             'baz' => 'String',
         ]));
@@ -126,6 +133,7 @@ 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});',
+            'keys' => ['foo', 'bar', 'baz'],
         ], $parser->getDefineProps([
             'baz' => 'String',
         ]));
@@ -143,6 +151,7 @@ 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}});',
+            'keys' => ['foo', 'bar'],
         ], $parser->getDefineProps());
     }
 

diff --git a/src/BladeViewExtractor.php b/src/BladeViewExtractor.php
@@ -7,6 +7,7 @@
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Process;
 use Illuminate\Support\Str;
+use Illuminate\View\ComponentAttributeBag;
 use InvalidArgumentException;
 use ProtoneMedia\SpladeCore\Facades\SpladePlugin;
 
@@ -122,7 +123,15 @@ public function handle(Filesystem $filesystem): string
         }
 
         // Adjust the current defineProps, or generate a new one if it didn't exist yet.
-        [$script, $defineProps] = $this->extractDefinePropsFromScript();
+        [$script, $defineProps, $definePropsObject, $definePropNames] = $this->extractDefinePropsFromScript();
+
+        $attrs = collect($definePropNames)->mapWithKeys(function (string $prop) {
+            return ['v-bind:'.$prop => $prop];
+        })->all();
+
+        $bag = new ComponentAttributeBag($attrs);
+
+        $template = "<template><spladeRender {$bag->toHtml()} /></template>";
 
         $vueComponent = implode(PHP_EOL, array_filter([
             '<script setup>',
@@ -134,9 +143,9 @@ public function handle(Filesystem $filesystem): string
             $this->renderJavascriptFunctionToRefreshComponent(),
             $this->renderElementRefStoreAndSetter(),
             $script,
-            $this->renderSpladeRenderFunction(),
+            $this->renderSpladeRenderFunction($definePropsObject),
             '</script>',
-            '<template><spladeRender /></template>',
+            $template,
         ]));
 
         $directory = config('splade-core.compiled_scripts');
@@ -339,12 +348,14 @@ protected function extractDefinePropsFromScript(): array
         $defineProps = $this->scriptParser->getDefineProps($defaultProps->all());
 
         if (! $defineProps['original']) {
-            return [$this->originalScript, $defineProps['new']];
+            return [$this->originalScript, $defineProps['new'], $defineProps['object'], $defineProps['keys']];
         }
 
         return [
             str_replace($defineProps['original'], '', $this->originalScript),
             $defineProps['new'],
+            $defineProps['object'],
+            $defineProps['keys'],
         ];
     }
 
@@ -511,7 +522,7 @@ protected function getImportedComponents(): array
     /**
      * Renders the SpladeRender 'h'-function.
      */
-    protected function renderSpladeRenderFunction(): string
+    protected function renderSpladeRenderFunction($definePropsObject): string
     {
         $inheritAttrs = $this->attributesAreCustomBound() ? <<<'JS'
 inheritAttrs: false,
@@ -545,7 +556,7 @@ protected function renderSpladeRenderFunction(): string
     {$componentsObject}
     template: spladeTemplates[props.spladeTemplateId],
     data: () => { return { {$dataObject} } },
-    props,
+    props: {$definePropsObject},
 });
 JS;
     }

diff --git a/src/ScriptParser.php b/src/ScriptParser.php
@@ -99,6 +99,8 @@ private function toPropsObjectDefinition(array|Collection $props): string
      */
     public function getDefineProps(array $mergeWith = []): array
     {
+        $propKeys = [];
+
         foreach ($this->rootNode->query('CallExpression[callee.name="defineProps"]') as $node) {
             /** @var CallExpression $node */
             $definePropsScript = collect(explode(PHP_EOL, $this->script))
@@ -114,16 +116,22 @@ public function getDefineProps(array $mergeWith = []): array
             if ($firstArgument instanceof ArrayExpression) {
                 $props = collect($firstArgument->getElements())
                     ->map(fn (StringLiteral $element) => $element->getValue())
-                    ->mapWithKeys(fn (string $prop) => [$prop => ''])
+                    ->mapWithKeys(function (string $prop) use (&$propKeys) {
+                        $propKeys[] = $prop;
+
+                        return [$prop => ''];
+                    })
                     ->merge($mergeWith)
                     ->pipe(fn (Collection $props) => $this->toPropsObjectDefinition($props));
 
                 $newPropsObject = "{{$props}}";
             } elseif ($firstArgument instanceof ObjectExpression) {
                 $props = collect($firstArgument->getProperties())
-                    ->mapWithKeys(function (Property $property) {
+                    ->mapWithKeys(function (Property $property) use (&$propKeys) {
                         $key = $property->getKey()->getName();
 
+                        $propKeys[] = $key;
+
                         if ($property->getValue() instanceof Identifier) {
                             return [$key => $property->getValue()->getName()];
                         }
@@ -145,6 +153,8 @@ public function getDefineProps(array $mergeWith = []): array
             return [
                 'original' => trim($definePropsScript),
                 'new' => "const props = defineProps({$newPropsObject});",
+                'object' => $newPropsObject,
+                'keys' => [...$propKeys, ...array_keys($mergeWith)],
             ];
         }
 
@@ -153,6 +163,8 @@ public function getDefineProps(array $mergeWith = []): array
         return [
             'original' => '',
             'new' => 'const props = defineProps({'.$keys.'});',
+            'object' => '{'.$keys.'}',
+            'keys' => [...$propKeys, ...array_keys($mergeWith)],
         ];
     }