# gulp-pug-hyperscript

> Compile Pug/Jade files into Hyperscript

Latest version **1.0.3** (published 2016-10-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-pug-hyperscript
pnpm add gulp-pug-hyperscript
yarn add gulp-pug-hyperscript
bun add gulp-pug-hyperscript
```

## 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.3 |
| Published | 2016-10-18 |
| First published | 2016-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.9.0 |
| Dependencies | 6 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | doublerebel |
| Maintainers | doublerebel |
| Keywords | gulpplugin, pug, jade, hyperscript, virtual-dom, template, gulp, plugin, transform |

## Links

- npm: https://www.npmjs.com/package/gulp-pug-hyperscript
- Repository: https://github.com/nextorigin/gulp-pug-hyperscript
- Homepage: http://github.com/nextorigin/gulp-pug-hyperscript
- Issues: https://github.com/nextorigin/gulp-pug-hyperscript/issues
- npm.io page: https://npm.io/package/gulp-pug-hyperscript

## Dependencies (6)

- [jade](https://npm.io/package/jade.md) ^1.11.0
- [merge](https://npm.io/package/merge.md) ^1.2.0
- [through2](https://npm.io/package/through2.md) ^2.0.1
- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.2
- [js-beautify](https://npm.io/package/js-beautify.md) ^1.6.4
- [virtual-jade](https://npm.io/package/virtual-jade.md) ^0.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2016-10-18
- 1.0.2 — 2016-07-16
- 1.0.1 — 2016-07-16
- 1.0.0 — 2016-07-13

## README

# gulp-pug-hyperscript

[![Build Status][ci-master]][travis-ci]
[![Coverage Status][coverage-master]][coveralls]
[![Dependency Status][dependency]][david]
[![devDependency Status][dev-dependency]][david]
[![Downloads][downloads]][npm]

Compiles [Pug/Jade](https://github.com/pugjs/pug) templates to [Hyperscript](https://github.com/dominictarr/hyperscript).

[![NPM](https://nodei.co/npm/gulp-pug-hyperscript.png?downloads=true&downloadRank=true&stars=true)](https://npmjs.org/package/gulp-pug-hyperscript)


## About

**gulp-pug-hyperscript** is a gulp plugin to compile [Pug/Jade](https://github.com/pugjs/pug) templates to [Hyperscript](https://github.com/dominictarr/hyperscript).  Usable with [maquette](http://maquettejs.org/), [virtual-dom](https://github.com/Matt-Esch/virtual-dom), [react](https://github.com/mlmorg/react-hyperscript), or any other DOM library that supports Hyperscript.

This package was created by smashing [**gulp-iced-coffee**](https://github.com/doublerebel/gulp-iced-coffee) and [**virtual-jade-loader**](https://github.com/tdumitrescu/virtual-jade-loader) together until they fit.  It uses [**virtual-jade**](https://github.com/tdumitrescu/virtual-jade) to compile from Pug/Jade to Hyperscript.

## Installation
```sh
npm install --save-dev gulp-pug-hyperscript
```

## Usage

```javascript
var pugHyperscript = require('gulp-pug-hyperscript');

gulp.task('pug', function() {
  gulp.src('./src/views/*.pug')
    .pipe(pugHyperscript().on('error', gutil.log))
    .pipe(gulp.dest('./public/'))
});
```

### Error handling

gulp-pug-hyperscript will emit an error for cases such as invalid pug syntax. If uncaught, the error will crash gulp.

You will need to attach a listener (i.e. `.on('error')`) for the error event emitted by gulp-pug-hyperscript:

```javascript
var pugStream = pugHyperscript({pretty: false});

// Attach listener
pugStream.on('error', function(err) {});
```

In addition, you may utilize [gulp-util](https://github.com/wearefractal/gulp-util)'s logging function:

```javascript
var gutil = require('gulp-util');

// ...

var pugStream = pugHyperscript();

// Attach listener
pugStream.on('error', gutil.log);

```

Since `.on(...)` returns `this`, you can compact it as inline code:

```javascript

gulp.src('./src/views/*.pug')
  .pipe(pugHyperscript().on('error', gutil.log))
  // ...
```

## Options

The options object supports the same options as [**virtual-jade**](https://github.com/tdumitrescu/virtual-jade), with three additional options:
```coffee
  silent:   true
  runtime:  vjade.runtime
  class:    false
  marshallDataset: true
```

`silent: false` will dump the pre- and post-processed template to the console for debugging.

`vjade.runtime` [defaults to](https://github.com/tdumitrescu/virtual-jade/blob/b5405858c65378828b6b27b92420dc1297a2a50e/lib/index.js#L16) `var h = require('virtual-dom/h');`.  To use Maquette or another Hyperscript library, replace `vjade.runtime` string with the appropriate string of code.

`class` replaces `className` attribute with the regular `class` attribute.  This is necessary for Maquette and some other renderers.

`marshallDataset`, when false, will prevent virtual-jade from turning `data-
*` attributes into a `dataset` Object.  This is necessary for Maquette and some other renderers.

## License

MIT

  [ci-master]: https://img.shields.io/travis/nextorigin/gulp-pug-hyperscript/master.svg?style=flat-square
  [travis-ci]: https://travis-ci.org/nextorigin/gulp-pug-hyperscript
  [coverage-master]: https://img.shields.io/coveralls/nextorigin/gulp-pug-hyperscript/master.svg?style=flat-square
  [coveralls]: https://coveralls.io/r/nextorigin/gulp-pug-hyperscript
  [dependency]: https://img.shields.io/david/nextorigin/gulp-pug-hyperscript.svg?style=flat-square
  [david]: https://david-dm.org/nextorigin/gulp-pug-hyperscript
  [dev-dependency]: https://img.shields.io/david/dev/nextorigin/gulp-pug-hyperscript.svg?style=flat-square
  [david-dev]: https://david-dm.org/nextorigin/gulp-pug-hyperscript#info=devDependencies
  [downloads]: https://img.shields.io/npm/dm/gulp-pug-hyperscript.svg?style=flat-square
  [npm]: https://www.npmjs.org/package/gulp-pug-hyperscript

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