Component Registry

What are we learning here?

• Using the Component Registry

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

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

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 them 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.

The structure of a registry is an object holding component start definition objects in each key. Each start definition object can have additional properties. All of them are optional:

• authorization: Who can start this component (will be discussed later).
• stage: The stage id in what the component should be started. If not given main is the default.
• name: Visual representation of the component entry.
• iconHtml: Visual representation of the component entry.

Remark: name and iconHtml overrides the visual representation of the component itself defined in its manifest (will be discussed later).

{
    key1: {
      //  Start Definition Object with additional Properties
    },
    key2: {
      //  Start Definition Object with additional Properties
    },
    // ... and so on ...
}

If you want to define a subgroup you have to add an object with the property type: "group" and optional:

• name: Visual representation of the subgroup.
• iconHtml: Visual representation of the subgroup.

All the other properties will be handled as sub entries:

{
    subGroup: {
      type: "group",
      name: "...",
      iconHtml: "...",
      key1: {
        // Registry entry (start definition object or subgroup)
      },
      key2: {
        // Registry entry (start definition object or subgroup)
      }
    }
}

Please note the difference between the key in the registry and the optional id of a component. The id of a component will be defined in its start definition object. You can even define the same component with the same id under different keys:

{
    key1: {
      id: "the_id",
      component: SomeComponent,
      name: "Name 1",
      iconHtml: "...",
      options: {
        opt1: "First Value"
      }
    },
    key2: {
      id: "the_id",
      component: SomeComponent,
      name: "Name 2",
      iconHtml: "...",
      options: {
        opt1: "Second Value"
      }
    },
}

In the example above you can start the component with key1 or with key2. If the component was already started just the new options will be passed and the the running component will be fronted.

Implicit type in each level

When you retreive the registry data with await this.registry.get() you will see that the property type was added into every object. There are three types: root, group and component. Example:

{
  type: "root",
  key1: {
    type: "component"
  },
  subGroup: {
    type: "group",
  }
}

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

src/apps.js

import ComponentBasics from "./demo/apps/component-basics";
import ComponentBasicsVue from "./demo/apps/component-basics-vue";
import StagesFlexbox from "./demo/apps/stages-flexbox";
import StageLevels from "./demo/apps/stage-levels";
import LayoutComponent from "./demo/apps/layout-component";
import FlexboxComponent from "./demo/apps/flexbox-component";
import CanvasVsWidgetScroll from "./demo/apps/canvas-vs-widget-scroll";
import CanvasVsWidgetLayout from "./demo/apps/canvas-vs-widget-layout";
import Mockup from "./demo/apps/mockup";
export default {
  basicsJs: {
    id: "ComponentBasics",
    component: ComponentBasics
  },
  basicsVue: {
    id: "ComponentBasicsVue",
    component: ComponentBasicsVue
  },
  testing: {
    type: "group",
    stages: {
      id: "StagesFlexbox",
      component: StagesFlexbox
    },
    levels: {
      id: "StageLevels",
      component: StageLevels
    },
    widgetVsCanvas: {
      type: "group",
      layout: {
        id: "CanvasVsWidgetLayout",
        component: CanvasVsWidgetLayout
      },
      scroll: {
        id: "CanvasVsWidgetScroll",
        component: CanvasVsWidgetScroll
      }
    }
  },
  layouting: {
    type: "group",
    flexbox: {
      id: "FlexboxComponent",
      component: FlexboxComponent
    },
    layout: {
      id: "LayoutComponent",
      component: LayoutComponent
    }
  },
  mockup: {
    id: "Mockup Application",
    component: Mockup
  }
};

We will add our registry object into the main registry of our root component:

src/root.js

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

We do not see any changes but that will change quickly in the next chapter.