schema.engine v1.0.3
Schema Engine
Schema is a front-end library for rendering object-literal components to the DOM. Object-literal components act as schemas that describe the HTML, CSS and JS that the component encapsulates.
A component is simply an object literal, acting like a schematic for the DOM structure it describes.
const Button = {
data: { label: 'Submit' },
template: ['button', '.btn', '!onclick: submit', '@label'],
styles: {
'.btn': {
color: '#333',
padding: '10px'
}
},
submit: (self) => {
self.setData({ label: 'Submitted' });
self.setStyles({ '.btn': { color: '#ddd' } });
}
}
To render a component just pass it into the SchemaEngine, along with the element to mount it to.
const engine = new SchemaEngine;
engine.render(Button, document.getElementById('root'));
What's with the template structure? It is just an array, or an array of arrays if there's nesting.
['div', '.divClass', 'This is the content of the div']
Will be generated directly in the DOM, but the HTML representation would look like:
<div class='divClass'>This is the content of the div</div>
Some sugar can come into use.
['.divClass', 'This is the content of the div']
Some nesting.
['.divClass',
['.childDiv', 'This is a child div']
]
The first string in the array is always a tag (id or class for divs). The last string is always the content of the tag. Everything between are attributes.
['.divClass', '#parentClass', 'data-id: p1',
['a', 'href: https://github.com', 'Github'],
['img', 'src: images/icon.png', '']
]