@quark-fw/plugin-react 0.1.7 → 0.1.9

package/src/seo/SeoContext.tsx

@@ -1,16 +1,5 @@
-import {
-	createContext,
-	ReactNode,
-	useContext,
-	useEffect,
-	useMemo,
-	useState,
-} from "react";
-import { useLocation } from "react-router-dom";
-import { useStore } from "@quark-fw/store";
-import { matchPath } from "react-router-dom";
-import { getMatchedRoute } from "../Router/getMatchedRoute.js";
-import type { PageMeta, ResolvedSeo } from "./createPageMeta.js";
+import { createContext, useContext } from "react";
+import type { ResolvedSeo } from "./createPageMeta.js";
 
 export type SeoMap = Record<string, ResolvedSeo>;
 
@@ -26,69 +15,4 @@ const SeoContext = createContext<SeoContextValue>({
 
 export const useSeo = () => useContext(SeoContext);
 
-export function SeoProvider({
-	children,
-	seoObject: initial,
-}: {
-	children: ReactNode;
-	seoObject?: SeoMap;
-}) {
-	const [seoObject, setSeoObject] = useState<SeoMap>(initial ?? {});
-	const { pathname } = useLocation();
-	const store = useStore();
-
-	const current = seoObject[pathname];
-
-	// клиентская навигация: меты для нового пути ещё нет — резолвим её
-	// из модуля страницы (тот же resolveMeta, что и на сервере)
-	useEffect(() => {
-		if (current) return;
-		let cancelled = false;
-		void (async () => {
-			const uglyModule = getMatchedRoute(pathname);
-			if (!uglyModule) return;
-			const loaded = await uglyModule.load();
-			const meta = (loaded?.default as { meta?: PageMeta } | undefined)
-				?.meta;
-			if (!meta || cancelled) return;
-			const routeProps = matchPath(
-				{ path: uglyModule.urlPath, end: false, caseSensitive: false },
-				pathname,
-			);
-			const { resolveMeta } = await import("./createPageMeta.js");
-			const resolved = await resolveMeta(meta, {
-				store,
-				params: (routeProps?.params ?? {}) as Record<string, string>,
-			});
-			if (!cancelled) {
-				setSeoObject((prev) => ({ ...prev, [pathname]: resolved }));
-			}
-		})();
-		return () => {
-			cancelled = true;
-		};
-		// store живёт всё время жизни приложения и меняться не может, а его
-		// добавление в зависимости ничего бы не изменило
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [pathname, current]);
-
-	// заголовок вкладки при клиентской навигации
-	useEffect(() => {
-		if (typeof document === "undefined") return;
-		if (current?.title) document.title = current.title;
-	}, [current?.title]);
-
-	const value = useMemo<SeoContextValue>(
-		() => ({
-			...(current ?? {}),
-			seoObject,
-			setPathnameSeo: (path, seo) =>
-				setSeoObject((prev) => ({ ...prev, [path]: seo })),
-		}),
-		[current, seoObject],
-	);
-
-	return <SeoContext.Provider value={value}>{children}</SeoContext.Provider>;
-}
-
 export default SeoContext;

package/src/seo/SeoProvider.tsx

@@ -0,0 +1,72 @@
+import { ReactNode, useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { useStore } from "@quark-fw/store";
+import { matchPath } from "react-router-dom";
+import { getMatchedRoute } from "../Router/getMatchedRoute.js";
+import type { PageMeta } from "./createPageMeta.js";
+import SeoContext, { type SeoContextValue, type SeoMap } from "./SeoContext.js";
+
+export function SeoProvider({
+	children,
+	seoObject: initial,
+}: {
+	children: ReactNode;
+	seoObject?: SeoMap;
+}) {
+	const [seoObject, setSeoObject] = useState<SeoMap>(initial ?? {});
+	const { pathname } = useLocation();
+	const store = useStore();
+
+	const current = seoObject[pathname];
+
+	// клиентская навигация: меты для нового пути ещё нет — резолвим её
+	// из модуля страницы (тот же resolveMeta, что и на сервере)
+	useEffect(() => {
+		if (current) return;
+		let cancelled = false;
+		void (async () => {
+			const uglyModule = getMatchedRoute(pathname);
+			if (!uglyModule) return;
+			const loaded = await uglyModule.load();
+			const meta = (loaded?.default as { meta?: PageMeta } | undefined)
+				?.meta;
+			if (!meta || cancelled) return;
+			const routeProps = matchPath(
+				{ path: uglyModule.urlPath, end: false, caseSensitive: false },
+				pathname,
+			);
+			const { resolveMeta } = await import("./createPageMeta.js");
+			const resolved = await resolveMeta(meta, {
+				store,
+				params: (routeProps?.params ?? {}) as Record<string, string>,
+			});
+			if (!cancelled) {
+				setSeoObject((prev) => ({ ...prev, [pathname]: resolved }));
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+		// store живёт всё время жизни приложения и меняться не может, а его
+		// добавление в зависимости ничего бы не изменило
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [pathname, current]);
+
+	// заголовок вкладки при клиентской навигации
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		if (current?.title) document.title = current.title;
+	}, [current?.title]);
+
+	const value = useMemo<SeoContextValue>(
+		() => ({
+			...(current ?? {}),
+			seoObject,
+			setPathnameSeo: (path, seo) =>
+				setSeoObject((prev) => ({ ...prev, [path]: seo })),
+		}),
+		[current, seoObject],
+	);
+
+	return <SeoContext.Provider value={value}>{children}</SeoContext.Provider>;
+}

package/src/ssr/createPreloadTagWriter.ts

@@ -0,0 +1,36 @@
+import type { Manifest } from "vite";
+import type { Response } from "express";
+import { UglyModule } from "../Router/UglyModule.js";
+
+/**
+ * Пишет в ответ preload-теги (modulepreload + css) для модулей страницы,
+ * которые регистрирует роутер по мере рендера. Каждый css — один раз.
+ */
+export function createPreloadTagWriter(manifest: Manifest, res: Response) {
+	const requiredModules: UglyModule[] = [];
+	const written: Record<string, boolean> = {};
+
+	const extractTags = (link: string): void => {
+		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));
+		}
+	};
+
+	return function registerModule(uglyModule: UglyModule) {
+		if (!requiredModules.includes(uglyModule)) {
+			requiredModules.push(uglyModule);
+
+			extractTags(uglyModule.modulePath.substring(1));
+		}
+	};
+}

package/src/ssr/createRendererLoader.ts

@@ -0,0 +1,29 @@
+import type { ViteDevServer } from "vite";
+import path from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { buildPaths } from "../utils/viteConfig.js";
+import { isProd } from "./helpers.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+type RendererModule = typeof import("../frontend/entry-server.js");
+
+/**
+ * Загрузчик SSR-бандла: в prod импортируется один раз из сборки,
+ * в dev — через vite (с HMR).
+ */
+export function createRendererLoader(vite?: ViteDevServer) {
+	let prodRenderer: Promise<RendererModule>;
+
+	return function loadRenderer(): Promise<RendererModule> {
+		if (isProd) {
+			prodRenderer ??= import(
+				pathToFileURL(buildPaths().serverEntry).href
+			) as Promise<RendererModule>;
+			return prodRenderer;
+		}
+		return vite!.ssrLoadModule(
+			path.join(__dirname, "../frontend/entry-server.js"),
+		) as Promise<RendererModule>;
+	};
+}

package/src/ssr/createRequestTrpcClient.ts

@@ -0,0 +1,23 @@
+import { createTRPCClient, httpLink } from "@trpc/client";
+import { jsonSafeFetch, type TRPCClient } from "@quark-fw/store";
+
+/**
+ * tRPC-клиент КОНКРЕТНОГО запроса: SSR ходит к собственному серверу по
+ * HTTP и пробрасывает cookie, чтобы страница рендерилась от имени
+ * залогиненного пользователя. Клиент собирается здесь, а роутер объявляет
+ * приложение — тот же шов аугментации, что и в сторе.
+ */
+export function createRequestTrpcClient(
+	port: number,
+	cookie: string | undefined,
+): TRPCClient {
+	return createTRPCClient({
+		links: [
+			httpLink({
+				url: `http://127.0.0.1:${port}/api/trpc`,
+				headers: cookie ? { cookie } : {},
+				fetch: jsonSafeFetch,
+			}),
+		],
+	}) as TRPCClient;
+}

package/src/ssr/createStreamingStore.ts

@@ -0,0 +1,47 @@
+import type { Response } from "express";
+import Store, { NOT_READY_STATE, type TRPCClient } from "@quark-fw/store";
+import serializeForScript from "../utils/serializeForScript.js";
+
+/**
+ * Store, стримящий резолв данных в ответ по мере рендера: клиентский Store
+ * гидратируется из window.cache без повторных запросов, NOT_READY_STATE
+ * будит зависшие Suspense-чтения.
+ *
+ * Мета страницы резолвится ДО записи <head>, а её tRPC-вызовы дёргают
+ * callback store — писать их сразу нельзя: заголовки ушли бы раньше
+ * res.status(), а скрипты — раньше <!doctype>. Поэтому записи кэша ждут
+ * releaseCacheWrites(), который вызывается после записи shell.
+ */
+export function createStreamingStore(trpcClient: TRPCClient, res: Response) {
+	let htmlReadyResolve!: () => void;
+	const htmlReady = new Promise<void>((resolve) => {
+		htmlReadyResolve = resolve;
+	});
+
+	const store = new Store({
+		trpcClient,
+		callback: (key, value) => {
+			const safeKey = serializeForScript(key);
+			void htmlReady.then(() => {
+				if (value === NOT_READY_STATE) {
+					res.write(
+						`<script>window.cache=window.cache||{};window.cache[${safeKey}]=${serializeForScript(NOT_READY_STATE)};</script>`,
+					);
+				} else {
+					// undefined сериализуем как null: literal undefined в
+					// window.cache читается клиентом как cache miss и
+					// приводит к повторному suspense при гидратации
+					res.write(
+						`<script>window.cache[${safeKey}]=${
+							typeof value === "undefined"
+								? "null"
+								: serializeForScript(value)
+						};window.store?.emit(${safeKey},window.cache[${safeKey}]);</script>`,
+					);
+				}
+			});
+		},
+	});
+
+	return { store, releaseCacheWrites: htmlReadyResolve };
+}

package/src/ssr/getRenderMiddleware.ts

@@ -1,13 +1,8 @@
-import { Manifest, ViteDevServer } from "vite";
+import { ViteDevServer } from "vite";
 import { Request, Response } from "express";
-import path from "node:path";
-import * as fs from "node:fs";
-import { createTRPCClient, httpLink } from "@trpc/client";
-import Store, { jsonSafeFetch, type TRPCClient } from "@quark-fw/store";
-import { UglyModule } from "../Router/gatherPages.js";
-import removeSearchParamsFromUrl from "../utils/removeSearchParamsFromUrl.js";
-import serializeForScript from "../utils/serializeForScript.js";
 import { matchPath } from "react-router-dom";
+import { UglyModule } from "../Router/UglyModule.js";
+import removeSearchParamsFromUrl from "../utils/removeSearchParamsFromUrl.js";
 import { resolveMeta, type PageMeta } from "../seo/createPageMeta.js";
 import {
 	buildLocalePath,
@@ -15,63 +10,21 @@ import {
 	parseLocalePath,
 	type I18nConfig,
 } from "../i18n/config.js";
-
-/** Разбор Cookie-заголовка без внешних зависимостей. */
-const parseCookies = (header?: string): Record<string, string> =>
-	Object.fromEntries(
-		(header ?? "")
-			.split(";")
-			.map((part) => part.trim().split("="))
-			.filter((pair) => pair.length === 2)
-			.map(([k, v]) => [k!, decodeURIComponent(v!)]),
-	);
-import { fileURLToPath, pathToFileURL } from "node:url";
-import { buildPaths } from "../utils/viteConfig.js";
+import { getReactAtoms, parseCookies } from "./helpers.js";
+import { resolveClientAssets } from "./resolveClientAssets.js";
+import { createRendererLoader } from "./createRendererLoader.js";
+import { createPreloadTagWriter } from "./createPreloadTagWriter.js";
+import { createRequestTrpcClient } from "./createRequestTrpcClient.js";
+import { createStreamingStore } from "./createStreamingStore.js";
 
 export type GetRenderMiddlewareArgs = {
 	/** dev: модули грузятся через vite; в prod — из собранного бандла */
 	vite?: ViteDevServer;
 };
 
-const isProd = process.env.NODE_ENV === "production";
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
 export default function getRenderMiddleware({ vite }: GetRenderMiddlewareArgs) {
-	const paths = buildPaths();
-
-	const manifest = (
-		isProd ? JSON.parse(fs.readFileSync(paths.manifest, "utf8")) : {}
-	) as Manifest;
-
-	const findManifestEntry = (fragment: string) =>
-		Object.entries(manifest).find(([key]) => key.includes(fragment))?.[1];
-
-	let bootstrapModules: string[];
-	if (isProd) {
-		const entry = findManifestEntry("entry-client");
-		if (!entry) {
-			throw new Error(
-				"[react] entry-client not found in build manifest — запусти сборку (npm run build)",
-			);
-		}
-		bootstrapModules = [`/${entry.file}`];
-	} else {
-		bootstrapModules = ["/entry-client.tsx"];
-	}
-
-	// в prod SSR-бандл импортируется один раз, в dev — через vite (HMR)
-	let prodRenderer: Promise<typeof import("../frontend/entry-server.js")>;
-	const loadRenderer = () => {
-		if (isProd) {
-			prodRenderer ??= import(
-				pathToFileURL(paths.serverEntry).href
-			) as Promise<typeof import("../frontend/entry-server.js")>;
-			return prodRenderer;
-		}
-		return vite!.ssrLoadModule(
-			path.join(__dirname, "../frontend/entry-server.js"),
-		) as Promise<typeof import("../frontend/entry-server.js")>;
-	};
+	const { manifest, bootstrapModules } = resolveClientAssets();
+	const loadRenderer = createRendererLoader(vite);
 
 	return async function rendererMiddleware(req: Request, res: Response) {
 		try {
@@ -114,99 +67,17 @@ export default function getRenderMiddleware({ vite }: GetRenderMiddlewareArgs) {
 			const page = rendererModule.hasUglyPage(strippedPathname) as
 				UglyModule | undefined;
 
-			const requiredModules: UglyModule[] = [];
+			const registerModule = createPreloadTagWriter(manifest, res);
 
-			const written: Record<string, boolean> = {};
-			const extractTags = (link: string): void => {
-				const _module = manifest[link];
-				if (_module && _module.name !== "entry-client") {
-					res.write(
-						`<link rel="modulepreload" as="script" crossorigin href="/${_module.file}">`,
-					);
-					(_module.css ?? []).forEach((e) => {
-						if (!written[e]) {
-							written[e] = true;
-							res.write(`<link rel="stylesheet" href="/${e}"/>`);
-						}
-					});
-					(_module.imports ?? []).map((_link) => extractTags(_link));
-				}
-			};
-			const registerModule = (_module: UglyModule) => {
-				if (!requiredModules.includes(_module)) {
-					requiredModules.push(_module);
-
-					extractTags(_module.modulePath.substring(1));
-				}
-			};
-
-			// SSR-запросы к tRPC идут в собственный сервер по HTTP (dev-режим).
-			// Атомы плагина объявлены в его аугментации Quark, но здесь берём
-			// их структурно: значения нужны как есть, до готовности плагина.
-			const reactAtoms = (
-				globalThis as {
-					quark?: {
-						react?: {
-							port?: { value?: number };
-							lang?: { value?: string };
-							favicon?: { value?: string };
-						};
-					};
-				}
-			).quark?.react;
-			const port = reactAtoms?.port?.value ?? 3000;
-			// клиент собирается здесь, а роутер объявляет приложение — тот же
-			// шов, что и в сторе
-			const trpcClient = createTRPCClient({
-				links: [
-					httpLink({
-						url: `http://127.0.0.1:${port}/api/trpc`,
-						// пробрасываем cookie запроса, чтобы SSR рендерил
-						// страницу от имени залогиненного пользователя
-						headers: req.headers.cookie
-							? { cookie: req.headers.cookie }
-							: {},
-						fetch: jsonSafeFetch,
-					}),
-				],
-			}) as TRPCClient;
-
-			// Мета страницы резолвится ДО записи <head>, а её tRPC-вызовы
-			// дёргают callback store — писать их сразу нельзя: заголовки
-			// ушли бы раньше res.status(), а скрипты — раньше <!doctype>.
-			// Поэтому все записи кэша ждут, пока shell не будет записан.
-			let htmlReadyResolve!: () => void;
-			const htmlReady = new Promise<void>((resolve) => {
-				htmlReadyResolve = resolve;
-			});
-
-			// по мере резолва данных при рендере стримим их в ответ:
-			// клиентский Store гидратируется из window.cache без повторных
-			// запросов; NOT_READY_STATE будит зависшие Suspense-чтения
-			const store = new Store({
+			const reactAtoms = getReactAtoms();
+			const trpcClient = createRequestTrpcClient(
+				reactAtoms?.port?.value ?? 3000,
+				req.headers.cookie,
+			);
+			const { store, releaseCacheWrites } = createStreamingStore(
 				trpcClient,
-				callback: (key, value) => {
-					const safeKey = serializeForScript(key);
-					void htmlReady.then(() => {
-						if (value === "NOT_READY_STATE") {
-							res.write(
-								`<script>window.cache=window.cache||{};window.cache[${safeKey}]='NOT_READY_STATE';</script>`,
-							);
-						} else {
-							// undefined сериализуем как null: literal undefined в
-							// window.cache читается клиентом как cache miss и
-							// приводит к повторному suspense при гидратации
-							res.write(
-								`<script>window.cache[${safeKey}]=${
-									typeof value === "undefined"
-										? "null"
-										: serializeForScript(value)
-								};window.store?.emit(${safeKey},window.cache[${safeKey}]);</script>`,
-							);
-						}
-					});
-				},
-			});
+				res,
+			);
 
 			// мета страницы: резолвится ПЕРЕД стримом (title/description
 			// должны попасть в <head>), функции меты видят store и params
@@ -248,7 +119,7 @@ export default function getRenderMiddleware({ vite }: GetRenderMiddlewareArgs) {
 			res.write(head);
 			res.write(`<body><div id="root">`);
 			// shell записан — отпускаем отложенные записи кэша
-			htmlReadyResolve();
+			releaseCacheWrites();
 
 			const stream = renderer.pipe({
 				...data,

package/src/ssr/helpers.ts

@@ -0,0 +1,26 @@
+// Хелперы SSR-мидлвары.
+
+export const isProd = process.env.NODE_ENV === "production";
+
+/** Разбор Cookie-заголовка без внешних зависимостей. */
+export const parseCookies = (header?: string): Record<string, string> =>
+	Object.fromEntries(
+		(header ?? "")
+			.split(";")
+			.map((part) => part.trim().split("="))
+			.filter((pair) => pair.length === 2)
+			.map(([k, v]) => [k!, decodeURIComponent(v!)]),
+	);
+
+/**
+ * Атомы react-плагина. Объявлены в его аугментации Quark, но читаются
+ * структурно: значения нужны как есть, до готовности плагина.
+ */
+export type ReactAtoms = {
+	port?: { value?: number };
+	lang?: { value?: string };
+	favicon?: { value?: string };
+};
+
+export const getReactAtoms = (): ReactAtoms | undefined =>
+	(globalThis as { quark?: { react?: ReactAtoms } }).quark?.react;

package/src/ssr/resolveClientAssets.ts

@@ -0,0 +1,31 @@
+import type { Manifest } from "vite";
+import * as fs from "node:fs";
+import { buildPaths } from "../utils/viteConfig.js";
+import { isProd } from "./helpers.js";
+
+/**
+ * Клиентские ассеты рендера: манифест сборки и entry-модули для
+ * bootstrapModules. В dev манифеста нет — vite отдаёт исходник напрямую.
+ */
+export function resolveClientAssets(): {
+	manifest: Manifest;
+	bootstrapModules: string[];
+} {
+	const paths = buildPaths();
+
+	const manifest = (
+		isProd ? JSON.parse(fs.readFileSync(paths.manifest, "utf8")) : {}
+	) as Manifest;
+
+	if (!isProd) return { manifest, bootstrapModules: ["/entry-client.tsx"] };
+
+	const entry = Object.entries(manifest).find(([key]) =>
+		key.includes("entry-client"),
+	)?.[1];
+	if (!entry) {
+		throw new Error(
+			"[react] entry-client not found in build manifest — запусти сборку (npm run build)",
+		);
+	}
+	return { manifest, bootstrapModules: [`/${entry.file}`] };
+}

package/src/utils/createViteConfig.ts

@@ -0,0 +1,81 @@
+import type { InlineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+import svgr from "vite-plugin-svgr";
+import { patchCssModules } from "vite-css-modules";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { loadModulesFromExternalFolderPlugin } from "./plugins.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Пакеты @quark/* в приложении — это симлинки на ИСХОДНИКИ соседних
+ * workspace-пакетов. Если позволить vite их пре-бандлить, он кэширует
+ * результат в node_modules/.vite и продолжает отдавать старую версию даже
+ * после правок в пакете (правка видна только после ручной очистки кэша).
+ * Поэтому исключаем их из оптимизации — тогда HMR работает как для
+ * обычных файлов приложения.
+ */
+const workspacePackages = (cwd: string): string[] => {
+	try {
+		const pkg = JSON.parse(
+			fs.readFileSync(path.join(cwd, "package.json"), "utf8"),
+		) as Record<string, Record<string, string> | undefined>;
+		return Object.keys({
+			...(pkg.dependencies ?? {}),
+			...(pkg.devDependencies ?? {}),
+		}).filter(
+			(name) =>
+				name.startsWith("@quark/") || name.startsWith("@quark-fw/"),
+		);
+	} catch {
+		return [];
+	}
+};
+
+/** Плагин поставлен из npm (лежит внутри node_modules), а не симлинкован из монорепы. */
+const installedFromRegistry = fs
+	.realpathSync(__dirname)
+	.replace(/\\/g, "/")
+	.includes("/node_modules/");
+
+/** Единая конфигурация vite для dev-сервера и для сборки. */
+export function createViteConfig(overrides?: InlineConfig): InlineConfig {
+	return {
+		plugins: [
+			patchCssModules(),
+			svgr({ include: "**/*.svg" }),
+			react(),
+			tsconfigPaths(),
+			loadModulesFromExternalFolderPlugin(),
+		],
+		// Установленный из реестра плагин лежит в node_modules, куда
+		// @vitejs/plugin-react не заглядывает (у него exclude /node_modules/).
+		// Без явного automatic-рантайма его собственный JSX собирается в
+		// React.createElement и падает с "React is not defined".
+		esbuild: { jsx: "automatic", jsxImportSource: "react" },
+		optimizeDeps: {
+			exclude: workspacePackages(process.cwd()),
+			// Плагин исключён из оптимизации, поэтому vite не сканирует его
+			// импорты: установленный из реестра, он тянет react-router и mantine
+			// сырыми, и CJS-пакеты внутри них (cookie) падают на named-импортах.
+			// В монорепо, наоборот, форсировать пре-бандл нельзя — рядом с
+			// симлинкованными исходниками появилась бы вторая копия React.
+			include: installedFromRegistry
+				? [
+						"react",
+						"react-dom",
+						"react-dom/client",
+						"react-router-dom",
+						"@mantine/core",
+						"@mantine/dates",
+						"@mantine/modals",
+						"@mantine/notifications",
+					]
+				: [],
+		},
+		...overrides,
+	};
+}

package/src/utils/vite.ts

@@ -1,5 +1,5 @@
 import { createServer, ViteDevServer } from "vite";
-import { createViteConfig } from "./viteConfig.js";
+import { createViteConfig } from "./createViteConfig.js";
 
 let vite: ViteDevServer | null = null;
 
@@ -20,8 +20,15 @@ export async function getVite({
 					strictPort: true,
 					middlewareMode: true,
 					// у каждого приложения свой HMR-сокет: иначе вторая
-					// запущенная апка ловит "Port 24678 is already in use"
-					hmr: { port: appPort + 20000 },
+					// запущенная апка ловит "Port 24678 is already in use".
+					// Высокие appPort заворачиваются в валидный диапазон,
+					// иначе ERR_SOCKET_BAD_PORT (порт > 65535)
+					hmr: {
+						port:
+							appPort + 20000 <= 65535
+								? appPort + 20000
+								: 1024 + ((appPort + 20000) % 64512),
+					},
 				},
 			}),
 		);