bcomnes/twitter-comp.js

## twitter-comp.js
var Nanocomponent = require('nanocomponent')
var html = require('bel')
var onIdle = require('on-idle')
var url = require('url')

var TwitterWidgetsLoader = {
  src: '//platform.twitter.com/widgets.js',
  loading: false,
  listeners: [],
  interval: 50,

  load: function (callback) {
    var _this = this

    this.listeners.push(callback)

    if (window.twttr && window.twttr.widgets) {
      setTimeout(function () {
        _this.done()
      })
      return
    }

    if (this.loading) {
      return
    }

    this.loading = true

    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = this.src
    document.body.appendChild(script)

    this.poll()
  },

  poll: function () {
    if (window.twttr && window.twttr.widgets) {
      return this.done()
    }

    var _this = this

    setTimeout(function () {
      _this.poll()
    }, this.interval)
  },

  done: function () {
    while (this.listeners.length) {
      this.listeners.pop()(window.twttr)
    }
  }
}

class TwitterComponent extends Nanocomponent {
  createElement (tweetURL) {
    this.tweetURL = tweetURL
    return html`
      <div></div>
    `
  }

  update (tweetURL) {
    return this.tweetURL === tweetURL
  }

  loadTweet (el) {
    var tweetID = url.parse(this.tweetURL).path.split('/').pop()
    if (!el) return console.warn(`cant render ${tweetID} on unmounted component`)
    onIdle(function () {
      TwitterWidgetsLoader.load(function (twttr) {
        twttr.widgets.createTweet(tweetID, el)
      })
    })
  }

  load (el) {
    this.loadTweet(el)
  }

  afterupdate (el) {
    this.loadTweet(el)
  }
}

module.exports = TwitterComponent

## view.js
var html = require('choo/html')
var Twitter = require('../twitter-comp')
var t1 = new Twitter()
var t2 = new Twitter()
var t3 = new Twitter()

var TITLE = '🚂🚋🚋'

module.exports = view

function view (state, emit) {
  if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE)
  return html`
    <body class="sans-serif">
      <h1 class="f-headline pa3 pa4-ns">
        Choo choo!
        ${t1.render('https://twitter.com/teresawithoutah/status/896946697464631296')}
        ${t2.render('https://twitter.com/teresawithoutah/status/896946697464631296')}
        ${t3.render('https://twitter.com/teresawithoutah/status/896946697464631296')}
      </h1>
    </body>
  `
}
	var Nanocomponent = require('nanocomponent')
	var html = require('bel')
	var onIdle = require('on-idle')
	var url = require('url')

	var TwitterWidgetsLoader = {
	src: '//platform.twitter.com/widgets.js',
	loading: false,
	listeners: [],
	interval: 50,

	load: function (callback) {
	var _this = this

	this.listeners.push(callback)

	if (window.twttr && window.twttr.widgets) {
	setTimeout(function () {
	_this.done()
	})
	return
	}

	if (this.loading) {
	return
	}

	this.loading = true

	var script = document.createElement('script')
	script.type = 'text/javascript'
	script.src = this.src
	document.body.appendChild(script)

	this.poll()
	},

	poll: function () {
	if (window.twttr && window.twttr.widgets) {
	return this.done()
	}

	var _this = this

	setTimeout(function () {
	_this.poll()
	}, this.interval)
	},

	done: function () {
	while (this.listeners.length) {
	this.listeners.pop()(window.twttr)
	}
	}
	}

	class TwitterComponent extends Nanocomponent {
	createElement (tweetURL) {
	this.tweetURL = tweetURL
	return html`
	<div></div>
	`
	}

	update (tweetURL) {
	return this.tweetURL === tweetURL
	}

	loadTweet (el) {
	var tweetID = url.parse(this.tweetURL).path.split('/').pop()
	if (!el) return console.warn(`cant render ${tweetID} on unmounted component`)
	onIdle(function () {
	TwitterWidgetsLoader.load(function (twttr) {
	twttr.widgets.createTweet(tweetID, el)
	})
	})
	}

	load (el) {
	this.loadTweet(el)
	}

	afterupdate (el) {
	this.loadTweet(el)
	}
	}

	module.exports = TwitterComponent
	var html = require('choo/html')
	var Twitter = require('../twitter-comp')
	var t1 = new Twitter()
	var t2 = new Twitter()
	var t3 = new Twitter()

	var TITLE = '🚂🚋🚋'

	module.exports = view

	function view (state, emit) {
	if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE)
	return html`
	<body class="sans-serif">
	<h1 class="f-headline pa3 pa4-ns">
	Choo choo!
	${t1.render('https://twitter.com/teresawithoutah/status/896946697464631296')}
	${t2.render('https://twitter.com/teresawithoutah/status/896946697464631296')}
	${t3.render('https://twitter.com/teresawithoutah/status/896946697464631296')}
	</h1>
	</body>
	`
	}