React

<?php

namespace App\Nitro\Components\React;

use App\Models\Post;
use Illuminate\Support\Facades\Gate;
use Nitro\Attributes\Computed;
use Nitro\Attributes\Locked;
use Nitro\Attributes\Server;
use Nitro\Attributes\Validate;
use Nitro\Attributes\View;
use Nitro\Component;
use Nitro\Upload;

#[View(react: 'post-editor')]
class PostEditor extends Component
{
    #[Locked]
    public int $postId;

    #[Validate('required|min:3|max:120')]
    public string $title = '';

    public string $body = '';

    /** @var list<string> */
    public array $tags = [];

    #[Validate('nullable|image|max:2048')]
    public ?Upload $cover = null;

    public string $savedAt = '';

    public function mount(Post $post): void
    {
        $this->postId = $post->id;
        $this->title = $post->title;
        $this->body = $post->body;
        $this->tags = $post->tags;
    }

    #[Computed]
    public function words(): int
    {
        return str_word_count($this->body);
    }

    public function addTag(string $tag): void
    {
        $tag = strtolower(trim($tag));

        if ($tag !== '' && ! in_array($tag, $this->tags, true)) {
            $this->tags[] = $tag;
        }
    }

    public function removeTag(int $index): void
    {
        array_splice($this->tags, $index, 1);
    }

    #[Server]
    public function save(): string
    {
        $this->validate();
        $post = Post::findOrFail($this->postId);
        Gate::authorize('update', $post);

        $post->update([
            'title' => $this->title,
            'body' => $this->body,
            'tags' => $this->tags,
            'cover' => $this->cover?->store('covers', 'public') ?? $post->cover,
        ]);

        $this->cover = null;
        $this->savedAt = now()->format('H:i');
        $this->dispatch('post-saved', id: $post->id);

        return "Saved at {$this->savedAt}";
    }
}

export default function PostEditor({ title, body, tags, words, savedAt, set, addTag, removeTag, save, errors, unsaved }) {
    function submit(event) {
        event.preventDefault();
        save();
    }

    function addFromInput(event) {
        if (event.key !== 'Enter') return;
        event.preventDefault();
        addTag(event.target.value);
        event.target.value = '';
    }

    return (
        <form className="editor" onSubmit={submit}>
            <input value={title} onChange={(e) => set('title', e.target.value)} placeholder="Title" />
            {errors.title && <p className="error">{errors.title[0]}</p>}

            <textarea value={body} onChange={(e) => set('body', e.target.value)} rows={8} />
            <p className="muted">{words} words</p>

            <ul className="tags">
                {tags.map((tag, index) => (
                    <li key={tag}>
                        {tag} <button type="button" onClick={() => removeTag(index)}>×</button>
                    </li>
                ))}
            </ul>
            <input placeholder="Add a tag" onKeyDown={addFromInput} />

            <button disabled={save.processing}>{save.slow ? 'Saving…' : 'Save'}</button>
            {unsaved.length > 0 && <span className="muted">Unsaved changes</span>}
            {savedAt && <span className="muted">Saved at {savedAt}</span>}
        </form>
    );
}

<nitro:react.post-editor :post="$post" />

import { useEffect, useMemo, useState } from 'react';

export default function PostEditor({ title, words, set, save, errors }) {
    /** The view's own state, as in any React component. */
    const [said, setSaid] = useState('');
    const readingTime = useMemo(() => Math.max(1, Math.round(words / 200)), [words]);

    /** Props change when the component does: effects follow them like any props. */
    useEffect(() => {
        document.title = title ? `Editing: ${title}` : 'New post';
    }, [title]);

    async function submit(event) {
        event.preventDefault();
        setSaid((await save()) ?? '');
    }

    return (
        <form onSubmit={submit}>
            <input value={title} onChange={(e) => set('title', e.target.value)} />
            {errors.title && <p className="error">{errors.title[0]}</p>}
            <p>{words} words, about {readingTime} min to read</p>

            <button disabled={save.processing}>Save</button>
            <p>{said}</p>
        </form>
    );
}

export default function Checkout({ form, lines, set, addLine, removeLine }) {
    return (
        <>
            {/* A key inside a property: its path, as nitro:model writes it. */}
            <input value={form.email} onChange={(e) => set('form.email', e.target.value)} />
            <label>
                <input type="checkbox" checked={form.gift} onChange={(e) => set('form.gift', e.target.checked)} />
                It's a gift
            </label>

            {lines.map((line, index) => (
                <div key={line.sku}>
                    {line.name}
                    <input type="number" value={line.quantity}
                        onChange={(e) => set(`lines.${index}.quantity`, e.target.valueAsNumber)} />
                    <button onClick={() => removeLine(index)}>Remove</button>
                </div>
            ))}

            {/* Or the PHP's own method, compiled to run here. */}
            <button onClick={() => addLine('SKU-42')}>Add a line</button>
        </>
    );
}

import { useState } from 'react';

