Feature Request: Show install size of each package

[styfle]

I think it would be nice to show how large each package is before the user installs it.

For npm packages, we can get a badge from styfle/packagephobia#24

For example:

<div class="description"><%= project.description %></div>
<div class="install-size">
 <img alt="install size" src="https://packagephobia.now.sh/badge?p=<%= project.name %>" />
</div>

Is project.name the correct property to find the name on npm?

[erquhart]

What's the difference between packagephobia and bundlephobia?

[erquhart]

Ah, nvm, found it in your readme. Glad you added that.

I think adding stats like those of bundlephobia and packagephobia is a great idea, but I'd want to use raw data and handle design within the site rather than using badges.

[styfle]

Yeah the readme is quite thorough because it gets confusing 😃

I created an issue for myself and I'll let you know when it's ready.

styfle/packagephobia#35

Thanks! 👍

[erquhart]

Awesome, sounds good!

[styfle]

@erquhart Okay the API is available.

You can use the npm package name and version (cached result):

https://packagephobia.now.sh/api.json?p=next@5.1.0

Or simply the npm package name which will automatically use the latest version (never cached):

https://packagephobia.now.sh/api.json?p=next

[erquhart]

Nice!! I'll add this to the v2 issue for visibility.

[erquhart]

Oh whoops I was thinking of headlesscms.org, staticgen doesn't have a v2 issue. Hoping to see staticgen moved over to the framework established with headlesscms.org, this could easily be implemented as a part of that. Leaving open until then.

Thanks again for the quick API add! Packagephobia is a great tool, I hadn't even considered that bundlephobia is only measuring bundled output rather than actual package size.

[styfle]

Packagephobia is a great tool, I hadn't even considered that bundlephobia is only measuring bundled output rather than actual package size.

Thanks for the kind words! 😄

Yeah, bundle phobia is doesn't help for dev tools...such as the ones described in my README (note the gatsby vs hexo comparison).

[styfle]

I never heard of headlesscms.org so thanks for pointing that out! I was collecting my own list about a year ago when I found Prose but this list is far more thorough! 👍

[styfle]

@erquhart Any update on this one?

I'm not sure if this is something that I could add easily with a PR or if it's part of "the v2 issue" wherever that one is.

Thanks 😄

[erquhart]

Sorry I was thinking of the v2 issue over on the headlesscms.org repo. That can definitely be PR'd. I just migrated the site over to React Static, so everything is in JS now. scripts/fetch-data.js is where the data fetching is happening, static.config.js is where raw data is retrieved from that script's output and sent into the site. The src/Home/Project.js component is a good starting point for figuring out where to display the data.

[styfle]

What is the bundle command in the CONTRIBUTING file?

I just cloned the repo and it says bundle install but it's not clear where bundle is located. Bash says it can't find it.

$ bundle install
-bash: bundle: command not found

I looked at package.json to see existing scripts but build didn't work either.

$ node --version
v8.11.1
$ npm install
WARN notice [SECURITY] slug has 1 moderate vulnerability. Go here for more details: https://nodesecurity.io/advisories?search=slug&version=0.9.1 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
WARN notice [SECURITY] serve has 1 high vulnerability. Go here for more details: https://nodesecurity.io/advisories?search=serve&version=6.4.9 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
WARN notice [SECURITY] deep-extend has 1 low vulnerability. Go here for more details: https://nodesecurity.io/advisories?search=deep-extend&version=0.5.0 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.

> fsevents@1.1.3 install /Users/styfle/Code/js/staticgen/node_modules/fsevents
> node install

[fsevents] Success: "/Users/styfle/Code/js/staticgen/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> preact@8.2.7 postinstall /Users/styfle/Code/js/staticgen/node_modules/preact
> node -e "console.log('\u001b[35m\u001b[1mLove Preact? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/preact/donate\u001b[0m')"

Love Preact? You can now donate to our open collective:
 > https://opencollective.com/preact/donate

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/styfle/Code/js/staticgen/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

added 1669 packages in 72.488s

$ npm run build -s
{ Error: Cannot find module 'react-static/node'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/styfle/Code/js/staticgen/static.config.js:4:1)
    at Module._compile (module.js:652:30)
    at loader (/Users/styfle/Code/js/staticgen/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/styfle/Code/js/staticgen/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12) code: 'MODULE_NOT_FOUND' }

[erquhart]

Ack, forgot to update that file - it's referring to the bundle command from the old Middleman setup. Will fix.