fsteff/index.js

## index.js
const choo = require('choo')
const html = require('choo/html')
const Nanocomponent = require('nanocomponent')

class Image extends Nanocomponent {
  constructor (image) {
    super()
    this.image = image
  }

  createElement () {
    console.log(`rendering ${this.image}`)
    return html`<img src="${this.image}" alt="${this.image}" style="width: 100px;">`
  }

  update () {
    return true
  }
}

class Viewer extends Nanocomponent {
  createElement (state) {
    const container = html`<div><h3>Images:</h3><p><a href="/?img1=1&img2=1&img3=1">back to the overview</a></p></div>`
    if(state.query.img1) container.append(html`<a href="/?img1=1&img2=1"><p>1:</p>${img1.render()}</a>`)
    if(state.query.img2) container.append(html`<a href="/?img2=1&img3=1"><p>2:</p>${img2.render()}</a>`)
    if(state.query.img3) container.append(html`<a href="/?img3=1&img2=1"><p>3:</p>${img3.render()}</a>`)
    return container
  }

  update () {
    return true
  }
}

const img1 = new Image('1bruecke.jpg')
const img2 = new Image('5teilig.jpg')
const img3 = new Image('10mschlauch.jpg')
const viewer = new Viewer()

const app = choo()
app.mount('body')

app.route('/index.html', main)
app.route('/', main)

function main(state, emit){
  return html`<body>
    ${viewer.render(state)}
  </body>`
}
	const choo = require('choo')
	const html = require('choo/html')
	const Nanocomponent = require('nanocomponent')

	class Image extends Nanocomponent {
	constructor (image) {
	super()
	this.image = image
	}

	createElement () {
	console.log(`rendering ${this.image}`)
	return html`<img src="${this.image}" alt="${this.image}" style="width: 100px;">`
	}

	update () {
	return true
	}
	}

	class Viewer extends Nanocomponent {
	createElement (state) {
	const container = html`<div><h3>Images:</h3><p><a href="/?img1=1&img2=1&img3=1">back to the overview</a></p></div>`
	if(state.query.img1) container.append(html`<a href="/?img1=1&img2=1"><p>1:</p>${img1.render()}</a>`)
	if(state.query.img2) container.append(html`<a href="/?img2=1&img3=1"><p>2:</p>${img2.render()}</a>`)
	if(state.query.img3) container.append(html`<a href="/?img3=1&img2=1"><p>3:</p>${img3.render()}</a>`)
	return container
	}

	update () {
	return true
	}
	}

	const img1 = new Image('1bruecke.jpg')
	const img2 = new Image('5teilig.jpg')
	const img3 = new Image('10mschlauch.jpg')
	const viewer = new Viewer()

	const app = choo()
	app.mount('body')

	app.route('/index.html', main)
	app.route('/', main)

	function main(state, emit){
	return html`<body>
	${viewer.render(state)}
	</body>`
	}