Next version update (March 2020)

[rstacruz]

WIP: While this is a work-in-progress, therelease is available under the next tag - try it out with npm install nprogress@next 😉 (draft release notes)

This updates NProgress to keep it up-to-date with 2020 standards.

Major updates

• Distirbute an ESM build. NProgress is currently a UMD distribution (ie, CommonJS and browser).

• Add CSS variables support. It should be easier to change the color.

• Add Sass support. Same goal as above for those who prefer Sass.

• Types and documentation. This should hopefully make the experience better for TypeScript and VSCode users.

Build process updates

• [ ] Use jest for tests (rather than Mocha and Chai).
• [x] Use prettier for code formatting.
• [x] Use microbundle to distribute UMD, ESM, and CommonJS builds.
• [x] Use yarn for packaging.
• [ ] Use np for publishing.

CI updates

• [x] Move from Travis CI to GitHub actions.

Deprecations

• [x] Remove Bower support.
• [x] Remove component.json support.
• [x] Remove jspm support.

Documentation update

• [ ] Update jsdoc comments (with types). This should make the experience better for TypeScript and VSCode users.
• [x] Move the website to the gh-pages branch.
• [x] Update the website a bit.
• [ ] Update README.
• [x] Update CONTRIBUTING.md for notes on maintenance.
• [x] Migrate changelog to GitHub releases

CSS updates

• [x] Add CSS variables support
• [x] Add Sass support

[anselal]

Nicely done so far, keep up the good work. FYI, your "little" project is used widely, so you done right to update the js file to keep up with 2020 standards as well adding sass support so it can be used with new JS frameworks !!!

[anselal]

I created a PR for css variables

[anselal]

Looking good my friend. Keep up the good work !!!

[vvo]

Just chiming in to say: I just tried @next release and it worked perfectly. Only thin I had to change was the CSS import, to import "nprogress/css/nprogress.css"; Thanks for working on upgrading the library, it's a great library. I recently used it in a Next.js project to show the progress bar, after a delay, on Route en fetch events (https://dev.to/vvo/show-a-top-progress-bar-on-fetch-and-router-events-in-next-js-4df3)

[vvo]

@rstacruz For what it's worth: I did some more testing and on iOS Safari the behavior of the progress bar is different than before. When start() is called and it takes a "long" (like 3s) time before done(), the bar progress is not smooth. It jumps back and forth constantly like it's freezing.

I was able to reproduce the behavior in a very simple example (using @next):

• live preview: https://wvwgj.csb.app/
• code: https://codesandbox.io/s/beautiful-solomon-wvwgj?file=/src/index.js

Demo:

Same CodeSandbox but using @latest instead of @next:

• live preview: https://m5srm.csb.app/
• code: https://codesandbox.io/s/intelligent-agnesi-m5srm?file=/src/index.js

Demo:

[RamyRais]

Hey, would you be interested to add the ability to render multiple progress bar in one page? I have this fork and would be nice to combine them.

[MickL]

Hey @rstacruz , adding Sass and TypeScript types is exactly what I was looking for! Seems like you finished all the work already and just the documentation is missing? Also I couldnt find the TypeScript typings so I needed to additionally install @types/nprogress :(

Btw. could you please also make the z-index, top and box-shadow a variable? I have a fixed header so I might need to customize those values.

[silasabbott]

Just checking up on this—@rstacruz let us know how we can help 🎉

[bombillazo]

Any update on this package, or has it been abandoned? Would like to know either way what the plan is for this component.