domenic / jadeify

A simple browserify transform for turning .jade files into template functions

A Browserify Transform for Jade

Jadeify lets you use Jade templates with browserify in the simplest way possible:

var template = require("./template.jade");

document.getElementById("my-thing").innerHTML = template({
    localVar: "value",
    anotherOne: "another value"
});

Setup

When creating your browserify bundle, just add this line:

bundle.transform(require("jadeify"));

or if you are a command line cowboy, something along the lines of

browserify -t jadeify entry.js -o bundle.js

Note that this project peer-depends on Jade and each template will do require("jade/runtime"), so everything will just work: there's no need to add any Jade-related stuff to your bundle manually. (See below if your need to customize this.)

So yeah, now requireing any .jade files will give you back a template function. Have fun!

Configuration

As with most browserify transforms, you can configure jadeify via the second argument to bundle.transform:

bundle.transform(require("jadeify"), { compileDebug: true, pretty: true });

or inside your package.json configuration:

{
    "name": "my-spiffy-package",
    "browserify": {
        "transform": [
            ["jadeify", { "compileDebug": true, "pretty": true }]
        ]
    }
}

Most options given to jadeify will be passed through to Jade's API.

runtimePath option

There is one additional option, runtimePath, which can be used to customize the require statement inserted at the top of every resulting template. If supplied, instead of require("jade/runtime"), the given module ID will be required.

This can be useful if you are using jadeify as a dependency in a standalone library. For example, if your package demo-package depends on both jade and jadeify, you can do

bundle.transform(require("jadeify"), { runtimePath: require.resolve("jade/runtime") });

inside your package. If your package is then located at node_modules/demo-package, and thus its jade dependency is located at node_modules/demo-package/node_modules/jade, this will ensure that the template files output by your library contain the equivalent of require("demo-package/node_modules/jade/runtime"), instead of the default require("jade/runtime"). This way your library completely encapsulates the presence of Jade, and doesn't require its installation at top level.

jadeify's Issues

Where does entry.js come from?

Hi, can you explain what files I should choose when applying browserify?

You give an example

browserify -t jadeify entry.js -o bundle.js

What where does this entry.js come from?

Thanks

Can't get the template to work client side

Hi,

Please see this question on stack-overflow

I've used browserify + browserify-middleware + jadeify to create client-side template code - the javascript is created but I can't find a way to run it from the client side, when I use require.js I get back an undefined instead of the runnable template.

Thanks

support coverify transform

This issue may belong in the coverify module; haven't looked too closely at it yet.

Running:

browserify -t coverify test/*.js --bare | testling | coverify

Results in:

Error: Invalid left-hand side in assignment

template.jade:1
div.message-modal-header= title

I looked briefly at the coverify source. Seems to be making exceptions for require('*.json'). Possibly need a more configurable way to tell coverify what to cover, or there may already be a way I'm missing.

Recommemded i18n implementation to use with Jadeify?

Hello,

I'm finding it hard to find a i18n solution to integrate with Jadeify, which I am using with Express / Browserify / Gulp.

Can anyone make a recommendation for this? And provide a simple example? I'd like to be able to add i18n directly into the jade templates to use in a single-page app.

Thanks!

using with tsify plugin, only jade in the index.ts file is interpolated

Hi,

Thanks for this great transformer! I have been using it with my angular.js app for a while. Recently, I moved to angular2, and the language switched to typescript.

To compile typescript, I'm using the tsify plugin. It seems jadeify properly interpolates the required jade in the index.ts file correctly, but subsequent dependencies have the template variable below undefined:

declare var template:String = require('./template.jade');

console.log(template);

and it shows the template string is undefined.

To solve this problem, I am thinking about running all of the scripts through jadeify first. Is this possible? the tsify is a plugin.

Thanks

-----update--------

actually, the index.ts file's require('./template.jade') did not work at all either.

Allow ignore config

I'm looking to ignore a pattern of files (basically node_modules). The use case is a module that has a jadeify already specified in its package.json. When its two levels deep jadeify tries to jadeify the already compiled js. Maybe i'm missing something and there is a better way to apply transforms only to some files.

I can fork and work on it and then send a pull request but I want to get an idea of whether this is the right path to go down or not.

SyntaxError: Unexpected token

I must admit I am unsure if this is a Jadeify problem at all. However, I have to start somewhere so I appoligse in advance if it is not.

[20:17:23] Starting 'browserify'...

SyntaxError: Unexpected token

Jade

 .jamie

Gulp File

    var gulp = require('gulp');
    var browserify = require('browserify');
    var transform = require('vinyl-transform');
    var uglify = require('gulp-uglify');

    gulp.task('browserify', function () {
        var browserified = transform(function(filename) {
            var b = browserify(filename);
            require("jadeify"), { compileDebug: true, pretty: true }
            return b.bundle();
        });

        return gulp.src(['./frontend/js/app.js'])
            .pipe(browserified)
            //.pipe(uglify())
            .pipe(gulp.dest('./app/www/js'));
    })

If I leave the jade file it will compile into this:

        (function e(t, n, r) {
        function s(o, u) {
            if (!n[o]) {
                if (!t[o]) {
                    var a = typeof require == "function" && require;
                    if (!u && a)return a(o, !0);
                    if (i)return i(o, !0);
                    var f = new Error("Cannot find module '" + o + "'");
                    throw f.code = "MODULE_NOT_FOUND", f
                }
                var l = n[o] = {exports: {}};
                t[o][0].call(l.exports, function (e) {
                    var n = t[o][1][e];
                    return s(n ? n : e)
                }, l, l.exports, e, t, n, r)
            }
            return n[o].exports
        }

        var i = typeof require == "function" && require;
        for (var o = 0; o < r.length; o++)s(r[o]);
        return s
    })({
        1: [function (require, module, exports) {
            /**
             * Created by Hutber on 07/02/2015.
             */
            console.info('jamie');
            console.info('jamie');
            require('../views/index.jade')
        }, {"../views/index.jade": 2}], 2: [function (require, module, exports) {

        }, {}]
    }, {}, [1]);

