Stages

In the previous examples, we’ve already seen stages. Now it’s time to explain what they are and how they work.

Stages are useful when you need to control the priority of starting containers.
In real applications, some things are more important, and some are less important.

It’s a good idea to load and start important things first, and then start the less important ones.
This helps your app start in the right priority and feel better for the user.

Each stage has a name and a list of containers to start. The stages run in order, so you can decide which containers start first and which start next.

Analogy from Cooking

Imagine you’re preparing a meal. You need to make the main course and dessert.

It’s important to start with the main course because it takes more time to cook and people are usually hungry for it first.
Once the main course is ready, you can start making the dessert.

Example

import { compose, createContainer } from '@grlt-hub/app-compose';

const mainCource = createContainer({
  id: 'pizza',
  domain: 'dish',
  start: () => {
    console.log('pizza is ready');

    return { api: { value: 'pizza' } };
  },
});

const dessert = createContainer({
  id: 'dessert',
  domain: 'dish',
  start: () => {
    console.log('dessert is ready');

    return { api: { value: 'dessert' } };
  },
});

const { up } = await compose({
  stages: [
    // This stage runs first.
    // The main course (pizza) will start here.
    ['first', [mainCource]],
    // This stage runs after the first.
    // The dessert will start only when the first stage is done.
    ['then', [dessert]],
  ],
});

up();

When you run this code, you should see the following output in the console:

> npm start
pizza is ready
dessert is ready

Try it