Add Dependency Size (codesandbox#1197)

* add dependency size

* make size show up only when clicked

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/elements.js

@@ -1,8 +1,27 @@
 import styled from 'styled-components';
+import { EntryContainer } from '../../elements';
 
 export const Version = styled.div`
   transition: 0.3s ease all;
   position: absolute;
-  right: ${props => (props.hovering ? 3.5 : 1)}rem;
+  right: ${props => (props.hovering ? (props.withSize ? 5 : 3.5) : 1)}rem;
   color: ${props => props.theme.background.lighten(2).clearer(0.5)};
 `;
+
+export const MoreData = styled(EntryContainer)`
+  display: flex;
+  flex-direction: column;
+
+  li {
+    list-style: none;
+
+    span {
+      font-weight: bold;
+      margin-right: 0.5rem;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 0.5rem;
+    }
+  }
+`;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.js

@@ -1,15 +1,36 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import CrossIcon from 'react-icons/lib/md/clear';
 import RefreshIcon from 'react-icons/lib/md/refresh';
+import ArrowDropDown from 'react-icons/lib/md/keyboard-arrow-down';
+import ArrowDropUp from 'react-icons/lib/md/keyboard-arrow-up';
 
 import { EntryContainer, IconArea, Icon } from '../../elements';
 import { Link } from '../elements';
-import { Version } from './elements';
+import { Version, MoreData } from './elements';
+
+const formatSize = value => {
+  let unit;
+  let size;
+  if (Math.log10(value) < 3) {
+    unit = 'B';
+    size = value;
+  } else if (Math.log10(value) < 6) {
+    unit = 'kB';
+    size = value / 1024;
+  } else {
+    unit = 'mB';
+    size = value / 1024 / 1024;
+  }
+
+  return { unit, size: parseFloat(size).toFixed(1) };
+};
 
 export default class VersionEntry extends React.PureComponent {
   state = {
     hovering: false,
     version: null,
+    open: false,
+    size: {},
   };
 
   setVersionsForLatestPkg(pkg) {
@@ -20,9 +41,24 @@ export default class VersionEntry extends React.PureComponent {
       .catch(err => console.err(err)); // eslint-disable-line no-console
   }
 
+  getSizeForPKG(pkg) {
+    fetch(`https://bundlephobia.com/api/size?package=${pkg}`)
+      .then(response => response.json())
+      .then(size =>
+        this.setState({
+          size,
+        })
+      )
+      .catch(err => console.err(err)); // eslint-disable-line no-console
+  }
+
   componentWillMount() {
     const versionRegex = /^\d{1,3}\.\d{1,3}.\d{1,3}$/;
     const version = this.props.dependencies[this.props.dependency];
+    const cleanVersion = version.split('^');
+    this.getSizeForPKG(
+      `${this.props.dependency}@${cleanVersion[cleanVersion.length - 1]}`
+    );
     if (!versionRegex.test(version)) {
       this.setVersionsForLatestPkg(`${this.props.dependency}@${version}`);
     }
@@ -44,35 +80,55 @@ export default class VersionEntry extends React.PureComponent {
   };
   onMouseEnter = () => this.setState({ hovering: true });
   onMouseLeave = () => this.setState({ hovering: false });
+  handleOpen = () => this.setState(({ open }) => ({ open: !open }));
 
   render() {
     const { dependencies, dependency } = this.props;
 
-    const { hovering } = this.state;
+    const { hovering, version, size, open } = this.state;
     return (
-      <EntryContainer
-        onMouseEnter={this.onMouseEnter}
-        onMouseLeave={this.onMouseLeave}
-      >
-        <Link href={`https://www.npmjs.com/package/${dependency}`}>
-          {dependency}
-        </Link>
-        <Version hovering={hovering}>
-          {dependencies[dependency]}{' '}
-          {hovering &&
-            this.state.version && <span>({this.state.version})</span>}
-        </Version>
-        {hovering && (
-          <IconArea>
-            <Icon onClick={this.handleRefresh}>
-              <RefreshIcon />
-            </Icon>
-            <Icon onClick={this.handleRemove}>
-              <CrossIcon />
-            </Icon>
-          </IconArea>
-        )}
-      </EntryContainer>
+      <Fragment>
+        <EntryContainer
+          onMouseEnter={this.onMouseEnter}
+          onMouseLeave={this.onMouseLeave}
+        >
+          <Link href={`https://www.npmjs.com/package/${dependency}`}>
+            {dependency}
+          </Link>
+          <Version withSize={!!size.size} hovering={hovering}>
+            {dependencies[dependency]}{' '}
+            {hovering && version && <span>({version})</span>}
+          </Version>
+
+          {hovering && (
+            <IconArea>
+              {size.size ? (
+                <Icon onClick={this.handleOpen}>
+                  {open ? <ArrowDropUp /> : <ArrowDropDown />}
+                </Icon>
+              ) : null}
+              <Icon onClick={this.handleRefresh}>
+                <RefreshIcon />
+              </Icon>
+              <Icon onClick={this.handleRemove}>
+                <CrossIcon />
+              </Icon>
+            </IconArea>
+          )}
+        </EntryContainer>
+        {open ? (
+          <MoreData>
+            <li>
+              <span>Gzip:</span> {formatSize(size.gzip).size}
+              {formatSize(size.gzip).unit}
+            </li>
+            <li>
+              <span>Size:</span> {formatSize(size.size).size}
+              {formatSize(size.size).unit}
+            </li>
+          </MoreData>
+        ) : null}
+      </Fragment>
     );
   }
 }

packages/app/src/app/pages/Sandbox/Editor/Workspace/elements.js

@@ -85,7 +85,7 @@ export const getContainerStyles = props => {
   return styles;
 };
 
-export const EntryContainer = styled.span`
+export const EntryContainer = styled.div`
   ${props => getContainerStyles(props)};
 `;