4.3.4 • Published 1 year ago

@b-side/parser v4.3.4

Weekly downloads
-
License
ISC
Repository
gitlab
Last release
1 year ago

@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/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.

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>
htmlparser
@b-side/base-element@b-side/cli@b-side/core
4.3.2

1 year ago

4.3.1

1 year ago

4.3.4

1 year ago

4.3.3

1 year ago

4.3.0

1 year ago

4.2.7

1 year ago

4.2.9

1 year ago

4.2.8

1 year ago

4.2.10

1 year ago

4.2.11

1 year ago

4.2.12

1 year ago

4.2.6

2 years ago

4.2.5

2 years ago

4.2.4

2 years ago

4.1.7

2 years ago

4.2.3

2 years ago

4.2.2

2 years ago

4.2.1

2 years ago

4.2.0

2 years ago

4.1.4

2 years ago

4.1.3

2 years ago

4.1.6

2 years ago

4.1.5

2 years ago

4.1.1

2 years ago

4.1.0

2 years ago

3.0.0

2 years ago

4.0.1

2 years ago

4.0.0

2 years ago

4.0.3

2 years ago

4.0.2

2 years ago

2.4.1

2 years ago

2.4.0

2 years ago

2.4.2

2 years ago

2.3.0

3 years ago

2.2.3

3 years ago

2.3.1

3 years ago

2.2.2

3 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.5.2

3 years ago

1.5.1

3 years ago

1.5.0

3 years ago

1.4.5

3 years ago

1.4.4

3 years ago

1.4.3

3 years ago

1.4.2

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.0

3 years ago

1.2.1

3 years ago

1.1.0

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago