Mapping

Mapping - the validation of attributes and styles

Mapping

const tagName = {
  mapping: {},
  async render(template, styles, attrs, innerText) {
    await template(``);
  },
};

The mapping object defines the valid attributes, valid styles, and their types. Before the render function is run, the attributes and styles will all be validated using the mapping object. This ensures that in case of a wrong type, a useful error will appear instead of a difficult scriptable error. The object should have the camelCase attribute or property names leading to the type of the valid values (see types) or an array of the types.

Here is an example of the mapping JSON used for the <stack> element.

{
  background: ["gradient", "image", "colour"],
  spacing: "posInt",
  url: "url",
  padding: "padding",
  borderColor: "colour",
  borderWidth: "posInt",
  size: "size",
  cornerRadius: "posInt",
  alignContent: "alignContent",
  layout: "layout"
}