@quark-fw/plugin-react 0.1.7 → 0.1.8

package/package.json

@@ -1,12 +1,13 @@
 {
 	"name": "@quark-fw/plugin-react",
-	"version": "0.1.7",
+	"version": "0.1.8",
 	"main": "src/index.ts",
 	"types": "src/index.ts",
 	"type": "module",
 	"scripts": {
 		"dev": "tsx watch src/index.ts",
-		"build": "echo raw-src package, no build"
+		"build": "echo raw-src package, no build",
+		"test": "vitest run"
 	},
 	"files": [
 		"src"
@@ -21,8 +22,8 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@quark-fw/atom": "0.1.7",
-		"@quark-fw/plugin": "0.1.7",
+		"@quark-fw/atom": "0.1.8",
+		"@quark-fw/plugin": "0.1.8",
 		"@trpc/client": "^11.0.0",
 		"@types/react-dom": "^19.2.3",
 		"express": "^5.2.1",
@@ -31,20 +32,21 @@
 		"vite-tsconfig-paths": "^6.1.1"
 	},
 	"peerDependencies": {
-		"@vitejs/plugin-react": "^5.1.0",
-		"vite": "^7.1.0",
 		"@mantine/core": "^8.3.18",
 		"@mantine/dates": "^8.3.18",
 		"@mantine/modals": "^8.3.18",
 		"@mantine/notifications": "^8.3.18",
-		"@quark-fw/core": "0.1.7",
-		"@quark-fw/store": "0.1.7",
+		"@quark-fw/core": "0.1.8",
+		"@quark-fw/store": "0.1.8",
+		"@vitejs/plugin-react": "^5.1.0",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
-		"react-router-dom": "^7.13.2"
+		"react-router-dom": "^7.13.2",
+		"vite": "^7.1.0"
 	},
 	"devDependencies": {
 		"@types/express": "^5.0.6",
-		"@types/react": "^19.2.14"
+		"@types/react": "^19.2.14",
+		"vitest": "^5.0.0"
 	}
 }

package/src/Router/PageComponentRenderer.tsx

@@ -0,0 +1,21 @@
+import { memo, ReactNode, type ComponentType } from "react";
+
+function PageComponentRenderer({
+	children,
+	Component,
+	...restProps
+}: {
+	children?: ReactNode;
+	Component: ComponentType<Record<string, unknown>>;
+	// остальное — пропсы страницы, их состав задаёт приложение
+	[key: string]: unknown;
+}) {
+	return <Component {...restProps}>{children}</Component>;
+}
+
+export const MemoPageComponentRenderer = memo(
+	PageComponentRenderer,
+	(prevProps, nextProps) =>
+		prevProps.pathname === nextProps.pathname &&
+		JSON.stringify(prevProps.params) === JSON.stringify(nextProps.params),
+);

package/src/Router/Router.tsx

