Docs/Diferenças de estrutura

Solid

Nexy renderiza Solid componentes 1.9 no servidor e então Solid os assume no navegador. Páginas, layouts, ilhas e ações são iguais em todos os frameworks: esta página cobre a configuração e depois as partes que diferem dos contratos compartilhados.

Iniciar um projeto

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

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

O modelo é um projeto em modo servidor com Solid ilhas. Execute nx new my-app sem um modelo para responder aos prompts: o roteador, o tipo de projeto, se deve usar roteamento do lado do cliente e, em seguida, a estrutura.

Habilite Solid em um projeto existente

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

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

No modo cliente escreva solid({ ssr: true }): Solid compila um componente de maneira diferente para o servidor e para o navegador, e o modo cliente precisa de ambos. nx new grava este arquivo; Nexy escreve __nexy__/vite.ts sozinho, então não o edite.

Pense em sinais

Uma função de componente Solid é executada uma vez. O que muda depois é lido através de um sinal, e apenas as expressões que o leem são atualizadas:

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

• Chame o sinal, count(), dentro do JSX, não em uma variável acima dele.
• Leia adereços como props.start. A desestruturação { start } lê o valor uma vez e perde as atualizações.
• Solid escreve atributos HTML: class, for, charset, não className.

Regras

• Uma estrutura por projeto. useFF usa exatamente uma estrutura; useFF = [solid(), react()] interrompe o servidor na inicialização. Com useFF = solid(), todo arquivo .tsx é Solid.

• Não .mdx com Solid. MDX compila para React ou Preact; .md páginas funcionam.

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

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

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

Ilhas

No modo servidor, um componente Solid importado para um arquivo .nexy é uma ilha.

Importando

Importe componentes no frontmatter do arquivo .nexy:

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

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

Diretrizes de hidratação

Use a propriedade directive para controlar quando a ilha hidrata:

• client:load (padrão): imediatamente
• client:idle: quando o navegador está ocioso
• client:visible: quando rola para visualização
• client:media: quando a consulta de mídia corresponde

Ações e navegação

Chamando ações

Use o gancho useAction para gerenciar o estado de uma chamada de ação. Em Solid, isso retorna acessadores (chame-os como funções).

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

Navegação

Use o componente Link para transições do lado do cliente:

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

Para navegação programática, use o gancho useRouter:

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

Acesso URL

Todos os ganchos de localização retornam acessadores:

• usePathname(): caminho atual
• useParams(): segmentos dinâmicos
• useSearchParams(): string de consulta
• useLocation(): objeto de localização completo

Próximas etapas

• Visualizações: compare os formatos que uma página pode usar
• Frontend: Vite e a construção do cliente

Copiar a página como Markdown Editar no GitHub