Документация/Различия в фреймворках

Preact

Nexy отображает Preact 10 компонентов на сервере, затем Preact обрабатывает их в браузере. Страницы, макеты, острова и действия одинаковы в каждой платформе: на этой странице рассказывается о настройке, а затем о частях, которые отличаются от общих контрактов.

Начать проект

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

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

Шаблон представляет собой серверный проект с Preact островами. Вместо этого запустите nx new my-app без шаблона, чтобы ответить на запросы: маршрутизатор, тип проекта, использовать ли маршрутизацию на стороне клиента, а затем структуру.

Включить Preact в существующем проекте

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 записывает этот файл; Nexy пишет __nexy__/vite.ts сам, поэтому не редактируйте его.

Напишите Preact

Компонент Preact — это функция в стиле React. Отличия, которые здесь имеют значение:

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

• Хуки происходят из preact/hooks, такие типы, как ComponentChildren из preact.
• Напишите атрибуты HTML: class, for, charset. Link считывает свои классы из class.

Правила

• Один фреймворк на проект. useFF требуется ровно один фреймворк; useFF = [preact(), react()] останавливает сервер при запуске. При использовании useFF = preact() каждый файл .tsx является Preact.

• Страница .mdx импортируется из "preact". Nexy компилирует файл .mdx с Preact только тогда, когда видит этот импорт, например import { h } from "preact", и с React в противном случае. См. Markdown и 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>  );}

Острова

В режиме сервера компонент Preact, импортированный в файл .nexy, является островом.

Импорт

Импортируйте компоненты в начале файла .nexy:

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

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

Директивы по гидратации

Используйте реквизит directive для управления моментом гидратации острова:

• client:load (по умолчанию): немедленно
• client:idle: когда браузер бездействует
• client:visible: когда он прокручивается в поле зрения
• client:media: когда медиа-запрос соответствует

Действия и навигация

Вызов действий

Используйте хук useAction для управления состоянием вызова действия:

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>

Навигация

Используйте компонент Link для переходов на стороне клиента. Обратите внимание, что Preact использует class вместо className:

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

Для программной навигации используйте хук useRouter:

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

URL-доступ

• usePathname(): текущий путь
• useParams(): динамические сегменты
• useSearchParams(): строка запроса
• useLocation(): объект полного местоположения

Следующие шаги

• Просмотры: сравните форматы, которые может использовать страница.
• Фронтенд: Vite и клиентская сборка

Скопировать страницу как Markdown Изменить на GitHub