residual

0.1.2 • Public • Published

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)
  • 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}
    • 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#/xyz is interpreted as /xyz for 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.
  • 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 minify

Minifying

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);

Readme

Keywords

none

Package Sidebar

Install

npm i residual

Weekly Downloads

1

Version

0.1.2

License

ISC

Last publish

Collaborators

  • geraintluff