motion/node_modules/motion-transform/lib/nodes/Statement.js

motion - moving development forward

'use strict';

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

var _state = require('../state');

var _state2 = _interopRequireDefault(_state);

var _helpers = require('../lib/helpers');

var _motionNiceStyles = require('motion-nice-styles');

var _motionNiceStyles2 = _interopRequireDefault(_motionNiceStyles);

var _stilr = require('../stilr');

var _stilr2 = _interopRequireDefault(_stilr);

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

exports.default = {
  exit(node) {
    if (node._motionViewParsed) return; // avoid parsing twice

    if (_state2.default.inView && node.expression && node.expression.callee && node.expression.callee.name == 'Motion.view') {
      node._motionViewParsed = true;

      // check if child tag is direct root
      const shouldStyleTagnameAsRoot = (0, _helpers.shouldStyleAsRoot)();
      const viewName = _state2.default.inView;
      const styles = _state2.default.viewStyles[viewName];

      if (!styles) return;

      let rawStyles = {};

      // turns styles babel tree into js again
      Object.keys(styles).forEach(tag => {
        const styleProps = styles[tag];
        const viewstyle = styleProps.reduce((acc, cur) => {
          // TODO this is way specific to what we extract
          // there should be a way to turn AST back into code here without rewriting babel itself
          acc[cur.key.name] = _helpers.t.isArrayExpression(cur.value) ? cur.value.elements.map(e => e.value) : _helpers.t.isUnaryExpression(cur.value) ? (cur.value.operator === '-' ? -1 : 1) * cur.value.argument.value : cur.value.value;
          return acc;
        }, {});

        (0, _motionNiceStyles2.default)(viewstyle);
        rawStyles[tag] = viewstyle;
      });

      function getSelector(viewName, tag) {
        let cleanViewName = viewName.replace('.', '-');
        tag = tag.replace(/^\$/, '');

        // styling root tag
        if (shouldStyleTagnameAsRoot && tag == _state2.default.inView.toLowerCase() || tag == '') return (0, _helpers.viewMainSelector)(cleanViewName, _helpers.options);

        // styling child view
        if (tag[0] == tag[0].toUpperCase()) return (0, _helpers.viewMainSelector)(`${ cleanViewName } .View${ tag }`, _helpers.options);

        // styling tag in view
        return (0, _helpers.viewSelector)(cleanViewName, tag, _helpers.options);
      }

      const stylesheet = _stilr2.default.create(rawStyles, {
        selector: tag => getSelector(viewName, tag)
      });

      const classNamesObject = _helpers.t.objectExpression(Object.keys(stylesheet).reduce((acc, key) => {
        acc.push(_helpers.t.property(null, _helpers.t.literal(key), _helpers.t.literal(stylesheet[key])));
        return acc;
      }, []));

      if (_helpers.options.writeStyle) _helpers.options.writeStyle(viewName, _stilr2.default.render());

      _stilr2.default.clear();

      // inline the static styles as js object for use when needing to override dynamics
      const stylesObject = _helpers.t.objectExpression(Object.keys(styles).reduce((acc, key) => {
        acc.push(_helpers.t.property(null, _helpers.t.literal(key), _helpers.t.objectExpression(styles[key])));
        return acc;
      }, []));

      // Motion.staticStyles('ViewName', {}, ``)
      const staticStyleExpr = _helpers.t.expressionStatement(_helpers.t.callExpression(_helpers.t.identifier('Motion.staticStyles'), [_helpers.t.literal(viewName), classNamesObject, stylesObject]));

      // Motion.viewRoots["Name"] = "RootElementName"
      if ((0, _helpers.shouldStyleAsRoot)()) {
        const viewRootNodeExpr = _helpers.t.expressionStatement(_helpers.t.assignmentExpression('=', _helpers.t.identifier(`Motion.viewRoots["${ viewName }"]`), _helpers.t.literal((0, _helpers.getRootTagName)())));
        return [staticStyleExpr, viewRootNodeExpr, node];
      }

      // reset
      _state2.default.inView = false;
      _state2.default.viewStyles[viewName] = {};

      return [staticStyleExpr, node];
    }
  }
};
//# sourceMappingURL=Statement.js.map