npm's personal messenger

    @gospime/derby-pug

    1.1.1 • Public • Published

    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 makes if, 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>

    Install

    npm i @gospime/derby-pug

    DownloadsWeekly Downloads

    4

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    35.5 kB

    Total Files

    24

    Last publish

    Collaborators

    • kolegm