Skip to content

Commit 1291c30

Browse files
remcohaszingremcohaszing
committed
Change Object.assign() calls to object spread
This affects the assignment of `_components`. For JSX see syntax-tree/estree-util-build-jsx#8
1 parent aad4ba7 commit 1291c30

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
@@ -864,10 +864,11 @@ test('jsx', async (t) => {
864864
[
865865
'/*@jsxRuntime automatic @jsxImportSource react*/',
866866
'function _createMdxContent(props) {',
867-
' const _components = Object.assign({',
867+
' const _components = {',
868868
' em: "em",',
869-
' p: "p"',
870-
' }, props.components);',
869+
' p: "p",',
870+
' ...props.components',
871+
' };',
871872
' return <_components.p><_components.em>{"a"}</_components.em></_components.p>;',
872873
'}',
873874
'function MDXContent(props = {}) {',
@@ -947,9 +948,10 @@ test('jsx', async (t) => {
947948
[
948949
'/*@jsxRuntime automatic @jsxImportSource react*/',
949950
'function _createMdxContent(props) {',
950-
' const _components = Object.assign({',
951-
' "a-b": "a-b"',
952-
' }, props.components), _component0 = _components["a-b"];',
951+
' const _components = {',
952+
' "a-b": "a-b",',
953+
' ...props.components',
954+
' }, _component0 = _components["a-b"];',
953955
' return <>{<_component0></_component0>}</>;',
954956
'}',
955957
'function MDXContent(props = {}) {',
@@ -968,9 +970,10 @@ test('jsx', async (t) => {
968970
[
969971
'/*@jsxRuntime automatic @jsxImportSource react*/',
970972
'function _createMdxContent(props) {',
971-
' const _components = Object.assign({',
972-
' p: "p"',
973-
' }, props.components);',
973+
' const _components = {',
974+
' p: "p",',
975+
' ...props.components',
976+
' };',
974977
' return <_components.p>{"Hello "}{props.name}</_components.p>;',
975978
'}',
976979
'function MDXContent(props = {}) {',
@@ -999,9 +1002,10 @@ test('jsx', async (t) => {
9991002
' return <section {...props} />;',
10001003
'};',
10011004
'function _createMdxContent(props) {',
1002-
' const _components = Object.assign({',
1003-
' p: "p"',
1004-
' }, props.components);',
1005+
' const _components = {',
1006+
' p: "p",',
1007+
' ...props.components',
1008+
' };',
10051009
' return <_components.p>{"a"}</_components.p>;',
10061010
'}',
10071011
'function MDXContent(props = {}) {',
@@ -1014,6 +1018,42 @@ test('jsx', async (t) => {
10141018
}
10151019
)
10161020

1021+
await t.test(
1022+
'should combine passing `components` w/ props and a provider',
1023+
() => {
1024+
assert.equal(
1025+
String(
1026+
compileSync('a', {
1027+
jsx: true,
1028+
providerImportSource: '@mdx-js/react'
1029+
})
1030+
),
1031+
[
1032+
'/*@jsxRuntime automatic @jsxImportSource react*/',
1033+
'import {useMDXComponents as _provideComponents} from "@mdx-js/react";',
1034+
'function _createMdxContent(props) {',
1035+
' const _components = {',
1036+
' p: "p",',
1037+
' ..._provideComponents(),',
1038+
' ...props.components',
1039+
' };',
1040+
' return <_components.p>{"a"}</_components.p>;',
1041+
'}',
1042+
'function MDXContent(props = {}) {',
1043+
' const {wrapper: MDXLayout} = {',
1044+
' ..._provideComponents(),',
1045+
' ...props.components',
1046+
' };',
1047+
' return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);',
1048+
1049+
'}',
1050+
'export default MDXContent;',
1051+
''
1052+
].join('\n')
1053+
)
1054+
}
1055+
)
1056+
10171057
await t.test('should serialize double quotes in attribute values', () => {
10181058
assert.match(
10191059
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)