WIP

protonemedia · Jan 29, 2024 · 103d45a · 103d45a
1 parent 7500e8e
commit 103d45a
Show file tree

Hide file tree

Showing 19 changed files with 81 additions and 116 deletions.
diff --git a/app/resources/views/components/child.blade.php b/app/resources/views/components/child.blade.php
@@ -4,9 +4,13 @@
 
 <h2>Child component</h2>
 <div>
+    --DEFAULT SLOT--
     Hi from {{ 'child' }}
     <h3>Slot <span v-html="childVar" /></h3>
     {{ $slot }}
-
+    --SUBSLOT--
+    What's that, Hawaiian Noises?
     {{ $subslot ?? null }}
+    --SUBSLOT END--
+    Alright
 </div>
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
@@ -14,7 +14,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -13,7 +13,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-template-id="spladeTemplateId"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -13,7 +13,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-template-id="spladeTemplateId"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -78,6 +78,7 @@ const spladeRender = {
         :renamed="renamed"
         :js-object="jsObject"
         :data-from-method="dataFromMethod"
-        ><template><slot /></template
-    ></spladeRender>
+    >
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -19,7 +19,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -19,7 +19,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -23,7 +23,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -29,7 +29,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -23,7 +23,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -27,7 +27,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" :model-value="modelValue"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId" :model-value="modelValue">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -17,7 +17,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -17,7 +17,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -29,7 +29,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </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
@@ -14,7 +14,7 @@ const spladeRender = {
 }
 </script>
 <template>
-    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId"
-        ><template><slot /></template
-    ></spladeRender>
+    <spladeRender :splade-bridge="spladeBridge" :splade-template-id="spladeTemplateId">
+        <template v-for="(_, slot) of $slots" #[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+    </spladeRender>
 </template>
diff --git a/lib/GenericSpladeComponent.vue b/lib/GenericSpladeComponent.vue
@@ -6,20 +6,12 @@ const props = defineProps({
         type: Object,
         required: true,
     },
-    slots: {
-        type: Array,
-        required: false,
-        default: () => ["default"],
-    },
 });
 
 const tag = props.bridge.tag;
 
 function generateTemplate() {
-    const slots = props.slots.map((slot) => {
-        return `<slot name="${slot}" />`;
-    });
-    return `<${tag}>${slots}</${tag}>`;
+    return `<${tag}><template v-for="(_, slot) of $slots" v-slot:[slot]="scope"><slot :name="slot" v-bind="scope" /></template></${tag}>`;
 }
 
 const template = ref(generateTemplate());
@@ -47,8 +39,8 @@ const render = computed(() => {
 
 <template>
     <render :splade-bridge="bridge" :splade-template-id="templateId">
-        <template v-for="slotName in slots" :key="slotName" #[slotName]>
-            <slot :name="slotName" />
-        </template>
+        <template v-for="(_, slot) of $slots" #[slot]="scope"
+            ><slot :name="slot" v-bind="scope"
+        /></template>
     </render>
 </template>
diff --git a/src/BladeViewExtractor.php b/src/BladeViewExtractor.php
@@ -125,15 +125,6 @@ public function handle(Filesystem $filesystem): string
         $defineVueProps = $this->extractDefinePropsFromScript();
         $propsBag = $defineVueProps->toAttributeBag();
 
-        $slots = collect($this->data['__laravel_slots'] ?? [])
-            ->keys()
-            ->map(function (string $slot) {
-                $slot = $slot === '__default' ? 'default' : Str::kebab($slot);
-
-                return "<template #{$slot}><slot name=\"{$slot}\" /></template>";
-            })
-            ->implode(PHP_EOL) ?: '<template><slot /></template>';
-
         $vueComponent = implode(PHP_EOL, array_filter([
             '<script setup>',
             $this->renderImports(),
@@ -146,7 +137,9 @@ public function handle(Filesystem $filesystem): string
             $defineVueProps->getOriginalScript(),
             $this->renderSpladeRenderFunction($defineVueProps),
             '</script>',
-            "<template><spladeRender {$propsBag->toHtml()}>{$slots}</spladeRender></template>",
+            "<template><spladeRender {$propsBag->toHtml()}>",
+            '<template v-for="(_, slot) of $slots" v-slot:[slot]="scope"><slot :name="slot" v-bind="scope"/></template>',
+            '</spladeRender></template>',
         ]));
 
         $directory = config('splade-core.compiled_scripts');

diff --git a/src/Commands/BuildComponents.php b/src/Commands/BuildComponents.php
@@ -27,7 +27,7 @@ public function handle(ComponentHelper $componentHelper): int
         }
 
         foreach (config('view.paths') as $path) {
-            $this->info("Searching for components in {$path}");
+            $this->info("Searching in {$path}");
 
             $files = $filesystem->allFiles($path);
 

diff --git a/src/View/Factory.php b/src/View/Factory.php
@@ -3,14 +3,12 @@
 namespace ProtoneMedia\SpladeCore\View;
 
 use Illuminate\Support\Arr;
-use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Js;
 use Illuminate\Support\Str;
 use Illuminate\View\Component;
 use Illuminate\View\ComponentAttributeBag;
 use Illuminate\View\ComponentSlot;
 use Illuminate\View\Factory as BaseFactory;
-use Illuminate\View\View;
 use ProtoneMedia\SpladeCore\AddSpladeToComponentData;
 use ProtoneMedia\SpladeCore\ResolveOnce;
 
@@ -26,6 +24,11 @@ class Factory extends BaseFactory
      */
     protected static array $spladeComponents = [];
 
+    /**
+     * The original slots before they were replaced with a Vue slot.
+     */
+    protected array $originalSlots = [];
+
     /**
      * Enable tracking of Splade components.
      */
@@ -108,47 +111,45 @@ public function pushSpladeTemplate($id, $value): void
         );
     }
 
