Skip to content

Commit 5d08233

Browse files
wooormwooorm
authored
Refactor and test remark-mdxjs
* Remove unused locator (locators are for inline constructs) * Remove JSX tests to focus solely on import/export * 100% coverage Closes GH-1350. Reviewed-by: Christian Murphy <[email protected]>
1 parent 9f5a91d commit 5d08233

File tree

10 files changed

+309
-443
lines changed

10 files changed

+309
-443
lines changed

‎packages/remark-mdxjs/extract-imports-and-exports.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
const {transformSync} = require('@babel/core')
22
const declare = require('@babel/helper-plugin-utils').declare
3-
43
const syntaxJsxPlugin = require('@babel/plugin-syntax-jsx')
54
const proposalObjectRestSpreadPlugin = require('@babel/plugin-proposal-object-rest-spread')
65

@@ -32,6 +31,7 @@ class BabelPluginExtractImportsAndExports {
3231
// Imports that are used in exports can end up as
3332
// ImportDeclarations with no start/end metadata,
3433
// these can be ignored
34+
/* istanbul ignore if - To do: find a test to reproduce this. */
3535
if (start === undefined) {
3636
return
3737
}

‎packages/remark-mdxjs/index.js‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
11
const extractImportsAndExports = require('./extract-imports-and-exports')
22

33
module.exports = mdxjs
4-
54
mdxjs.default = mdxjs
65

7-
tokenizeEsSyntax.locator = tokenizeEsSyntaxLocator
8-
9-
function isImportOrExport(value) {
10-
return /^(export|import)\s/.test(value)
11-
}
6+
tokenizeEsSyntax.notInBlock = true
127

138
function mdxjs() {
149
const parser = this.Parser
1510
const compiler = this.Compiler
1611

12+
// If `remark-parse` seems to be attached.
1713
if (parser && parser.prototype && parser.prototype.blockTokenizers) {
1814
attachParser(parser)
1915
}
2016

17+
// If `remark-stringify` seems to be attached.
2118
if (compiler && compiler.prototype && compiler.prototype.visitors) {
2219
attachCompiler(compiler)
2320
}
@@ -29,8 +26,6 @@ function attachParser(parser) {
2926

3027
blocks.esSyntax = tokenizeEsSyntax
3128

32-
tokenizeEsSyntax.notInBlock = true
33-
3429
methods.splice(methods.indexOf('paragraph'), 0, 'esSyntax')
3530
}
3631

@@ -51,12 +46,8 @@ function tokenizeEsSyntax(eat, value) {
5146
const index = value.indexOf('\n\n')
5247
const subvalue = index !== -1 ? value.slice(0, index) : value
5348

54-
if (isImportOrExport(subvalue)) {
49+
if (/^(export|import)\s/.test(value)) {
5550
const nodes = extractImportsAndExports(subvalue, this.file)
5651
nodes.map(node => eat(node.value)(node))
5752
}
5853
}
59-
60-
function tokenizeEsSyntaxLocator(value, _fromIndex) {
61-
return isImportOrExport(value) ? -1 : 1
62-
}

‎packages/remark-mdxjs/test/__snapshots__/import-export.test.js.snap‎

Lines changed: 0 additions & 85 deletions
This file was deleted.

‎packages/remark-mdxjs/test/__snapshots__/test.js.snap‎

Lines changed: 125 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,88 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`correctly transpiles 1`] = `
4-
"import Foo from './bar'
3+
exports[`Handles an import that is later exported 1`] = `
4+
Array [
5+
Object {
6+
"type": "import",
7+
"value": "import Layout from './Foo'
58
6-
export { Baz } from './foo';
7-
const makeShortcode = name => function MDXDefaultShortcode(props) {
8-
console.warn(\\"Component \\" + name + \\" was not imported, exported, or provided by MDXProvider as global scope\\")
9-
return <div {...props}/>
10-
};
11-
const Paragraph = makeShortcode(\\"Paragraph\\");
12-
const Button = makeShortcode(\\"Button\\");
13-
const MDXLayout = Foo
14-
export default function MDXContent({
15-
components,
16-
...props
17-
}) {
18-
return <MDXLayout {...props} components={components} mdxType=\\"MDXLayout\\">
19-
<h1>{\`Hello, world! \`}
20-
<Foo bar={{
21-
baz: 'qux'
22-
}} mdxType=\\"Foo\\" /></h1>
23-
<Baz mdxType=\\"Baz\\">
24-
<p>{\`Hi!\`}</p>
25-
</Baz>
26-
<Paragraph bg=\\"red.500\\" color=\\"white\\" mdxType=\\"Paragraph\\">
27-
<p>{\`Foo\`}</p>
28-
</Paragraph>
29-
<Button mdxType=\\"Button\\">
30-
<p>{\`Hi!\`}</p>
31-
</Button>
32-
<>
33-
<p>{\`Foo\`}</p>
34-
</>
35-
<>
36-
<p>{\`Foo\`}</p>
37-
</>
38-
<h1>
39-
<p>{\`Hello, world!\`}</p>
40-
</h1>
41-
</MDXLayout>;
42-
}
9+
",
10+
},
11+
Object {
12+
"default": true,
13+
"type": "export",
14+
"value": "export default Layout",
15+
},
16+
]
17+
`;
4318

44-
;
45-
MDXContent.isMDXComponent = true;"
19+
exports[`Handles basic usecase of default export 1`] = `
20+
Array [
21+
Object {
22+
"default": true,
23+
"type": "export",
24+
"value": "export default props => <article {...props} />",
25+
},
26+
]
27+
`;
28+
29+
exports[`Handles const exports 1`] = `
30+
Array [
31+
Object {
32+
"type": "export",
33+
"value": "export const metadata = { some: \\"stuff\\" }",
34+
},
35+
]
36+
`;
37+
38+
exports[`Handles export all 1`] = `
39+
Array [
40+
Object {
41+
"type": "export",
42+
"value": "export * from './foo'",
43+
},
44+
]
45+
`;
46+
47+
exports[`Handles multiline default exports 1`] = `
48+
Array [
49+
Object {
50+
"default": true,
51+
"type": "export",
52+
"value": "export default props => (
53+
<main {...props} />
54+
)",
55+
},
56+
]
57+
`;
58+
59+
exports[`Handles multiline exports 1`] = `
60+
Array [
61+
Object {
62+
"type": "export",
63+
"value": "export const metadata = {
64+
some: \\"stuff\\"
65+
}",
66+
},
67+
]
68+
`;
69+
70+
exports[`Separates import from the default export 1`] = `
71+
Array [
72+
Object {
73+
"type": "import",
74+
"value": "import Foo from './foo'
75+
",
76+
},
77+
Object {
78+
"default": true,
79+
"type": "export",
80+
"value": "export default props => <article {...props} />",
81+
},
82+
]
4683
`;
4784

48-
exports[`maintains the proper positional info 1`] = `
85+
exports[`should maintain the proper positional info 1`] = `
4986
Object {
5087
"children": Array [
5188
Object {
@@ -585,7 +622,7 @@ Object {
585622
}
586623
`;
587624

588-
exports[`removes newlines between imports and exports 1`] = `
625+
exports[`should remove newlines between imports and exports 1`] = `
589626
"import Foo1 from \\"./foo\\"
590627
import Foo2 from \\"./foo\\"
591628
import Foo3 from \\"./foo\\"
@@ -597,3 +634,48 @@ export default props => <article {...props} />
597634
export const fred = \\"flintstone\\"
598635
"
599636
`;
637+
638+
exports[`should transpile 1`] = `
639+
"import Foo from './bar'
640+
641+
export { Baz } from './foo';
642+
const makeShortcode = name => function MDXDefaultShortcode(props) {
643+
console.warn(\\"Component \\" + name + \\" was not imported, exported, or provided by MDXProvider as global scope\\")
644+
return <div {...props}/>
645+
};
646+
const Paragraph = makeShortcode(\\"Paragraph\\");
647+
const Button = makeShortcode(\\"Button\\");
648+
const MDXLayout = Foo
649+
export default function MDXContent({
650+
components,
651+
...props
652+
}) {
653+
return <MDXLayout {...props} components={components} mdxType=\\"MDXLayout\\">
654+
<h1>{\`Hello, world! \`}
655+
<Foo bar={{
656+
baz: 'qux'
657+
}} mdxType=\\"Foo\\" /></h1>
658+
<Baz mdxType=\\"Baz\\">
659+
<p>{\`Hi!\`}</p>
660+
</Baz>
661+
<Paragraph bg=\\"red.500\\" color=\\"white\\" mdxType=\\"Paragraph\\">
662+
<p>{\`Foo\`}</p>
663+
</Paragraph>
664+
<Button mdxType=\\"Button\\">
665+
<p>{\`Hi!\`}</p>
666+
</Button>
667+
<>
668+
<p>{\`Foo\`}</p>
669+
</>
670+
<>
671+
<p>{\`Foo\`}</p>
672+
</>
673+
<h1>
674+
<p>{\`Hello, world!\`}</p>
675+
</h1>
676+
</MDXLayout>;
677+
}
678+
679+
;
680+
MDXContent.isMDXComponent = true;"
681+
`;

‎packages/remark-mdxjs/test/fixtures/import-export.js‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)