// @flow strict
import type {
ExtraTag,
DocumentInitialProps,
DocumentGetInitialProps,
Context,
Extractor,
DataType
} from 'Document.component';
import React, { Fragment } from 'react';
import { F, identity, path } from 'ramda';
import { Error } from './Error.component';
import serialize from 'serialize-javascript';
const getHeaderTags = (extractor: Extractor) => [
...extractor.getStyleElements(),
...extractor.getLinkElements()
];
const renderTags = ({ tag: Tag, content, name, attribs }: ExtraTag) => (
);
export function DocumentComponent({
helmet,
assets,
criticalCSS,
data,
error,
errorComponent: ErrorComponent,
filterServerData = identity,
extractor,
extraHeadTags = [],
extraBodyTags = []
}: DocumentInitialProps) {
// get attributes from React Helmet
const htmlAttrs = helmet.htmlAttributes.toComponent();
const bodyAttrs = helmet.bodyAttributes.toComponent();
const clientCss = path(['client', 'css'], assets);
return (
{helmet.title.toComponent()}
{helmet.meta.toComponent()}
{helmet.link.toComponent()}
{extraHeadTags.map(renderTags)}
{helmet.style.toComponent()}
{helmet.script.toComponent()}
{extractor && getHeaderTags(extractor)}
{criticalCSS !== false && criticalCSS}
{clientCss && }
{error ? (
ErrorComponent ? (
) : (
)
) : (
)}
{extractor && extractor.getScriptElements()}
{extraBodyTags.map(renderTags)}
);
}
DocumentComponent.getInitialProps = async ({
assets,
data,
renderPage,
generateCriticalCSS = F,
extractor,
...rest
}: Context): Promise => {
const page = await renderPage(data);
const criticalCSS = generateCriticalCSS();
return { assets, criticalCSS, data, extractor, ...rest, ...page };
};
export const Root = () => BEFORE.JS-DATA
;
export const Data = ({ data }: { data: DataType }) => {
return (