react-head/dist/index.esm.js

SSR-ready Document Head management for React 16+

import { createElement, Component, createContext } from 'react';
import _extends from '@babel/runtime/helpers/builtin/es6/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/builtin/es6/objectWithoutProperties';
import _inheritsLoose from '@babel/runtime/helpers/builtin/es6/inheritsLoose';
import { createPortal } from 'react-dom';
import PropTypes from 'prop-types';

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

var _React$createContext = 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 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 = createElement(Tag, rest);
        return createPortal(ClientComp, document.head);
      }

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

  return HeadTag;
}(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 createElement(Provider, {
      value: this.state
    }, this.props.children);
  };

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

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

export { Title, Style, Meta, Link, HeadTag, HeadProvider };