Merge branch 'main' into dont-overwrite-invalid-json

Author: pushpak1300

.ai/inertia-laravel/2/core.blade.php

@@ -11,3 +11,16 @@
 
 ### Deferred Props & Empty States
 - When using deferred props on the frontend, you should add a nice empty state with pulsing / animated skeleton.
+
+### Inertia Form General Guidance
+@if ($assist->inertia()->hasFormComponent())
+- The recommended way to build forms when using Inertia is with the `<Form>` component - a useful example is below. Use `search-docs` with a query of `form component` for guidance.
+- Forms can also be built using the `useForm` helper for more programmatic control, or to follow existing conventions. Use `search-docs` with a query of `useForm helper` for guidance.
+@if ($assist->inertia()->hasFormComponentResets())
+- `resetOnError`, `resetOnSuccess`, and `setDefaultsOnSuccess` are available on the `<Form>` component. Use `search-docs` with a query of 'form component resetting' for guidance.
+@else
+- This version of Inertia does not support `resetOnError`, `resetOnSuccess`, or `setDefaultsOnSuccess` on the `<Form>` component. Using these will cause errors.
+@endif
+@else
+- Build forms using the `useForm` helper. Use the code examples and `search-docs` tool with a query of `useForm helper` for guidance.
+@endif

.ai/inertia-laravel/core.blade.php

@@ -2,6 +2,7 @@
 
 - Inertia.js components should be placed in the `resources/js/Pages` directory unless specified differently in the JS bundler (vite.config.js).
 - Use `Inertia::render()` for server-side routing instead of traditional Blade views.
+- Use `search-docs` for accurate guidance on all things Inertia.
 
 <code-snippet lang="php" name="Inertia::render Example">
 // routes/web.php example

.ai/inertia-react/1/.gitkeep

@@ -0,0 +1,46 @@
+## Inertia + React Forms
+
+- For form handling in Inertia pages, use `router.post` and related methods. Do not use regular forms.
+
+@verbatim
+<code-snippet name="Inertia React Form Example" lang="react">
+import { useState } from 'react'
+import { router } from '@inertiajs/react'
+
+export default function Edit() {
+    const [values, setValues] = useState({
+        first_name: "",
+        last_name: "",
+        email: "",
+    })
+
+    function handleChange(e) {
+        const key = e.target.id;
+        const value = e.target.value
+
+        setValues(values => ({
+            ...values,
+            [key]: value,
+        }))
+    }
+
+    function handleSubmit(e) {
+        e.preventDefault()
+
+        router.post('/users', values)
+    }
+
+    return (
+    <form onSubmit={handleSubmit}>
+        <label htmlFor="first_name">First name:</label>
+        <input id="first_name" value={values.first_name} onChange={handleChange} />
+        <label htmlFor="last_name">Last name:</label>
+        <input id="last_name" value={values.last_name} onChange={handleChange} />
+        <label htmlFor="email">Email:</label>
+        <input id="email" value={values.email} onChange={handleChange} />
+        <button type="submit">Submit</button>
+    </form>
+    )
+}
+</code-snippet>
+@endverbatim

.ai/inertia-react/1/forms.blade.php

@@ -0,0 +1,66 @@
+@php
+/** @var \Laravel\Boost\Install\GuidelineAssist $assist */
+@endphp
+## Inertia + React Forms
+
+@if($assist->inertia()->hasFormComponent())
+@boostsnippet("`<Form>` Component Example", "react")
+import { Form } from '@inertiajs/react'
+
+export default () => (
+    <Form action="/users" method="post">
+        {({
+            errors,
+            hasErrors,
+            processing,
+            wasSuccessful,
+            recentlySuccessful,
+            clearErrors,
+            resetAndClearErrors,
+            defaults
+        }) => (
+        <>
+        <input type="text" name="name" />
+
+        {errors.name && <div>{errors.name}</div>}
+
+        <button type="submit" disabled={processing}>
+            {processing ? 'Creating...' : 'Create User'}
+        </button>
+
+        {wasSuccessful && <div>User created successfully!</div>}
+        </>
+    )}
+    </Form>
+)
+@endboostsnippet
+@endif
+
+@if($assist->inertia()->hasFormComponent() === false)
+{{-- Inertia 2.0.x, not 2.1.0 or higher. So they still need to use 'useForm' --}}
+@boostsnippet("Inertia React useForm Example", "react")
+import { useForm } from '@inertiajs/react'
+
+const { data, setData, post, processing, errors } = useForm({
+    email: '',
+    password: '',
+    remember: false,
+})
+
+function submit(e) {
+    e.preventDefault()
+    post('/login')
+}
+
+return (
+<form onSubmit={submit}>
+    <input type="text" value={data.email} onChange={e => setData('email', e.target.value)} />
+    {errors.email && <div>{errors.email}</div>}
+    <input type="password" value={data.password} onChange={e => setData('password', e.target.value)} />
+    {errors.password && <div>{errors.password}</div>}
+    <input type="checkbox" checked={data.remember} onChange={e => setData('remember', e.target.checked)} /> Remember Me
+    <button type="submit" disabled={processing}>Login</button>
+</form>
+)
+@endboostsnippet
+@endif

.ai/inertia-react/2/.gitkeep

