jed/README.md

## README.md

      
    Raw
  

              README.md
            
          
    this is a (fab) experiment i've been toying with. it's a bookmarklet that serializes the DOM on the current page to (fab) code. the idea is to eventually be able to slurp out an existing page into static code, and then slowly start to introduce dynamic behavior using (fab).
to try it, create a bookmarklet with this source:
javascript:with(document)(body.appendChild(createElement('script')).src='https://gist.github.com/raw/913050/5e6c66b14256c12d4842945768e9351b1b798a27/index.js?'+Date.now())._

use with care, because it'll overwrite the current page contents. i think it'd be nice to use github's oauth support to save it in a gist.

  
## index.js
!function() {
  var src
    , empty = {AREA:1,BASE:1,BR:1,COL:1,COMMAND:1,EMBED:1,HR:1,IMG:1,INPUT:1,KEYGEN:1,LINK:1,META:1,PARAM:1,SOURCE:1,WBR:1}

  function toFab( node, depth ) {
    depth || ( depth = 0 )

    var attrs = node.attributes
      , children = node.childNodes
      , name = node.nodeName.toUpperCase()
      , padding = Array( depth + 1 ).join( "  " )
      , ret = padding + "( "

    if ( node.nodeType == 3 ) {
      return ret +=
        "\"" +
        node.nodeValue
          .replace( /\n+/g, "\\n" )
          .replace( / +/g, " " ) +
        "\" )\n"
    }

    ret += name

    if ( attrs && attrs.length ) {
      ret += ", { "

      for ( var i = 0, attr, name; attr = attrs[ i ]; i++ ) {
        if ( i ) ret += ", "

        name = attr.name
        if ( /\W/.test( name ) ) name = "\"" + name + "\""

        ret += name + ": \"" + attr.value + "\""
      }

      ret += " }"
    }

    ret += " )\n"

    if ( name in empty ) return ret

    for ( var i = 0, child; child = children[ i ]; i++ ) {
      ret += toFab( child, depth + 1 )
    }

    return ret + padding + "()\n"
  }

  src = toFab( document.documentElement )

  document.open()
  document.write( "<html><body><pre></pre></body></html>" )
  document.close()

  document.body.firstChild.appendChild( document.createTextNode( src ) )
}()
	!function() {
	var src
	, empty = {AREA:1,BASE:1,BR:1,COL:1,COMMAND:1,EMBED:1,HR:1,IMG:1,INPUT:1,KEYGEN:1,LINK:1,META:1,PARAM:1,SOURCE:1,WBR:1}

	function toFab( node, depth ) {
	depth \|\| ( depth = 0 )

	var attrs = node.attributes
	, children = node.childNodes
	, name = node.nodeName.toUpperCase()
	, padding = Array( depth + 1 ).join( " " )
	, ret = padding + "( "

	if ( node.nodeType == 3 ) {
	return ret +=
	"\"" +
	node.nodeValue
	.replace( /\n+/g, "\\n" )
	.replace( / +/g, " " ) +
	"\" )\n"
	}

	ret += name

	if ( attrs && attrs.length ) {
	ret += ", { "

	for ( var i = 0, attr, name; attr = attrs[ i ]; i++ ) {
	if ( i ) ret += ", "

	name = attr.name
	if ( /\W/.test( name ) ) name = "\"" + name + "\""

	ret += name + ": \"" + attr.value + "\""
	}

	ret += " }"
	}

	ret += " )\n"

	if ( name in empty ) return ret

	for ( var i = 0, child; child = children[ i ]; i++ ) {
	ret += toFab( child, depth + 1 )
	}

	return ret + padding + "()\n"
	}

	src = toFab( document.documentElement )

	document.open()
	document.write( "<html><body><pre></pre></body></html>" )
	document.close()

	document.body.firstChild.appendChild( document.createTextNode( src ) )
	}()