Architecture: Component registry

The component registry (registry.ts module) holds a mapping of component names to their respective type. e.g. "Button" -> Button.

This is needed since Angular templates on the one hand are plain strings (that get parsed), and on the other React.createElement relies on types to know what components to create (or strings, for native HTML elements).

Registration

Each React component that should be renderer-able needs to be registered in the component registry by calling the registerElement(elementName, resolver) function.

This is usually done in Wrapper libraries' individual NgModules's constructor:

export class FabCheckboxModule {
  constructor() {
    registerElement('Checkbox', () => Checkbox);
  }
}

The registerElement function can be called multiple times. Any call to an already-registered elementName is discarded, for simplicity's sake with Angular and lazy-loaded modules. See the docs within the code for more info on that.

Caveats

The registry is a singleton one, much like the way ReactRenderer is currently, but there are no technical challenges that prevent changing this in the future. See limitations for more info on this.