Unplugin-add-deps NPM

License Last Commit Stars Forks

🎩 Features

Available as a ready-to-use vite, rollup, esbuild, webpack or a babel plugin!
Constructs [] hooks at build time automatically!

💽 Installation

pnpm i unplugin-add-deps

🔮 Usage

import { vite, rollup, webpack, babel, esbuild } from "unplugin-add-deps";

//vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { vite } from "unplugin-add-deps";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vite(), react()],
});

⁉ FAQ

Q. How to prevent adding deps to hooks?
A. By using a leading comment to the hook /*ignore*/
```
/*ignore*/ useEffect(() => {}, []);
```

Q. Why does it not add deps to hook without the leading comment?

A. It is necessary to pass the blank deps array to the hook. This also prevents from ts getting mad at you!

let [count, setCount] = useState(0);
useEffect(() => {
  console.log(count);
}, []);
//  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
let [count, setCount] = useState(0);
useEffect(() => {
  console.log(count);
}, [count]);

Q. How about props?

A. It is necessary to follow the destructure pattern for the props for the plugin to pick those as deps

// Right way ✅
function App({ hello }) {
  useEffect(() => {
    console.log(hello);
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}
//  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
function App({ hello }) {
  useEffect(() => {
    console.log(hello);
  }, [hello]);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

/* Wrong Way ❎*/
function App(props) {
  useEffect(() => {
    console.log(props.hello);
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}