render using output* functions

Author: gordonhirsch

packages/cli-kit/src/private/node/ui.tsx

@@ -1,4 +1,4 @@
-import {collectLog, consoleWarn, Logger, LogLevel, outputWhereAppropriate} from '../../public/node/output.js'
+import {output, Logger, LogLevel} from '../../public/node/output.js'
 import {isUnitTest} from '../../public/node/context/local.js'
 import {treeKill} from '../../public/node/tree-kill.js'
 import {ReactElement} from 'react'
@@ -11,20 +11,16 @@ interface RenderOnceOptions {
   renderOptions?: RenderOptions
 }
 
-export function renderOnce(
-  element: JSX.Element,
-  {logLevel = 'info', logger = consoleWarn, renderOptions}: RenderOnceOptions,
-) {
-  const {output, unmount} = renderString(element, renderOptions)
+export function renderOnce(element: JSX.Element, {logLevel = 'info', renderOptions}: RenderOnceOptions) {
+  const {output: renderedString, unmount} = renderString(element, renderOptions)
 
-  if (output) {
-    if (isUnitTest()) collectLog(logLevel, output)
-    outputWhereAppropriate(logLevel, logger, output)
+  if (renderedString) {
+    output(renderedString, logLevel)
   }
 
   unmount()
 
-  return output
+  return renderedString
 }
 
 export async function render(element: JSX.Element, options?: RenderOptions) {

packages/cli-kit/src/private/node/ui/alert.tsx

@@ -1,6 +1,6 @@
 import {Alert, AlertProps} from './components/Alert.js'
 import {renderOnce} from '../ui.js'
-import {consoleError, consoleLog, consoleWarn, Logger, LogLevel} from '../../../public/node/output.js'
+import {LogLevel} from '../../../public/node/output.js'
 import React from 'react'
 import {RenderOptions} from 'ink'
 
@@ -11,13 +11,6 @@ const typeToLogLevel: {[key in AlertProps['type']]: LogLevel} = {
   error: 'error',
 }
 
-const typeToLogger: {[key in AlertProps['type']]: Logger} = {
-  info: consoleWarn,
-  warning: consoleWarn,
-  success: consoleLog,
-  error: consoleError,
-}
-
 export interface AlertOptions extends AlertProps {
   renderOptions?: RenderOptions
 }
@@ -47,6 +40,6 @@ export function alert({
       orderedNextSteps={orderedNextSteps}
       customSections={customSections}
     />,
-    {logLevel: typeToLogLevel[type], logger: typeToLogger[type], renderOptions},
+    {logLevel: typeToLogLevel[type], renderOptions},
   )
 }

packages/cli-kit/src/public/node/output.ts

@@ -332,6 +332,20 @@ export function outputWarn(content: OutputMessage, logger: Logger = consoleWarn)
   outputWhereAppropriate('warn', logger, message)
 }
 
+/**
+ * Logs an unformatted message at the given log level.
+ * Note: By default,  messages are sent through the standard error.
+ *
+ * @param content - The content to be output to the user.
+ * @param logLevel - The log level associated with the message.
+ * @param logger - The logging function to use to output to the user.
+ */
+export function output(content: OutputMessage, logLevel: LogLevel = 'info', logger: Logger = consoleWarn): void {
+  if (isUnitTest()) collectLog(logLevel, content)
+  const message = stringifyMessage(content)
+  outputWhereAppropriate(logLevel, logger, message)
+}
+
 /**
  * Prints a new line in the terminal.
  */
@@ -382,25 +396,16 @@ export interface OutputProcess {
  *
  * @param message - The message to print.
  */
-export function consoleLog(message: string): void {
+function consoleLog(message: string): void {
   process.stdout.write(`${withOrWithoutStyle(message)}\n`)
 }
 
-/**
- * Prints an error message in the console to stderr.
- *
- * @param message - The message to print.
- */
-export function consoleError(message: string): void {
-  process.stderr.write(`${withOrWithoutStyle(message)}\n`)
-}
-
 /**
  * Prints a warning message in the console to stderr.
  *
  * @param message - The message to print.
  */
-export function consoleWarn(message: string): void {
+function consoleWarn(message: string): void {
   process.stderr.write(`${withOrWithoutStyle(message)}\n`)
 }
 

packages/cli-kit/src/public/node/ui.tsx

@@ -1,18 +1,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable tsdoc/syntax */
 import {AbortError, AbortSilentError, FatalError as Fatal} from './error.js'
-import {
-  collectLog,
-  consoleError,
-  consoleWarn,
-  Logger,
-  LogLevel,
-  outputContent,
-  outputDebug,
-  outputToken,
-  outputWhereAppropriate,
-} from './output.js'
-import {isUnitTest} from './context/local.js'
+import {Logger, LogLevel, output, outputContent, outputDebug, outputToken} from './output.js'
 import {terminalSupportsPrompting} from './system.js'
 import {AbortController} from './abort.js'
 import {runWithTimer} from './metadata.js'
@@ -247,7 +236,7 @@ interface RenderFatalErrorOptions {
  */
 // eslint-disable-next-line max-params
 export function renderFatalError(error: Fatal, {renderOptions}: RenderFatalErrorOptions = {}) {
-  return renderOnce(<FatalError error={error} />, {logLevel: 'error', logger: consoleError, renderOptions})
+  return renderOnce(<FatalError error={error} />, {logLevel: 'error', renderOptions})
 }
 
 export interface RenderSelectPromptOptions<T> extends Omit<SelectPromptProps<T>, 'onSubmit'> {
@@ -594,12 +583,12 @@ interface RenderTextOptions {
  * Hello world!
  *
  */
-export function renderText({text, logLevel = 'info', logger = consoleWarn}: RenderTextOptions) {
+export function renderText({text, logLevel = 'info'}: RenderTextOptions) {
   let textWithLineReturn = text
   if (!text.endsWith('\n')) textWithLineReturn += '\n'
 
-  if (isUnitTest()) collectLog(logLevel, textWithLineReturn)
-  outputWhereAppropriate(logLevel, logger, textWithLineReturn)
+  output(textWithLineReturn, logLevel)
+
   return textWithLineReturn
 }
 

packages/cli/src/cli/commands/debug/command-flags.ts

@@ -1,6 +1,6 @@
 import Command from '@shopify/cli-kit/node/base-command'
-import {consoleLog} from '@shopify/cli-kit/node/output'
-import {renderTable, renderText} from '@shopify/cli-kit/node/ui'
+import {outputResult} from '@shopify/cli-kit/node/output'
+import {renderTable} from '@shopify/cli-kit/node/ui'
 import {Flags} from '@oclif/core'
 
 export default class CommandFlags extends Command {
@@ -53,7 +53,7 @@ export default class CommandFlags extends Command {
       const header = `${columns.join(',')}\n`
       const rows = data.map((obj) => columns.map((key) => obj[key]).join(',')).join('\n')
       const csvString = header + rows
-      renderText({text: csvString, logger: consoleLog})
+      outputResult(csvString)
     } else {
       renderTable({
         rows: data,