[experimental] avoid initial double render

[GavinJoyce]

This is an experimental approach for #18 which avoids an initial double render when using InboundActions.

Instead of InboundActions, there is now a Sender and Receiver mixin. actionReceiver is no longer needed and we no longer set anything in an afterRender (which was the cause of the double render).

import Em from 'ember';
import Sender from 'ember-component-inbound-actions/sender';

export default Em.Controller.extend(Sender, {
  actions: {
    reset: function() {
      //the old way
      this.get('addressForm').send('reset');

      //the new (experimental) way
      this.sendTo('name-form', 'reset');
    }
  }
});

{{name-form}} <!-- new way -->
{{address-form actionReceiver=addressForm}} <!-- old way -->

<button id="reset-from-action" {{action 'reset'}}>Reset</button>

//name-form.js

import Em from 'ember';
import Receiver from 'ember-component-inbound-actions/receiver';

export default Em.Component.extend(Receiver, {
  name: 'Larry David',
  actions: {
    reset() {
      this.set('name', '');
    }
  }
});

If there are multiple components with the same name in a template, they can be given unique actionReceiverNames:

{{random-color-component
  actionReceiverName='left'
  onClick=(action 'changeRightBackground')
}}

{{random-color-component
  actionReceiverName='right'
  onClick=(action 'changeLeftBackground')
}}

import Em from 'ember';
import Sender from 'ember-component-inbound-actions/sender';

export default Em.Component.extend(Sender, {
  actions: {
    changeLeftBackground() {
      this.sendTo('left', 'changeColor');
    },

    changeRightBackground() {
      this.sendTo('right', 'changeColor');
    },
  }
});

TODO:

• handle nested components
• create a send-to helper?
• support custom names?
• rename actionReceiverName to sendToName
• tests
  • acceptance
  • ensure no memory leaks
• working with ember canary

/fyi @kellyselden I'd be interested to hear your thoughts on this approach

[nolaneo]

Should this fail if there's already a registered receiver for the component name?

I'm imagining a scenario where you have something like:

{{random-color-component onClick=(action foo)}}

...

Does the second component overwrite the first here?
// Many moons later another engineer adds 
{{random-color-component onClick=(action bar)}}

[nolaneo]

Or is this scenario handled elsewhere?

[GavinJoyce]

It currently does overwrite it. 👍 on raising an assertion, we can instruct to use a custom sendToName

[GavinJoyce]

Another alternative is to map the name to multiple instances and send the action to all matching ones that are registered.

[kellyselden]

I like the flexibility of keeping lists mapped to names:

{{my-component sendToName="foo"}}
{{my-component sendToName="foo"}}
{{my-component sendToName="bar"}}
{{my-component sendToName="bar"}}

Thus "name" becomes a group instead of a key.

[kellyselden]

I like the idea of a {{send-to}} helper. Then you would avoid the Receiver mixin on controllers.

[kellyselden]

I like this approach. Code looks good to me.

[kellyselden]

Now that #24 landed, you should update the ember version badge in the readme.