Advertisement
crutch12

Html.tsx

Apr 16th, 2020
1,090
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import * as React from 'react';
  2. import { renderToString } from 'react-dom/server';
  3. import { HelmetData } from 'react-helmet';
  4. import { getBundles } from 'react-loadable/webpack';
  5. import { castError } from '../castError';
  6.  
  7. export interface HtmlProps {
  8.     helmet?: HelmetData;
  9.     styleTags?: string;
  10.     spriteContent?: string;
  11.     content?: string;
  12.     ssrError?: Error;
  13.     apolloState?: object;
  14.     reduxState?: object;
  15.     bundles?: ReturnType<typeof getBundles>;
  16. }
  17.  
  18. const GTMIds = {
  19.     Analytics: 'GTM-TQX7VQ',
  20.     Ads: 'GTM-TLLMLP',
  21. };
  22.  
  23. const getGTMHeadScript = (GTMId: string) => `
  24. <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  25. 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','${GTMId}');</script>
  26. <!-- End Google Tag Manager -->
  27. `;
  28.  
  29. const getGTMBodyScript = (GTMId: string) => `
  30. <!-- Google Tag Manager (noscript) -->
  31. <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=${GTMId}" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  32. <!-- End Google Tag Manager (noscript) -->
  33. `;
  34.  
  35. export const Html: React.FC<HtmlProps> = ({
  36.     helmet,
  37.     styleTags,
  38.     spriteContent,
  39.     content,
  40.     ssrError,
  41.     apolloState,
  42.     reduxState,
  43.     bundles,
  44. }) => {
  45.     return (
  46.         <html {...(helmet ? helmet.htmlAttributes.toComponent() : {})}>
  47.             <head
  48.                 dangerouslySetInnerHTML={{
  49.                     __html:
  50.                         (helmet
  51.                             ? helmet.base.toString() +
  52.                               helmet.link.toString() +
  53.                               helmet.meta.toString() +
  54.                               helmet.noscript.toString() +
  55.                               helmet.script.toString() +
  56.                               helmet.style.toString() +
  57.                               helmet.title.toString()
  58.                             : '') +
  59.                         (styleTags ? styleTags : '') +
  60.                         getGTMHeadScript(GTMIds.Analytics) +
  61.                         getGTMHeadScript(GTMIds.Ads),
  62.                 }}
  63.             />
  64.             <body
  65.                {...(helmet ? helmet.bodyAttributes.toComponent() : {})}
  66.                dangerouslySetInnerHTML={{
  67.                    __html: `${spriteContent ? spriteContent : ''}${renderToString(
  68.                        <React.Fragment>
  69.                             {ssrError ? <noscript>{castError(ssrError).userDisplayedMessage}</noscript> : null}
  70.                             <div id="root" dangerouslySetInnerHTML={{ __html: content ? content : '' }} />
  71.                             <script
  72.                                 dangerouslySetInnerHTML={{
  73.                                     __html: Object.entries({
  74.                                         /** Config part */
  75.                                         GRAPHQL_ENDPOINT: JSON.stringify(global.GRAPHQL_ENDPOINT),
  76.                                         PUBLIC_PATH: JSON.stringify(global.PUBLIC_PATH),
  77.                                         CANONICAL_ROBOTS_HOST: JSON.stringify(global.CANONICAL_ROBOTS_HOST),
  78.                                         IS_OUTPUT_APP_INFO: JSON.stringify(global.IS_OUTPUT_APP_INFO),
  79.                                         IS_SHOW_DEV_PAGES: JSON.stringify(global.IS_SHOW_DEV_PAGES),
  80.                                         BACKGROUND_VIDEO_URL: JSON.stringify(global.BACKGROUND_VIDEO_URL),
  81.                                         /** Dynamic server data part */
  82.                                         APOLLO_STATE: JSON.stringify(apolloState),
  83.                                         REDUX_STATE: JSON.stringify(reduxState),
  84.                                         SSR_ERROR: JSON.stringify(ssrError, [
  85.                                             ...Object.getOwnPropertyNames(ssrError || {}),
  86.                                             'name',
  87.                                         ]),
  88.                                     })
  89.                                         .map(([key, value]) => `window.${key}=${value};`)
  90.                                         .join(''),
  91.                                 }}
  92.                             />
  93.                             {bundles
  94.                                 ? bundles.map(bundle => (
  95.                                       <script key={bundle.id} src={`${global.PUBLIC_PATH}${bundle.file}`} />
  96.                                   ))
  97.                                 : null}
  98.                         </React.Fragment>,
  99.                     )}${getGTMBodyScript(GTMIds.Analytics)}${getGTMBodyScript(GTMIds.Ads)}`,
  100.                 }}
  101.             />
  102.         </html>
  103.     );
  104. };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement