@quark-fw/plugin-react 0.1.17 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quark-fw/plugin-react",
-	"version": "0.1.17",
+	"version": "0.1.19",
 	"main": "src/index.ts",
 	"types": "src/index.ts",
 	"type": "module",
@@ -22,8 +22,8 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@quark-fw/atom": "0.1.17",
-		"@quark-fw/plugin": "0.1.17",
+		"@quark-fw/atom": "0.1.19",
+		"@quark-fw/plugin": "0.1.19",
 		"@trpc/client": "^11.0.0",
 		"@types/react-dom": "^19.2.3",
 		"express": "^5.2.1",
@@ -36,8 +36,8 @@
 		"@mantine/dates": "^9.0.0",
 		"@mantine/modals": "^9.0.0",
 		"@mantine/notifications": "^9.0.0",
-		"@quark-fw/core": "0.1.17",
-		"@quark-fw/store": "0.1.17",
+		"@quark-fw/core": "0.1.19",
+		"@quark-fw/store": "0.1.19",
 		"@vitejs/plugin-react": "^5.1.0",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",

package/src/index.ts

@@ -61,6 +61,11 @@ await quark.registerPlugin({
 			if (fs.existsSync(staticDir)) app.use(express.static(staticDir));
 			app.use(getRenderMiddleware({}));
 		} else {
+			// в dev каталог static/ никто не отдавал: запрос /fonts/... проваливался
+			// в SSR и получал редирект локали вместо файла. В проде то же самое
+			// делает express.static из build/static.
+			const staticDir = `${process.cwd()}/static`;
+			if (fs.existsSync(staticDir)) app.use(express.static(staticDir));
 			vite = await getVite({
 				root: appFrontendRoot(),
 				appPort: quark.react.port.value,

package/src/seo/SeoProvider.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { useStore } from "@quark-fw/store";
 import { matchPath } from "react-router-dom";
 import { getMatchedRoute } from "../Router/getMatchedRoute.js";
@@ -18,10 +18,19 @@ export function SeoProvider({
 }) {
 	const [seoObject, setSeoObject] = useState<SeoMap>(initial ?? {});
 	const { pathname } = useLocation();
+	const navigate = useNavigate();
 	const store = useStore();
 
 	const current = seoObject[pathname];
 
+	// редирект из меты при клиентской навигации (на SSR его сделала мидлвара)
+	useEffect(() => {
+		const target = current?.redirect?.to;
+		if (!target) return;
+		if (target.startsWith("/")) navigate(target, { replace: true });
+		else window.location.replace(target);
+	}, [current?.redirect?.to, navigate]);
+
 	// клиентская навигация: меты для нового пути ещё нет — резолвим её
 	// из модуля страницы (тот же resolveMeta, что и на сервере)
 	useEffect(() => {

package/src/seo/createPageMeta.test.ts

@@ -51,3 +51,11 @@ test("breadcrumbsJsonLd строит BreadcrumbList с абсолютными @i
 		],
 	});
 });
+
+test("resolveMeta резолвит redirect", async () => {
+	const seo = await resolveMeta(
+		{ redirect: async () => ({ to: "/listing/new", status: 301 }) },
+		{ store: {} as never, params: {} },
+	);
+	expect(seo.redirect).toEqual({ to: "/listing/new", status: 301 });
+});

package/src/seo/createPageMeta.ts

@@ -34,6 +34,9 @@ export type JsonLd = Record<string, unknown>;
 /** крошка навигации: подпись и путь относительно basename роутера */
 export type PageMetaBreadcrumb = { label: string; to: string };
 
+/** редирект вместо рендера: путь относительно basename (или абсолютный URL) и статус */
+export type PageMetaRedirect = { to: string; status?: 301 | 302 | 307 | 308 };
+
 export type PageMeta = {
 	title?: MetaValue<string>;
 	description?: MetaValue<string>;
@@ -49,6 +52,12 @@ export type PageMeta = {
 	breadcrumbs?: MetaValue<PageMetaBreadcrumb[] | undefined>;
 	/** HTTP-статус ответа (например 404 для «не найдено») */
 	status?: MetaValue<number>;
+	/**
+	 * Редирект: на SSR — ответ 30x до рендера, при клиентской навигации —
+	 * navigate(replace). Для перенесённых и схлопнутых страниц (дубликаты,
+	 * смена slug), чтобы не отдавать 404 по проиндексированным адресам.
+	 */
+	redirect?: MetaValue<PageMetaRedirect | undefined>;
 };
 
 export type ResolvedSeo = {
@@ -59,6 +68,7 @@ export type ResolvedSeo = {
 	jsonLD?: JsonLd[];
 	breadcrumbs?: PageMetaBreadcrumb[];
 	status?: number;
+	redirect?: PageMetaRedirect;
 };
 
 export function createPageMeta(meta: PageMeta): PageMeta {
@@ -82,17 +92,35 @@ export async function resolveMeta(
 	ctx: PageMetaContext,
 ): Promise<ResolvedSeo> {
 	if (!meta) return {};
-	const [title, description, robots, og, jsonLD, breadcrumbs, status] =
-		await Promise.all([
-			resolveValue(meta.title, ctx),
-			resolveValue(meta.description, ctx),
-			resolveValue(meta.robots, ctx),
-			resolveValue(meta.og, ctx),
-			resolveValue(meta.jsonLD, ctx),
-			resolveValue(meta.breadcrumbs, ctx),
-			resolveValue(meta.status, ctx),
-		]);
-	return { title, description, robots, og, jsonLD, breadcrumbs, status };
+	const [
+		title,
+		description,
+		robots,
+		og,
+		jsonLD,
+		breadcrumbs,
+		status,
+		redirect,
+	] = await Promise.all([
+		resolveValue(meta.title, ctx),
+		resolveValue(meta.description, ctx),
+		resolveValue(meta.robots, ctx),
+		resolveValue(meta.og, ctx),
+		resolveValue(meta.jsonLD, ctx),
+		resolveValue(meta.breadcrumbs, ctx),
+		resolveValue(meta.status, ctx),
+		resolveValue(meta.redirect, ctx),
+	]);
+	return {
+		title,
+		description,
+		robots,
+		og,
+		jsonLD,
+		breadcrumbs,
+		status,
+		redirect,
+	};
 }
 
 /** Узел BreadcrumbList для <head>; linkBase — origin + basename роутера. */

package/src/ssr/createPreloadTagWriter.ts

@@ -3,34 +3,51 @@ import type { Response } from "express";
 import { UglyModule } from "../Router/UglyModule.js";
 
 /**
- * Пишет в ответ preload-теги (modulepreload + css) для модулей страницы,
- * которые регистрирует роутер по мере рендера. Каждый css — один раз.
+ * Пишет в ответ preload-теги для модулей страницы, которые регистрирует
+ * роутер по мере рендера.
+ *
+ * modulepreload — только на чанк самого модуля и его прямые импорты: этого
+ * хватает, чтобы гидрация не ждала лишний хоп сети. Раньше обход шёл по
+ * всему графу импортов, и главная страница bina получала ~30 preload-ов на
+ * ~200 KB gzip, большую часть которых первый экран не исполнял. CSS, напротив,
+ * собирается по всему графу: стили вложенных чанков нужны к первому кадру,
+ * иначе разметка мигает без оформления. Каждый тег — один раз.
  */
 export function createPreloadTagWriter(manifest: Manifest, res: Response) {
-	const requiredModules: UglyModule[] = [];
-	const written: Record<string, boolean> = {};
+	const written = new Set<string>();
 
-	const extractTags = (link: string): void => {
+	const writeOnce = (id: string, tag: string) => {
+		if (written.has(id)) return;
+		written.add(id);
+		res.write(tag);
+	};
+
+	const writeCss = (link: string, seen = new Set<string>()): void => {
+		if (seen.has(link)) return;
+		seen.add(link);
 		const chunk = manifest[link];
-		if (chunk && chunk.name !== "entry-client") {
-			res.write(
-				`<link rel="modulepreload" as="script" crossorigin href="/${chunk.file}">`,
-			);
-			(chunk.css ?? []).forEach((cssFile) => {
-				if (!written[cssFile]) {
-					written[cssFile] = true;
-					res.write(`<link rel="stylesheet" href="/${cssFile}"/>`);
-				}
-			});
-			(chunk.imports ?? []).map((childLink) => extractTags(childLink));
-		}
+		if (!chunk) return;
+		(chunk.css ?? []).forEach((cssFile) =>
+			writeOnce(cssFile, `<link rel="stylesheet" href="/${cssFile}"/>`),
+		);
+		(chunk.imports ?? []).forEach((child) => writeCss(child, seen));
 	};
 
-	return function registerModule(uglyModule: UglyModule) {
-		if (!requiredModules.includes(uglyModule)) {
-			requiredModules.push(uglyModule);
+	const writeModule = (link: string) => {
+		const chunk = manifest[link];
+		if (!chunk || chunk.name === "entry-client") return;
+		writeOnce(
+			chunk.file,
+			`<link rel="modulepreload" as="script" crossorigin href="/${chunk.file}">`,
+		);
+	};
 
-			extractTags(uglyModule.modulePath.substring(1));
-		}
+	return function registerModule(uglyModule: UglyModule) {
+		const link = uglyModule.modulePath.substring(1);
+		const chunk = manifest[link];
+		if (!chunk || chunk.name === "entry-client") return;
+		writeModule(link);
+		(chunk.imports ?? []).forEach(writeModule);
+		writeCss(link);
 	};
 }

package/src/ssr/getRenderMiddleware.ts

@@ -110,6 +110,16 @@ export default function getRenderMiddleware({ vite }: GetRenderMiddlewareArgs) {
 				origin,
 			});
 
+			// редирект из меты: страница переехала или схлопнута — отвечаем
+			// 30x до рендера, относительный путь дополняется basename локали
+			if (seo.redirect) {
+				const target = seo.redirect.to.startsWith("/")
+					? basename + seo.redirect.to
+					: seo.redirect.to;
+				res.redirect(seo.redirect.status ?? 302, target);
+				return;
+			}
+
 			res.status(seo.status ?? (page ? 200 : 404));
 
 			// hreflang-кластер: каждая локаль + x-default на дефолтную