# travrs

> Helper library for creating DOM structures from string templates

Latest version **1.0.0-alpha.4** (published 2019-02-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install travrs
pnpm add travrs
yarn add travrs
bun add travrs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.4 |
| Published | 2019-02-20 |
| First published | 2019-02-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Wojciech Ludwin, @ludekarts |
| Maintainers | ludekarts |

## Links

- npm: https://www.npmjs.com/package/travrs
- Repository: https://github.com/ludekarts/travrs
- Homepage: https://github.com/ludekarts/travrs#readme
- Issues: https://github.com/ludekarts/travrs/issues
- npm.io page: https://npm.io/package/travrs

## Recent versions

- 1.0.0-alpha.4 (latest) — 2019-02-20
- 1.0.0-alpha.3 — 2019-02-19
- 1.0.0-alpha.2 — 2019-02-13
- 1.0.0-alpha.1 — 2019-02-13

## README

# travrs
Helper library for creating DOM structures from string templates.


## Instalation

#### With NPM
```
npm install -save travrs
```

#### With Browser
```
<script src="https://unpkg.com/travrs@1.0.0-alpha.3" charset="utf-8"></script>
```


## API

- **createElement(selector, children?)** - creates single DOM element. The *children* param can be eaither *innerHTML* or *HTMLElement*.
- **template(structure)** - creates DOM structure base on the string template.
- **include(element)** - inserts existing DOM element into specified place in template.


## Usage

#### Create element syntax
Travrs uses CSS-like abbreviation syntax for creating DOM nodes:

```
import {createElement} from "travrs";

const div = createElement("div#divId.classOne.classTwo[title="My Title" data-hello="world"]", "This is content");
```

Above code crates following div element:

```
<div id="divId" class="classOne classTwo" title="My Title" data-hello="world">
  This is content
</div>
```


#### Basic
Travrs uses indentation to detect parent-child relation between noeds:

```
import {template} from "travrs";

const element = template(`
  div.hello
    h2 > "Hello from Travrs!"  
`);

document.querySelector("body").appendChild(element);

```


#### With references
Using `@referenceName::` in your template you can retrive this *tagged* node from **template()** function:

```
import {template} from "travrs";

const [element, refs] = template(`
  div.hello
    h2 > "Hello from Travrs!"
    @subtitle::span > "I'm subtitle with reference."
`);

console.lod(refs.subtitle.textContent);
document.querySelector("body").appendChild(element);

```

#### With include()
Using `include()` in your template you can place existing node inside created structure:

```
import {template, createElement, insert} from "travrs";

const node = createElement("p", "Hello from insert node.");
const element = template(`
  div.hello
    h2 > "Hello from Travrs!"    
    ${insert(node)}
`);

document.querySelector("body").appendChild(element);

```

---
_Source: https://npm.io/package/travrs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._