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.

({
  make: function (data) {
    // Do something with the data
    return [
      { type: "text", value: "String" },
      { type: "status", value: true },
      { type: "number", value: 123 },
    ],
  }
})

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.

To put it more simply, you are able to access all of the inputs using any of the methods shown below.

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

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

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

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

  // Destructuring the object as an iterable
  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
  take: [{ type: "number", value: 2 }],
  make: function(data) { console.log(data) } // 2
})

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
  make: async (data) => {
    const request = await fetch("https://example.com/some/json")
    const value = await request.json()
    return { type: "json", value }
  },

  // Returning a Promise
  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.