Improve mdx "compiler" (resolve #1471)

Author: webpro

packages/knip/fixtures/compilers/module.mdx

@@ -7,3 +7,29 @@ import Styles from './styles.css';
 <Component />
 
 <Docs />
+
+Using a top-level `import type` declaration (`import type { A, B } from 'fake-module'`) ensures the entire import statement is removed during transpilation.
+
+You can also use `import { something } from 'another-fake'` inline.
+
+Multiple inline codes: `import x from 'x'` and `import y from 'y'` on same line.
+
+Nested backticks won't happen but edge case: `import Default from "double-quotes"`.
+
+```js
+import { fenced } from 'fenced-module';
+import * as ns from 'namespace-module';
+
+const x = 1;
+```
+
+```typescript
+import type { Type } from 'typed-module';
+export const y = 2;
+```
+
+```
+import { noLang } from 'no-lang-module';
+```
+
+Real import after fenced block should still work (see actual imports at top).

packages/knip/src/compilers/astro-mdx.ts

@@ -1,4 +1,4 @@
-import { fencedCodeBlockMatcher, importMatcher, importsWithinFrontmatter } from './compilers.js';
+import { fencedCodeBlockMatcher, importMatcher, importsWithinFrontmatter, inlineCodeMatcher } from './compilers.js';
 import type { HasDependency } from './types.js';
 
 // https://docs.astro.build/en/guides/integrations-guide/mdx/
@@ -10,7 +10,7 @@ const frontmatterImportFields = ['layout'];
 const condition = (hasDependency: HasDependency) => astroMDXDependencies.some(hasDependency);
 
 const compiler = (text: string) => {
-  const imports = text.replace(fencedCodeBlockMatcher, '').matchAll(importMatcher);
+  const imports = text.replace(fencedCodeBlockMatcher, '').replace(inlineCodeMatcher, '').matchAll(importMatcher);
 
   const frontmatterImports = importsWithinFrontmatter(text, frontmatterImportFields);
 

packages/knip/src/compilers/compilers.ts

@@ -1,6 +1,7 @@
 import type { SyncCompilerFn } from './types.js';
 
 export const fencedCodeBlockMatcher = /```[\s\S]*?```/g;
+export const inlineCodeMatcher = /`[^`]+`/g;
 
 // Extract imports from body of <script> nodes
 const scriptExtractor = /<script\b[^>]*>([\s\S]*?)<\/script>/gm;

packages/knip/src/compilers/mdx.ts

@@ -1,4 +1,4 @@
-import { fencedCodeBlockMatcher, importMatcher } from './compilers.js';
+import { fencedCodeBlockMatcher, importMatcher, inlineCodeMatcher } from './compilers.js';
 import type { HasDependency } from './types.js';
 
 // https://mdxjs.com/packages/
@@ -16,6 +16,7 @@ const mdxDependencies = [
 
 const condition = (hasDependency: HasDependency) => mdxDependencies.some(hasDependency);
 
-const compiler = (text: string) => [...text.replace(fencedCodeBlockMatcher, '').matchAll(importMatcher)].join('\n');
+const compiler = (text: string) =>
+  [...text.replace(fencedCodeBlockMatcher, '').replace(inlineCodeMatcher, '').matchAll(importMatcher)].join('\n');
 
 export default { condition, compiler };