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/[email protected]

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.

> [email protected] 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

> [email protected] 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

> [email protected] 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.

[styfle]

@erquhart I still cannot build.

It's failing with the above error message on this line:

import { reloadRoutes } from 'react-static/node'

[erquhart]

Hmm not sure why that is, but that import was unused anyway, it's now removed. Grab the latest from master (or just remove that import) and try again, let me know if it still fails.

[styfle]

I got a little further this time.

$ npm run build -s

=> Copying public directory...
=> [✓] Public directory copied: 33.738ms
=> Building Routes...
Local archive not found, fetching new data.
Error: Token authentication requires a token to be set

So then I tried to generate a github token and assign it.

That lead to the following:

$ npm run build -s

=> Copying public directory...
=> [✓] Public directory copied: 41.933ms
=> Building Routes...
Local archive not found, fetching new data.
[ { code: 215, message: 'Bad Authentication data.' } ]

Do I need access to private repos?

[erquhart]

Nope just public repos and the ability to create gists.

[styfle]

I just generated a new token with public repos and gists permissions checked.

Now I get this:

$ npm run build -s

=> Copying public directory...
=> [✓] Public directory copied: 18.170ms
=> Building Routes...
Local archive not found, fetching new data.
{ Error: unable to get local issuer certificate
    at TLSSocket.<anonymous> (_tls_wrap.js:1105:38)
    at emitNone (events.js:106:13)
    at TLSSocket.emit (events.js:208:7)
    at TLSSocket._finishInit (_tls_wrap.js:639:8)
    at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:469:38) code: 'UNABLE_TO_GET_ISSUER_CERT_LOCALLY' }

[erquhart]

Looks like a Node issue, are you behind a firewall?

nodejs/node#3742

[styfle]

No, but maybe I can inspect the certificate.

What is the URL it's trying to fetch data from?

[erquhart]

It fetches the Gist cache first, and if that needs to be updated, it fetches repo data direct from the GitHub repos. All requests are through the GitHub API via Octokit: https://github.com/netlify/staticgen/blob/master/scripts/fetch-archive.js

[styfle]

Do you know how to debug a npm run build?
Normally I can do node --inspect index.js but the build step is not calling a node script, it's calling react-static build.

Ideas?

[erquhart]

Honestly I just console log stuff.

[styfle]

Ok thanks for sticking with me through this!

The problem was not GitHub as I anticipated, it was Twitter that was blocked 😆
Commenting out the twitter code built just fine.

I'll play around with it a little more and submit a PR 👍

[erquhart]

Glad you got it figured!