In crs-schema, we opt for JSON as the schema format because of its broad support and human-readable nature, although schemas can be in various file formats.

The schema parser conducts a tree walk through the JSON structure, adhering to a convention where an object with an “element” property signifies a passable object. If this object contains a “elements” property, it indicates that there are child elements that also require parsing.

We utilize a base parser that is designed to recognize this convention. Custom parsers can extend this base parser to leverage its convention-based functionalities.

The parser functions as an orchestrator, coordinating the various components necessary to effectively process the schema and produce the final output. This often involves integrating extra functionalities. For instance, in an HTML parser, it would include generating the additional markup needed for style imports identified during the parsing process.

HTML Parser

This example serves as an effective model for a parser due to its complexity and various angles that need to be addressed. The parser is designed to accommodate schema features including:

1. Defining and managing schema variables manager and value processor.
2. Working with UI templates using the templates manager and provider.
3. Having a fallback on generic elements
4. Allowing customization of specific elements using providers.

Firstly, we’ll enable the use of generic elements. Commonly, there’s a need to utilize basic HTML elements, assigning attributes, adding classes, or styling properties. For instance, consider a hierarchical structure created with a ‘ul’ and multiple ‘li’ elements. It’s unnecessary to define a provider for such standard elements. Providers should be reserved for specific cases. If no provider exists for a particular element type, it will be generated as ‘raw’ HTML, exactly as defined by the user.

This schema part

{
    "element": "ul",
    "attributes": {
        "role": "menu"
    },
    "elements": [
        {
            "element": "li",            
            "attributes": {
                "role": "menuitem"
            },
            "classes": ["cool-menu"],
            "content": "Menu Item 1"
        }
    ]
}

would have this HTML result

<ul role="menu">
    <li class="cool-menu" role="menuitem">Menu Item 1</li>
</ul>

The HTML parser has default generator functions for:

1. Attributes – standard HTML attributes but can also contain binding expressions when combined with a binding engine.
2. Styles – Standard dictionary where the key is the style property name and the value is the CSS value you want to use. This will set the “style” attribute on the element.
3. Classes – A collection of strings of the classes you wish to add to the element markup on the “class” attribute”.
4. Content – The textContent of the element