render-assoc
v0.0.1
Published
render associative data from level-assoc with hyperkey for live server+client rendering with progressive enhancement
Downloads
10
Readme
render-assoc
render associative data from level-assoc with hyperkey for live server+client rendering with progressive enhancement
example
In the browser, just load hyperkey render modules and specify nested rendering sub-components. In this case, each hackerspace has a nested collection of hackers:
var shoe = require('shoe');
var sock = shoe('/sock');
var rassoc = require('render-assoc');
var render = require('./render/hackerspace.js')();
render.pipe(sock).pipe(rassoc(render, {
hacker: require('./render/hacker.js')
}));
render.appendTo('#hackerspaces');
The associations on the server server-side are:
var level = require('level-test')();
var sub = require('level-sublevel');
var db = sub(level('hyperkey-example.db', { valueEncoding: 'json' }));
var assoc = require('level-assoc')(db);
assoc.add('hackerspace')
.hasMany('hackers', [ 'type', 'hacker' ])
.hasMany('tools', [ 'type', 'tool' ])
;
assoc.add('hacker')
.hasMany('projects', [ 'type', 'project' ])
.hasMany('usage', [ 'type', 'usage' ])
;
assoc.add('tool')
.hasMany('usage', [ 'type', 'usage' ])
;
module.exports = assoc;
we can write a simple server that uses assoc.track()
to plumb up reactive live
updates over websockets:
var http = require('http');
var ecstatic = require('ecstatic')(__dirname + '/static');
var trumpet = require('trumpet');
var fs = require('fs');
var assoc = require('./data.js');
var render = require('./render/hackerspace.js');
var server = http.createServer(function (req, res) {
if (req.url === '/') {
var tr = trumpet();
var q = assoc.list('hackerspace');
var elem = tr.select('#hackerspaces');
elem.setAttribute('data-start', q.startKey);
elem.setAttribute('data-end', q.endKey);
q.pipe(render()).pipe(elem.createWriteStream());
readStream('index.html').pipe(tr).pipe(res);
}
else ecstatic(req, res);
});
server.listen(5000);
var shoe = require('shoe');
var sock = shoe(function (stream) {
stream.pipe(assoc.track()).pipe(stream);
});
sock.install(server, '/sock');
function readStream (file) {
return fs.createReadStream(__dirname + '/static/' + file);
}
And the shared hyperkey rendering code and html looks like:
<div class="hacker">
<i class="name"></i>
</div>
var hyperkey = require('hyperkey');
var fs = require('fs');
var html = fs.readFileSync(__dirname + '/hacker.html');
module.exports = function () {
return hyperkey(html, function (row) {
return { '.name': row.name };
});
};
<div class="hackerspace">
<h1 class="name"></h1>
<div class="hackers"></div>
</div>
var hyperkey = require('hyperkey');
var fs = require('fs');
var html = fs.readFileSync(__dirname + '/hackerspace.html');
var hacker = require('./hacker.js');
module.exports = function () {
return hyperkey(html, function (row) {
return {
'.name': row.name,
'.hackers': (function (stream) {
return {
'data-start': stream.startKey,
'data-end': stream.endKey,
_html: stream.pipe(hacker())
};
})(row.hackers())
};
});
};
Compile the browser code with browserify and brfs and then your nested collections will automatically update as the data changes on the server while preserving server-side rendering!
methods
var rassoc = require('render-assoc');
rassoc(render, subRenderers)
Create a writable stream for assoc.track()
data to be written to across a
websocket from a
hyperkey render
function and an object
of subRenders
mapping assocation types to sub-collection render functions.
In a later release this will be more generalized to account for multiple render targets through the same stream.
install
With npm do:
npm install render-assoc
license
MIT