ssr-hook
Version:
Server-Side Rendering hook for your React projects.
148 lines (147 loc) • 8.96 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.render = render;
exports.renderToHTML = renderToHTML;
var jsx_runtime_1 = require("react/jsx-runtime");
var server_1 = require("react-dom/server");
var renderingData_1 = require("./renderingData");
function render(origin, url, app) {
return __awaiter(this, void 0, void 0, function () {
var timeStart, i, root, renderingData, renderingHeaders, _i, _a, _b, url_1, value, response, value_1, e_1, data, headers, timeEnd, timeDiff;
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
timeStart = new Date().getTime();
i = 0;
root = "";
renderingData = {};
renderingHeaders = {};
_c.label = 1;
case 1:
i++;
_i = 0, _a = Object.entries(renderingData);
_c.label = 2;
case 2:
if (!(_i < _a.length)) return [3 /*break*/, 8];
_b = _a[_i], url_1 = _b[0], value = _b[1];
if (value !== null)
return [3 /*break*/, 7];
_c.label = 3;
case 3:
_c.trys.push([3, 6, , 7]);
return [4 /*yield*/, fetch(url_1.startsWith("/") ? origin + url_1 : url_1)];
case 4:
response = _c.sent();
if (response.status !== 200)
throw new Error("Response status: ".concat(response.status));
return [4 /*yield*/, response.json()];
case 5:
value_1 = _c.sent();
(0, renderingData_1.setRenderingValueToData)(renderingData, url_1, value_1);
return [3 /*break*/, 7];
case 6:
e_1 = _c.sent();
if (e_1 instanceof Error) {
(0, renderingData_1.setRenderingValueToData)(renderingData, url_1, e_1);
}
else {
(0, renderingData_1.setRenderingValueToData)(renderingData, url_1, new Error("Unknown error"));
}
return [3 /*break*/, 7];
case 7:
_i++;
return [3 /*break*/, 2];
case 8:
// End await zone. The rendering can be run different render and rewrite rendering data.
(0, renderingData_1.cleanRenderingData)();
(0, renderingData_1.mockLocation)(origin + url);
(0, renderingData_1.setRenderingData)(renderingData);
root = (0, server_1.renderToString)(app);
renderingHeaders = (0, renderingData_1.getRenderingHeaders)();
renderingData = (0, renderingData_1.getRenderingData)();
_c.label = 9;
case 9:
if (Object.values(renderingData).includes(null)) return [3 /*break*/, 1];
_c.label = 10;
case 10:
data = "<script type=\"text/javascript\">window.RENDERING_DATA=".concat(JSON.stringify(renderingData), ";</script>");
headers = (0, server_1.renderToString)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderingHeaders.title && (0, jsx_runtime_1.jsx)("title", { children: renderingHeaders.title }), renderingHeaders.description && (0, jsx_runtime_1.jsx)("meta", { name: "description", content: renderingHeaders.description }), renderingHeaders.title && (0, jsx_runtime_1.jsx)("meta", { property: "og:title", content: renderingHeaders.title }), renderingHeaders.description && (0, jsx_runtime_1.jsx)("meta", { property: "og:description", content: renderingHeaders.description }), renderingHeaders.image && (0, jsx_runtime_1.jsx)("meta", { property: "og:image", content: renderingHeaders.image }), renderingHeaders.canonical && (0, jsx_runtime_1.jsx)("meta", { property: "og:url", content: renderingHeaders.canonical }), renderingHeaders.canonical && (0, jsx_runtime_1.jsx)("link", { rel: "canonical", href: renderingHeaders.canonical })] }));
timeEnd = new Date().getTime();
timeDiff = timeEnd - timeStart;
console.log("SSR:", timeDiff, "ms", "Rendering (data loop):", i, "x", url, Object.keys(renderingData));
if (!renderingHeaders.title)
console.warn("Warning: No title in", url);
return [2 /*return*/, { headers: headers, root: root, data: data, lang: renderingHeaders.lang }];
}
});
});
}
function renderToHTML(origin, url, indexHtml, app) {
return __awaiter(this, void 0, void 0, function () {
var _a, headers, root, data, lang;
return __generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, render(origin, url, app)];
case 1:
_a = _b.sent(), headers = _a.headers, root = _a.root, data = _a.data, lang = _a.lang;
if (lang)
indexHtml = getHtmlWithLang(indexHtml, lang);
return [2 /*return*/, indexHtml
.replace("<head>", "<head>".concat(headers))
.replace("<div id=\"root\"></div>", "<div id=\"root\">".concat(root, "</div>").concat(data))];
}
});
});
}
function getHtmlWithLang(html, lang) {
var htmlLang = html.indexOf(" lang=\"");
if (htmlLang > -1) {
var htmlLangEnd = html.indexOf("\"", htmlLang + 7);
return html.slice(0, htmlLang + 7) + lang + html.slice(htmlLangEnd);
}
var htmlTag = html.indexOf("<html");
if (htmlTag > -1) {
return html.slice(0, htmlTag + 5) + " lang=\"".concat(lang, "\"") + html.slice(htmlTag + 5);
}
var htmlDoctype = html.indexOf("<!doctype html>");
if (htmlDoctype > -1) {
return html.slice(0, htmlDoctype + 15) + "<html lang=\"".concat(lang, "\">") + html.slice(htmlDoctype + 15) + "</html>";
}
return "<!doctype html><html lang=\"".concat(lang, "\">").concat(html, "</html>");
}