@knip/mcp 0.0.20 → 0.0.22

package/src/docs/docs/features/auto-fix.mdx

@@ -0,0 +1,348 @@
+---
+title: Auto-fix
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { Badge } from '@astrojs/starlight/components';
+
+Run Knip as you normally would, and if the report looks good then run it again
+with the `--fix` flag to let Knip automatically apply fixes. It fixes the
+following [issue types][1]:
+
+- Remove `export` keyword for unused exports, re-exports, and exported types
+- Remove `export default` keywords for unused default exports
+- Remove unused enum members
+- Remove unused class members (disabled by default)
+- Remove unused `dependencies` and `devDependencies` from `package.json`
+- Remove unused files
+- Remove unused catalog entries
+
+:::caution
+
+Use a VCS (version control system) like Git to review and undo changes as
+necessary.
+
+:::
+
+## Flags
+
+### Fix
+
+Add the `--fix` flag to remove unused exports and dependencies:
+
+```sh
+knip --fix
+```
+
+Add `--allow-remove-files` to allow Knip to remove unused files:
+
+```sh
+knip --fix --allow-remove-files
+```
+
+Use `--fix-type` to fix only specific issue types:
+
+- `dependencies`
+- `exports`
+- `types`
+- `files`
+- `catalog`
+
+Example:
+
+```sh
+knip --fix-type exports,types
+knip --fix-type exports --fix-type types   # same as above
+```
+
+### Format
+
+Add `--format` to format the modified files using the formatter and
+configuration in your project. Supports Biome, deno fmt, dprint and Prettier
+(using [Formatly][2]):
+
+```sh
+knip --fix --format
+```
+
+## Demo
+
+<video controls width="500">
+  <source src="/screenshots/fix.mp4" type="video/mp4" />
+
+  <source src="/screenshots/fix.webm" type="video/webm" />
+</video>
+
+## Post-fix
+
+After Knip has fixed issues, there are four things to consider:
+
+### 1. Use a formatter
+
+Use a tool like Prettier or Biome if the code needs formatting. Knip removes the
+minimum amount of code while leaving it in a working state.
+
+:::tip
+
+Add the `--format` flag to format the modified files using the formatter and
+configuration in your project.
+
+:::
+
+### 2. Unused variables
+
+Use a tool like ESLint or Biome to find and remove unused imports and variables
+inside files. Even better, try [remove-unused-vars][3] to remove unused
+variables within files.
+
+This may result in more deleted code, and Knip may then find more unused code.
+Rinse and repeat!
+
+### 3. Unused dependencies
+
+Verify changes in `package.json` and update dependencies using your package
+manager.
+
+<Tabs syncKey="pm">
+  <TabItem label="npm">
+    ```shell
+    npm install
+    ```
+  </TabItem>
+
+  <TabItem label="pnpm">
+    ```shell
+    pnpm install
+    ```
+  </TabItem>
+
+  <TabItem label="bun">
+    ```shell
+    bun install
+    ```
+  </TabItem>
+
+  <TabItem label="yarn">
+    ```shell
+    yarn
+    ```
+  </TabItem>
+</Tabs>
+
+### 4. Install unlisted dependencies
+
+If Knip reports unlisted dependencies or binaries, they should be installed
+using the package manager in the project, for example:
+
+<Tabs syncKey="pm">
+  <TabItem label="npm">
+    ```shell
+    npm install unlisted-package
+    ```
+  </TabItem>
+
+  <TabItem label="pnpm">
+    ```shell
+    pnpm add unlisted-package
+    ```
+  </TabItem>
+
+  <TabItem label="bun">
+    ```shell
+    bun add unlisted-package
+    ```
+  </TabItem>
+
+  <TabItem label="yarn">
+    ```shell
+    yarn add unlisted-package
+    ```
+  </TabItem>
+</Tabs>
+
+## Example results
+
+### Exports
+
+The `export` keyword for unused exports is removed:
+
+```diff title="module.ts"
+-export const unused = 1;
+-export default class MyClass {}
++const unused = 1;
++class MyClass {}
+```
+
+The `default` keyword was also removed here.
+
+Knip removes the whole or part of export declarations:
+
+```diff title="module.ts"
+type Snake = 'python' | 'anaconda';
+const Owl = 'Hedwig';
+const Hawk = 'Tony';
+-export type { Snake };
+-export { Owl, Hawk };
++;
++;
+```
+
+### Re-exports
+
+Knip removes the whole or part of re-exports:
+
+```diff title="file.js"
+-export { Cat, Dog } from './pets';
+-export { Lion, Elephant } from './jungle';
++export { Elephant } from './jungle'
+```
+
+Also across any chain of re-exports:
+
+<Tabs>
+  <TabItem label="module.ts">
+    ```diff
+    export const Hawk = 'Tony';
+    -export const Owl = 'Hedwig';
+    +const Owl = 'Hedwig';
+    ```
+  </TabItem>
+
+  <TabItem label="barrel.ts">
+    ```diff
+    export * from './module.js';
+    ```
+  </TabItem>
+
+  <TabItem label="index.ts">
+    ```diff
+    -export { Hawk, Owl } from './barrel.js';
+    +export { Hawk } from './barrel.js'
+    ```
+  </TabItem>
+</Tabs>
+
+### Export assignments
+
+Knip removes individual exported items in "export assignments", but does not
+remove the entire export declaration if it's empty:
+
+```diff title="file.js"
+-export const { a, b  } = fn();
++export const {   } = fn();
+
+-export const [c, d] = [c, d];
++export const [, ] = [c, d];
+```
+
+Reason: the right-hand side of the assignment might have side-effects. It's not
+safe to always remove the whole declaration. This could be improved in the
+future (feel free to open an issue/RFC).
+
+### Enum members
+
+Unused members of enums are removed:
+
+```diff title="file.ts"
+export enum Directions {
+  North = 1,
+  East = 2,
+-  South = 3,
+  West = 4,
+}
+```
+
+### CommonJS
+
+Knip supports CommonJS and removes unused exports:
+
+```diff title="common.js"
+-module.exports = { identifier, unused };
++module.exports = { identifier,  };
+
+-module.exports.UNUSED = 1;
+-module.exports['ACCESS'] = 1;
++
++
+```
+
+Warning: the right-hand side of such an assignment might have side-effects. Knip
+currently removes the whole declaration (feel free to open an issue/RFC).
+
+### Dependencies
+
+Unused dependencies are removed from `package.json`:
+
+```diff title="package.json"
+ {
+   "name": "my-package",
+   "dependencies": {
+-    "rimraf": "*",
+-    "unused-dependency": "*"
++    "rimraf": "*"
+   },
+-  "devDependencies": {
+-    "unreferenced-package": "5.3.3"
+-  }
++  "devDependencies": {}
+ }
+```
+
+### Class members   <Badge text="experimental" variant="caution" />
+
+Unused members of classes can be removed:
+
+```diff title="file.ts"
+export class Rectangle {
+  constructor(public width: number, public height: number) {}
+
+-  static Key = 1;
++
+
+  area() {
+    return this.width * this.height;
+  }
+
+-  public get unusedGetter(): string {
+-    return 'unusedGetter';
+-  }
+}
+```
+
+Currently Knip might be too eager removing class members when they're not
+referenced internally but meant to be called by an external library. For
+instance, Knip might think `componentDidMount` and `render` in React class
+component are unused and will remove those.
+
+Note that [`classMembers` aren't included by default][4].
+
+### Catalog entries
+
+Unused [catalog][5] entries are removed from `pnpm-workspace.yaml`:
+
+```diff title="pnpm-workspace.yaml"
+ packages:
+   - 'packages/*'
+ catalog:
+   react: ^18.0.0
+-  unused-package: ^1.0.0
+```
+
+Catalogs in `package.json` are supported as well.
+
+## What's not included
+
+Operations that auto-fix does not (yet) perform and why:
+
+- Add unlisted (dev) dependencies to `package.json` (should it go into
+  `dependencies` or `devDependencies`? For monorepos in current workspace or
+  root?)
+- Add unlisted binaries (which package and package version contains the used
+  binary?)
+- Fix duplicate exports (which one should be removed?)
+
+[1]: ../reference/issue-types.md
+[2]: https://github.com/JoshuaKGoldberg/formatly
+[3]: https://github.com/webpro-nl/remove-unused-vars
+[4]: ../guides/handling-issues.mdx#class-members
+[5]: https://pnpm.io/catalogs

package/src/docs/docs/features/compilers.md

@@ -0,0 +1,172 @@
+---
+title: Compilers
+---
+
+Projects may have source files that are not JavaScript or TypeScript, and thus
+require compilation (or transpilation, or pre-processing, you name it). Files
+like `.mdx`, `.astro`, `.vue` and `.svelte` may also import other source files
+and external dependencies. So ideally, these files are included when linting the
+project. That's why Knip supports compilers.
+
+## Built-in compilers
+
+Knip has built-in "compilers" for the following file extensions:
+
+- `.astro`
+- `.css` (only enabled by `tailwindcss`)
+- `.mdx`
+- `.prisma`
+- `.sass` + `.scss`
+- `.svelte`
+- `.vue`
+
+Knip does not include real compilers for those files, but regular expressions to
+collect `import` statements. This is fast, requires no dependencies, and enough
+for Knip to build the module graph.
+
+On the other hand, real compilers may expose their own challenges in the context
+of Knip. For instance, the Svelte compiler keeps `exports` intact, while they
+might represent component properties. This results in those exports being
+reported as unused by Knip.
+
+The built-in functions seem to do a decent job, but override them however you
+like.
+
+Compilers are enabled only if certain dependencies are found. If that's not
+working for your project, set `true` and enable any compiler manually:
+
+```ts title="knip.ts"
+export default {
+  compilers: {
+    mdx: true,
+  },
+};
+```
+
+## Custom compilers
+
+Built-in compilers can be overridden, and additional compilers can be added.
+Since compilers are functions, the Knip configuration file must be a dynamic
+`.js` or `.ts` file.
+
+### Interface
+
+The compiler function interface is straightforward. Text in, text out:
+
+```ts
+(source: string, filename: string) => string;
+```
+
+This may also be an `async` function.
+
+:::tip[Note]
+
+Compilers will automatically have their extension added as a default extension
+to Knip. This means you don't need to add something like `**/*.{ts,vue}` to the
+`entry` or `project` file patterns manually.
+
+:::
+
+### Examples
+
+- [CSS][1]
+- [MDX][2]
+- [Svelte][3]
+- [Vue][4]
+
+#### CSS
+
+Here's an example, minimal compiler for CSS files:
+
+```ts title="knip.ts"
+export default {
+  compilers: {
+    css: (text: string) => [...text.matchAll(/(?<=@)import[^;]+/g)].join('\n'),
+  },
+};
+```
+
+You may wonder why the CSS compiler is not included by default. It's currently
+not clear if it should be included. And if so, what would be the best way to
+determine it should be enabled, and what syntax(es) it should support. Note that
+Tailwind CSS and SASS/SCSS compilers are included.
+
+#### MDX
+
+Another example, in case the built-in MDX compiler is not enough:
+
+```ts
+import { compile } from '@mdx-js/mdx';
+
+export default {
+  compilers: {
+    mdx: async text => (await compile(text)).toString(),
+  },
+};
+```
+
+#### Svelte
+
+In a Svelte project, the compiler is automatically enabled. Override and use
+Svelte's compiler for better results if the built-in "compiler" is not enough:
+
+```ts
+import type { KnipConfig } from 'knip';
+import { compile } from 'svelte/compiler';
+
+export default {
+  compilers: {
+    svelte: (source: string) => compile(source, {}).js.code,
+  },
+} satisfies KnipConfig;
+```
+
+#### Vue
+
+In a Vue project, the compiler is automatically enabled. Override and use Vue's
+parser for better results if the built-in "compiler" is not enough:
+
+```ts
+import type { KnipConfig } from 'knip';
+import {
+  parse,
+  type SFCScriptBlock,
+  type SFCStyleBlock,
+} from 'vue/compiler-sfc';
+
+function getScriptBlockContent(block: SFCScriptBlock | null): string[] {
+  if (!block) return [];
+  if (block.src) return [`import '${block.src}'`];
+  return [block.content];
+}
+
+function getStyleBlockContent(block: SFCStyleBlock | null): string[] {
+  if (!block) return [];
+  if (block.src) return [`@import '${block.src}';`];
+  return [block.content];
+}
+
+function getStyleImports(content: string): string {
+  return [...content.matchAll(/(?<=@)import[^;]+/g)].join('\n');
+}
+
+const config = {
+  compilers: {
+    vue: (text: string, filename: string) => {
+      const { descriptor } = parse(text, { filename, sourceMap: false });
+      return [
+        ...getScriptBlockContent(descriptor.script),
+        ...getScriptBlockContent(descriptor.scriptSetup),
+        ...descriptor.styles.flatMap(getStyleBlockContent).map(getStyleImports),
+      ].join('\n');
+    },
+  },
+} satisfies KnipConfig;
+
+export default config;
+```
+
+[1]: #css
+[2]: #mdx
+[3]: #svelte
+[4]: #vue

package/src/docs/docs/features/integrated-monorepos.md

@@ -0,0 +1,61 @@
+---
+title: Integrated Monorepos
+sidebar:
+  order: 3
+---
+
+Some repositories have a single `package.json`, but consist of multiple projects
+with configuration files across the repository. A good example is the [Nx
+integrated monorepo style][1].
+
+:::tip
+
+An integrated monorepo is a single workspace.
+
+:::
+
+## Entry Files
+
+The default entrypoints files might not be enough. Here's an idea that might fit
+this type of monorepo:
+
+```json title="knip.json"
+{
+  "entry": ["{apps,libs}/**/src/index.{ts,tsx}"],
+  "project": ["{apps,libs}/**/src/**/*.{ts,tsx}"]
+}
+```
+
+## Plugins
+
+Let's assume some of these projects are applications ("apps") which have their
+own ESLint configuration files and Cypress configuration and test files. This
+may result in those files getting reported as unused, and consequently also the
+dependencies they import and refer to.
+
+In that case, we could configure the ESLint and Cypress plugins like this:
+
+```json title="knip.json"
+{
+  "eslint": {
+    "config": ["{apps,libs}/**/.eslintrc.json"]
+  },
+  "cypress": {
+    "entry": ["apps/**/cypress.config.ts", "apps/**/cypress/e2e/*.spec.ts"]
+  }
+}
+```
+
+Adapt the file patterns to your project, and the relevant `config` and `entry`
+files and dependencies should no longer be reported as unused.
+
+## Internal Workspace Dependencies
+
+A note about repositories with multiple `package.json` files and **internal**
+workspace packages: it is recommended to list all dependencies in each consuming
+`package.json`, allowing Knip to do fine-grained reporting of both unused and
+unlisted dependencies.
+
+An alternative is to `ignoreDependencies: ["@internal/*"]`.
+
+[1]: https://nx.dev/getting-started/tutorials/integrated-repo-tutorial