react-head/dist/index.umd.js

SSR-ready Document Head management for React 16+

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('prop-types')) :
  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'prop-types'], factory) :
  (factory((global.ReactHead = {}),global.React,global.ReactDOM,global.PropTypes));
}(this, (function (exports,React,ReactDOM,PropTypes) { 'use strict';

  PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;

  function _extends() {
    _extends = Object.assign || function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];

        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }

      return target;
    };

    return _extends.apply(this, arguments);
  }

  function _objectWithoutProperties(source, excluded) {
    if (source == null) return {};
    var target = {};
    var sourceKeys = Object.keys(source);
    var key, i;

    for (i = 0; i < sourceKeys.length; i++) {
      key = sourceKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      target[key] = source[key];
    }

    if (Object.getOwnPropertySymbols) {
      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

      for (i = 0; i < sourceSymbolKeys.length; i++) {
        key = sourceSymbolKeys[i];
        if (excluded.indexOf(key) >= 0) continue;
        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
        target[key] = source[key];
      }
    }

    return target;
  }

  function _inheritsLoose(subClass, superClass) {
    subClass.prototype = Object.create(superClass.prototype);
    subClass.prototype.constructor = subClass;
    subClass.__proto__ = superClass;
  }

  var buildSelector = function buildSelector(obj) {
    return Object.keys(obj).map(function (k) {
      return "[" + k + "=\"" + obj[k] + "\"]";
    }).join('');
  };

  var _React$createContext = React.createContext({
    // on client we don't require HeadCollector
    list: [],
    addClientTag: function addClientTag() {
      return -1;
    },
    addServerTag: function addServerTag() {}
  }),
      Consumer = _React$createContext.Consumer,
      Provider = _React$createContext.Provider;

  var HeadTag =
  /*#__PURE__*/
  function (_React$Component) {
    _inheritsLoose(HeadTag, _React$Component);

    function HeadTag() {
      var _this;

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
      _this.state = {
        canUseDOM: false
      };
      _this.headTags = null;
      _this.index = -1;
      return _this;
    }

    var _proto = HeadTag.prototype;

    _proto.componentDidMount = function componentDidMount() {
      this.setState({
        canUseDOM: true
      });

      var _this$props = this.props,
          tag = _this$props.tag,
          children = _this$props.children,
          rest = _objectWithoutProperties(_this$props, ["tag", "children"]);

      var ssrTags = document.head.querySelector("" + tag + buildSelector(rest) + "[data-rh=\"\"]");

      if (ssrTags) {
        ssrTags.remove();
      }

      this.index = this.headTags.addClientTag(tag);
    };

    _proto.componentWillUnmount = function componentWillUnmount() {
      this.headTags.removeClientTag(this.index);
    };

    _proto.render = function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          Tag = _this$props2.tag,
          rest = _objectWithoutProperties(_this$props2, ["tag"]);

      return React.createElement(Consumer, null, function (headTags) {
        _this2.headTags = headTags;

        if (_this2.state.canUseDOM) {
          if (Tag === 'title' && headTags.list.lastIndexOf(Tag) !== _this2.index) {
            return null;
          }

          var ClientComp = React.createElement(Tag, rest);
          return ReactDOM.createPortal(ClientComp, document.head);
        }

        var ServerComp = React.createElement(Tag, _extends({
          "data-rh": ""
        }, rest));
        headTags.addServerTag(ServerComp);
        return null;
      });
    };

    return HeadTag;
  }(React.Component);
  process.env.NODE_ENV !== "production" ? HeadTag.propTypes = {
    tag: PropTypes.string.isRequired
  } : void 0;

  var HeadProvider =
  /*#__PURE__*/
  function (_React$Component) {
    _inheritsLoose(HeadProvider, _React$Component);

    function HeadProvider() {
      var _this;

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
      _this.index = -1;
      _this.state = {
        list: [],
        addClientTag: function addClientTag(tag) {
          _this.setState(function (state) {
            return {
              list: state.list.concat([tag])
            };
          });

          _this.index += 1;
          return _this.index;
        },
        removeClientTag: function removeClientTag(index) {
          _this.setState(function (state) {
            var list = state.list.concat();
            list[index] = null;
            return {
              list: list
            };
          });
        },
        addServerTag: function addServerTag(tag) {
          var headTags = _this.props.headTags;

          if (tag.type === 'title') {
            var index = headTags.findIndex(function (prev) {
              return prev.type === 'title';
            });

            if (index !== -1) {
              headTags.splice(index, 1);
            }
          }

          headTags.push(tag);
        }
      };
      return _this;
    }

    var _proto = HeadProvider.prototype;

    _proto.render = function render() {
      return React.createElement(Provider, {
        value: this.state
      }, this.props.children);
    };

    return HeadProvider;
  }(React.Component);
  process.env.NODE_ENV !== "production" ? HeadProvider.propTypes = {
    headTags: PropTypes.array.isRequired,
    children: PropTypes.node.isRequired
  } : void 0;

  var Title = function Title(props) {
    return React.createElement(HeadTag, _extends({
      tag: "title"
    }, props));
  };
  var Style = function Style(props) {
    return React.createElement(HeadTag, _extends({
      tag: "style"
    }, props));
  };
  var Meta = function Meta(props) {
    return React.createElement(HeadTag, _extends({
      tag: "meta"
    }, props));
  };
  var Link = function Link(props) {
    return React.createElement(HeadTag, _extends({
      tag: "link"
    }, props));
  };

  exports.Title = Title;
  exports.Style = Style;
  exports.Meta = Meta;
  exports.Link = Link;
  exports.HeadTag = HeadTag;
  exports.HeadProvider = HeadProvider;

  Object.defineProperty(exports, '__esModule', { value: true });

})));