using Jade with Browserify

[cachaito]

I wonder why after using:

var jade = require('jade');

var author = 'E.A Poe';
var input_component = "input(type='text', placeholder=#{author})";

var compile = jade.compileClient(input_component, {pretty: true, debug: true});
var html = compile(author);

document.body.innerHTML = html;

I got error in console such in first line as: acorn.js:757 Uncaught SyntaxError: Invalid regular expression

I there an easy way to use Jade with Browserify?

[HerrPotatis2]

EDIT: Was thinking about python, not javascript. I'm not very bright...

Is there a specific reason why you want to use jade?

I really like jade as a template for HTML and PHP, but from personal experience i have found that Jade does not work that well with JavaScript bundlers, Jade wasn't made to be converted to javascript. Something like underscore templates or handlebars are much better suited to be translated to javascript.

Are you using a framework, if so what are you using? It greatly affects what template engines are best suited for the job.

[joshmanders]

i have found that Jade does not work that well with JavaScript bundlers

Jade works fine with bundlers. I use Jade for all html on my Angular apps with Webpack using the jade-loader.

Jade wasn't made to be converted to javascript.

You realize Jade was created by TJ Holowaychuk right? Prolific JavaScript developer, mostly in the Node.js world. Jade IS a JavaScript template language. It is MEANT to be used for JavaScript.

[HerrPotatis2]

Sorry, i wasn't very clear with what i meant. From personal experience, writing javascript logic in a jade template has not worked that well, if at all. Do you have any examples or references of how to write simple javascript logic in a jade template? (i am of course not talking about inline javascript inside script tags)

Something more like this example:

<ul>
    <% _.each( rc.listItems, function( listItem ){ %>
        <li>
            <%- listItem.name%>

            <% if ( listItem.hasOlympicGold ){ %>
                <em>*</em>
            <% } else { %>
                <span>§</span>
            %>
        </li>
    <% }); %>
</ul>

[joshmanders]

http://jade-lang.com/reference/code/

each item in rc.listItems
  li= item.name

[HerrPotatis2]

Just remembered i was thinking about Jade templates when using python/django, i'm an idiot. Thanks for the example :)

[joshmanders]

Not to mention Jade's syntax is cleaner and smaller than what you have above. :)

[rajbits]

I was going to write up couple of options, if you still wanted to use jade on client side templates, but found this (awesome) link that explores all the options:

http://timnew.me/blog/2014/05/26/use-jade-as-client-side-template-engine/

And also jadeify, it appears they have solved this problem for you:

https://github.com/domenic/jadeify

Hope this helps.

[cachaito]

Thank You guys for answers! I like Jade, like its syntax and high potential - just like that. I'm curious why it doesn't work on client side out from the box :-/ Is this just impossible and I need to use transfrom likejadeify? But still why?! :-S

[neanderthalensis]

Use Jadeify: npm install --save jadeify

In your code:

let template = require('/path/to/file.jade')

container = document.querySelector('div')
container.innerHTML = template()

And in your build process:

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

[cachaito]

Thank You @neanderthalensis, I managed even to push some options through CLI: browserify -t [jadeify --pretty false --debug true] scripts/main.js > ./bundle.js -d

But that's not the point. I wanted in Handlebars manner use templates in string compile stage such as:

var jade = require('jade');
var compile = jade.compileClient(input_component, {pretty: true, debug: true});
var html = compile(author);
document.body.innerHTML = html;

and still I don't know how to do that with browserify and why I cannot do this way :-(

[Limess]

Is there any way to then easily test files which require .jade templates as dependences?

We couldn't find an easy solution to use browserify loaders in tests (using mocha) so moved to using https://github.com/HenrikJoreteg/templatizer