react/scripts/bench/benchmarks/hacker-news/benchmark.js

(function() {
  'use strict';

  const e = React.createElement;

  function timeAge(time) {
    const now = new Date().getTime() / 1000;
    const minutes = (now - time) / 60;

    if (minutes < 60) {
      return Math.round(minutes) + ' minutes ago';
    }
    return Math.round(minutes / 60) + ' hours ago';
  }

  function getHostUrl(url) {
    return (url + '')
      .replace('https://', '')
      .replace('http://', '')
      .split('/')[0]
  }

  function HeaderBar() {
    return e('tr', {
      style: {
        backgroundColor: '#222',
      },
    }, e('table', {
        style: {
          padding: 4,
        },
        width: '100%',
        cellSpacing: 0,
        cellPadding: 0,
      }, e('tbody', null, 
        e('tr', null, 
          e('td', {
          style: {
              width: 18,
              paddingRight: 4,
            },
          }, 
            e('a', {
              href: '#',
            }, 
              e('img', {
                src: 'logo.png',
                width: 16,
                height: 16,
                style: {
                  border: '1px solid #00d8ff',
                },
              })
            )
          ),
          e('td', {
            style: {
              lineHeight: '12pt',
            },
            height: 10,
          }, 
            e('span', {
              className: 'pagetop',
            },
              e('b', { className: 'hnname' }, 'React HN Benchmark'),
              e('a', { href: '#' }, 'new'),
              ' | ',
              e('a', { href: '#' }, 'comments'),
              ' | ',
              e('a', { href: '#' }, 'show'),
              ' | ',
              e('a', { href: '#' }, 'ask'),
              ' | ',
              e('a', { href: '#' }, 'jobs'),
              ' | ',
              e('a', { href: '#' }, 'submit')
            )
          )
        )
      )
    ));
  }

  function Story({ story, rank }) {
    return [
      e('tr', {
        className: 'athing',
      },
        e('td', {
          style: {
            verticalAlign: 'top',
            textAlign: 'right',
          },
          className: 'title',
        },
          e('span', {
            className: 'rank',
          }, `${rank}.`)
        ),
        e('td', {
          className: 'votelinks',
          style: {
            verticalAlign: 'top',
          },
        },
          e('center', null, 
            e('a', {
              href: '#',
            },
              e('div', {
                className: 'votearrow',
                title: 'upvote',
              })
            )
          )
        ),
        e('td', {
          className: 'title',
        },
          e('a', {
            href: '#',
            className: 'storylink',
          },
            story.title
          ),
          story.url ? (
            e('span', {
              className: 'sitebit comhead',
            },
              ' (',
              e('a', {
                href: '#',
              },
                getHostUrl(story.url)
              ),
              ')'
            )
          ) : null
        )
      ),
      e('tr', null,
        e('td', {
          colSpan: 2,
        }),
        e('td', {
          className: 'subtext',
        },
          e('span', {
            className: 'score',
          }, `${story.score} points`),
          ' by ',
          e('a', {
            href: '#',
            className: 'hnuser',
          }, story.by),
          ' ',
          e('span', {
            className: 'age',
          },
            e('a', {
              href: '#',
            }, timeAge(story.time))
          ),
          ' | ',
          e('a', {
            href: '#',
          }, 'hide'),
          ' | ',
          e('a', {
            href: '#',
          }, `${ story.descendants || 0 } comments`)
        )
      ),
      e('tr', {
        style: {
          height: 5,
        },
        className: 'spacer',
      })
    ];
  }

  function StoryList({ stories }) {
    return e('tr', null,
      e('td', null,
        e('table', {
          cellPadding: 0,
          cellSpacing: 0,
          classList: 'itemlist',
        },
          e('tbody', null,
            stories.map((story, i) => 
              e(Story, { story, rank: ++i, key: story.id })
            )
          )
        )
      )
    );
  }

  function App({ stories }) {
    return e('center', null, 
      e('table', {
        id: 'hnmain',
        border: 0,
        cellPadding: 0,
        cellSpacing: 0,
        width: '85%',
        style: {
          'background-color': '#f6f6ef',
        },
      }, e('tbody', null,
        e(HeaderBar, null),
        e('tr', { height: 10 }),
        e(StoryList, { 
          stories,
        })
      ))
    );
  }

  const app = document.getElementById('app');

  window.render = function render() {
    ReactDOM.render(React.createElement(App, { 
      stories: window.stories 
    }), app);
  }
})();