How can I control the order on what tick methods are executed across components?

Question

I have multiple components that define a tick method and I need to control the execution order. With the following components:

AFRAME.registerComponent('component-a', {    
  tick: function () { console.log('ComponentA'); }
});

AFRAME.registerComponent('component-b', {    
  tick: function () { console.log('ComponentB'); }
});

AFRAME.registerComponent('component-c', {    
  tick: function () { console.log('ComponentC'); }
});

And the following entity:

<a-entity component-a component-b component-c></a-entity> 

I want to guarantee the following tick order: component-a, component-b, component-c

Answer 1

A-Frame does not have a built-in way to define tick execution order. Ticks will execute in the order in what components are initialized. One can easily control the execution by having a manager component that calls the components methods in the desired order:

AFRAME.registerComponent('manager', {    
  tick: function () {
    const el = this.el;
    el.components['component-a'].print();
    el.components['component-b'].print();
    el.components['component-c'].print();
  }
});

AFRAME.registerComponent('component-a', {    
  print: function () { console.log('ComponentA'); }
});

AFRAME.registerComponent('component-b', {    
  print: function () { console.log('ComponentB'); }
});

AFRAME.registerComponent('component-c', {    
  print: function () { console.log('ComponentC'); }
});

On the following entity:

<a-entity manager component-a component-b component-c>