@quark-fw/plugin-react 0.1.6 → 0.1.8

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/getRenderMiddleware.ts

@@ -3,7 +3,11 @@ 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 Store, {
+	jsonSafeFetch,
+	NOT_READY_STATE,
+	type TRPCClient,
+} from "@quark-fw/store";
 import { UglyModule } from "../Router/gatherPages.js";
 import removeSearchParamsFromUrl from "../utils/removeSearchParamsFromUrl.js";
 import serializeForScript from "../utils/serializeForScript.js";
@@ -188,9 +192,9 @@ export default function getRenderMiddleware({ vite }: GetRenderMiddlewareArgs) {
 				callback: (key, value) => {
 					const safeKey = serializeForScript(key);
 					void htmlReady.then(() => {
-						if (value === "NOT_READY_STATE") {
+						if (value === NOT_READY_STATE) {
 							res.write(
-								`<script>window.cache=window.cache||{};window.cache[${safeKey}]='NOT_READY_STATE';</script>`,
+								`<script>window.cache=window.cache||{};window.cache[${safeKey}]=${serializeForScript(NOT_READY_STATE)};</script>`,
 							);
 						} else {
 							// undefined сериализуем как null: literal undefined в

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;
 

package/src/utils/viteConfig.ts

@@ -1,12 +1,7 @@
-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";
+// Пути фронтенда и сборки (хелперы). Сама конфигурация vite —
+// в createViteConfig.ts.
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { loadModulesFromExternalFolderPlugin } from "./plugins.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -28,72 +23,3 @@ export const buildPaths = (cwd = process.cwd()) => ({
 	manifest: path.join(cwd, "build/client/.vite/manifest.json"),
 	serverEntry: path.join(cwd, "build/server/entry-server.js"),
 });
-
-/**
- * Пакеты @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/usePromise.ts

@@ -1,24 +0,0 @@
-export function usePromise<T>(promise: Promise<T>): () => T {
-	let status = "pending";
-	let response: T;
-	const suspender = promise.then(
-		(res) => {
-			status = "success";
-			response = res;
-		},
-		(err) => {
-			status = "error";
-			response = err as never;
-		},
-	);
-	return () => {
-		switch (status) {
-			case "pending":
-				throw suspender;
-			case "error":
-				throw response;
-			default:
-				return response;
-		}
-	};
-}