@financial-times/dotcom-ui-shell 7.2.7 → 7.3.1

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@financial-times/dotcom-ui-shell",
-  "version": "7.2.7",
+  "version": "7.3.1",
   "description": "",
   "main": "component.js",
   "browser": "browser.js",
   "types": "src/index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "tsc": "../../node_modules/.bin/tsc --incremental",
     "clean": "npm run clean:dist && npm run clean:node_modules",
     "clean:dist": "rm -rf dist",
     "clean:node_modules": "rm -rf node_modules",
     "clean:install": "npm run clean && npm i",
-    "build:node": "npm run tsc -- --module commonjs --outDir ./dist/node",
+    "build:node": "tsc",
     "build": "npm run build:node",
     "dev": "npm run build:node -- --watch",
     "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
@@ -21,11 +20,11 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-ui-app-context": "^7.2.7",
-    "@financial-times/dotcom-ui-base-styles": "^7.2.7",
-    "@financial-times/dotcom-ui-bootstrap": "^7.2.7",
-    "@financial-times/dotcom-ui-flags": "^7.2.7",
-    "@financial-times/dotcom-ui-polyfill-service": "^7.2.7",
+    "@financial-times/dotcom-ui-app-context": "file:../dotcom-ui-app-context",
+    "@financial-times/dotcom-ui-base-styles": "file:../dotcom-ui-base-styles",
+    "@financial-times/dotcom-ui-bootstrap": "file:../dotcom-ui-bootstrap",
+    "@financial-times/dotcom-ui-flags": "file:../dotcom-ui-flags",
+    "@financial-times/dotcom-ui-polyfill-service": "file:../dotcom-ui-polyfill-service",
     "mime-types": "^2.1.26"
   },
   "peerDependencies": {
@@ -35,6 +34,9 @@
     "node": ">= 14.0.0",
     "npm": "7.x || 8.x"
   },
+  "files": [
+    "dist/"
+  ],
   "repository": {
     "type": "git",
     "repository": "https://github.com/Financial-Times/dotcom-page-kit.git",
@@ -48,4 +50,4 @@
     "check-engine": "^1.10.1",
     "react": "^16.8.6"
   }
-}
+}

package/src/components/Content.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-
-export type TContentProps = {
-  contents?: string | React.ReactNode
-}
-
-const styles = {
-  display: 'contents'
-}
-
-function Content({ contents }: TContentProps) {
-  if (typeof contents === 'string') {
-    return <div style={styles} dangerouslySetInnerHTML={{ __html: contents }} />
-  }
-
-  // We could try and validate this but there are so many possibilities
-  // of node types and potentially nested arrays etc.
-  if (contents) {
-    return <React.Fragment>{contents}</React.Fragment>
-  }
-
-  return null
-}
-
-export default Content

package/src/components/DocumentHead.tsx

