pagelet

tries to provide a way to use NPM to distribute web components with as little abstraction as possible

uses plain index.js, style.css, index.html etc
works in multiple environments

example (intentionally verbose)

consider a module called 'simple-button':

module.exports = function addButton(page, containerID) {
  page.querySelector('head').innerHTML += '<style type="text/css">' + fs.readFileSync('./style.css') + '</style>'
  var container = page.querySelector('#' + containerID)
  container.innerHTML = fs.readFileSync('./button.html')
  return page
}

theoretical usage:

var page = require('pagelet')(fs.readFileSync('./index.html'))
var addButton = require('simple-button')
addButton(page)

deploy targets

client side offline

the fs.readFileSync calls will be inlined (with browserify) and the entire executable js bundle will be stored in indexeddb. an app cache manifest 'bootloader' will be supplied that will load the cached program from indexeddb in the event that the user tries to load the app without and internet connection

node

thanks to modules like cheerio node can render the example code and serve pages, e.g. httpServerResponse.end(page.html()). this would be useful for local development.

static site:

a static site generator written in node could write out the page object as index.html and automagically deploy to gh-pages/s3/etc