# virtual-jade

> Compile Jade templates to virtual-dom functions

Latest version **1.0.0** (published 2021-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install virtual-jade
pnpm add virtual-jade
yarn add virtual-jade
bun add virtual-jade
```

## 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 |
| Published | 2021-09-23 |
| First published | 2015-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 25.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | Ted Dumitrescu |
| Maintainers | tdumitrescu, jongleberry, jbwyme |
| Keywords | virtual, dom, jade, html, maquette, pug, reactive, snabbdom, template, templating, virtual-dom |

## Links

- npm: https://www.npmjs.com/package/virtual-jade
- Repository: https://github.com/tdumitrescu/virtual-jade
- Issues: https://github.com/tdumitrescu/virtual-jade/issues
- npm.io page: https://npm.io/package/virtual-jade

## Dependencies (4)

- [jade](https://npm.io/package/jade.md) ^1.9.2
- [with](https://npm.io/package/with.md) ^5.0.0
- [debug](https://npm.io/package/debug.md) ^2.1.3
- [lazyrequire](https://npm.io/package/lazyrequire.md) ^1.2.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-09-23
- 0.12.0 — 2020-04-15
- 0.11.1 — 2019-03-01
- 0.11.0 — 2019-02-20
- 0.10.0 — 2018-12-17
- 0.9.1 — 2018-02-03
- 0.9.0 — 2017-04-26
- 0.8.2 — 2017-02-23
- 0.8.1 — 2017-01-13
- 0.8.0 — 2017-01-03
- 0.7.1 — 2016-12-09
- 0.7.0 — 2016-12-08
- 0.6.0 — 2016-12-04
- 0.5.1 — 2016-11-18
- 0.5.0 — 2016-10-17
- … 19 more at https://npm.io/package/virtual-jade/versions

## README

# virtual-jade

[![NPM version][npm-image]][npm-url]
[![Build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]

Compile your [jade](https://github.com/jadejs/jade) templates into Virtual DOM functions. Works with multiple Virtual DOM libraries, including:
- [virtual-dom](https://github.com/Matt-Esch/virtual-dom)
- [snabbdom](https://github.com/snabbdom/snabbdom)
- [maquette](https://github.com/AFASSoftware/maquette)

For people who like declarative reactive templating, but don't like writing HTML or JSX.

Create a template:

```jade
.items
  each item in items
    .item(
      class={active: item.active}
      data-id=item.id
    )
      .item-title= item.title
      .item-description= item.description
```

`require()` your template as a function
and use a rendering system like [main-loop](https://github.com/Raynos/main-loop):

```js
const mainLoop = require('main-loop');

const template = require('./items.jade');

const initState = {
  items: [],
};

const loop = mainLoop(initState, template, {
    create: require("virtual-dom/create-element"),
    diff: require("virtual-dom/diff"),
    patch: require("virtual-dom/patch"),
});
document.body.appendChild(loop.target);
```

Then update whenever you'd like!

```js
loop.update({
  items: [
    {
      id: 'asdf',
      title: 'some title',
      description: 'some description',
      active: false,
    },
  ],
});
```

## Notes

- For easy configuration with Webpack, use [virtual-jade-loader](https://github.com/tdumitrescu/virtual-jade-loader).
- To translate with Babel, use [babel-plugin-virtual-jade](https://github.com/jbwyme/babel-plugin-virtual-jade).
- Can be used with any CommonJS environment with client-side `require()`s.
- All templates must return a single root element.
- Requires you to install the appropriate virtual-dom library in your top-level app.

## API

### fnStr = render(str, options)

`str` is the jade source as a string.
`fnStr` is output JS that you should include as a CommonJS module.

Options are:

- `filename`: path and name of Jade source file for `str`.
  Required if you use `include` or `extends` in templates.
- `marshalDataset=true`: whether to convert `data-` attributes
  to `dataset` members. Set to false to treat as props with the same
  name as the attributes (if your target Virtual DOM renderer does
  not support the `dataset` API).
- `pretty=false`: whether to beautify the resulting JS.
  Requires you to install `js-beautify` yourself.
- `propsWrapper`: optional object to wrap Jade attributes in; for example, with `propsWrapper = 'props'`, the template `div(foo="bar")` will translate to something like `h('div', {props: {foo: 'bar'}})` rather than `h('div', {foo: 'bar'})`
- `rawProps`: whether to skip Jade attribute -> HTML property conversion; this is set to true in the default Snabbdom configuration
- `serializeAttrsObjects`: special behavior for the Snabbdom-style `attrs` attribute object. If true, object values within an `attrs` attribute will be automatically stringified (since HTML element attributes are always strings); for example, in `div(attrs={foo: {hello: 'world'}})` the `foo` attr will end up in HTML as `"{"hello":"world"}"` (rather than `"[object Object]"`).
- `runtime`: optional override to include any arbitrary Virtual DOM library that defines the `h()` hyperscript function. E.g. `var h = require('my-special-lib/h');`
- `vdom`: name of the Virtual DOM library configuration to load (currently either `virtual-dom` or `snabbdom`).

Returns a string that looks like:

```js
function render(locals) {
  var result_of_with = /* stuff */
  if (result_of_with) return result_of_with.value;;
}
```

You are expected to `eval()` the string if you want the source as a function.
Otherwise, just create a module in the following format:

```js
const js = `module.exports = ${fnStr}`;
```

Within code blocks in your template code, you can access Jade mixin functions via the `$mixins` variable.
In virtual-jade, mixins boil down to functions that take arguments and return a tree of `h(name, attrs, children)`.
They are like [React stateless components](https://reactjs.org/docs/components-and-props.html).
Accessing them via `$mixins` is useful for special cases where you want to pass around handles to blocks of Jade code as callback functions (see example below).

```jade
mixin item(x)
  .item
    .more-tree= x + 1

list-virtual-scroll(props={itemRenderer: $mixins.item})
```

```jade
// in list-virtual-scroll.jade
each val in allItems.slice(startIdx, endIdx)
  = props.itemRenderer(val)
```

## Development notes
- Install deps: `npm install`
- Run tests: `npm test`
- Run linter: `npm run lint`
- Generate coverage report: `npm run test-cov`
- Run all the verifications together: `npm run test-ci`
- Run tests with verbose debugging output (compiled functions as well as rendered HTML): `DEBUG=test npm test`

[travis-image]: https://img.shields.io/travis/tdumitrescu/virtual-jade/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/tdumitrescu/virtual-jade
[coveralls-image]: https://img.shields.io/coveralls/tdumitrescu/virtual-jade.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/tdumitrescu/virtual-jade
[npm-image]: https://img.shields.io/npm/v/virtual-jade.svg
[npm-url]: https://www.npmjs.com/package/virtual-jade

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