mysociety / node-jade-amd Goto Github PK

View Code? Open in Web Editor NEW

24.0 11.0 13.0 83 KB

Helpers for working with Jade templates in an AMD setting

License: MIT License

Makefile 1.99% JavaScript 93.13% HTML 4.88%

node-jade-amd's Introduction

Jade to AMD conversion helpers

This module lets you use Jade easily on the browser in an AMD environment - like RequireJS.

It provides:

a method to return an AMD wrapped Jade runtime.js
a method to compile Jade templates to AMD wrapped functions
connect middleware to serve the complied templates for development
example of a build that puts files in the right place for something like RequireJS to bundle
Jade version agnostic - it uses the Jade that you've npm installed.

Installation

npm install jade-amd

Introduction

See the README.md file in the example folder. It contains a guided tour through all the moving parts.

Components

These are the interesting bits:

Connect middleware

The middleware is there for when you are developing. It intercepts requests for template js and compiles and serves the templates directly. This means that you don't need to make any changes to the browser-side code.

var jadeAmd = require('jade-amd');
app.use( '/js/templates/', jadeAmd.jadeAmdMiddleware({}) );

Jade Runtime

Jade ships with a runtime.js that lets you run precompiled templates on the client with out requiring the whole of the Jade templating system. Before Jade v0.31.0 this script needs to be wrapped to work with AMD loaders such as RequireJS. The following command wraps the runtime if needed, otherwise just passes it through unchanged.

# wrap Jade's runtime.js in AMD semantics
jade-amd --runtime > public/js/jadeRuntime.js

Compile and wrap the templates

Goes through all the .jade files and compiles them to JavaScript, and then wraps them for AMD loaders. See the README.md and Makefile in the example folder for more details on how to integrate into your project.

# compile and wrap you templates
jade-amd --from views/ --to public/js/templates

Using the Jade templates on the browser.

Assuming that you have used RequireJS your browser JavaScript will now look something like this:

require([ 'templates/person' ], function(personTemplate) {
  var rendered_content = personTemplate({ name: 'Joe Bloggs' });
});

And you can use exactly the same template on the server side!

Inspiration

pugjs/pug#634

node-jade-amd's People

Contributors

Stargazers

Watchers

Forkers

jfromaniello oroce benagricola martenlienen fabslab zhhb sharian psixdev jtillmann mborman lbeschastny

node-jade-amd's Issues

jadeRuntime not necessary anymore

I was working with an updated version of Jade in the client side. I was using jade-amd to export templates and runtime.js, but I realized that just templates define wrapper is enough and I used the runtime.js without modification with success.

For example,

Copy runtime.js to an accesible path from Browser, I renamed it to jadeRuntime, in that way, the module is registered as jadeRuntime, the same that wrapped templates uses.

In a main.js:

require.config({
  paths: {
      jadeRuntime: 'libs/jadeRuntime'
  }
});

I pre-compiled the jade templates with jade-amd
jade-amd --from templates_dir --to client_dir

Apparently runtime.js is AMD-compatible since pugjs/pug@72043cd#diff-180a4c8e5bf3b0c453ab1a7e06c9e0ceL2

Best,

Edwin Miguel

Error: Cannot find module 'findit'

Package does not work with new version of findit.

custom wrapper around compiled jade templates

Please add option to change wrapper.

For example I like to add underscore.js (it can be especially useful for client side) and momentjs(formatting dates) to compiled templates.

Here's my own jade compiler: https://gist.github.com/1707225

But your one looks much more prettier, and I would like to use it.

Error: Line 2: Unexpected token (

Error: Line 2: Unexpected token (
Error: Cannot parse file: jadeRuntime.js for comments. Skipping it. Error is:
Error: Line 2: Unexpected token (

it looks like it's wrapping the function with a parens

var (function(e){if("function"==typeof bootstrap)bootstrap("jade",e);else if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else if("undefined"!=typeof ses){if(!ses.ok())return;ses.makeJade=e}else"undefined"!=typeof window?window.jade=e():global.jade=e()})(function(){var define,ses,bootstrap,module,exports;

as you can see

var (function

can you fix?

Path issues on windows

When using the compiler / wrapper command, the regExp that is used to determine the "local_path" fails for windows paths that contain the "" character. The slashes need to be escaped. However, using node's path.relative() method solves the problem nicely. PR to come shortly.

Pug renaming?

Will this module ever be renamed and adated to pug?

Warning about deprecation

Using version 0.2.2. I ran a simple test on my project. jade-amd --from views --to build/compiledTemplates. I get the following warning for every file in views. Looks like there was a fix for this over a year ago. I verified my code is current. Let me know if you need more info.

Warning: The `client` option is deprecated, use the `jade.compileClient` method instead
at Function.res.toString (C:\workspace\checklist\node_modules\jade-amd\node_modules\jade\lib\index.js:222:17)
at Object.exports.toAmdString (C:\workspace\checklist\node_modules\jade-amd\lib\jade-amd.js:28:84)
at C:\workspace\checklist\node_modules\jade-amd\bin\jade-amd:81:31
at C:\workspace\checklist\node_modules\jade-amd\node_modules\mkdirp\index.js:47:26
at FSReqWrap.oncomplete (fs.js:95:15)

result of "jade-amd --runtime" fails because "Module name "fs" has not been loaded yet for context"

I'm learning node, so apologies in advance for my ignorance.

I'm trying to run some jade templates from my unit tests, using require.js. I have the compiled templates included, but need to include the runtime. I tried using jade-amd --runtime to wrap the runtime.js so it would work with require.js. The result fails though with "Module name "fs" has not been loaded yet for context: _. Use require([])".

I guess I'm missing something because I don't see how this can work. fs is a node.js module that is not supported from browsers, so how could this work? require('fs') is in the original runtime.js since 2011 (https://github.com/visionmedia/jade/blame/master/lib/runtime.js) so it doesn't seem like a regression in Jade.

I suspect I'm doing something else wrong and this codepath isn't normally hit from the browser. This is all so new to me though I thought maybe I'm overlooking something obvious you could point out.