@@ -1,103 +0,0 @@
-import React from 'react'
-import imageServiceIconURL from '../lib/imageServiceIconURL'
-import OpenGraph, { TOpenGraphProps } from './OpenGraph'
-import LinkedData, { TLinkedDataProps } from './LinkedData'
-
-export type TDocumentHeadProps = TOpenGraphProps &
-  TLinkedDataProps & {
-    description?: string
-    facebookPage?: string
-    googleSiteVerification?: string
-    metaTags?: Array<{ [key: string]: any }>
-    pageTitle: string
-    robots?: string
-    siteTitle?: string
-    twitterSite?: string
-    canonicalURL?: string
-    manifestFile?: string
-    additionalMetadata?: React.ReactNode,
-    showSmartBanner?: boolean
-  }
-
-const DocumentHead = (props: TDocumentHeadProps) => (
-  <React.Fragment>
-    <meta charSet="utf-8" />
-    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-    <title>{props.pageTitle ? `${props.pageTitle} | ${props.siteTitle}` : props.siteTitle}</title>
-
-    {props.description && <meta name="description" content={props.description} />}
-
-    {props.canonicalURL && <link rel="canonical" href={props.canonicalURL} />}
-
-    {/* SEO */}
-    <meta name="robots" content={props.robots} />
-    <meta name="google-site-verification" content={props.googleSiteVerification} />
-    {props.metaTags.map((attributes, i) => (
-      <meta key={`meta-${i}`} {...attributes} />
-    ))}
-    <LinkedData jsonLd={props.jsonLd} />
-
-    {/* social media */}
-    <meta property="fb:pages" content={props.facebookPage} />
-    <meta property="twitter:site" content={props.twitterSite} />
-    <OpenGraph openGraph={props.openGraph} />
-
-    {/* native apps */}
-    {props.showSmartBanner && 
-      (
-        <meta
-          name="apple-itunes-app"
-          content={props.canonicalURL ? `app-id=1200842933, app-argument=${props.canonicalURL}` : 'app-id=1200842933'}
-        />
-      )
-    }
-
-    {/* packaging */}
-    <link
-      rel="icon"
-      type="image/svg+xml"
-      href={imageServiceIconURL('ftlogo-v1:brand-ft-logo-square-coloured', 0, 'svg')}
-    />
-    <link
-      rel="alternate icon"
-      type="image/png"
-      href={imageServiceIconURL('ftlogo-v1:brand-ft-logo-square-coloured', 32)}
-      sizes="32x32"
-    />
-    <link
-      rel="alternate icon"
-      type="image/png"
-      href={imageServiceIconURL('ftlogo-v1:brand-ft-logo-square-coloured', 194)}
-      sizes="194x194"
-    />
-    <link
-      rel="apple-touch-icon"
-      href={imageServiceIconURL('ftlogo-v1:brand-ft-logo-square-coloured', 180)}
-      sizes="180x180"
-    />
-
-    {props.manifestFile ? <link rel="manifest" href={props.manifestFile} /> : null}
-
-    {/* We can't add an option for every single metadata option so allow custom elements to be inserted*/}
-    {props.additionalMetadata}
-  </React.Fragment>
-)
-
-DocumentHead.defaultProps = {
-  description:
-    'News, analysis and comment from the Financial Times, the worldʼs leading global business publication',
-  facebookPage: '8860325749',
-  googleSiteVerification: '4-t8sFaPvpO5FH_Gnw1dkM28CQepjzo8UjjAkdDflTw',
-  metaTags: [],
-  jsonLd: [],
-  robots: 'index,follow,max-snippet:200,max-image-preview:large',
-  siteTitle: 'Financial Times',
-  twitterSite: '@FinancialTimes',
-  manifestFile: 'https://www.ft.com/__assets/creatives/manifest/manifest-v6.json',
-  additionalMetadata: null,
-  showSmartBanner: true
-}
-
-export default DocumentHead

package/src/components/GTMBody.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { TFlagsData } from '@financial-times/dotcom-ui-flags/src/types'
-
-// This component is maintained by the ads team
-const GTMBody = ({ flags }: { flags: TFlagsData }) => {
-  if (!flags.enableGTM) {
-    return null
-  }
-
-  return (
-    <noscript>
-      <iframe
-        src="https://www.googletagmanager.com/ns.html?id=GTM-NWQJW68"
-        height="0"
-        width="0"
-        style={{
-          display: 'none',
-          visibility: 'hidden'
-        }}
-      />
-    </noscript>
-  )
-}
-
-GTMBody.defaultProps = {
-  flags: {}
-}
-
-export default GTMBody

