Async Workflows and Source Panels

Client and Worker Contracts

Replay one TypeScript execution where a typed client request calls a typed worker response module.

source panels When an example has more than one source file, replay keeps each file in its own panel while preserving one ordered trace stream. The Variables panel follows the actual typed request call into the worker module and the returned response back to the client.
typed boundary The client owns the selected command and visible summary. The worker owns the typed response rule for that command.

Project Entry

command
request_client.ts
Replay: real traced execution (multi-file project)
type ClientRequest = {
    command: "status" | "refresh" | "archive";
    label: string;
};

function buildRequest(command: ClientRequest["command"]): ClientRequest {
    let label = command;

    if (command === "refresh") {
        label = "cache";
    } else if (command === "archive") {
        label = "records";
    }

    return {
        command,
        label
    };
}

const command: ClientRequest["command"] = "status";
const request: ClientRequest = buildRequest(command);
const response = require("./request_worker.ts").handleRequest(request.command);
const ticket = 40 + request.command.length;

console.log(`command=${request.command}`);
console.log(`label=${request.label}`);
console.log(`ticket=${ticket}`);
console.log(`${response.access}:${response.message}`);

type ClientRequest = {
    command: "status" | "refresh" | "archive";
    label: string;
};

function buildRequest(command: ClientRequest["command"]): ClientRequest {
    let label = command;

    if (command === "refresh") {
        label = "cache";
    } else if (command === "archive") {
        label = "records";
    }

    return {
        command,
        label
    };
}

const command: ClientRequest["command"] = "refresh";
const request: ClientRequest = buildRequest(command);
const response = require("./request_worker.ts").handleRequest(request.command);
const ticket = 40 + request.command.length;

console.log(`command=${request.command}`);
console.log(`label=${request.label}`);
console.log(`ticket=${ticket}`);
console.log(`${response.access}:${response.message}`);

type ClientRequest = {
    command: "status" | "refresh" | "archive";
    label: string;
};

function buildRequest(command: ClientRequest["command"]): ClientRequest {
    let label = command;

    if (command === "refresh") {
        label = "cache";
    } else if (command === "archive") {
        label = "records";
    }

    return {
        command,
        label
    };
}

const command: ClientRequest["command"] = "archive";
const request: ClientRequest = buildRequest(command);
const response = require("./request_worker.ts").handleRequest(request.command);
const ticket = 40 + request.command.length;

console.log(`command=${request.command}`);
console.log(`label=${request.label}`);
console.log(`ticket=${ticket}`);
console.log(`${response.access}:${response.message}`);

  1. command ← status

    18    };19}2021const command→ status: ClientRequest["command"] = "status";  //@command="refresh", "archive"22const request: ClientRequest = buildRequest(commandstatus);23const response = require("./request_worker.ts").handleRequest(request.command);

  2. label ← status, command ← status

    3    label: string;4};56function buildRequest(commandstatus: ClientRequest["command"]): ClientRequest {7    let label→ status = command→ status;89    if (command === "refresh") {10        label = "cache";11    } else if (command === "archive") {12        label = "records";13    }1415    return {16        command,17        label18    };19}

  3. request ← [object Object], module.exports ← [object Object]

    21const command: ClientRequest["command"] = "status";  //@command="refresh", "archive"22const request→ [object Object]: ClientRequest = buildRequest(commandstatus);23const response = require("./request_worker.ts").handleRequest(request.commandstatus);24const ticket = 40 + request.command.length;
    values this step[object Object]module.exports

  4. function handleRequest(command: WorkerCommand): WorkerResponse

    16        command,17        label18    };19}2021const command: ClientRequest["command"] = "status";  //@command="refresh", "archive"
    values this stepstatuscommand

  5. function buildResponse(command: WorkerCommand): WorkerResponse

    4};56function buildRequest(command: ClientRequest["command"]): ClientRequest {7    let label = command;89    if (command === "refresh") {10        label = "cache";11    } else if (command === "archive") {12        label = "records";13    }1415    return {16        command,17        label
    values this stepstatuscommand

  6. response ← [object Object]

    18    };19}2021const command: ClientRequest["command"] = "status";  //@command="refresh", "archive"22const request: ClientRequest = buildRequest(command);
    values this step[object Object]responsestatuscommand

  7. response ← [object Object], ticket ← 46

    21const command: ClientRequest["command"] = "status";  //@command="refresh", "archive"22const request: ClientRequest = buildRequest(command);23const response→ [object Object] = require("./request_worker.ts").handleRequest(request.commandstatus);24const ticket→ 46 = 40 + request.command.length6;2526console.log(`command=${request.commandstatus}`);27console.log(`label=${request.labelstatus}`);28console.log(`ticket=${ticket46}`);29console.log(`${response.accessok}:${response.messageservice ready}`);
    outputcommand=status
label=status
ticket=46
ok:service ready