Merge pull request #577 from sethkinast/examples

Adding examples!
linkedin · Mar 24, 2015 · c2360cb · c2360cb
2 parents 9fca1f0 + bd85dea
commit c2360cb
Show file tree

Hide file tree

Showing 29 changed files with 264 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,6 @@ node_modules
 .grunt
 _SpecRunner.html
 tmp
+examples/*/views/*.js
+examples/*/lib/*
+!examples/*/lib/main.js
diff --git a/bower.json b/bower.json
@@ -38,6 +38,7 @@
     "benchmark",
     "bin",
     "docs",
+    "examples",
     "lib",
     "node_modules",
     "src",

diff --git a/examples/amd/.bowerrc b/examples/amd/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "lib"
+}
diff --git a/examples/amd/README b/examples/amd/README
@@ -0,0 +1,11 @@
+To run:
+
+    bower install && ../../bin/dustc -as views/*.dust
+
+Then load `index.html` in your browser.
+
+This example shows how to load Dust as an AMD module using require.js. Templates are stored in the **views** directory and are referenced by their full path, so you can nest templates in subdirectories without any issue.
+
+At the top of `main.js`, Dust AMD loading is enabled by setting `define.amd.dust = true`.
+
+The `-as` flags passed to dustc cause templates to be compiled into individual files (`s`), and compiled as AMD modules (`a`).
diff --git a/examples/amd/bower.json b/examples/amd/bower.json
@@ -0,0 +1,8 @@
+{
+  "name": "dustjs-example-amd",
+  "dependencies": {
+    "dustjs-linkedin": "*",
+    "dustjs-helpers": "*",
+    "requirejs": "*"
+  }
+}
diff --git a/examples/amd/index.html b/examples/amd/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Load Dust.js via AMD</title>
+    <script data-main="lib/main.js" src="lib/requirejs/require.js"></script>
+</head>
+<body></body>
+</html>
diff --git a/examples/amd/lib/main.js b/examples/amd/lib/main.js
@@ -0,0 +1,19 @@
+// Enable Dust AMD loading
+define.amd.dust = true;
+
+// The require.js baseUrl is set to /lib/, but the views are stored outside of lib
+require.config({
+  paths: {
+    "views": "../views"
+  }
+});
+
+// Loading Dust, and then the Dust helpers. Then we can render some Dust!
+require(["dustjs-linkedin/dist/dust-core"], function(dust) {
+  require(["dustjs-helpers/dist/dust-helpers"], function() {
+    dust.render("views/hello", {"version": dust.version}, function(err, out) {
+      if(err) console.error(err);
+      document.getElementsByTagName('body')[0].innerHTML = out;
+    });
+  });
+});
diff --git a/examples/amd/views/hello.dust b/examples/amd/views/hello.dust
@@ -0,0 +1,2 @@
+<p>Hello World!</p>
+{>"views/version"/}
diff --git a/examples/amd/views/version.dust b/examples/amd/views/version.dust
@@ -0,0 +1 @@
+<p>Running Dust version <strong>{version}</strong></p>
diff --git a/examples/basic-browser/.bowerrc b/examples/basic-browser/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "lib"
+}
diff --git a/examples/basic-browser/README b/examples/basic-browser/README
@@ -0,0 +1,7 @@
+To run:
+
+    bower install && ../../bin/dustc views/*.dust --output=lib/compiled.js
+
+Then load `index.html` in your browser.
+
+This example shows how to simply load Dust using script tags. Templates are stored in the **views** directory and are then compiled to a single script file that is included on the page.
diff --git a/examples/basic-browser/bower.json b/examples/basic-browser/bower.json
@@ -0,0 +1,7 @@
+{
+  "name": "dustjs-example-simple",
+  "dependencies": {
+    "dustjs-linkedin": "*",
+    "dustjs-helpers": "*"
+  }
+}
diff --git a/examples/basic-browser/index.html b/examples/basic-browser/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Load Dust.js via AMD</title>
+    <script src="lib/dustjs-linkedin/dist/dust-core.min.js"></script>
+    <script src="lib/dustjs-helpers/dist/dust-helpers.min.js"></script>
+    <script src="lib/compiled.js"></script>
+</head>
+<body>
+  <script src="lib/main.js"></script>
+</body>
+</html>
diff --git a/examples/basic-browser/lib/main.js b/examples/basic-browser/lib/main.js
@@ -0,0 +1,4 @@
+dust.render("views/hello", {"version": dust.version}, function(err, out) {
+  if(err) console.error(err);
+  document.getElementsByTagName('body')[0].innerHTML = out;
+});
diff --git a/examples/basic-browser/views/hello.dust b/examples/basic-browser/views/hello.dust
@@ -0,0 +1,2 @@
+<p>Hello World!</p>
+{>"views/version"/}
diff --git a/examples/basic-browser/views/version.dust b/examples/basic-browser/views/version.dust
@@ -0,0 +1 @@
+<p>Running Dust version <strong>{version}</strong></p>
diff --git a/examples/basic-node/README b/examples/basic-node/README
@@ -0,0 +1,5 @@
+To run:
+
+    npm install && npm start
+
+This is the Hello World of Dust-- the simplest possible compilation example. The template is inlined in the script, and rendered to the console.
diff --git a/examples/basic-node/app.js b/examples/basic-node/app.js
@@ -0,0 +1,12 @@
+var dust = require('dustjs-linkedin');
+
+var tmpl = dust.compile("Hello world! Using Dust version {version}!", "hello");
+dust.loadSource(tmpl);
+
+dust.render("hello", { version: dust.version }, function(err, out) {
+  if(err) {
+    console.error(err);
+  } else {
+    console.log(out);
+  }
+});
diff --git a/examples/basic-node/package.json b/examples/basic-node/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "dustjs-example-simple",
+  "version": "1.0.0",
+  "description": "Simple example of Dust in Node",
+  "main": "app.js",
+  "dependencies": {
+    "dustjs-linkedin": "^2.6.1"
+  },
+  "scripts": {
+    "start": "node app.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}
diff --git a/examples/streaming-hoffman/README b/examples/streaming-hoffman/README
@@ -0,0 +1,11 @@
+To run:
+
+    npm install && npm start
+
+This example shows streaming with Dust and Express using the Hoffman view engine. Hoffman includes a middleware that adds a `stream` method to `res`, allowing you to stream to the browser using the same API you know from `res.render`.
+
+The example proxies dustjs.com through your local server (after an artificial delay) and injects a CDN copy of jQuery. In your browser network waterfall, notice that jQuery starts loading before the page has finished loading, because Dust streams chunks to the browser as they complete.
+
+Hoffman handles template loading and will reload and recompile templates each time they are loaded until you turn view caching on. For production, you'd want to turn caching on.
+
+More info on Hoffman: https://www.npmjs.com/package/hoffman
diff --git a/examples/streaming-hoffman/app.js b/examples/streaming-hoffman/app.js
@@ -0,0 +1,32 @@
+var path = require('path'),
+    hoffman = require('hoffman'),
+    express = require('express'),
+    request = require('request');
+
+var app = express();
+
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'dust');
+app.engine('dust', hoffman.__express());
+
+// This is the important part-- it adds res.stream()
+app.use(hoffman.stream);
+
+app.get('/', function (req, res) {
+  res.stream("hello", {
+    "async": function(chunk, context, bodies, params) {
+      return chunk.map(function(chunk) {
+        // Introducting an artificial delay to make streaming more apparent
+        setTimeout(function() {
+          request('http://www.dustjs.com/')
+          .on('data', chunk.write.bind(chunk))
+          .on('end', chunk.end.bind(chunk));
+        }, 3000);
+      });
+    }
+  });
+});
+
+app.listen(3000, function () {
+  console.log('Visit http://localhost:3000 to see streaming!');
+});
diff --git a/examples/streaming-hoffman/package.json b/examples/streaming-hoffman/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "dustjs-example-hoffman",
+  "version": "1.0.0",
+  "description": "Use Hoffman to enhance Dust streaming with Express",
+  "main": "app.js",
+  "dependencies": {
+    "dustjs-linkedin": "^2.6.1",
+    "express": "^4.12.3",
+    "hoffman": "^0.1.4",
+    "request": "^2.53.0"
+  },
+  "scripts": {
+    "start": "node app.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}
diff --git a/examples/streaming-hoffman/views/dust-site.dust b/examples/streaming-hoffman/views/dust-site.dust
@@ -0,0 +1 @@
+{#async}{.}{/async}
diff --git a/examples/streaming-hoffman/views/hello.dust b/examples/streaming-hoffman/views/hello.dust
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Streaming with Dust</title>
+  <base href="http://www.dustjs.com/">
+</head>
+<body>
+  {>"dust-site"/}
+</body>
+</html>
diff --git a/examples/streaming/README b/examples/streaming/README
@@ -0,0 +1,9 @@
+To run:
+
+    npm install && npm start
+
+This example shows manual streaming with Dust and Express. Express doesn't natively support streaming using a view engine, so we pipe the output of `dust.stream` directly to `res`.
+
+The example proxies dustjs.com through your local server (after an artificial delay) and injects a CDN copy of jQuery. In your browser network waterfall, notice that jQuery starts loading before the page has finished loading, because Dust streams chunks to the browser as they complete.
+
+`dust.onLoad` is manually defined to show Dust how to load templates. By default, Dust will throw an error if you try to render a template without loading it into the Dust cache first.
diff --git a/examples/streaming/app.js b/examples/streaming/app.js
@@ -0,0 +1,32 @@
+var fs = require('fs'),
+    path = require('path'),
+    express = require('express'),
+    request = require('request'),
+    dust = require('dustjs-linkedin');
+
+dust.config.whitespace = true;
+
+dust.onLoad = function(tmpl, cb) {
+  fs.readFile(path.join('./views', path.resolve('/', tmpl + '.dust')),
+              { encoding: 'utf8' }, cb);
+};
+
+var app = express();
+app.get('/', function (req, res) {
+  dust.stream("hello", {
+    "async": function(chunk, context, bodies, params) {
+      return chunk.map(function(chunk) {
+        // Introducting an artificial delay to make streaming more apparent
+        setTimeout(function() {
+          request('http://www.dustjs.com/')
+          .on('data', chunk.write.bind(chunk))
+          .on('end', chunk.end.bind(chunk));
+        }, 3000);
+      });
+    }
+  }).pipe(res);
+});
+
+app.listen(3000, function () {
+  console.log('Visit http://localhost:3000 to see streaming!');
+});
diff --git a/examples/streaming/package.json b/examples/streaming/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "dustjs-example-streaming",
+  "version": "1.0.0",
+  "description": "Simple example of the Dust streaming API",
+  "main": "app.js",
+  "dependencies": {
+    "dustjs-linkedin": "^2.6.1",
+    "express": "^4.12.3",
+    "request": "^2.53.0"
+  },
+  "scripts": {
+    "start": "node app.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}
diff --git a/examples/streaming/views/dust-site.dust b/examples/streaming/views/dust-site.dust
@@ -0,0 +1 @@
+{#async}{.}{/async}
diff --git a/examples/streaming/views/hello.dust b/examples/streaming/views/hello.dust
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Streaming with Dust</title>
+  <base href="http://www.dustjs.com/">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
+</head>
+<body>
+  {>"dust-site"/}
+</body>
+</html>