Add support for inertia deferred props

[matthiasweiss]

Hello 👋

I've drafted up an initial version of support for inertia v2 deferred props.

Usage looks like this:

class AutoDeferredData extends Data
{
    #[AutoInertiaDeferred]
    public InertiaDeferred $deferred;
}

$data = AutoDeferredData::from(['string' => Inertia::defer(fn () => 'Deferred Value')]

I'm not really happy with the implementation, since the concept of deferred props is technically not related to lazy properties, but the implementation is basically copied 1:1. On the other hand, this kind of makes sense, since the effects of lazy and deferred properties are very similar.

My other approach would've been to basically copy the structure of the abstract Lazy, AutoLazy & InertiaLazy classes, but this would've required a bunch more changes.

However, I still don't really like how I've done it here, but I don't think this can be done a lot better without larger refactoring. Maybe a bigger refactoring even makes sense, since merging props should also be implemented.

I'm definitely open for any suggestions!

Best,
Matthias

[matthiasweiss]

This is mixed instead of DeferProps', since the $valueparameter in theAutoInertiaDeferred::build` method is mixed and needs to be passed to this function

[matthiasweiss]

@rubenvanassche I'm also not sure if this should really be part of the package.

The problem I had was that I wanted to achieve the following:

1. Have a data class that has one or more properties with the type DeferProp

<?php

namespace App\Data;

use Inertia\DeferProp;
use Spatie\LaravelData\Data;
use Spatie\TypeScriptTransformer\Attributes\TypeScript;

#[TypeScript()]
class DashboardData extends Data
{
    public function __construct(
        /** @var array<PostData> */
        public array $myLatestPosts,
        public DeferProp|FeedData $feed
    ) {}
}

2. Convert all union types of type DeferProp | SomethingData $property to one of the following TypeScript types:

• property?: SomethingData
• property: undefined | SomethingData
• property: null | SomethingData

3. Use this data class as the second parameter to my Inertia response

<?php

namespace App\Http\Controllers;

use App\Data\DashboardData;
use App\Data\PostData;
use App\Queries\FeedQuery;
use Inertia\Inertia;
use Inertia\Response;

class DashboardController extends Controller
{
    public function __invoke(FeedQuery $query): Response
    {
        /** @var User $user */
        $user = auth()->user();
        $myLatestPosts = $user->posts()
            ->with('creator')
            ->latest()
            ->get();

        $data = DashboardData::from([
            'myLatestPosts' => PostData::collect($myLatestPosts)->all(),
            'feed' => Inertia::defer(fn () => $query->get()),
        ]);

        return Inertia::render('Dashboard/Dashboard', $data);
    }
}

By doing this, I can use the generated type as the type of the props of the react component:

export default function Dashboard({
    feed,
    myLatestPosts,
}: App.Data.DashboardData) { ... }

This allows me to catch possible type mismatches between the data returned from the controller and the props expected by the component. If I change the name of the myLatestPosts variable to yourLatestPosts, the build will fail, since the react component still tries to access myLatestPosts, even though this property does not exist on DashboardData anymore.

After a lot of playing around (including this PR), I just achieved this, more specifically generating a TS type where property: null | SomethingData, by simply adding the following mapping in the typescript-transformer.php configuration:

'default_type_replacements' => [
    ...
    Inertia\DeferProp::class => 'null',
],

Not sure if there are any other use cases for supporting deferred props in this package.
Let me know what you think.

Best,
Matthias