Skip to content

Commit 8a56312

Browse files
remcohaszingremcohaszing
authored
Refactor output to use spread, not Object.assign
Closes GH-2328. Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com> Reviewed-by: Titus Wormer <tituswormer@gmail.com>
1 parent 57ebce5 commit 8a56312

File tree

5 files changed

+82
-34
lines changed

5 files changed

+82
-34
lines changed

‎docs/docs/using-mdx.server.mdx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,10 @@ import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runti
6565
export const Thing = () => _jsx(_Fragment, {children: 'World'})
6666

6767
function _createMdxContent(props) {
68-
const _components = Object.assign({h1: 'h1'}, props.components)
68+
const _components = {
69+
h1: 'h1',
70+
...props.components
71+
}
6972
return _jsxs(_components.h1, {
7073
children: ['Hello ', _jsx(Thing, {})]
7174
})

‎packages/mdx/lib/plugin/recma-jsx-rewrite.js

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
* @typedef {import('estree-jsx').ObjectPattern} ObjectPattern
1010
* @typedef {import('estree-jsx').Program} Program
1111
* @typedef {import('estree-jsx').Property} Property
12+
* @typedef {import('estree-jsx').SpreadElement} SpreadElement
1213
* @typedef {import('estree-jsx').Statement} Statement
1314
* @typedef {import('estree-jsx').VariableDeclarator} VariableDeclarator
1415
*
@@ -222,7 +223,7 @@ export function recmaJsxRewrite(options) {
222223
}
223224
},
224225
leave(node) {
225-
/** @type {Array<Property>} */
226+
/** @type {Array<Property | SpreadElement>} */
226227
const defaults = []
227228
/** @type {Array<string>} */
228229
const actual = []
@@ -300,32 +301,24 @@ export function recmaJsxRewrite(options) {
300301
}
301302

302303
if (defaults.length > 0 || parameters.length > 1) {
303-
parameters.unshift({
304-
type: 'ObjectExpression',
305-
properties: defaults
306-
})
304+
for (const parameter of parameters) {
305+
defaults.push({type: 'SpreadElement', argument: parameter})
306+
}
307307
}
308308

309309
// If we’re getting components from several sources, merge them.
310310
/** @type {Expression} */
311311
let componentsInit =
312-
parameters.length > 1
313-
? {
314-
type: 'CallExpression',
315-
callee: toIdOrMemberExpression(['Object', 'assign']),
316-
arguments: parameters,
317-
optional: false
318-
}
319-
: parameters[0].type === 'MemberExpression'
320-
? // If we’re only getting components from `props.components`,
312+
defaults.length > 0
313+
? {type: 'ObjectExpression', properties: defaults}
314+
: // If we’re only getting components from `props.components`,
321315
// make sure it’s defined.
322316
{
323317
type: 'LogicalExpression',
324318
operator: '||',
325319
left: parameters[0],
326320
right: {type: 'ObjectExpression', properties: []}
327321
}
328-
: parameters[0]
329322

330323
/** @type {ObjectPattern | undefined} */
331324
let componentsPattern

‎packages/mdx/readme.md

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,10 @@ import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runti
9292
export const Thing = () => _jsx(_Fragment, {children: 'World'})
9393

9494
function _createMdxContent(props) {
95-
const _components = Object.assign({h1: 'h1'}, props.components)
95+
const _components = {
96+
h1: 'h1',
97+
...props.components
98+
}
9699
return _jsxs(_components.h1, {
97100
children: ['Hello ', _jsx(Thing, {})]
98101
})
@@ -533,14 +536,20 @@ compile(file, {providerImportSource: '@mdx-js/react'})
533536
export const Thing = () => _jsx(_Fragment, {children: 'World!'})
534537

535538
function _createMdxContent(props) {
536-
- const _components = Object.assign({h1: 'h1'}, props.components)
537-
+ const _components = Object.assign({h1: 'h1'}, _provideComponents(), props.components)
539+
const _components = {
540+
h1: 'h1',
541+
+ ..._provideComponents(),
542+
...props.components
543+
}
538544
return _jsxs(_components.h1, {children: ['Hello ', _jsx(Thing, {})]})
539545
}
540546

541547
export default function MDXContent(props = {}) {
542548
- const {wrapper: MDXLayout} = props.components || {}
543-
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components)
549+
+ const {wrapper: MDXLayout} = {
550+
+ ..._provideComponents(),
551+
+ ...props.components
552+
+ }
544553

545554
return MDXLayout
546555
? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, {})}))
@@ -574,7 +583,10 @@ compile(file, {jsx: true})
574583
+export const Thing = () => <>World!</>
575584

576585
function _createMdxContent(props) {
577-
const _components = Object.assign({h1: 'h1'}, props.components)
586+
const _components = {
587+
h1: 'h1',
588+
...props.components
589+
}
578590
- return _jsxs(_components.h1, {children: ['Hello ', _jsx(Thing, {})]})
579591
+ return <_components.h1>{"Hello "}<Thing /></_components.h1>
580592
}

