Pengalaman dan Kaveat migrasi Svelte

Saya telah mengemas kini aplikasi web yang agak kompleks baru-baru ini. Aplikasi ini mempunyai ciri seperti auth, Stripe, i18n, mod gelap/cahaya, PWA, dsb. Secara keseluruhan, ia mempunyai sekitar 30 halaman dan komponen, dengan hampir tiada pakej npm pihak ketiga.

Saya ingin menunjukkan perkara yang saya dapati agak mencabar apabila memindahkan apl ke Svelte 5.

Tukul Skrip Auto-Migrasi

Skrip auto-migrasi yang disediakan oleh Svelte boleh melakukan tugas untuk anda dengan arahan "one-liner" ini dalam terminal npx sv migrate svelte-5 (selepas anda melakukan semua kemas kini dan pemasangan yang diperlukan: "@sveltejs/vite -plugin-svelte": "^4.0.0" dan "svelte": "^5"). Tetapi saya tidak mengesyorkan pendekatan "tukul" ini.

Pergi fail mengikut fail, komponen demi komponen dengan Ctrl Shift P (Windows/Linux) / Shift Command P (Mac) dan gunakan perintah Migrate Component to Svelte 5 Syntax dalam palet arahan Kod VS sebaliknya. Anda akan mempunyai lebih kawalan dengan cara itu.

Kejutan run() yang ditamatkan

Skrip tidak boleh melakukan keajaiban. Menaik taraf pengisytiharan pembolehubah reaktif kepada $state() biasanya baik. Walau bagaimanapun, skrip mungkin sukar untuk mengesan sama ada $: harus ditukar kepada $derived()/$derived.by(() => {}) atau $effect(() => {}).

Jadi, teka apa? Dengan skrip auto-penghijrahan, anda mungkin akan mendapat banyak run(() => {}).

Sebagai contoh, bayangkan sebagai contoh ringkas menggunakan sesuatu seperti ini:

<script>
...
   let notext = false;
   $: if (data.completeDoc == 'NoLangVersion') {
      notext = true;
   }
   $: if (data.completeDoc !== 'NoLangVersion') {
      notext = false;
   }
</script>

