jazzyjackson/figjam.js

## figjam.js
// creates a readable stream from a figtree - a configuration graph in JSON
// continuous stream that allows the browser to start painting ASAP
// but retains original file format

//but by the time this code calls babel, the style and graph will have already been served, so it will be a subtle delay between page loading and page becoming active

/* an example figtree */
{
    "styles":["blocks/basic/style.css","blocks/convo/style.css"],
    "scripts":["utils.js","vanillaClickAndDrag.js","blocks/basic/class.js","blocks/convo/class.js"],
    "head": {
        "link": {
            "rel":"icon",
            "type":"image/x-icon",
            "href": "data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII="
        }
    },
    "body": {
        "convo": {
            "width": "400px",
            "height": "200px"
        },
        "leftpanel": {
        }
    }
}
/* this should be a separate JSON file whose filename is passed to the node process as an argument */

var fs = require('fs')
var path = require('path')
var { PassThrough } = require('stream')

async function figjam(figtreeFilename, jam){ //jam, a readable stream

    var figtree = JSON.parse(fs.readFileSync(figtreeFilename))
    var figDirectory = figtreeFilename.split('/').slice(0,-1).join('/')

    jam.push('<html><head>')
    for(var thisStyle of figtree.styles) {
        jam.push(`<style filename="${thisStyle}">\n`)
        var thisStyleFilePath = path.join(figDirectory,'gui',thisStyle)
        await promise2pipe(thisStyleFilePath, jam)
        jam.push(`</style>\n`)
    }

    for(var node in figtree.head){
        jam.push(`<${node} `)
        for(var attribute in figtree.head[node]){
            jam.push(`${attribute}="${figtree.head[node][attribute]}" `)
        }
        jam.push(`/>\n`)
    }

    jam.push('</head><body>')
    for(var block in figtree.body){
        jam.push(`<div class="${block}"`)
        for(var attribute in figtree.body[block]){
            jam.push(` ${attribute}="${figtree.body[block][attribute]}"`)
        }
        jam.push(`></div>\n`)
    }
    jam.push('</body></html>')
    // jam.push(null)
}

var figjamCalledDirectly = process.argv[1].split(path.sep).slice(-1)[0] == 'figjam'

function sleep(time){
    return new Promise(resolve => setTimeout(resolve, time))
}
function promise2pipe(filename, readable){
    return new Promise((resolve, reject) => {
        filestream = fs.createReadStream(filename)
                       .on('end', resolve)
                       .on('error', reject)
                       .pipe(readable, {end: false})
    })
}

if(figjamCalledDirectly && process.argv[2]){
    var jam = new PassThrough
    figjam(process.argv[2], jam)
    jam.pipe(process.stdout)
}

module.exports = filename => {
    var jam = new PassThrough
    figjam(filename, jam)
    return jam
}
	// creates a readable stream from a figtree - a configuration graph in JSON
	// continuous stream that allows the browser to start painting ASAP
	// but retains original file format

	//but by the time this code calls babel, the style and graph will have already been served, so it will be a subtle delay between page loading and page becoming active

	/* an example figtree */
	{
	"styles":["blocks/basic/style.css","blocks/convo/style.css"],
	"scripts":["utils.js","vanillaClickAndDrag.js","blocks/basic/class.js","blocks/convo/class.js"],
	"head": {
	"link": {
	"rel":"icon",
	"type":"image/x-icon",
	"href": "data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII="
	}
	},
	"body": {
	"convo": {
	"width": "400px",
	"height": "200px"
	},
	"leftpanel": {
	}
	}
	}
	/* this should be a separate JSON file whose filename is passed to the node process as an argument */

	var fs = require('fs')
	var path = require('path')
	var { PassThrough } = require('stream')

	async function figjam(figtreeFilename, jam){ //jam, a readable stream

	var figtree = JSON.parse(fs.readFileSync(figtreeFilename))
	var figDirectory = figtreeFilename.split('/').slice(0,-1).join('/')

	jam.push('<html><head>')
	for(var thisStyle of figtree.styles) {
	jam.push(`<style filename="${thisStyle}">\n`)
	var thisStyleFilePath = path.join(figDirectory,'gui',thisStyle)
	await promise2pipe(thisStyleFilePath, jam)
	jam.push(`</style>\n`)
	}

	for(var node in figtree.head){
	jam.push(`<${node} `)
	for(var attribute in figtree.head[node]){
	jam.push(`${attribute}="${figtree.head[node][attribute]}" `)
	}
	jam.push(`/>\n`)
	}

	jam.push('</head><body>')
	for(var block in figtree.body){
	jam.push(`<div class="${block}"`)
	for(var attribute in figtree.body[block]){
	jam.push(` ${attribute}="${figtree.body[block][attribute]}"`)
	}
	jam.push(`></div>\n`)
	}
	jam.push('</body></html>')
	// jam.push(null)
	}

	var figjamCalledDirectly = process.argv[1].split(path.sep).slice(-1)[0] == 'figjam'

	function sleep(time){
	return new Promise(resolve => setTimeout(resolve, time))
	}
	function promise2pipe(filename, readable){
	return new Promise((resolve, reject) => {
	filestream = fs.createReadStream(filename)
	.on('end', resolve)
	.on('error', reject)
	.pipe(readable, {end: false})
	})
	}

	if(figjamCalledDirectly && process.argv[2]){
	var jam = new PassThrough
	figjam(process.argv[2], jam)
	jam.pipe(process.stdout)
	}

	module.exports = filename => {
	var jam = new PassThrough
	figjam(filename, jam)
	return jam
	}