packages/anvil-ui-ft-shell/src/index.tsx

import React from 'react'
import { AnyObject } from '@financial-times/anvil-types-generic'
import { getBootstrapJS, formatConfigJSON } from '@financial-times/anvil-ui-bootstrap'
import { corePolyfillServiceUrl, enhancedPolyfillServiceUrl } from './polyfill'
import DocumentHead, { TDocumentHeadProps } from './components/DocumentHead'

interface Props extends TDocumentHeadProps {
  children?: any
  initialProps?: AnyObject
  coreScriptsToLoad: string[]
  enhancedScriptsToLoad: string[]
}

export default function Shell(props: Props) {
  const coreScripts = [corePolyfillServiceUrl, ...props.coreScriptsToLoad]
  const enhancedScripts = [enhancedPolyfillServiceUrl, ...props.enhancedScriptsToLoad]
  const bootstrapConfig = formatConfigJSON(coreScripts, enhancedScripts)

  return (
    <html className="no-js core">
      <head>
        <DocumentHead {...props} />
        <script
          id="initial-props"
          type="application/json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(props.initialProps) }}
        />
        <script
          id="bootstrap-config"
          type="application/json"
          dangerouslySetInnerHTML={{ __html: bootstrapConfig }}
        />
        <script dangerouslySetInnerHTML={{ __html: getBootstrapJS() }} />
      </head>
      <Body contents={props.children} />
    </html>
  )
}

function Body({ contents }) {
  if (typeof contents === 'string') {
    return <body dangerouslySetInnerHTML={{ __html: contents }} />
  } else {
    return <body>{contents}</body>
  }
}