Skip to content

Commit 366ddb4

Browse files
wooormwooorm
committed
Update examples in readme
1 parent 7bcd705 commit 366ddb4

File tree

3 files changed

+56
-50
lines changed

3 files changed

+56
-50
lines changed

‎docs/docs/getting-started.server.mdx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const info = {
55
{name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
66
],
77
published: new Date('2021-10-05'),
8-
modified: new Date('2022-02-01')
8+
modified: new Date('2022-06-17')
99
}
1010

1111
# Getting started
@@ -548,8 +548,9 @@ the loader to the webpack config, by rewiring `react-scripts` using
548548
[CRACO](http://github.com/gsoft-inc/craco).
549549

550550
<Note type="info">
551-
**Note**: warnings about CRACO having `incorrect peer dependency
552-
"react-scripts@^4.0.0"` can be ignored for the above to work.
551+
**Note**: warnings about CRACO having
552+
`incorrect peer dependency "react-scripts@^4.0.0"`
553+
can be ignored for the above to work.
553554
</Note>
554555

555556
See also [¶ Webpack][webpack], which is used in CRA, and see [¶ React][react],

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const info = {
55
{name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
66
],
77
published: new Date('2021-09-30'),
8-
modified: new Date('2021-11-14')
8+
modified: new Date('2022-06-17')
99
}
1010

1111
# Using MDX
@@ -64,18 +64,19 @@ import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runti
6464

6565
export const Thing = () => _jsx(_Fragment, {children: 'World'})
6666

67-
function MDXContent(props = {}) {
68-
const {wrapper: MDXLayout} = props.components || ({})
69-
return MDXLayout
70-
? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, {})}))
71-
: _createMdxContent()
72-
function _createMdxContent() {
73-
const _components = Object.assign({h1: 'h1'}, props.components)
74-
return _jsxs(_components.h1, {children: ['Hello, ', _jsx(Thing, {})]})
75-
}
67+
function _createMdxContent(props) {
68+
const _components = Object.assign({h1: 'h1'}, props.components)
69+
return _jsxs(_components.h1, {
70+
children: ['Hello ', _jsx(Thing, {})]
71+
})
7672
}
7773

78-
export default MDXContent
74+
export default function MDXContent(props = {}) {
75+
const {wrapper: MDXLayout} = props.components || {}
76+
return MDXLayout
77+
? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, props)}))
78+
: _createMdxContent(props)
79+
}
7980
```
8081

8182
Some more observations:

‎packages/mdx/readme.md‎

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -92,20 +92,21 @@ Yields roughly:
9292
/* @jsxRuntime automatic @jsxImportSource react */
9393
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime'
9494

95-
export const Thing = () => _jsx(_Fragment, {children: 'World!'})
95+
export const Thing = () => _jsx(_Fragment, {children: 'World'})
9696

97-
function MDXContent(props = {}) {
98-
const {wrapper: MDXLayout} = props.components || ({})
99-
return MDXLayout
100-
? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, {})}))
101-
: _createMdxContent()
102-
function _createMdxContent() {
103-
const _components = Object.assign({h1: 'h1'}, props.components)
104-
return _jsxs(_components.h1, {children: ['Hello, ', _jsx(Thing, {})]})
105-
}
97+
function _createMdxContent(props) {
98+
const _components = Object.assign({h1: 'h1'}, props.components)
99+
return _jsxs(_components.h1, {
100+
children: ['Hello ', _jsx(Thing, {})]
101+
})
106102
}
107103

108-
export default MDXContent
104+
export default function MDXContent(props = {}) {
105+
const {wrapper: MDXLayout} = props.components || {}
106+
return MDXLayout
107+
? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, props)}))
108+
: _createMdxContent(props)
109+
}
109110
```
110111

