@b-side/parser
v4.3.4
Published
HTML Parser used to parse HTML string and bind data to it.
Downloads
244
Readme
@b-side/parser
HTML-like string async parser with automatic update of the resulting HTML if needed. Supports b-side logical custom-elements bs-if, bs-elseif, bs-else, bs-endif and bs-for. No W3C standards are validated while parsing the HTML string.
Installation
npm install @b-side/parserBasic Usage
The Parser takes a String as entry and tries to convert it to b-side elements that can then be re-used by the renderer and/or converted back to String.
import { BSide } from '@b-side/parser';
const bside = BSide({
data: { variable: 'This is a new text' },
template: `<div>{{ variable }}</div>`,
});
const string = bside.toString(); // <div>This is a new text</div>
Supported logic
The content of the first conditional tag of the group will be added if the expression resolve to true. The content of the bs-else tag will be added if no other tags of the group have been resolved first.
Conditional
<bs-if (expression)>
</bs-if>
<bs-elseif (otherExpression)>
</bs-elseif>
<bs-else>
</bs-else>Iteration
The content of the iteration tag will be repeated the number of time the expression will dictate. The variable must have a Symbol.iterator property or be a type number.
<bs-for (value, key of expression)>
</bs-for>Options
All options are optionnals, but template option is most likely required if you want to parse something.
data
Object used to work with the template. Any property in this object can be used directly in the template option. Properties of the object are proxied so the content of the resulting HTML can automatically be updated when a change of data occurs.
Record<string, unknown>
element
HTMLElement in which the innerHTML will be replaced by the template option. If no data option is provided when using this option, element will be considered as the data option to use in the template.
HTMLElement
template
HTML-like string with no W3C standards enforced. Supports b-side logical tags explained before.
String
Advanced Usage
If you are working with custom-elements, it would be easier to just use the @b-side/base-element library. Usage of this library is wrapped inside custom elements.
Using element option
Using this option, the innerHTML of the HTMLElement will be replaced by the template string provided and updated automatically if/when needed.
import { BSide } from '@b-side/parser';
const data = { variable: 'This is a new text' };
BSide({
data,
element: document.querySelector('body'),
template: `<div>{{ variable }}</div>`,
});
// <body>
// <div>This is a new text</div>
// </body>Automatic updates
Using javascript native Proxy, the properties of the data or element passed in options is watched an update of the resulting HTML string is updated if/when needed. Using previous example.
data.variable = 'This library is awesome';
// <body>
// <div>This library is awesome</div>
// </body>Can also be used globaly
Depending on the context, you might need to use the library in a global context. This could be done if you build and include the library in your HTML page the following way.
<script src="b-side.parser.js"></script>
<script>
window['BSide']({
data,
template,
})
</script>