# derby-jade

> Jade for Derby.js

Latest version **0.6.21** (published 2016-01-05) · 0 weekly downloads

## Install

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

Provides the command `derby-jade`.

## 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.6.21 |
| Published | 2016-01-05 |
| First published | 2014-02-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Vladimir Makhaev |
| Maintainers | cray0000, vmakhaev |

## Links

- npm: https://www.npmjs.com/package/derby-jade
- Repository: https://github.com/derbyparty/derby-jade
- Issues: git://github.com/derbyparty/derby-jade/issues
- npm.io page: https://npm.io/package/derby-jade

## Dependencies (5)

- [jade](https://npm.io/package/jade.md) ~1.3.1
- [debug](https://npm.io/package/debug.md) ~1.0.2
- [mkdirp](https://npm.io/package/mkdirp.md) ~0.5.0
- [commander](https://npm.io/package/commander.md) ~2.6.0
- [coffee-script](https://npm.io/package/coffee-script.md) ~1.7.1

## Recent versions

- 0.6.21 (latest) — 2016-01-05
- 0.6.20 — 2016-01-05
- 0.6.19 — 2015-08-18
- 0.6.18 — 2015-07-28
- 0.6.17 — 2015-01-28
- 0.6.15 — 2014-10-18
- 0.6.14 — 2014-10-12
- 0.6.13 — 2014-10-04
- 0.6.12 — 2014-07-09
- 0.6.11 — 2014-07-09
- 0.6.10 — 2014-06-27
- 0.6.9 — 2014-06-27
- 0.6.8 — 2014-06-27
- 0.6.7 — 2014-06-21
- 0.6.6 — 2014-06-21
- … 6 more at https://npm.io/package/derby-jade/versions

## README

# Derby-Jade

- Jade compiler for Derby
- Derby 0.6 version is the only supported (for previous Derby use 0.5 branch)
- Supports derby-specific tags that ends with `:` and makes `if, else, else if, unless, with, each` compile into derby View-variables
- Colons after derby-specific tags are optional
- process.env.DEBUG = 'derby-jade'; enables debug info
- Coffeescript support

## Known Issues
- Line numbers in Jade errors can be wrong, because we compile file by parts
- If you on Coffescript, use this.contextfield or @.contextfield to access context and @fieldname to access component fields as in original Derby syntax

### Installation
```
npm install derby-jade
```
### Setting
```js
app.serverUse(module, 'derby-jade');
// before app.loadViews();
```

### Coffeescript

If you want to use Coffeescript instead of Javascript in templates:

```js
app.serverUse(module, 'derby-jade', {coffee: true});
```
Then you can do something like this:
```html
if a and b
  p 
    a(on-click="console.log c or 'log'") {{d or 'Click Me'}}
  script.
    here = canbe + coffee and script
```

### Usage

## Derby.js-specific syntax

### Conditionals, `each`, `with`

```jade
if _session.loggedIn
  h1 Hello, {{_session.username}}
else
  a(href='/login') Login
```
compiles to
```html
{{if _session.loggedIn}}
    <h1>Hello, {{_session.username}}</h1>
{{else}}
    <a href="/login">Login</a>
{{/}}
```

Another example:
```jade
if _page.flash as #flash
  if #flash.error
    ul.alert.alert-error
      each #flash.error
        li {{this.error}}
  if #flash.info
    ul.alert.alert-success
      each #flash.info as #info
        li {{#info}}
else
  p No notifications
```
 compiles to
```html
{{if _page.flash as #flash}}
    {{if #flash.error}}
        <ul class="alert alert-error">
            {{each #flash.error}}
                <li>{{this.error}}</li>
            {{/}}
        </ul>
    {{/}}
    {{if #flash.info}}
        <ul class="alert alert-success">
            {{each #flash.info as #info}}
                <li>{{#info}}</li>
            {{/}}
        </ul>
    {{/}}
{{else}}
    <p>No notifications</p>
{{/}}
```

### `import:` and template declarations

```jade
import:(src='./auth', ns='')
import(src='./games')

Title:
  | My cool app

Body
  view(name='welcome', title='Welcome {{_session.username}}')
    p We are glad to see you!

Footer:
  view(name='copyright')

welcome
  h1 {{@title}}
  | {{@content}}

copyright:
  p Use it however you want {{_session.username}}!
```


## Jade + Js
```jade
import(src='./home', ns='home')
import:(src='./about')

Body:
  each _page.users as #user
    if #user && #user.id
      a(on-click='click(#user && #user.id)') {{#user && #user.name}}
    else if #user || #user.id
      p {{#user.id}}
    else
      p nothing
    view(name='{{#user.id || #user.name}}')
    p {{unescaped #user.name}}

  p
    script.
      window.scrollTo(0 || 1, 0 && 1)
    //script.
      window.location = window.location
    p
      script.
        history.go(-2)
      // p bla-bla
  script history.go(2)
  script(src='/script.js')
  script.
    history.go(1)

component
  p {{@name}}
  if _page.name || @name && this.field
    div {{show(@name)}}
  script.
    history.go(0)

input
  p a

index:
  layout:body
    view(name="matches-you-liked")

matches-you-liked:
  h1 Matches you liked
```

## Jade + Coffee
```jade
import(src='./home', ns='home')
import:(src='./about')

Body:
  each _page.users as #user
    if #user and #user.id
      a(on-click='click #user and #user.id') {{#user and #user.name}}
    else if #user or #user.id
      p {{#user.id}}
    else
      p nothing
    view(name='{{#user.id or #user.name}}')
    p {{unescaped #user.name}}

  p
    script.
      window.scrollTo 0 or 1, 0 and 1
    //script.
      window.location = window.location
    p
      script.
        history.go -2
      // p bla-bla
  script history.go 2
  script(src='/script.js')
  script.
    history.go 1

component
  p {{@name}}
  if _page.name or @name and @.field
    div {{show @name}}
  script.
    history.go 0

input
  p a

index:
  layout:body
    view(name="matches-you-liked")

matches-you-liked:
  h1 Matches you liked
```

## Result
```html
<import: src="./home" ns="home">
<import: src="./about">
<Body:>
  {{each _page.users as #user}}
    {{if #user && #user.id}}<a on-click="click(#user && #user.id)">{{#user && #user.name}}</a>    {{else if #user || #user.id}}
      <p>{{#user.id}}</p>
    {{else}}
      <p>nothing</p>
    {{/}}
    <view name="{{#user.id || #user.name}}"></view>
    <p>{{unescaped #user.name}}</p>
  {{/}}
  <p>
    <script>
      window.scrollTo(0 || 1, 0 && 1)
    </script>
    <p>
      <script>
        history.go(-2)
      </script>
    </p>
  </p>
  <script>history.go(2)</script>
  <script src="/script.js"></script>
  <script>
    history.go(1)
  </script>
<component:>
  <p>{{@name}}</p>
  {{if _page.name || @name && this.field}}
    <div>{{show(@name)}}</div>
  {{/}}
  <script>
    history.go(0)
  </script>
<input:>
  <p>a</p>
<index:>
  <layout:body>
    <view name="matches-you-liked"></view>
  </layout:body>
<matches-you-liked:>
  <h1>Matches you liked</h1>
```

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