Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
webpro committed Oct 24, 2024
1 parent 20b2504 commit c9afd52
Show file tree
Hide file tree
Showing 9 changed files with 319 additions and 232 deletions.
16 changes: 15 additions & 1 deletion packages/docs/scripts/generate-plugin-docs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,21 @@ for await (const dir of directories) {
]
: [];

const argsText = args ? parseFragment('## Shell commands\n\nThis plugin enables argument parsing') : [];
const argsText = args
? [
...parseFragment(
`## Shell commands\n\nThis plugin adds argument parsing for the <code>${args.binaries ? args.binaries.join(' and ') : pluginName}</code> binary. Configuration:`
),
...parseFragment(
`\`\`\`\n${Object.entries(args)
.filter(([key]) => key !== 'binaries')
.map(
([key, value]) => `${key}: ${typeof value === 'function' ? value.toString() : JSON.stringify(value)}`
)
.join('\n')}\n\`\`\``
),
]
: [];

const tree = u('root', [
frontmatter,
Expand Down
3 changes: 2 additions & 1 deletion packages/docs/src/content/docs/blog/two-years.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -96,11 +96,12 @@ And eh.. gotta take my chances: how about [joining this awesome club][6]?

## Acknowledgements

Thanks to Joshua Goldberg for [emoji-blast](https://www.emojiblast.dev)! 🎉
Thanks to Joshua Goldberg for [emoji-blast][7]! 🎉

[1]: https://www.npmjs.com/package/exportman/v/0.0.1
[2]: /cow-with-orange-scissors-van-gogh-style.webp
[3]: https://github.com/webpro-nl/knip/releases/tag/5.31.0
[4]: ../features/auto-fix.md
[5]: https://github.com/unjs/jiti
[6]: /sponsors
[7]: https://www.emojiblast.dev
82 changes: 65 additions & 17 deletions packages/docs/src/content/docs/explanations/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,32 @@ sidebar:
This page describes why Knip uses plugins and the difference between `config`
and `entry` files.

Knip has an extensive and growing [list of built-in plugins][1]. Currently it's
not possible to add custom plugins, but feel free to [request a plugin][2] or
even [write a plugin][3] so others can benefit too.
Knip has an extensive and growing [list of built-in plugins][1]. Feel free to
[request a plugin][2] or even [write a plugin][3] so others can benefit too!

## Enabled
## What does a plugin do?

Plugins are enabled if the related package is listed in the list of dependencies
in `package.json`. For instance, if `astro` is listed in `dependencies` or
`devDependencies`, then the Astro plugin is enabled.
`devDependencies`, then the Astro plugin is enabled. And this means that this
plugin will:

- Handle [configuration files][4] like `astro.config.mjs`
- Add [entry files][5] such as `src/pages/**/*.astro`

## Configuration files

Knip uses [entry files][4] as starting points to scan your source code and
Knip uses [entry files][6] as starting points to scan your source code and
resolve other internal files and external dependencies. The dependency graph can
be statically resolved through the `require` and `import` statements in those
source files. However, configuration files reference external dependencies in
various ways. Knip uses a plugin for each tool to parse configuration files and
find those dependencies.

In this example we look at [Knip's ESLint plugin][5]. The default `config` file
patterns include `.eslintrc.json`. Here's a minimal example:
### Example: ESLint

In the first example we look at [the ESLint plugin][7]. The default `config`
file patterns include `.eslintrc.json`. Here's a minimal example:

```json title=".eslintrc.json"
{
Expand All @@ -39,12 +44,44 @@ patterns include `.eslintrc.json`. Here's a minimal example:
Configuration files like this don't `import` or `require` anything, but they do
require the referenced dependencies to be installed.

In this case, the plugin will return the `eslint-config-airbnb`,
`eslint-config-prettier` and `@typescript-eslint/eslint-plugin` dependencies, so
Knip knows they should be listed in `package.json`.
In this case, the plugin will return three dependencies:

- `eslint-config-airbnb`
- `eslint-config-prettier`
- `@typescript-eslint/eslint-plugin`

Knip will then look for missing dependencies in `package.json` and report those
as unlisted. And vice versa, if there are any ESLint plugins listed in
`package.json`, but unused, those will be reported as well.

### Example: Vitest

The second example uses [the Vitest plugin][7]. Here's a minimal example of a
Vitest configuration file:

```ts title="vitest.config.ts"
import { defineConfig } from 'vitest/config';

export default defineConfig({
test: {
coverage: {
provider: 'istanbul',
},
environment: 'happy-dom',
},
});
```

The Vitest plugin reads this configuration and return two dependencies:

- `@vitest/coverage-istanbul`
- `vitest-environment-happy-dom`

Knip will look for missing and unused dependencies in `package.json` and report
accordingly.

Some tools allow configuration to be stored in `package.json`, that's why some
of the relevant plugins contain `package.json` in the list of `config` files.
plugins contain `package.json` in the list of `config` files.

:::tip[Summary]

Expand Down Expand Up @@ -135,7 +172,8 @@ The Angular plugin parses the Angular configuration file. Here's a fragment:
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/knip-angular-example",
"main": "src/main.ts"
"main": "src/main.ts",
"tsConfig": "tsconfig.app.json"
}
}
}
Expand All @@ -147,6 +185,9 @@ The Angular plugin parses the Angular configuration file. Here's a fragment:
This will result in `src/main.ts` being added as an entry file (and
`@angular-devkit/build-angular` as a referenced dependency).

Additionally, the Angular plugin returns `tsconfig.app.json` as a configuration
file for the TypeScript plugin.

### GitHub Actions

This plugin parses workflow YAML files. This fragment contains three `run`
Expand All @@ -160,12 +201,17 @@ jobs:
- run: npm install
- run: node scripts/build.js
- run: node --loader tsx scripts/deploy.ts
- run: playwright test -c playwright.web.config.ts
working-dir: e2e
```
From these scripts, the `scripts/build.js` and `scripts/deploy.ts` files will be
added as entry files by the GitHub Actions plugin.

Read more about this in [Script Parser][6].
Additionally, the file `e2e/playwright.web.config.ts` is detected and will be
handed over as a Playwright configuration file.

Read more about this in [Script Parser][8].

### webpack

Expand Down Expand Up @@ -251,6 +297,8 @@ Plugins are configured with two distinct types of files:
[1]: ../reference/plugins.md
[2]: https://github.com/webpro-nl/knip/issues/483
[3]: ../guides/writing-a-plugin.md
[4]: ./entry-files.md
[5]: ../reference/plugins/eslint.md
[6]: ../features/script-parser.md
[4]: #configuration-files
[5]: #entry-files
[6]: ./entry-files.md
[7]: ../reference/plugins/eslint.md
[8]: ../features/script-parser.md
32 changes: 18 additions & 14 deletions packages/docs/src/content/docs/explanations/why-use-knip.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,14 @@ in complexity and size, automated and comprehensive tooling becomes critical.
Knip finds and fixes unused files, exports and dependencies.

Deep analysis from [fine-grained entry points][1] based on the actual frameworks
and tooling in your [(mono)repo][2] with [custom module resolution][3],
[configuration file parsers][4], [compilers][5], a [shell script parser][6] and
additional heuristics to maximize coverage for comprehensive and actionable
results.
and tooling in your [(mono)repo][2] for accurate and actionable results.
Advanced features for maximum coverage:

- [Custom module resolution][3]
- [Configuration file parsers][4]
- [Advanced shell script parser][5]
- [Built-in and custom compilers][6]
- [Auto-fix many issues][7]

:::

Expand All @@ -38,9 +42,9 @@ code":
the same for files, dependencies and exports that you forgot to delete.
- Keeping dead code around has a negative value on readability, as it can be
misleading and distracting. Even if it serves no purpose it will need to be
maintained (source: [Safe dead code removal → YAGNI][7]).
- Also see [Why are unused dependencies a problem?][8] and [Why are unused
exports a problem?][9].
maintained (source: [Safe dead code removal → YAGNI][8]).
- Also see [Why are unused dependencies a problem?][9] and [Why are unused
exports a problem?][10].

## Automation

Expand All @@ -53,7 +57,7 @@ times better and faster than trying to do it manually.

:::tip

Knip not only finds clutter, it can also [clean it][10]!
Knip not only finds clutter, it can also [clean it][7]!

Use Knip next to a linter like ESLint or Biome: after removing unused variables
inside files, Knip might find even more unused code. Rinse and repeat!
Expand Down Expand Up @@ -116,10 +120,10 @@ so you can get rid of false positives? A variety of reasons:
[2]: ../features/monorepos-and-workspaces.md
[3]: ../reference/faq.md#why-doesnt-knip-use-an-existing-module-resolver
[4]: ./plugins.md#configuration-files
[5]: ../features/compilers.md
[6]: ../features/script-parser.md
[7]: https://jfmengels.net/safe-dead-code-removal/#yagni-you-arent-gonna-need-it
[8]: ../typescript/unused-dependencies.md#why-are-unused-dependencies-a-problem
[9]: ../typescript/unused-exports.md#why-are-unused-exports-a-problem
[10]: ../features/auto-fix.mdx
[5]: ../features/script-parser.md
[6]: ../features/compilers.md
[7]: ../features/auto-fix.mdx
[8]: https://jfmengels.net/safe-dead-code-removal/#yagni-you-arent-gonna-need-it
[9]: ../typescript/unused-dependencies.md#why-are-unused-dependencies-a-problem
[10]: ../typescript/unused-exports.md#why-are-unused-exports-a-problem
[11]: ../reference/jsdoc-tsdoc-tags.md
1 change: 0 additions & 1 deletion packages/docs/src/content/docs/features/auto-fix.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,6 @@ Also across any chain of re-exports:
```
</TabItem>
</Tabs>
### Export assignments
Expand Down
20 changes: 14 additions & 6 deletions packages/docs/src/content/docs/features/script-parser.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
title: Script Parser
---

Knip parses shell commands and scripts to find additional dependencies and entry
files in various places:
Knip parses shell commands and scripts to find additional dependencies, entry
files and configuration files in various places:

- In [`package.json`][1]
- In specific [`config` files][2]
- In [source code][3]

Shell scripts can be read and statically analyzed, but not executed.
Shell scripts can be read and statically analyzed, but they're not executed.

## package.json

Expand Down Expand Up @@ -56,21 +56,29 @@ or parsed by Knip.

### Scripts parsing

When parsing the `scripts` entries of `package.json`, `knip` also detect
dependencies of `-r`, `--require`, `--loader` or `--import` arguments. Example:
When parsing the `scripts` entries of `package.json`, Knip detects dependencies
of `-r`, `--require`, `--loader` or `--import` arguments. It also recognizes
configuration files. Example:

```json
{
"name": "my-lib",
"scripts": {
"start": "node --import tsx/esm run.ts"
"start": "node --import tsx/esm run.ts",
"bundle": "tsup -c tsup.lib.config.ts",
"type-check": "tsc -p tsconfig.app.json"
}
}
```

This will have `tsx` marked as a referenced dependency, and adds `run.ts` as an
entry file.

The following files are also detected as configuration files:

- `tsup.lib.config.ts` - to be handled by the tsup plugin
- `tsconfig.app.json` - to be handled by the TypeScript plugin

## Plugins

Some plugins also use the script parser to extract entry files and dependencies
Expand Down
53 changes: 29 additions & 24 deletions packages/docs/src/content/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,6 @@ hero:
link: ./overview/getting-started
icon: right-arrow
variant: primary
- text: 'NEW! Two Years'
link: /blog/two-years
icon: star
variant: secondary
- text: View on GitHub
link: https://github.com/webpro-nl/knip
icon: external
Expand All @@ -44,9 +40,14 @@ import Contributors from '../../components/Contributors.astro';
<Card title="How?" icon="setting">

Deep analysis from fine-grained entry points based on the actual frameworks
and tooling in your (mono)repo with custom module resolution, configuration
file parsers, compilers, a shell script parser and additional heuristics to
maximize coverage for comprehensive and actionable results.
and tooling in your (mono)repo for accurate and actionable results.
Advanced features for maximum coverage:

* Custom module resolution
* Configuration file parsers
* Advanced shell script parser
* Built-in and custom ompilers
* Auto-fix many issues

</Card>
</CardGrid>
Expand Down Expand Up @@ -116,40 +117,44 @@ Special thanks to the wonderful people who have contributed to this project:

Most recent article first:

- Anthony Pena:
[Knip: l'ultime outil pour faire le ménage dans vos projets!](https://k49.fr.nf/knip-l-ultime-outil-pour-faire-le-menage-dans-vos-projets/)
- [มาทำความสะอาด Project โค้ดของเราด้วย Knip กัน][6] (2024-10-22/Thai)
- Anthony Pena: [Knip: l'ultime outil pour faire le ménage dans vos projets!][7]
(2024-10-08/French)
- Taro: [Introducing Knip, a tool for removing unnecessary code from
TypeScript/JavaScript][10] (2024-07-25/Japanese)
- Maddy Miller: [Using Knip to find dead code in a high-traffic git repo][8]
- Taro: [TypeScript/JavaScriptの不要なコードを削除するツール「Knip」の紹介][8]
(2024-07-25/Japanese)
- Maddy Miller: [Using Knip to find dead code in a high-traffic git repo][9]
(2023-09-17)
- Josh Goldberg: [Speeding Up Centered Part 4: Unused Code Bloat][9]
- Josh Goldberg: [Speeding Up Centered Part 4: Unused Code Bloat][10]
(2023-08-21)
- Smashing Magazine: [Knip: An Automated Tool For Finding Unused Files, Exports,
And Dependencies][6] (2023-08-14)
And Dependencies][11] (2023-08-14)
- Effective TypeScript: [Recommendation Update: ✂️ Use knip to detect dead code
and types][7] (2023-07-29)
and types][12] (2023-07-29)

## 🧡 Testimonials

<Tweets />

## Read More

- [Unused dependencies][11]
- [Unused exports][12]
- [Unused dependencies][13]
- [Unused exports][14]

[1]: ./explanations/why-use-knip.md
[2]: ./sponsors
[3]: ./playground
[4]: ./guides/troubleshooting.md
[5]: https://www.jamesshopland.com
[6]:
https://www.smashingmagazine.com/2023/08/knip-automated-tool-find-unused-files-exports-dependencies/
[7]: https://effectivetypescript.com/2023/07/29/knip/
[8]: https://madelinemiller.dev/blog/knip-dead-code/
[9]:
https://engineering.thinknet.co.th/%E0%B8%A1%E0%B8%B2%E0%B8%97%E0%B8%B3%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%AA%E0%B8%B0%E0%B8%AD%E0%B8%B2%E0%B8%94-project-%E0%B9%82%E0%B8%84%E0%B9%89%E0%B8%94%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B9%80%E0%B8%A3%E0%B8%B2%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-knip-%E0%B8%81%E0%B8%B1%E0%B8%99-20dbd65f6b58
[7]:
https://k49.fr.nf/knip-l-ultime-outil-pour-faire-le-menage-dans-vos-projets/
[8]: https://tech.basemachina.jp/entry/introduction-knip
[9]: https://madelinemiller.dev/blog/knip-dead-code/
[10]:
https://www.joshuakgoldberg.com/blog/speeding-up-centered-part-4-unused-code-bloat/
[10]: https://tech.basemachina.jp/entry/introduction-knip
[11]: ./typescript/unused-dependencies.md
[12]: ./typescript/unused-exports.md
[11]:
https://www.smashingmagazine.com/2023/08/knip-automated-tool-find-unused-files-exports-dependencies/
[12]: https://effectivetypescript.com/2023/07/29/knip/
[13]: ./typescript/unused-dependencies.md
[14]: ./typescript/unused-exports.md
Loading

0 comments on commit c9afd52

Please sign in to comment.