constructor(
    root: Opaque,
    env: Environment,
    template: OwnedTemplate,
    self: VersionedPathReference<Opaque>,
    parentElement: Simple.Element,
    dynamicScope: DynamicScope) {
    assert(`You cannot render \`${self.value()}\` without a template.`, template !== undefined);

    this.id = getViewId(root);
    this.env = env;
    this.root = root;
    this.result = undefined;
    this.shouldReflush = false;
    this.destroyed = false;

    let options = this.options = {
      alwaysRevalidate: false,
    };

    this.render = () => {
      let iterator = template.render(self, parentElement, dynamicScope);
      let iteratorResult: IteratorResult<RenderResult>;

      do {
        iteratorResult = iterator.next();
      } while (!iteratorResult.done);

      let result = this.result = iteratorResult.value;

      // override .render function after initial render
      this.render = () => result.rerender(options);
    };
  }

 static create(parentReference: VersionedPathReference<Opaque>, propertyKey: string) {
   if (isConst(parentReference)) {
     return new RootPropertyReference(parentReference.value(), propertyKey);
   } else {
     return new NestedPropertyReference(parentReference, propertyKey);
   }
 }

  create(environment: Environment, definition: CurlyComponentDefinition, args: Arguments, dynamicScope: DynamicScope, callerSelfRef: VersionedPathReference<Opaque>, hasBlock: boolean): ComponentStateBucket {
    if (DEBUG) {
      this._pushToDebugStack(`component:${definition.name}`, environment);
    }

    let parentView = dynamicScope.view;

    let factory = definition.ComponentClass;

    let capturedArgs = args.named.capture();
    let props = processComponentArgs(capturedArgs);

    aliasIdToElementId(args, props);

    props.parentView = parentView;
    props[HAS_BLOCK] = hasBlock;

    props._targetObject = callerSelfRef.value();

    let component = factory.create(props);

    let finalizer = _instrumentStart('render.component', initialRenderInstrumentDetails, component);

    dynamicScope.view = component;

    if (parentView !== null && parentView !== undefined) {
      parentView.appendChild(component);
    }

    // We usually do this in the `didCreateElement`, but that hook doesn't fire for tagless components
    if (component.tagName === '') {
      if (environment.isInteractive) {
        component.trigger('willRender');
      }

      component._transitionTo('hasElement');

      if (environment.isInteractive) {
        component.trigger('willInsertElement');
      }
    }

    let bucket = new ComponentStateBucket(environment, component, capturedArgs, finalizer);

    if (args.named.has('class')) {
      bucket.classRef = args.named.get('class');
    }

    if (DEBUG) {
      processComponentInitializationAssertions(component, props);
    }

    if (environment.isInteractive && component.tagName !== '') {
      component.trigger('willRender');
    }

    return bucket;
  }

function referenceFromPath(source: VersionedPathReference<Opaque>, path: string): VersionedPathReference<Opaque> {
  let innerReference;
  if (path === undefined || path === null || path === '') {
    innerReference = NULL_REFERENCE;
  } else if (typeof path === 'string' && path.indexOf('.') > -1) {
    innerReference = referenceFromParts(source, path.split('.'));
  } else {
    innerReference = source.get(path);
  }
  return innerReference;
}

function stateFor(ref: VersionedPathReference<OutletState | undefined>): OutletDefinitionState | null {
  let outlet = ref.value();
  if (outlet === undefined) return null;
  let render = outlet.render;
  if (render === undefined) return null;
  let template = render.template;
  if (template === undefined) return null;
  return {
    ref,
    name: render.name,
    outlet: render.outlet,
    template,
    controller: render.controller,
  };
}

    value(): Opaque {
      let value = this.component.value();

      assert(this.message, typeof value !== 'string');

      return value;
    }

  value() {
    let { env, nameRef, modelRef } = this;
    let name = nameRef.value();

    if (typeof name === 'string') {
      if (this._lastName === name) {
        return this._lastDef;
      }

      assert(
        `You used \`{{mount '${name}'}}\`, but the engine '${name}' can not be found.`,
        env.owner.hasRegistration(`engine:${name}`)
      );

      if (!env.owner.hasRegistration(`engine:${name}`)) {
        return null;
      }

      this._lastName = name;
      this._lastDef = curry(new MountDefinition(name, modelRef));

      return this._lastDef;
    } else {
      assert(
        `Invalid engine name '${name}' specified, engine name must be either a string, null or undefined.`,
        name === null || name === undefined
      );
      this._lastDef = null;
      this._lastName = null;
      return null;
    }
  }

    readValue = (args: any) => {
      let valuePath = valuePathRef.value();

      if (valuePath && args.length > 0) {
        args[0] = get(args[0], valuePath as string);
      }

      return args;
    };

    value(): Opaque {
      let value = this.component.value();

      if (typeof value === 'string') {
        throw new TypeError(this.message);
      }

      return value;
    }

  compute() {
    let { lastPath, innerReference, innerTag } = this;
    let path = this.pathReference.value();

    if (path !== lastPath) {
      innerReference = referenceFromPath(this.sourceReference, path);
      innerTag.inner.update(innerReference.tag);
      this.innerReference = innerReference;
      this.lastPath = path;
    }

    return innerReference.value();
  }