DocsDiferencias marco

Solid

Nexy renderiza los componentes Solid 1.9 en el servidor, luego Solid 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.

Modo	`nexyconfig.py`	Las páginas son	Solid es
Servidor (predeterminado)	`useCSR = False`	`.nexy` archivos	islas dentro de esas páginas
Cliente	`useCSR = True`	`.tsx` archivos	toda la página, con diseños y un enrutador cliente

Con el enrutador modular, los Solid componentes son islas dentro de las .nexy vistas que devuelve un controlador: no hay ningún archivo de página ni enrutador cliente.

iniciar un proyecto

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

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

La plantilla es un proyecto en modo servidor con Solid 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 Solid en un proyecto existente

nexyconfig.py

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

vite.config.ts

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

En modo cliente, escriba solid({ ssr: true }): Solid compila un componente de manera diferente para el servidor y para el navegador, y el modo cliente necesita ambos. nx new escribe este archivo; Nexy escribe __nexy__/vite.ts por sí mismo, así que no lo edites.

Paquete	La versión `nx new` escribe
`solid-js`	`^1.9.12`
`vite-plugin-solid`	`^2.11.0` (dependencia del desarrollador)

Piensa en señales

Una función de componente Solid se ejecuta una vez. Lo que cambia después se lee a través de una señal, y solo se actualizan las expresiones que la leen:

src/components/Counter.tsx

import { createSignal } from "solid-js"; export default function Counter(props: { start?: number }) {  const [count, setCount] = createSignal(props.start ?? 0);  return <button onClick={() => setCount(count() + 1)}>{count()}</button>;}

Llame a la señal, count(), dentro del JSX, no en una variable encima de él.
Lea los accesorios como props.start. La desestructuración { start } lee el valor una vez y pierde las actualizaciones.
Solid escribe atributos HTML: class, for, charset, no className.

Reglas

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

Las páginas son .tsx. Sólo un archivo .tsx bajo src/routes/ se convierte en una página; .jsx está bien para un componente.
Los componentes se encuentran fuera de src/routes/, generalmente en src/components/, por lo que no son páginas.
Un proyecto en modo servidor no tiene .tsx página, y un proyecto en modo cliente no tiene .nexy página: Nexy se niega a iniciar y nombra el archivo. Ver modos.

Los componentes viven en src/components/ y una vista los importa como islas.

No .mdx con Solid. MDX compila en React o Preact; .md páginas funcionan.

paginas

En modo cliente (useCSR = True), una página es un archivo .tsx.

Componente de página

Una página es la exportación predeterminada del archivo. Si no existe una exportación predeterminada, Nexy elige la primera exportación nombrada.

src/rutas/index.tsx

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

Segmentos dinámicos

Los parámetros de URL están disponibles a través del gancho useParams, que devuelve un descriptor de acceso:

src/rutas/blog/[slug].tsx

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

Diseños

Implementación

El diseño raíz define el shell del documento. Los diseños anidados envuelven el contenido.

src/rutas/layout.tsx

import type { JSX } from "solid-js"; export default function RootLayout(props: { children: JSX.Element }) {  return (    <html>      <body>        <header>My app</header>        <main>{props.children}</main>      </body>    </html>  );}

No desestructurar props.children, como Solid lo lee con pereza.

Islas

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

Importando

Importe componentes en la portada del archivo .nexy:

src/rutas/index.nexy

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

src/apps/home_view.nexy

---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. En Solid, esto devuelve accesores (llámelos como funciones).

import { useAction } from "@nexy/client";import { add_todo } from "@nexy/actions"; const save = useAction(add_todo);// ...<button disabled={save.pending()}>Add</button>

Navegación

Utilice el componente Link para transiciones del lado del cliente:

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

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

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

acceso URL

Todos los ganchos de ubicación devuelven descriptores de acceso:

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

Editar en GitHub