Команда Inertia.js випустила v3.8.0 з компонентом WhenMounted для рендерингу коду, що працює лише в браузері, під час серверного рендерингу, опційною підтримкою цілих чисел за межами безпечного діапазону JavaScript як нативних значень BigInt та іншими покращеннями:
WhenMounted для компонентів, що працюють лише в браузері
Evan Burrell додав компонент WhenMounted для адаптерів React, Vue і Svelte. Компонент, який під час рендерингу звертається до window або document, призводить до збою серверного рендерингу з помилкою "window is not defined".
Компонент WhenMounted рендерить свій fallback на сервері, а дочірні елементи - після того, як компонент змонтовано в браузері:
import { WhenMounted } from '@inertiajs/vue3'
<template>
<WhenMounted>
<SalesChart />
<template #fallback>
<p>Loading chart...</p>
</template>
</WhenMounted>
</template>
У React передавайте дочірні елементи як функцію, щоб код, який працює лише в браузері, не виконувався на сервері, адже JSX-діти обчислюються до рендерингу компонента:
import { WhenMounted } from '@inertiajs/react'
<WhenMounted fallback={<p>Loading chart...</p>}>
{() => <SalesChart width={window.innerWidth} />}
</WhenMounted>
Фолбек показується лише під час SSR і першого гідратаційного рендерингу, тому перший рендер у браузері збігається з серверним HTML і розбіжностей гідратації немає. WhenMounted, який монтується пізніше, наприклад після клієнтського візиту, одразу рендерить свої дочірні елементи.
Докладніше дивіться в #3218.
Великі цілі числа як нативні значення BigInt
Pascal Baljet додав підтримку цілих чисел поза безпечним діапазоном JavaScript. PHP надсилає 64-бітне ціле число, наприклад Snowflake ID, як JSON-число, а браузер округлює його під час розбору сторінки, тож 900719925474099988 перетворюється на 900719925474100000 без жодної помилки.
Функція вмикається на сервері опційно та потребує inertia-laravel v3.5.0. Увімкніть її для всіх відповідей через опцію preserve_big_integers у config/inertia.php (або змінну середовища INERTIA_PRESERVE_BIG_INTEGERS), або для окремої відповіді:
return Inertia::render('Orders/Show', [
'id' => $order->id,
])->preserveBigIntegers();
Адаптер кодує великі цілі числа як маркери { "$bigint": "..." }, а клієнт перетворює їх назад на значення BigInt. Цілі числа в безпечному діапазоні залишаються звичайними числами:
defineProps({ id: BigInt })
<template>
<p>Order {{ id }}</p>
<!-- Order 900719925474099988 -->
</template>
Це працює для початкової сторінки, візитів, часткових перезавантажень, зашифрованої історії та SSR. BigInt, надісланий назад через роутер, форму або Precognition, передається як рядок цифр, який приймають правило валідації integer у Laravel та $request->integer().
Докладніше дивіться в #3237.
Form передає колбеки помилок і flash
Dale Weaver виправив компонент <Form>, щоб він передавав у візит onHttpException, onNetworkError, onBeforeUpdate та onFlash. Ці колбеки вже були серед пропсів компонента, але адаптери їх не пересилали, тому HTTP 500 або мережевий збій під час відправлення <Form> ніколи їх не викликали. Тепер вони працюють так само, як і в useForm, а повернення false з будь-якого з колбеків помилок зупиняє глобальну подію та типову обробку:
<Form
action="/orders"
method="post"
@http-exception="(response) => { toast.error('Something went wrong'); return false }"
>
<!-- ... -->
</Form>
Докладніше дивіться в #3262.
Оптимістичні відповіді не по черзі
Pascal Baljet виправив випадок, коли виконувалися два оптимістичні оновлення, а відповідь на перший запит надходила останньою. Її пропси зчитувалися до другого запису, тому їх застосування відкочувало друге оновлення на екрані. Після цього сторінка розходилася із сервером до наступного візиту.
Тепер оптимістичні запити мають ID, а відповідь ігнорується, якщо пізніший оптимістичний запит уже завершився успішно. Невдалий запит не враховується, тож старіша успішна відповідь усе одно оновлює сторінку після того, як новіший запит завершився помилкою та було виконано відкат.
Докладніше дивіться в #3245.
Відновлення історії після деплою
Lazizbek Ergashev виправив навігацію назад і вперед через деплой. Коли браузер перезавантажував документ під час переходу назад або вперед, Inertia відновлювала сторінку зі стану історії, не перевіряючи версію ресурсів. Новий JavaScript-бандл тоді рендерив пропси з попереднього деплою, а проп, доданий або перейменований відтоді, мав значення undefined. Тепер Inertia порівнює версії та рендерить свіжозавантажену сторінку, якщо вони відрізняються.
Докладніше дивіться в #3264.
Примітки до релізу
Повний список змін наведено нижче, а різницю між 3.7.1 і 3.8.0 можна переглянути на GitHub. Наведені нижче примітки взято безпосередньо з релізу на GitHub:
v3.8.0
