@quark-fw/plugin-react 0.1.6 → 0.1.8

package/src/Router/gatherPages.ts

@@ -1,34 +1,12 @@
 /// <reference types="vite/client" />
-import React from "react";
-import { usePromise } from "../utils/usePromise.js";
+// Синглтоны загруженных страниц/лейаутов приложения (glob по /Pages).
+import { createUglyModules } from "./createUglyModules.js";
+import type { TPageModule, ViteModules } from "./types.js";
 
-/*
- * usePromise вызывается из класса-загрузчика, а не из компонента: чтение
- * модуля происходит в теле рендера страницы, поэтому порядок вызовов совпадает
- * с порядком рендеров. Ответственность за это на роутере, который читает
- * страницу безусловно.
- */
-/* eslint-disable react-hooks/rules-of-hooks */
-
-/**
- * Модуль страницы. Пропсы страниц описывает роутер (UglyPageProps), но
- * загрузчик их не разбирает — ему важно лишь, что это компонент.
- */
-export type TPageModule = {
-	default: React.ComponentType<Record<string, unknown>>;
-};
-
-type TUrlPath = string;
-type TModulePath = string;
-type TFilePath = string;
-
-export type ViteModules = {
-	[key: TModulePath]: () => Promise<TPageModule>;
-};
-
-export type ViteModulesEager = {
-	[key: TModulePath]: TPageModule;
-};
+// реэкспорт для прежних импортёров этого модуля
+export { UglyModule } from "./UglyModule.js";
+export { createUglyModules } from "./createUglyModules.js";
+export type { TPageModule, ViteModules, ViteModulesEager } from "./types.js";
 
 const pages: ViteModules = import.meta.glob<TPageModule>("/Pages/**/Page.*");
 const layouts: ViteModules = import.meta.glob<TPageModule>(
@@ -38,126 +16,6 @@ const resetLayouts: ViteModules = import.meta.glob<TPageModule>(
 	"/Pages/**/LayoutReset.*",
 );
 
-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) {
-					this.loadingPromise = new Promise((resolve) => {
-						try {
-							this.moduleImport().then((module) =>
-								resolve(module),
-							);
-						} catch (e) {
-							console.error(e);
-						}
-					});
-				}
-				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 = new Promise((resolve) => {
-					try {
-						this.moduleImport().then((module) => resolve(module));
-					} catch (e) {
-						console.error(e);
-					}
-				});
-			}
-		}
-
-		this.module = await this.loadingPromise;
-
-		return this.module;
-	}
-}
-
-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>,
-	);
-
 const uglyPages = createUglyModules(pages);
 const uglyLayouts = createUglyModules(layouts);
 const uglyResetLayouts = createUglyModules(resetLayouts);

package/src/Router/types.ts

@@ -0,0 +1,30 @@
+// Типы, общие для файлов роутера (страницы, загрузчик модулей, пропсы).
+import type { ComponentType, ReactNode } from "react";
+
+/**
+ * Модуль страницы. Пропсы страниц описывает роутер (UglyPageProps), но
+ * загрузчик их не разбирает — ему важно лишь, что это компонент.
+ */
+export type TPageModule = {
+	default: ComponentType<Record<string, unknown>>;
+};
+
+export type TModulePath = string;
+
+export type ViteModules = {
+	[key: TModulePath]: () => Promise<TPageModule>;
+};
+
+export type ViteModulesEager = {
+	[key: TModulePath]: TPageModule;
+};
+
+export type UglyPageProps = {
+	pathname: string;
+	params: Record<string, string>;
+	breadCrumbs: ReactNode | null;
+};
+
+export type UglyLayoutProps = UglyPageProps & {
+	children: ReactNode;
+};

package/src/build.ts

@@ -5,9 +5,9 @@ import {
 	appFrontendRoot,
 	buildPaths,
 	clientEntry,
-	createViteConfig,
 	serverEntry,
 } from "./utils/viteConfig.js";
