Mapping, Validation and Updating

Mapping And Validation Using The Mapping Variable

Mapping

After you have the function declared, you should set up a JSON mapping variable that sets the types of all the attributes and properties. This mapping variable will be used for the validation of the attributes and styles.

The JSON should have the camelCase attribute or property names leading to the type of the valid values or an array of the types.

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

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

Validation

All templates should have a validation function to validate that the attributes and properties are set to the right values. This ensures that in case of a wrong type a useful error will appear instead of a difficult scriptable error. Running the validation is easy. Just pass the attrs, styles and mapping variable to the validate function.

validate(attrs, styles, mapping)

Update

The update function can be used in certain cases but is not needed for all of them. The update function is given the attrs or styles as its first parameter and mapping as it’s second. The function runs through all possible attributes or properties and if the key does not belong in the attrs or styles JSON, it adds it with the "null" value.

update(styles, mapping)

Current Code

const tagName = async (validate, template, update, styles, attrs, innerText) => {

const mapping = {…}

validate(attrs, styles, mapping)

// update(styles, mapping)
}