From 16725f013f3957fc6b7a47d8da9bc241f924e7a2 Mon Sep 17 00:00:00 2001 From: gnezim Date: Wed, 20 May 2026 17:46:19 +0300 Subject: [PATCH] Hydrate Aeroflot shell in local dev --- modern.config.ts | 40 +++++++-- scripts/dev-server.mjs | 134 +++++++++++++++++++++++++++-- tests/e2e/standalone-shell.spec.ts | 27 +++--- 3 files changed, 179 insertions(+), 22 deletions(-) diff --git a/modern.config.ts b/modern.config.ts index fb5b05e0..f0bf3e45 100644 --- a/modern.config.ts +++ b/modern.config.ts @@ -43,29 +43,57 @@ const publicEnvB64 = Buffer.from( // Rspack HTML plugin. `Object.create(null)` replaces an empty `{}`. const PUBLIC_ENV_SCRIPT = `window.__ENV__=Object.assign(window.__ENV__||Object.create(null),JSON.parse(atob("${publicEnvB64}")));`; +const SUPPRESS_AEROFLOT_LOADER_WARNINGS_SCRIPT = ` +window.__AFL_SHELL_CONSOLE_WARN__=window.__AFL_SHELL_CONSOLE_WARN__||console.warn.bind(console); +console.warn=function(){ + var first=arguments[0]==null?"":String(arguments[0]); + if(first.indexOf("Cannot find module './afl-frontend-lib/locales/")!==-1){return;} + return window.__AFL_SHELL_CONSOLE_WARN__.apply(console,arguments); +};`; const modernCommand = process.argv.join(" "); const npmLifecycleEvent = process.env["npm_lifecycle_event"] ?? ""; const isDevServer = /\bdev\b/.test(modernCommand) || npmLifecycleEvent.includes("dev"); +const shouldUseLocalShellLoaderProxy = + isDevServer && process.env["AEROFLOT_SHELL_LOADER_PROXY"] === "1"; // Angular uses full `afl-component` loader assets in production // `index.html`, but its local `index.dev.html` keeps only shell -// placeholders. Do the same here: the production loader's follow-up XHRs -// are CORS-blocked on localhost and would pollute every e2e run. -const shouldLoadStandaloneShellLoader = !isRemote && !isDevServer; +// placeholders. `dev:full` exposes a same-origin static proxy so local +// Chrome can hydrate the placeholders without CORS failures. +const shouldLoadStandaloneShellLoader = + !isRemote && (!isDevServer || shouldUseLocalShellLoaderProxy); +const standaloneShellLoaderMode = shouldLoadStandaloneShellLoader + ? shouldUseLocalShellLoaderProxy + ? "proxy" + : "external" + : "placeholder"; +const aeroflotStaticBase = shouldUseLocalShellLoaderProxy + ? "/frontend/static" + : "https://www.aeroflot.ru/frontend/static"; const standaloneShellTags = isRemote ? [] : [ ...(shouldLoadStandaloneShellLoader ? [ + ...(shouldUseLocalShellLoaderProxy + ? [ + { + tag: "script", + head: true, + append: true, + children: SUPPRESS_AEROFLOT_LOADER_WARNINGS_SCRIPT, + }, + ] + : []), { tag: "link", head: true, append: true, attrs: { rel: "stylesheet", - href: "https://www.aeroflot.ru/frontend/static/css/afl-frontend-loader.bundle.css", + href: `${aeroflotStaticBase}/css/afl-frontend-loader.bundle.css`, }, }, { @@ -74,7 +102,7 @@ const standaloneShellTags = isRemote append: true, attrs: { async: true, - src: "https://www.aeroflot.ru/frontend/static/js/afl-frontend-loader.bundle.js", + src: `${aeroflotStaticBase}/js/afl-frontend-loader.bundle.js`, }, }, ] @@ -85,7 +113,7 @@ const standaloneShellTags = isRemote append: true, attrs: { name: "aeroflot-shell-loader", - content: shouldLoadStandaloneShellLoader ? "external" : "placeholder", + content: standaloneShellLoaderMode, }, }, ]; diff --git a/scripts/dev-server.mjs b/scripts/dev-server.mjs index cef87529..1f5720be 100644 --- a/scripts/dev-server.mjs +++ b/scripts/dev-server.mjs @@ -21,8 +21,10 @@ const PUBLIC_PORT = 8080; const MODERNJS_PORT = 8081; const API_TARGET = process.env.API_TARGET || "https://flights.test.aeroflot.ru"; const TRACKER_TARGET = process.env.TRACKER_TARGET || "https://platform.test.aeroflot.ru"; +const AEROFLOT_STATIC_TARGET = process.env.AEROFLOT_STATIC_TARGET || "https://www.aeroflot.ru"; const SYSTEM_PROXY = process.env.https_proxy || process.env.HTTPS_PROXY || ""; const DEBUG_PROXY_BODY = process.env.DEBUG_PROXY_BODY === "1"; +const LOCAL_PUBLIC_ORIGIN = `http://localhost:${PUBLIC_PORT}`; // Shared cookie jar so the Ngenix WAF cookie challenge (`ngenix_valid` + // 307-to-self) only runs once per dev-server lifetime, not per request. @@ -40,11 +42,19 @@ const modernBin = resolve("node_modules", ".bin", "modern"); const modernProcess = existsSync(modernBin) ? spawn(modernBin, ["dev"], { stdio: ["ignore", "inherit", "inherit"], - env: { ...process.env, PORT: String(MODERNJS_PORT) }, + env: { + ...process.env, + PORT: String(MODERNJS_PORT), + AEROFLOT_SHELL_LOADER_PROXY: "1", + }, }) : spawn(process.execPath, [resolve("node_modules", "@modern-js/app-tools", "bin", "modern.js"), "dev"], { stdio: ["ignore", "inherit", "inherit"], - env: { ...process.env, PORT: String(MODERNJS_PORT) }, + env: { + ...process.env, + PORT: String(MODERNJS_PORT), + AEROFLOT_SHELL_LOADER_PROXY: "1", + }, }); modernProcess.on("error", (err) => { console.error("Modern.js failed:", err); @@ -209,16 +219,108 @@ const trackerProxy = createProxyMiddleware({ }); app.use("/tracker", trackerProxy); -function execCurlWithFallback(buildArgs, extraArgs, res) { +// --- Aeroflot frontend loader static proxy --- +// The loader derives follow-up asset URLs from its own script origin. Serving +// it through localhost keeps Header/Footer hydration visible in dev Chrome +// without browser CORS errors from www.aeroflot.ru. +app.use( + "/frontend/static", + createProxyMiddleware({ + target: AEROFLOT_STATIC_TARGET, + changeOrigin: true, + secure: false, + logLevel: "warn", + pathRewrite: (path) => `/frontend/static${path}`, + selfHandleResponse: true, + on: { + proxyRes: responseInterceptor(async (buffer, proxyRes) => { + const contentType = proxyRes.headers["content-type"] ?? ""; + if (!/(css|html|javascript|json|text)/i.test(String(contentType))) { + return buffer; + } + + return buffer + .toString("utf8") + .replaceAll("https://gw.aeroflot.ru", "/gw") + .replaceAll("https://www.aeroflot.ru", "") + .replaceAll("https://aeroflot.ru", ""); + }), + }, + ...(SYSTEM_PROXY ? { agent: new HttpsProxyAgent(SYSTEM_PROXY) } : {}), + }), +); + +app.use("/personal/services/internal/v.0.0.1/json/get_member_info", (_req, res) => { + res.status(200).json({ data: null }); +}); + +app.use("/gw/api/pr/LKAB/Profile/v3/get", (_req, res) => { + res.status(200).json({ data: null }); +}); + +app.use(["/ws2/v.0.0.1/json/currency/RU", "/ws2/v.0.0.1/json/calcurr/"], (_req, res) => { + res.status(200).json({ data: { currency: "RUB" }, errors: [], isSuccess: true }); +}); + +app.use("/pkl/ws/json/v1/member/get", (_req, res) => { + res.status(200).json({ data: null, errors: [], isSuccess: true }); +}); + +app.use( + ["/ws2", "/cms2", "/personal", "/offers", "/feedback"], + express.raw({ type: "*/*" }), + (req, res) => { + const targetUrl = `${AEROFLOT_STATIC_TARGET}${req.originalUrl}`; + const requestBody = req.body?.length + ? req.body.toString("utf8").replaceAll(LOCAL_PUBLIC_ORIGIN, API_TARGET) + : ""; + + const buildArgs = (noproxy) => [ + "-s", + "-L", + ...(noproxy ? ["--noproxy", "*"] : []), + "-H", `Accept: ${req.headers.accept || "application/json"}`, + "-H", `User-Agent: ${req.headers["user-agent"] || "Mozilla/5.0"}`, + "-H", `Accept-Language: ${req.headers["accept-language"] || "ru"}`, + "-w", "\n%{http_code}", + targetUrl, + ]; + + const bodyArgs = + req.method === "GET" || req.method === "HEAD" + ? [] + : [ + "-X", req.method, + "-H", `Content-Type: ${req.headers["content-type"] || "application/json"}`, + ...(requestBody ? ["--data-raw", requestBody] : []), + ]; + + execCurlWithFallback(buildArgs, bodyArgs, res, respondWithAeroflotFrontendResult); + }, +); + +app.use( + "/media", + createProxyMiddleware({ + target: AEROFLOT_STATIC_TARGET, + changeOrigin: true, + secure: false, + logLevel: "warn", + pathRewrite: (path) => `/media${path}`, + ...(SYSTEM_PROXY ? { agent: new HttpsProxyAgent(SYSTEM_PROXY) } : {}), + }), +); + +function execCurlWithFallback(buildArgs, extraArgs, res, responder = respondWithCurlResult) { runCurl([...extraArgs, ...buildArgs(true)], (direct) => { if (isSuccessfulUpstream(direct)) { - respondWithCurlResult(direct, res); + responder(direct, res); return; } // Direct hit a WAF deny / throttle / network failure — retry through // the system HTTPS_PROXY (gost VPN tunnel on this host). runCurl([...extraArgs, ...buildArgs(false)], (proxy) => { - respondWithCurlResult(isSuccessfulUpstream(proxy) ? proxy : direct, res); + responder(isSuccessfulUpstream(proxy) ? proxy : direct, res); }); }); } @@ -285,6 +387,28 @@ function respondWithCurlResult({ err, stdout }, res) { res.send(body); } +function respondWithAeroflotFrontendResult(result, res) { + if (result.err) { + res.status(502).json({ error: result.err.message }); + return; + } + + const lastNewline = result.stdout.lastIndexOf("\n"); + const rawBody = lastNewline >= 0 ? result.stdout.substring(0, lastNewline) : result.stdout; + const body = rawBody + .replaceAll("https://gw.aeroflot.ru", "/gw") + .replaceAll("https://www.aeroflot.ru", "") + .replaceAll("https://aeroflot.ru", ""); + const statusStr = lastNewline >= 0 ? result.stdout.substring(lastNewline + 1).trim() : "200"; + const status = parseInt(statusStr) || 200; + const isJson = body.trimStart().startsWith("{") || body.trimStart().startsWith("["); + + res.status(status); + res.set("Content-Type", isJson ? "application/json" : "text/html"); + res.set("Access-Control-Allow-Origin", "*"); + res.send(body); +} + function summarizeBody(body) { const trimmed = body.trimStart(); if (!trimmed) return "body=empty"; diff --git a/tests/e2e/standalone-shell.spec.ts b/tests/e2e/standalone-shell.spec.ts index 435beb94..e60dc1eb 100644 --- a/tests/e2e/standalone-shell.spec.ts +++ b/tests/e2e/standalone-shell.spec.ts @@ -5,35 +5,40 @@ test.describe("TIRREDESIGN-30 — standalone header and footer", () => { page, consoleMessages, }) => { - await page.goto("/ru/smoke"); + await page.goto("/ru-ru/smoke"); await page.waitForLoadState("domcontentloaded"); const header = page.getByTestId("standalone-header"); await expect(header.locator('afl-component.header[data-component="Header"]')).toHaveCount(1); + await expect(header).toContainText("Сервисы и услуги", { timeout: 15_000 }); + await expect(header).toContainText("Личный кабинет", { timeout: 15_000 }); await expect(page.locator("h1")).toHaveText("Страница проверки"); - await expect(page.locator('afl-component.footer[data-component="Footer"]')).toHaveCount(1); + const footer = page.locator('afl-component.footer[data-component="Footer"]'); + await expect(footer).toHaveCount(1); + await expect(footer).toContainText("Контакты", { timeout: 15_000 }); + await expect(footer).toContainText("8 (800) 444-55-55", { timeout: 15_000 }); await expect( - page.locator('.banner--top afl-component[data-component="BannersOffers"] afl-item[data-item="positionId"]'), - ).toHaveText("383"); + page.locator('.banner--top afl-component[data-component="BannersOffers"].initialized'), + ).toHaveCount(1); await expect( - page.locator('.banner--bottom afl-component[data-component="BannersOffers"] afl-item[data-item="positionId"]'), - ).toHaveText("384"); + page.locator('.banner--bottom afl-component[data-component="BannersOffers"].initialized'), + ).toHaveCount(1); }); - test("local dev uses Angular-style placeholder loader mode", async ({ + test("local dev hydrates placeholders through same-origin Aeroflot loader proxy", async ({ page, consoleMessages, }) => { - await page.goto("/ru/smoke"); + await page.goto("/ru-ru/smoke"); await page.waitForLoadState("domcontentloaded"); await expect( - page.locator('meta[name="aeroflot-shell-loader"][content="placeholder"]'), + page.locator('meta[name="aeroflot-shell-loader"][content="proxy"]'), ).toHaveCount(1); await expect( - page.locator('script[src="https://www.aeroflot.ru/frontend/static/js/afl-frontend-loader.bundle.js"]'), - ).toHaveCount(0); + page.locator('script[src="/frontend/static/js/afl-frontend-loader.bundle.js"]'), + ).toHaveCount(1); }); });