Fix tsx as input language flag

rehypejs · Aug 2, 2024 · 191b934 · 191b934
1 parent 11693ee
commit 191b934
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -44,6 +44,7 @@ const defaultGrammars = [sourceJson, sourceJs, sourceTsx, sourceTs]
 const extensionToScopeMap = new Map([
   ['json', 'source.json'],
   ['js', 'source.js'],
+  ['tsx', 'source.tsx'],
   ['ts', 'source.ts']
 ])
 
@@ -186,7 +187,10 @@ export default function rehypeTwoslash(options) {
       let annotations = []
 
       try {
-        const result = twoslash(value, scope === 'source.js' ? 'js' : 'ts')
+        const result = twoslash(
+          value,
+          scope === 'source.js' ? 'js' : scope === 'source.tsx' ? 'tsx' : 'ts'
+        )
         value = result.code
         annotations = result.nodes
         scope = extensionToScopeMap.get(result.meta.extension)

diff --git a/test/fixtures/basic/input.html b/test/fixtures/basic/input.html
@@ -32,9 +32,9 @@
 </code></pre>
 <pre><code class="language-jsx">let fragment = &lt;jsx />
 </code></pre>
-<pre><code class="language-ts">// @errors: 2304 1005 1161
+<pre><code class="language-ts">// @errors: 1005 1161 2304
 let fragment = &lt;jsx />
 </code></pre>
-<pre><code class="language-tsx">// @errors: 2304 1005 1161
+<pre><code class="language-tsx">// @errors: 1005 1161 2304 7026
 let fragment = &lt;jsx />
 </code></pre>
diff --git a/test/fixtures/basic/output.html b/test/fixtures/basic/output.html
@@ -78,18 +78,20 @@
 <div class="rehype-twoslash-hover rehype-twoslash-popover" id="rehype-twoslash-lfjlfj-1-1" popover=""><pre class="rehype-twoslash-popover-code"><code class="language-ts"><span class="pl-smi">any</span></code></pre></div>
 </div>
 <div class="highlight highlight-ts">
-<pre><code class="language-ts"><span class="pl-k">let</span> <span class="rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e2111lfj-0"><span class="pl-smi">fragment</span></span> <span class="pl-k">=</span> &#x3C;<span class="rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e2111lfj-2"><span class="rehype-twoslash-error-target rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e2111lfj-1"><span class="pl-en">jsx</span></span></span> <span class="rehype-twoslash-error-target rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e2111lfj-3">/</span>>
+<pre><code class="language-ts"><span class="pl-k">let</span> <span class="rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e1122lfj-0"><span class="pl-smi">fragment</span></span> <span class="pl-k">=</span> &#x3C;<span class="rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e1122lfj-2"><span class="rehype-twoslash-error-target rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e1122lfj-1"><span class="pl-en">jsx</span></span></span> <span class="rehype-twoslash-error-target rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e1122lfj-3">/</span>>
 </code></pre>
-<div class="rehype-twoslash-hover rehype-twoslash-popover" id="rehype-twoslash-e2111lfj-0" popover=""><pre class="rehype-twoslash-popover-code"><code class="language-ts"><span class="pl-k">let</span> <span class="pl-smi">fragment</span><span class="pl-k">:</span> <span class="pl-en">jsx</span></code></pre></div>
-<div class="rehype-twoslash-error rehype-twoslash-popover" id="rehype-twoslash-e2111lfj-1" popover=""><pre class="rehype-twoslash-popover-code"><code>Cannot find name 'jsx'. (2304)</code></pre></div>
-<div class="rehype-twoslash-hover rehype-twoslash-popover" id="rehype-twoslash-e2111lfj-2" popover=""><pre class="rehype-twoslash-popover-code"><code class="language-ts"><span class="pl-k">type</span> <span class="pl-en">jsx</span> <span class="pl-k">=</span> <span class="pl-c">/*unresolved*/</span> <span class="pl-c1">any</span></code></pre></div>
-<div class="rehype-twoslash-error rehype-twoslash-popover" id="rehype-twoslash-e2111lfj-3" popover=""><pre class="rehype-twoslash-popover-code"><code>'>' expected. (1005)</code></pre></div>
+<div class="rehype-twoslash-hover rehype-twoslash-popover" id="rehype-twoslash-e1122lfj-0" popover=""><pre class="rehype-twoslash-popover-code"><code class="language-ts"><span class="pl-k">let</span> <span class="pl-smi">fragment</span><span class="pl-k">:</span> <span class="pl-en">jsx</span></code></pre></div>
+<div class="rehype-twoslash-error rehype-twoslash-popover" id="rehype-twoslash-e1122lfj-1" popover=""><pre class="rehype-twoslash-popover-code"><code>Cannot find name 'jsx'. (2304)</code></pre></div>
+<div class="rehype-twoslash-hover rehype-twoslash-popover" id="rehype-twoslash-e1122lfj-2" popover=""><pre class="rehype-twoslash-popover-code"><code class="language-ts"><span class="pl-k">type</span> <span class="pl-en">jsx</span> <span class="pl-k">=</span> <span class="pl-c">/*unresolved*/</span> <span class="pl-c1">any</span></code></pre></div>
+<div class="rehype-twoslash-error rehype-twoslash-popover" id="rehype-twoslash-e1122lfj-3" popover=""><pre class="rehype-twoslash-popover-code"><code>'>' expected. (1005)</code></pre></div>
 </div>
-<div class="highlight highlight-ts">
-<pre><code class="language-ts"><span class="pl-k">let</span> <span class="rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e2111lfj-1-0"><span class="pl-smi">fragment</span></span> <span class="pl-k">=</span> &#x3C;<span class="rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e2111lfj-1-2"><span class="rehype-twoslash-error-target rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e2111lfj-1-1"><span class="pl-en">jsx</span></span></span> <span class="rehype-twoslash-error-target rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e2111lfj-1-3">/</span>>
-</code></pre>
-<div class="rehype-twoslash-hover rehype-twoslash-popover" id="rehype-twoslash-e2111lfj-1-0" popover=""><pre class="rehype-twoslash-popover-code"><code class="language-ts"><span class="pl-k">let</span> <span class="pl-smi">fragment</span><span class="pl-k">:</span> <span class="pl-en">jsx</span></code></pre></div>
-<div class="rehype-twoslash-error rehype-twoslash-popover" id="rehype-twoslash-e2111lfj-1-1" popover=""><pre class="rehype-twoslash-popover-code"><code>Cannot find name 'jsx'. (2304)</code></pre></div>
-<div class="rehype-twoslash-hover rehype-twoslash-popover" id="rehype-twoslash-e2111lfj-1-2" popover=""><pre class="rehype-twoslash-popover-code"><code class="language-ts"><span class="pl-k">type</span> <span class="pl-en">jsx</span> <span class="pl-k">=</span> <span class="pl-c">/*unresolved*/</span> <span class="pl-c1">any</span></code></pre></div>
-<div class="rehype-twoslash-error rehype-twoslash-popover" id="rehype-twoslash-e2111lfj-1-3" popover=""><pre class="rehype-twoslash-popover-code"><code>'>' expected. (1005)</code></pre></div>
+<div class="highlight highlight-tsx">
+<pre><code class="language-tsx"><span class="pl-k">let</span> <span class="rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e1127lfj-0"><span class="pl-smi">fragment</span></span> <span class="pl-k">=</span> <span class="rehype-twoslash-error-target rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e1127lfj-3">&#x3C;</span><span class="rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e1127lfj-5"><span class="rehype-twoslash-error-target rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e1127lfj-4"><span class="rehype-twoslash-error-target rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e1127lfj-2"><span class="pl-ent">jsx</span></span></span></span><span class="rehype-twoslash-error-target rehype-twoslash-popover-target" data-popover-target="rehype-twoslash-e1127lfj-1"> /></span>
+</code></pre>
+<div class="rehype-twoslash-hover rehype-twoslash-popover" id="rehype-twoslash-e1127lfj-0" popover=""><pre class="rehype-twoslash-popover-code"><code class="language-ts"><span class="pl-k">let</span> <span class="pl-smi">fragment</span><span class="pl-k">:</span> <span class="pl-c1">any</span></code></pre></div>
+<div class="rehype-twoslash-error rehype-twoslash-popover" id="rehype-twoslash-e1127lfj-1" popover=""><pre class="rehype-twoslash-popover-code"><code>JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. (7026)</code></pre></div>
+<div class="rehype-twoslash-error rehype-twoslash-popover" id="rehype-twoslash-e1127lfj-2" popover=""><pre class="rehype-twoslash-popover-code"><code>JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. (7026)</code></pre></div>
+<div class="rehype-twoslash-error rehype-twoslash-popover" id="rehype-twoslash-e1127lfj-3" popover=""><pre class="rehype-twoslash-popover-code"><code>JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. (7026)</code></pre></div>
+<div class="rehype-twoslash-error rehype-twoslash-popover" id="rehype-twoslash-e1127lfj-4" popover=""><pre class="rehype-twoslash-popover-code"><code>Cannot find name 'React'. (2304)</code></pre></div>
+<div class="rehype-twoslash-hover rehype-twoslash-popover" id="rehype-twoslash-e1127lfj-5" popover=""><pre class="rehype-twoslash-popover-code"><code class="language-ts"><span class="pl-smi">any</span></code></pre></div>
 </div>