@quark-fw/plugin-react 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quark-fw/plugin-react",
-	"version": "0.1.24",
+	"version": "0.1.26",
 	"main": "src/index.ts",
 	"types": "src/index.ts",
 	"type": "module",
@@ -22,9 +22,9 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@quark-fw/atom": "0.1.24",
-		"@quark-fw/plugin": "0.1.24",
-		"@trpc/client": "^11.0.0",
+		"@quark-fw/atom": "0.1.26",
+		"@quark-fw/plugin": "0.1.26",
+		"@trpc/client": "~11.18.0",
 		"@types/react-dom": "^19.2.3",
 		"express": "^5.2.1",
 		"vite-css-modules": "^1.13.0",
@@ -36,8 +36,8 @@
 		"@mantine/dates": "^9.0.0",
 		"@mantine/modals": "^9.0.0",
 		"@mantine/notifications": "^9.0.0",
-		"@quark-fw/core": "0.1.24",
-		"@quark-fw/store": "0.1.24",
+		"@quark-fw/core": "0.1.26",
+		"@quark-fw/store": "0.1.26",
 		"@vitejs/plugin-react": "^5.1.0",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
@@ -45,6 +45,7 @@
 		"vite": "^7.1.0"
 	},
 	"devDependencies": {
+		"@trpc/server": "~11.18.0",
 		"@types/express": "^5.0.6",
 		"@types/react": "^19.2.14",
 		"vitest": "^5.0.0"

package/src/i18n/config.test.ts

@@ -0,0 +1,16 @@
+import { expect, test } from "vitest";
+import { buildLocalePath } from "./config.js";
+
+// Корень локали — без завершающего слэша: так его рендерит react-router в
+// ссылках (href="/ru") и так его перечисляет sitemap приложения. Форма со
+// слэшем превращалась у Google в дубликат с другим canonical.
+test("buildLocalePath: корень локали без слэша", () => {
+	expect(buildLocalePath("ru", "/")).toBe("/ru");
+	expect(buildLocalePath("ru", "")).toBe("/ru");
+});
+
+test("buildLocalePath: вложенные пути с префиксом и без", () => {
+	expect(buildLocalePath("en", "/tbilisi")).toBe("/en/tbilisi");
+	expect(buildLocalePath("en", "tbilisi")).toBe("/en/tbilisi");
+	expect(buildLocalePath("ka", "/tbilisi?page=2")).toBe("/ka/tbilisi?page=2");
+});

package/src/i18n/config.ts

@@ -79,6 +79,9 @@ export function parseLocalePath(
 }
 
 export function buildLocalePath(locale: string, strippedPath: string): string {
+	// корень локали — без завершающего слэша: так его рендерит react-router
+	// в ссылках и перечисляет sitemap; /ru/ Google считал дубликатом /ru
+	if (strippedPath === "/" || strippedPath === "") return `/${locale}`;
 	return `/${locale}${strippedPath.startsWith("/") ? strippedPath : `/${strippedPath}`}`;
 }
 

package/src/ssr/createRequestTrpcClient.test.ts

@@ -0,0 +1,167 @@
+import { afterAll, beforeAll, expect, test } from "vitest";
+import express from "express";
+import http, { type Server } from "node:http";
+import type { AddressInfo } from "node:net";
+import type { Request, Response } from "express";
+import { initTRPC, TRPCError } from "@trpc/server";
+import { createExpressMiddleware } from "@trpc/server/adapters/express";
+import { isTRPCClientError } from "@trpc/client";
+import { createRequestTrpcClient } from "./createRequestTrpcClient.js";
+
+type Ctx = { req: Request; res: Response; user?: { id: string } };
+const t = initTRPC.context<Ctx>().create();
+
+// счётчик HTTP-вызовов: в local-режиме сервер не должен получать запросов
+let httpHits = 0;
+
+const appRouter = t.router({
+	entity: t.router({
+		task: t.router({
+			list: t.procedure
+				.input((v: unknown) => v as { limit: number })
+				.mutation(({ input, ctx }) => ({
+					limit: input.limit,
+					cookie: ctx.req.headers.cookie ?? null,
+					user: ctx.user?.id ?? null,
+				})),
+		}),
+	}),
+	secret: t.procedure.query(() => {
+		throw new TRPCError({ code: "UNAUTHORIZED", message: "login first" });
+	}),
+	now: t.procedure.query(() => new Date("2026-10-07T00:00:00.000Z")),
+});
+
+const createContext = ({ req, res }: { req: Request; res: Response }): Ctx => ({
+	req,
+	res,
+	user: (req as { user?: { id: string } }).user,
+});
+
+let server: Server;
+let port: number;
+
+beforeAll(async () => {
+	const app = express();
+	app.use((_req, _res, next) => {
+		httpHits++;
+		next();
+	});
+	app.use(
+		"/api/trpc",
+		createExpressMiddleware({ router: appRouter, createContext }),
+	);
+	server = http.createServer(app);
+	await new Promise<void>((resolve) => server.listen(0, resolve));
+	port = (server.address() as AddressInfo).port;
+});
+
+afterAll(async () => {
+	await new Promise<void>((resolve) => server.close(() => resolve()));
+});
+
+// SSR-запрос: cookie браузера и user, положенный passport'ом
+const fakeReq = () =>
+	({
+		headers: { cookie: "quark.sid=abc" },
+		user: { id: "u1" },
+	}) as unknown as Request;
+const fakeRes = () => ({}) as unknown as Response;
+
+test("local: вложенная mutation вызывается без HTTP, с контекстом запроса", async () => {
+	const before = httpHits;
+	const client = createRequestTrpcClient({
+		req: fakeReq(),
+		res: fakeRes(),
+		port,
+		router: appRouter,
+		createContext,
+	});
+	const result = await (
+		client as unknown as {
+			entity: {
+				task: {
+					list: {
+						mutate: (i: { limit: number }) => Promise<unknown>;
+					};
+				};
+			};
+		}
+	).entity.task.list.mutate({ limit: 5 });
+	expect(result).toEqual({ limit: 5, cookie: "quark.sid=abc", user: "u1" });
+	expect(httpHits).toBe(before);
+});
+
+test("local: TRPCError доходит как TRPCClientError с кодом, как по HTTP", async () => {
+	const client = createRequestTrpcClient({
+		req: fakeReq(),
+		res: fakeRes(),
+		port,
+		router: appRouter,
+		createContext,
+	});
+	const call = (
+		client as unknown as { secret: { query: () => Promise<unknown> } }
+	).secret.query();
+	await expect(call).rejects.toSatisfy((e: unknown) => {
+		return (
+			isTRPCClientError(e) &&
+			e.data?.code === "UNAUTHORIZED" &&
+			e.message === "login first"
+		);
+	});
+});
+
+test("local: Date приходит строкой — та же форма, что после JSON по HTTP", async () => {
+	const client = createRequestTrpcClient({
+		req: fakeReq(),
+		res: fakeRes(),
+		port,
+		router: appRouter,
+		createContext,
+	});
+	const now = await (
+		client as unknown as { now: { query: () => Promise<unknown> } }
+	).now.query();
+	expect(now).toBe("2026-10-07T00:00:00.000Z");
+});
+
+test("http: без роутера идём на loopback и пробрасываем cookie", async () => {
+	const before = httpHits;
+	const client = createRequestTrpcClient({
+		req: fakeReq(),
+		res: fakeRes(),
+		port,
+	});
+	const result = await (
+		client as unknown as {
+			entity: {
+				task: {
+					list: {
+						mutate: (i: { limit: number }) => Promise<unknown>;
+					};
+				};
+			};
+		}
+	).entity.task.list.mutate({ limit: 1 });
+	// user по HTTP не передаётся: его на той стороне восстановит сессия
+	expect(result).toEqual({ limit: 1, cookie: "quark.sid=abc", user: null });
+	expect(httpHits).toBe(before + 1);
+});
+
+test("http: явный url главнее локального роутера (API в другом процессе)", async () => {
+	const before = httpHits;
+	const client = createRequestTrpcClient({
+		req: fakeReq(),
+		res: fakeRes(),
+		port: 1, // заведомо мёртвый loopback-порт: должен использоваться url
+		router: appRouter,
+		createContext,
+		url: `http://127.0.0.1:${port}/api/trpc`,
+	});
+	const now = await (
+		client as unknown as { now: { query: () => Promise<unknown> } }
+	).now.query();
+	expect(now).toBe("2026-10-07T00:00:00.000Z");
+	expect(httpHits).toBe(before + 1);
+});

package/src/ssr/createRequestTrpcClient.ts

@@ -1,20 +1,75 @@
-import { createTRPCClient, httpLink } from "@trpc/client";
+import { createTRPCClient, httpLink, unstable_localLink } from "@trpc/client";
+import type { Request, Response } from "express";
 import { jsonSafeFetch, type TRPCClient } from "@quark-fw/store";
 
+// Тип роутера берём из сигнатуры link'а: plugin-react не зависит от
+// @trpc/server и не должен тянуть его ради одного типа
+type LocalLinkOptions = Parameters<typeof unstable_localLink>[0];
+export type SsrRouter = LocalLinkOptions["router"];
+
+export type CreateRequestTrpcClientArgs = {
+	req: Request;
+	res: Response;
+	/** порт собственного HTTP-сервера — для loopback, когда роутера нет */
+	port: number;
+	/** роутер приложения, если он живёт в этом же процессе (quark.trpc.router) */
+	router?: SsrRouter;
+	/** контекст процедуры из запроса — тот же, что у /api/trpc */
+	createContext?: (args: { req: Request; res: Response }) => unknown;
+	/**
+	 * Явный адрес API (SSR_TRPC_URL): tRPC-сервер в другом процессе или на
+	 * другой машине. Главнее локального роутера.
+	 */
+	url?: string;
+};
+
 /**
- * tRPC-клиент КОНКРЕТНОГО запроса: SSR ходит к собственному серверу по
- * HTTP и пробрасывает cookie, чтобы страница рендерилась от имени
- * залогиненного пользователя. Клиент собирается здесь, а роутер объявляет
+ * tRPC-клиент КОНКРЕТНОГО SSR-запроса. Три транспорта, по убыванию приоритета:
+ *
+ * 1. `url` — HTTP к внешнему API (другой процесс/машина), cookie пробрасывается.
+ * 2. `router` — вызов процедур in-process: без HTTP, сессии и passport на
+ *    каждое чтение store; контекст собирается из этого же req/res, так что
+ *    процедуры видят того же пользователя, что и по HTTP. Результат проходит
+ *    JSON-раундтрип внутри link'а — Date приходит строкой, как по сети.
+ * 3. loopback — HTTP к собственному серверу (поведение до появления router).
+ *
+ * Ограничение in-process пути: ctx.res — это стримящийся SSR-ответ, и
+ * процедура, которая ставит заголовки, после записи shell получит
+ * ERR_HTTP_HEADERS_SENT. Клиент собирается здесь, а роутер объявляет
  * приложение — тот же шов аугментации, что и в сторе.
  */
-export function createRequestTrpcClient(
-	port: number,
-	cookie: string | undefined,
-): TRPCClient {
+export function createRequestTrpcClient({
+	req,
+	res,
+	port,
+	router,
+	createContext,
+	url,
+}: CreateRequestTrpcClientArgs): TRPCClient {
+	const cookie = req.headers.cookie;
+
+	if (!url && router && createContext) {
+		return createTRPCClient({
+			links: [
+				unstable_localLink({
+					router,
+					createContext: async () => createContext({ req, res }),
+					// как express-адаптер: наружу уходит форма ошибки, в лог —
+					// только то, что по HTTP было бы 500
+					onError: ({ error, path }) => {
+						if (error.code === "INTERNAL_SERVER_ERROR") {
+							console.error(`[react] ssr tRPC ${path}:`, error);
+						}
+					},
+				}),
+			],
+		}) as TRPCClient;
+	}
+
 	return createTRPCClient({
 		links: [
 			httpLink({
-				url: `http://127.0.0.1:${port}/api/trpc`,
+				url: url ?? `http://127.0.0.1:${port}/api/trpc`,
 				headers: cookie ? { cookie } : {},
 				fetch: jsonSafeFetch,
 			}),

package/src/ssr/getRenderMiddleware.ts

@@ -15,6 +15,7 @@ import {
 import {
 	getReactAtoms,
 	getRequestOrigin,
+	getTrpcPlugin,
 	parseCookies,
 	serverErrorBody,
 } from "./helpers.js";
@@ -23,6 +24,7 @@ import { createRendererLoader } from "./createRendererLoader.js";
 import { createPreloadTagWriter } from "./createPreloadTagWriter.js";
 import { createRequestTrpcClient } from "./createRequestTrpcClient.js";
 import { createStreamingStore } from "./createStreamingStore.js";
+import { stripTrailingSlash } from "../utils/stripTrailingSlash.js";
 
 export type GetRenderMiddlewareArgs = {
 	/** dev: модули грузятся через vite; в prod — из собранного бандла */
@@ -42,6 +44,21 @@ export default function getRenderMiddleware({ vite }: GetRenderMiddlewareArgs) {
 			const i18nConfig = (rendererModule as { i18nConfig?: I18nConfig })
 				.i18nConfig;
 			const urlWithoutSearch = removeSearchParamsFromUrl(req.originalUrl);
+
+			// одна каноническая форма пути — без завершающего слэша: /ru/ и
+			// /ru/tbilisi/ отдавали 200 со своим canonical и дублировали страницы
+			const normalized = stripTrailingSlash(urlWithoutSearch);
+			if (normalized) {
+				const searchIndex = req.originalUrl.indexOf("?");
+				res.redirect(
+					301,
+					normalized +
+						(searchIndex === -1
+							? ""
+							: req.originalUrl.slice(searchIndex)),
+				);
+				return;
+			}
 			const { locale, strippedPathname, basename, redirect } =
 				parseLocalePath(urlWithoutSearch, i18nConfig);
 
@@ -81,10 +98,17 @@ export default function getRenderMiddleware({ vite }: GetRenderMiddlewareArgs) {
 			const registerModule = createPreloadTagWriter(manifest, res);
 
 			const reactAtoms = getReactAtoms();
-			const trpcClient = createRequestTrpcClient(
-				reactAtoms?.port?.value ?? 3000,
-				req.headers.cookie,
-			);
+			// роутер читается на каждый запрос: приложение отдаёт его в
+			// setRouter после quark.ready(), конкурентно со стартом сервера
+			const trpc = getTrpcPlugin();
+			const trpcClient = createRequestTrpcClient({
+				req,
+				res,
+				port: reactAtoms?.port?.value ?? 3000,
+				router: trpc?.router,
+				createContext: trpc?.createContext,
+				url: process.env.SSR_TRPC_URL,
+			});
 			const { store, releaseCacheWrites } = createStreamingStore(
 				trpcClient,
 				res,

package/src/ssr/helpers.ts

@@ -1,5 +1,6 @@
 // Хелперы SSR-мидлвары.
-import type { Request } from "express";
+import type { Request, Response } from "express";
+import type { SsrRouter } from "./createRequestTrpcClient.js";
 
 export const isProd = process.env.NODE_ENV === "production";
 
@@ -49,6 +50,19 @@ export type ReactAtoms = {
 export const getReactAtoms = (): ReactAtoms | undefined =>
 	(globalThis as { quark?: { react?: ReactAtoms } }).quark?.react;
 
+/**
+ * Поверхность plugin-trpc для in-process вызовов из SSR. Читается
+ * структурно: plugin-react не зависит от plugin-trpc и работает без него
+ * (тогда SSR ходит по HTTP).
+ */
+export type TrpcPlugin = {
+	router?: SsrRouter;
+	createContext?: (args: { req: Request; res: Response }) => unknown;
+};
+
+export const getTrpcPlugin = (): TrpcPlugin | undefined =>
+	(globalThis as { quark?: { trpc?: TrpcPlugin } }).quark?.trpc;
+
 /**
  * Абсолютный origin запроса для canonical/hreflang/JSON-LD.
  *

package/src/utils/stripTrailingSlash.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from "vitest";
+import { stripTrailingSlash } from "./stripTrailingSlash.js";
+
+test("stripTrailingSlash: путь без слэша и корень не меняются", () => {
+	expect(stripTrailingSlash("/")).toBeNull();
+	expect(stripTrailingSlash("/ru")).toBeNull();
+	expect(stripTrailingSlash("/ru/tbilisi")).toBeNull();
+});
+
+test("stripTrailingSlash: завершающие слэши срезаются", () => {
+	expect(stripTrailingSlash("/ru/")).toBe("/ru");
+	expect(stripTrailingSlash("/ru/tbilisi/")).toBe("/ru/tbilisi");
+	expect(stripTrailingSlash("/ru/tbilisi//")).toBe("/ru/tbilisi");
+});

package/src/utils/stripTrailingSlash.ts

@@ -0,0 +1,10 @@
+/**
+ * Путь без завершающих слэшей, если они были; null — если менять нечего.
+ * Корень "/" остаётся как есть. Нужен SSR-мидлваре: /ru/ и /ru/tbilisi/
+ * рендерились как отдельные страницы со своим canonical, и Google считал
+ * их дубликатами.
+ */
+export function stripTrailingSlash(pathname: string): string | null {
+	if (pathname.length <= 1 || !pathname.endsWith("/")) return null;
+	return pathname.replace(/\/+$/, "") || "/";
+}