My Package.json

    "jadeify":"~4.0.1",
    "browserify": "~8.1.3",
    "gulp": "~3.8.10",

Thanks and again sorry

Support extends

Surprised to find that extending a layout does not work - would be nice if it did.

I have several Backbone list item view templates that have common code. I tried extracting that into a common layout including a block content and then extending the base with each variant item view. Didn't work. Is there some existing secret trick that would allow me to do this, or is this a feature request.

Thanks for the amazingly useful code btw.

Can't seem to get jadeify to work with my templates.

This compiles just fine with jade directly and also with harp which uses jade. Any idea why jadeify seems to have so many issues with this template?

.result
    h4 #{name}
    .col-xs-12.col-sm-5.contact-info
        p.location
            i.fa.fa-map-marker
            span Location
            |#{address}
        p.phone-number
            i.fa.fa-phone
            span Phone
            |#{phone}
    .col-xs-12.col-sm-7.details
        h5 Details
        p #{details}

It errors out when you don't specify an element, errors out when you use tabs instead of spaces, errors out on using the variable syntax #{myvar}, and also errors out on classnames with hyphens. Am I doing something wrong?

Fatal error: Cannot set property 'filename' of undefined

jadefiy crashes if no options are passed: "Fatal error: Cannot set property 'filename' of undefined":

https://github.com/domenic/jadeify/blob/master/lib/jadeify.js#L19

Support jade.compileFile

I'm planning to land a new API in jade (pugjs/pug#1596) that I think could be really awesome for browserify. It would allow us to support something like:

var jade = require('jade');
var template = jade.compileFile(__dirname + "/template.jade");

document.getElementById("my-thing").innerHTML = template({
    localVar: "value",
    anotherOne: "another value"
});

The benefit of this would be that it is much closer to the sort of code that you'd expect to see on the server side. It would even allow many modules to share client side and server side code while doing jade rendering.

Would you consider supporting this?

Jade files used

When I include one jade file (A) from another (B) and require the other (B) in a JS file (C), then watchify/jadeify will not see changes made to (A).

What about rename of 'jade' project to 'pugjs'?

npm ERR! peerinvalid Peer [email protected] wants browserify@>= 2.4.0 < 12

npm ERR! peerinvalid Peer [email protected] wants browserify@>= 2.4.0 < 12

Not compile to index.html

Hello, I have two scripts.js where each one have two "require templates"

login.js

layout.js

and I use this command line:
"build": "browserify -t babelify -t jadeify lib/app.js > public/app.js"

but not compile from index.jade to index.html, in fact, after run this command, index.html don't appear and no error appear. I'm use page.js for routes.

Can you help me?, because I don't find the error

Feature: Option to Pre-compile Jade to Static Strings

I have a dashboard site w/ lots of string template bits & UI snippets. I already use Angular's templating client-side, so I wanted to just get HTML strings from my Jade - (I'll be using compile-time config/env vars for locals)

I'm writing a PR to add the option static

