Remove large dependencies

[Cretezy]

Remove large dependencies

[wardoost]

I have been using babel-plugin-import for util packages like this one. Might be good to add something in the docs about this? .babelrc is pretty straight forward:

{
  "plugins": [
    [
      "import", {
        "libraryName": "react-use",
        "libraryDirectory": "lib",
        "camel2DashComponentName": false
      }
    ]
  ]
}

[streamich]

That would be great! Sorry, for bloating dependencies.

[huchenme]

@streamich I believe create-react-app have tree shaking enabled, but still not able to use es module syntax, getting keyboardjs missing error without installing those peerDependencies

import { useAsync } from 'react-use';

Error:

./node_modules/react-use/esm/useKeyboardJs.js
Module not found: Can't resolve 'keyboardjs' in '/Users/chen/projects/github/open_source/hacker-tab-extension/node_modules/react-use/esm'

[ctrlplusb]

Always a great reference site:

https://bundlephobia.com/[email protected]

Could also be a good idea to update the build configuration for this package so that it additionally outputs an ES6 version (pointed at by the module key within package.json).

I do this in my library, for example here is the package output:
https://unpkg.com/[email protected]/

Some build systems (e.g. create-react-app) will then automatically use the ES6 version and treeshake accordingly.

[Cretezy]

@ctrlplusb bundlephobia is what prompted me to open this ticket, and is preventing us to use this because we don't want to bloat our bundle!

Is there any progress on this?

[streamich]

Is there any progress on this?

@Cretezy Well, on Feb 7 you volunteered to make a PR 😄:

If this is a go, I could make the PR with the changes (code & docs) required for this.

[Cretezy]

Ah damn I had never seen that comment! I'll start working on something when I have free time

[Cretezy]

Opened PR: #161

[streamich]

1. react-use now has "sideEffects": false set, which should enable Webpack tree-shaking.
2. See Usage readme if your bundler does not support tree-shaking.
3. Big dependencies are now in peerDependencies there are few dependencies this library installs but all of those are very minor:
   • copy-to-clipboard — this is just one file and used only if you use copy-to-clipboard hook.
   • nano-css — this should add less than 1Kb to your bundle and only if you use useCss hook.
   • react-fast-compare — this is just one function for deep comparison of objects.
   • react-wait — this is useWait hook, will be included in your bundle only if you use useWait hook.
   • screenfull — used for cross-browser compatibility only in useFullscreen hook.
   • throttle-debounce — just two functions: throttle and debounce.
   • ts-easing — list of easing functions for animations.