package/src/components/GTMHead.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { TFlagsData } from '@financial-times/dotcom-ui-flags/src/types'
-
-// This component is maintained by the ads team
-const GTMHead = ({ flags }: { flags: TFlagsData }) => {
-  if (!flags.enableGTM) {
-    return null
-  }
-
-  const tagManager = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-        })(window,document,'script','dataLayer','GTM-NWQJW68');`
-
-  return <script dangerouslySetInnerHTML={{ __html: tagManager }} />
-}
-
-GTMHead.defaultProps = {
-  flags: {}
-}
-
-export default GTMHead

package/src/components/LinkedData.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-
-export type TLinkedDataProps = {
-  jsonLd?: { [key: string]: any }
-}
-
-const LinkedData = ({ jsonLd }: TLinkedDataProps) => (
-  <React.Fragment>
-    {Array.isArray(jsonLd) &&
-      jsonLd.map((data, i) => (
-        <script
-          key={`jsonld-${i}`}
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(data)
-          }}
-        />
-      ))}
-    <script
-      type="application/ld+json"
-      dangerouslySetInnerHTML={{
-        __html: JSON.stringify({
-          '@context': 'http://schema.org',
-          '@type': 'WebSite',
-          name: 'Financial Times',
-          alternateName: 'FT.com',
-          url: 'http://www.ft.com'
-        })
-      }}
-    />
-  </React.Fragment>
-)
-
-LinkedData.defaultProps = {
-  jsonLd: []
-}
-
-export default LinkedData

package/src/components/OpenGraph.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import flattenOpenGraphData, { TOpenGraphData } from '../lib/flattenOpenGraphData'
-
-export type TOpenGraphProps = {
-  openGraph?: TOpenGraphData
-}
-
-const OpenGraph = ({ openGraph }: TOpenGraphProps) => (
-  <React.Fragment>
-    {flattenOpenGraphData(openGraph).map(([property, content], i) => (
-      <meta key={`og-${i}`} property={property} content={content} />
-    ))}
-  </React.Fragment>
-)
-
-OpenGraph.defaultProps = {
-  openGraph: {}
-}
-
-export default OpenGraph

package/src/components/ResourceHints.tsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import mimeTypes from 'mime-types'
-import getResourceType from '../lib/getResourceType'
-
-export type TResourceHintsProps = {
-  resourceHints?: string[]
-}
-
-const ResourceHints = (props: TResourceHintsProps) => {
-  return (
-    <React.Fragment>
-      {/*
-        Spoor is the API which receives the tracking events sent by the o-tracking library
-        <https://github.com/Financial-Times/o-tracking>
-      */}
-      <link rel="preconnect" href="https://spoor-api.ft.com" />
-      {/*
-        The session API is used to validate users and retrieve information about them
-        <https://github.com/Financial-Times/next-session>
-      */}
-      <link rel="preconnect" href="https://session-next.ft.com" crossOrigin="use-credentials" />
-      {/*
-        The ads API is used to fetch ad targeting information for the current page
-        <https://github.com/Financial-Times/next-ads-api>
-      */}
-      <link rel="preconnect" href="https://ads-api.ft.com" />
-      {/*
-        The Google Publisher Tag library (GPT) is hosted here which is used to deliver ads
-        <https://github.com/Financial-Times/o-ads/blob/HEAD/src/js/ad-servers/gpt.js>
-      */}
-      <link rel="preconnect" href="https://securepubads.g.doubleclick.net" />
-
-      {props.resourceHints.map((resource, i) => {
-        const contentType = getResourceType(resource)
-        const mimeType =
-          mimeTypes.lookup(resource) ||
-          mimeTypes.lookup(resource.match(/(?<=font_format=)([a-z0-9]+)/)?.[0]) ||
-          null
-
-        const attributes: React.LinkHTMLAttributes<HTMLLinkElement> = {
-          as: contentType,
-          href: resource,
-          type: mimeType
-        }
-
-        // Fonts are expected to be fetched anonymously by the browser, and the preload request is
-        // only made anonymous by using the crossorigin attribute.
-        // <https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content>
-        if (contentType === 'font') {
-          attributes.crossOrigin = 'anonymous'
-        }
-
-        return <link key={`hint-${i}`} rel="preload" {...attributes} />
-      })}
-    </React.Fragment>
-  )
-}
-
-ResourceHints.defaultProps = {
-  resourceHints: []
-}
-
-export default ResourceHints

package/src/components/Shell.tsx

@@ -1,97 +0,0 @@
-import React from 'react'
-import Content, { TContentProps } from './Content'
-import DocumentHead, { TDocumentHeadProps } from './DocumentHead'
-import StyleSheets, { TStylesheetProps } from './StyleSheets'
-import ResourceHints, { TResourceHintsProps } from './ResourceHints'
-import { AppContextEmbed, TAppContextProps } from '@financial-times/dotcom-ui-app-context'
-import {
-  fontFaceURLs,
-  documentStyles,
-  LoadFontsEmbed,
-  loadCustomFontsClassNames
-} from '@financial-times/dotcom-ui-base-styles'
-import { FlagsEmbed, TFlagsEmbedProps } from '@financial-times/dotcom-ui-flags'
-import { Bootstrap, TBootstrapProps } from '@financial-times/dotcom-ui-bootstrap'
-import * as polyfillService from '@financial-times/dotcom-ui-polyfill-service'
-import formatAttributeNames, { TAttributeData } from '../lib/formatAttributeNames'
-import GTMHead from './GTMHead'
-import GTMBody from './GTMBody'
-
-type TShellProps = TDocumentHeadProps &
-  TAppContextProps &
-  TStylesheetProps &
-  TResourceHintsProps &
-  TContentProps &
-  TFlagsEmbedProps & {
-    scripts?: string[]
-    children?: any
-    initialProps?: any
-    bodyAttributes?: TAttributeData
-    htmlAttributes?: TAttributeData
-  }
-
-function Shell(props: TShellProps) {
-  const bootstrapProps: TBootstrapProps = {
-    coreScripts: [polyfillService.core()],
-    enhancedScripts: [polyfillService.enhanced(), ...props.scripts]
-  }
-
-  const resourceHints = [
-    polyfillService.enhanced(),
-    // There is no need to include stylesheets here as any <link rel="stylesheet" /> tags
-    // should be found by the browser's speculative parser.
-    ...props.scripts,
-    ...props.resourceHints,
-    ...fontFaceURLs
-  ]
-
-  return (
-    <html
-      {...formatAttributeNames(props.htmlAttributes)}
-      lang="en-GB"
-      className={`no-js core ${loadCustomFontsClassNames}`}
-      data-o-component="o-typography"
-      style={documentStyles}
-    >
-      <head>
-        <DocumentHead {...props} />
-        <ResourceHints resourceHints={resourceHints} />
-        {/* TODO: refactor initial props, flags data, and context data to the bottom of body */}
-        <script
-          id="initial-props"
-          type="application/json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(props.initialProps) }}
-        />
-        <StyleSheets
-          criticalStyles={props.criticalStyles}
-          stylesheets={props.stylesheets}
-          asyncStylesheets={props.asyncStylesheets}
-        />
-        <Bootstrap {...bootstrapProps} />
-        <GTMHead flags={props.flags} />
-        <LoadFontsEmbed />
-      </head>
-      <body {...formatAttributeNames(props.bodyAttributes)}>
-        <GTMBody flags={props.flags} />
-        <Content contents={props.contents || props.children} />
-        <AppContextEmbed appContext={props.appContext} />
-        <FlagsEmbed flags={props.flags} />
-      </body>
-    </html>
-  )
-}
-
-Shell.defaultProps = {
-  scripts: [],
-  stylesheets: [],
-  asyncStylesheets: [],
-  resourceHints: [],
-  htmlAttributes: {},
-  bodyAttributes: {}
-}
-
-export { Shell }
-export type { TShellProps }
-
-// Export sub-components to more-easily enable custom integrations
-export { DocumentHead, ResourceHints, Content }

package/src/components/StyleSheets.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import loadAsyncStylesheetsString from '../lib/loadAsyncStylesheets'
-
-export type TStylesheetProps = {
-  criticalStyles?: string
-  stylesheets?: string[]
-  asyncStylesheets?: string[]
-}
-
-const Stylesheets = ({ criticalStyles, stylesheets, asyncStylesheets }: TStylesheetProps) => (
-  <React.Fragment>
-    {criticalStyles && <style dangerouslySetInnerHTML={{ __html: criticalStyles }} />}
-    {Array.isArray(stylesheets) &&
-      stylesheets.map((stylesheet, i) => <link rel="stylesheet" key={`stylesheet-${i}`} href={stylesheet} />)}
-    {Array.isArray(asyncStylesheets) && !!asyncStylesheets.length && (
-      <React.Fragment>
-        <noscript>
-          {asyncStylesheets.map((stylesheet, i) => (
-            <link rel="stylesheet" href={stylesheet} key={`async-stylesheet-${i}`} />
-          ))}
-        </noscript>
-        <script
-          data-stylesheets={asyncStylesheets.join()}
-          dangerouslySetInnerHTML={{ __html: loadAsyncStylesheetsString }}></script>
-      </React.Fragment>
-    )}
-  </React.Fragment>
-)
-
-Stylesheets.defaultProps = {
-  stylesheets: [],
-  asyncStylesheets: []
-}
-
-export default Stylesheets

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components/Shell'

package/src/lib/flattenOpenGraphData.ts

@@ -1,24 +0,0 @@
-// Flattens a nested object into an array of key/value pairs
-// { foo: { bar: { baz: 123 } } } => [['foo:bar:baz', 123]]
-
-export type TOpenGraphData = {
-  [key: string]: any | any[] | TOpenGraphData
-}
-
-export default function flattenData(data: TOpenGraphData, prefix?: string): Array<string[]> {
-  const output = []
-
-  for (const [key, value] of Object.entries(data)) {
-    const property = prefix ? `${prefix}:${key}` : key
-
-    if (value && value.constructor === Object) {
-      output.push(...flattenData(value, property))
-    } else if (Array.isArray(value)) {
-      output.push(...value.map((value) => [property, value]))
-    } else {
-      output.push([property, value])
-    }
-  }
-
-  return output
-}

package/src/lib/formatAttributeNames.ts

@@ -1,36 +0,0 @@
-export type TAttributeData = {
-  [key: string]: string | number | boolean
-}
-
-export default function formatAttributeNames(data: TAttributeData = {}) {
-  const output = {}
-
-  for (const [key, value] of Object.entries(data)) {
-    const hyphenatedKey = hyphenateString(key)
-
-    // Let's render boolean data attributes properly
-    // as per https://github.com/Financial-Times/dotcom-page-kit/issues/370
-    if (hyphenatedKey.startsWith('data-') && typeof value === 'boolean') {
-      // Where react is concerned, a `true` boolean data attribute
-      // is one where the attribute value is an empty string (because
-      // it is not possible to render an attribute without a value),
-      // and a `false` boolean data attribute is one where the attribute
-      // has not been specified altogether
-      if (value) {
-        output[hyphenatedKey] = ''
-      }
-    } else {
-      output[hyphenatedKey] = value
-    }
-  }
-
-  return output
-}
-
-function hyphenateChar(char) {
-  return '-' + char.toLowerCase()
-}
-
-function hyphenateString(prop) {
-  return prop.replace(/([A-Z])/g, hyphenateChar)
-}

package/src/lib/getResourceType.ts

@@ -1,34 +0,0 @@
-import path from 'path'
-import url from 'url'
-
-const StyleFiles = new Set(['.css'])
-
-const ScriptFiles = new Set(['.js', '.mjs'])
-
-const ImageFiles = new Set(['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'])
-
-export default (file: string): string => {
-  // Always parse the file so that we can ignore any domain names, query strings etc.
-  // Node's old URL API is able to parse anything inc. filenames, paths, and URLs.
-  const { pathname } = url.parse(file)
-
-  const extension = path.extname(pathname)
-
-  if (StyleFiles.has(extension)) {
-    return 'style'
-  }
-
-  if (ScriptFiles.has(extension)) {
-    return 'script'
-  }
-
-  if (ImageFiles.has(extension)) {
-    return 'image'
-  }
-
-  if (file.includes('font_format=woff')) {
-    return 'font'
-  }
-
-  throw Error(`Unknown filename extension "${extension}`)
-}

