Skip to content

Commit

Permalink
Patch @mdx-js/mdx to stop generating invalid JSX when
Browse files Browse the repository at this point in the history
used with remark-shiki-twoslash.

@calebeby, who provided the workaround, is the king.

- mdx-js/mdx#2123
- mdx-js/mdx#2112
  • Loading branch information
hasparus committed Oct 5, 2022
1 parent 791b08a commit 1e57b94
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 4 deletions.
7 changes: 7 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"@astrojs/tailwind": "^2.0.2",
"@fontsource/brygada-1918": "^4.5.11",
"@fontsource/inter": "^4.5.13",
"@mdx-js/mdx": "^2.1.3",
"astro": "^1.4.2",
"astro-eslint-parser": "^0.6.2",
"remark-shiki-twoslash": "^3.1.0",
Expand All @@ -43,6 +44,12 @@
"rollup",
"postcss"
]
},
"overrides": {
"@mdx-js/mdx": "2.1.3"
},
"patchedDependencies": {
"@mdx-js/mdx@2.1.3": "patches/@mdx-js__mdx@2.1.3.patch"
}
}
}
23 changes: 23 additions & 0 deletions patches/@mdx-js__mdx@2.1.3.patch
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
diff --git a/lib/plugin/recma-jsx-rewrite.js b/lib/plugin/recma-jsx-rewrite.js
index 1e82a1e41b18b16cb5d2f2a66b07e2d9544c55db..eb5286a273f095bedb693ec587917d6162164108 100644
--- a/lib/plugin/recma-jsx-rewrite.js
+++ b/lib/plugin/recma-jsx-rewrite.js
@@ -387,11 +387,13 @@ export function recmaJsxRewrite(options = {}) {
})
}

- statements.push({
- type: 'VariableDeclaration',
- kind: 'const',
- declarations
- })
+ if (declarations.length > 0) {
+ statements.push({
+ type: 'VariableDeclaration',
+ kind: 'const',
+ declarations
+ })
+ }
}

/** @type {string} */
17 changes: 14 additions & 3 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 12 additions & 1 deletion posts/features/shiki-twoslash.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
We're using [Shiki Twoslash](https://shikijs.github.io/twoslash/) to highlight
TypeScript and JavaScript code.
`

```ts twoslash
// @module: esnext
// @filename: maths.ts
export function absolute(num: number) {
if (num < 0) return num * -1;
return num;
}
// @filename: index.ts
import { absolute } from "./maths";
const value = absolute(-1);
```

0 comments on commit 1e57b94

Please sign in to comment.