DokumentasiPerbedaan kerangka

Svelte

Nexy merender Svelte 5 komponen di server, lalu Svelte mengambilnya di browser. Halaman, tata letak, pulau, dan tindakan sama di setiap kerangka kerja: halaman ini mencakup penyiapan, lalu bagian-bagian yang berbeda dari kontrak bersama.

Modus	`nexyconfig.py`	Halaman adalah	Svelte adalah
Server (bawaan)	`useCSR = False`	`.nexy` file	pulau di dalam halaman tersebut
Klien	`useCSR = True`	`.svelte` file	seluruh halaman, dengan tata letak dan router klien

Dengan router modular, komponen Svelte adalah pulau di dalam tampilan .nexy yang dikembalikan oleh pengontrol: tidak ada file halaman dan tidak ada router klien.

Mulai sebuah proyek

nx new my-app --template web-fbr-svelte

nx new my-app --template web-modular-svelte

Templatnya adalah proyek mode server dengan pulau Svelte. Jalankan nx new my-app tanpa templat untuk menjawab petunjuknya: router, jenis proyek, apakah akan menggunakan perutean sisi klien, lalu kerangka kerja.

Aktifkan Svelte di proyek yang sudah ada

nexyconfig.py

from nexy.core.models import NexyConfigModelfrom nexy.frontend import svelte  class NexyConfig(NexyConfigModel):    useFF = svelte()    useAliases = {"@": "src"}

vite.config.ts

import { defineConfig } from "vite";import { svelte } from "@sveltejs/vite-plugin-svelte";import nexy from "./__nexy__/vite"; export default defineConfig({  plugins: [nexy(), svelte()],  customLogger: nexy.log(),});

nx new menulis file ini; Nexy menulis __nexy__/vite.ts sendiri, jadi jangan diedit.

Paket	Versi `nx new` menulis
`svelte`	`^5.20.2`
`@sveltejs/vite-plugin-svelte`	`^5.0.0`

Aturan

Svelte 5. Komponen menggunakan rune: $props(), $state(), dan cuplikan untuk anak-anak.
Satu kerangka kerja per proyek. useFF membutuhkan tepat satu kerangka kerja; useFF = [svelte(), vue()] menghentikan server saat startup.
Satu komponen per file. Nama file .svelte yang Anda impor hanyalah tag yang Anda tulis.

Komponen berada di luar src/routes/, biasanya di src/components/, jadi bukan halaman.
Proyek mode server tidak memiliki halaman .svelte, dan proyek mode klien tidak memiliki halaman .nexy: Nexy menolak untuk memulai dan memberi nama file. Lihat mode.

Komponen berada di src/components/, dan pandangan mengimpornya sebagai pulau.

Halaman

Dalam mode klien (useCSR = True), halaman adalah file .svelte.

Komponen halaman

Halaman adalah komponen yang ditentukan oleh blok skrip file .svelte.

src/routes/index.svelte

<script lang="ts"></script> <h1>Hello</h1>

Segmen dinamis

Parameter URL mencapai halaman sebagai props melalui rune $props():

src/rute/blog/[siput].svelte

<script lang="ts">  let { slug }: { slug: string } = $props();</script> <h1>{slug}</h1>

Alternatifnya, gunakan penyimpanan $params dari @nexy/client di komponen mana pun.

Tata Letak

Implementasi

Tata letak root mendefinisikan shell dokumen. Tata letak bertingkat membungkus konten menggunakan cuplikan children.

src/routes/layout.svelte

<script lang="ts">  import type { Snippet } from "svelte";  let { children }: { children?: Snippet } = $props();</script> <html>  <body>    <header>My app</header>    <main>{@render children?.()}</main>  </body></html>

Pulau

Dalam mode server, komponen Svelte yang diimpor ke file .nexy adalah sebuah pulau.

Mengimpor

Impor komponen di frontmatter file .nexy:

src/rute/index.nexy

---from "@/components/Counter.svelte" import Counter---<Counter start=3 />

src/apps/home_view.nexy

---from "@/components/Counter.svelte" import Counter---<Counter start=3 />

Arahan hidrasi

Gunakan prop directive untuk mengontrol kapan pulau terhidrasi:

client:load (default): segera
client:idle: saat browser dalam keadaan idle
client:visible: saat bergulir hingga terlihat
client:media: ketika kueri media cocok

Tindakan dan navigasi

Memanggil tindakan

Gunakan hook useAction untuk mengelola status panggilan tindakan. Di Svelte, ini mengembalikan toko (dibaca dengan $).

<script lang="ts">  import { useAction } from "@nexy/client";  import { add_todo } from "@nexy/actions";   let title = $state("");  const save = useAction(add_todo, { onSuccess: () => (title = "") });</script> <form onsubmit={(e) => { e.preventDefault(); save.run({ title }); }}>  <input bind:value={title} />  <button disabled={$save.pending}>Add</button></form>

Navigasi

Gunakan komponen Link untuk transisi sisi klien:

<script lang="ts">  import Link from "@nexy/Link.svelte";</script> <Link href="/about" activeClass="active">About</Link>

Untuk navigasi terprogram, gunakan objek router dari @nexy/client:

import { router } from "@nexy/client"; router.push("/dashboard");

Akses URL

Semua data lokasi disediakan sebagai penyimpanan:

$pathname: jalur saat ini
$params: segmen dinamis
$searchParams: string kueri
$location: objek lokasi penuh

Langkah selanjutnya

Tampilan: membandingkan format yang dapat digunakan suatu halaman
Frontend: Vite dan build klien

Sunting di GitHub