@b-side/parser
Version:
HTML Parser used to parse HTML string and bind data to it.
106 lines (79 loc) • 3.5 kB
Markdown
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.
```bash
npm install @b-side/parser
```
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: `<div>{{ variable }}</div>`,
});
const string = bside.toString(); // <div>This is a new text</div>
```
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.
```html
<bs-if (expression)>
</bs-if>
<bs-elseif (otherExpression)>
</bs-elseif>
<bs-else>
</bs-else>
```
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
<bs-for (value, key of expression)>
</bs-for>
```
All options are optionnals, but `template` option is most likely required if you want to parse something.
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>
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
HTML-like string with no W3C standards enforced. Supports b-side logical tags explained before.
> String
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 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: `<div>{{ variable }}</div>`,
});
// <body>
// <div>This is a new text</div>
// </body>
```
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';
// <body>
// <div>This library is awesome</div>
// </body>
```
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
<script src="b-side.parser.js"></script>
<script>
window['BSide']({
data,
template,
})
</script>
```