import PropTypes from 'prop-types'; import React from 'react'; import escapeHtml from 'escape-html'; import fs from 'fs'; import { getPolyfill } from 'mwp-app-render/lib/util/browserPolyfill'; const getInnerHTML = __html => ({ __html }); /** * Module that builds html, head, and body elements * And inserts app markup in the body * * Elements should only be added inside head via Helmet * @see {@link https://github.com/nfl/react-helmet} * * This component solves some "hard" problems related to wrapping a React * application in the full HTML markup needed to render it on the server. * * 1. Passing server-side app state to the client-side JS application - the * `window.INITIAL_STATE` setting, which has a few subtle gotchas if * implemented differently * 2. `` management through `react-helmet` - there are lots of ways of * doing this wrong or implementing a fragile/inflexible solution * 3. Using an injected variable to write the client JS application bundle path * - there are lots of ways to introduce bugs into alternative implementations. * * @module DOM */ const DOM = props => { const { appMarkup = '', appContext, head, initialState = {}, scripts, cssLinks, } = props; const localeCode = initialState.config.requestLanguage; const htmlLang = localeCode.split('-')[0]; /** * Add polyfill.io script if needed */ const polyfill = getPolyfill(appContext.userAgent, localeCode); const js = polyfill ? [polyfill, ...scripts] : [...scripts]; /** * `initialState` has untrusted user-generated content that needs to be * written into the DOM inside a