feat(detail): show bundled size of a library (#740)

* feat(detail): show bundled size of a library

the default size is visible in Usage, and the gzip size on hovering. The link goes to bundlesize

closes algolia/npm-search#91

cc @pastelsky. I added `yarn website; ${navigator.userAgent}` as the `User-Agent` header to the request.

* chore: make size text i18n ready

* chore: change User-Agent to X-Bundlephobia-User

Author: Haroenv

_data/i18n/en.yml

@@ -362,6 +362,8 @@ script:
     versions: Versions
     display_all: Display all
     hide: Hide
+    bundlesize: Size in browser
+    bundlesize_text: 'size: {size}, gzip: {gzip}'
 
     not_found:
       whoa: Whoa, {package_name} does not exist yet

assets/detail/ico-download-size.svg

@@ -27,6 +27,7 @@ const Aside = ({
   versions,
   version,
   devDependencies,
+  bundlesize,
   onOpenFileBrowser,
 }) => (
   <aside className="details-side col-lg-4">
@@ -51,6 +52,7 @@ const Aside = ({
     <Usage
       dependencies={dependencies}
       devDependencies={devDependencies}
+      bundlesize={bundlesize}
       {...packageJSONLink({ githubRepo })}
     />
     <Tags tags={tags} name={name} />

js/src/lib/Details/Aside.js

@@ -35,8 +35,9 @@ const deps = ({ dependencies, title }) => {
 const Usage = ({
   dependencies,
   devDependencies,
-  packageJSONLink,
   versions,
+  bundlesize,
+  packageJSONLink,
 }) => (
   <article className="details-side--usage">
     <h1>{window.i18n.detail.usage}</h1>
@@ -66,6 +67,24 @@ const Usage = ({
           }
         />
       )}
+      {bundlesize && (
+        <Di
+          icon="download-size"
+          title={window.i18n.detail.bundlesize}
+          description={
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href={bundlesize.href}
+              title={window.i18n.detail.bundlesize_text
+                .replace('{size}', bundlesize.size)
+                .replace('{gzip}', bundlesize.gzip)}
+            >
+              {bundlesize.size}
+            </a>
+          }
+        />
+      )}
     </dl>
   </article>
 );

js/src/lib/Details/Usage.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import bytes from 'bytes';
 import algoliasearch from 'algoliasearch/lite';
 
 import Aside from './Aside';
@@ -55,7 +56,7 @@ class Details extends Component {
     };
   }
 
-  componentWillMount() {
+  componentDidMount() {
     index
       .getObject(this.props.objectID)
       .then(content => {
@@ -118,17 +119,37 @@ class Details extends Component {
       }
 
       this.getGithub({
-        url: `repos/${this.state.githubRepo.user}/${this.state.githubRepo
-          .project}/stats/commit_activity`,
+        url: `repos/${this.state.githubRepo.user}/${
+          this.state.githubRepo.project
+        }/stats/commit_activity`,
         state: 'activity',
       });
 
       this.getGithub({
-        url: `repos/${this.state.githubRepo.user}/${this.state.githubRepo
-          .project}`,
+        url: `repos/${this.state.githubRepo.user}/${
+          this.state.githubRepo.project
+        }`,
         state: 'github',
       });
     }
+
+    const { name, version } = this.state;
+
+    get({
+      url: `https://bundlephobia.com/api/size?package=${name}@${version}`,
+      type: 'json',
+      headers: {
+        'X-Bundlephobia-User': 'yarn website',
+      },
+    }).then(res =>
+      this.setState({
+        bundlesize: {
+          href: `https://bundlephobia.com/result?p=${name}@${version}`,
+          size: bytes(res.size),
+          gzip: bytes(res.gzip),
+        },
+      })
+    );
   }
 
   maybeRenderReadme() {
@@ -252,6 +273,7 @@ class Details extends Component {
         versions={this.state.versions}
         version={this.state.version}
         tags={this.state.tags}
+        bundlesize={this.state.bundlesize}
         onOpenFileBrowser={this._openFileBrowser}
       />
     );

js/src/lib/Details/index.js

@@ -12,6 +12,7 @@ export default {
   github: {
     stargazers_count: 0,
   },
+  bundlesize: undefined,
   githubRepo: {
     user: '',
     project: '',

js/src/lib/schema.js

@@ -197,8 +197,8 @@ const status = res =>
     }
   });
 
-export const get = ({ url, type }) =>
-  fetch(url)
+export const get = ({ url, type, headers }) =>
+  fetch(url, { headers })
     .then(status)
     .then(res => res[type]())
     .catch(err => {