Skip to content

Stages & Components: Creating Single Stage

What are we learning here?

Stages & Components Relations:                                 ┌──────────────────────┐
                                                ┌─optional────►│ Component Element(s) ├ ─ ┐
┌───────────────┐        ┌───────────┐          │              └──────────────────────┘   │
│ Initial Stage ├─load──►│ Component ├─provides─┤                                         │
└───────────────┘        └───────────┘          │               ┌──────────┐              │
                               ▲                └─at least one─►│ Stage(s) │◄─ create ─ ─ ┘
                               │                                └────┬─────┘
                               │                                     │
                               └ ─ ─ ─ ─ ─ ─ ─ ─ load ─ ─ ─ ─ ─ ─ ─ ─┘
System Hierarchy:

► Initial Stage
  └► Root Component
     └► Stage "main"
        └► Application
           └► Stage "main"
              └► Widget
                 └► Component Element "main"
                    └► Custom Stage
  • Create stages with registerStage()

In each component which provide a component element (for example, in the widget component we know) can we create further stages.

As we know, in a component element you can add any HTML elements. Each of these HTML elements can be defined as a stage.

Let's add an element into our HTML structure in which we create a stage:

src/demo/apps/component-basics/content.ejs.html

1
2
3
4
5
6
7
<div>
  <h2><%= locals.myHeader %></h2>
  <div class="mt-2 card">
    <div class="card-header">Loading Components</div>
    <div class="card-body"><div data-role="stage"></div></div>
  </div>
</div>

We now use the method registerStage() to convert the element taged with data-role=stage into a stage.

src/demo/apps/component-basics/content.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { Widget } from "@codecoupler/cc-ui";
import template from "./content.ejs.html";
import style from "./content.module.css";
export default class extends Widget {
  myHeader = "Component Basics";
  async start() {
    let tpl = template({
      myHeader: this.myHeader
    });
    this.element.replaceWith(tpl);
    this.element.classList.add(style.widget);
    this.registerStage(this.element.querySelector("[data-role=stage]"));
  }
}

Since the "stage" is still empty, you can't see anything special yet.

Convert a component element to a stage

You can even convert the entire component element into a stage if necessary:

this.registerStage(this.element);

Stages and flexbox

We do not use the <div class="card-body"> to create the stage because this is a flexbox child which collide with the flexbox handling of a stage and would collapse to a zero height.

We will explain details of that topic later.