UNPKG

4.2 kBMarkdownView Raw
1# jadum
2
3> A lean Jade compiler that understands Browserify and reuses partials
4
5Works just like `jade`, except that the CLI compiles views producing a syntax like below.
6
7```js
8module.exports = function (model) {
9 // view rendering...
10}
11```
12
13The 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
18npm install -S jadum
19```
20
21## CLI
22
23The 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
26jadum views/**/* -o .bin
27```
28
29## API
30
31The API is the same as the API in Jade, but it produces `require` statements instead of inlining `include` statements.
32
33## Comparison
34
35Take as input these two files: `listing.jade` and `item.jade`.
36
37```jade
38h1 This is some awesome listing!
39ul
40 each item in ['a', 'b', 'c']
41 include item
42```
43
44```jade
45li
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
53As 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
56function template(locals) {
57var buf = [];
58var jade_mixins = {};
59var jade_interp;
60
61buf.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
70buf.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
78buf.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
84buf.push("</ul>");;return buf.join("");
85}
86```
87
88If 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
91var jade = require("jadum/runtime");
92module.exports = function listing(locals) {
93var buf = [];
94var jade_mixins = {};
95var jade_interp;
96;var locals_for_with = (locals || {});(function (require) {
97buf.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
107buf.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
115buf.push(require("./item").call(this, locals));
116 }
117
118 locals["item"] = $$local;
119 }
120}).call(this);
121
122buf.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
128MIT