Skip to content
render associative data from level-assoc with hyperkey for live server+client rendering with progressive enhancement
JavaScript
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example
LICENSE
index.js
package.json
readme.markdown

readme.markdown

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

Something went wrong with that request. Please try again.