# spraycan

> Simple and lightweight library for generating markup.

Latest version **0.4.0** (published 2016-03-15) · ISC license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2016-03-15 |
| First published | 2016-03-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Brent Lewis |
| Maintainers | blewis008 |
| Keywords | markup |

## Links

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

## Recent versions

- 0.4.0 (latest) — 2016-03-15
- 0.3.0 — 2016-03-15
- 0.2.1 — 2016-03-09
- 0.2.0 — 2016-03-09
- 0.1.0 — 2016-03-01

## README

# spraycan (beta)

`spraycan` is a simple and lightweight library for generating markup using pure JavaScript.

## Usage

```javascript
var spraycan = require('spraycan');
var div = spraycan.div;

var markup = div('philly cheesesteak');         // <div>philly cheesesteak</div>
```

Nesting elements works as expected. Comma-separated elements will be siblings:

```javascript
var spraycan = require('spraycan');
var ul = spraycan.ul;
var li = spraycan.li;

var markup = ul(                                // <ul>
    li('slice of rye bread'),                   //   <li>slice of rye bread</li>
    li('provolone cheese'),                     //   <li>provolone cheese</li>
    li('basil pesto'),                          //   <li>basil pesto</li>
    li('romaine lettuce'),                      //   <li>romaine lettuce</li>
    li('turkey'),                               //   <li>turkey</li>
    li('slice of rye bread')                    //   <li>slice of rye bread</li>
);                                              // </ul>
```

If the first parameter is an array, the elements in the array become attributes:

```javascript
var spraycan = require('spraycan');
var body = spraycan.body;
var div = spraycan.div;
var h1 = spraycan.h1;

var markup = body(                              // <body>
    div(['class="header"'],                     //   <div class="header">
        h1(['style="color: #00e;"'], 'Title')   //     <h1 style="color: #00e;">Title</h1>
    ),                                          //   </div>
    div('content'),                             //   <div>content</div>
    div(['id="footer"'], 'footer')              //   <div id="footer">footer</div>
);                                              // </body>
```

...and you can use a shorthand syntax for ID and class:

```javascript
var spraycan = require('spraycan');
var body = spraycan.body;
var div = spraycan.div;
var h1 = spraycan.h1;

var markup = body(                              //<body>
    div(['.header'],                            //  <div class="header">
        h1(['.header-title'], 'My Title')       //    <h1 class="header-title">My Title</h1>
    ),                                          //  </div>
    div('content'),                             //  <div>content</div>
    div(['#footer', '.footer'], 'footer')       //  <div id="footer" class="footer">footer</div>
);                                              //</body>
```

You can generate custom tags by using the `tag` function:

```javascript
var spraycan = require('spraycan');
var div = spraycan.div;

var tag = spraycan.tag;
var myCustomTag = tag('my-custom-tag');

var markup = div(                               // <div>
    myCustomTag('some text')                    //   <my-custom-tag>some text</my-custom-tag>
);                                              // </div>
```

## Why?

`spraycan` arose out of a desire to generate static markup for my blog. I only wanted to use React's `renderToStaticMarkup` function, but doing so required several libraries, and I could never actually get `gulp` to understand JSX. Thus, `spraycan` was born - no dependencies and trivial to use.

## Name

spraycans are used in graffiti -> tagging -> HTML tags -> *groan*.

## License

[ISC](https://en.wikipedia.org/wiki/ISC_license)

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