https://github.com/gugutz/snabbx

Composable snabbdom virtual-nodes using tagged template strings
https://github.com/gugutz/snabbx

Last synced: 27 days ago
JSON representation

Composable snabbdom virtual-nodes using tagged template strings

• Host: GitHub
• URL: https://github.com/gugutz/snabbx
• Owner: gugutz
• License: mit
• Created: 2017-05-20T20:06:15.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-02-07T20:30:01.000Z (almost 6 years ago)
• Last Synced: 2024-11-16T05:51:27.561Z (about 2 months ago)
• Language: JavaScript
• Size: 111 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Snabbx

[![npm (scoped)](https://img.shields.io/npm/v/snabbx.svg)](https://www.npmjs.com/package/snabbx)

[![Travis](https://img.shields.io/travis/gugutz/snabbx.svg)](https://travis-ci.org/gugutz/snabbx)

[![Coveralls](https://img.shields.io/coveralls/gugutz/snabbx.svg)](https://coveralls.io/github/gugutz/snabbx?branch=master)

[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)

> Composable snabbdom virtual-nodes using tagged template strings

## Table of contents

-   [Install](#install)

-   [Usage](#usage)

-   [API](#api)

-   [Contribute](#contribute)

-   [License](#license)

## Install

This project uses [node](http://nodejs.org) and [npm](https://npmjs.com).

Go check them out if you don't have them locally installed.

```sh

$ npm install --save snabbx

```

## Usage

```js

import {html, render} from 'snabbx'

const app = html`
Hello world!
`


render(document.getElementById('app'), app)

```

## API

### html

Create a virtual node.

**Parameters**

-   `template` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** HTML template.

**Examples**

```javascript

html`

  


    
Hey There

    


    dom

  


`

```


Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** a virtual node.

### render

Make the diff of two virtual node and render them.

**Parameters**

-   `oldNode` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** virtual node to be modified.

-   `newNode` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** virtual node to be rendered.

**Examples**

```javascript

const oldNode = html`

  


    
Hey There

    


    dom

  


`


const newNode = html`

  


    Hello

  


`


render(oldNode, newNode)

```

## Contribute

See the [contributing file](CONTRIBUTING.md).

## License

[MIT License](LICENSE) © [Gustavo P Borges](https://gugutz.github.io/)