examples of xjs usage

cases/case1.md

@@ -0,0 +1,29 @@
+case 1
+------
+
+Rendering local variables.
+All variable rendering should be html-safe.
+
+### case1.xjs
+
+    <?
+      var foo = '<<< This is so great! >>>';
+    ?>
+    <p><?= foo ?></p>
+
+### connect rendering
+
+    app.get('/', xjs.render(__dirname + '/cases/case1.xjs'));
+
+### expected output
+
+    <p>&lt;&lt;&lt; This is so great! &gt;&gt;&gt;</p>
+
+### javascript
+
+    function (out) {
+      var foo = '<<< This is so great! >>>';
+      out.raw('<p>');
+      out.write(foo);
+      out.raw('</p>');
+    }

cases/case2.md

@@ -0,0 +1,26 @@
+case 2
+======
+
+Rendering variables passed in via globals object.
+
+### case2.xjs
+
+    <p><?= foo ?></p>
+
+### connect rendering
+
+    app.get('/', res.render(__dirname + '/cases/case2.xjs', { foo : '"Love it!"' });
+
+### expected output
+
+    <p>&quot;Love it!&quot;</p>
+
+### javascript
+
+    function (out, globals) {
+      use (globals) {
+        out.raw('<p>');
+        out.write(foo);
+        out.raw('</p>');
+      };
+    }

cases/case3.md

@@ -0,0 +1,30 @@
+case 3
+======
+
+Outputting raw data by direct out access.
+
+### case2.xjs
+
+    <?
+      var html = '<p>Pre-rendered crap (hopefully safe)</p>';
+    ?>
+    <div><? out.raw(html) ?></div>
+
+### connect rendering
+
+    app.get('/', res.render(__dirname + '/cases/case3.xjs');
+
+### expected output
+
+    <div><p>Pre-rendered crap (hopefully safe)</p></div>
+
+### javascript
+
+    function (out, globals) {
+      use (globals) {
+        var html = '<p>Pre-rendered crap (hopefully safe)</p>';
+        out.raw('<div>');
+        out.raw(html);
+        out.raw('</div>');
+      }
+    }

cases/case4.md

@@ -0,0 +1,36 @@
+case 4
+======
+
+Storage and re-use of an internal template
+
+### case4.xjs
+
+    <?
+      var name = 'Chris Johnson';
+      var name_template = <span class="name"><?= name ?></span>;
+    ?>
+    <div>
+      I love you <?= name_template ?>
+    </div>
+
+### expected output
+
+    <div>
+      I love you <span class="name">Chris Johnson</span>
+    </div>
+
+### javascript
+
+    function (out, globals) {
+      use (globals) {
+        var name = 'Chris Johnson';
+        var name_template = function (out) {
+          out.raw('<span class="name">');
+          out.write(name);
+          out.raw('</span>');
+        };
+        out.raw('<div>\n  I love you ');
+        out.write(name_template);
+        out.raw('</div>');
+      }
+    }

cases/case5.md

@@ -0,0 +1,35 @@
+case 5
+======
+
+custom tag rendering
+NOTE: It should not be allowed to register tags from within an xjs template,
+      because it's too confusing what the fuck is going on.
+
+### setup
+
+    xjs.registerTag('my:name', function (out, attributes) {
+      out.raw('<span class="name">');
+      out.write(attributes.name);
+      out.raw('</span>');
+    });
+
+### case5.xjs
+
+    <my:name name="Chris Johnson" />
+
+### expected output
+
+    <span class="name">Chris Johnson</span>
+
+### javascript
+
+    function (out, globals) {
+      use (globals) {
+        xjs.registerTag('my', 'name', function (out, parent) {
+          out.raw('<span class="name">');
+          out.write(parent.name);
+          out.raw('</span>');
+        });
+        out.tag('my:name', { name:'Chris Johnson' });
+      }
+    }

cases/case6.md

@@ -0,0 +1,40 @@
+case 6
+======
+
+Custom tag rendering with an inner template.
+
+### setup
+
+    xjs.registerTag('mongo:find', function (out, attr, inner) {
+      out = out.async();
+      mongo.collection(attr.collection).find(attr.query).each(function (doc) {
+        inner.apply(doc, out);
+      });
+      // TODO: close out
+    });
+
+### case6.xjs
+
+    <mongo:find db="foo" collection="bar">
+      <div id="{this._id}"><?= this._id ?></div>
+    </mongo:find>
+
+### expected output
+
+    <div id="3">3</div>
+    <div id="4">4</div>
+    etc.
+
+### javascript
+
+    function (out, globals) {
+      use (globals) {
+        out.tag('mongo:find', { db:'foo', collection:'bar' }, function (out, attr) {
+          out.raw('<div id="');
+          out.write(this._id);
+          out.raw('">');
+          out.write(this._id);
+          out.raw('</div>');
+        });
+      };
+    }