Giter Site home page Giter Site logo

yivo / pug-ruby Goto Github PK

View Code? Open in Web Editor NEW
31.0 5.0 4.0 1.8 MB

๐Ÿถ Compile Jade and Pug from Ruby.

License: MIT License

Ruby 86.06% HTML 5.83% JavaScript 8.11%
jade pug ruby ruby-gem jade-template-engine pug-template-engine pugjs jade-templates pug-templates gem

pug-ruby's Introduction

๐Ÿถ Compile Jade and Pug from Ruby

Gem Version Build Status

jade

pug

About

pug-ruby is a gem that allows you to easily compile Jade and Pug templates from Ruby.

You can compile both Jade and Pug:

You can choose what compiler to use:

  • system compiler โ€“ compiler that is installed globally via NPM.
  • shipped compiler โ€“ compiler that is shipped with the gem as Web version.

Available versions of shipped compilers are listed below.

You can lock the Jade / Pug version:

NEEDED_JADE_VERSION = "1.9.2"

unless Jade.compiler.version == NEEDED_JADE_VERSION
  raise "Jade #{NEEDED_JADE_VERSION} needed. You have #{Jade.compiler.version}."
end

You can configure globally or per compilation:

Jade.config.pretty = true
Jade.compile "div Hello, Jade!", pretty: false

You can render template or compile it to the JavaScript function:

Jade.compile "div=greeting", locals: { greeting: "Hello, Jade!" } # => "<div>Hello, Jade!</div>"
Jade.compile "div=greeting", client: true                         # => "(function(jade) { function template(locals) {var buf = [];var jade_mixins = {};var jade_interp;;var locals_for_with = (locals || {});(function (greeting) {buf.push("<div>" + (jade.escape(null == (jade_interp = greeting) ? "" : jade_interp)) + "</div>");}.call(this,"greeting" in locals_for_with?locals_for_with.greeting:typeof greeting!=="undefined"?greeting:undefined));;return buf.join("");}; return template; }).call(this, jade);"

Advanced language features like include, extends and block are supported (only system compilers):

//- File: /var/www/app/views/header.jade
ul
  li: a(href='/') Home
//- File: /var/www/app/views/layout.jade
doctype html
html
  head
      title Application
  body
    header
      include ./header.jade
Jade.use :system

Jade.compile File.read("/var/www/app/views/layout.jade"), filename: "/var/www/app/views/layout.jade"
  # => "<!DOCTYPE html><html><head><title>Application</title></head><body><header><ul><li><a href="/">Home</a></li></ul></header></body></html>"

Installing gem

RubyGems users

  1. Run gem install pug-ruby --version "~> 2.0.0".
  2. Add require "pug-ruby" to your code.

Bundler users

  1. Add to your Gemfile:
gem "pug-ruby", "~> 2.0.0"
  1. Run bundle install.

Installing Jade

Only install if you want to use system compiler.

Install Jade globally via npm:

npm install --global jade

You may require sudo depending on your system.

Installing Pug

Only install if you want to use system compiler.

Install Pug globally via npm:

npm install --global pug

You may require sudo depending on your system.

Switching Jade / Pug version

The gem is shipped with different prebuilt versions of Jade and Pug. That prebuilt versions are Web version, e.g. they are limited to browser JavaScript. Advanced Jade / Pug features like includes, extends, block, and others require filesystem access. You will not be able to use that features while dealing with shipped Jade / Pug. Use system Jade / Pug in such cases.

Switching the version permanently:

Pug.use "2.0.0"      # You have just switched to shipped Pug 2.0.0.
Pug.compiler.version # Returns "2.0.0".

Pug.use :system      # You have just switched to system Pug.
Pug.compiler.version # Returns the version of your system-wide installed Pug.

Switching the version temporarily:

Jade.use "1.11.0" # You have just switched to shipped Jade 1.11.0.

Jade.use "1.9.2" do
  # You have just switched to shipped Jade 1.9.2.
  Jade.compiler.version # Returns "1.9.2".

  # Do you stuff.
end

# You have been switched back to the 1.11.0.
Jade.compiler.version # Returns "1.11.0".

Switching to the system Jade / Pug:

# Pass :system to switch to the system Jade / Pug.
Jade.use :system
Pug.use  :system

Shipped versions of Jade:

  • 1.0.0
  • 1.0.1
  • 1.0.2
  • 1.1.0
  • 1.1.1
  • 1.1.2
  • 1.1.3
  • 1.1.4
  • 1.1.5
  • 1.2.0
  • 1.3.0
  • 1.3.1
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.5.0
  • 1.6.0
  • 1.7.0
  • 1.8.0
  • 1.8.1
  • 1.8.2
  • 1.9.0
  • 1.9.1
  • 1.9.2
  • 1.10.0
  • 1.11.0

