Conceptions ​

Let's get acquainted with the basic concepts

Props ​

Props provide a means to specify attributes for your HTML elements. Through props, you can define things like class names, IDs, and other typical HTML attributes.

const junter = new Junter();

junter.render({ "div": {
    "props": {
        "class": "block"
    }
}})

<div class="block"></div>

In the example above, a new instance of Junter is created. We then render a 'div' element and specify its 'class' attribute using the props key.

Content ​

The Content feature allows users to define what's inside the HTML element. This could be text, other HTML elements, or even a combination of both.

const junter = new Junter();

junter.render({ "div": {
        "props": {
            "class": "block"
        },
        "content": 'Block'
    }
})

<div class="block">Block</div>

Here, not only have we defined a 'class' attribute for our 'div' element through props, but we've also specified its inner content using the content key.

If you don't specifically provide a "content" key for an element, Junter intelligently interprets all non-"props" key-value pairs as potential content.

const junter = new Junter();

junter.render({ "main": {
    "props": {
        "class": "main"
    },
    "header": {},
    "div": {},
    "footer": {}
}})

<main class="main">
    <header></header>
    <div></div>
    <footer></footer>
</main>

Here, the main tag is provided a class of "main". The other key-value pairs (header, div, and footer) are not specifically assigned content, so Junter defaults them as nested elements within the main tag.

For those instances where you need a quick and straightforward rendering without the complications of properties or attributes, Junter accommodates this with direct value assignment.

junter.render({ "div": 'Block'})

<div>Block</div>

This is a testament to Junter's intuitive design. By directly pairing an element (div in this case) with a string, Junter understands it as the content for that element, rendering it seamlessly without needing further configurations.

Multiple content ​

With Junter, seamlessly rendering multiple content items, especially those housed in data arrays, becomes effortless. The following sections provide insights into the flexibility Junter offers in this context.

If your goal is to render several elements of the same type with different content, Junter can directly interpret arrays :

junter.render({ "div": {
    "p": ['Hello!', 'Hi!', 1]
}})

<div>
    <p>Hello!</p>
    <p>Hi!</p>
    <p>1</p>
</div>

The aforementioned code efficiently instructs Junter to create multiple paragraph elements within a div tag, each populated with the respective items from the array.

When elements sourced from a data array need specific attributes or properties, Junter allows you to set these with precision:

junter.render({ "div": {
    "p": {
        "props": {
            "class": "text"
        },
        "content": ['Hello!', 'Hi!', 1]
    }
}})

<div>
    <p class="text">Hello!</p>
    <p class="text">Hi!</p>
    <p class="text">1</p>
</div>

The addition of the "props" attribute allows each paragraph element to have the class "text", yet each continues to display unique content.

Junter's design logic ensures that developers can effortlessly nest elements within multiple content structures:

junter.render({ "div": {
    "div": {
        "props": {
            "class": "block"
        },
        "content": [
            {
               "div": {
                   "props": {
                       "class": "block"
                   },
                   "p": "Hello, world!"
               } 
            },
            {
               "div": {
                   "props": {
                       "class": "avatar"
                   },
                   "img": {
                       "props": {
                           "src": "https://example.com/image.png",
                           "alt": "avatar"
                       }
                   }
               } 
            }
        ]
    }
}})

<div>
    <div class="block">
        <div class="block">
            <p>Hello, world!</p>
        </div>
        <div class="avatar">
            <img src="https://example.com/image.png" alt="avatar" />
        </div>
    </div>
</div>

The given example demonstrates Junter's ability to handle nested structures within an array, showcasing both parallel and hierarchically nested elements.

Components ​

Junter also supports components, which are reusable pieces of UI that can be defined once and used throughout your application. Components are registered using the .registerComponent() method. This method takes two arguments: the name of the component and the JSON object that represents it.

To use them, it is necessary:

1. Register a component using the .registerComponent() function
2. Use a component in a JSON object passed to .render()

For example, let's define a simple Avatar component:

junter.registerComponent('Avatar', { "p": "Hello!" });

junter.render({ "div": {
    "Avatar": {}
}})

The resulting HTML is:

<div>
    <p>Hello!</p>
</div>

The advantage here is clear: we have encapsulated the complexity of the Avatar component behind a simple name that we can reuse as often as needed.

Aliases ​

Allow you to pass the necessary properties to components and rendering elements.

Slots ​

Component slots in Junter serve the purpose of providing placeholders within the structure of a component where users can insert custom content.

Here's how you can use slots in Junter:

junter.registerComponent('Card', { 
    "div": {
        "p": "Hello!", 
        "div": "slot:content"
    }
});


const json = { 
    "div": {
        "Card": {
            slots: {
                "slot:content": {
                    span: "Just a text" 
                }
            }
        }
    }
};

junter.render(json);

In the 'Card' component above, slot:content serves as a placeholder for content to be added later. When rendering the component, you can specify what should replace slot:content

This would generate the following HTML:

<div>
    <div>
        <p>Hello!</p>
        <div>
            <span>Just a text</span>
        </div>
    </div>
</div>

Locale ​

Junter has built-in localization support. This feature allows you to define locale-dependent strings within your components. Here's how you can use localization

const json = {
    "div": {
        "p": "Hello!",
        "div": "locale:greating"
    }
}

junter.render(json, { 'locale:greating': 'Bonjour!' });

The locale:greeting placeholder will be replaced by the corresponding localized string during the rendering process, which in this case, is 'Bonjour, monde!'. The resulting HTML will be:

<div>
   <p>Hello!</p>
   <div>Bonjour!</div>
</div>

Props ​

Junter allows passing properties (props) to components. This mechanism helps to customize a component's appearance or behavior during the rendering process.

Here's an example:

junter.registerComponent('Avatar', { 
    "div": {
        "img": {
            "props": {
                "alt": "prop:imgAlt",
                "src": "prop:avatarSrc"
            }
        }
    }
});

const json = { 
    "div": {
        "Avatar": {
            props: {
                "prop:imgAlt": "avatar",
                "prop:avatarSrc": "https://example.com/user.png"
            }
        }
    }
};

junter.render(json);

This will generate the following HTML:

<div>
   <div>
        <img alt="avatar" src="https://example.com/user.png" />
   </div>
</div>

Style ​

In Junter, you can easily incorporate CSS styles into your components with the style keyword.

Here's an example:

const json = { 
    "form": {
        "style": "style:mainCSS"
    }
}

const css = `
    .target { color: red }
`

junter.render(json, { 'locale:text': 'Text', 'style:mainCSS': css });

This will render the following HTML:

<form>
    <style>.target { color: red }</style>
</form>

Alias ​

Aliases in Junter are used for content substitution within a component. They enable you to change the content dynamically based on the context.

Here's how to use aliases:

const json = { 
    "button": {
        props: {
            class: "button"
        },
        content: "alias:text"
    }
}

junter.render(json, { 'alias:text': 'Text' });

This will render the following HTML:

<button class="button">Text</button>

The alias:text placeholder gets replaced by the string 'Click me' during the rendering process.