@quark-fw/plugin-react 0.1.2

package/src/utils/plugins.ts

@@ -0,0 +1,73 @@
+import path from "node:path";
+import fs from "fs";
+import { fileURLToPath } from "url";
+import { Plugin } from "vite";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const uglyPath = path.join(__dirname, "../frontend");
+
+export function loadModulesFromExternalFolderPlugin(params?: {
+	externalPaths?: string[];
+}): Plugin {
+	const externalFolderPaths = params?.externalPaths || [uglyPath];
+
+	return {
+		name: "load-modules-from-external-folder",
+		enforce: "post",
+
+		resolveFileUrl({ fileName, relativePath }) {
+			for (const externalFolderPath of externalFolderPaths) {
+				const p = path.join(externalFolderPath, relativePath, fileName);
+				if (fs.existsSync(p) && fs.statSync(p).isFile()) {
+					return p;
+				}
+			}
+		},
+
+		resolveId(fileName) {
+			for (const externalFolderPath of externalFolderPaths) {
+				const requested = path.join(externalFolderPath, fileName);
+
+				// prefer .js over .jsx
+				const jsFile = requested.replace(".jsx", ".js");
+
+				if (fs.existsSync(jsFile) && fs.statSync(jsFile).isFile()) {
+					return jsFile;
+				}
+			}
+		},
+
+		load(id) {
+			// Vite may pass a directory path: avoid reading it
+			if (!fs.existsSync(id)) return;
+
+			const stat = fs.statSync(id);
+			if (stat.isDirectory()) {
+				return null; // ignore directories
+			}
+
+			try {
+				return fs.readFileSync(id, "utf8");
+			} catch (e) {
+				console.warn(`Error loading ${id}:`, e);
+			}
+		},
+
+		configureServer(server) {
+			server.middlewares.use((req, res, next) => {
+				if (!req.url) return next();
+
+				for (const externalFolderPath of externalFolderPaths) {
+					const file = path.join(externalFolderPath, req.url);
+
+					if (fs.existsSync(file) && fs.statSync(file).isFile()) {
+						req.url = file;
+						break;
+					}
+				}
+
+				next();
+			});
+		},
+	};
+}

package/src/utils/removeSearchParamsFromUrl.ts

@@ -0,0 +1,18 @@
+export default function removeSearchParamsFromUrl(
+	url: string,
+	base: string = "http://localhost",
+): string {
+	try {
+		const parsedUrl = new URL(url, base);
+		parsedUrl.search = "";
+
+		// If the original URL was relative, return only the pathname and hash
+		if (!/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(url)) {
+			return parsedUrl.pathname + parsedUrl.hash;
+		}
+
+		return parsedUrl.toString();
+	} catch (error) {
+		throw new Error("Invalid URL", { cause: error });
+	}
+}

package/src/utils/serializeForScript.ts

@@ -0,0 +1,26 @@
+// Безопасная сериализация значения для вставки внутрь inline <script>.
+// JSON.stringify сам по себе небезопасен: не экранирует </script>, открытие
+// HTML-комментария и JS-разделители строк U+2028/U+2029 — строка со
+// </script> внутри вырвалась бы из контекста скрипта (XSS). Экранирование в
+// \uXXXX прозрачно для JSON.parse и движка JS.
+const LINE_SEPARATOR = String.fromCharCode(0x2028);
+const PARAGRAPH_SEPARATOR = String.fromCharCode(0x2029);
+
+const ESCAPE_LOOKUP: Record<string, string> = {
+	"<": "\\u003c",
+	">": "\\u003e",
+	"&": "\\u0026",
+	[LINE_SEPARATOR]: "\\u2028",
+	[PARAGRAPH_SEPARATOR]: "\\u2029",
+};
+
+const ESCAPE_REGEX = new RegExp(
+	`[<>&${LINE_SEPARATOR}${PARAGRAPH_SEPARATOR}]`,
+	"g",
+);
+
+export default function serializeForScript(value: unknown): string {
+	const json = JSON.stringify(value);
+	if (json === undefined) return "undefined";
+	return json.replace(ESCAPE_REGEX, (char) => ESCAPE_LOOKUP[char]!);
+}

package/src/utils/usePromise.ts

@@ -0,0 +1,24 @@
+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;
+		}
+	};
+}

package/src/utils/vite.ts

@@ -0,0 +1,31 @@
+import { createServer, ViteDevServer } from "vite";
+import { createViteConfig } from "./viteConfig.js";
+
+let vite: ViteDevServer | null = null;
+
+export async function getVite({
+	root,
+	/** порт HTTP-сервера приложения; от него считается порт HMR-сокета */
+	appPort,
+}: {
+	root: string;
+	appPort: number;
+}): Promise<ViteDevServer> {
+	if (!vite) {
+		vite = await createServer(
+			createViteConfig({
+				appType: "custom",
+				root,
+				server: {
+					strictPort: true,
+					middlewareMode: true,
+					// у каждого приложения свой HMR-сокет: иначе вторая
+					// запущенная апка ловит "Port 24678 is already in use"
+					hmr: { port: appPort + 20000 },
+				},
+			}),
+		);
+	}
+
+	return vite;
+}

package/src/utils/viteConfig.ts

@@ -0,0 +1,71 @@
+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));
+
+/** Каталог фронтенд-исходников самого плагина (entry-client / entry-server). */
+export const frontendDir = path.join(__dirname, "../frontend");
+
+export const clientEntry = path.join(frontendDir, "entry-client.tsx");
+export const serverEntry = path.join(frontendDir, "entry-server.tsx");
+
+/** Корень фронтенда приложения (src/frontend). */
+export const appFrontendRoot = (cwd = process.cwd()) =>
+	path.join(cwd, "src/frontend");
+
+/** Каталоги сборки приложения. */
+export const buildPaths = (cwd = process.cwd()) => ({
+	root: path.join(cwd, "build"),
+	client: path.join(cwd, "build/client"),
+	server: path.join(cwd, "build/server"),
+	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 [];
+	}
+};
+
+/** Единая конфигурация vite для dev-сервера и для сборки. */
+export function createViteConfig(overrides?: InlineConfig): InlineConfig {
+	return {
+		plugins: [
+			patchCssModules(),
+			svgr({ include: "**/*.svg" }),
+			react(),
+			tsconfigPaths(),
+			loadModulesFromExternalFolderPlugin(),
+		],
+		optimizeDeps: {
+			exclude: workspacePackages(process.cwd()),
+		},
+		...overrides,
+	};
+}