Update dependencies in issue templates & add playground + templates

webpro-nl · Sep 10, 2024 · 62bafaf · 62bafaf
1 parent 9e860fa
commit 62bafaf
Show file tree

Hide file tree

Showing 28 changed files with 338 additions and 67 deletions.
diff --git a/packages/create-config/README.md b/packages/create-config/README.md
@@ -17,9 +17,9 @@ Example result:
     "knip": "knip"
   },
   "devDependencies": {
-    "@types/node": "^20.12.8",
-    "knip": "^5.12.2",
-    "typescript": "^5.4.5"
+    "@types/node": "^20.14.8",
+    "knip": "^5.30.1",
+    "typescript": "^5.5.4"
   }
 }
 ```
diff --git a/packages/docs/src/content/docs/index.mdx b/packages/docs/src/content/docs/index.mdx
@@ -71,32 +71,36 @@ Using Knip in a commercial project?<br />Please consider [sponsoring me][1]!
   </Card>
 </CardGrid>
 
+## 🧡 Playground
+
+Head over to [the playground][7] to try out Knip in various settings.
+
 ## 🧡 Projects Using Knip
 
 :::section{.columns.min300}
 
-- [ArkType][7]
-- [Backstage (Spotify)][8]
-- [Cody (SourceGraph)][9]
-- [Create TypeScript App][10]
-- [ESLint][11]
-- [freeCodeCamp][12]
-- [Grafana][13]
-- [Nuxt][14]
-- [Mocha][15]
-- [Release It!][16]
-- [Svelte][17]
-- [Query][18], [Table][19] (TanStack)
-- [TypeScript (Microsoft)][20]
-- [typescript-eslint][21]
-- [TypeStat][22]
-- [XState (Stately)][23]
+- [ArkType][8]
+- [Backstage (Spotify)][9]
+- [Cody (SourceGraph)][10]
+- [Create TypeScript App][11]
+- [ESLint][12]
+- [freeCodeCamp][13]
+- [Grafana][14]
+- [Nuxt][15]
+- [Mocha][16]
+- [Release It!][17]
+- [Svelte][18]
+- [Query][19], [Table][20] (TanStack)
+- [TypeScript (Microsoft)][21]
+- [typescript-eslint][22]
+- [TypeStat][23]
+- [XState (Stately)][24]
 
 :::
 
 ## 🧡 Introduction Video
 
-[James Shopland][24] created this great introduction and overview of Knip:
+[James Shopland][25] created this great introduction and overview of Knip:
 
 <YouTube id="uhEkgWt-pUM" />
 
@@ -118,53 +122,54 @@ Special thanks to the wonderful people who have contributed to this project:
 ## 🧡 Articles
 
 - Smashing Magazine: [Knip: An Automated Tool For Finding Unused Files, Exports,
-  And Dependencies][25]
+  And Dependencies][26]
 - Effective TypeScript: [Recommendation Update: ✂️ Use knip to detect dead code
-  and types][26]
-- Maddy Miller: [Using Knip to find dead code in a high-traffic git repo][27]
-- Josh Goldberg: [Speeding Up Centered Part 4: Unused Code Bloat][28]
+  and types][27]
+- Maddy Miller: [Using Knip to find dead code in a high-traffic git repo][28]
+- Josh Goldberg: [Speeding Up Centered Part 4: Unused Code Bloat][29]
 - Taro: [Introducing Knip, a tool for removing unnecessary code from
-  TypeScript/JavaScript][29] (Japanese)
+  TypeScript/JavaScript][30] (Japanese)
 
 ## 🧡 Testimonials
 
 <Tweets />
 
 ## Read More
 
-- [Unused dependencies][30]
-- [Unused exports][31]
+- [Unused dependencies][31]
+- [Unused exports][32]
 
 [1]: ./sponsors
 [2]: ./overview/getting-started.mdx
 [3]: ./explanations/why-use-knip.md
 [4]: ./guides/troubleshooting.md
 [5]: ./reference/plugins.md
 [6]: https://x.com/robpalmer2/status/1805502964435505559
-[7]: https://github.com/arktypeio/arktype
-[8]: https://github.com/backstage/backstage
-[9]: https://github.com/sourcegraph/cody
-[10]: https://github.com/JoshuaKGoldberg/create-typescript-app
-[11]: https://github.com/eslint/eslint
-[12]: https://github.com/freeCodeCamp/freeCodeCamp
-[13]: https://github.com/grafana/grafana
-[14]: https://github.com/nuxt/nuxt
-[15]: https://github.com/mochajs/mocha
-[16]: https://github.com/release-it/release-it
-[17]: https://github.com/sveltejs/svelte
-[18]: https://github.com/TanStack/query
-[19]: https://github.com/TanStack/table
-[20]: https://github.com/microsoft/TypeScript
-[21]: https://github.com/typescript-eslint/typescript-eslint
-[22]: https://github.com/JoshuaKGoldberg/TypeStat
-[23]: https://github.com/statelyai/xstate
-[24]: https://www.jamesshopland.com
-[25]:
+[7]: /playground
+[8]: https://github.com/arktypeio/arktype
+[9]: https://github.com/backstage/backstage
+[10]: https://github.com/sourcegraph/cody
+[11]: https://github.com/JoshuaKGoldberg/create-typescript-app
+[12]: https://github.com/eslint/eslint
+[13]: https://github.com/freeCodeCamp/freeCodeCamp
+[14]: https://github.com/grafana/grafana
+[15]: https://github.com/nuxt/nuxt
+[16]: https://github.com/mochajs/mocha
+[17]: https://github.com/release-it/release-it
+[18]: https://github.com/sveltejs/svelte
+[19]: https://github.com/TanStack/query
+[20]: https://github.com/TanStack/table
+[21]: https://github.com/microsoft/TypeScript
+[22]: https://github.com/typescript-eslint/typescript-eslint
+[23]: https://github.com/JoshuaKGoldberg/TypeStat
+[24]: https://github.com/statelyai/xstate
+[25]: https://www.jamesshopland.com
+[26]:
   https://www.smashingmagazine.com/2023/08/knip-automated-tool-find-unused-files-exports-dependencies/
-[26]: https://effectivetypescript.com/2023/07/29/knip/
-[27]: https://madelinemiller.dev/blog/knip-dead-code/
-[28]:
+[27]: https://effectivetypescript.com/2023/07/29/knip/
+[28]: https://madelinemiller.dev/blog/knip-dead-code/
+[29]:
   https://www.joshuakgoldberg.com/blog/speeding-up-centered-part-4-unused-code-bloat/
-[29]: https://tech.basemachina.jp/entry/introduction-knip
-[30]: ./typescript/unused-dependencies.md
-[31]: ./typescript/unused-exports.md
+[30]: https://tech.basemachina.jp/entry/introduction-knip
+[31]: ./typescript/unused-dependencies.md
+[32]: ./typescript/unused-exports.md
diff --git a/packages/docs/src/content/docs/overview/getting-started.mdx b/packages/docs/src/content/docs/overview/getting-started.mdx
@@ -10,8 +10,7 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 Knip v5 requires Node.js v18.6 or higher. Or Bun.
 
-Looking for docs of previous versions? Go to [v3.knip.dev][1] or
-[v4.knip.dev][2].
+Want to try Knip without installation? Visit [the playground][1].
 
 ## Installation
 
@@ -89,7 +88,7 @@ Now you can run Knip to lint your project:
 
 Knip will lint your project and report unused files, dependencies and exports.
 
-You can skip the rest of this page and go to [configuration][3].
+You can skip the rest of this page and go to [configuration][2].
 
 ## Manual
 
@@ -177,6 +176,5 @@ To run Knip without adding it to your project:
 In this scenario `typescript` and `@types/node` are expected to be installed
 already.
 
-[1]: https://v3.knip.dev/overview/getting-started
-[2]: https://v4.knip.dev/overview/getting-started
-[3]: ./configuration.md
+[1]: /playground
+[2]: ./configuration.md
diff --git a/packages/docs/src/pages/playground.astro b/packages/docs/src/pages/playground.astro
@@ -0,0 +1,35 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+---
+
+<StarlightPage frontmatter={{ title: 'Playground', template: 'splash' }}>
+
+  <p>The projects below contain a few issues on purpose to demonstrate how Knip works.</p>
+
+  <p>Feel free to fork one of them and play around!</p>
+
+  <ul>
+    <li><a href="#basic">Basic</a></li>
+    <li><a href="#monorepo">Monorepo</a></li>
+  </ul>
+
+  <h2 id="basic">Basic</h2>
+
+  <p>
+    Visit this <a href="https://stackblitz.com/github/webpro-nl/knip/tree/main/templates/playground/basic?file=package.json&amp;view=editor">Knip playground onStackBlitz</a>
+    to try out Knip in a regular setting.</p>
+
+  <div class="playground">
+    <iframe src="https://stackblitz.com/github/webpro-nl/knip/tree/main/templates/playground/basic?file=package.json&amp;view=editor" />
+  </div>
+
+  <h2 id="monorepo">Monorepo</h2>
+
+  <p>
+    Visit this <a href="https://stackblitz.com/github/webpro-nl/knip/tree/main/templates/playground/monorepo?file=package.json&amp;view=editor">Knip playground onStackBlitz</a>
+    to try out Knip in a monorepo setting.</p>
+
+  <div class="playground">
+    <iframe src="https://stackblitz.com/github/webpro-nl/knip/tree/main/templates/playground/monorepo?file=package.json&amp;view=editor" />
+  </div>
+</StarlightPage>
diff --git a/packages/docs/src/styles/content.css b/packages/docs/src/styles/content.css
@@ -106,3 +106,9 @@ section.plugins li {
   border: 2px solid var(--sl-color-white);
   border-radius: 40px;
 }
+
+.playground iframe {
+  width: 100%;
+  height: 600px;
+  border: 1px solid var(--sl-color-orange);
+}
diff --git a/templates/demo/monorepo/package.json b/templates/demo/monorepo/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "workspaces": ["packages/*"],
   "devDependencies": {
-    "@types/node": "^20.12.7",
-    "knip": "^5.4.0",
-    "typescript": "^5.4.3"
+    "@types/node": "^20.14.8",
+    "knip": "^5.30.1",
+    "typescript": "^5.5.4"
   }
 }
diff --git a/templates/issue-reproduction/basic/package.json b/templates/issue-reproduction/basic/package.json
@@ -9,8 +9,8 @@
   "bugs": "https://github.com/webpro-nl/knip/issues",
   "homepage": "https://knip.dev",
   "devDependencies": {
-    "@types/node": "^20.12.7",
-    "knip": "^5.4.0",
-    "typescript": "^5.4.3"
+    "@types/node": "^20.14.8",
+    "knip": "^5.30.1",
+    "typescript": "^5.5.4"
   }
 }
diff --git a/templates/issue-reproduction/monorepo/package.json b/templates/issue-reproduction/monorepo/package.json
@@ -10,8 +10,8 @@
   "homepage": "https://knip.dev",
   "workspaces": ["packages/*"],
   "devDependencies": {
-    "@types/node": "^20.12.7",
-    "knip": "^5.4.0",
-    "typescript": "^5.4.3"
+    "@types/node": "^20.14.8",
+    "knip": "^5.30.1",
+    "typescript": "^5.5.4"
   }
 }
diff --git a/templates/playground/basic/README.md b/templates/playground/basic/README.md
@@ -0,0 +1,29 @@
+# Knip Playground (basic)
+
+Knip playground to show how Knip works. There are issues in this codebase on
+purpose.
+
+Feel free to fork this project and play around!
+
+## Usage
+
+```
+npm run knip
+```
+
+## Issues
+
+Running `knip` on this codebase will report the following issues:
+
+```
+❯ knip
+Unlisted dependencies (1)
+unhead  imported.ts
+Unused exports (1)
+unusedFunction  unknown  imported.ts:10:14
+```
+
+- `unhead` is an unlisted dependency, because it's used in `imported.ts`, but
+  not listed in `package.json`
+- `unused` is exported from `imported.ts` but it's not imported anywhere, so
+  it's reported as an unused export.
diff --git a/templates/playground/basic/imported.ts b/templates/playground/basic/imported.ts
@@ -0,0 +1,10 @@
+import { x } from 'tinyexec';
+import { createHead } from 'unhead';
+
+x;
+
+createHead;
+
+export const used = () => 'used';
+
+export const unusedFunction = () => 'unused';
diff --git a/templates/playground/basic/index.ts b/templates/playground/basic/index.ts
@@ -0,0 +1,3 @@
+import { used } from './imported';
+
+used;
diff --git a/templates/playground/basic/package.json b/templates/playground/basic/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@knip/playground-basic",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "knip": "knip"
+  },
+  "dependencies": {
+    "tinyexec": "^0.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.8",
+    "knip": "^5.30.1",
+    "typescript": "^5.5.4"
+  }
+}
diff --git a/templates/playground/monorepo/.gitignore b/templates/playground/monorepo/.gitignore
@@ -0,0 +1,3 @@
+dist
+node_modules
+tsconfig.tsbuildinfo
diff --git a/templates/playground/monorepo/README.md b/templates/playground/monorepo/README.md
@@ -0,0 +1,34 @@
+# Knip Playground (monorepo)
+
+Knip playground to show how Knip works. There are issues in this codebase on
+purpose.
+
+Feel free to fork this project and play around!
+
+## Usage
+
+```
+npm run knip
+```
+
+## Issues
+
+Running `knip` on this codebase will report the following issues:
+
+```
+❯ knip
+Unused dependencies (1)
+tinyglobby  package.json
+Unlisted dependencies (1)
+js-yaml  packages/shared/src/used-fn.ts
+Unused exports (1)
+unusedFunction  unknown  packages/shared/src/exports.ts:7:14
+```
+
+- `tinyglobby` is unused in the root `package.json`. It's listed and used in the
+  `packages/shared` workspace, but not referenced elsewhere in the root
+  workspace.
+- `js-yaml` is used in `packages/shared/src/used-fn.ts`, but it's not listed as
+  a dependency in `packages/shared/package.json`.
+- `unusedFunction` is exported from `packages/shared/src/exports.ts` but it's
+  not imported anywhere.
diff --git a/templates/playground/monorepo/knip.ts b/templates/playground/monorepo/knip.ts
@@ -0,0 +1,10 @@
+/** @type {import('knip').KnipConfig} */
+const config = {
+  workspaces: {
+    'packages/shared': {
+      includeEntryExports: true,
+    },
+  },
+};
+
+export default config;
diff --git a/templates/playground/monorepo/package.json b/templates/playground/monorepo/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@knip/playground-monorepo",
+  "version": "1.0.0",
+  "private": true,
+  "workspaces": ["packages/*"],
+  "scripts": {
+    "build": "tsc -b packages/shared packages/server packages/client",
+    "knip": "knip"
+  },
+  "dependencies": {
+    "tinyglobby": "^0.2.6"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.8",
+    "knip": "^5.30.1",
+    "typescript": "^5.5.4"
+  }
+}