mirror of
https://github.com/sweidac/peasy.git
synced 2025-07-27 19:31:55 +02:00
Adds a readme.
This commit is contained in:
47
README.md
Normal file
47
README.md
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
# Peasy - Makes Elements easy
|
||||||
|
|
||||||
|
Peasy is a [template string tagging function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) that parses HTML from the template string and returns Elements.
|
||||||
|
|
||||||
|
This makes dynamic creation easy-peasy while being as lightweight as possible.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import html from 'peasy';
|
||||||
|
|
||||||
|
const foo = html`<div class="foo"></div>`;
|
||||||
|
|
||||||
|
foo.innerText = 'i now have an element to interact with';
|
||||||
|
|
||||||
|
document.body.append(foo);
|
||||||
|
```
|
||||||
|
|
||||||
|
Of course, you can also go multiline:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import html from 'peasy';
|
||||||
|
|
||||||
|
const multiline = html`
|
||||||
|
<section class="deeper">
|
||||||
|
<h1>Complicated Structure</h1>
|
||||||
|
<p>Peasy removes empty whitespace between elements so you don't end up
|
||||||
|
with nasty collapsed TextNodes.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
```
|
||||||
|
|
||||||
|
It get's more fancy! Thanks to the magic of tagging functions, you can also append
|
||||||
|
other elements inline:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import html from 'peasy';
|
||||||
|
|
||||||
|
const bar = html`<h2>Gnarly</h2>`;
|
||||||
|
|
||||||
|
const foo = html`
|
||||||
|
<div class="foo">
|
||||||
|
${bar /* bar is an actual Element! */}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
```
|
Reference in New Issue
Block a user