-    private $originalSlots = [];
-
     protected function componentData()
     {
-        Log::debug('Fetching slots for component', [
-            'view' => $view = $this->componentData[count($this->componentStack)]['componentName'] ?? '',
-        ]);
-
-        $templateId = $this->componentData[count($this->componentStack) + 1]['spladeBridge']['template_hash'] ?? null;
+        $this->originalSlots = [];
 
         $data = parent::componentData();
 
         if (! array_key_exists('spladeBridge', $data)) {
             return $data;
         }
 
-        $this->originalSlots[count($this->componentStack)] = [];
+        $templateId = $this->componentData[count($this->componentStack) + 1]['spladeBridge']['template_hash'] ?? null;
 
         $data['__laravel_slots'] = collect($data['__laravel_slots'] ?? [])
-            ->map(function (ComponentSlot $slot, $name) use ($templateId, $view) {
+            ->map(function (ComponentSlot $slot, $name) use ($templateId) {
                 if ($slot->isEmpty()) {
                     return $slot;
                 }
 
                 $name = $name === '__default' ? 'default' : Str::kebab($name);
 
-                $this->originalSlots[count($this->componentStack)][$name] = [
-                    'slot' => $slot,
-                    'component' => $view,
-                ];
+                $this->originalSlots[$name] = $slot;
 
-                $slot = '<slot name="'.$name.'"></slot>';
+                $vueSlot = '<slot name="'.$name.'"></slot>';
 
                 return new ComponentSlot(
                     static::$trackSpladeComponents
-                        ? "<!--splade-template-id=\"{$templateId}\"-->{$slot}"
-                        : $slot);
+                        ? "<!--splade-template-id=\"{$templateId}\"-->{$vueSlot}"
+                        : $vueSlot
+                );
             })
             ->all();
 
-        $data['slot'] = $data['__laravel_slots']['__default'] ?? null;
+        foreach ($data['__laravel_slots'] as $name => $slot) {
+            if ($name === '__default') {
+                $name = 'slot';
+            }
+
+            $data[$name] = $slot;
+        }
 
         return $data;
     }
@@ -162,14 +163,6 @@ protected function componentData()
      */
     public function renderComponent()
     {
-        $component = Arr::last($this->componentStack);
-
-        // if ($component instanceof View) {
-        //     Log::debug('Rendering component', [
-        //         'view' => $component->name(),
-        //     ]);
-        // }
-
         /** @var array */
         $componentData = $this->componentData[$this->currentComponent()];
 
@@ -185,22 +178,11 @@ public function renderComponent()
 
         $output = parent::renderComponent();
 
-        // if ($component instanceof View) {
-        //     Log::debug('Rendered component', [
-        //         'view' => $view = $component->name(),
-        //     ]);
-
-        //     if ($view === 'components.layout') {
-        //         // dd($output, $this);
-        //     }
+        // if ($componentData['componentName'] === 'child') {
+        //     dd($output, $this);
         // }
-        // $output = str_replace('###INSERT-SLOT###', $this->originalSlots[count($this->componentStack)]['default']->toHtml() ?? '', $output);
 
         if (! $spladeBridge) {
-            // if ($view === 'components.layout') {
-            //     // dd($output, $this);
-            // }
-
             return $output;
         }
 
@@ -244,20 +226,13 @@ public function renderComponent()
 
         $this->pushSpladeTemplate($templateId, $output);
 
-        $slots = $this->originalSlots[count($this->componentStack)] ?? [];
+        $slotsHtml = collect($this->originalSlots)->map(function ($slot, $name) {
+            $name = $name === '__default' ? 'default' : Str::kebab($name);
 
-        $slotsHtml = collect($slots)->map(function ($slot, $name) {
-            return "<template #{$name}>{$slot['slot']->toHtml()}</template>";
+            return "<template #{$name}>{$slot->toHtml()}</template>";
         })->implode("\n");
 
-        $slotKeys = collect($slots)
-            ->keys()
-            ->map(function ($name) {
-                return "'{$name}'";
-            })
-            ->implode(', ');
-
-        $genericComponent = "<generic-splade-component {$attrs} :bridge=\"{$spladeBridgeHtml}\" :slots=\"[{$slotKeys}]\">
+        $genericComponent = "<generic-splade-component {$attrs} :bridge=\"{$spladeBridgeHtml}\">
             {$slotsHtml}
         </generic-splade-component>";