WebReflection/hyperhtml-firebase.html

## hyperhtml-firebase.html
<!doctype html>
<html lang="en">
  <head>
    <title>hyperHTML &amp; Firebase</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
    html { font-family: sans-serif; }
    html, body, ul, p { padding: 0; margin: 0; }
    ul, li { list-style: none; }
    body > p, li { padding: 8px; }
    li:nth-child(2n + 1) { background-color: #eee; }
    li > * { display: block; }
    li > span:last-child { font-size: .9em; text-align: right; color: #666; }
    li > a, li > span:first-child { font-size: 1.1em; font-weight: bold;
                                    text-decoration: none; line-height: 32px; }
    </style>
    <!-- JS dependencies: hyperHTML and Firebase -->
    <script src="https://unpkg.com/hyperhtml@latest/min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
  </head>
  <body></body>
  <script>
    (() => {
      const {bind, wire} = hyperHTML;

      // in this example, we are not going
      // to relate any specific object to wires,
      // so we can just use html`content`
      const html = (...args) => wire()(...args);

      // the Firebase DB
      const db = firebase
        .initializeApp({databaseURL: 'https://hacker-news.firebaseio.com'})
        .database()
        .ref( 'v0' );

      // let's use the body as hyperHTML context to populate
      bind(document.body)
      `${{
        // show an indication that something is happening
        placeholder: {html: '<p>Loading ...</p>'},

        // while downloading latest top stories
        // and creating the list of all items
        any: new Promise(resolve => {
          db.child('topstories')
            .on('value', snap => {
              resolve(
                // instead of "Loading ..."
                // we want now to put a UL element
                // and show all the received items
                html`<ul>${mapItems(snap.val())}</ul>`
              );
            });
        })
      }}`;

      function mapItems(items) {
        // per each id we create an LI element
        return items.map(
          id => html`<li data-id=${id}>${loadItem(id)}</li>`
        );
      }

      function loadItem(id) {
        // per each LI we load asynchronously basic story info
        return {
          placeholder: `fetching ${id} ...`,
          any: new Promise(resolve => {
            db.child(`/item/${id}`)
              .once('value', snap => {
                const item = snap.val();
                const hostname = item.hostname || item.url;
                resolve(html`
                ${{any: hostname ?
                  // if there is an hostname/url to show
                  // put a link and a shortened hostname info
                  html`<a href=${item.url} target=_blank>${item.title}</a>
                       <small>
                       ${new URL(hostname).hostname.replace(/^www\./, '')}
                       </small>`:

                  // otherwise just show the title
                  html`<span>${item.title}</span>`
                }}
                <!-- show some extra info -->
                <span>${item.score} points by <b>${item.by}</b></span>`);
              });
          })
        };
      }

    })();
  </script>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>hyperHTML & Firebase</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<style>
	html { font-family: sans-serif; }
	html, body, ul, p { padding: 0; margin: 0; }
	ul, li { list-style: none; }
	body > p, li { padding: 8px; }
	li:nth-child(2n + 1) { background-color: #eee; }
	li > * { display: block; }
	li > span:last-child { font-size: .9em; text-align: right; color: #666; }
	li > a, li > span:first-child { font-size: 1.1em; font-weight: bold;
	text-decoration: none; line-height: 32px; }
	</style>
	<!-- JS dependencies: hyperHTML and Firebase -->
	<script src="https://unpkg.com/hyperhtml@latest/min.js"></script>
	<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
	</head>
	<body></body>
	<script>
	(() => {
	const {bind, wire} = hyperHTML;

	// in this example, we are not going
	// to relate any specific object to wires,
	// so we can just use html`content`
	const html = (...args) => wire()(...args);

	// the Firebase DB
	const db = firebase
	.initializeApp({databaseURL: 'https://hacker-news.firebaseio.com'})
	.database()
	.ref( 'v0' );

	// let's use the body as hyperHTML context to populate
	bind(document.body)
	`${{
	// show an indication that something is happening
	placeholder: {html: '<p>Loading ...</p>'},

	// while downloading latest top stories
	// and creating the list of all items
	any: new Promise(resolve => {
	db.child('topstories')
	.on('value', snap => {
	resolve(
	// instead of "Loading ..."
	// we want now to put a UL element
	// and show all the received items
	html`<ul>${mapItems(snap.val())}</ul>`
	);
	});
	})
	}}`;

	function mapItems(items) {
	// per each id we create an LI element
	return items.map(
	id => html`<li data-id=${id}>${loadItem(id)}</li>`
	);
	}

	function loadItem(id) {
	// per each LI we load asynchronously basic story info
	return {
	placeholder: `fetching ${id} ...`,
	any: new Promise(resolve => {
	db.child(`/item/${id}`)
	.once('value', snap => {
	const item = snap.val();
	const hostname = item.hostname \|\| item.url;
	resolve(html`
	${{any: hostname ?
	// if there is an hostname/url to show
	// put a link and a shortened hostname info
	html`<a href=${item.url} target=_blank>${item.title}</a>
	<small>
	${new URL(hostname).hostname.replace(/^www\./, '')}
	</small>`:

	// otherwise just show the title
	html`<span>${item.title}</span>`
	}}
	<!-- show some extra info -->
	<span>${item.score} points by <b>${item.by}</b></span>`);
	});
	})
	};
	}

	})();
	</script>
	</html>