Docs/Diferencias marco

Preact

Nexy renderiza Preact 10 componentes en el servidor, luego Preact los toma en el navegador. Las páginas, diseños, islas y acciones son las mismas en todos los marcos: esta página cubre la configuración y luego las partes que difieren de los contratos compartidos.

iniciar un proyecto

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

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

La plantilla es un proyecto en modo servidor con Preact islas. Ejecute nx new my-app sin una plantilla para responder a las indicaciones: el enrutador, el tipo de proyecto, si se utilizará el enrutamiento del lado del cliente y luego el marco.

Habilitar Preact en un proyecto existente

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 escribe este archivo; Nexy escribe __nexy__/vite.ts por sí mismo, así que no lo edites.

Escribe Preact

Un componente Preact es una función de estilo React. Las diferencias que importan aquí:

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>;}

• Los ganchos provienen de preact/hooks, tipos como ComponentChildren de preact.
• Escribe atributos HTML: class, for, charset. Link lee sus clases de class.

Reglas

• Un marco por proyecto. useFF toma exactamente un marco; useFF = [preact(), react()] detiene el servidor al inicio. Con useFF = preact(), cada archivo .tsx es Preact.

• Una página .mdx se importa desde "preact". Nexy compila un archivo .mdx con Preact solo cuando ve esa importación, por ejemplo import { h } from "preact", y con React en caso contrario. Ver Markdown y 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>  );}

Islas

En modo servidor, un componente Preact importado a un archivo .nexy es una isla.

Importando

Importe componentes en la portada del archivo .nexy:

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

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

Directivas de hidratación

Utilice el accesorio directive para controlar cuándo se hidrata la isla:

• client:load (predeterminado): inmediatamente
• client:idle: cuando el navegador está inactivo
• client:visible: cuando se desplaza a la vista
• client:media: cuando la consulta de medios coincide

Acciones y navegación

Llamar a acciones

Utilice el gancho useAction para administrar el estado de una llamada a la acción:

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>

Navegación

Utilice el componente Link para transiciones del lado del cliente. Tenga en cuenta que Preact usa class en lugar de className:

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

Para navegación programática, use el gancho useRouter:

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

acceso URL

• usePathname(): ruta actual
• useParams(): segmentos dinámicos
• useSearchParams(): cadena de consulta
• useLocation(): objeto de ubicación completa

Próximos pasos

• Vistas: compara los formatos que puede usar una página
• Frontend: Vite y la compilación del cliente

Copiar la página como Markdown Editar en GitHub