Doku/Rahmenunterschiede

Solid

Nexy rendert Solid 1.9-Komponenten auf dem Server, dann Solid übernimmt sie im Browser. Seiten, Layouts, Inseln und Aktionen sind in jedem Framework gleich: Auf dieser Seite geht es um die Einrichtung und dann um die Teile, die sich von den gemeinsamen Verträgen unterscheiden.

Starten Sie ein Projekt

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

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

Die Vorlage ist ein Servermodus-Projekt mit Solid Inseln. Führen Sie stattdessen nx new my-app ohne Vorlage aus, um die Eingabeaufforderungen zu beantworten: den Router, den Projekttyp, ob clientseitiges Routing verwendet werden soll, dann das Framework.

Aktivieren Sie Solid in einem vorhandenen Projekt

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

Im Client-Modus kompiliert solid({ ssr: true }): Solid eine Komponente unterschiedlich für den Server und für den Browser, und der Client-Modus benötigt beides. nx new schreibt diese Datei; Nexy schreibt __nexy__/vite.ts selbst, also bearbeiten Sie es nicht.

Denken Sie in Signalen

Eine Solid Komponentenfunktion wird einmal ausgeführt. Was sich später ändert, wird über ein Signal gelesen und nur die Ausdrücke, die es lesen, werden aktualisiert:

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

• Rufen Sie das Signal count() innerhalb des JSX auf, nicht in einer Variablen darüber.
• Lesen Sie Requisiten als props.start. Durch die Destrukturierung { start } wird der Wert einmal gelesen und die Aktualisierungen gehen verloren.
• Solid schreibt HTML-Attribute: class, for, charset, nicht className.

Regeln

• Ein Framework pro Projekt. useFF benötigt genau ein Framework; useFF = [solid(), react()] stoppt den Server beim Start. Mit useFF = solid() ist jede .tsx-Datei Solid.

• Nein .mdx mit Solid. MDX kompiliert zu React oder Preact; .md Seiten funktionieren.

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

Inseln

Im Servermodus ist eine in eine .nexy-Datei importierte Solid-Komponente eine Insel.

Importieren

Importieren Sie Komponenten in die Frontmatter der Datei .nexy:

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

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

Trinkrichtlinien

Verwenden Sie die Requisite directive, um zu steuern, wann die Insel hydratisiert:

• client:load (Standard): sofort
• client:idle: wenn der Browser inaktiv ist
• client:visible: wenn es in die Ansicht scrollt
• client:media: wenn die Medienabfrage übereinstimmt

Aktionen und Navigation

Aktionen aufrufen

Verwenden Sie den Hook useAction, um den Status eines Aktionsaufrufs zu verwalten. In Solid gibt dies Zugriffsfunktionen zurück (rufen Sie sie als Funktionen auf).

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

Navigation

Verwenden Sie die Komponente Link für clientseitige Übergänge:

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

Verwenden Sie für die programmatische Navigation den Hook useRouter:

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

URL-Zugriff

Alle Standort-Hooks geben Accessoren zurück:

• usePathname(): aktueller Pfad
• useParams(): dynamische Segmente
• useSearchParams(): Abfragezeichenfolge
• useLocation(): vollständiges Standortobjekt

Nächste Schritte

• Ansichten: Vergleichen Sie die Formate, die eine Seite verwenden kann
• Frontend: Vite und der Client-Build

Seite als Markdown kopieren Auf GitHub bearbeiten