constructor(
    sourceExpression: IsBindingBehavior | IForOfStatement,
    target: Element,
    // some attributes may have inner structure
    // such as class -> collection of class names
    // such as style -> collection of style rules
    //
    // for normal attributes, targetAttribute and targetProperty are the same and can be ignore
    targetAttribute: string,
    targetKey: string,
    mode: BindingMode,
    observerLocator: IObserverLocator,
    locator: IServiceLocator
  ) {
    connectable.assignIdTo(this);
    this.$nextBinding = null;
    this.$prevBinding = null;
    this.$state = State.none;
    this.$lifecycle = locator.get(ILifecycle);
    this.$nextConnect = null;
    this.$nextPatch = null;
    this.$scope = null;

    this.locator = locator;
    this.mode = mode;
    this.observerLocator = observerLocator;
    this.sourceExpression = sourceExpression;
    this.target = target;
    this.targetAttribute = targetAttribute;
    this.targetProperty = targetKey;
    this.persistentFlags = LifecycleFlags.none;
  }

export function $hydrateElement(this: Writable<ICustomElement>, flags: LifecycleFlags, parentContext: IServiceLocator, host: INode, options: IElementHydrationOptions = PLATFORM.emptyObject): void {
  if (Profiler.enabled) { enter(); }
  const Type = this.constructor as ICustomElementType;
  if (Tracer.enabled) { Tracer.enter(Type.description.name, '$hydrate', slice.call(arguments)); }
  const description = Type.description;

  flags |= description.strategy;
  const projectorLocator = parentContext.get(IProjectorLocator);
  const renderingEngine = parentContext.get(IRenderingEngine);
  const dom = parentContext.get(IDOM);

  let bindingContext: typeof this;
  if (flags & LifecycleFlags.proxyStrategy) {
    bindingContext = ProxyObserver.getOrCreate(this).proxy;
  } else {
    bindingContext = this;
  }

  this.$scope = Scope.create(flags, bindingContext, null);
  this.$host = host;
  this.$projector = projectorLocator.getElementProjector(dom, this, host, description);

  renderingEngine.applyRuntimeBehavior(flags, Type, this);

  if (this.$hooks & Hooks.hasRender) {
    const result = this.render(flags, host, options.parts, parentContext);

    if (result && 'getElementTemplate' in result) {
      const template = result.getElementTemplate(renderingEngine, Type, parentContext);
      template.render(this, host, options.parts);
    }
  } else {
    const template = renderingEngine.getElementTemplate(dom, description, parentContext, Type);
    template.render(this, host, options.parts);
  }

  if (this.$hooks & Hooks.hasCreated) {
    bindingContext.created(flags);
  }
  if (Profiler.enabled) { leave(); }
  if (Tracer.enabled) { Tracer.leave(); }
}

  constructor(sourceExpression: IExpression, targetProperty: string, observerLocator: IObserverLocator, locator: IServiceLocator, toViewModel: boolean = false) {
    connectable.assignIdTo(this);
    this.$nextBinding = null;
    this.$prevBinding = null;
    this.$state = State.none;
    this.$lifecycle = locator.get(ILifecycle);
    this.$scope = null;

    this.locator = locator;
    this.observerLocator = observerLocator;
    this.sourceExpression = sourceExpression;
    this.target = null;
    this.targetProperty = targetProperty;

    this.toViewModel = toViewModel;
  }

  constructor(sourceExpression: IsBindingBehavior | IForOfStatement, target: IObservable, targetProperty: string, mode: BindingMode, observerLocator: IObserverLocator, locator: IServiceLocator) {
    connectable.assignIdTo(this);
    this.$nextBinding = null;
    this.$prevBinding = null;
    this.$state = State.none;
    this.$lifecycle = locator.get(ILifecycle);
    this.$nextConnect = null;
    this.$scope = null;

    this.locator = locator;
    this.mode = mode;
    this.observerLocator = observerLocator;
    this.sourceExpression = sourceExpression;
    this.target = target;
    this.targetProperty = targetProperty;
    this.persistentFlags = LifecycleFlags.none;
  }