export default function SaveButton({ save }) {
    const [notice, setNotice] = useState('');

    async function submit() {
        try {
            /** The method's return value; null when a rule failed (errors has the messages). */
            const said = await save();
            setNotice(said ?? 'Please fix the highlighted fields.');
        } catch {
            /** The request itself failed: the server's error, or no connection. save.error says why. */
            setNotice(`Not saved: ${save.error}`);
        }
    }

    return (
        <>
            <button disabled={save.processing} onClick={submit}>
                {save.slow ? 'Still saving…' : save.processing ? 'Saving' : 'Save'}
            </button>
            {save.failed && <p className="error">{save.error}</p>}
            <p>{notice}</p>
        </>
    );
}

export default function Cover({ cover, upload, uploads, errors }) {
    return (
        <>
            <label className="cover">
                <span>Cover image</span>
                <input type="file" accept="image/*" onChange={(e) => upload('cover', e.target.files)} />
            </label>

            {uploads.cover?.uploading && <progress max="100" value={uploads.cover.progress} />}
            {errors.cover && <p className="error">{errors.cover[0]}</p>}

            {cover && (
                <figure>
                    <img src={cover.temporaryUrl()} alt="" />
                    <figcaption>{cover.getClientOriginalName()}, {Math.round(cover.getSize() / 1024)} KB</figcaption>
                </figure>
            )}
        </>
    );
}

export default function PostNav({ postId, link, visit }) {
    return (
        <>
            <nav>
                <a {...link('/posts')}>All posts</a>
                <a {...link(`/posts/${postId}/preview`, 'prefetch.visible')}>Preview</a>
            </nav>

            <select onChange={(e) => visit(`/posts?status=${e.target.value}`)}>
                <option value="draft">Drafts</option>
                <option value="published">Published</option>
            </select>
        </>
    );
}

import { useEffect, useState } from 'react';

export default function PreviewBar({ dispatch }) {
    const [lastSaved, setLastSaved] = useState(null);

    /** An event another component dispatched (without ->to()), heard in the view's own code: its values in order. */
    useEffect(() => {
        const heard = (event) => setLastSaved(event.detail.params[0]);
        window.addEventListener('post-saved', heard);
        return () => window.removeEventListener('post-saved', heard);
    }, []);

    return (
        <>
            <button onClick={() => dispatch('preview-requested', 42)}>Preview</button>
            {lastSaved && <p>Post {lastSaved} was just saved.</p>}
        </>
    );
}

// resources/views/react/post-editor.jsx
import TagList from '../../js/components/TagList.jsx';

export default function PostEditor() {
    return <TagList />;
}

// resources/js/components/TagList.jsx: an ordinary React component, inside the view
import { useNitro } from 'nitro/react';

export default function TagList() {
    const { tags, removeTag } = useNitro();

    return (
        <ul>
            {tags.map((tag, index) => (
                <li key={tag}>{tag} <button onClick={() => removeTag(index)}>×</button></li>
            ))}
        </ul>
    );
}

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { IntlProvider } from 'react-intl';
import { nitroReact } from 'nitro/react';
import messages from './lang/messages.js';

/** One client for every view on the page, so their caches are shared. */
const queryClient = new QueryClient();
const locale = document.documentElement.lang;

nitroReact(import.meta.glob(['../views/react/**/*.{jsx,tsx}', './react/**/*.{jsx,tsx}']), {
    /** Called for each view: the providers around it. */
    wrap: (view) => (
        <QueryClientProvider client={queryClient}>
            <IntlProvider locale={locale} messages={messages[locale]}>{view}</IntlProvider>
        </QueryClientProvider>
    ),
});

/* <php>
use App\Models\Invitation;
use Illuminate\Support\Str;

new class extends Component {
    #[Validate('required|email')]
    public string $email = '';

    #[Computed]
    public function domain(): string
    {
        return Str::after($this->email, '@');
    }

    #[Server]
    public function invite(): void
    {
        $this->validate();
        Invitation::send($this->email, invitedBy: auth()->user());
    }
};
</php> */

export default function InviteForm({ email, domain, set, invite, errors }) {
    return (
        <div className="invite">
            <input value={email} onChange={(e) => set('email', e.target.value)} />
            {domain && <small>@{domain}</small>}
            {errors.email && <p className="error">{errors.email[0]}</p>}
            <button disabled={invite.processing} onClick={() => invite()}>Invite</button>
        </div>
    );
}

// resources/js/ssr.jsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { serve } from 'nitro/ssr';
import { renderReact } from 'nitro/react/server';

serve({
    react: renderReact(import.meta.glob(['../views/react/**/*.{jsx,tsx}', './react/**/*.{jsx,tsx}'], { eager: true }), {
        /** Called for each render: the service renders for every visitor, so nothing is shared between them. */
        wrap: (view) => <QueryClientProvider client={new QueryClient()}>{view}</QueryClientProvider>,
    }),
});