Stages & Components: System

Everything starts by initializing a stage and load a component into this stage.

What are we learning here?

• An initial stage can be created with new Stage()
• How to create an initial component
• A component can be loaded with load(ComponentType)

The best choice for an initial component is a system component which extends the base Component class. We will create a system component by putting this into a file named system.js file:

src/system.js

import { Component } from "@codecoupler/cc-ui";
export default class extends Component {}

Now we will import our system component and load it into a new stage. This will be done it in the index.js file:

src/index.js

import RootSystem from "./system";
import { Stage } from "@codecoupler/cc-ui";
new Stage().load(RootSystem).then((system) => {
  console.info("System is Ready!", system.id);
});

Start Definition Object vs Shortcut Signature

We will use here a signature of the load method which expects only one Component. This is just a shortcut signature. The load method normally expects a so called start definition object. This would look like:

load({
  component: RootSystem
})

You should now see the message `System is Ready!" in the console with a random id. In the browser you will see absolutely nothing.

A component extended from Component do not have any no visual representation. So one might ask why we use such a component?

Well, the root component, i.e. the first component that is loaded in the initial stage, has a special meaning. Each child component has a fixed anchor point that can always be reached via a fixed expression.

This can be used, for example, to share dataSources between multiple components, or to enable communication between components. In the root component you can load stylesheets and prepare the main layout. Of course, any other component can be used as the root component, but it might not make as much sense.

Let's add a error handler at this point. So we will see what is going wrong in case of an error in the next steps:

src/index.js

import RootSystem from "./system";
import { Stage, ComponentInitError } from "@codecoupler/cc-ui";
new Stage()
  .load(RootSystem)
  .then((system) => {
    console.info("System is Ready!", system.id);
  })
  .catch((e) => {
    if (e instanceof ComponentInitError) {
      console.info("Error was thrown from component", e.component.id);
    }
    console.error(e);
  });