Skip to content

Commit

Permalink
Refactor output to use spread, not Object.assign
Browse files Browse the repository at this point in the history 
Closes GH-2328.

Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com>
Reviewed-by: Titus Wormer <tituswormer@gmail.com>
  • Loading branch information
@remcohaszing
remcohaszing committed Jul 18, 2023
1 parent 57ebce5 commit 8a56312
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 34 deletions.
5 changes: 4 additions & 1 deletion docs/docs/using-mdx.server.mdx
View file
Expand Up @@ -65,7 +65,10 @@ import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runti
export const Thing = () => _jsx(_Fragment, {children: 'World'})

function _createMdxContent(props) {
const _components = Object.assign({h1: 'h1'}, props.components)
const _components = {
h1: 'h1',
...props.components
}
return _jsxs(_components.h1, {
children: ['Hello ', _jsx(Thing, {})]
})
Expand Down
23 changes: 8 additions & 15 deletions packages/mdx/lib/plugin/recma-jsx-rewrite.js
View file
Expand Up @@ -9,6 +9,7 @@
* @typedef {import('estree-jsx').ObjectPattern} ObjectPattern
* @typedef {import('estree-jsx').Program} Program
* @typedef {import('estree-jsx').Property} Property
* @typedef {import('estree-jsx').SpreadElement} SpreadElement
* @typedef {import('estree-jsx').Statement} Statement
* @typedef {import('estree-jsx').VariableDeclarator} VariableDeclarator
*
Expand Down Expand Up @@ -222,7 +223,7 @@ export function recmaJsxRewrite(options) {
}
},
leave(node) {
/** @type {Array<Property>} */
/** @type {Array<Property | SpreadElement>} */
const defaults = []
/** @type {Array<string>} */
const actual = []
Expand Down Expand Up @@ -300,32 +301,24 @@ export function recmaJsxRewrite(options) {
}

if (defaults.length > 0 || parameters.length > 1) {
parameters.unshift({
type: 'ObjectExpression',
properties: defaults
})
for (const parameter of parameters) {
defaults.push({type: 'SpreadElement', argument: parameter})
}
}

// If we’re getting components from several sources, merge them.
/** @type {Expression} */
let componentsInit =
parameters.length > 1
? {
type: 'CallExpression',
callee: toIdOrMemberExpression(['Object', 'assign']),
arguments: parameters,
optional: false
}
: parameters[0].type === 'MemberExpression'
? // If we’re only getting components from `props.components`,
defaults.length > 0
? {type: 'ObjectExpression', properties: defaults}
: // If we’re only getting components from `props.components`,
// make sure it’s defined.
{
type: 'LogicalExpression',
operator: '||',
left: parameters[0],
right: {type: 'ObjectExpression', properties: []}
}
: parameters[0]

/** @type {ObjectPattern | undefined} */
let componentsPattern
Expand Down
22 changes: 17 additions & 5 deletions packages/mdx/readme.md
View file
Expand Up @@ -92,7 +92,10 @@ import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runti
export const Thing = () => _jsx(_Fragment, {children: 'World'})

function _createMdxContent(props) {
const _components = Object.assign({h1: 'h1'}, props.components)
const _components = {
h1: 'h1',
...props.components
}
return _jsxs(_components.h1, {
children: ['Hello ', _jsx(Thing, {})]
})
Expand Down Expand Up @@ -533,14 +536,20 @@ compile(file, {providerImportSource: '@mdx-js/react'})
export const Thing = () => _jsx(_Fragment, {children: 'World!'})

function _createMdxContent(props) {
- const _components = Object.assign({h1: 'h1'}, props.components)
+ const _components = Object.assign({h1: 'h1'}, _provideComponents(), props.components)
const _components = {
h1: 'h1',
+ ..._provideComponents(),
...props.components
}
return _jsxs(_components.h1, {children: ['Hello ', _jsx(Thing, {})]})
}

export default function MDXContent(props = {}) {
- const {wrapper: MDXLayout} = props.components || {}
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components)
+ const {wrapper: MDXLayout} = {
+ ..._provideComponents(),
+ ...props.components
+ }

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

function _createMdxContent(props) {
const _components = Object.assign({h1: 'h1'}, props.components)
const _components = {
h1: 'h1',
...props.components
}
- return _jsxs(_components.h1, {children: ['Hello ', _jsx(Thing, {})]})
+ return <_components.h1>{"Hello "}<Thing /></_components.h1>
}
Expand Down
64 changes: 52 additions & 12 deletions packages/mdx/test/compile.js
View file
Expand Up @@ -895,10 +895,11 @@ test('jsx', async (t) => {
[
'/*@jsxRuntime automatic @jsxImportSource react*/',
'function _createMdxContent(props) {',
' const _components = Object.assign({',
' const _components = {',
' em: "em",',
' p: "p"',
' }, props.components);',
' p: "p",',
' ...props.components',
' };',
' return <_components.p><_components.em>{"a"}</_components.em></_components.p>;',
'}',
'function MDXContent(props = {}) {',
Expand Down Expand Up @@ -978,9 +979,10 @@ test('jsx', async (t) => {
[
'/*@jsxRuntime automatic @jsxImportSource react*/',
'function _createMdxContent(props) {',
' const _components = Object.assign({',
' "a-b": "a-b"',
' }, props.components), _component0 = _components["a-b"];',
' const _components = {',
' "a-b": "a-b",',
' ...props.components',
' }, _component0 = _components["a-b"];',
' return <>{<_component0></_component0>}</>;',
'}',
'function MDXContent(props = {}) {',
Expand All @@ -999,9 +1001,10 @@ test('jsx', async (t) => {
[
'/*@jsxRuntime automatic @jsxImportSource react*/',
'function _createMdxContent(props) {',
' const _components = Object.assign({',
' p: "p"',
' }, props.components);',
' const _components = {',
' p: "p",',
' ...props.components',
' };',
' return <_components.p>{"Hello "}{props.name}</_components.p>;',
'}',
'function MDXContent(props = {}) {',
Expand Down Expand Up @@ -1030,9 +1033,10 @@ test('jsx', async (t) => {
' return <section {...props} />;',
'};',
'function _createMdxContent(props) {',
' const _components = Object.assign({',
' p: "p"',
' }, props.components);',
' const _components = {',
' p: "p",',
' ...props.components',
' };',
' return <_components.p>{"a"}</_components.p>;',
'}',
'function MDXContent(props = {}) {',
Expand All @@ -1045,6 +1049,42 @@ test('jsx', async (t) => {
}
)

await t.test(
'should combine passing `components` w/ props and a provider',
() => {
assert.equal(
String(
compileSync('a', {
jsx: true,
providerImportSource: '@mdx-js/react'
})
),
[
'/*@jsxRuntime automatic @jsxImportSource react*/',
'import {useMDXComponents as _provideComponents} from "@mdx-js/react";',
'function _createMdxContent(props) {',
' const _components = {',
' p: "p",',
' ..._provideComponents(),',
' ...props.components',
' };',
' return <_components.p>{"a"}</_components.p>;',
'}',
'function MDXContent(props = {}) {',
' const {wrapper: MDXLayout} = {',
' ..._provideComponents(),',
' ...props.components',
' };',
' return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);',

'}',
'export default MDXContent;',
''
].join('\n')
)
}
)

await t.test('should serialize double quotes in attribute values', () => {
assert.match(
String(compileSync("{<w x='y \" z' />}", {jsx: true})),
Expand Down
2 changes: 1 addition & 1 deletion packages/rollup/test/index.js
View file
Expand Up @@ -34,7 +34,7 @@ test('@mdx-js/rollup', async () => {

assert.equal(
output[0].map ? output[0].map.mappings : undefined,
';;;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;;;;;;;;;;;;',
';;;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;;;;;;;;;;;;',
'should add a source map'
)

Expand Down

1 comment on commit 8a56312

@vercel
Copy link

@vercel vercel bot commented on 8a56312 Jul 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mdx – ./

mdx-git-main-mdx.vercel.app
mdx-mdx.vercel.app
mdxjs.com
v2.mdxjs.com

Please sign in to comment.