@gospime/derby-pug
v1.1.1
Published
Pug compiler for Derby.js
Downloads
6
Maintainers
Readme
Derby-Pug
Forked from derby-jade
- Pug 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 makesif, else, else if, unless, with, each
compile into derby View-variables - Colons after derby-specific tags are optional
- process.env.DEBUG = 'derby-pug'; enables debug info
- Coffeescript support
Known Issues
- Line numbers in Pug 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-pug
Setting
app.serverUse(module, 'derby-pug');
// before app.loadViews();
Coffeescript
If you want to use Coffeescript instead of Javascript in templates:
app.serverUse(module, 'derby-pug', {coffee: true});
Then you can do something like this:
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
if _session.loggedIn
h1 Hello, {{_session.username}}
else
a(href='/login') Login
compiles to
{{if _session.loggedIn}}
<h1>Hello, {{_session.username}}</h1>
{{else}}
<a href="/login">Login</a>
{{/}}
Another example:
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
{{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
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}}!
Pug + Js
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
Pug + Coffee
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
<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>