ishiduca/index.html

## index.html
<!doctype html><body><script src="/bundle.js"></script></body>

## main.js
var xtend = require('xtend')
var yo = require('yo-yo')
var nsemitter = require('namespace-emitter')
var emitter = nsemitter()

var render = require('./components/root')
var data = render.defaultData
var el = render(xtend(data), actionsUp)

var reducer = require('./reducer/xhr')(update)
var setupApi = require('./api/xhr')

emitter.on('*', function loglog (params) {
  console.log('event "%s"', this.event)
  console.log(params)
})

emitter.on('update', p => {
  data = xtend(data, p)
  el = yo.update(el, render(xtend(data), actionsUp))
})

emitter.on('hyperquest:onResponse', reducer.onResponse)

emitter.on('error', err => {
  console.error(err)
})

setupApi(emitter)
document.body.appendChild(el)

function actionsUp () {
  emitter.emit.apply(emitter, arguments)
}

function update (p) {
  emitter.emit('update', p)
}

## package.json
{
  "devDependencies": {
    "yo-yoify": "^3.7.3"
  },
  "dependencies": {
    "dom-css": "^2.1.0",
    "ecstatic": "^2.2.1",
    "hyperquest": "^2.1.2",
    "mississippi": "^1.3.0",
    "namespace-emitter": "^1.0.0",
    "xtend": "^4.0.1",
    "yo-yo": "^1.4.1"
  },
  "scripts": {
    "build": "browserify -t [yo-yoify] ./src/main.js -o ./static/bundle.js"
  }
}

## reducer_xhr.js
module.exports = function reduceXhr (update) {
  return {
    onResponse (res) {
      var sentence = res.text.split(/\n\n/).map(sen => sen.split(/\n/))
      update({result: {sentence: sentence}})
    }
  }
}

## root.js
var yo = require('yo-yo')
var domCss = require('dom-css')

function css (dom, style) {
  domCss(dom, style)
  return dom
}

var blockquote = {
  margin : '6px',
  padding: '6px'
}

module.exports = function render (data, actionsUp) {
  return yo `
    <div>
      <div>
        <button onclick=${onclick}>load json "${data.url}"</button>
      </div>
      <div>
        ${data.result.sentence.map(sen => css(yo `
          <blockquote>
            ${sen.map(line => yo `
              <p>${line}</p>
            `)}
          </blockquote>
        `, blockquote))}
      </div>
    </div>
  `

  function onclick (e) {
    e.stopPropagation()
    actionsUp('hyperquest:get', data.url)
  }
}

var loc = window.location

module.exports.defaultData = {
  url: `${loc.protocol}//${loc.host}/test.json`,
  result: {
    sentence: [['no data']]
  }
}

## server.js
var http = require('http')
var path = require('path')
var url = require('url')
var ecstatic = require('ecstatic')(path.join(__dirname, 'static'))
var app = http.createServer(ecstatic)

start(process.env.PORT || 8888)

function start (port) {
  var mes = 'server start to listen on port  "%s"'
  app.listen(port, () => console.log(mes, port))
}

## test.json
{
  "text": "you suck me into the storm again\nyou ran me over and over again\nthe revolution will start today\nyou better find your hidden place\n\na special forces are on their way\ncheck your pulse ’cause i’m coming in\nyour government will disappear\nwatch me coming, i’m here to stay\n\nthere’s no time for fighting back\ni dream the same dream every time\nso wake me up and i will survive\ni’m stronger than you think\ni cannot be surprised\n\nthe war is over, but not for me\nit’s not the pain that freaks me out\ni can’t stand losing you\ni’ll stand on guard for thee\n\nthere’s no time for fighting back\ni dream the same dream every time\nso wake me up and i will survive\ni’m stronger than you think\ni cannot be surprised"
}

## xhr.js
var hyperquest = require('hyperquest')
var missi = require('mississippi')

