{"id":18533614,"url":"https://github.com/oclif/multi-stage-output","last_synced_at":"2026-03-15T08:58:47.523Z","repository":{"id":252141979,"uuid":"839423701","full_name":"oclif/multi-stage-output","owner":"oclif","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-11T05:36:07.000Z","size":886,"stargazers_count":1,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-11T06:28:28.655Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oclif.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-07T15:21:31.000Z","updated_at":"2025-05-11T05:36:05.000Z","dependencies_parsed_at":"2024-08-08T00:14:40.075Z","dependency_job_id":"72d8e56f-668d-426f-ab27-f9a6e25d85d9","html_url":"https://github.com/oclif/multi-stage-output","commit_stats":null,"previous_names":["oclif/multi-stage-output"],"tags_count":67,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oclif%2Fmulti-stage-output","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oclif%2Fmulti-stage-output/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oclif%2Fmulti-stage-output/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oclif%2Fmulti-stage-output/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oclif","download_url":"https://codeload.github.com/oclif/multi-stage-output/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254243362,"owners_count":22038046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T19:12:20.811Z","updated_at":"2026-03-15T08:58:47.438Z","avatar_url":"https://github.com/oclif.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://user-images.githubusercontent.com/449385/38243295-e0a47d58-372e-11e8-9bc0-8c02a6f4d2ac.png\" width=\"260\" height=\"73\"\u003e\n\n[![Version](https://img.shields.io/npm/v/@oclif/multi-stage-output.svg)](https://npmjs.org/package/@oclif/multi-stage-output)\n[![Downloads/week](https://img.shields.io/npm/dw/@oclif/multi-stage-output.svg)](https://npmjs.org/package/@oclif/multi-stage-output)\n[![License](https://img.shields.io/npm/l/@oclif/multi-stage-output.svg)](https://github.com/oclif/multi-stage-output/blob/main/LICENSE)\n\n# Description\n\nThis is a framework for showing multi-stage output in the terminal. It's integrated with oclif's builtin [Performance](https://oclif.io/docs/performance/) capabilities so that perf metrics are automatically captured for each stage.\n\n![Demo](./assets/demo.gif?raw=true 'Demo')\n\n# Features\n\n- Integrated Performance Tracking: this is integrated with oclif's builtin [Performance](https://oclif.io/docs/performance/) capabilities so that perf metrics are automatically captured for each stage.\n- Responsive Design: elements will be added or removed based on the height of the terminal window. It even resizes itself if you resize the screen while the command is running.\n- CI Friendly Output: a simpler output will be shown inside non-tty environments like CI systems to avoid any excessive output that might be hard to read in CI logs.\n\n# Examples\n\nYou can see examples of how to use it in the [examples](./examples/) directory.\n\nYou can run any of these with the following:\n\n```\ntsx examples/basic.ts\n```\n\n# Usage\n\n## Basic Usage\n\n```typescript\nconst ms = new MultiStageOutput({\n  jsonEnabled: false,\n  stages: ['stage 1', 'stage 2', 'stage 3'],\n  title: 'Basic Example',\n})\n// goto `stage 1`\nms.goto('stage 1')\n// do some stuff\n\n// goto `stage 2`\nms.goto('stage 2')\n\n// As a convenience, use .next() to goto the next stage\nms.next()\n\n// stop the multi-stage output from running anymore. Pass in an Error if applicable.\nms.stop()\n```\n\n## Adding information blocks before or after the stages output.\n\nYou can add blocks on information before or after the list of stages. There are 3 kinds of information that can be displayed:\n\n- `message`: a simple string message\n- `static-key-value`: a simple key:value pair, e.g. `name: Foo`. If the value is undefined, the key will not be shown.\n- `dynamic-key-value`: a key:value pair where the value is expected to come in at an unknown time. This will display a spinner until the value is provided. If `.stop` is called with an error before the value is provided, then a `✘` will be displayed.\n\n```typescript\nconst ms = new MultiStageOutput\u003c{message: string; staticValue: string; dynamicValue: string}\u003e({\n  jsonEnabled: false,\n  stages: ['stage 1', 'stage 2', 'stage 3'],\n  // preStagesBlock will be displayed BEFORE the list of stages\n  preStagesBlock: [\n    {\n      get: (data) =\u003e data?.message,\n      type: 'message',\n    },\n  ],\n  // postStagesBlock will be displayed AFTER the list of stages\n  postStagesBlock: [\n    {\n      get: (data) =\u003e data?.staticValue,\n      label: 'Static',\n      type: 'static-key-value',\n    },\n    {\n      get: (data) =\u003e data?.dynamicValue,\n      label: 'Dynamic',\n      type: 'dynamic-key-value',\n    },\n  ],\n})\n// Goto `stage 1` and provide partial data to use for the information blocks\nms.goto('stage 1', {message: 'This is a message', staticValue: 'This is a static key:value pair'})\n\n// Provide more data to use\nms.updateData({dynamicValue: 'This is a dynamic key:value pair'})\n\n// Goto `stage 2` and provide more partial data\nms.goto('stage 2')\n\n// Goto stage 3\nms.goto('stage 3')\n\nms.stop()\n```\n\n## Adding information blocks on a specific stage\n\nYou can also add information blocks onto specific stages, which will nest the information underneath the stage.\n\n```typescript\nconst ms = new MultiStageOutput\u003c{message: string; staticValue: string; dynamicValue: string}\u003e({\n  jsonEnabled: false,\n  stageSpecificBlock: [\n    // This will be nested underneath `stage 1`\n    {\n      get: (data) =\u003e data?.message,\n      stage: 'one',\n      type: 'message',\n    },\n    // This will be nested underneath `stage 2`\n    {\n      get: (data) =\u003e data?.staticValue,\n      label: 'Static',\n      stage: 'two',\n      type: 'static-key-value',\n    },\n    // This will be nested underneath `stage 1`\n    {\n      get: (data) =\u003e data?.dynamicValue,\n      label: 'Dynamic',\n      stage: 'one',\n      type: 'dynamic-key-value',\n    },\n  ],\n  stages: ['stage 1', 'stage 2', 'stage 3'],\n  title: 'Stage-Specific Information Block Example',\n})\n\nms.goto('stage 1', {message: 'This is a message', staticValue: 'This is a static key:value pair'})\n\nms.goto('stage 2', {dynamicValue: 'This is a dynamic key:value pair'})\n\nms.goto('stage 3')\n\nms.stop()\n```\n\n## Customizing the Design\n\nYou can customize the design of the multi-stage output using the `design` property:\n\n```typescript\nconst ms = new MultiStageOutput({\n  jsonEnabled: false,\n  stages: ['stage 1', 'stage 2', 'stage 3'],\n  title: 'Basic Example',\n  design: {\n    title: {\n      textColor: 'red',\n    }\n    icons: {\n      completed: {\n        figure: 'C',\n        paddingLeft: 1,\n        color: '#00FF00'\n      }\n    }\n  }\n})\n```\n\nSee [`Design`](./src/design.ts) for all the options available to you.\n\n## Other Options\n\n- `showElapsedTime`: Optional. Whether or not to show the `Elapsed Time` at the bottom. Defaults to `true`\n- `showStageTime`: Optional. Whether or not to show the time for each stage. Defaults to `true`\n- `title`: Optional. The title to show at the top.\n- `timerUnit`: The unit to use for the elapsed time and stage time. Can be `ms` or `s`. Defaults to `ms`\n\n# Contributing\n\nSee the [contributing guide](./CONRTIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foclif%2Fmulti-stage-output","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foclif%2Fmulti-stage-output","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foclif%2Fmulti-stage-output/lists"}