A workaround to Jade include paths being resolved relative to the root of the tree, not to the Jade file itself in broccoli-jade

broccoli-jade path problem workaround.md

broccoli-jade has an issue with resolving relative include paths. This issue is due to broccoli logic, not to broccoli-jade, but until something changes in either broccoli core or broccoli-jade, here's a way to work around the problem!

I solved this problem with a little bit of broccoli-static-compiler and moving my index.jade file.

First I moved all jade files to a single directory. This seems to be the way you should lay out your project if you want to work with Broccoli, since you're always pointing to directories when working with trees.

As far as Jade files in my project goes, it consists of this index.jade, which includes a bunch of partials, and a few knockout component templates. I don't want to compile the partials, but I do want to compile the components. So I laid out my project (calling the jade folder views) like this:

Brocfile.js
app/
    views/
        index.jade
        partials/
            _my-partial.jade
        components/
            my-component.jade
build/

My build folder looks like this:

Brocfile.js
app/
build/
    index.html
    components/
        my-component.html

What I had to do to resolve the include path conflict was to temporarily move the views directory so that the include paths that are actually relative to the root of the tree, not to the Brocfile would be resolved correctly. I also had to remove the partials directory so that those files wouldn't be compiled (and I did that using broccoli-file-remover).

This is what my Brocfile.js ended up looking like:

"use strict";

var compileJade   = require("broccoli-jade"),
    compileStatic = require("broccoli-static-compiler"),
    exclFromTree  = require("broccoli-file-remover");

var html = exclFromTree("app/views", {
    path: "partials"
});
html = compileStatic(html, {
    srcDir: "/",
    destDir: "app/views"
});
html = compileJade(html);
html = compileStatic(html, {
    srcDir: "app/views",
    destDir: "/"
});

module.exports = html;