Shipped versions of Jade runtime:

  • 1.0.0
  • 1.0.1
  • 1.0.2
  • 1.1.0
  • 1.1.1
  • 1.1.2
  • 1.1.3
  • 1.1.4
  • 1.1.5
  • 1.2.0
  • 1.3.0
  • 1.3.1
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.5.0
  • 1.6.0
  • 1.7.0
  • 1.8.0
  • 1.8.1
  • 1.8.2
  • 1.9.0
  • 1.9.1
  • 1.9.2
  • 1.10.0
  • 1.11.0

Shipped versions of Pug:

  • 2.0.0-beta1
  • 2.0.0-beta2
  • 2.0.0-beta3
  • 2.0.0-beta4
  • 2.0.0-beta5
  • 2.0.0-beta6
  • 2.0.0-beta7
  • 2.0.0-beta8
  • 2.0.0-beta9
  • 2.0.0-beta10
  • 2.0.0-beta11
  • 2.0.0-beta12
  • 2.0.0-rc.1
  • 2.0.0-rc.2
  • 2.0.0-rc.3
  • 2.0.0-rc.4
  • 2.0.1
  • 2.0.2
  • 2.0.3

Shipped versions of Pug runtime:

  • 2.0.0
  • 2.0.1
  • 2.0.2

Configuring Jade / Pug

Accessing configuration:

Jade.config

Getting configuration options:

Jade.config.pretty  # => false
Jade.config.pretty? # => false

Setting configuration options:

Jade.config.pretty = true

Setting custom configuration options:

Jade.config.custom_option = "value"

Serializing configuration:

Jade.config.to_h
  # => { filename: nil, doctype: nil, pretty: false, self: false, compile_debug: false, globals: [], name: "template" }

The documentation for configuration options can be found here:

Pass an options to Jade#compile or Pug#compile as second argument to override global config:

Jade.compile "h1 Title\ndiv Content"
  # => "<h1>Title</h1><div>Content</div>"
  
Jade.compile "h1 Title\ndiv Content", pretty: true
  # => "<h1>Title</h1>\n<div>Content</div>"  

Running tests

  1. Install both Jade and Pug: npm install --global jade pug.
  2. Install gem dependencies: bundle install.
  3. Finally, run tests: bundle exec rake test.

pug-ruby's People

Contributors

yivo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

pug-ruby's Issues

pug-2.0.0.min.js is not included

Hello, great gem!

Running into a problem though. pug-2.0.0.min.js is not included when I install your gem.

So this: Pug.use "2.0.0" does not work.

I am currently using this instead for the moment: Pug.use "2.0.0-beta10"

Here are the different pug js files that are included.

pug-2.0.0-beta10.min.js
pug-2.0.0-beta11.min.js
pug-2.0.0-beta12.min.js
pug-2.0.0-beta1.min.js
pug-2.0.0-beta2.min.js
pug-2.0.0-beta3.min.js
pug-2.0.0-beta4.min.js
pug-2.0.0-beta5.min.js
pug-2.0.0-beta6.min.js
pug-2.0.0-beta7.min.js
pug-2.0.0-beta8.min.js
pug-2.0.0-beta9.min.js
pug-2.0.0-rc.1.min.js
pug-2.0.0-rc.2.min.js
pug-2.0.0-rc.3.min.js
pug-2.0.0-rc.4.min.js

Slow compiler makes loading times longer when rendering views

This is an awesome project, and I'd like to use it to convert some of the components I currently have written in slim to pug. This is because there is a frontend module in the app that has to render the same components but with javascript (with a webpack loader pug works very well).

However I noticed that any additional Pug.compile ... (or Jade.compile for that matter) takes an extra few milliseconds and if you end up having 20+ of these in one view the page takes a couple of seconds to load which makes the experience much worse than using native slim templates.

Is there a way to compile a template once and then render it with different locals? Because that's essentially the biggest issue, I have 20+ of the same component (the template) with different contents. When you compile a pug template in Javascript you can then call the render function with different locals, is there a way to do this with this library?

Thanks

Tilt integration

Could you work with Tilt (Generic interface to multiple Ruby template engines) team to add pug-ruby to community supported template.

I also asked at their side. rtomayko/tilt#346

Thanks

This project is awesome! I always dream of being able to use pug in ruby because all template languages in Ruby sucks, only Slim has similar syntax but does not ship all the features of pug.

Use locally installed pug

Hey, I have also mentioned this in the other repo which I am using (DougBeney/jekyll-pug#13) but is there any way to make pug-ruby use pug installed locally rather than globally? It is not working with nvm, and also installing globally introduces other problems. If there's any way I can help solve this, please let me know! I'd love to help out if it is at all possible to resolve this issue.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.