Skip to content

Commit 6aea9e7

Browse files
authored
Add documentation for the before and after properties for component definitions (#5527)
Co-authored-by: Noeri Huisman <[email protected]>
1 parent e9bc24d commit 6aea9e7

File tree

1 file changed

+40
-0
lines changed

1 file changed

+40
-0
lines changed

docs/core/component.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -625,6 +625,46 @@ AFRAME.registerComponent('foo', {
625625
});
626626
```
627627
628+
### `before` / `after`
629+
630+
The `before` and `after` properties allow a component to specify when their `.tick()`
631+
and `.tock()` methods should be called in relation to other components. This is
632+
useful in cases where the component depends on the result of others. For example, a
633+
component that uses the world position of the users hands would want to run _after_ the
634+
`hand-tracking-controls` component so that the position it sees is up to date.
635+
636+
While both a `before` and a `after` constraint can be specified, only one is needed.
637+
A-Frame will automatically determine a suitable order among all registered components.
638+
In case the constraints cause an impossible situation, e.g. when one component would
639+
need to be both _before_ and _after_ another component, a warning will be logged and
640+
the resulting order is undefined.
641+
642+
Here's an example showing how to use `before` and `after`:
643+
644+
```js
645+
AFRAME.registerComponent('foo', {
646+
after: ['bar'],
647+
// ...
648+
tick: function() {
649+
console.log('Called second');
650+
}
651+
// ...
652+
});
653+
654+
AFRAME.registerComponent('bar', {
655+
before: ['foo'],
656+
// ...
657+
tick: function() {
658+
console.log('Called first');
659+
}
660+
// ...
661+
});
662+
```
663+
664+
Note that the order is global, meaning in the above example _all_ `bar` components get
665+
their `.tick()` method called before _any_ `foo` component. It does not matter if these
666+
components are on the same entity or not.
667+
628668
## Component Prototype Methods
629669
630670
### `.flushToDOM ()`

0 commit comments

Comments
 (0)