Creating Previews

Creating Previews

Each choice in an arg can have an associated preview. Previews gracefully enhance from a string all the way up to multiple async functions that return strings based on choice.

You can toggle the preview pane open and closed with cmd+P

// Just a string
await arg(
  "Select a fruit",
  md(`I recommend typing "Apple"`) // "md" converts strings to HTML
)

// A function, takes typed "input", returns string
await arg("Select a fruit", input =>
  md(`You typed "${input}"`)
)

// An async function, takes typed "input", returns string
// `hightlight` requires "async" takes markdown, applies code highlighting

await arg(
  "Select a fruit",
  async input =>
    await highlight(` 
~~~js
await arg("${input}")
~~~
  `)
)

// A "preview" per choice
await arg("Select a fruit", [
  { name: "Apple", preview: `Apple, yum! 🍎` },
  { name: "Banana", preview: `Banana, yum too! 🍌` },
])

// Async "preview" per choice
let preview = async ({ name, input }) =>
  await highlight(`
~~~js
// ${name}
await arg("${input}!")
~~~
`)

//"input" param is required to switch prompt mode from "filter list" to "generate list"
await arg("Select a fruit", async input => {
  return [
    { name: `Apple ${input}`, preview },
    { name: `Banana ${input}`, preview },
  ]
})

// Static preview with static choices
await arg(
  {
    preview: md(`
# Pick a fruit


  `),
  },
  ["Apple", "Banana", "Orange"]
)

// Dynamic choices, static preview
await arg(
  {
    preview: async () =>
      await highlight(`
## This is just information

Usually to help you make a choice
  
Just type some text to see the choices update
`),
  },
  async input => {
    return Array.from({ length: 10 }).map(
      (_, i) => `${input} ${i}`
    )
  }
)

Discuss Post