@jenkins-cd/js-extensions/dist/ExtensionRenderer.js

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var React = require('react');
var ReactDOM = require('react-dom');
var ContextBridge = require('./ContextBridge').ContextBridge;
var importedExtensionStore = require('./ExtensionStore.js').instance;
var importedResourceLoadTracker = require('./ResourceLoadTracker').instance;

/**
 * Renderer for react component extensions for which other plugins can provide an implementing Component.
 */

var ExtensionRenderer = function (_React$Component) {
    _inherits(ExtensionRenderer, _React$Component);

    function ExtensionRenderer() {
        _classCallCheck(this, ExtensionRenderer);

        // Initial state is empty. See the componentDidMount and render functions.
        var _this = _possibleConstructorReturn(this, (ExtensionRenderer.__proto__ || Object.getPrototypeOf(ExtensionRenderer)).call(this));

        _this.state = { extensions: null };
        return _this;
    }

    _createClass(ExtensionRenderer, [{
        key: 'componentWillMount',
        value: function componentWillMount() {
            this._setExtensions(this.props);
        }
    }, {
        key: 'componentDidMount',
        value: function componentDidMount() {
            ExtensionRenderer.resourceLoadTracker.onMount(this.props.extensionPoint);
            this._renderAllExtensions();
        }
    }, {
        key: 'componentWillUpdate',
        value: function componentWillUpdate(nextProps, nextState) {
            if (!nextState.extensions) {
                this._setExtensions(nextProps);
            }
        }
    }, {
        key: 'componentDidUpdate',
        value: function componentDidUpdate() {
            this._renderAllExtensions();
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            this._unmountAllExtensions();
        }

        /**
         * Force a reload and re-render of all extensions registered with this ExtensionPoint.
         * Useful if the props (such as 'filter') have changed and need to be re-evaluated.
         */

    }, {
        key: 'reloadExtensions',
        value: function reloadExtensions() {
            // triggers a reload of extensions via componentWillUpdate
            this.setState({
                extensions: null
            });
        }
    }, {
        key: '_setExtensions',
        value: function _setExtensions() {
            var _this2 = this;

            ExtensionRenderer.extensionStore.getExtensions(this.props.extensionPoint, this.props.filter, function (extensions) {
                return _this2.setState({ extensions: extensions });
            });
        }

        /**
         * This method renders the "leaf node" container divs, one for each registered extension, that live in the same
         * react hierarchy as the &lt;ExtensionRenderer&gt; instance itself. As far as our react is concerned, these are
         * childless divs that are never updated. Actually rendering the extensions themselves is done by
         * _renderAllExtensions.
         */

    }, {
        key: 'render',
        value: function render() {
            var extensions = this.state.extensions;

            if (!extensions) {
                // Rendered before extension data is available - if data is loaded but no
                // extensions are found, we will get [] rather than null, and will want to
                // render an empty wrappingElement, or possibly "default" children
                return null;
            }

            var newChildren = [];

            // Add a <div> for each of the extensions. See the __renderAllExtensions function.
            for (var i = 0; i < extensions.length; i++) {
                newChildren.push(React.createElement('div', { key: i }));
            }

            if (newChildren.length === 0 && this.props.children) {
                newChildren = this.props.children;
            }

            var _props = this.props,
                className = _props.className,
                extensionPoint = _props.extensionPoint,
                wrappingElement = _props.wrappingElement;


            var classNames = ['ExtensionPoint', extensionPoint.replace(/\.+/g, '-')];

            if (className) {
                classNames.push(className);
            }

            var newProps = {
                className: classNames.join(' ')
            };

            return React.createElement(wrappingElement, newProps, newChildren);
        }

        /**
         * For each extension, we have created a "leaf node" element in the DOM. This method creates a new react hierarchy
         * for each, and instructs it to render. From that point on we have a separation that keeps the main app insulated
         * from any plugin issues that may cause react to throw while updating. Inspired by Nylas N1.
         */

    }, {
        key: '_renderAllExtensions',
        value: function _renderAllExtensions() {
            var extensions = this.state.extensions;

            if (!extensions || extensions.length === 0) {
                // No extensions loaded. Return early because we may have default DOM children.
                return;
            }

            // NB: This needs to be a lot cleverer if the list of extensions for a specific point can change;
            // We will need to link each extension with its containing element, in some way that doesn't leak :) Easy in
            // browsers with WeakMap, less so otherwise.
            var el = ReactDOM.findDOMNode(this);
            if (el) {
                var children = el.children;
                if (children) {

                    // The number of children should be exactly the same as the number
                    // of extensions. See the render function for where these are added.
                    if (extensions.length !== children.length) {
                        console.error('Unexpected error in Jenkins ExtensionRenderer rendering (' + this.props.extensionPoint + '). Expecting a child DOM node for each extension point.');
                        return;
                    }
                    // render each extension on the allocated child node.
                    for (var i = 0; i < extensions.length; i++) {
                        this._renderExtension(children[i], extensions[i]);
                    }
                }
            }
        }

        /** Actually render an individual extension */

    }, {
        key: '_renderExtension',
        value: function _renderExtension(element, extension) {
            var component = React.createElement(extension, this.props);
            try {
                var contextValuesAsProps = {
                    config: this.context.config,
                    router: this.context.router
                };
                var bridgedComponent = React.createElement(ContextBridge, contextValuesAsProps, component);
                ReactDOM.render(bridgedComponent, element);
            } catch (e) {
                console.log("error rendering", extension.name, e);

                var errorDiv = React.createElement(
                    'div',
                    { className: 'error alien' },
                    'Error rendering ',
                    extension.name,
                    ': ',
                    e.toString()
                );
                ReactDOM.render(errorDiv, element);
            }
        }

        /**
         * Clean up child extensions' react hierarchies. Necessary because they live in their own react hierarchies that
         * would otherwise not be notified when this is being unmounted.
         */

    }, {
        key: '_unmountAllExtensions',
        value: function _unmountAllExtensions() {

            var extensions = this.state.extensions;

            if (!extensions || extensions.length === 0) {
                // No extensions loaded. Return early because we may have default DOM children which react
                // will unmount normally
                return;
            }

            var thisNode = ReactDOM.findDOMNode(this);
            var children = thisNode ? thisNode.children : null;
            if (children && children.length) {
                for (var i = 0; i < children.length; i++) {
                    var child = children[i];
                    try {
                        if (child) {
                            ReactDOM.unmountComponentAtNode(child);
                        }
                    } catch (err) {
                        // Log and continue, don't want to stop unmounting children
                        console.log("Error unmounting component", child, err);
                    }
                }
            }
        }
    }]);

    return ExtensionRenderer;
}(React.Component);

exports.default = ExtensionRenderer;


ExtensionRenderer.defaultProps = {
    wrappingElement: "div"
};

ExtensionRenderer.propTypes = {
    children: React.PropTypes.node,
    extensionPoint: React.PropTypes.string.isRequired,
    filter: React.PropTypes.any,
    wrappingElement: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element])
};

ExtensionRenderer.contextTypes = {
    router: React.PropTypes.object,
    config: React.PropTypes.object
};