Runtimes

Aspects can extend multiple runtimes. That allows Aspects to have cross-runtime responsibility over a certain feature it composes. An aspect can start with a single runtime, and grow to multiple runtimes as needed.

Aspects can tap into multiple runtimes and extend their functionalities. Tapping into a runtime defined by an Aspect can be done by adding a file that matches the *.[runtime-name].runtime.* pattern.

For example, tapping into the Bit UI runtime is achieved by adding the hello-world.ui.runtime.ts. Adding the hello-world.preview.runtime.ts will also tap into the Aspect of the Bit preview runtime.

The example below, adds a new tab to the Bit UI by tapping into the UI runtime and using Component aspect as a dependency:

import { UIRuntime } from '@teambit/ui';
import { ComponentUI, ComponentAspect, ComponentContext} from '@teambit/component';

export class HelloWorldUI extends React.Component<any> {
  helloWorld() {}

  static slots = [];
  static dependencies = [ComponentAspect];
  static runtime = UIRuntime;

  static async provider([component]: [ComponentUI]) {
    // registers a new route.
    component.registerRoute({
      children: () => {
        return <div>Component Name: {component.displayName}</div>;
      },
      path: '~hello'
    });

    // register a new navigation item.
    component.registerNavigation(
      {
        href: '~hello',
        children: 'Hello'
      },
      100
    );

    return new HelloWorldUI(MyComponent);
  }
}

HelloWorldAspect.addRuntime(HelloWorldUI);
Copied

In the Aspect definition, it is possible to declare new runtimes, which would become available for other aspects to use.

For example, the below example is actually used to defined the Bit UI runtime environment:

import { Aspect, RuntimeDefinition } from '@teambit/harmony';

export const UIRuntime = new RuntimeDefinition('ui');

export const UIAspect = Aspect.create({
  id: 'teambit.ui-foundation/ui',
  dependencies: [],
  declareRuntime: UIRuntime,
});
Copied