Splade v0.5 (#51)

* Refactored Transitions + Public Transition/Animation API (#50)
* Persistent layout (#47)
* Teleport component
* Lazy loading (#53)

Author: pascalbaljet

ExtractTransitionClasses.php

@@ -0,0 +1,17 @@
+<?php
+
+use ProtoneMedia\Splade\ServiceProvider;
+use ProtoneMedia\Splade\TransitionRepository;
+
+require __DIR__ . '/vendor/autoload.php';
+
+$transitionRepository = new TransitionRepository;
+
+ServiceProvider::registerTransitionAnimations($transitionRepository);
+
+$classes = implode(' ', $transitionRepository->classes());
+
+file_put_contents(
+    __DIR__ . '/resources/views/transitions/classes.blade.php',
+    "<div class='{$classes}'>\n<!-- This is an automatically generated template so that Tailwind won't purge these transition classes... -->\n</div>",
+);

app/app/Http/Controllers/LazyController.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use ProtoneMedia\Splade\Facades\Splade;
+
+class LazyController
+{
+    public function show()
+    {
+        $sleep = request()->query('sleep', 1);
+
+        return view('lazy', [
+            'always' => 'always',
+            'init'   => Splade::onInit('init'),
+            'lazy'   => Splade::onLazy(fn () => sleep($sleep) ? null : ['key' => 'Hi from controller!']),
+            'time'   => Splade::onLazy(fn () => sleep($sleep) ? null : now()->format('H:i:s')),
+        ]);
+    }
+
+    public function notifications()
+    {
+        return view('notifications', [
+            'notifications' => Splade::onLazy(fn () => sleep(1) ? null : ['Notification 1', 'Notification 2']),
+        ]);
+    }
+}

app/app/Http/Controllers/NavigationController.php

@@ -33,4 +33,14 @@ public function form()
     {
         return view('navigation.form');
     }
+
+    public function videoOne()
+    {
+        return view('navigation.videoOne');
+    }
+
+    public function videoTwo()
+    {
+        return view('navigation.videoTwo');
+    }
 }

app/app/View/Components/Header.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+
+class Header extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(public string $title)
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.header');
+    }
+}

app/app/View/Components/VideoLayout.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\View\Components;
+
+use ProtoneMedia\Splade\Components\PersistentComponent;
+
+class VideoLayout extends PersistentComponent
+{
+    public function render()
+    {
+        return view('navigation.videoLayout');
+    }
+}

app/public/video_no_audio.mp4

@@ -0,0 +1,7 @@
+<div>
+    <h4>{{ $title }}</h4>
+    <h5>{{ $subtitle }}</h5>
+    <h6>{{ $attributes->get('help') }}</h6>
+
+    <div dusk="header-slot">{{ $slot }}</div>
+</div>

app/resources/views/components/header.blade.php

@@ -0,0 +1,48 @@
+@extends('layout')
+
+@section('content')
+
+LazyComponent
+
+<h1>{{ $always }}</h1>
+<h2>{{ $init }}</h2>
+
+<x-splade-lazy attr1="1">
+    <x-slot:placeholder>
+        <p>Placeholder 1</p>
+    </x-slot:placeholder>
+
+    <h3>Lazy slot 1 : {{ $lazy['key'] }}</h3>
+</x-splade-lazy>
+
+<x-splade-lazy attr2="2">
+    <x-slot:placeholder>
+        <p>Placeholder 2</p>
+    </x-slot:placeholder>
+
+    <h4>Lazy slot 2 : {{ $lazy['key'] }}</h4>
+</x-splade-lazy>
+
+<x-splade-toggle>
+    <button class="block" @click="toggle">Load notifications</button>
+
+    <x-splade-lazy show="toggled" url="/lazy/notifications">
+        <x-slot:placeholder>
+            <p>Loading notifications...</p>
+        </x-slot:placeholder>
+    </x-splade-lazy>
+</x-splade-toggle>
+
+<x-splade-toggle>
+    <button class="block" @click="toggle">Load time</button>
+
+    <x-splade-lazy show="toggled">
+        <x-slot:placeholder>
+            <p>Want to see the time?</p>
+        </x-slot:placeholder>
+
+        <h5>{{ $time }}</h5>
+    </x-splade-lazy>
+</x-splade-toggle>
+
+@endsection

app/resources/views/lazy.blade.php

@@ -4,6 +4,8 @@
     <Link dusk="three" href="/navigation/three">Three</Link>
     <Link dusk="notFound" href="/navigation/notFound">notFound</Link>
     <Link dusk="serverError" href="/navigation/serverError">serverError</Link>
+    <Link dusk="video" href="/navigation/video/one">Video</Link>
+    <Link dusk="lazy" href="/lazy">Lazy</Link>
 
     <Link confirm dusk="confirm" href="/navigation/two">Confirm to two</Link>
     <Link

app/resources/views/navigation/nav.blade.php

@@ -0,0 +1,14 @@
+<div class="container mt-4 mx-auto">
+    <h1 class="text-3xl mb-8">{{ $title }}</h1>
+
+    {{ $subtitle }}
+
+    {{ $slot }}
+
+    <div class="fixed bottom-0 left-0 flex justify-between items-center bg-indigo-50 w-full">
+        <h3 class="text-xl ml-8">Persistent Video</h3>
+        <video class="w-full max-w-[16rem] aspect-video" controls loop muted>
+            <source src="/video_no_audio.mp4" type="video/mp4">
+        </video>
+    </div>
+</div>