...
{#if notext}
   {data.userPrefferedLang.noTextWarning}
{:else}
...
{/if}
...

Skrip auto-penghijrahan akan memberikan anda ini:

<script>
    import { run } from 'svelte/legacy';
...
    let notext = $state(false);
    run(() => {
        if (data.completeDoc == 'NoLangVersion') {
            notext = true;
        }
    });
    run(() => {
        if (data.completeDoc !== 'NoLangVersion') {
            notext = false;
        }
    });
</script>

dengan amaran kecil yang bagus bahawa fungsi run telah ditamatkan.

Kod Svelte 5 yang lebih baik saya rasa ini:

<script>
...
    let notext = $derived.by(() => {
        if (data.completeDoc == 'NoLangVersion') {
            return  true;
        }
        if (data.completeDoc !== 'NoLangVersion') {
            return false;
        }
    });
...
</script>

atau jika kod anda tidak begitu rumit walaupun seperti ini:

<script>
...
    let notext = $derived(
        data.completeDoc == 'NoLangVersion' 
        ? 
        true
        :
        false
        ) 
...
</script>

Sebabnya ialah skrip tidak boleh mengubah kod kepada $derived.by(() => {}) dengan mudah, jadi ia ingin menggunakan pendekatan yang lebih kotor dengan $effect(). Tetapi $effect() hanya menjalankan bahagian klien, jadi skrip menggunakan fungsi run yang tidak digunakan.

Elakkan $effect Jika Anda Boleh

Sekarang kita menuju ke takeaway yang paling penting. Iaitu $effect() hanya menjalankan bahagian klien. Jadi tiada $effect() pada pelayan, untuk prapaparan halaman dan SSR.

$effect() TIDAK BERJALAN PADA SERVER!

Ini harus benar-benar ditekankan dalam dokumentasi Svelte 5.

Lihat dua contoh ini:

<script>
let a = 1
let b = 2

$: c = a + b
</script>

{c}  // server responds with c == 3

<script>
let a = $state(1)
let b = $state(2)
let c = $state(0)

$effect(() => {
  c = a + b
})
</script>

{c}  // server responds with c == 0

Mereka tidak sama. Ini menyebabkan banyak cabaran. Pelanggan perlu menilai semula pembolehubah c apabila memasang halaman. Halaman akan kelihatan berbeza apabila dihantar daripada pelayan dan apabila akhirnya DOM-diberikan pada klien (SSR, SEO, isu kelipan, dll.).

Jadi sentiasa cuba gunakan $derived atau $derived.by(() => {}) berbanding $effect(). Ia akan menjimatkan banyak masalah.

Ini adalah cerita yang sama seperti ketika kami tidak digalakkan menggunakan kedai dalam SvelteKit dan SSR.

$effect vs onMount() dalam SvelteKit

Anda mungkin tergoda untuk menggantikan onMount() anda dalam SvelteKit dengan $effect() terima kasih kepada contoh yang diberikan semasa ketibaan Svelte 5. Atas sebab yang telah disebutkan, saya tidak menggalakkan perkara ini buat sementara waktu. onMount masih merupakan cangkuk kitaran hayat Svelte teras.

$bindable $props Kejutan

Kejutan menarik yang lain ialah Svelte 5 mengambil berat untuk mempunyai nilai pembolehubah yang konsisten. Jika anda menghantar pembolehubah sebagai prop kepada komponen dan menukar pembolehubah ini dalam komponen kemudian hari, skrip akan cuba menyelesaikan ketidakkonsistenan ini menggunakan $bindable $prop. Ibu bapa harus dimaklumkan, supaya keadaan apl anda konsisten.

Lihat contoh ini:

<script>
...
   let notext = false;
   $: if (data.completeDoc == 'NoLangVersion') {
      notext = true;
   }
   $: if (data.completeDoc !== 'NoLangVersion') {
      notext = false;
   }
</script>

...
{#if notext}
   {data.userPrefferedLang.noTextWarning}
{:else}
...
{/if}
...

Skrip autou-migration akan mahu anda menggunakan komponen dengan nilai terikat untuk memastikan ibu bapa boleh mendapatkan nilai yang dikemas kini kembali:

<script>
    import { run } from 'svelte/legacy';
...
    let notext = $state(false);
    run(() => {
        if (data.completeDoc == 'NoLangVersion') {
            notext = true;
        }
    });
    run(() => {
        if (data.completeDoc !== 'NoLangVersion') {
            notext = false;
        }
    });
</script>

Tetapi mungkin kita boleh menggunakan cara yang lebih mudah juga, anda rasa, dengan $derived():

<script>
...
    let notext = $derived.by(() => {
        if (data.completeDoc == 'NoLangVersion') {
            return  true;
        }
        if (data.completeDoc !== 'NoLangVersion') {
            return false;
        }
    });
...
</script>

:global { } Sekat

Ciri yang sangat bagus yang saya temui semasa penghijrahan ialah kita boleh menggunakan CSS :global dengan blok sekarang. Menggayakan dengan :global agak perlu jika anda ingin menggayakan elemen HTML dalam @html, contohnya.

Jadi bukannya ini:

<script>
...
    let notext = $derived(
        data.completeDoc == 'NoLangVersion' 
        ? 
        true
        :
        false
        ) 
...
</script>

anda boleh menggunakan ini:

<script>
let a = 1
let b = 2

$: c = a + b
</script>

{c}  // server responds with c == 3

Gaya sebagai Prop dalam Komponen

Dalam Svelte 4, jika anda ingin menyediakan kelas CSS sebagai prop kepada komponen, anda akan menggunakan {$$props.class}:

<script>
let a = $state(1)
let b = $state(2)
let c = $state(0)

$effect(() => {
  c = a + b
})
</script>

{c}  // server responds with c == 0

Dalam Svelte 5 anda boleh menggunakan class={className}:

// parent svelte file
<script>
   import ComponentBinded from './ComponentBinded.svelte';
   import ComponentWithDerived from './ComponentWithDerived.svelte';
   let name = $state('John Wick');
</script>

<p>Name value in parent: {name}</p>

<ComponentBinded bind:name={name} />

<ComponentWithDerived {name} />

Kemungkinan Penurunan Prestasi Rumah Api

Apabila saya menggunakan skrip gabungan automatik, saya terkejut melihat prestasi apl saya menurun. Dengan Svelte 4, saya mempunyai hampir semua 100%s. Hanya selepas saya berhijrah secara manual dan mempertimbangkan dengan teliti bagaimana (terutamanya cara mengelakkan $effect() jika boleh) markah Rumah Api saya kembali ke hijau semula.

Kata Akhir

Ia mengambil masa yang lebih lama untuk berhijrah ke Svelte 5 daripada yang saya jangkakan. Saya masih belum menolak versi baharu ini kepada pengeluaran, walaupun. Kemas kini kepada Svelte 5 masih datang dengan kekerapan yang agak tinggi.

Saya harap pengalaman saya mungkin berguna kepada orang lain.

Atas ialah kandungan terperinci Pengalaman dan Kaveat migrasi Svelte. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!