Added multi-level folder support

[conancat]

Hi there! It's awesome that you've came up with this compiler, I was really having a headache on how to go about this problem as I have tons of template files on the client side, and it's really bad to load and compile many files on the client side! This compiler will help a lot! :D

So I was fiddling around with the compiler and I found that it didn't have multi-level folder support, such as if a file is in "examples/level1/level2/root.jade" the resulting file will render "NS.templates.level1/level2/root", which fails being parse in the browser as the object key is invalid.

So I changed the parser a bit to help accomodate this. The things I have done include:

• Include a global declaration of the group.namespace as an object to avoid "group.namespace is undefined" error on the browser
• Check for multi-folder structure before compiling (checkNamespaces()) at buildGroup()
• If the "template" variable contains "/", split the "/" and return each namespace level as a new declaration (e.g. "level1/level2/root" becomes "template.level1 = {}, template.level1.level2 = {}, template.level1.level2.root = jadeFunction)
• Add in namespace declarations (createNamespaces()) if exists
• Added in regexp check in the compileTemplate function to parse "/" as "." at the compileTemplate() function

I hope this kind of makes sense, lol. I hope this helps! :)

[tauren]

@conancat This sounds great, I'll check out your enhancements soon and get them merged in!

I totally forgot to create the namespacing. My test app already defined NS.templates so it just worked in my tests. Thanks for fixing this! Although I will probably change the way it works, as your solution will break when loading multiple template files that share namespace elements. It would be better to do something more along these lines:

NS = NS || {};
NS.templates = NS.templates || {};
NS.templates.level1 = NS.templates.level1 || {};

Regarding templates in subdirectories, I was considering having an option to walk the entire directory tree within the source directory looking for *.jade files and adding them all. Your code would help with this since it takes care of namespacing.

[conancat]

Yeah you're right dude... just added in the function to output the templates as you suggested, so now the group namespacing checker will run before the template namespacing checker.

And gosh, it's harder than I thought. :x Well it's my first time writing for a node module too, got a lot to learn!

Anyway the "tests" are in the examples folder. Please do check them out ya. :)

As for the directory walking, that will be great as well for people who are have many files to compile. On my side I have like 14 files already, lol. Performance wise I think it's much, much better than compiling Jade in the browser, at least it saves the compiling step from the browser which could slow down initialization. I currently use the compiled templates on http://tgv2.motionworks.com.my:1000/, a project that uses Backbone.js for the frontend, thus needed the JS templates for the dynamic views lol.

Anyway, I would like to ask if you have plans to expand the compiler to support other templating frameworks as well? I have other projects that use other templating frameworks such as Handlebars.js, which supports compiling as well, and it'll be great to have a compiler too. :D Perhaps we could allow the users to define which compiler to use, and let our precompiler to merge and compile the templates together into one JS file?

If you need help, please do let me know! I'd be glad to help! :)

[tauren]

@conancat Thanks again for your efforts on this. I can't get to this right away, but will look over your commits and merge your work in soon.

I too am using backbone and thinking that precompiled templates would be better than compiling them on the client. However, I'm not totally convinced yet especially since the size of the compiled templates is far larger than the templates themselves. See this issue for more details and some ideas on caching things in localStorage: https://github.com/visionmedia/jade/issues/149#issuecomment-1398801

I definitely like the idea of making this project support other templating solutions, especially since compiled jade templates are really quite large. It would be nice to have the option to choose which templating solution you want for each group. Or maybe even specify all the types of templates to include and a single output file could include various templates.

I'm thinking about changing this project name to precompile or tmpl-precompile. What do you think?

[conancat]

Yea actually being able to cache things in localStorage seems to be quite a good idea. As you said, given that there is a tag that we can store in localStorage the date/time/version of the templates compiled, every time the page loads the page checks the localStorage for template version, if there's a newer version we could update the localStorage with the newer version or just run the one within localStorage.

As for the different templates, I tried to compile Handlebars.js using the compiler, but it failed because this template framework apparently stores the variables in the browser directly, unlike Jade's compiler that compiles everything into Javascript functions. In the end my solution was to concatenate all my template files into a JS object and then run the compiler on the browser when page loads. We could actually embed the compile function directly into the JS file if needed, so the browser will start compiling the templates upon page load.

So perhaps tmpl-precompile can support a few functions:

1. Concatenate and compile template files into native JS functions for templating frameworks that support it into a single JS file (e.g. Jade)
2. Concatenate template files into a single JS file, coupled with functions that automatically compiles the template on the browser side for frameworks that support browser compiling so you save up on file size, but uses more client side resources, and also needed to embed the library itself (e.g. Jade and Handlebars)
3. Generate a script snippet that checks localStorage for template versions and stores templates in localStorage if needed

Looking at that, this could be a nifty module to deal with templates concatenation and compilation for the browser. :D

[tauren]

Crap, I should have pulled your changes in before changing the project name. Now I can't automatically merge the changes...

[conancat]

oh lol, crap ahaha.... i think most changes are in the tmpl-precompile.coffee file, the files in the examples folder are just for testing, lol. or should i pull from the new repo again? if you don't mind can you add me as a contributor to this project? :)

[tauren]

@conancat - added you as a contributor, have at it! I'll jump back in and help as soon as I can.

[conancat]

Hey dude! Sorry for being so late, been busy with stuffs lol... So I have merged the namespacing thing with the current master, can you try it out and see if it's okay? :) Imma close this pull request now