Emit event when component has been removed

[mayognaise]

This PR is for this issue:
#1431

Additionally it's been attached name of component

[donmccurdy]

Might be helpful to attach the name of the component, as well –

this.emit('componentremoved', {name: name});

[mayognaise]

@donmccurdy great idea let me add it.

[ngokevin]

Can you write a quick unit test for this in a-entity.test.js? Thanks!

[mayognaise]

@ngokevin hmm actually the test hasn't been passed.. the event is not called :/ do you think it's because it's already removed?

  test('emits `componentremoved` event when element itself has been removed', function (done) {
    var el = document.createElement('a-entity');
    var parentEl = this.el;
    el.object3D = new THREE.Mesh();
    el.addEventListener('componentremoved', function () {
      done();
    });
    el.addEventListener('loaded', function () {
      el.parentNode.removeChild(el);
    });
    parentEl.appendChild(el);
  });

[ngokevin]

Don't need to create a Mesh, you should set a random component, use removeAttribute on it, and check the event detail has the component name. You can use the existing entity created in the setup this.el

[mayognaise]

@ngokevin using entityFactory();?
and why using removeAttribute ?
im afraid to ask if you give me an example... 😨 sorry im not good at this..

[ngokevin]

In the test suite, there should already be a setup that calls entityFactory for you.

removeAttribute detaches components, which is what you're testing here. removeChild would detach all components I guess, but it's simpler to test with removeAttribute.

[ngokevin]

ex:

  test('emits `componentremoved` event when element itself has been removed', function (done) {
    var el = this.el;
    el.setAttribute('geometry');
    el.addEventListener('componentremoved', function (evt) {
      assert.equal(evt.detail.name, 'geometry');
      done();
    });
    el.removeAttribute('geometry');
  });

[mayognaise]

@ngokevin ohh i see
so this doesn’t mean when the a-entity has been removed from dom, correct?

[ngokevin]

yes just testing component detach

[mayognaise]

@ngokevin i see. componentremoved hasn't been fired.. 😭
I may be doing a wrong PR, but what I expected is to know when a-entity has removed from shader side, like component has remove function.

[ngokevin]

el.setAttribute('geometry', ''); fixed this line

[ngokevin]

you might want something for detachedCallback, but this PR is ok too

[ngokevin]

I'll check this PR out later and try to add a proper test.

[mayognaise]

@ngokevin the test has been passed 🎉

[dmarcos]

should we pass the entity as well?

[dmarcos]

not sure if we should pass it. it would be done this way:
this.emit('componentremoved', { el: this, name: name });

[mayognaise]

@dmarcos sure let me add el

[donmccurdy]

would it already be available as event.target? that seems like enough if so, otherwise maybe helpful to add it.

[mayognaise]

ah true, let me check

[mayognaise]

This has passed. so maybe dont we need to add it?

  test('emits `componentremoved` event when element itself has been removed', function (done) {
    var el = this.el;
    el.setAttribute('geometry', 'primitive:plane');
    el.addEventListener('componentremoved', function (event) {
      assert.equal(event.target, el);
      assert.equal(event.detail.name, 'geometry');
      done();
    });
    el.removeAttribute('geometry');
  });

[dmarcos]

Nice work. @mayognaise thanks!