awv3/dist/session/renderer.js

⚡ AWV3 embedded CAD

'use strict';

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

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends4 = require('babel-runtime/helpers/extends');

var _extends5 = _interopRequireDefault(_extends4);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _entries = require('babel-runtime/core-js/object/entries');

var _entries2 = _interopRequireDefault(_entries);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _values = require('babel-runtime/core-js/object/values');

var _values2 = _interopRequireDefault(_values);

var _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

exports.render = render;
exports.destroy = destroy;
exports.connect = connect;
exports.buildStack = buildStack;
exports.prepare = prepare;

var _omit = require('lodash/omit');

var _omit2 = _interopRequireDefault(_omit);

var _flatten = require('lodash/flatten');

var _flatten2 = _interopRequireDefault(_flatten);

var _element = require('./element');

var _element2 = _interopRequireDefault(_element);

var _objects = require('shallow-equal/objects');

var _objects2 = _interopRequireDefault(_objects);

var _stringHash = require('string-hash');

var _stringHash2 = _interopRequireDefault(_stringHash);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var queue = _promise2.default.resolve(),
    currentId = void 0,
    frames = window.f = {};

function render(plugin, cb) {
    requestAnimationFrame(function () {
        queue = queue.then(function () {
            currentId = plugin.id;
            frames[currentId] && destroy(currentId);
            frames[currentId] = {
                stack: {},
                stateStack: [],
                order: 0,
                plugin: plugin
            };
            plugin.addElement(renderNodes(plugin, prepare(cb())));
        });
    });
}

function destroy(id) {
    var frame = frames[id];
    if (frame) {
        (0, _values2.default)(frame.stack).forEach(function (node) {
            node.unsubscribes && node.unsubscribes.forEach(function (unsub) {
                return unsub();
            });
            node.component && node.component.componentWillUnmount && node.component.componentWillUnmount();
            node.component = undefined;
            node.element.destroy();
            node.element = undefined;
            node.children = undefined;
        });
        delete frames[id];
        frame.plugin.destroyElements();
    }
}

function connect(selector) {
    return function (DecoratedComponent) {
        return function (_Component) {
            (0, _inherits3.default)(_class2, _Component);

            function _class2() {
                var _ref;

                var _temp, _this, _ret;

                (0, _classCallCheck3.default)(this, _class2);

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

                return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = _class2.__proto__ || (0, _getPrototypeOf2.default)(_class2)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
            }

            (0, _createClass3.default)(_class2, [{
                key: 'componentWillMount',
                value: function componentWillMount() {
                    var _this2 = this;

                    var oldState = {};
                    var store = this.plugin.store;
                    this.unsubscribe = store.subscribe(function () {
                        var selectedState = selector(store.getState(), _this2.props);
                        var changedKeys = void 0;
                        (0, _entries2.default)(selectedState).map(function (_ref2) {
                            var _ref3 = (0, _slicedToArray3.default)(_ref2, 2),
                                key = _ref3[0],
                                value = _ref3[1];

                            if (oldState[key] !== value) {
                                changedKeys = (0, _extends5.default)({}, changedKeys, (0, _defineProperty3.default)({}, key, value));
                                oldState[key] = value;
                            }
                        });
                        changedKeys && _this2.setState(changedKeys);
                    });
                    this.state = (0, _extends5.default)({}, this.state, selector(store.getState(), this.props));
                }
            }, {
                key: 'componentWillUnmount',
                value: function componentWillUnmount() {
                    this.unsubscribe();
                }
            }, {
                key: 'render',
                value: function render() {
                    var props = (0, _extends5.default)({}, this.props, this.state);
                    return React.createElement(DecoratedComponent, props);
                }
            }]);
            return _class2;
        }(Component);
    };
}

function buildStack(tree, target) {
    (Array.isArray(tree) ? tree : [tree]).forEach(function (child) {
        child.el && !(child.el.prototype instanceof _element2.default) && target.push(child);
        child.children && buildStack(child.children, target);
    });
}