@@ -2,51 +2,7 @@
 
 - Use `router.visit()` or `<Link>` for navigation instead of traditional links.
 
-<code-snippet lang="react" name="Inertia Client Navigation">
-    import { Link } from '@inertiajs/react'
-
-    <Link href="/">Home</Link>
-</code-snippet>
-
-- For form handling, use `router.post` and related methods. Do not use regular forms.
-
-<code-snippet lang="react" name="Inertia React Form Example">
-import { useState } from 'react'
-import { router } from '@inertiajs/react'
-
-export default function Edit() {
-    const [values, setValues] = useState({
-        first_name: "",
-        last_name: "",
-        email: "",
-    })
-
-    function handleChange(e) {
-        const key = e.target.id;
-        const value = e.target.value
-
-        setValues(values => ({
-            ...values,
-            [key]: value,
-        }))
-    }
-
-    function handleSubmit(e) {
-        e.preventDefault()
-
-        router.post('/users', values)
-    }
-
-    return (
-    <form onSubmit={handleSubmit}>
-        <label htmlFor="first_name">First name:</label>
-        <input id="first_name" value={values.first_name} onChange={handleChange} />
-        <label htmlFor="last_name">Last name:</label>
-        <input id="last_name" value={values.last_name} onChange={handleChange} />
-        <label htmlFor="email">Email:</label>
-        <input id="email" value={values.email} onChange={handleChange} />
-        <button type="submit">Submit</button>
-    </form>
-    )
-}
-</code-snippet>
+@boostsnippet("Inertia Client Navigation", "react")
+import { Link } from '@inertiajs/react'
+<Link href="/">Home</Link>
+@endboostsnippet

.ai/inertia-react/2/forms.blade.php

@@ -0,0 +1,34 @@
+## Inertia + Svelte Forms
+
+- For form handling, use `router.post` and related methods. Do not use regular forms.
+
+@verbatim
+<code-snippet lang="svelte" name="Inertia Form Example">
+<script>
+    import { router } from '@inertiajs/svelte'
+
+    let values = {
+        first_name: null,
+        last_name: null,
+        email: null,
+    }
+
+    function handleSubmit() {
+        router.post('/users', values)
+    }
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+    <label for="first_name">First name:</label>
+    <input id="first_name" bind:value={values.first_name}>
+
+    <label for="last_name">Last name:</label>
+    <input id="last_name" bind:value={values.last_name}>
+
+    <label for="email">Email:</label>
+    <input id="email" bind:value={values.email}>
+
+    <button type="submit">Submit</button>
+</form>
+</code-snippet>
+@endverbatim

.ai/inertia-react/core.blade.php

@@ -0,0 +1,75 @@
+@php
+    /** @var \Laravel\Boost\Install\GuidelineAssist $assist */
+@endphp
+## Inertia + Svelte Forms
+
+- There are critical differences between Svelte 4 and 5, use the `search-docs` tool for up-to-date guidance.
+
+@if($assist->inertia()->hasFormComponent())
+@boostsnippet("`<Form>` Component Example", "svelte5")
+<Form action="/users" method="post">
+    {#snippet children({
+    errors,
+    hasErrors,
+    processing,
+    progress,
+    wasSuccessful,
+    recentlySuccessful,
+    setError,
+    clearErrors,
+    resetAndClearErrors,
+    defaults,
+    isDirty,
+    reset,
+    submit,
+    })}
+    <input type="text" name="name" />
+
+    {#if errors.name}
+    <div>{errors.name}</div>
+    {/if}
+
+    <button type="submit" disabled={processing}>
+        {processing ? 'Creating...' : 'Create User'}
+    </button>
+
+    {#if wasSuccessful}
+    <div>User created successfully!</div>
+    {/if}
+    {/snippet}
+</Form>
+@endboostsnippet
+@endif
+
+@if($assist->inertia()->hasFormComponent() === false)
+{{-- Inertia 2.0.x, not 2.1.0 or higher. So they still need to use 'useForm' --}}
+@boostsnippet("Inertia Svelte useForm Example", "svelte")
+<script>
+    import { useForm } from '@inertiajs/svelte'
+
+    const form = useForm({
+        email: null,
+        password: null,
+        remember: false,
+    })
+
+    function submit(e) {
+        e.preventDefault() /* Only required with Svelte 5 */
+        $form.post('/login')
+    }
+</script>
+
+<form onsubmit={submit}>
+    <input type="text" bind:value={$form.email} />
+    {#if $form.errors.email}
+    <div class="form-error">{$form.errors.email}</div>
+    {/if}
+    <input type="password" bind:value={$form.password} />
+    {#if $form.errors.password}
+    <div class="form-error">{$form.errors.password}</div>
+    {/if}
+    <input type="checkbox" bind:checked={$form.remember} /> Remember Me
+    <button type="submit" disabled={$form.processing}>Submit</button>
+</form>
+@endboostsnippet
+@endif

.ai/inertia-svelte/1/forms.blade.php

@@ -0,0 +1,10 @@
+## Inertia + Svelte
+
+- Use `router.visit()` or `<Link>` for navigation instead of traditional links.
+
+@boostsnippet("Inertia Client Navigation", "svelte")
+import { inertia, Link } from '@inertiajs/svelte'
+
+<a href="/" use:inertia>Home</a>
+<Link href="/">Home</Link>
+@endboostsnippet