111112
See [§ Using MDX][using-mdx] for more on how MDX work and how to use the result.
@@ -295,15 +296,17 @@ async function main(code) {
295296
…yields:
296297

297298
```js
298-
import {Fragment as _Fragment, jsx as _jsx} from 'react/jsx-runtime'
299+
/* @jsxRuntime automatic @jsxImportSource react */
300+
import {jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime'
299301
export const no = 3.14
300-
function MDXContent(props = {}) { /* … */ }
301-
export default MDXContent
302+
function _createMdxContent(props) { /* … */ }
303+
export default function MDXContent(props = {}) { /* … */ }
302304
```
303305

304306
```js
305307
const {Fragment: _Fragment, jsx: _jsx} = arguments[0]
306308
const no = 3.14
309+
function _createMdxContent(props) { /* … */ }
307310
function MDXContent(props = {}) { /* … */ }
308311
return {no, default: MDXContent}
309312
```
@@ -352,6 +355,7 @@ console.log(String(compileSync(code, {outputFormat: 'function-body', useDynamicI
352355
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]
353356
const {name} = await import('./meta.js')
354357
const {no} = await import('./numbers.js')
358+
function _createMdxContent(props) { /* … */ }
355359
function MDXContent(props = {}) { /* … */ }
356360
return {no, default: MDXContent}
357361
```
@@ -393,6 +397,7 @@ async function main() {
393397
```js
394398
import {Fragment as _Fragment, jsx as _jsx} from 'react/jsx-runtime'
395399
export {number} from 'https://a.full/data.js'
400+
function _createMdxContent(props) { /* … */ }
396401
function MDXContent(props = {}) { /* … */ }
397402
export default MDXContent
398403
```
@@ -537,20 +542,19 @@ compile(file, {providerImportSource: '@mdx-js/react'})
537542

538543
export const Thing = () => _jsx(_Fragment, {children: 'World!'})
539544

540-
function MDXContent(props = {}) {
541-
- const {wrapper: MDXLayout} = props.components || ({})
545+
function _createMdxContent(props) {
546+
- const _components = Object.assign({h1: 'h1'}, props.components)
547+
+ const _components = Object.assign({h1: 'h1'}, _provideComponents(), props.components)
548+
return _jsxs(_components.h1, {children: ['Hello ', _jsx(Thing, {})]})
549+
}
550+
551+
export default function MDXContent(props = {}) {
552+
- const {wrapper: MDXLayout} = props.components || {}
542553
+ const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components)
554+
543555
return MDXLayout
544556
? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, {})}))
545557
: _createMdxContent()
546-
function _createMdxContent() {
547-
- const _components = Object.assign({h1: 'h1'}, props.components)
548-
+ const _components = Object.assign({h1: 'h1'}, _provideComponents(), props.components)
549-
return _jsxs(_components.h1, {children: ['Hello, ', _jsx(Thing, {})]})
550-
}
551-
}
552-
553-
export default MDXContent
554558
```
555559

556560
</details>
@@ -579,20 +583,20 @@ compile(file, {jsx: true})
579583
-export const Thing = () => _jsx(_Fragment, {children: 'World!'})
580584
+export const Thing = () => <>World!</>
581585

582-
function MDXContent(props = {}) {
583-
const {wrapper: MDXLayout} = props.components || ({})
584-
return MDXLayout
585-
- ? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, {})}))
586-
+ ? <MDXLayout {...props}><_createMdxContent /></MDXLayout>
587-
: _createMdxContent()
588-
function _createMdxContent() {
589-
const _components = Object.assign({h1: 'h1'}, props.components)
590-
- return _jsxs(_components.h1, {children: ['Hello, ', _jsx(Thing, {})]})
591-
+ return <_components.h1>{"Hello, "}<Thing /></_components.h1>
592-
}
586+
function _createMdxContent(props) {
587+
const _components = Object.assign({h1: 'h1'}, props.components)
588+
- return _jsxs(_components.h1, {children: ['Hello ', _jsx(Thing, {})]})
589+
+ return <_components.h1>{"Hello "}<Thing /></_components.h1>
593590
}
594591

595-
export default MDXContent
592+
export default function MDXContent(props = {}) {
593+
const {wrapper: MDXLayout} = props.components || {}
594+
return MDXLayout
595+
- ? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, props)}))
596+
+ ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout>
597+
: _createMdxContent(props)
598+
}
599+
}
596600
```
597601

598602
</details>

0 commit comments

Comments
 (0)