var Component = exports.Component = function () {
    function Component(props) {
        (0, _classCallCheck3.default)(this, Component);

        this.id = currentId;
        this.plugin = frames[this.id].plugin;
        this.node;
        this.props = props || {};
        this.refs = {};
    }

    (0, _createClass3.default)(Component, [{
        key: 'dispatch',
        value: function dispatch(action) {
            this.plugin.store.dispatch(action);
        }
    }, {
        key: 'setState',
        value: function setState(props) {
            var frame = frames[this.id];
            var newState = (0, _extends5.default)({}, this.state, props);
            if (!(0, _objects2.default)(newState, this.state)) {
                this.state = newState;

                // Build component stack & construct virtual dom
                currentId = this.id;
                frame.order = this.node.order;
                buildStack(this.node.children, frame.stateStack);
                frame.stateStack = frame.stateStack.sort(function (a, b) {
                    return a.order - b.order;
                });
                this.node.children = prepare(this.render(this.node.props, this.state, this.setState.bind(this)), this.node.depth);

                frame.stateStack = [];
                renderNodes(this.plugin, this.node.children, this.node.parent, true);
            }
        }
    }]);
    return Component;
}();

function prepare(tree) {
    var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0];

    if (Array.isArray(tree)) {
        for (var i in tree) {
            tree[i] = prepare(tree[i] || {}, [].concat((0, _toConsumableArray3.default)(depth), [parseInt(i)]));
        }
    } else {
        tree.depth = [].concat((0, _toConsumableArray3.default)(depth));
        if (tree.children) tree.children = prepare(tree.children, depth);
    }
    return tree;
}

function renderNodes(plugin, node, parent) {
    var reconcile = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;

    var frame = frames[plugin.id];

    if (Array.isArray(node)) {
        return node.map(function (node) {
            return renderNodes(plugin, node, parent);
        });
    } else if (node.el) {
        var tag = node.tag + '.' + node.depth.join('.');
        var found = frame.stack[tag];
        var target = found ? found : node;
        var element = target.element;
        parent = parent || target.parent;
        var parentElem = (parent || {}).element;

        //console.log(tag, node.props, ', found: ', !!found, ', frame: ', currentId);

        if (!found) {
            frame.stack[tag] = target;
        }

        target.parent = parent;
        if (target.el.prototype instanceof _element2.default) {

            var update = (0, _extends5.default)({}, node.props, {
                children: renderNodes(plugin, node.children, target).filter(function (e) {
                    return e;
                }).map(function (e) {
                    return e.id;
                })
            });

            if (found) {
                target.element.update(update);
            } else {
                target.element = new target.el(frame.plugin, update);
            }

            target.unsubscribes && target.unsubscribes.forEach(function (unsub) {
                return unsub();
            });
            target.unsubscribes = target.handlers.map(function (handler) {
                var name = handler.charAt(2).toLowerCase() + handler.substr(3);
                return target.element.observe(function (state) {
                    return state[name];
                }, function (state, old) {
                    return node.events[handler](state, old);
                });
            });
        } else {
            target.element = renderNodes(plugin, node.children, parent);
        }

        return target.element;
    }
}

var React = {
    createElement: function createElement(el, props) {
        for (var _len2 = arguments.length, children = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
            children[_key2 - 2] = arguments[_key2];
        }

        var frame = frames[currentId];
        children = (0, _flatten2.default)(children);
        if (el.prototype instanceof _element2.default) {
            var handlers = (0, _keys2.default)(props || {}).filter(function (key) {
                return typeof props[key] === 'function' && key.startsWith('on');
            });
            var events = handlers.reduce(function (acc, val) {
                return (0, _extends5.default)({}, acc, (0, _defineProperty3.default)({}, val, props[val]));
            }, {});
            return {
                el: el,
                tag: el.name,
                props: (0, _omit2.default)(props, handlers),
                handlers: handlers,
                events: events,
                children: children
            };
        } else {
            var state = void 0;
            var trace = frame.stateStack.shift();
            var node = { el: el, tag: (0, _stringHash2.default)(el.toString()), props: props || {}, order: frame.order++ };
            //if (trace) console.log('   diff', trace.tag, node.tag);
            if (trace && trace.el === node.el && trace.tag === node.tag) {
                state = trace.component.state;
                node.order = trace.order;
            }

            node.component = new el((0, _extends5.default)({}, props, { children: children }));
            node.component.state = (0, _extends5.default)({}, node.component.state, state);
            node.component.node = node;
            node.component.componentWillMount && node.component.componentWillMount();
            node.children = node.component.render(node.component.props, node.component.state, node.component.setState.bind(node.component));
            return node;
        }
    }
};
exports.default = React;