mirror of
https://github.com/discourse/discourse.git
synced 2024-11-28 09:23:44 +08:00
2e00482ac4
Currently, `window.I18n` is defined in an old school hand written script, inlined into locale/*.js by the Rails asset pipeline, and then the global variable is shimmed into a pseudo AMD module later in `module-shims.js`. This approach has some problems – for one thing, when we add a new V2 addon (e.g. in #23859), Embroider/Webpack is stricter about its dependencies and won't let you `import from "I18n";` when `"I18n"` isn't listed as one of its `dependencies` or `peerDependencies`. This moves `I18n` into a real package – `discourse-i18n`. (I was originally planning to keep the `I18n` name since it's a private package anyway, but NPM packages are supposed to have lower case names and that may cause problems with other tools.) This package defines and exports a regular class, but also defines the default global instance for backwards compatibility. We should use the exported class in tests to make one-off instances without mutating the global instance and having to clean it up after the test run. However, I did not attempt that refactor in this PR. Since `discourse-i18n` is now included by the app, the locale scripts needs to be loaded after the app chunks. Since no "real" work happens until later on when we kick things off in the boot script, the order in which the script tags appear shouldn't be a problem. Alternatively, we can rework the locale bundles to be more lazy like everything else, and require/import them into the app. I avoided renaming the imports in this commit since that would be quite noisy and drowns out the actual changes here. Instead, I used a Webpack alias to redirect the current `"I18n"` import to the new package for the time being. In a separate commit later on, I'll rename all the imports in oneshot and remove the alias. As always, plugins and the legacy bundles (admin/wizard) still relies on the runtime AMD shims regardless. For the most part, I avoided refactoring the actual I18n code too much other than making it a class, and some light stuff like `var` into `let`. However, now that it is in a reasonable format to work with (no longer inside the global script context!) it may also be a good opportunity to refactor and make clear what is intended to be public API vs internal implementation details. Speaking of, I took the librety to make `PLACEHOLDER`, `SEPARATOR` and `I18nMissingInterpolationArgument` actual constants since it seemed pretty clear to me those were just previously stashed on to the `I18n` global to avoid polluting the global namespace, rather than something we expect the consumers to set/replace.
542 lines
15 KiB
JavaScript
542 lines
15 KiB
JavaScript
"use strict";
|
|
|
|
const express = require("express");
|
|
const { encode } = require("html-entities");
|
|
const cleanBaseURL = require("clean-base-url");
|
|
const path = require("path");
|
|
const fs = require("fs");
|
|
const fsPromises = fs.promises;
|
|
const { JSDOM } = require("jsdom");
|
|
const { shouldLoadPlugins } = require("discourse-plugins");
|
|
const { Buffer } = require("node:buffer");
|
|
const { cwd, env } = require("node:process");
|
|
|
|
// via https://stackoverflow.com/a/6248722/165668
|
|
function generateUID() {
|
|
let firstPart = (Math.random() * 46656) | 0; // eslint-disable-line no-bitwise
|
|
let secondPart = (Math.random() * 46656) | 0; // eslint-disable-line no-bitwise
|
|
firstPart = ("000" + firstPart.toString(36)).slice(-3);
|
|
secondPart = ("000" + secondPart.toString(36)).slice(-3);
|
|
return firstPart + secondPart;
|
|
}
|
|
|
|
function htmlTag(buffer, bootstrap) {
|
|
let classList = "";
|
|
if (bootstrap.html_classes) {
|
|
classList = ` class="${bootstrap.html_classes}"`;
|
|
}
|
|
buffer.push(`<html lang="${bootstrap.html_lang}"${classList}>`);
|
|
}
|
|
|
|
function head(buffer, bootstrap, headers, baseURL) {
|
|
if (bootstrap.csrf_token) {
|
|
buffer.push(`<meta name="csrf-param" content="authenticity_token">`);
|
|
buffer.push(`<meta name="csrf-token" content="${bootstrap.csrf_token}">`);
|
|
}
|
|
|
|
if (bootstrap.theme_id) {
|
|
buffer.push(
|
|
`<meta name="discourse_theme_id" content="${bootstrap.theme_id}">`
|
|
);
|
|
}
|
|
|
|
if (bootstrap.theme_color) {
|
|
buffer.push(`<meta name="theme-color" content="${bootstrap.theme_color}">`);
|
|
}
|
|
|
|
if (bootstrap.authentication_data) {
|
|
buffer.push(
|
|
`<meta id="data-authentication" data-authentication-data="${encode(
|
|
bootstrap.authentication_data
|
|
)}">`
|
|
);
|
|
}
|
|
|
|
let setupData = "";
|
|
Object.keys(bootstrap.setup_data).forEach((sd) => {
|
|
let val = bootstrap.setup_data[sd];
|
|
if (val) {
|
|
if (Array.isArray(val)) {
|
|
val = JSON.stringify(val);
|
|
} else {
|
|
val = val.toString();
|
|
}
|
|
setupData += ` data-${sd.replace(/\_/g, "-")}="${encode(val)}"`;
|
|
}
|
|
});
|
|
buffer.push(`<meta id="data-discourse-setup"${setupData} />`);
|
|
|
|
if (bootstrap.preloaded.currentUser) {
|
|
const user = JSON.parse(bootstrap.preloaded.currentUser);
|
|
let { admin, staff } = user;
|
|
|
|
if (staff) {
|
|
buffer.push(`<script defer src="${baseURL}assets/admin.js"></script>`);
|
|
}
|
|
|
|
if (admin) {
|
|
buffer.push(`<script defer src="${baseURL}assets/wizard.js"></script>`);
|
|
}
|
|
}
|
|
|
|
bootstrap.plugin_js.forEach((src) =>
|
|
buffer.push(`<script defer src="${src}"></script>`)
|
|
);
|
|
|
|
buffer.push(bootstrap.theme_html.translations);
|
|
buffer.push(bootstrap.theme_html.js);
|
|
buffer.push(bootstrap.theme_html.head_tag);
|
|
buffer.push(bootstrap.html.before_head_close);
|
|
}
|
|
|
|
function localeScript(buffer, bootstrap) {
|
|
buffer.push(`<script defer src="${bootstrap.locale_script}"></script>`);
|
|
(bootstrap.extra_locales || []).forEach((l) =>
|
|
buffer.push(`<script defer src="${l}"></script>`)
|
|
);
|
|
}
|
|
|
|
function beforeScriptLoad(buffer, bootstrap) {
|
|
buffer.push(bootstrap.html.before_script_load);
|
|
}
|
|
|
|
function discoursePreloadStylesheets(buffer, bootstrap) {
|
|
(bootstrap.stylesheets || []).forEach((s) => {
|
|
let link = `<link rel="preload" as="style" href="${s.href}">`;
|
|
buffer.push(link);
|
|
});
|
|
}
|
|
|
|
function discourseStylesheets(buffer, bootstrap) {
|
|
(bootstrap.stylesheets || []).forEach((s) => {
|
|
let attrs = [];
|
|
if (s.media) {
|
|
attrs.push(`media="${s.media}"`);
|
|
}
|
|
if (s.target) {
|
|
attrs.push(`data-target="${s.target}"`);
|
|
}
|
|
if (s.theme_id) {
|
|
attrs.push(`data-theme-id="${s.theme_id}"`);
|
|
}
|
|
if (s.class) {
|
|
attrs.push(`class="${s.class}"`);
|
|
}
|
|
let link = `<link rel="stylesheet" type="text/css" href="${
|
|
s.href
|
|
}" ${attrs.join(" ")}>`;
|
|
buffer.push(link);
|
|
});
|
|
}
|
|
|
|
function body(buffer, bootstrap) {
|
|
buffer.push(bootstrap.theme_html.header);
|
|
buffer.push(bootstrap.html.header);
|
|
}
|
|
|
|
function bodyFooter(buffer, bootstrap, headers) {
|
|
buffer.push(bootstrap.theme_html.body_tag);
|
|
buffer.push(bootstrap.html.before_body_close);
|
|
|
|
let v = generateUID();
|
|
buffer.push(`
|
|
<script
|
|
async
|
|
type="text/javascript"
|
|
id="mini-profiler"
|
|
src="/mini-profiler-resources/includes.js?v=${v}"
|
|
data-css-url="/mini-profiler-resources/includes.css?v=${v}"
|
|
data-version="${v}"
|
|
data-path="/mini-profiler-resources/"
|
|
data-horizontal-position="right"
|
|
data-vertical-position="top"
|
|
data-trivial="false"
|
|
data-children="false"
|
|
data-max-traces="20"
|
|
data-controls="false"
|
|
data-total-sql-count="false"
|
|
data-authorized="true"
|
|
data-toggle-shortcut="alt+p"
|
|
data-start-hidden="false"
|
|
data-collapse-results="true"
|
|
data-html-container="body"
|
|
data-hidden-custom-fields="x"
|
|
data-ids="${headers.get("x-miniprofiler-ids")}"
|
|
></script>
|
|
`);
|
|
}
|
|
|
|
function hiddenLoginForm(buffer, bootstrap) {
|
|
if (!bootstrap.preloaded.currentUser) {
|
|
buffer.push(`
|
|
<form id='hidden-login-form' method="post" action="${bootstrap.login_path}" style="display: none;">
|
|
<input name="username" type="text" id="signin_username">
|
|
<input name="password" type="password" id="signin_password">
|
|
<input name="redirect" type="hidden">
|
|
<input type="submit" id="signin-button">
|
|
</form>
|
|
`);
|
|
}
|
|
}
|
|
|
|
function preloaded(buffer, bootstrap) {
|
|
buffer.push(
|
|
`<div class="hidden" id="data-preloaded" data-preloaded="${encode(
|
|
JSON.stringify(bootstrap.preloaded)
|
|
)}"></div>`
|
|
);
|
|
}
|
|
|
|
const BUILDERS = {
|
|
"html-tag": htmlTag,
|
|
"before-script-load": beforeScriptLoad,
|
|
"discourse-preload-stylesheets": discoursePreloadStylesheets,
|
|
head,
|
|
body,
|
|
"discourse-stylesheets": discourseStylesheets,
|
|
"hidden-login-form": hiddenLoginForm,
|
|
preloaded,
|
|
"body-footer": bodyFooter,
|
|
"locale-script": localeScript,
|
|
};
|
|
|
|
function replaceIn(bootstrap, template, id, headers, baseURL) {
|
|
let buffer = [];
|
|
BUILDERS[id](buffer, bootstrap, headers, baseURL);
|
|
let contents = buffer.filter((b) => b && b.length > 0).join("\n");
|
|
|
|
if (id === "html-tag") {
|
|
return template.replace(`<html>`, contents);
|
|
} else {
|
|
return template.replace(`<!-- bootstrap-content ${id} -->`, contents);
|
|
}
|
|
}
|
|
|
|
function extractPreloadJson(html) {
|
|
const dom = new JSDOM(html);
|
|
const dataElement = dom.window.document.querySelector("#data-preloaded");
|
|
|
|
if (!dataElement || !dataElement.dataset) {
|
|
return;
|
|
}
|
|
|
|
return dataElement.dataset.preloaded;
|
|
}
|
|
|
|
async function applyBootstrap(bootstrap, template, response, baseURL, preload) {
|
|
bootstrap.preloaded = Object.assign(JSON.parse(preload), bootstrap.preloaded);
|
|
|
|
Object.keys(BUILDERS).forEach((id) => {
|
|
template = replaceIn(bootstrap, template, id, response.headers, baseURL);
|
|
});
|
|
return template;
|
|
}
|
|
|
|
async function buildFromBootstrap(proxy, baseURL, req, response, preload) {
|
|
try {
|
|
const template = await fsPromises.readFile(
|
|
path.join(cwd(), "dist", "index.html"),
|
|
"utf8"
|
|
);
|
|
|
|
let url = new URL(`${proxy}${baseURL}bootstrap.json`);
|
|
url.searchParams.append("for_url", req.url);
|
|
|
|
const forUrlSearchParams = new URL(req.url, "https://dummy-origin.invalid")
|
|
.searchParams;
|
|
|
|
const mobileView = forUrlSearchParams.get("mobile_view");
|
|
if (mobileView) {
|
|
url.searchParams.append("mobile_view", mobileView);
|
|
}
|
|
|
|
const reqUrlSafeMode = forUrlSearchParams.get("safe_mode");
|
|
if (reqUrlSafeMode) {
|
|
url.searchParams.append("safe_mode", reqUrlSafeMode);
|
|
}
|
|
|
|
const navigationMenu = forUrlSearchParams.get("navigation_menu");
|
|
if (navigationMenu) {
|
|
url.searchParams.append("navigation_menu", navigationMenu);
|
|
}
|
|
|
|
const reqUrlPreviewThemeId = forUrlSearchParams.get("preview_theme_id");
|
|
if (reqUrlPreviewThemeId) {
|
|
url.searchParams.append("preview_theme_id", reqUrlPreviewThemeId);
|
|
}
|
|
|
|
const { default: fetch } = await import("node-fetch");
|
|
const res = await fetch(url, { headers: req.headers });
|
|
const json = await res.json();
|
|
|
|
return applyBootstrap(json.bootstrap, template, response, baseURL, preload);
|
|
} catch (error) {
|
|
throw new Error(
|
|
`Could not get ${proxy}${baseURL}bootstrap.json\n\n${error}`
|
|
);
|
|
}
|
|
}
|
|
|
|
async function handleRequest(proxy, baseURL, req, res) {
|
|
// x-forwarded-host is used in e.g. GitHub CodeSpaces
|
|
let originalHost = req.headers["x-forwarded-host"] || req.headers.host;
|
|
|
|
if (env["FORWARD_HOST"] === "true") {
|
|
if (/^localhost(\:|$)/.test(originalHost)) {
|
|
// Can't access default site in multisite via "localhost", redirect to 127.0.0.1
|
|
res.redirect(
|
|
307,
|
|
`http://${originalHost.replace("localhost", "127.0.0.1")}${req.path}`
|
|
);
|
|
return;
|
|
} else {
|
|
req.headers.host = originalHost;
|
|
}
|
|
} else {
|
|
req.headers.host = new URL(proxy).host;
|
|
}
|
|
|
|
if (req.headers["Origin"]) {
|
|
req.headers["Origin"] = req.headers["Origin"]
|
|
.replace(req.headers.host, originalHost)
|
|
.replace(/^https/, "http");
|
|
}
|
|
|
|
if (req.headers["Referer"]) {
|
|
req.headers["Referer"] = req.headers["Referer"]
|
|
.replace(req.headers.host, originalHost)
|
|
.replace(/^https/, "http");
|
|
}
|
|
|
|
let url = `${proxy}${req.path}`;
|
|
const queryLoc = req.url.indexOf("?");
|
|
if (queryLoc !== -1) {
|
|
url += req.url.slice(queryLoc);
|
|
}
|
|
|
|
if (req.method === "GET") {
|
|
req.headers["X-Discourse-Ember-CLI"] = "true";
|
|
}
|
|
|
|
const { default: fetch } = await import("node-fetch");
|
|
const response = await fetch(url, {
|
|
method: req.method,
|
|
body: /GET|HEAD/.test(req.method) ? null : req.body,
|
|
headers: req.headers,
|
|
redirect: "manual",
|
|
});
|
|
|
|
response.headers.forEach((value, header) => {
|
|
if (header === "set-cookie") {
|
|
// Special handling to get array of multiple Set-Cookie header values
|
|
// per https://github.com/node-fetch/node-fetch/issues/251#issuecomment-428143940
|
|
res.set("set-cookie", response.headers.raw()["set-cookie"]);
|
|
} else {
|
|
res.set(header, value);
|
|
}
|
|
});
|
|
res.set("content-encoding", null);
|
|
|
|
const location = response.headers.get("location");
|
|
if (location) {
|
|
const newLocation = location.replace(proxy, `http://${originalHost}`);
|
|
res.set("location", newLocation);
|
|
}
|
|
|
|
const csp = response.headers.get("content-security-policy");
|
|
if (csp) {
|
|
const emberCliAdditions = [
|
|
`http://${originalHost}${baseURL}assets/`,
|
|
`http://${originalHost}${baseURL}ember-cli-live-reload.js`,
|
|
`http://${originalHost}${baseURL}_lr/`,
|
|
].join(" ");
|
|
|
|
const newCSP = csp
|
|
.replaceAll(proxy, `http://${originalHost}`)
|
|
.replaceAll("script-src ", `script-src ${emberCliAdditions} `);
|
|
|
|
res.set("content-security-policy", newCSP);
|
|
}
|
|
|
|
const contentType = response.headers.get("content-type");
|
|
const isHTML = contentType?.startsWith("text/html");
|
|
|
|
res.status(response.status);
|
|
|
|
if (isHTML) {
|
|
const responseText = await response.text();
|
|
const preloadJson = isHTML ? extractPreloadJson(responseText) : null;
|
|
|
|
if (preloadJson) {
|
|
const html = await buildFromBootstrap(
|
|
proxy,
|
|
baseURL,
|
|
req,
|
|
response,
|
|
extractPreloadJson(responseText)
|
|
);
|
|
res.set("content-type", "text/html");
|
|
res.send(html);
|
|
} else {
|
|
res.send(responseText);
|
|
}
|
|
} else {
|
|
res.send(Buffer.from(await response.arrayBuffer()));
|
|
}
|
|
}
|
|
|
|
module.exports = {
|
|
name: require("./package").name,
|
|
|
|
isDevelopingAddon() {
|
|
return true;
|
|
},
|
|
|
|
contentFor(type, config) {
|
|
if (shouldLoadPlugins() && type === "test-plugin-js") {
|
|
const scripts = [];
|
|
|
|
const pluginInfos = this.app.project
|
|
.findAddonByName("discourse-plugins")
|
|
.pluginInfos();
|
|
|
|
for (const {
|
|
pluginName,
|
|
directoryName,
|
|
hasJs,
|
|
hasAdminJs,
|
|
} of pluginInfos) {
|
|
if (hasJs) {
|
|
scripts.push({
|
|
src: `plugins/${directoryName}.js`,
|
|
name: pluginName,
|
|
});
|
|
}
|
|
|
|
if (fs.existsSync(`../plugins/${directoryName}_extras.js.erb`)) {
|
|
scripts.push({
|
|
src: `plugins/${directoryName}_extras.js`,
|
|
name: pluginName,
|
|
});
|
|
}
|
|
|
|
if (hasAdminJs) {
|
|
scripts.push({
|
|
src: `plugins/${directoryName}_admin.js`,
|
|
name: pluginName,
|
|
});
|
|
}
|
|
}
|
|
|
|
return scripts
|
|
.map(
|
|
({ src, name }) =>
|
|
`<script src="${config.rootURL}assets/${src}" data-discourse-plugin="${name}"></script>`
|
|
)
|
|
.join("\n");
|
|
} else if (shouldLoadPlugins() && type === "test-plugin-tests-js") {
|
|
return this.app.project
|
|
.findAddonByName("discourse-plugins")
|
|
.pluginInfos()
|
|
.filter(({ hasTests }) => hasTests)
|
|
.map(
|
|
({ directoryName, pluginName }) =>
|
|
`<script src="${config.rootURL}assets/plugins/test/${directoryName}_tests.js" data-discourse-plugin="${pluginName}"></script>`
|
|
)
|
|
.join("\n");
|
|
} else if (shouldLoadPlugins() && type === "test-plugin-css") {
|
|
return `<link rel="stylesheet" href="${config.rootURL}bootstrap/plugin-css-for-tests.css" data-discourse-plugin="_all" />`;
|
|
}
|
|
},
|
|
|
|
serverMiddleware(config) {
|
|
const app = config.app;
|
|
let { proxy, rootURL, baseURL } = config.options;
|
|
|
|
if (!proxy) {
|
|
// eslint-disable-next-line no-console
|
|
console.error(`
|
|
Discourse can't be run without a \`--proxy\` setting, because it needs a Rails application
|
|
to serve API requests. For example:
|
|
|
|
yarn run ember serve --proxy "http://localhost:3000"\n`);
|
|
throw "--proxy argument is required";
|
|
}
|
|
|
|
baseURL = rootURL === "" ? "/" : cleanBaseURL(rootURL || baseURL);
|
|
|
|
const rawMiddleware = express.raw({ type: () => true, limit: "100mb" });
|
|
const pathRestrictedRawMiddleware = (req, res, next) => {
|
|
if (this.shouldHandleRequest(req, baseURL)) {
|
|
return rawMiddleware(req, res, next);
|
|
} else {
|
|
return next();
|
|
}
|
|
};
|
|
|
|
app.use(
|
|
"/favicon.ico",
|
|
express.static(
|
|
path.join(
|
|
__dirname,
|
|
"../../../../../../public/images/discourse-logo-sketch-small.png"
|
|
)
|
|
)
|
|
);
|
|
|
|
app.use(pathRestrictedRawMiddleware, async (req, res, next) => {
|
|
try {
|
|
if (this.shouldHandleRequest(req, baseURL)) {
|
|
await handleRequest(proxy, baseURL, req, res);
|
|
} else {
|
|
// Fixes issues when using e.g. "localhost" instead of loopback IP address
|
|
req.headers.host = "127.0.0.1";
|
|
}
|
|
} catch (error) {
|
|
res.send(`
|
|
<html>
|
|
<h1>Discourse Ember CLI Proxy Error</h1>
|
|
<pre><code>${error.stack}</code></pre>
|
|
</html>
|
|
`);
|
|
} finally {
|
|
if (!res.headersSent) {
|
|
return next();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
shouldHandleRequest(request, baseURL) {
|
|
if (
|
|
[
|
|
`${baseURL}tests/index.html`,
|
|
`${baseURL}ember-cli-live-reload.js`,
|
|
`${baseURL}testem.js`,
|
|
`${baseURL}assets/test-i18n.js`,
|
|
].includes(request.path)
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
// All JS assets are served by Ember CLI, except for
|
|
// plugin assets which end in _extra.js
|
|
if (
|
|
request.path.startsWith(`${baseURL}assets/`) &&
|
|
!request.path.endsWith("_extra.js")
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
if (request.path.startsWith(`${baseURL}_lr/`)) {
|
|
return false;
|
|
}
|
|
|
|
if (request.path.startsWith(`${baseURL}message-bus/`)) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
};
|