# pug-vdom

> The pug-vdom can compile a pug template into a render function that can create a virtual dom tree by using a library such as `virtual-dom`

Latest version **1.1.2** (published 2020-08-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install pug-vdom
pnpm add pug-vdom
yarn add pug-vdom
bun add pug-vdom
```

## 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.1.2 |
| Published | 2020-08-27 |
| First published | 2017-07-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 33.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | batiste.bieler@gmail.com |
| Maintainers | batiste |

## Links

- npm: https://www.npmjs.com/package/pug-vdom
- Repository: https://github.com/batiste/pug-vdom
- Homepage: https://github.com/batiste/pug-vdom#readme
- Issues: https://github.com/batiste/pug-vdom/issues
- npm.io page: https://npm.io/package/pug-vdom

## Dependencies (5)

- [pug-load](https://npm.io/package/pug-load.md) ^2.0.9
- [pug-lexer](https://npm.io/package/pug-lexer.md) ^3.1.0
- [pug-linker](https://npm.io/package/pug-linker.md) ^3.0.3
- [pug-parser](https://npm.io/package/pug-parser.md) ^2.0.2
- [pug-runtime](https://npm.io/package/pug-runtime.md) ^2.0.3

## Recent versions

- 1.1.2 (latest) — 2020-08-27
- 1.1.1 — 2019-10-14
- 1.1.0 — 2019-07-23
- 1.0.12 — 2019-04-29
- 1.0.11 — 2019-04-26
- 1.0.10 — 2019-01-09
- 1.0.9 — 2018-12-28
- 1.0.8 — 2018-07-18
- 1.0.7 — 2018-04-20
- 1.0.6 — 2018-04-09
- 1.0.5 — 2018-04-09
- 1.0.4 — 2018-03-25
- 1.0.3 — 2018-03-25
- 1.0.2 — 2017-07-12

## README

# pug-vdom

The pug-vdom can compile a pug template into a render function that
can create a virtual dom tree by using a library such as `virtual-dom`

## Install

``` shell
  npm install pug-vdom
```

## Usage

``` js
  var pugVDOM = require('pug-vdom')
  var ast = pugVDOM.ast('mytemplate.pug', './basedir')
  var compiler = new pugVDOM.Compiler(ast)
  var code = compiler.compile()
```

The code variable contain a render function with this signature:  

``` js
 function render(context, h) {
  return Array(h(), h(), ...)
 }
```

The return value is a list of hyperscript node, the hyperscript function (https://github.com/hyperhype/hyperscript)
is the one provided as the second parameter.

An convenient function can be used to compile your pug files into
directly usable module

``` js
var vDom = require('./pug-vdom')
vDom.generateFile('input.pug', 'output.pug.js', './basedir')
```

Then typically you can use the resulting file like this

``` js
var render = require('./output.pug.js') // importing the render function of this template
var h = require('virtual-dom/h') // we use virtual hyperscript function
var diff = require('virtual-dom/diff')
var patch = require('virtual-dom/patch')
var createElement = require('virtual-dom/create-element')
//runtime library is required and puts 'pugVDOMRuntime' into the global scope.
require('pug-vdom/runtime')

var tree = render({variable: 1}, h)
var rootNode = createElement(tree[0]) // we expect only node at the root from our template
document.querySelector('main').appendChild(rootNode)

function liveRender () {
  var newTree = render({variable: 2}, h)
  var domDiff = diff(tree[0], newTree[0])
  patch(rootNode, domDiff)
  tree = newTree
}
```

If you are using Browserify, a transform is available https://github.com/gryphonmyers/pugvdomify

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