+import { createViteConfig } from "./utils/createViteConfig.js";
 
 /**
  * Прод-сборка приложения: клиентский бандл (с manifest) и SSR-бандл.

package/src/frontend/App.tsx

@@ -10,9 +10,10 @@ import { ModalsProvider } from "@mantine/modals";
 import { Notifications } from "@mantine/notifications";
 import { MantineProvider } from "@mantine/core";
 
-import { UglyModule, ViteModulesEager } from "../Router/gatherPages.js";
+import { UglyModule } from "../Router/UglyModule.js";
+import type { ViteModulesEager } from "../Router/types.js";
 import { ErrorHandler } from "./ErrorHandler.js";
-import { UglyRouter } from "../Router/Router.js";
+import { UglyRouter } from "../Router/UglyRouter.js";
 import Store, {
 	StoreContext,
 	TRPCContext,
@@ -20,8 +21,9 @@ import Store, {
 } from "@quark-fw/store";
 // регистрирует показ ошибок через notifications (side-effect импорт)
 import "./displayError.js";
-import { SeoProvider, type SeoMap } from "../seo/SeoContext.js";
-import { I18nProvider, type EagerLocaleModules } from "../i18n/I18nContext.js";
+import { SeoProvider } from "../seo/SeoProvider.js";
+import type { SeoMap } from "../seo/SeoContext.js";
+import { I18nProvider, type EagerLocaleModules } from "../i18n/I18nProvider.js";
 import type { I18nConfig } from "../i18n/config.js";
 // @ts-expect-error virtual file
 import { appTheme } from "/theme.ts";

package/src/frontend/entry-client.tsx

@@ -4,13 +4,14 @@ import { startTransition } from "react";
 import Store, { trpcClient } from "@quark-fw/store";
 import { getRenderPath } from "../Router/getRenderPath.js";
 import { parseLocalePath, type I18nConfig } from "../i18n/config.js";
+import type { SeoMap } from "../seo/SeoContext.js";
 import App from "./App.js";
 
 /** то, что SSR кладёт в window для гидратации */
 type HydrationWindow = typeof window & {
 	cache?: Record<string, unknown>;
 	store?: Store;
-	seo?: Record<string, unknown>;
+	seo?: SeoMap;
 };
 
 const hydrationWindow = window as HydrationWindow;
@@ -31,7 +32,8 @@ if (rootEl) {
 	);
 	const { path } = getRenderPath(strippedPathname);
 
