Skip to content

Commit ead267e

Browse files
kellyjosephpricekellyjosephprice
authored
feat: compat parser (#1004)
[![PR App][icn]][demo] | :-------------------:| ## 🧰 Changes Moves the migration bits back to here. This PR attempts to pull in the changes from the main readme app that are specific to the on going migration to MDX. We had originally started moving migration specific changes to the main app for speed of development, and organization. But now, we need to be able to move the migration bits into the gitto backend. I tried to preserve the git histories of the specific files, so there's a little more context. ## 🧬 QA & Testing - [Broken on production][prod]. - [Working in this PR app][demo]. [demo]: https://markdown-pr-PR_NUMBER.herokuapp.com [prod]: https://SUBDOMAIN.readme.io [icn]: https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg
1 parent 7be267e commit ead267e

19 files changed

+970
-194
lines changed

‎__tests__/compilers/compatability.test.tsx‎

Lines changed: 29 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React from 'react';
22
import fs from 'node:fs';
33
import { vi } from 'vitest';
4-
import { render, screen, prettyDOM, configure } from '@testing-library/react';
4+
import { render, screen } from '@testing-library/react';
55

6-
import { mdx, compile, run } from '../../index';
7-
import * as rdmd from '@readme/markdown-legacy';
6+
import { mdastV6, mdx, compile, run } from '../../index';
87

98
describe('compatability with RDMD', () => {
109
it('compiles glossary nodes', () => {
@@ -126,7 +125,7 @@ describe('compatability with RDMD', () => {
126125
This is some in progress <!-- commented out stuff -->
127126
`;
128127

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 */}');
130129
});
131130

132131
it('compiles multi-line html comments to JSX comments', () => {
@@ -140,7 +139,7 @@ This is some in progress <!-- commented out stuff -->
140139
-->
141140
`;
142141

143-
expect(mdx(rdmd.mdast(md)).trim()).toMatchInlineSnapshot(`
142+
expect(mdx(mdastV6(md)).trim()).toMatchInlineSnapshot(`
144143
"## Wip
145144
146145
{/*
@@ -156,52 +155,52 @@ This is some in progress <!-- commented out stuff -->
156155
This is a break: <br>
157156
`;
158157

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 />');
160159
});
161160

162161
it.skip('closes un-closed self closing tags with a space', () => {
163162
const md = `
164163
This is a break: <br >
165164
`;
166165

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 />');
168167
});
169168

170169
it.skip('closes complex un-closed self closing tags', () => {
171170
const md = `
172171
This is an image: <img src="http://example.com/#\\>" >
173172
`;
174173

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/#\\>" />');
176175
});
177176

178177
it('compiles escapes', () => {
179178
const md = `
180179
\\- not a list item
181180
`;
182181

183-
expect(mdx(rdmd.mdast(md)).trim()).toBe('\\- not a list item');
182+
expect(mdx(mdastV6(md)).trim()).toBe('\\- not a list item');
184183
});
185184

186185
it('compiles escapes of backslashes', () => {
187186
const md = `
188187
\\\\**still emphatic**
189188
`;
190189

191-
expect(mdx(rdmd.mdast(md)).trim()).toBe('\\\\**still emphatic**');
190+
expect(mdx(mdastV6(md)).trim()).toBe('\\\\**still emphatic**');
192191
});
193192

194193
it('compiles magic block images into blocks', () => {
195194
const imageMd = fs.readFileSync('__tests__/fixtures/image-block-no-attrs.md', { encoding: 'utf8' });
196195
const imageMdx = fs.readFileSync('__tests__/fixtures/image-block-no-attrs.mdx', { encoding: 'utf8' });
197196

198-
expect(mdx(rdmd.mdast(imageMd))).toBe(imageMdx);
197+
expect(mdx(mdastV6(imageMd))).toBe(imageMdx);
199198
});
200199

201200
it('compiles user variables', () => {
202201
const md = `Contact me at <<email>>`;
203202

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`);
205204
});
206205

207206
describe('<HTMLBlock> wrapping', () => {
@@ -225,7 +224,7 @@ This is an image: <img src="http://example.com/#\\>" >
225224
`;
226225

227226
it('should wrap raw <style> tags in an <HTMLBlock>', async () => {
228-
const legacyAST = rdmd.mdast(rawStyle);
227+
const legacyAST = mdastV6(rawStyle);
229228
const converted = mdx(legacyAST);
230229
const compiled = compile(converted);
231230
const Component = (await run(compiled)).default;
@@ -238,7 +237,7 @@ This is an image: <img src="http://example.com/#\\>" >
238237
});
239238

240239
it('should wrap raw <script> tags in an <HTMLBlock>', async () => {
241-
const legacyAST = rdmd.mdast(rawScript);
240+
const legacyAST = mdastV6(rawScript);
242241
const converted = mdx(legacyAST);
243242
const compiled = compile(converted);
244243
const Component = (await run(compiled)).default;
@@ -255,7 +254,7 @@ This is an image: <img src="http://example.com/#\\>" >
255254
* @note compatability mode has been deprecated for RMDX
256255
*/
257256
const spy = vi.spyOn(console, 'log');
258-
const legacyAST = rdmd.mdast(magicScript);
257+
const legacyAST = mdastV6(magicScript);
259258
const converted = mdx(legacyAST);
260259
const compiled = compile(converted);
261260
const Component = await run(compiled);
@@ -287,7 +286,7 @@ This is an image: <img src="http://example.com/#\\>" >
287286
[/block]
288287
`;
289288

290-
const rmdx = mdx(rdmd.mdast(md));
289+
const rmdx = mdx(mdastV6(md));
291290

292291
expect(rmdx).toMatch('<Image align="center" width="250px" src="https://files.readme.io/4a1c7a0-Iphone.jpeg" />');
293292
});
@@ -311,7 +310,7 @@ This is an image: <img src="http://example.com/#\\>" >
311310
}
312311
[/block]`;
313312

314-
const rmdx = mdx(rdmd.mdast(md));
313+
const rmdx = mdx(mdastV6(md));
315314
expect(rmdx).toMatchInlineSnapshot(
316315
`
317316
"<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/#\\>" >
325324
it('trims whitespace surrounding phrasing content (emphasis, strong, etc)', () => {
326325
const md = `** bold ** and _ italic _ and *** bold italic ***`;
327326

328-
const rmdx = mdx(rdmd.mdast(md));
327+
const rmdx = mdx(mdastV6(md));
329328
expect(rmdx).toMatchInlineSnapshot(`
330329
"**bold** and *italic* and ***bold italic***
331330
"
@@ -352,7 +351,7 @@ This is an image: <img src="http://example.com/#\\>" >
352351
## Tile View
353352
`;
354353

355-
const tree = rdmd.mdast(md);
354+
const tree = mdastV6(md);
356355
const rmdx = mdx(tree);
357356
expect(rmdx).toMatchInlineSnapshot(`
358357
"![806](https://files.readme.io/9ac3bf4-SAP_Folders_Note.png "SAP Folders Note.png")
@@ -383,7 +382,7 @@ ${JSON.stringify(
383382
[/block]
384383
`;
385384

386-
const rmdx = mdx(rdmd.mdast(md));
385+
const rmdx = mdx(mdastV6(md));
387386
expect(rmdx).toMatchInlineSnapshot(`
388387
"<Table align={["left","left"]}>
389388
<thead>
@@ -405,16 +404,8 @@ ${JSON.stringify(
405404
</td>
406405
407406
<td style={{ textAlign: "left" }}>
408-
Pseudo-list:
409-
410-
411-
412-
413-
● One
414-
415-
416-
417-
407+
Pseudo-list:\\
408+
● One\\
418409
● Two
419410
</td>
420411
</tr>
@@ -431,7 +422,7 @@ ${JSON.stringify(
431422
> 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?
432423
`;
433424

434-
const rmdx = mdx(rdmd.mdast(md));
425+
const rmdx = mdx(mdastV6(md));
435426
expect(rmdx).toMatchInlineSnapshot(`
436427
"> 🥈
437428
>
@@ -461,7 +452,7 @@ ${JSON.stringify(
461452
[/block]
462453
`;
463454

464-
const rmdx = mdx(rdmd.mdast(md));
455+
const rmdx = mdx(mdastV6(md));
465456
expect(rmdx).toMatchInlineSnapshot(`
466457
"<Table align={["left","left"]}>
467458
<thead>
@@ -483,10 +474,12 @@ ${JSON.stringify(
483474
</td>
484475
485476
<td style={{ textAlign: "left" }}>
486-
\`{
477+
\`\`\`
478+
{
487479
"field": "ID",
488480
"type": "ASC"
489-
}\`
481+
}
482+
\`\`\`
490483
</td>
491484
</tr>
492485
</tbody>
@@ -498,7 +491,7 @@ ${JSON.stringify(
498491
it('compiles inline html', () => {
499492
const md = `Inline html: <small>_string_</small>`;
500493

501-
const rmdx = mdx(rdmd.mdast(md));
494+
const rmdx = mdx(mdastV6(md));
502495
expect(rmdx).toMatchInlineSnapshot(`
503496
"Inline html: <small>*string*</small>
504497
"
@@ -508,7 +501,7 @@ ${JSON.stringify(
508501
it('compiles tag-like syntax', () => {
509502
const md = `Inline: <what even is this>`;
510503

511-
const rmdx = mdx(rdmd.mdast(md));
504+
const rmdx = mdx(mdastV6(md));
512505
expect(rmdx).toMatchInlineSnapshot(`
513506
"Inline: <what even is this>
514507
"

‎__tests__/migration/emphasis.test.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as rmdx from '../../index';
2+
3+
describe('migrating emphasis', () => {
4+
it('trims whitespace surrounding phrasing content (emphasis, strong, etc)', () => {
5+
const md = '** bold ** and _ italic _ and *** bold italic ***';
6+
7+
const mdx = rmdx.mdx(rmdx.mdastV6(md));
8+
expect(mdx).toMatchInlineSnapshot(`
9+
"**bold** and *italic* and ***bold italic***
10+
"
11+
`);
12+
});
13+
14+
it('moves whitespace surrounding phrasing content (emphasis, strong, etc) to the appropriate place', () => {
15+
const md = '**bold **and also_ italic_ and*** bold italic***aaaaaah';
16+
17+
const mdx = rmdx.mdx(rmdx.mdastV6(md));
18+
expect(mdx).toMatchInlineSnapshot(`
19+
"**bold** and also *italic* and ***bold italic***aaaaaah
20+
"
21+
`);
22+
});
23+
24+
it('migrates a complex case', () => {
25+
const md =
26+
'*the recommended initial action is to**initiate a [reversal operation (rollback)](https://docs.jupico.com/reference/ccrollback) test**. *';
27+
28+
const mdx = rmdx.mdx(rmdx.mdastV6(md));
29+
expect(mdx).toMatchInlineSnapshot(`
30+
"*the recommended initial action is to**initiate a [reversal operation (rollback)](https://docs.jupico.com/reference/ccrollback) test**.*
31+
"
32+
`);
33+
});
34+
});

‎__tests__/migration/html-comments.test.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import * as rmdx from '../../index';
2+
3+
describe('migrating html comments', () => {
4+
it('migrates escaped html comments', () => {
5+
const md = `
6+
<!--
7+
8+
9+
10+
## Walkthrough
11+
12+
[block:html]
13+
{
14+
"html": "<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/53dd194717bb4965a8e838b95715ff18" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>"
15+
}
16+
[/block]
17+
18+
19+
<br />
20+
21+
\\-->
22+
`;
23+
24+
const ast = rmdx.mdastV6(md);
25+
const mdx = rmdx.mdx(ast);
26+
expect(mdx).toMatchInlineSnapshot(`
27+
"{/*
28+
29+
30+
31+
## Walkthrough
32+
33+
34+
[block:html]
35+
{
36+
"html": "<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/53dd194717bb4965a8e838b95715ff18" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>"
37+
}
38+
[/block]
39+
40+
41+
42+
<br />
43+
44+
*/}
45+
"
46+
`);
47+
});
48+
});

‎__tests__/migration/image.test.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as rmdx from '../../index';
2+
3+
describe('migrating images', () => {
4+
it('compiles images', () => {
5+
const md = `
6+
[block:image]
7+
{
8+
"images": [
9+
{
10+
"image": [
11+
"https://fastly.picsum.photos/id/507/200/300.jpg?hmac=v0NKvUrOWTKZuZFmMlLN_7-RdRgeF-qFLeBGXpufxgg",
12+
"",
13+
""
14+
],
15+
"align": "center",
16+
"border": true
17+
}
18+
]
19+
}
20+
[/block]
21+
`;
22+
23+
const ast = rmdx.mdastV6(md);
24+
const mdx = rmdx.mdx(ast);
25+
expect(mdx).toMatchInlineSnapshot(`
26+
"<Image align="center" className="border" border={true} src="https://fastly.picsum.photos/id/507/200/300.jpg?hmac=v0NKvUrOWTKZuZFmMlLN_7-RdRgeF-qFLeBGXpufxgg" />
27+
"
28+
`);
29+
});
30+
});

‎__tests__/migration/link-reference.test.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as rmdx from '../../index';
2+
3+
describe('mdx migration of link references', () => {
4+
it('compiles link references correctly', () => {
5+
const md = '[wat_wat]';
6+
7+
const ast = rmdx.mdastV6(md);
8+
const mdx = rmdx.mdx(ast);
9+
expect(mdx).toMatchInlineSnapshot(`
10+
"\\[wat\\_wat]
11+
"
12+
`);
13+
});
14+
15+
it('compiles link references with defintions correctly', () => {
16+
const md = `
17+
[wat_wat]
18+
19+
[wat_wat]: https://wat.com
20+
`;
21+
22+
const ast = rmdx.mdastV6(md);
23+
const mdx = rmdx.mdx(ast);
24+
expect(mdx).toMatchInlineSnapshot(`
25+
"[wat\\_wat][wat_wat]
26+
27+
[wat_wat]: https://wat.com
28+
"
29+
`);
30+
});
31+
});

0 commit comments

Comments
 (0)