Component Registry

Every component have at least one component registry with the id "main". You can add more registries with registerRegistry(Id). A registry basically predefine component start objects with a fixed id and target stage. Components can be organized hierarchical.

You can even define options, levels and all other start definition object properties that you use to load a component.

The main registry can be referenced with this.registry or more verbose this.getRegistry("main").

What are we learning here?

• Using the Component Registry

The idea behind of a component registry is a central point where components will be only registered and not loaded. Other components can reference to this registry and load applications if necessary.

A good place to define a registry is of course in the root component. All other compopnents can easily reference to the root component.

Let us add all our application we have write so far into the main registry of our root component defined in system.js. Because such a registry can become very large we will outsource the code in a separate file:

src/apps.js

import JSWidgetBasics from "./demo/apps/widget-basics";
import JSWidgetSingleRoot from "./demo/apps/single-root";
import JSCanvasVsWidgetScroll from "./demo/apps/canvas-vs-widget-scroll";
import JSCanvasVsWidgetLayout from "./demo/apps/canvas-vs-widget-layout";
import JSSimpleBox from "./demo/apps/simple-box";
import JSStagesFlexbox from "./demo/apps/stages-flexbox";
import JSStageLevels from "./demo/apps/stage-levels";
import VueWidgetBasics from "./demo/apps/widget-basics-vue";
import JSLayoutComponent from "./demo/apps/layout-component";
export default [
  {
    name: "Widget Basics",
    iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
    items: [
      {
        name: "JavaScript",
        iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
        items: [
          { id: "JSWidgetBasics", component: JSWidgetBasics },
          { id: "JSWidgetSingleRoot", component: JSWidgetSingleRoot }
        ]
      },
      {
        name: "Vue.js",
        iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
        items: [{ id: "VueWidgetBasics", component: VueWidgetBasics }]
      }
    ]
  },
  {
    name: "Canvas, Widget, Box",
    iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
    items: [
      {
        name: "Canvas vs Widget",
        iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
        items: [
          {
            id: "JSCanvasVsWidgetScroll",
            component: JSCanvasVsWidgetScroll
          },
          {
            id: "JSCanvasVsWidgetLayout",
            component: JSCanvasVsWidgetLayout
          }
        ]
      },
      { id: "JSSimpleBox", component: JSSimpleBox }
    ]
  },
  { id: "JSStagesFlexbox", component: JSStagesFlexbox },
  { id: "JSStageLevels", component: JSStageLevels },
  { id: "JSLayoutComponent", component: JSLayoutComponent }
];

We will use the init() method to add the components structure to the registry.

Please remove the lines import TestApp from "./apps/demo/button-toolbar.js"; and the function boot() completely.

src/system.js

import { Component, Flexbox } from "@codecoupler/cc-ui";
import LoadingComponents from "./demo/widgets/loading-components";
import apps from "./apps";
export default class extends Component {
  async init() {
    this.registry.add(apps);
  }
  async start() {
    await this.stage.load(Flexbox, {
      "@codecoupler": {
        flexbox: {
          root: {
            type: "column",
            content: [
              { type: "stage", id: "system-top" },
              { type: "stage", id: "$", grow: true }
            ]
          }
        }
      }
    });
    await this.getStage("system-top").load(LoadingComponents, {
      target: this
    });
  }
}

As you see a registry structure is an array of objects. Each object can have one of the following structures:

{
  name: String,       //Optional
  iconHtml: String,   //Optional
  items: Array        //Define Child Registry Items
}

{
  name: String,       //Optional
  iconHtml: String,   //Optional
  stage: String,      //Optional (default: "main")
  hidden: Boolean,    //Optional
  id: String
  component: Component
  // All other properties of a start definition object, like "options", "level" etc.
}

One of the builtin components that use a registry is called Launcher. It will display the icons of the registred components and load the component on click.

Let's add first a sidebar to our root component and load into the sidebar the launcher component:

src/system.js

import { Component, Flexbox, Launcher } from "@codecoupler/cc-ui";
import LoadingComponents from "./demo/widgets/loading-components";
import apps from "./apps";
export default class extends Component {
  async init() {
    this.registry.add(apps);
  }
  async start() {
    await this.stage.load(Flexbox, {
      "@codecoupler": {
        flexbox: {
          root: {
            type: "row",
            content: [
              {
                type: "stage",
                id: "system-sidebar",
                class: "bg-secondary text-white p-2"
              },
              {
                type: "column",
                grow: true,
                content: [
                  { type: "stage", id: "system-top" },
                  { type: "stage", id: "$", grow: true }
                ]
              }
            ]
          }
        }
      }
    });
    await this.getStage("system-top").load(LoadingComponents, {
      target: this
    });
    await this.getStage("system-sidebar").load(Launcher, {
      registry: this.registry
    });
  }
}