jcblw

// require() some stuff from npm (like you were using browserify)
// and then hit Rebuild to run it on the right

var 
dom = require( 'domla' ),
div = dom.div,
button = dom.button,
el = (
  div( { className: 'wrapper' },
      button( { onClick: appendMsg }, 'append msg' ),

jcblw

var dom = require( 'domla' ),
   	div = dom.div,
    ul = dom.ul,
    li = dom.li,
    h1 = dom.h1, el;
// ^^ that will be so much better with destructuring 
// let { div, ul, li, h1 } = require( 'domla' );

el = (
	div( { className: 'wrapper' }, 

jcblw

var vsvg = require( 'vsvg' ),
  paths = require( 'vsvg-paths' ),
  svg = vsvg.svg,
  g = vsvg.g,
  rect = vsvg.rect,
  text = vsvg.text;

el = (
  svg( { xmlns: 'http://www.w3.org/2000/svg', width: 500, height: 500 }, 
    g ( { className: 'group-rects' }, 

jcblw

View

This is made to setup a life cycle for view and also some basic conventions to make setting up a view really easy, and allowing the view to be very memory friendly.

Life Cycle

Life cycles can be very helpful when trying to manage event bindings and memory usage. The is four states, two are intermidiate state and the other to a long states.

 ┌─ REST ─┐

jcblw

var 
emit = require( 'emit-bindings' ),
emit2 = new ( require( 'emit-bindings' ).Emit ),
button = document.createElement( 'button' ),
message = document.createElement( 'p' );

function log ( msg ) {
  var txt = message.innerText + '\n' + msg;
	message.innerText = txt;
}

jcblw

var insertCSS = require( 'insert-css' ),
		skoll = require( 'skoll' ),
    btn = document.createElement( 'button' ),
    message = document.createElement( 'span' );

skoll.on( 'error', function( err ) {
    console.error( err.message );
    console.error( err.stack );
} );

jcblw

var insertCSS = require( 'insert-css' ),
		skoll = require( 'skoll' ),
    btn = document.createElement( 'button' );

skoll.on( 'error', function( err ) {
    console.error( err.message );
    console.error( err.stack );
} );

skoll.useToUpload( function( event ){

jcblw

var EventEmitter2 = require( 'eventemitter2' ).EventEmitter2;

/*
    dependencies
*/

/* binding */
var bindingMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
var eventPrefix = bindingMethod !== 'addEventListener' ? 'on' : '';

jcblw

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="400"
   height="141"
   version="1.1">
  <g

jcblw

Run in Browser

A simple script that will allow you to run code in a browser and then send back a payload of data.

RunInBrowser is a function that is a constructor essentially creating a number of differnt run is browser instances each with their own server. It takes one argument a options object that will be passed to either the server created for messaging between browser windows or passed to browser-launcher.

var RunInBrowser = require( 'run-in-browser' ),
    browser = new RunInBrowser( { port: 9999, browser: 'chrome' } );