residual
v0.1.2
Published
Lightweight framework (Node/browser)
Downloads
3
Readme
Residual - lightweight framework (Node/browser)
This module is experimental, use at your own risk.
Features/principles:
- Renderers defined by returning inner HTML (in a Promise) for element
- chosen by URI Template and CSS selector
- only tag-names, classes and IDs are supported for now
- partial renders - nest another URL (or just a child property) in an element
- server-side: render static page as HTML
- client-side: synchronise DOM (using partial renders)
- chosen by URI Template and CSS selector
- Page router
- based on URI Templates
- each page corresponds to one resource URL (
GET)- For more complex views, define a custom resource URI scheme, e.g.
diff:{A}:{B}
- For more complex views, define a custom resource URI scheme, e.g.
- other methods (
POST/etc.) are "actions" - handlers can redirect display to new URL when finished - hashes resolve against the rest of the URL (compatibility with
- e.g.
/foo/bar#/xyzis interpreted as/xyzfor the purposes of the router. If your route has an actual fragment in it, this will be translated into a double-hash, e.g./foo/bar##/subProp.
- e.g.
- Generate self-contained bundle including config/renderers
- small: ~12KB minified / ~5KB gzipped (plus user-supplied config/renderers)
- only works if all config functions have no closure variables
- Requires ES5 (throws immediately otherwise)
- IE8 and below can just cope with the server-side version
Usage
var engine = require('residual')();
// URL map defined in priority order
engine.map('/json/home', '/');
engine.map('/json/{+url}', '/html/{+url}');
// Define renderer
engine.register('{+url}', '.raw-json', function (url, data, web) {
return '<pre>' + web.escape(JSON.stringify(data)) + '</pre>';
});
// Server-side: get HTML for resource
engine.html('/json', 'body.raw-json').then(function (html) {
var pageHtml = '<html><body class="raw-json">' + html + '</body></html>';
});
// Client-side - fill individual element
engine.fill(document.body, '/json/home');
// Client-side - fill page (title and body) based on uri
engine.start();
// Generate standalone client code with the above config (assuming no closure variables used)
var jsCode = engine.clientCode();
fs.writeFileSync('static/bundle.js', jsCode); // ready to minifyMinifying
When minifying, properties starting with m_ are safe to be mangled. Here is an example use of UglifyJS:
uglifyjs bundle.js --mangle --mangle-props --mangle-regex /^m_/ --output residual.min.js --source-map residual.js.map// In Node
var clientCode = display.clientCode();
fs.writeFileSync('bundle.js', clientCode);
var minified = require('uglify-js').minify('bundle.js', {
mangle: true,
mangleProperties: {regex: /^m_/},
outSourceMap: 'bundle.js.map'
});
fs.writeFileSync('bundle.min.js', minified.code);
fs.writeFileSync('bundle.js.map', minified.map);