react-navi-helmet-async
Version:
Use react-helmet-async to render your Navi routes' title and head.
86 lines • 3.49 kB
JavaScript
;
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_helmet_async_1 = require("react-helmet-async");
exports.Helmet = react_helmet_async_1.Helmet;
var react_navi_1 = require("react-navi");
function NaviHelmetProvider(_a) {
var canUseDOM = _a.canUseDOM, context = _a.context, children = _a.children;
var parent = React.useContext(react_navi_1.ViewHeadRendererContext);
var defaultContext = React.useRef({}).current;
if (!context) {
context = defaultContext;
}
// react-helmet may thinks it's in a browser due to JSDOM, so we need to
// manually let it know that we're doing static rendering.
if (canUseDOM !== undefined) {
;
react_helmet_async_1.HelmetProvider.canUseDOM = canUseDOM;
}
if (!react_helmet_async_1.HelmetProvider.canUseDOM) {
context.getHelmet = function () {
return context.helmet;
};
}
if (parent) {
// If someone has already wrapped the app with a HeadProvider, e.g. for
// server side rendering, then just use that.
return React.createElement(React.Fragment, null, children);
}
else {
return (React.createElement(react_helmet_async_1.HelmetProvider, { context: context },
React.createElement(react_navi_1.ViewHeadRendererContext.Provider, { value: renderViewHead }, children)));
}
}
exports.HelmetProvider = NaviHelmetProvider;
// Memoize these to stop a bizarre react-helmet infinite loop bug when titles
// are recreated on each render
var titles = {};
function createTitleElement(str) {
var title = titles[str];
if (!title) {
title = titles[str] = React.createElement("title", null, str);
}
return title;
}
function renderViewHead(chunks) {
var headAndTitleChunks = chunks.filter(function (chunk) { return chunk.type === 'title' || chunk.type === 'head'; });
var helmet = headAndTitleChunks &&
headAndTitleChunks.length && React.createElement.apply(React, __spreadArrays([react_helmet_async_1.Helmet,
null], headAndTitleChunks.map(function (chunk) {
return chunk.type === 'title'
? createTitleElement(chunk.title)
: chunk.head.type === React.Fragment || chunk.head.type === 'head'
? chunk.head.props.children
: chunk.head;
})));
return helmet || null;
}
exports.renderViewHead = renderViewHead;
// If building with navi-scripts, we'll need to register this module so that
// it can use it to add <head> tags to the build output.
if (typeof window !== 'undefined') {
var app = window['NaviScripts'];
if (!app) {
app = window['NaviScripts'] = {};
}
if (!app.head) {
app.head = NaviHelmetProvider;
}
}
exports.default = NaviHelmetProvider;
//# sourceMappingURL=index.js.map