constructor (options = {}) {
    this.componentFactory = options.componentFactory
    if (!this.componentFactory) throw new Error("'componentFactory' is mandatory")
    this.elementFactory = options.elementFactory || DefaultDOMElement.createDocument('html')
    if (!this.elementFactory) throw new Error("'elementFactory' is mandatory")
  }
# Rendering Algorithm

## Introduction

The challenges of virtual rendering, particularly with the Substance specialities, namely
fully initialized component after construction.

- Dependency Injection via constructor requires an existing parent.
  As a consequence a component tree must be constructed from top
  to down.

- The earliest time to evaluate `$$(MyComponent)`, is when it has been
  attached to an existing component. I.e., to run `MyComponent.render()` an
  instance of `MyComponent` is needed, which can only be created with an
  existing parent component.

- In general, it is *not* possible to have a naturally descending rendering
  algorithm, i.e. a simple recursion calling `render()` and creating or
  updating Components on the way, preserving a simple stack-trace.
  Instead, it requires calling `render()` on one level, then doing comparisons
  with the existing tree to be able to reuse components, and then descend into
  the sub-tree.

- If components are passed down via props, things get even more difficult.
  For example, consider a situation where components are passed via props:
  ```
    render($$) {
      return $$('div').append(
        $$(Wrapper, {
          foo: $$(MyComponent)
        })
      )
    }
  ```
  At the time when this component gets rendered, `MyComponent` can not be
  instantiated, as it is not known what `Wrapper` actually does with it.
  While the general approach is working from top-to-down, in this case it has
  a bottom-to-up nature, i.e., the child needs to be rendered to know what to
  do with the passed component.

  Particularly, this is problematic when the passed component has a reference:
  ```
    render($$) {
      return $$('div').append(
        $$(Wrapper, {
          foo: $$(MyComponent).ref('foo')
        })
      )
    }
  ```
  As nothing is known at the time of descending about the content of `Wrapper`
  the rendering algorithm can not tell that it ought to be preserved. For now,
  the correct way to deal with this situation is to use a reference for the
  wrapper as well:
  ```
    render($$) {
      return $$('div').append(
        $$(Wrapper, {
          foo: $$(MyComponent).ref('foo')
        }).ref('wrapper')
      )
    }
  ```

## Algorithm

For a given Component `comp`:

1. Capturing a virtual DOM
  1.1. Create a virtual DOM element by calling `comp.render()`
  1.2. Map virtual elements to existing elements
  1.3. Apply 1.1. and 1.2. recursively for every virtual Component
2. Update `comp.el` given a virtual DOM element

Notes:
- 1.2. is necessary to preserve components and capture DOM updates using the
  correct instances
- 2. can be seen as an independent task, updating one DOM given a second one.

## Implementation

> TODO: flesh this out

- Rendering happens in two stages: capture and render/update.
  In the capturing stage a VirtualComponent tree is created by calling
  `Component.render()` from top to down recursively. In the rendering stage
  DOM elements are created and updated.
- Refs: the programmer can use ref(id) to register a reference to a child
  component. Referenced components are always reused when rerendering, i.e.
  not disposed. For other elements, there is no guarantee that the component
  and its DOM element is reused. The RenderingEngine may do so if possible,
  e.g. if the structure does not change.

## TODO

- reuse unmapped elements that are compatible during rendering
- rethink 'Forwarding Components' regarding parent-child relationship.
  ATM, there is no extra model for that hierarchy than the DOM, only
  `comp.parent` reflects the relationship correctly

These ideas could improve the implementation:
- remove outlets: outlets are just another way to change props.