Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Object spread #2328

Merged
merged 1 commit into from
Jul 18, 2023
+82 −34
Merged

Object spread #2328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs/docs/using-mdx.server.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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]
Copy link
Member Author

Choose a reason for hiding this comment

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

This else was reached, but removing it doesn’t change the test output and I’m not sure what it’s for.

Copy link
Member

Choose a reason for hiding this comment

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

I don’t remember and I don’t know from looking at just this PR


/** @type {ObjectPattern | undefined} */
let componentsPattern
Expand Down
22 changes: 17 additions & 5 deletions packages/mdx/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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',
Copy link
Member Author

Choose a reason for hiding this comment

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

A test combining these was missing.

() => {
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
Open in desktop
Original file line number Diff line number Diff line change
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;;;;;;;;;;;;',
Copy link
Member Author

Choose a reason for hiding this comment

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

I honestly have no idea what this change means.

Copy link
Member

Choose a reason for hiding this comment

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

I guess another identifier was added

'should add a source map'
)

Expand Down