Skip to content

Commit

Permalink
Merge pull request #9 from terkelg/update-readme
Browse files Browse the repository at this point in the history
Update README documentation
  • Loading branch information
terkelg authored Jun 11, 2024
2 parents f14a6d2 + b7efe25 commit 3d8aaa4
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions readme.md
100755 → 100644
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ Manually creating DOM nested elements can be very troublesome and verbose.
Facon is a tiny utility that makes it easy to create nested DOM elements using template literals and extract references.


There's no magic nor restrictive template logic. All you get are dom references so that you can do whatever you like and take full advantage of the powerful native DOM API.
There's no magic nor restrictive template logic. All you get are DOM references so that you can do whatever you like and take full advantage of the powerful native DOM API.


> **TLDR**: Facon fix the tiring process of creating and assembling nested DOM elements or `.innerHTML` where you later have to query for references manually.
> **TLDR**: Facon fixes the tiring process of creating and assembling nested DOM elements or `.innerHTML` where you later have to query for references manually.
**~~lack of~~ Features**
- Tiny (365 bytes gzipped)
Expand Down Expand Up @@ -75,7 +75,7 @@ document.body.appendChild(node);
let node = f`
<div>
<h1 ref="title">Façon</h1>
<p ref="body">Create nested DOM elements with manner<p>
<p ref="body">Create nested DOM elements with manner</p>
</div>
`;
document.body.appendChild(node);
Expand All @@ -84,8 +84,8 @@ let {title, body} = node.collect();
title.textContent = 'Hello World';

// DOM node appends
let child = f`<b>Hello World</b>;
let parent = f`<div>${child}</div>;
let child = f`<b>Hello World</b>`;
let parent = f`<div>${child}</div>`;
```


Expand All @@ -106,7 +106,7 @@ let node = f`<div>${myNode}</div>`;

// or this way
let myNode = document.createElement('div');
let node = f`<div>${myNode}</div>;
let node = f`<div>${myNode}</div>`;
```


Expand Down Expand Up @@ -151,15 +151,15 @@ Default: `{}`

Optional object reference to assign to.

This can be handy if you have a component and want to be able to access references trough `this`. E.g:
This can be handy if you have a component and want to be able to access references through `this`. E.g:
```js
class MyElement extends Component {

view() {
const view = f`
<div>
<h1 ref="title">Façon</h1>
<p ref="body>Create nested DOM elements with manner<p>
<p ref="body">Create nested DOM elements with manner</p>
</div>
`;
view.collect({to:this});
Expand Down

0 comments on commit 3d8aaa4

Please sign in to comment.