1
1
import React from 'react' ;
2
2
import fs from 'node:fs' ;
3
3
import { vi } from 'vitest' ;
4
- import { render , screen , prettyDOM , configure } from '@testing-library/react' ;
4
+ import { render , screen } from '@testing-library/react' ;
5
5
6
- import { mdx , compile , run } from '../../index' ;
7
- import * as rdmd from '@readme/markdown-legacy' ;
6
+ import { mdastV6 , mdx , compile , run } from '../../index' ;
8
7
9
8
describe ( 'compatability with RDMD' , ( ) => {
10
9
it ( 'compiles glossary nodes' , ( ) => {
@@ -126,7 +125,7 @@ describe('compatability with RDMD', () => {
126
125
This is some in progress <!-- commented out stuff -->
127
126
` ;
128
127
129
- expect ( mdx ( rdmd . mdast ( md ) ) . trim ( ) ) . toBe ( 'This is some in progress {/* commented out stuff */}' ) ;
128
+ expect ( mdx ( mdastV6 ( md ) ) . trim ( ) ) . toBe ( 'This is some in progress {/* commented out stuff */}' ) ;
130
129
} ) ;
131
130
132
131
it ( 'compiles multi-line html comments to JSX comments' , ( ) => {
@@ -140,7 +139,7 @@ This is some in progress <!-- commented out stuff -->
140
139
-->
141
140
` ;
142
141
143
- expect ( mdx ( rdmd . mdast ( md ) ) . trim ( ) ) . toMatchInlineSnapshot ( `
142
+ expect ( mdx ( mdastV6 ( md ) ) . trim ( ) ) . toMatchInlineSnapshot ( `
144
143
"## Wip
145
144
146
145
{/*
@@ -156,52 +155,52 @@ This is some in progress <!-- commented out stuff -->
156
155
This is a break: <br>
157
156
` ;
158
157
159
- expect ( mdx ( rdmd . mdast ( md ) ) . trim ( ) ) . toBe ( 'This is a break: <br />' ) ;
158
+ expect ( mdx ( mdastV6 ( md ) ) . trim ( ) ) . toBe ( 'This is a break: <br />' ) ;
160
159
} ) ;
161
160
162
161
it . skip ( 'closes un-closed self closing tags with a space' , ( ) => {
163
162
const md = `
164
163
This is a break: <br >
165
164
` ;
166
165
167
- expect ( mdx ( rdmd . mdast ( md ) ) . trim ( ) ) . toBe ( 'This is a break: <br />' ) ;
166
+ expect ( mdx ( mdastV6 ( md ) ) . trim ( ) ) . toBe ( 'This is a break: <br />' ) ;
168
167
} ) ;
169
168
170
169
it . skip ( 'closes complex un-closed self closing tags' , ( ) => {
171
170
const md = `
172
171
This is an image: <img src="http://example.com/#\\>" >
173
172
` ;
174
173
175
- expect ( mdx ( rdmd . mdast ( md ) ) . trim ( ) ) . toBe ( 'This is an image: <img src="http://example.com/#\\>" />' ) ;
174
+ expect ( mdx ( mdastV6 ( md ) ) . trim ( ) ) . toBe ( 'This is an image: <img src="http://example.com/#\\>" />' ) ;
176
175
} ) ;
177
176
178
177
it ( 'compiles escapes' , ( ) => {
179
178
const md = `
180
179
\\- not a list item
181
180
` ;
182
181
183
- expect ( mdx ( rdmd . mdast ( md ) ) . trim ( ) ) . toBe ( '\\- not a list item' ) ;
182
+ expect ( mdx ( mdastV6 ( md ) ) . trim ( ) ) . toBe ( '\\- not a list item' ) ;
184
183
} ) ;
185
184
186
185
it ( 'compiles escapes of backslashes' , ( ) => {
187
186
const md = `
188
187
\\\\**still emphatic**
189
188
` ;
190
189
191
- expect ( mdx ( rdmd . mdast ( md ) ) . trim ( ) ) . toBe ( '\\\\**still emphatic**' ) ;
190
+ expect ( mdx ( mdastV6 ( md ) ) . trim ( ) ) . toBe ( '\\\\**still emphatic**' ) ;
192
191
} ) ;
193
192
194
193
it ( 'compiles magic block images into blocks' , ( ) => {
195
194
const imageMd = fs . readFileSync ( '__tests__/fixtures/image-block-no-attrs.md' , { encoding : 'utf8' } ) ;
196
195
const imageMdx = fs . readFileSync ( '__tests__/fixtures/image-block-no-attrs.mdx' , { encoding : 'utf8' } ) ;
197
196
198
- expect ( mdx ( rdmd . mdast ( imageMd ) ) ) . toBe ( imageMdx ) ;
197
+ expect ( mdx ( mdastV6 ( imageMd ) ) ) . toBe ( imageMdx ) ;
199
198
} ) ;
200
199
201
200
it ( 'compiles user variables' , ( ) => {
202
201
const md = `Contact me at <<email>>` ;
203
202
204
- expect ( mdx ( rdmd . mdast ( md ) ) ) . toBe ( `Contact me at {user.email}\n` ) ;
203
+ expect ( mdx ( mdastV6 ( md ) ) ) . toBe ( `Contact me at {user.email}\n` ) ;
205
204
} ) ;
206
205
207
206
describe ( '<HTMLBlock> wrapping' , ( ) => {
@@ -225,7 +224,7 @@ This is an image: <img src="http://example.com/#\\>" >
225
224
` ;
226
225
227
226
it ( 'should wrap raw <style> tags in an <HTMLBlock>' , async ( ) => {
228
- const legacyAST = rdmd . mdast ( rawStyle ) ;
227
+ const legacyAST = mdastV6 ( rawStyle ) ;
229
228
const converted = mdx ( legacyAST ) ;
230
229
const compiled = compile ( converted ) ;
231
230
const Component = ( await run ( compiled ) ) . default ;
@@ -238,7 +237,7 @@ This is an image: <img src="http://example.com/#\\>" >
238
237
} ) ;
239
238
240
239
it ( 'should wrap raw <script> tags in an <HTMLBlock>' , async ( ) => {
241
- const legacyAST = rdmd . mdast ( rawScript ) ;
240
+ const legacyAST = mdastV6 ( rawScript ) ;
242
241
const converted = mdx ( legacyAST ) ;
243
242
const compiled = compile ( converted ) ;
244
243
const Component = ( await run ( compiled ) ) . default ;
@@ -255,7 +254,7 @@ This is an image: <img src="http://example.com/#\\>" >
255
254
* @note compatability mode has been deprecated for RMDX
256
255
*/
257
256
const spy = vi . spyOn ( console , 'log' ) ;
258
- const legacyAST = rdmd . mdast ( magicScript ) ;
257
+ const legacyAST = mdastV6 ( magicScript ) ;
259
258
const converted = mdx ( legacyAST ) ;
260
259
const compiled = compile ( converted ) ;
261
260
const Component = await run ( compiled ) ;
@@ -287,7 +286,7 @@ This is an image: <img src="http://example.com/#\\>" >
287
286
[/block]
288
287
` ;
289
288
290
- const rmdx = mdx ( rdmd . mdast ( md ) ) ;
289
+ const rmdx = mdx ( mdastV6 ( md ) ) ;
291
290
292
291
expect ( rmdx ) . toMatch ( '<Image align="center" width="250px" src="https://files.readme.io/4a1c7a0-Iphone.jpeg" />' ) ;
293
292
} ) ;
@@ -311,7 +310,7 @@ This is an image: <img src="http://example.com/#\\>" >
311
310
}
312
311
[/block]` ;
313
312
314
- const rmdx = mdx ( rdmd . mdast ( md ) ) ;
313
+ const rmdx = mdx ( mdastV6 ( md ) ) ;
315
314
expect ( rmdx ) . toMatchInlineSnapshot (
316
315
`
317
316
"<Image alt="Data Plane Setup" align="center" border={true} src="https://files.readme.io/fd21f977cfbb9f55b3a13ab0b827525e94ee1576f21bbe82945cdc22cc966d82-Screenshot_2024-09-12_at_3.47.05_PM.png">
@@ -325,7 +324,7 @@ This is an image: <img src="http://example.com/#\\>" >
325
324
it ( 'trims whitespace surrounding phrasing content (emphasis, strong, etc)' , ( ) => {
326
325
const md = `** bold ** and _ italic _ and *** bold italic ***` ;
327
326
328
- const rmdx = mdx ( rdmd . mdast ( md ) ) ;
327
+ const rmdx = mdx ( mdastV6 ( md ) ) ;
329
328
expect ( rmdx ) . toMatchInlineSnapshot ( `
330
329
"**bold** and *italic* and ***bold italic***
331
330
"
@@ -352,7 +351,7 @@ This is an image: <img src="http://example.com/#\\>" >
352
351
## Tile View
353
352
` ;
354
353
355
- const tree = rdmd . mdast ( md ) ;
354
+ const tree = mdastV6 ( md ) ;
356
355
const rmdx = mdx ( tree ) ;
357
356
expect ( rmdx ) . toMatchInlineSnapshot ( `
358
357
"
@@ -383,7 +382,7 @@ ${JSON.stringify(
383
382
[/block]
384
383
` ;
385
384
386
- const rmdx = mdx ( rdmd . mdast ( md ) ) ;
385
+ const rmdx = mdx ( mdastV6 ( md ) ) ;
387
386
expect ( rmdx ) . toMatchInlineSnapshot ( `
388
387
"<Table align={["left","left"]}>
389
388
<thead>
@@ -405,16 +404,8 @@ ${JSON.stringify(
405
404
</td>
406
405
407
406
<td style={{ textAlign: "left" }}>
408
- Pseudo-list:
409
-
410
-
411
-
412
-
413
- ● One
414
-
415
-
416
-
417
-
407
+ Pseudo-list:\\
408
+ ● One\\
418
409
● Two
419
410
</td>
420
411
</tr>
@@ -431,7 +422,7 @@ ${JSON.stringify(
431
422
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Error eos animi obcaecati quod repudiandae aliquid nemo veritatis ex, quos delectus minus sit omnis vel dolores libero, recusandae ea dignissimos iure?
432
423
` ;
433
424
434
- const rmdx = mdx ( rdmd . mdast ( md ) ) ;
425
+ const rmdx = mdx ( mdastV6 ( md ) ) ;
435
426
expect ( rmdx ) . toMatchInlineSnapshot ( `
436
427
"> 🥈
437
428
>
@@ -461,7 +452,7 @@ ${JSON.stringify(
461
452
[/block]
462
453
` ;
463
454
464
- const rmdx = mdx ( rdmd . mdast ( md ) ) ;
455
+ const rmdx = mdx ( mdastV6 ( md ) ) ;
465
456
expect ( rmdx ) . toMatchInlineSnapshot ( `
466
457
"<Table align={["left","left"]}>
467
458
<thead>
@@ -483,10 +474,12 @@ ${JSON.stringify(
483
474
</td>
484
475
485
476
<td style={{ textAlign: "left" }}>
486
- \`{
477
+ \`\`\`
478
+ {
487
479
"field": "ID",
488
480
"type": "ASC"
489
- }\`
481
+ }
482
+ \`\`\`
490
483
</td>
491
484
</tr>
492
485
</tbody>
@@ -498,7 +491,7 @@ ${JSON.stringify(
498
491
it ( 'compiles inline html' , ( ) => {
499
492
const md = `Inline html: <small>_string_</small>` ;
500
493
501
- const rmdx = mdx ( rdmd . mdast ( md ) ) ;
494
+ const rmdx = mdx ( mdastV6 ( md ) ) ;
502
495
expect ( rmdx ) . toMatchInlineSnapshot ( `
503
496
"Inline html: <small>*string*</small>
504
497
"
@@ -508,7 +501,7 @@ ${JSON.stringify(
508
501
it ( 'compiles tag-like syntax' , ( ) => {
509
502
const md = `Inline: <what even is this>` ;
510
503
511
- const rmdx = mdx ( rdmd . mdast ( md ) ) ;
504
+ const rmdx = mdx ( mdastV6 ( md ) ) ;
512
505
expect ( rmdx ) . toMatchInlineSnapshot ( `
513
506
"Inline: <what even is this>
514
507
"
0 commit comments