💡 Adding client side javascript ideation #13

dwyl · Oct 17, 2016 · 5047d6d · 5047d6d
1 parent d8b179d
commit 5047d6d
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 11 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
 coverage
+compiled.js
diff --git a/.gitignore b/.gitignore
@@ -41,3 +41,5 @@ db
 
 #goodparts symlink
 .eslintrc.js
+
+compiled.js
diff --git a/example/new/server.js b/example/new/server.js
@@ -0,0 +1,46 @@
+'use strict';
+
+var Hapi = require('hapi');
+var Vision = require('vision');
+var assert = require('assert');
+var HapiRiot = require('../../lib/index.js');
+var Inert = require('inert');
+var Path = require('path');
+
+var server = new Hapi.Server();
+var port = process.env.PORT || 8000;
+
+server.connection({ port: port });
+
+server.register([Vision, Inert], function (err) {
+  assert(!err); // Halt start if Vision fails to load.
+
+  server.views({
+    engines: { tag: HapiRiot },
+    relativeTo: __dirname,
+    path: 'views',
+    compileOptions: {}
+  });
+
+  server.route({
+    method: 'GET',
+    path: '/',
+    handler: function (request, reply) {
+      reply.view('index', { counter: 5 });
+    }
+  });
+
+  server.route({
+    method: 'GET',
+    path: '/riot.js',
+    handler: function (request, reply) {
+      reply.file(Path.join(__dirname, 'compiled.js'));
+    }
+  });
+
+  server.start(function () {
+    console.log('Server is listening at ' + server.info.uri); // eslint-disable-line
+  });
+});
+
+module.exports = server;
diff --git a/example/new/views/index.tag b/example/new/views/index.tag
@@ -0,0 +1,9 @@
+<index>
+  <label>{title}</label>
+  <button onclick="{changeName}">{ 'Counter: ' + counter }</button>
+  <script>
+    this.counter = opts.counter;
+
+    changeName() { this.counter += 1 }
+  </script>
+</index>
diff --git a/lib/index.js b/lib/index.js
@@ -4,10 +4,7 @@ var Path = require('path');
 var Riot = require('riot');
 var fs = require('fs');
 
-var DEFAULTS = {
-  doctype: '<!DOCTYPE html>',
-  removeCache: process.env.NODE_ENV !== 'production'
-};
+var DEFAULTS = { removeCache: process.env.NODE_ENV !== 'production' };
 
 /*
  * Riot does not Automatically resolve and require nested tags.
@@ -38,6 +35,7 @@ function unCache (cache) {
   });
 }
 
+
 /*
  * Vision expects this format a compile object that returns a runtime method.
  * template is the template name e.g: 'home' or 'dashboard'
@@ -50,19 +48,18 @@ function compile (template, compileOpts) {
     var mergedOpts = Object.assign(baseOpts, renderOpts);
     var CACHE = loadTags(mergedOpts.filename);
     var View = require(mergedOpts.filename); //eslint-disable-line
-    var output = mergedOpts.doctype;
-
-    output += Riot.render(View, context);
+    var output = '<!DOCTYPE html><html><head/><body><div id="riot_content">'
+      + Riot.render(View, context)
+      + '</div><script src="https://cdn.jsdelivr.net/riot/2.6/riot.min.js"></script><script src="./riot.js"></script><script>setTimeout(function () {riot.mount("#riot_content", "index",'
+      + JSON.stringify(context)
+      + ')}, 3000)</script></body></html>'
+    ;
     /*
      * Delete the view and layout Tags from the require cache
      * so we don't need to restart the app to see view changes.
      * Skipped By default when NODE_ENV=production`.
      */
     if (mergedOpts.removeCache) {
-      // Do we need a layout option?
-      // if (mergedOpts.layout) {
-      //   delete require.cache[require.resolve(layoutPath)];
-      // }
       unCache(CACHE);
     }
 

diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "decache": "^4.1.0",
     "goodparts": "^1.1.1",
     "hapi": "^15.0.3",
+    "inert": "^4.0.2",
     "istanbul": "^0.4.5",
     "level": "^1.4.0",
     "nodemon": "^1.10.2",