returning debug macro statements results in an error

[toranb]

I started the upgrade to ember-cli-babel v6.6.0 for one of my addons recently and found that when I destructure assert from @ember/debug the compiled output omits it for some odd reason. I'm writing to better understand if what I found is truly a regression of some kind or just me doing something I shouldn't be (and getting away with it prior to the v6.6.0 upgrade).

The import below is what doesn't work for dev or test builds any longer

import { assert } from '@ember/debug';

note: before using ember-cli-babel v6.6.0 I would pull assert from the global Ember

import Ember from 'ember';

const { assert } = Ember;

The difference is that prior to this import change and ember-cli-babel v6.6.0 my test build would run and assert would work as designed. Now I get an error saying assert is not defined when the test runs.

note: in dev tools when I capture this failure at test time and look at the imports / variable defs at the top of my module I don't see assert

Notice in the actual source for that file I have assert imported

I'm using ember-cli 2.13.0, ember 2.13.3 with node 6.10.2 and ember-cli-babel v6.6.0. For a full and complete repro checkout the branch I have up for the PR that bumps it to ember-cli-babel v6.6.0

[rwjblue]

The fact that the assert import is removed is not the issue, instead there is a problem with the prod/debug stripping plugin that we need to track down. Can you share the full transpiled output of embed-redux/connect module?

I currently suspect that computedReduxProperty using implicit returning arrow functions is the issue (Specifically, we don't handle the return assert(....) correctly). A work around for now that you could test would be to change computedReduxProperty's set into a block form arrow function (or plain function).

[toranb]

@rwjblue understood -thanks again for hearing me out (sorry to create such a verbose issue so early in the morning). Below you will find the full transpiled source as requested

define('ember-redux/connect', ['exports', 'redux'], function (exports, _redux) {
  'use strict';

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

  var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
    return typeof obj;
  } : function (obj) {
    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
  };

  var run = Ember.run;
  var inject = Ember.inject.service;
  var Component = Ember.Component;
  var computed = Ember.computed;
  var getProperties = Ember.getProperties;
  var defineProperty = Ember.defineProperty;

  function changedKeys(props, newProps) {
    return Object.keys(props).filter(function (key) {
      return props[key] !== newProps[key];
    });
  }

  function computedReduxProperty(key, getProps) {
    return computed({
      get: function get() {
        return getProps()[key];
      },
      set: function set() {
        return assert('Cannot set redux property "' + key + '". Try dispatching a redux action instead.');
      }
    });
  }

  function getAttrs(context) {
    var keys = Object.keys(context.attrs || {});
    return getProperties(context, keys);
  }

  function wrapStateToComputed(stateToComputed) {
    return function () {
      var result = stateToComputed();
      if (typeof result === 'function') {
        stateToComputed = result;
        return stateToComputed();
      }
      return result;
    };
  }

  exports.default = function (stateToComputed) {
    var dispatchToActions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
      return {};
    };

    return function (IncomingComponent) {
      var WrappedComponent = IncomingComponent || Component;
      return WrappedComponent.extend({
        redux: inject('redux'),

        init: function init() {
          var _this = this;

          var redux = this.get('redux');

          if (stateToComputed) {
            var getProps = wrapStateToComputed(function () {
              return stateToComputed.call(_this, redux.getState(), getAttrs(_this));
            });
            var props = getProps();

            Object.keys(props).forEach(function (key) {
              defineProperty(_this, key, computedReduxProperty(key, function () {
                return props;
              }));
            });

            this._handleChange = function () {
              var newProps = getProps();
              if (props === newProps) return;

              var notifyProperties = changedKeys(props, newProps);

              props = newProps;

              if (notifyProperties.length > 0) {
                run.join(function () {
                  notifyProperties.forEach(function (name) {
                    return _this.notifyPropertyChange(name);
                  });
                });
              }
            };

            this.unsubscribe = redux.subscribe(function () {
              _this._handleChange();
            });
          }

          if (typeof dispatchToActions === 'function') {
            this.actions = Object.assign({}, this.actions, dispatchToActions.call(this, redux.dispatch.bind(redux)));
          }

          if ((typeof dispatchToActions === 'undefined' ? 'undefined' : _typeof(dispatchToActions)) === 'object') {
            this.actions = Object.assign({}, this.actions, (0, _redux.bindActionCreators)(dispatchToActions, redux.dispatch.bind(redux)));
          }

          this._super.apply(this, arguments);
        },
        didUpdateAttrs: function didUpdateAttrs() {
          this._super.apply(this, arguments);
          if (this._handleChange) {
            this._handleChange();
          }
        },
        willDestroy: function willDestroy() {
          this._super.apply(this, arguments);
          if (this.unsubscribe) {
            this.unsubscribe();
            this.unsubscribe = null;
          }
        }
      });
    };
  };
});

[rwjblue]

OK, thanks for sharing. My suggested work around should work and avoid the errors you are seeing:

function computedReduxProperty(key, getProps) {
  return computed({
    get: () => getProps()[key],
    set: () => { assert(`Cannot set redux property "${key}". Try dispatching a redux action instead.`); }
  });
}

I have created ember-cli/babel-plugin-debug-macros#46 to track fixing the underlying babel plugin.

[toranb]

@rwjblue thanks for both the workaround and opening the real issue w/ babel-plugin-debug-macros