1 | # jadum
|
2 |
|
3 | > A lean Jade compiler that understands Browserify and reuses partials
|
4 |
|
5 | Works just like `jade`, except that the CLI compiles views producing a syntax like below.
|
6 |
|
7 | ```js
|
8 | module.exports = function (model) {
|
9 | // view rendering...
|
10 | }
|
11 | ```
|
12 |
|
13 | The other difference is that the traditional Jade compiler inlines partials when it finds `include` statements, whereas `jadum` uses `require` statements to reuse partials, saving precious bytes in client-side code.
|
14 |
|
15 | ## Install
|
16 |
|
17 | ```shell
|
18 | npm install -S jadum
|
19 | ```
|
20 |
|
21 | ## CLI
|
22 |
|
23 | The CLI works the same way as the one in `jade`, but it always compiles views for the client-side, as Common.JS modules.
|
24 |
|
25 | ```shell
|
26 | jadum views/**/* -o .bin
|
27 | ```
|
28 |
|
29 | ## API
|
30 |
|
31 | The API is the same as the API in Jade, but it produces `require` statements instead of inlining `include` statements.
|
32 |
|
33 | ## Comparison
|
34 |
|
35 | Take as input these two files: `listing.jade` and `item.jade`.
|
36 |
|
37 | ```jade
|
38 | h1 This is some awesome listing!
|
39 | ul
|
40 | each item in ['a', 'b', 'c']
|
41 | include item
|
42 | ```
|
43 |
|
44 | ```jade
|
45 | li
|
46 | span Here comes item:
|
47 | span Note that this is quite a big template file
|
48 | span But it's included everywhere, because Jade!
|
49 | span So that's awesome... but compiling becomes an issue...
|
50 | span=item
|
51 | ```
|
52 |
|
53 | As the `item.jade` template grows, every template that depends on it will grow twice as much, as the included template _(`item.jade`)_ **is inlined twice** in its parent _(`listing.jade`)_ template! Here is the output of `jade`.
|
54 |
|
55 | ```js
|
56 | function template(locals) {
|
57 | var buf = [];
|
58 | var jade_mixins = {};
|
59 | var jade_interp;
|
60 |
|
61 | buf.push("<h1>This is some awesome listing!</h1><ul>");
|
62 | // iterate ['a', 'b', 'c']
|
63 | ;(function(){
|
64 | var $$obj = ['a', 'b', 'c'];
|
65 | if ('number' == typeof $$obj.length) {
|
66 |
|
67 | for (var $index = 0, $$l = $$obj.length; $index < $$l; $index++) {
|
68 | var item = $$obj[$index];
|
69 |
|
70 | buf.push("<li><span>Here comes item:</span><span>Note that this is quite a big template file</span><span>But it's included everywhere, because Jade!</span><span>So that's awesome... but compiling becomes an issue...</span><span>" + (jade.escape(null == (jade_interp = item) ? "" : jade_interp)) + "</span></li>");
|
71 | }
|
72 |
|
73 | } else {
|
74 | var $$l = 0;
|
75 | for (var $index in $$obj) {
|
76 | $$l++; var item = $$obj[$index];
|
77 |
|
78 | buf.push("<li><span>Here comes item:</span><span>Note that this is quite a big template file</span><span>But it's included everywhere, because Jade!</span><span>So that's awesome... but compiling becomes an issue...</span><span>" + (jade.escape(null == (jade_interp = item) ? "" : jade_interp)) + "</span></li>");
|
79 | }
|
80 |
|
81 | }
|
82 | }).call(this);
|
83 |
|
84 | buf.push("</ul>");;return buf.join("");
|
85 | }
|
86 | ```
|
87 |
|
88 | If we use `jadum`, however, we don't have these issues. We'll always have a fixed size determined by the length of the path passed to `require` statements. Pretty neat! Since `jadum` understands Browserify it won't hope for the best, in terms of expecting the Jade runtime to be globally included in your code. That's why there's the extra `require` at the top for the runtime. Browserify will take over when compiling the template, making sure it's only included once. Furthermore, if you use thee template in various places, then it will only be included once. That's where you save the vast majority of bytes.
|
89 |
|
90 | ```js
|
91 | var jade = require("jadum/runtime");
|
92 | module.exports = function listing(locals) {
|
93 | var buf = [];
|
94 | var jade_mixins = {};
|
95 | var jade_interp;
|
96 | ;var locals_for_with = (locals || {});(function (require) {
|
97 | buf.push("<h1>This is some awesome listing!</h1><ul>");
|
98 | // iterate ['a', 'b', 'c']
|
99 | ;(function(){
|
100 | var $$local = locals["item"];
|
101 | var $$obj = ['a', 'b', 'c'];
|
102 | if ('number' == typeof $$obj.length) {
|
103 |
|
104 | for (var $index = 0, $$l = $$obj.length; $index < $$l; $index++) {
|
105 | var item = locals["item"] = $$obj[$index];
|
106 |
|
107 | buf.push(require("./item").call(this, locals));
|
108 | }
|
109 |
|
110 | } else {
|
111 | var $$l = 0;
|
112 | for (var $index in $$obj) {
|
113 | $$l++; var item = locals["item"] = $$obj[$index];
|
114 |
|
115 | buf.push(require("./item").call(this, locals));
|
116 | }
|
117 |
|
118 | locals["item"] = $$local;
|
119 | }
|
120 | }).call(this);
|
121 |
|
122 | buf.push("</ul>");}.call(this,"require" in locals_for_with?locals_for_with.require:typeof require!=="undefined"?require:undefined));;return buf.join("");
|
123 | }
|
124 | ```
|
125 |
|
126 | # License
|
127 |
|
128 | MIT
|