package/src/lib/imageServiceIconURL.ts

@@ -1,24 +0,0 @@
-import querystring from 'querystring'
-
-function imageServiceIconURL(image: string, size: number, format = 'png'): string {
-  const serviceURL = 'https://www.ft.com/__origami/service/image/v2/images/raw/'
-
-  const serviceParameters = {
-    source: 'update-logos',
-    format: format,
-    width: size,
-    height: size
-  }
-
-  // Do not add width and height if format is svg because svg files scale automatically
-  if (format === 'svg') {
-    delete serviceParameters.width
-    delete serviceParameters.height
-  }
-
-  const queryString = querystring.stringify(serviceParameters)
-
-  return `${serviceURL}${encodeURIComponent(image)}?${queryString}`
-}
-
-export default imageServiceIconURL

package/src/lib/loadAsyncStylesheets.ts

@@ -1,27 +0,0 @@
-/*
-  Load stylesheets asyncronously. See: 
-   • https://www.filamentgroup.com/lab/load-css-simpler/
-   • https://w3c.github.io/preload/#example-5
-  
-  @NOTE: This is in ES5 syntax, because it's not compiled, because it's server-side code. 
-  (You don't need to compile server-side code because you get to set whichever version of node you want.)
-  Its stringified and given to the client via "dangerouslySetInnerHTML" in a <script> tag.
-  Because it runs in the client, it needs to be ES5 so it's compatible with older browsers.
-*/
-function loadAsyncStylesheets() {
-  var currentScript = document.scripts[document.scripts.length - 1]
-  var stylesheets = currentScript.getAttribute('data-stylesheets').split(',')
-
-  for (var i = 0, len = stylesheets.length; i < len; i++) {
-    var link = document.createElement('link')
-    link.href = stylesheets[i]
-    link.rel = 'stylesheet'
-    link.media = 'print' // <-- 'print' is intentional; on load, it changes to 'all'.
-    link.onload = function (event) {
-      var target = event.target as HTMLLinkElement
-      target.media = 'all'
-    }
-    currentScript.parentNode.insertBefore(link, currentScript)
-  }
-}
-export default '(' + loadAsyncStylesheets.toString() + ')()'