Make

Make transforms the input fields that are supplied by take. It should be a function that returns an array of fields representing the transformed data.

export const make = function (n) {
  // Multiply the number by two
  return [{ type: "number", value: n * 2 }]
}

Arguments

The function is called with a single argument. It is an object, where each key is derived from the fields defined by take. Keys are optional, and default to the index of the field in the take array. The object is iterable, so it can be conveniently destructured even when no keys are given.

That means you can access the input data using any of the methods shown below.

// Example fields
export const take = [
  { type: "text", key: "key1" },
  { type: "text", key: "key2" },
]

// Accessing the keys on the object
export const make = (data) => data.key1 + data.key2

// Destructuring the object using keys
export const make = ({ key1, key2 }) => key1 + key2

// Fields without keys
export const take = [{ type: "text" }, { type: "text" }]

// Destructuring the object as an iterable
export const make = ([key1, key2]) => key1 + key2

If only one field is supplied by take, the input value is passed directly — it’s not wrapped in an array. If you try to destructure this value, an error will occur.

// There is only one `take` input, so data is **not** an array
export const take = [{ type: "number", value: 2 }]

// This will throw an exception, because `2` is not iterable
export const make = function ([data]) {
  return data
}

Short-hand return statements

Rather than returning an array with a single item, it can be convenient to use a short-hand return statement. If make returns a string, a text field is rendered. For a number, you get a number field and a boolean renders as a status field. If you return an array that only contains strings, they will be combined into a list field.

In the same way, an array containing a mix of strings, numbers or booleans will also map those types to their respective fields. Any other objects that do not declare a type that matches a field will be ignored.

Asynchronous code

If you need to run an asynchronous process, make can be an async function or return a Promise.

// Declaring an async function
export const make = async (data) => {
  const request = await fetch("https://example.com/some/json")
  const value = await request.json()
  return { type: "json", value }
}

// Returning a Promise
export const make = (data) => {
  return new Promise(function (resolve) {
    window.setTimeout(() => {
      resolve("5 seconds have passed since this function was run!")
    }, 5000)
  })
}

Now that we have covered the structure, let’s look at some of the different fields that are available.