Docs/Diferenças de estrutura

Svelte

Nexy renderiza Svelte 5 componentes no servidor e então Svelte 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-svelte

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

O modelo é um projeto em modo servidor com Svelte 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 Svelte em um projeto existente

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

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 grava este arquivo; Nexy escreve __nexy__/vite.ts sozinho, então não o edite.

Regras

• Svelte 5. Os componentes usam runas: $props(), $state() e trechos para crianças.
• Uma estrutura por projeto. useFF leva exatamente uma estrutura; useFF = [svelte(), vue()] interrompe o servidor na inicialização.
• Um componente por arquivo. O nome sob o qual você importa um arquivo .svelte é apenas a tag que você escreve.

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

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

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

Ilhas

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

Importando

Importe componentes no frontmatter do arquivo .nexy:

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

---from "@/components/Counter.svelte" 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 Svelte, isso retorna uma loja (lida com $).

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

Navegação

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

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

Para navegação programática, use o objeto router de @nexy/client:

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

Acesso URL

Todos os dados de localização são fornecidos como lojas:

• $pathname: caminho atual
• $params: segmentos dinâmicos
• $searchParams: string de consulta
• $location: 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