framework: CompositionTransaction and CompositionTransactionNotifier not work as per 367

I’m submitting a bug report

• Library Version: “aurelia-after-attached-plugin”: “github:aurelia-ui-toolkits/aurelia-after-attached-plugin@^0.1.3”, “aurelia-bootstrapper”: “npm:aurelia-bootstrapper@^2.3.0”, “aurelia-cookie”: “npm:aurelia-cookie@^1.0.10”, “aurelia-event-aggregator”: “npm:aurelia-event-aggregator@^1.0.1”, “aurelia-fetch-client”: “npm:aurelia-fetch-client@^1.6.0”, “aurelia-framework”: “npm:aurelia-framework@^1.3.0”, “aurelia-kendoui-bridge”: “npm:aurelia-kendoui-bridge@^1.8.0”, “aurelia-pal”: “npm:aurelia-pal@^1.8.0”, “aurelia-pal-browser”: “npm:aurelia-pal-browser@^1.8.0”, “aurelia-router”: “npm:aurelia-router@^1.6.3”, “aurelia-templating-resources”: “npm:aurelia-templating-resources@^1.7.1”

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: 8.11.1

• NPM Version: 6.4.0

• Aurelia CLI OR JSPM OR Webpack AND Version JSPM 0.16.53

• Browser: all

• Language: TypeScript 3

Current behavior: Im am trying to setup usage of CompositionTransaction as described in https://github.com/aurelia/framework/issues/367.

import { inject,  CompositionTransaction, CompositionTransactionNotifier } from "aurelia-framework";

@inject(CompositionTransaction)
export class Dashboard {
    public compositionTransactionNotifier: CompositionTransactionNotifier;
    public compositionTransaction: CompositionTransaction;

    private timeToWaitBetweenStates: number = 5000;

    constructor(
        compositionTransaction: CompositionTransaction
    ) {
        this.compositionTransaction = compositionTransaction;
        this.compositionTransactionNotifier = this.compositionTransaction.enlist();

        this.log("Constructor called");
        setTimeout(() => {
                this.compositionTransactionNotifier.done();
                this.log("Constructor done");
            },
            this.timeToWaitBetweenStates
        );
    }

    public bind() {
        this.compositionTransactionNotifier = this.compositionTransaction.enlist();

        this.log("Bind called");
        setTimeout(() => {
                this.compositionTransactionNotifier.done();
                this.log("Bind done");
            },
            this.timeToWaitBetweenStates
        );
    }

    public attached() {
        this.compositionTransactionNotifier = this.compositionTransaction.enlist();

        this.log("Attached called");
        setTimeout(() => {
                this.compositionTransactionNotifier.done();
                this.log("Attached done");
            },
            this.timeToWaitBetweenStates
        );
    }

    public detached() {
        this.compositionTransactionNotifier = this.compositionTransaction.enlist();

        this.log("Detached called");
        setTimeout(() => {
                this.compositionTransactionNotifier.done();
                this.log("Detached done");
            },
            this.timeToWaitBetweenStates
        );
    }

    public unbind() {
        this.compositionTransactionNotifier = this.compositionTransaction.enlist();

        this.log("Unbind called");
        setTimeout(() => {
                this.compositionTransactionNotifier.done();
                this.log("Unbind done");
            },
            this.timeToWaitBetweenStates
        );
    }

    public log(text) {
        console.log(
            text,
            this,
            this.compositionTransaction["_compositionCount"]
        );
    }
}

This outputs 14:27:36.102 CvLogger.ts:3 Constructor called (3) [Dashboard, 1] 14:27:36.162 CvLogger.ts:3 Bind called (3) [Dashboard, 2] 14:27:36.258 CvLogger.ts:3 Attached called (3) [Dashboard, 3] 14:27:41.109 CvLogger.ts:3 Constructor done (3) [Dashboard, 2] 14:27:41.167 CvLogger.ts:3 Bind done (3) [Dashboard, 1] 14:27:41.263 CvLogger.ts:3 Attached done (3) [Dashboard, 0]

Expected/desired behavior: I expect for each lifecycle step to finished 5 seconds after the last eg

14:27:00.000CvLogger.ts:3 Constructor called (3) [Dashboard, 1] 14:32:00.000CvLogger.ts:3 Constructor done (3) [Dashboard, 0] 14:32:00.000CvLogger.ts:3 Bind called (3) [Dashboard, 1] 14:37:00.000CvLogger.ts:3 Bind done (3) [Dashboard, 0] 14:37:00.000CvLogger.ts:3 Attached called (3) [Dashboard, 1] 14:42:00.000CvLogger.ts:3 Attached done (3) [Dashboard, 0,]

• What is the motivation / use case for changing the behavior? I wish have data loaded before moving to the next step.