@@ -1,178 +1,5 @@
-import {
-	memo,
-	ReactNode,
-	startTransition,
-	Suspense,
-	useEffect,
-	useMemo,
-	useState,
-	type ComponentType,
-} from "react";
-import { matchPath, useLocation } from "react-router-dom";
-import ErrorPage from "./ErrorPage.js";
-import { getRenderPath } from "./getRenderPath.js";
-import { ErrorHandler } from "../frontend/ErrorHandler.js";
-import { UglyModule, ViteModulesEager } from "./gatherPages.js";
-import { Loader } from "@mantine/core";
-
-export type UglyPageProps = {
-	pathname: string;
-	params: Record<string, string>;
-	breadCrumbs: ReactNode | null;
-};
-
-export type UglyLayoutProps = UglyPageProps & {
-	children: ReactNode;
-};
-
-function PageComponentRenderer({
-	children,
-	Component,
-	...restProps
-}: {
-	children?: ReactNode;
-	Component: ComponentType<Record<string, unknown>>;
-	// остальное — пропсы страницы, их состав задаёт приложение
-	[key: string]: unknown;
-}) {
-	return <Component {...restProps}>{children}</Component>;
-}
-
-const MemoPageComponentRenderer = memo(
-	PageComponentRenderer,
-	(prevProps, nextProps) =>
-		prevProps.pathname === nextProps.pathname &&
-		JSON.stringify(prevProps.params) === JSON.stringify(nextProps.params),
-);
-
-function UglyModuleRenderer({
-	viteModules,
-	renderPath,
-	depth,
-	pathname,
-	children,
-}: {
-	renderPath: UglyModule[];
-	depth: number;
-	pathname: string;
-	viteModules?: ViteModulesEager;
-	children: ReactNode;
-}) {
-	const uglyModule = renderPath[depth]!;
-
-	if (!uglyModule) return children;
-	const PageComponent = uglyModule?.getWrappedPromise()?.default;
-
-	if (!PageComponent) return children;
-
-	const routeProps = matchPath(
-		{
-			path: uglyModule!.urlPath
-				.replace("layoutreset/", "")
-				.replace("layout/", ""),
-			end: false,
-			caseSensitive: false,
-		},
-		pathname,
-	);
-
-	return (
-		<ErrorHandler>
-			<Suspense fallback={<Loader />}>
-				<MemoPageComponentRenderer
-					Component={PageComponent}
-					pathname={pathname}
-					params={routeProps?.params}
-				>
-					<ErrorHandler>
-						<Suspense fallback={<Loader />}>
-							<MemoUglyModuleRenderer
-								pathname={pathname}
-								viteModules={viteModules}
-								renderPath={renderPath}
-								depth={depth + 1}
-							>
-								<ErrorHandler>{children}</ErrorHandler>
-							</MemoUglyModuleRenderer>
-						</Suspense>
-					</ErrorHandler>
-				</MemoPageComponentRenderer>
-			</Suspense>
-		</ErrorHandler>
-	);
-}
-
-const MemoUglyModuleRenderer = memo(
-	UglyModuleRenderer,
-	(prevProps, nextProps) => prevProps.pathname === nextProps.pathname,
-);
-
-function PageNotFound() {
-	const Component = ErrorPage;
-	return <Component code={404} />;
-}
-
-function UglyRouter({
-	viteModules,
-	registerModule,
-}: {
-	viteModules?: ViteModulesEager;
-	registerModule: (module: UglyModule) => void;
-}) {
-	const { pathname } = useLocation();
-
-	const [newRenderPath, newRenderPathKey] = useMemo(() => {
-		const { path, hasPage: _hasPage } = getRenderPath(pathname);
-		path.forEach(registerModule);
-		return [
-			path,
-			`${pathname};${path.map((p) => p.urlPath).join(";")}`,
-			_hasPage,
-		];
-		// registerModule приходит пропсом и пересоздаётся на каждый рендер
-		// родителя: с ним путь пересобирался бы вхолостую на каждый рендер
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [pathname]);
-
-	const [renderPath, setRenderPath] = useState(newRenderPath);
-	const [currentPathname, setCurrentPathname] = useState(pathname);
-
-	useEffect(() => {
-		const loadPathModules = async () => {
-			if (newRenderPath !== renderPath) {
-				await Promise.all(
-					newRenderPath.map(async (uglyModule) => uglyModule.load()),
-				);
-				startTransition(() => {
-					setRenderPath(newRenderPath);
-					setCurrentPathname(pathname);
-					if (pathname !== currentPathname) {
-						window.scrollTo({ top: 0 /*, behavior: 'smooth'*/ });
-					}
-				});
-			}
-		};
-
-		void loadPathModules();
-		// Эффект намеренно завязан на КЛЮЧ пути, а не на сами значения:
-		// newRenderPath — новый массив на каждый рендер, а renderPath и
-		// currentPathname этот же эффект и меняет. С ними он перезапускал бы
-		// сам себя.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [newRenderPathKey]);
-
-	return (
-		<ErrorHandler>
-			<MemoUglyModuleRenderer
-				viteModules={viteModules}
-				renderPath={renderPath}
-				depth={0}
-				pathname={currentPathname}
-			>
-				<PageNotFound />
-			</MemoUglyModuleRenderer>
-		</ErrorHandler>
-	);
-}
-
-export { UglyRouter };
+// Публичная точка входа роутера: реализация разложена по файлам
+// (1 функция = 1 файл), путь @quark-fw/plugin-react/src/Router/Router
+// заморожен — на него завязаны страницы приложений (UglyPageProps).
+export { UglyRouter } from "./UglyRouter.js";
+export type { UglyLayoutProps, UglyPageProps } from "./types.js";

package/src/Router/UglyModule.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from "vitest";
+import { UglyModule } from "./UglyModule.js";
+
+const failingModule = () =>
+	new UglyModule({
+		modulePath: "/Pages/X/Page.tsx",
+		moduleImport: () => Promise.reject(new Error("chunk failed")),
+	});
+
+describe("UglyModule", () => {
+	test("упавший импорт чанка не подвешивает Suspense навсегда", async () => {
+		const uglyModule = failingModule();
+
+		let suspender: unknown;
+		try {
+			uglyModule.getWrappedPromise();
+		} catch (thrown) {
+			suspender = thrown;
+		}
+		expect(suspender).toBeInstanceOf(Promise);
+
+		// саспендер обязан завершиться — иначе React ждёт вечно
+		const settled = await Promise.race([
+			(suspender as Promise<unknown>).then(
+				() => "settled",
+				() => "settled",
+			),
+			new Promise((resolve) => setTimeout(() => resolve("timeout"), 100)),
+		]);
+		expect(settled).toBe("settled");
+
+		// повторное чтение бросает саму ошибку — её покажет ErrorBoundary
+		expect(() => uglyModule.getWrappedPromise()).toThrow("chunk failed");
+	});
+
+	test("load() отклоняется вместо вечного ожидания", async () => {
+		const uglyModule = failingModule();
+
+		const result = await Promise.race([
+			uglyModule.load().then(
+				() => "resolved",
+				() => "rejected",
+			),
+			new Promise((resolve) => setTimeout(() => resolve("timeout"), 100)),
+		]);
+		expect(result).toBe("rejected");
+	});
+});

package/src/Router/UglyModule.ts

@@ -0,0 +1,98 @@
+import { usePromise } from "@quark-fw/store/src/usePromise.js";
+import type { TModulePath, TPageModule } from "./types.js";
+
+/*
+ * usePromise вызывается из класса-загрузчика, а не из компонента: чтение
+ * модуля происходит в теле рендера страницы, поэтому порядок вызовов совпадает
+ * с порядком рендеров. Ответственность за это на роутере, который читает
+ * страницу безусловно.
+ */
+/* eslint-disable react-hooks/rules-of-hooks */
+
+type TUrlPath = string;
+type TFilePath = string;
+
+const getMeta = (modulePath: TModulePath): [TFilePath, TUrlPath] => {
+	const filePath = modulePath.replace(/^\/Pages/, "").replace(/(\.tsx)$/, "");
+	let urlPath = (
+		filePath.endsWith("/Page")
+			? filePath.replace(/Page$/, "")
+			: `${filePath}/`
+	)
+		.replace(/\[\.{3}.+\]/, "*")
+		.replaceAll(/\[(.[^[]+)\]/g, ":$1")
+		.toLowerCase();
+
+	urlPath = urlPath === "/main/" ? "/" : urlPath;
+
+	return [filePath, urlPath];
+};
+
+export class UglyModule {
+	modulePath: string;
+
+	moduleImport: () => Promise<TPageModule>;
+
+	module?: TPageModule;
+
+	loadingPromise?: Promise<TPageModule>;
+
+	wrappedPromise?: () => TPageModule;
+
+	filePath: string;
+
+	urlPath: string;
+
+	constructor({
+		moduleImport,
+		modulePath,
+		module,
+	}: {
+		moduleImport: () => Promise<TPageModule>;
+		modulePath: TModulePath;
+		module?: TPageModule;
+	}) {
+		this.modulePath = modulePath;
+		this.moduleImport = moduleImport;
+		this.module = module;
+		// this.loadingPromise;
+		const [filePath, urlPath] = getMeta(modulePath);
+		this.filePath = filePath;
+		this.urlPath = urlPath;
+	}
+
+	getWrappedPromise(force?: TPageModule) {
+		if (!this.module && !force) {
+			if (!this.wrappedPromise) {
+				if (!this.loadingPromise) {
+					// rejection НЕ глотаем: usePromise донесёт ошибку до
+					// ErrorBoundary — иначе Suspense висел бы вечно
+					this.loadingPromise = this.moduleImport();
+				}
+				this.wrappedPromise = usePromise(this.loadingPromise);
+			}
+
+			return this.wrappedPromise();
+		}
+		this.wrappedPromise = usePromise(
+			new Promise((resolve) => {
+				resolve(this.module! || force);
+			}),
+		);
+		return this.module;
+	}
+
+	async load() {
+		if (!this.module) {
+			if (!this.loadingPromise) {
+				// ошибка импорта пробрасывается вызывающему — он решает,
+				// логировать или показать (раньше промис висел вечно)
+				this.loadingPromise = this.moduleImport();
+			}
+		}
+
+		this.module = await this.loadingPromise;
+
+		return this.module;
+	}
+}

package/src/Router/UglyModuleRenderer.tsx

@@ -0,0 +1,69 @@
+import { memo, ReactNode, Suspense } from "react";
+import { matchPath } from "react-router-dom";
+import { Loader } from "@mantine/core";
+import { ErrorHandler } from "../frontend/ErrorHandler.js";
+import { MemoPageComponentRenderer } from "./PageComponentRenderer.js";
+import { UglyModule } from "./UglyModule.js";
+import type { ViteModulesEager } from "./types.js";
+
+function UglyModuleRenderer({
+	viteModules,
+	renderPath,
+	depth,
+	pathname,
+	children,
+}: {
+	renderPath: UglyModule[];
+	depth: number;
+	pathname: string;
+	viteModules?: ViteModulesEager;
+	children: ReactNode;
+}) {
+	const uglyModule = renderPath[depth]!;
+
+	if (!uglyModule) return children;
+	const PageComponent = uglyModule?.getWrappedPromise()?.default;
+
+	if (!PageComponent) return children;
+
+	const routeProps = matchPath(
+		{
+			path: uglyModule!.urlPath
+				.replace("layoutreset/", "")
+				.replace("layout/", ""),
+			end: false,
+			caseSensitive: false,
+		},
+		pathname,
+	);
+
+	return (
+		<ErrorHandler>
+			<Suspense fallback={<Loader />}>
+				<MemoPageComponentRenderer
+					Component={PageComponent}
+					pathname={pathname}
+					params={routeProps?.params}
+				>
+					<ErrorHandler>
+						<Suspense fallback={<Loader />}>
+							<MemoUglyModuleRenderer
+								pathname={pathname}
+								viteModules={viteModules}
+								renderPath={renderPath}
+								depth={depth + 1}
+							>
+								<ErrorHandler>{children}</ErrorHandler>
+							</MemoUglyModuleRenderer>
+						</Suspense>
+					</ErrorHandler>
+				</MemoPageComponentRenderer>
+			</Suspense>
+		</ErrorHandler>
+	);
+}
+
+export const MemoUglyModuleRenderer = memo(
+	UglyModuleRenderer,
+	(prevProps, nextProps) => prevProps.pathname === nextProps.pathname,
+);

package/src/Router/UglyRouter.tsx

@@ -0,0 +1,77 @@
+import { startTransition, useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
+import ErrorPage from "./ErrorPage.js";
+import { getRenderPath } from "./getRenderPath.js";
+import { ErrorHandler } from "../frontend/ErrorHandler.js";
+import { MemoUglyModuleRenderer } from "./UglyModuleRenderer.js";
+import { UglyModule } from "./UglyModule.js";
+import type { ViteModulesEager } from "./types.js";
+
+function PageNotFound() {
+	const Component = ErrorPage;
+	return <Component code={404} />;
+}
+
+export function UglyRouter({
+	viteModules,
+	registerModule,
+}: {
+	viteModules?: ViteModulesEager;
+	registerModule: (module: UglyModule) => void;
+}) {
+	const { pathname } = useLocation();
+
+	const [newRenderPath, newRenderPathKey] = useMemo(() => {
+		const { path, hasPage: _hasPage } = getRenderPath(pathname);
+		path.forEach(registerModule);
+		return [
+			path,
+			`${pathname};${path.map((p) => p.urlPath).join(";")}`,
+			_hasPage,
+		];
+		// registerModule приходит пропсом и пересоздаётся на каждый рендер
+		// родителя: с ним путь пересобирался бы вхолостую на каждый рендер
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [pathname]);
+
+	const [renderPath, setRenderPath] = useState(newRenderPath);
+	const [currentPathname, setCurrentPathname] = useState(pathname);
+
+	useEffect(() => {
+		const loadPathModules = async () => {
+			if (newRenderPath !== renderPath) {
+				await Promise.all(
+					newRenderPath.map(async (uglyModule) => uglyModule.load()),
+				);
+				startTransition(() => {
+					setRenderPath(newRenderPath);
+					setCurrentPathname(pathname);
+					if (pathname !== currentPathname) {
+						window.scrollTo({ top: 0 /*, behavior: 'smooth'*/ });
+					}
+				});
+			}
+		};
+
+		// упавший чанк: остаёмся на текущей странице, ошибку — в консоль
+		loadPathModules().catch(console.error);
+		// Эффект намеренно завязан на КЛЮЧ пути, а не на сами значения:
+		// newRenderPath — новый массив на каждый рендер, а renderPath и
+		// currentPathname этот же эффект и меняет. С ними он перезапускал бы
+		// сам себя.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [newRenderPathKey]);
+
+	return (
+		<ErrorHandler>
+			<MemoUglyModuleRenderer
+				viteModules={viteModules}
+				renderPath={renderPath}
+				depth={0}
+				pathname={currentPathname}
+			>
+				<PageNotFound />
+			</MemoUglyModuleRenderer>
+		</ErrorHandler>
+	);
+}

package/src/Router/createUglyModules.ts

@@ -0,0 +1,32 @@
+import { UglyModule } from "./UglyModule.js";
+import type {
+	TModulePath,
+	TPageModule,
+	ViteModules,
+	ViteModulesEager,
+} from "./types.js";
+
+export const createUglyModules = (modules: ViteModules | ViteModulesEager) =>
+	Object.keys(modules).reduce(
+		(acc, modulePath) => {
+			const moduleImport = modules[modulePath];
+			if (typeof moduleImport === "object") {
+				acc[modulePath] = new UglyModule({
+					modulePath,
+					module: moduleImport,
+					moduleImport: () =>
+						new Promise<TPageModule>((resolve) =>
+							resolve(moduleImport),
+						),
+				});
+			} else {
+				acc[modulePath] = new UglyModule({
+					modulePath,
+					moduleImport: moduleImport!,
+				});
+			}
+
+			return acc;
+		},
+		{} as Record<TModulePath, UglyModule>,
+	);