-	void Promise.all(path.map((e) => e.load()));
+	// прогрев чанков; ошибка не фатальна — рендер сам продолжит загрузку
+	void Promise.all(path.map((e) => e.load())).catch(console.error);
 
 	const parsedProps = Object.keys(rootEl.dataset).reduce(
 		(acc, key) => {

package/src/frontend/entry-server.tsx

@@ -16,7 +16,7 @@ import HTML from "./HTML/index.js";
 import App from "./App.js";
 import type { ResolvedSeo } from "../seo/createPageMeta.js";
 import type { I18nConfig } from "../i18n/config.js";
-import type { EagerLocaleModules } from "../i18n/I18nContext.js";
+import type { EagerLocaleModules } from "../i18n/I18nProvider.js";
 
 // i18n опционален: если у приложения нет /i18n.ts — glob вернёт пустой объект
 const i18nModules: Record<string, { i18nConfig?: I18nConfig }> =

package/src/i18n/I18nContext.tsx

@@ -1,13 +1,4 @@
-/// <reference types="vite/client" />
-import { createContext, ReactNode, useContext, useMemo } from "react";
-import { useStore } from "@quark-fw/store";
-import { usePromise } from "@quark-fw/store/src/usePromise.js";
-import {
-	buildLocalePath,
-	usesLocalePrefix,
-	type I18nConfig,
-} from "./config.js";
-import { getLocaleImporter, type LocaleModule } from "./gatherLocales.js";
+import { createContext, useContext } from "react";
 
 export type Translate = (
 	key: string,
@@ -33,185 +24,4 @@ const I18nContext = createContext<I18nContextValue>({
 
 export const useI18n = () => useContext(I18nContext);
 
-export type EagerLocaleModules = Record<string, LocaleModule>;
-
-const deepMerge = (base: unknown, override: unknown): unknown => {
-	if (
-		typeof base !== "object" ||
-		base === null ||
-		typeof override !== "object" ||
-		override === null
-	) {
-		return typeof override === "undefined" ? base : override;
-	}
-	const source = base as Record<string, unknown>;
-	const patch = override as Record<string, unknown>;
-	const out: Record<string, unknown> = { ...source };
-	for (const key of Object.keys(patch)) {
-		out[key] = deepMerge(source[key], patch[key]);
-	}
-	return out;
-};
-
-const interpolate = (
-	template: string,
-	params?: Record<string, string | number>,
-) =>
-	params
-		? template.replace(/\{(\w+)\}/g, (match, name) =>
-				name in params ? String(params[name]) : match,
-			)
-		: template;
-
-export function I18nProvider({
-	locale,
-	config,
-	eagerLocaleModules,
-	children,
-}: {
-	locale: string;
-	config: I18nConfig;
-	/** передаётся только на сервере (eager-glob из entry-server) */
-	eagerLocaleModules?: EagerLocaleModules;
-	children: ReactNode;
-}) {
-	const store = useStore();
-
-	const value: I18nContextValue = useMemo(() => {
-		const defaultLocale = config?.defaultLocale || locale;
-		let pluralRules: Intl.PluralRules;
-		try {
-			pluralRules = new Intl.PluralRules(locale || undefined);
-		} catch {
-			pluralRules = new Intl.PluralRules();
-		}
-
-		/*
-		 * usePromise ниже — хук, вызванный не из компонента: словарь читается в
-		 * теле рендера потребителя ($), поэтому порядок вызовов совпадает с
-		 * порядком чтений. Кэш стора при этом заполняется намеренно — это его
-		 * назначение, а не мутация чужого состояния.
-		 */
-		/* eslint-disable react-hooks/rules-of-hooks, react-hooks/immutability */
-		const loadNamespace = (ns: string, cacheKey: string): unknown => {
-			if (eagerLocaleModules) {
-				// SSR: синхронно склеиваем словари и стримим их клиенту
-				const def =
-					eagerLocaleModules[`/locales/${defaultLocale}/${ns}.ts`]
-						?.default;
-				const cur =
-					locale === defaultLocale
-						? undefined
-						: eagerLocaleModules[`/locales/${locale}/${ns}.ts`]
-								?.default;
-				const data = deepMerge(def ?? {}, cur ?? {});
-				store.values[cacheKey] = data;
-				store.callback?.(cacheKey, data);
-				return data;
-			}
-
-			// клиент: подвешиваемся на ленивые чанки vite
-			const { reactPromises } = store;
-			if (!reactPromises[cacheKey]) {
-				const importDefault = getLocaleImporter(defaultLocale, ns);
-				const importCurrent =
-					locale === defaultLocale
-						? undefined
-						: getLocaleImporter(locale, ns);
-				if (!importDefault && !importCurrent) {
-					store.values[cacheKey] = {};
-					return store.values[cacheKey];
-				}
-				reactPromises[cacheKey] = usePromise(
-					Promise.all([importDefault?.(), importCurrent?.()]).then(
-						([def, cur]) => {
-							const merged = deepMerge(
-								def?.default ?? {},
-								cur?.default ?? {},
-							);
-							store.values[cacheKey] = merged;
-							return merged;
-						},
-					),
-				);
-			}
-			return reactPromises[cacheKey]();
-		};
-
-		const $: Translate = (key, params) => {
-			const dot = key.indexOf(".");
-			const ns = dot === -1 ? key : key.slice(0, dot);
-			const rest = dot === -1 ? "" : key.slice(dot + 1);
-			const cacheKey = `i18n:${locale}:${ns}`;
-
-			let data = store.values[cacheKey];
-			if (typeof data === "undefined") data = loadNamespace(ns, cacheKey);
-
-			// по словарю идём как по дереву неизвестной формы
-			const asDict = (value: unknown) =>
-				value && typeof value === "object"
-					? (value as Record<string, unknown>)
-					: undefined;
-
-			let node: unknown = data;
-			for (const part of rest ? rest.split(".") : []) {
-				node = asDict(node)?.[part];
-			}
-
-			if (typeof node === "string") return interpolate(node, params);
-
-			// плюрализация: { one: "…", few: "…", other: "…" } + params.count
-			const forms = asDict(node);
-			if (forms && typeof forms.other === "string") {
-				const count = Number(params?.count);
-				const category = Number.isFinite(count)
-					? pluralRules.select(count)
-					: "other";
-				const form = forms[category];
-				return interpolate(
-					typeof form === "string" ? form : forms.other,
-					params,
-				);
-			}
-
-			return key;
-		};
-
-		const setLocale = (next: string) => {
-			if (
-				!config?.locales.includes(next) ||
-				typeof window === "undefined"
-			)
-				return;
-			document.cookie = `locale=${next};path=/;max-age=31536000`;
-			if (!usesLocalePrefix(config)) {
-				window.location.reload();
-				return;
-			}
-			const { pathname, search, hash } = window.location;
-			const stripped = pathname.startsWith(`/${locale}`)
-				? pathname.slice(locale.length + 1) || "/"
-				: pathname;
-			window.location.href =
-				buildLocalePath(next, stripped) + search + hash;
-		};
-
-		return {
-			locale,
-			locales: config?.locales ?? [],
-			defaultLocale,
-			$,
-			setLocale,
-		};
-		// config и eagerLocaleModules приходят из модулей приложения (/i18n.ts
-		// и glob по /locales) и за время жизни страницы не меняются —
-		// пересобирать контекст на их идентичность незачем
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [locale, store]);
-
-	return (
-		<I18nContext.Provider value={value}>{children}</I18nContext.Provider>
-	);
-}
-
 export default I18nContext;

package/src/i18n/I18nProvider.tsx

@@ -0,0 +1,168 @@
+/// <reference types="vite/client" />
+import { ReactNode, useMemo } from "react";
+import { useStore } from "@quark-fw/store";
+import { usePromise } from "@quark-fw/store/src/usePromise.js";
+import {
+	buildLocalePath,
+	usesLocalePrefix,
+	type I18nConfig,
+} from "./config.js";
+import { getLocaleImporter, type LocaleModule } from "./gatherLocales.js";
+import { deepMerge, interpolate } from "./helpers.js";
+import I18nContext, {
+	type I18nContextValue,
+	type Translate,
+} from "./I18nContext.js";
+
+export type EagerLocaleModules = Record<string, LocaleModule>;
+
+export function I18nProvider({
+	locale,
+	config,
+	eagerLocaleModules,
+	children,
+}: {
+	locale: string;
+	config: I18nConfig;
+	/** передаётся только на сервере (eager-glob из entry-server) */
+	eagerLocaleModules?: EagerLocaleModules;
+	children: ReactNode;
+}) {
+	const store = useStore();
+
+	const value: I18nContextValue = useMemo(() => {
+		const defaultLocale = config?.defaultLocale || locale;
+		let pluralRules: Intl.PluralRules;
+		try {
+			pluralRules = new Intl.PluralRules(locale || undefined);
+		} catch {
+			pluralRules = new Intl.PluralRules();
+		}
+
+		/*
+		 * usePromise ниже — хук, вызванный не из компонента: словарь читается в
+		 * теле рендера потребителя ($), поэтому порядок вызовов совпадает с
+		 * порядком чтений. Кэш стора при этом заполняется намеренно — это его
+		 * назначение, а не мутация чужого состояния.
+		 */
+		/* eslint-disable react-hooks/rules-of-hooks, react-hooks/immutability */
+		const loadNamespace = (ns: string, cacheKey: string): unknown => {
+			if (eagerLocaleModules) {
+				// SSR: синхронно склеиваем словари и стримим их клиенту
+				const def =
+					eagerLocaleModules[`/locales/${defaultLocale}/${ns}.ts`]
+						?.default;
+				const cur =
+					locale === defaultLocale
+						? undefined
+						: eagerLocaleModules[`/locales/${locale}/${ns}.ts`]
+								?.default;
+				const data = deepMerge(def ?? {}, cur ?? {});
+				store.values[cacheKey] = data;
+				store.callback?.(cacheKey, data);
+				return data;
+			}
+
+			// клиент: подвешиваемся на ленивые чанки vite
+			const { reactPromises } = store;
+			if (!reactPromises[cacheKey]) {
+				const importDefault = getLocaleImporter(defaultLocale, ns);
+				const importCurrent =
+					locale === defaultLocale
+						? undefined
+						: getLocaleImporter(locale, ns);
+				if (!importDefault && !importCurrent) {
+					store.values[cacheKey] = {};
+					return store.values[cacheKey];
+				}
+				reactPromises[cacheKey] = usePromise(
+					Promise.all([importDefault?.(), importCurrent?.()]).then(
+						([def, cur]) => {
+							const merged = deepMerge(
+								def?.default ?? {},
+								cur?.default ?? {},
+							);
+							store.values[cacheKey] = merged;
+							return merged;
+						},
+					),
+				);
+			}
+			return reactPromises[cacheKey]();
+		};
+
+		const $: Translate = (key, params) => {
+			const dot = key.indexOf(".");
+			const ns = dot === -1 ? key : key.slice(0, dot);
+			const rest = dot === -1 ? "" : key.slice(dot + 1);
+			const cacheKey = `i18n:${locale}:${ns}`;
+
+			let data = store.values[cacheKey];
+			if (typeof data === "undefined") data = loadNamespace(ns, cacheKey);
+
+			// по словарю идём как по дереву неизвестной формы
+			const asDict = (value: unknown) =>
+				value && typeof value === "object"
+					? (value as Record<string, unknown>)
+					: undefined;
+
+			let node: unknown = data;
+			for (const part of rest ? rest.split(".") : []) {
+				node = asDict(node)?.[part];
+			}
+
+			if (typeof node === "string") return interpolate(node, params);
+
+			// плюрализация: { one: "…", few: "…", other: "…" } + params.count
+			const forms = asDict(node);
+			if (forms && typeof forms.other === "string") {
+				const count = Number(params?.count);
+				const category = Number.isFinite(count)
+					? pluralRules.select(count)
+					: "other";
+				const form = forms[category];
+				return interpolate(
+					typeof form === "string" ? form : forms.other,
+					params,
+				);
+			}
+
+			return key;
+		};
+
+		const setLocale = (next: string) => {
+			if (
+				!config?.locales.includes(next) ||
+				typeof window === "undefined"
+			)
+				return;
+			document.cookie = `locale=${next};path=/;max-age=31536000`;
+			if (!usesLocalePrefix(config)) {
+				window.location.reload();
+				return;
+			}
+			const { pathname, search, hash } = window.location;
+			const stripped = pathname.startsWith(`/${locale}`)
+				? pathname.slice(locale.length + 1) || "/"
+				: pathname;
+			window.location.href =
+				buildLocalePath(next, stripped) + search + hash;
+		};
+
+		return {
+			locale,
+			locales: config?.locales ?? [],
+			defaultLocale,
+			$,
+			setLocale,
+		};
+		// config и eagerLocaleModules приходят из модулей приложения (/i18n.ts
+		// и glob по /locales) и за время жизни страницы не меняются —
+		// пересобирать контекст на их идентичность незачем
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [locale, store]);
+
+	return (
+		<I18nContext.Provider value={value}>{children}</I18nContext.Provider>
+	);
+}

package/src/i18n/helpers.ts

@@ -0,0 +1,29 @@
+// Хелперы i18n: слияние словарей и подстановка параметров.
+
+export const deepMerge = (base: unknown, override: unknown): unknown => {
+	if (
+		typeof base !== "object" ||
+		base === null ||
+		typeof override !== "object" ||
+		override === null
+	) {
+		return typeof override === "undefined" ? base : override;
+	}
+	const source = base as Record<string, unknown>;
+	const patch = override as Record<string, unknown>;
+	const out: Record<string, unknown> = { ...source };
+	for (const key of Object.keys(patch)) {
+		out[key] = deepMerge(source[key], patch[key]);
+	}
+	return out;
+};
+
+export const interpolate = (
+	template: string,
+	params?: Record<string, string | number>,
+) =>
+	params
+		? template.replace(/\{(\w+)\}/g, (match, name) =>
+				name in params ? String(params[name]) : match,
+			)
+		: template;