withMixins

When you actually use mixins to create components or features, you'll likely want to inherit from multiple mixins. To do this, you would do it like this:

import { Component } from '@geajs/core';

class MyComponent extends withXxx(withYyy(withZzz(Component))) {
    // ...
}

However, this results in nested parentheses, making the code very hard to read and difficult to write. To solve this problem, the @geastack-community/utils package defines a function called withMixins.

Using withMixins transforms the previous code into a more readable and intuitive style, as shown below:

import { Component } from '@geajs/core';
import { withMixins } from '@geastack-community/utils';

class MyComponent extends withMixins(withXxx, withYyy, withZzz, Component) {
    // ...
}

There are no nested parentheses; you simply list the mixins you want to apply and pass the base object (such as Component) as the last argument. Since recursive type definitions are handled internally, this approach balances ease of writing with readability, enhancing the developer experience.

Execution Order

Mixins are applied from right to left, equivalent to withXxx(withYyy(withZzz(Base))). In this example, withZzz is applied first, and withXxx last.

Trade-offs in Optimization

While using mixins provides type safety and functionality extensions, the trade-off is that the code will safely fall back to the compiler’s optimization tier. However, since Gea’s standard class components are sufficiently lightweight and fast on their own, it’s safe to say that the benefits of functionality and reusability far outweigh any drawbacks in general app development.