‎packages/mdx/test/compile.js

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -895,10 +895,11 @@ test('jsx', async (t) => {
895895
[
896896
'/*@jsxRuntime automatic @jsxImportSource react*/',
897897
'function _createMdxContent(props) {',
898-
' const _components = Object.assign({',
898+
' const _components = {',
899899
' em: "em",',
900-
' p: "p"',
901-
' }, props.components);',
900+
' p: "p",',
901+
' ...props.components',
902+
' };',
902903
' return <_components.p><_components.em>{"a"}</_components.em></_components.p>;',
903904
'}',
904905
'function MDXContent(props = {}) {',
@@ -978,9 +979,10 @@ test('jsx', async (t) => {
978979
[
979980
'/*@jsxRuntime automatic @jsxImportSource react*/',
980981
'function _createMdxContent(props) {',
981-
' const _components = Object.assign({',
982-
' "a-b": "a-b"',
983-
' }, props.components), _component0 = _components["a-b"];',
982+
' const _components = {',
983+
' "a-b": "a-b",',
984+
' ...props.components',
985+
' }, _component0 = _components["a-b"];',
984986
' return <>{<_component0></_component0>}</>;',
985987
'}',
986988
'function MDXContent(props = {}) {',
@@ -999,9 +1001,10 @@ test('jsx', async (t) => {
9991001
[
10001002
'/*@jsxRuntime automatic @jsxImportSource react*/',
10011003
'function _createMdxContent(props) {',
1002-
' const _components = Object.assign({',
1003-
' p: "p"',
1004-
' }, props.components);',
1004+
' const _components = {',
1005+
' p: "p",',
1006+
' ...props.components',
1007+
' };',
10051008
' return <_components.p>{"Hello "}{props.name}</_components.p>;',
10061009
'}',
10071010
'function MDXContent(props = {}) {',
@@ -1030,9 +1033,10 @@ test('jsx', async (t) => {
10301033
' return <section {...props} />;',
10311034
'};',
10321035
'function _createMdxContent(props) {',
1033-
' const _components = Object.assign({',
1034-
' p: "p"',
1035-
' }, props.components);',
1036+
' const _components = {',
1037+
' p: "p",',
1038+
' ...props.components',
1039+
' };',
10361040
' return <_components.p>{"a"}</_components.p>;',
10371041
'}',
10381042
'function MDXContent(props = {}) {',
@@ -1045,6 +1049,42 @@ test('jsx', async (t) => {
10451049
}
10461050
)
10471051

1052+
await t.test(
1053+
'should combine passing `components` w/ props and a provider',
1054+
() => {
1055+
assert.equal(
1056+
String(
1057+
compileSync('a', {
1058+
jsx: true,
1059+
providerImportSource: '@mdx-js/react'
1060+
})
1061+
),
1062+
[
1063+
'/*@jsxRuntime automatic @jsxImportSource react*/',
1064+
'import {useMDXComponents as _provideComponents} from "@mdx-js/react";',
1065+
'function _createMdxContent(props) {',
1066+
' const _components = {',
1067+
' p: "p",',
1068+
' ..._provideComponents(),',
1069+
' ...props.components',
1070+
' };',
1071+
' return <_components.p>{"a"}</_components.p>;',
1072+
'}',
1073+
'function MDXContent(props = {}) {',
1074+
' const {wrapper: MDXLayout} = {',
1075+
' ..._provideComponents(),',
1076+
' ...props.components',
1077+
' };',
1078+
' return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);',
1079+
1080+
'}',
1081+
'export default MDXContent;',
1082+
''
1083+
].join('\n')
1084+
)
1085+
}
1086+
)
1087+
10481088
await t.test('should serialize double quotes in attribute values', () => {
10491089
assert.match(
10501090
String(compileSync("{<w x='y \" z' />}", {jsx: true})),

‎packages/rollup/test/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ test('@mdx-js/rollup', async () => {
3434

3535
assert.equal(
3636
output[0].map ? output[0].map.mappings : undefined,
37-
';;;MAAaA,OAAU,GAAA,MAAAC,GAAA,CAAAC,QAAA,EAAA;AAAQ,EAAA,QAAA,EAAA,QAAA;;;;;;;AAE7B,IAAA,QAAA,EAAA,CAAA,SAAA,EAAAD,GAAA,CAAA,OAAA,EAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;',
37+
';;;MAAaA,OAAU,GAAA,MAAAC,GAAA,CAAAC,QAAA,EAAA;AAAQ,EAAA,QAAA,EAAA,QAAA;;;;;;;;AAE7B,IAAA,QAAA,EAAA,CAAA,SAAA,EAAAD,GAAA,CAAA,OAAA,EAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;',
3838
'should add a source map'
3939
)
4040

0 commit comments

Comments
 (0)