{static: true}

... Coming right up w/ tests...

Peer dependencies error with Browserify v11

Calling npm install jadeify:

npm ERR! peerinvalid The package browserify does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants browserify@>= 2.4.0 < 11

The problem is covered by pending PR #35.

Does not work with watchify?

It will write on the first run but when I change jade files that are required by js files that are required by the entry file then watchify will not trigger a recompile.

Support exporting dynamicMixins somehow

Heya so I've made a modified version of jadeify that just looks for mixins in the required jade file and returns them as template functions. It's pretty hacky as jade doesnt expose a nice way to do this currently - but it does work.

It would be possible to integrate that back into this project somehow - the question is should it be? Check out the repo and let me know what you think.

If you think it's a not-too-abhorrent idea I could submit a PR. Or alternatively if you can see a far less hacky way of getting this done please let me know!

Using jadeify as a dependency

Hi.

Instead of writing a gulp file for each of my project, I've created a NPM module that I require instead; https://github.com/Industrial/id-builder

I would like to add the jadeify transform here https://github.com/Industrial/id-builder/blob/issues/27/src/lib/browserify.js#L55 .

The problem I'm having is that when I use id-builder in another project, it will not find jade and error. It seems to take the jade/runtime module from the project that's invoking jadeify, not the project that's requiring it.

Is there a way to solve this without adding jade as a dependency whenever I add id-builder as a dependency?

Command line issue "has no method 'compileClient' while parsing file"

Closed issue

figure out a way to define globals

it would be really nice if we could set the globals option in some way (so we don't have to pass i18n everywhere for instance).

do you think that some kind of option could be passed to jadeify through package.json, like :

{
  "jadeify" : {
    "globals" : "./path/to/globals.js"
  }
}

and :

// path/to/globals.js
module.exports = {
  i18n : require("../i18n")
}

Unexpected character # expected ` `, `\n`, `,`, `!` or `=`

Apologies if this is more a Jade error as the error is that rather than Jadeify. Plus I love jadeify so I feel bad creating an issue. That I'm not 100% sure is anything related to this.

I believe this is a fairly normal setup:

    gulp.task('browserify', function () {
        var bundler = browserify({entries: ['./frontend/js/app.js']});
        var bundle = function () {
            return bundler
                .transform(jadeify)
                .bundle()
                .pipe(source('app.js'))
                .pipe(gulp.dest('./public/js'))
        };
        if (global.isWatching) {
            bundler = watchify(bundler);
            bundler.on('update', bundle);
        }
        return bundle();
    });

The Jade file

.header
   h1 Login
.content
   div
      input(placeholder="Username", name="uname", type="text")
      input(placeholder="Password", name="pword", type="password")
.footer
   a(href="/signup")
      span Create an Account

The call to the jade file

require('../../views/index.jade')({jamie:'hello'})

This will include this inside of app.js

module.exports = function template(locals) {
var buf = [];
var jade_mixins = {};
var jade_interp;

buf.push("<div class=\"header\"><h1>Login</h1></div><div class=\"content\"><div><input placeholder=\"Username\" name=\"uname\" type=\"text\"/><input placeholder=\"Password\" name=\"pword\" type=\"password\"/></div></div><div class=\"footer\"><a href=\"/signup\"><span>Create an Account</span></a></div>");;return buf.join("");
};

Everything is good

Now any changes index.jade will result in the following:

[14:36:14] gulp-notify: [Compile Error] C:\var\www\mywarhammer.co.uk\frontend\views\index.jade:8
    6| var jade_interp;
    7|
  > 8| buf.push("<div class=\"header\"><h1>Login</h1></div><div class=\"content\"><div><input placeholder=\"Username\" name=\"uname\" t
e an Account</span></a></div>");;return buf.join("");
    9| };

Unexpected character h expected ` `, `\n`, `,`, `!` or `=` while parsing file: C:\var\www\mywarhammer.co.uk\frontend\views\index.jade

Sorry again, but is this error jade or jadeify?

Thanks for the time :)

Options in js?

A have a custom parser class for jade.

But as of now, I can't pass it to jadeify, just because it doesn't allow me to specify options in js.

There should be:

bundle.transform(require("jadeify")(opts));

instead of

bundle.transform(require("jadeify"));

I know that change kind-of breaks current API, but that's how most transforms work.
Taking options solely from package.json is strange and counter-productive.

Peer dependencies are preventing usage of latest version of browserify

npm ERR! peerinvalid The package browserify does not satisfy its siblings' peerDependencies requirements!

can the version be bumped?