Dokumentasi/Perbedaan kerangka

Preact

Nexy merender Preact 10 komponen di server, lalu Preact 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.

Mulai sebuah proyek

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

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

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

Aktifkan Preact di proyek yang sudah ada

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

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

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

Tulis Preact

Komponen Preact adalah fungsi bergaya React. Perbedaan yang penting di sini:

import { useState } from "preact/hooks"; export default function Counter({ start = 0 }: { start?: number }) {  const [count, setCount] = useState(start);  return <button class="counter" onClick={() => setCount(count + 1)}>{count}</button>;}

• Kait berasal dari preact/hooks, tipe seperti ComponentChildren dari preact.
• Tulis atribut HTML: class, for, charset. Link membaca kelasnya dari class.

Aturan

• Satu kerangka kerja per proyek. useFF membutuhkan tepat satu kerangka kerja; useFF = [preact(), react()] menghentikan server saat startup. Dengan useFF = preact(), setiap file .tsx adalah Preact.

• Halaman .mdx diimpor dari "preact". Nexy mengkompilasi file .mdx dengan Preact hanya ketika ia melihat impor tersebut, misalnya import { h } from "preact", dan dengan React sebaliknya. Lihat Markdown dan MDX.

export default function Home() {  return <h1>Hello</h1>;}

import { useParams } from "@nexy/client"; export default function Post() {  const { slug } = useParams<{ slug: string }>();  return <h1>{slug}</h1>;}

import type { ComponentChildren } from "preact"; export default function RootLayout({ children }: { children: ComponentChildren }) {  return (    <html>      <body>        <header>My app</header>        <main>{children}</main>      </body>    </html>  );}

Pulau

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

Mengimpor

Impor komponen di frontmatter file .nexy:

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

---from "@/components/Counter.tsx" 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:

import { useAction } from "@nexy/client";import { add_todo } from "@nexy/actions"; const { run, pending, error, data } = useAction(add_todo);// ...<button onClick={() => run({ title: "New Task" })}>Add</button>

Navigasi

Gunakan komponen Link untuk transisi sisi klien. Perhatikan bahwa Preact menggunakan class alih-alih className:

import { Link } from "@nexy/client"; <Link href="/about" class="nav" activeClassName="active">About</Link>

Untuk navigasi terprogram, gunakan kait useRouter:

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

Akses URL

• usePathname(): jalur saat ini
• useParams(): segmen dinamis
• useSearchParams(): string kueri
• useLocation(): objek lokasi penuh

Langkah selanjutnya

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

Salin halaman sebagai Markdown Sunting di GitHub