gatsby-plugin-amp-alternative/preRenderHTML.js

A gatsby plugin for scaffolding AMP pages

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.onPreRenderHTML = void 0;

var _react = _interopRequireWildcard(require("react"));

var _minimatch = require("minimatch");

var _lodash = _interopRequireDefault(require("lodash.flattendeep"));

var _utils = require("./utils");

var _jsxFileName = "/Users/einomi/projects/opensource/gatsby-plugin-amp-alternative/src/preRenderHTML.js";

const minimatch = require("minimatch");

const ampBoilerplate = `body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}`;
const ampNoscriptBoilerplate = `body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}`;

const onPreRenderHTML = ({
  getHeadComponents,
  replaceHeadComponents,
  getPreBodyComponents,
  replacePreBodyComponents,
  getPostBodyComponents,
  replacePostBodyComponents,
  pathname
}, {
  analytics,
  stories,
  canonicalBaseUrl,
  components = [],
  includedPaths = [],
  excludedPaths = [],
  pathIdentifier = "/amp/",
  relAmpHtmlPattern = "{{canonicalBaseUrl}}{{pathname}}{{pathIdentifier}}"
}) => {
  const headComponents = (0, _lodash.default)(getHeadComponents());
  const preBodyComponents = getPreBodyComponents();
  const postBodyComponents = getPostBodyComponents();
  const isAmp = pathname && pathname.indexOf(pathIdentifier) > -1;

  if (isAmp) {
    const styles = headComponents.reduce((str, x) => {
      if (x.type === "style") {
        if (x.props.dangerouslySetInnerHTML) {
          str += x.props.dangerouslySetInnerHTML.__html;
        }
      } else if (x.key && x.key === "TypographyStyle") {
        str = `${x.props.typography.toString()}${str}`;
      }

      return str;
    }, "");
    replaceHeadComponents([/*#__PURE__*/_react.default.createElement("script", {
      async: true,
      src: "https://cdn.ampproject.org/v0.js",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 50,
        columnNumber: 7
      }
    }), /*#__PURE__*/_react.default.createElement("style", {
      "amp-boilerplate": "",
      dangerouslySetInnerHTML: {
        __html: ampBoilerplate
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 51,
        columnNumber: 7
      }
    }), /*#__PURE__*/_react.default.createElement("noscript", {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 55,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("style", {
      "amp-boilerplate": "",
      dangerouslySetInnerHTML: {
        __html: ampNoscriptBoilerplate
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 56,
        columnNumber: 9
      }
    })), /*#__PURE__*/_react.default.createElement("style", {
      "amp-custom": "",
      dangerouslySetInnerHTML: {
        __html: styles
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 61,
        columnNumber: 7
      }
    }), ...components.map((component, i) => /*#__PURE__*/_react.default.createElement("script", {
      key: `custom-element-${i}`,
      async: true,
      "custom-element": `${typeof component === "string" ? component : component.name}`,
      src: `https://cdn.ampproject.org/v0/${typeof component === "string" ? component : component.name}-${typeof component === "string" ? "0.1" : component.version}.js`,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 63,
        columnNumber: 9
      }
    })), analytics !== undefined ? /*#__PURE__*/_react.default.createElement("script", {
      async: true,
      "custom-element": "amp-analytics",
      src: "https://cdn.ampproject.org/v0/amp-analytics-0.1.js",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 75,
        columnNumber: 9
      }
    }) : /*#__PURE__*/_react.default.createElement(_react.Fragment, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 81,
        columnNumber: 9
      }
    }), stories !== undefined ? /*#__PURE__*/_react.default.createElement("script", {
      async: true,
      "custom-element": "amp-story",
      src: "https://cdn.ampproject.org/v0/amp-story-1.0.js",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 84,
        columnNumber: 9
      }
    }) : /*#__PURE__*/_react.default.createElement(_react.Fragment, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 90,
        columnNumber: 9
      }
    }), ...headComponents.filter(x => x.type !== "style" && (x.type !== "script" || x.props.type === "application/ld+json") && x.key !== "TypographyStyle" && !(x.type === "link" && x.props.rel === "preload" && (x.props.as === "script" || x.props.as === "fetch")))]);
    replacePreBodyComponents([...preBodyComponents.filter(x => x.key !== "plugin-google-tagmanager")]);
    replacePostBodyComponents(postBodyComponents.filter(x => x.type !== "script"));
  } else if (excludedPaths.length > 0 && pathname && excludedPaths.findIndex(_path => new _minimatch.Minimatch(pathname).match(_path)) < 0 || includedPaths.length > 0 && pathname && includedPaths.findIndex(_path => minimatch(pathname, _path)) > -1 || excludedPaths.length === 0 && includedPaths.length === 0) {
    replaceHeadComponents([/*#__PURE__*/_react.default.createElement("link", {
      rel: "amphtml",
      key: "gatsby-plugin-amp-amphtml-link",
      href: (0, _utils.interpolate)(relAmpHtmlPattern, {
        canonicalBaseUrl,
        pathIdentifier,
        pathname
      }).replace(/([^:])(\/\/+)/g, "$1/"),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 121,
        columnNumber: 7
      }
    }), ...headComponents]);
  }
};

exports.onPreRenderHTML = onPreRenderHTML;