WhenMounted e le prop BigInt in Inertia.js v3.8

Il team di Inertia.js ha rilasciato la v3.8.0 con un componente WhenMounted per il rendering di codice solo-browser in presenza di server-side rendering, il supporto opt-in agli interi oltre il range sicuro di JavaScript come valori BigInt nativi e altro ancora:

WhenMounted per i componenti solo-browser

Evan Burrell ha contribuito con un componente WhenMounted per gli adapter React, Vue e Svelte. Un componente che legge window o document durante il rendering manda in crash il server-side rendering con un errore "window is not defined".

Il componente WhenMounted renderizza il suo fallback sul server e i suoi children una volta che il componente è stato montato nel browser:

import { WhenMounted } from '@inertiajs/vue3'

<template>
<WhenMounted>
<SalesChart />

<template #fallback>
<p>Loading chart...</p>
</template>
</WhenMounted>
</template>

In React, passa i children come funzione in modo che il codice solo-browser non venga eseguito sul server, dato che i children JSX vengono valutati prima che il componente venga renderizzato:

import { WhenMounted } from '@inertiajs/react'

<WhenMounted fallback={<p>Loading chart...</p>}>
{() => <SalesChart width={window.innerWidth} />}
</WhenMounted>

Il fallback viene mostrato solo durante la SSR e nel primo render di hydration, così il primo render del browser corrisponde all'HTML del server e non si verifica alcun hydration mismatch. Un WhenMounted che viene montato più tardi, ad esempio dopo una visita lato client, renderizza subito i suoi children.

Per maggiori dettagli, vedi #3218.

Interi grandi come valori BigInt nativi

Pascal Baljet ha aggiunto il supporto per gli interi al di fuori del range di interi sicuri di JavaScript. PHP invia un intero a 64 bit, come uno Snowflake ID, come numero JSON, e il browser lo arrotonda durante il parsing della pagina, così 900719925474099988 diventa 900719925474100000 senza alcun errore.

La funzionalità è opt-in sul server e richiede inertia-laravel v3.5.0. Attivala per ogni response con l'opzione preserve_big_integers in config/inertia.php (o la variabile d'ambiente INERTIA_PRESERVE_BIG_INTEGERS), oppure per una singola response:

return Inertia::render('Orders/Show', [
'id' => $order->id,
])->preserveBigIntegers();

L'adapter codifica gli interi grandi come marcatori { "$bigint": "..." }, e il client li riconverte in valori BigInt. Gli interi che rientrano nel range sicuro restano numeri normali:

defineProps({ id: BigInt })

<template>
<p>Order {{ id }}</p>
<!-- Order 900719925474099988 -->
</template>

Funziona per la pagina iniziale, le visite, i partial reload, la history cifrata e la SSR. Un BigInt rimandato indietro attraverso il router, un form o Precognition viene inviato come stringa di cifre, che la regola di validazione integer di Laravel e $request->integer() accettano.

Per maggiori dettagli, vedi #3237.

Il componente Form inoltra i callback di errore e flash

Dale Weaver ha corretto il componente <Form> in modo che passi onHttpException, onNetworkError, onBeforeUpdate e onFlash alla visit. Questi callback facevano già parte delle prop del componente, ma gli adapter non li inoltravano mai, quindi un HTTP 500 o un errore di rete durante l'invio di un <Form> non li chiamava mai. Ora funzionano come su useForm, e restituire false da uno dei due callback di errore interrompe l'evento globale e la gestione predefinita:

<Form
action="/orders"
method="post"
@http-exception="(response) => { toast.error('Something went wrong'); return false }"
>
<!-- ... -->
</Form>

Per maggiori dettagli, vedi #3262.

Risposte ottimistiche fuori ordine

Pascal Baljet ha corretto un caso in cui due aggiornamenti ottimistici erano in corso e la risposta della prima richiesta arrivava per ultima. Le sue prop venivano lette prima della seconda scrittura, quindi applicarle annullava sullo schermo il secondo aggiornamento. La pagina risultava così in disaccordo con il server fino alla visita successiva.

Ora le richieste ottimistiche portano con sé un ID, e una risposta viene ignorata quando una richiesta ottimistica successiva è già andata a buon fine. Una richiesta fallita non conta, quindi una risposta più vecchia ma riuscita aggiorna comunque la pagina dopo che una richiesta più recente fallisce e viene annullata.

Per maggiori dettagli, vedi #3245.

La history si ripristina dopo un deploy

Lazizbek Ergashev ha corretto la navigazione avanti e indietro durante un deploy. Quando il browser ricaricava il documento su una navigazione indietro o avanti, Inertia ripristinava la pagina dallo state della history senza controllare la versione degli asset. Il nuovo bundle JavaScript renderizzava quindi prop provenienti dal deploy precedente, e una prop aggiunta o rinominata nel frattempo risultava undefined. Ora Inertia confronta le versioni e renderizza la pagina appena caricata quando differiscono.

Per maggiori dettagli, vedi #3264.

Note di rilascio

Qui sotto puoi vedere l'elenco completo delle modifiche e il diff tra 3.7.1 e 3.8.0 su GitHub. Le seguenti note di rilascio provengono direttamente dalla GitHub release:

v3.8.0

• [3.x] Corretta la corruzione UTF-8 multi-byte nel parsing del body delle richieste SSR da @onk in #3248
• Aggiornato pnpm/action-setup da 6.0.10 a 6.1.0 nel gruppo github-actions da @dependabot in #3261
• [3.x] Corretti i tipi core quando Axios non è installato da @fouteox in #3258
• [3.x] Confronto delle versioni degli asset prima di ripristinare la history su un reload avanti/indietro da @lazerg in #3264
• [3.x] Impedisce a una risposta ottimistica obsoleta di annullare un aggiornamento ottimistico più recente da @pascalbaljet in #3245
• [3.x] Preferisci server.origin quando si risolvono gli URL dei link CSS della SSR da @pascalbaljet in #3268
• [3.x] Evita il top-level await nel bundle SSR generato da @ramonmalcolm10 in #3239
• [3.x] Inoltro dei callback di visit mancanti del componente Form da @daleweaver777 in #3262
• [3.x] Aggiunto il componente WhenMounted da @evan-burrell in #3218
• [3.x] Migliorati i test in CI da @pascalbaljet in #3277
• [3.x] Aggiornate le dipendenze da @pascalbaljet in #3278
• [3.x] Pulizia dei prefetch annullati ancora in corso da @gianpieropuleo in #3271
• [3.x] Gestione dei signal già abortiti nel client XHR da @gianpieropuleo in #3273
• [3.x] Correzione del salto di scroll di React InfiniteScroll su Safari e della flakiness in CI da @pascalbaljet in #3282
• [3.x] Supporto agli interi grandi come valori BigInt nativi da @pascalbaljet in #3237
• [3.x] Aggiornate le dipendenze da @pascalbaljet in #3286
• [3.x] Silenziato l'avviso state_referenced_locally nel componente App di Svelte da @pascalbaljet in #3287