Dynamic log prefixes for app dev output

[nickwesselman]

WHY are these changes introduced?

Enables extension-specific prefixes in the app dev output. This improves the existing app dev output for extensions by allowing log prefixes to match the extension handle, which is already the case for app build. It also enables extension-specific prefixes in the forthcoming app/function log streaming.

WHAT is this pull request doing?

• ConcurrentOutput now looks for a prefix stashed in an AsyncLocalStorage, which it will use instead of the process prefix.
• ConcurrentOutput allows for prefix column width to be set externally and not just on known processes.
• Theme extension process has been given a new prefix since it was the only thing left outputting extensions.
• Implements some UX recommendations on (less) use of color in app dev output to better confirm to our UX principles for Shopify CLI.

The colors used in app dev output weren't changed, but we might consider adding to them in a follow up PR.

Before

After

How to test your changes?

The best test is running app dev against an app with many extensions. I have one here:
https://github.com/Shopify/nw-scratch/tree/many-extension-app

Measuring impact

How do we know this change was effective? Please choose one:

• n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• Existing analytics will cater for this addition
• PR includes analytics changes to measure impact

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes
• I've made sure that any changes to dev or deploy have been reflected in the internal flowchart.

[github-actions]

Thanks for your contribution!

Depending on what you are working on, you may want to request a review from a Shopify team:

• Themes: @shopify/advanced-edits
• UI extensions: @shopify/ui-extensions-cli
  • Checkout UI extensions: @shopify/checkout-ui-extensions-api-stewardship
• Hydrogen: @shopify/hydrogen
• Other: @shopify/app-management

[github-actions]

Differences in type declarations

We detected differences in the type declarations generated by Typescript for this branch compared to the baseline ('main' branch). Please, review them to ensure they are backward-compatible. Here are some important things to keep in mind:

• Some seemingly private modules might be re-exported through public modules.
• If the branch is behind main you might see odd diffs, rebase main into this branch.

New type declarations

We found no new type declarations in this PR

Existing type declarations

packages/cli-kit/dist/public/node/ui/components.d.ts

@@ -1 +1 @@
-export { ConcurrentOutput } from '../../../private/node/ui/components/ConcurrentOutput.js';
\ No newline at end of file
+export { ConcurrentOutput, ConcurrentOutputContext, useConcurrentOutputContext, } from '../../../private/node/ui/components/ConcurrentOutput.js';
\ No newline at end of file

packages/cli-kit/dist/private/node/ui/components/ConcurrentOutput.d.ts

@@ -3,10 +3,15 @@ import { AbortSignal } from '../../../../public/node/abort.js';
 import { FunctionComponent } from 'react';
 export interface ConcurrentOutputProps {
     processes: OutputProcess[];
+    prefixColumnSize?: number;
     abortSignal: AbortSignal;
     showTimestamps?: boolean;
     keepRunningAfterProcessesResolve?: boolean;
 }
+interface ConcurrentOutputContext {
+    outputPrefix: string;
+}
+declare function useConcurrentOutputContext<T>(context: ConcurrentOutputContext, callback: () => T): T;
 /**
  * Renders output from concurrent processes to the terminal.
  * Output will be divided in a three column layout
@@ -20,4 +25,4 @@ export interface ConcurrentOutputProps {
  * rsnode backend/index.js
  */
 declare const ConcurrentOutput: FunctionComponent<ConcurrentOutputProps>;
-export { ConcurrentOutput };
\ No newline at end of file
+export { ConcurrentOutput, ConcurrentOutputContext, useConcurrentOutputContext };
\ No newline at end of file

[isaacroldan]

Do we want to add stdout/stderr here? maybe in a follow up PR?

[nickwesselman]

I think that's a bigger refactor, and I'm not sure whether it would actually be the same context object to be honest -- it's communicating from ConcurrentOutput to our log utilities. The code doing the logging may not need any knowledge of it at all.

I can log a separate issue for this.

[nickwesselman]

https://github.com/Shopify/develop-app-management/issues/1801

[isaacroldan]

🎩'ed and works great 👌