module.exports = function setupApi (emitter) {
  emitter.on('hyperquest:get', uri => {
    var buf = []
    missi.pipe(
      hyperquest(uri),
      missi.through((b, _, done) => {
        buf.push(b)
        done()
      }, done => {
        var str = String(Buffer.concat(buf))
        var obj; try {
          obj = JSON.parse(str)
          emitter.emit('hyperquest:onResponse', obj)
          done()
        } catch (err) {
          done(err)
        }
      }),
      onError
    )
  })

  function onError (err) {
    if (err) emitter.emit('error', err)
  }
}
	var xtend = require('xtend')
	var yo = require('yo-yo')
	var nsemitter = require('namespace-emitter')
	var emitter = nsemitter()

	var render = require('./components/root')
	var data = render.defaultData
	var el = render(xtend(data), actionsUp)

	var reducer = require('./reducer/xhr')(update)
	var setupApi = require('./api/xhr')

	emitter.on('*', function loglog (params) {
	console.log('event "%s"', this.event)
	console.log(params)
	})

	emitter.on('update', p => {
	data = xtend(data, p)
	el = yo.update(el, render(xtend(data), actionsUp))
	})

	emitter.on('hyperquest:onResponse', reducer.onResponse)

	emitter.on('error', err => {
	console.error(err)
	})

	setupApi(emitter)
	document.body.appendChild(el)

	function actionsUp () {
	emitter.emit.apply(emitter, arguments)
	}

	function update (p) {
	emitter.emit('update', p)
	}
	{
	"devDependencies": {
	"yo-yoify": "^3.7.3"
	},
	"dependencies": {
	"dom-css": "^2.1.0",
	"ecstatic": "^2.2.1",
	"hyperquest": "^2.1.2",
	"mississippi": "^1.3.0",
	"namespace-emitter": "^1.0.0",
	"xtend": "^4.0.1",
	"yo-yo": "^1.4.1"
	},
	"scripts": {
	"build": "browserify -t [yo-yoify] ./src/main.js -o ./static/bundle.js"
	}
	}
	module.exports = function reduceXhr (update) {
	return {
	onResponse (res) {
	var sentence = res.text.split(/\n\n/).map(sen => sen.split(/\n/))
	update({result: {sentence: sentence}})
	}
	}
	}
	var yo = require('yo-yo')
	var domCss = require('dom-css')

	function css (dom, style) {
	domCss(dom, style)
	return dom
	}

	var blockquote = {
	margin : '6px',
	padding: '6px'
	}

	module.exports = function render (data, actionsUp) {
	return yo `
	<div>
	<div>
	<button onclick=${onclick}>load json "${data.url}"</button>
	</div>
	<div>
	${data.result.sentence.map(sen => css(yo `
	<blockquote>
	${sen.map(line => yo `
	<p>${line}</p>
	`)}
	</blockquote>
	`, blockquote))}
	</div>
	</div>
	`

	function onclick (e) {
	e.stopPropagation()
	actionsUp('hyperquest:get', data.url)
	}
	}

	var loc = window.location

	module.exports.defaultData = {
	url: `${loc.protocol}//${loc.host}/test.json`,
	result: {
	sentence: [['no data']]
	}
	}
	var http = require('http')
	var path = require('path')
	var url = require('url')
	var ecstatic = require('ecstatic')(path.join(__dirname, 'static'))
	var app = http.createServer(ecstatic)

	start(process.env.PORT \|\| 8888)

	function start (port) {
	var mes = 'server start to listen on port "%s"'
	app.listen(port, () => console.log(mes, port))
	}
	{
	"text": "you suck me into the storm again\nyou ran me over and over again\nthe revolution will start today\nyou better find your hidden place\n\na special forces are on their way\ncheck your pulse ’cause i’m coming in\nyour government will disappear\nwatch me coming, i’m here to stay\n\nthere’s no time for fighting back\ni dream the same dream every time\nso wake me up and i will survive\ni’m stronger than you think\ni cannot be surprised\n\nthe war is over, but not for me\nit’s not the pain that freaks me out\ni can’t stand losing you\ni’ll stand on guard for thee\n\nthere’s no time for fighting back\ni dream the same dream every time\nso wake me up and i will survive\ni’m stronger than you think\ni cannot be surprised"
	}
	var hyperquest = require('hyperquest')
	var missi = require('mississippi')

	module.exports = function setupApi (emitter) {
	emitter.on('hyperquest:get', uri => {
	var buf = []
	missi.pipe(
	hyperquest(uri),
	missi.through((b, _, done) => {
	buf.push(b)
	done()
	}, done => {
	var str = String(Buffer.concat(buf))
	var obj; try {
	obj = JSON.parse(str)
	emitter.emit('hyperquest:onResponse', obj)
	done()
	} catch (err) {
	done(err)
	}
	}),
	onError
	)
	})

	function onError (err) {
	if (err) emitter.emit('error', err)
	}
	}