# @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
```bash
npm install @b-side/parser
```
## Basic 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`.
```javascript
import { BSide } from '@b-side/parser';
const bside = BSide({
data: { variable: 'This is a new text' },
template: `{{ variable }}
`,
});
const string = bside.toString(); // This is a new text
```
## 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
```html
```
### 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`.
```html
```
## 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
### `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.
```javascript
import { BSide } from '@b-side/parser';
const data = { variable: 'This is a new text' };
BSide({
data,
element: document.querySelector('body'),
template: `{{ variable }}
`,
});
//
// This is a new text
//
```
### Automatic updates
Using javascript native [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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.
```javascript
data.variable = 'This library is awesome';
//
// This library is awesome
//
```
### 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.
```html
```