The provider possesses specialized knowledge regarding a specific type of element, including how to interpret its properties and, based on the findings, determine what to generate.

Lets look at a simple HTML Button provider as a example.

export default class ButtonProvider extends BaseProvider {
    get key() {
        return "button"
    }

    get template() {
        return `<button __attributes__ __styles__>__content__</button>`
    }

    async process(item, ctx) {
        const parts = await super.process(item);
        const caption = await this.parser.parseStringValue(item.caption);

        return await this.setValues(this.template, {
            "__attributes__": parts.attributes,
            "__styles__": parts.styles,
            "__content__": caption
        })
    }
}

There are a couple of things we need to note.

1. The “key” attribute specifies the type of element this provider will interpret.
2. The “template” property holds a string into which the necessary markup will be inserted.
3. The “process” function is activated to handle a schema item within a specific context, generating the output. The foundational provider incorporates a function named ‘setValues.’ This function receives the string template, where it populates values. In this setup, a dictionary is used where each key signifies a marker in the string, and its corresponding value is the data to be embedded into the string.

Since the handling of attributes and styles is a generic task applicable to all elements, the base class manages this aspect. This allows the provider to focus on subject-specific matters.

This is a schema example including attributes and styles.

{
    "element": "button",
    "caption": "Click Me",
    
    "attributes": {
      "id": "btnMain"
    },
    
    "styles": {
      "color": "red"
    }
}

While defining attributes and styles is optional, it’s not mandatory. The only essential properties in the JSON are:

1. “element”
2. “caption”

{
    "element": "button",
    "caption": "Click Me",
}