Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Update examples in readme
  • Loading branch information
wooorm committed Jun 17, 2022
1 parent 7bcd705 commit 366ddb4
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 50 deletions.
7 changes: 4 additions & 3 deletions docs/docs/getting-started.server.mdx
Expand Up @@ -5,7 +5,7 @@ export const info = {
{name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
],
published: new Date('2021-10-05'),
modified: new Date('2022-02-01')
modified: new Date('2022-06-17')
}

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

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

See also [¶ Webpack][webpack], which is used in CRA, and see [¶ React][react],
Expand Down
23 changes: 12 additions & 11 deletions docs/docs/using-mdx.server.mdx
Expand Up @@ -5,7 +5,7 @@ export const info = {
{name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
],
published: new Date('2021-09-30'),
modified: new Date('2021-11-14')
modified: new Date('2022-06-17')
}

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

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

function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({})
return MDXLayout
? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, {})}))
: _createMdxContent()
function _createMdxContent() {
const _components = Object.assign({h1: 'h1'}, props.components)
return _jsxs(_components.h1, {children: ['Hello, ', _jsx(Thing, {})]})
}
function _createMdxContent(props) {
const _components = Object.assign({h1: 'h1'}, props.components)
return _jsxs(_components.h1, {
children: ['Hello ', _jsx(Thing, {})]
})
}

export default MDXContent
export default function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || {}
return MDXLayout
? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, props)}))
: _createMdxContent(props)
}
```

Some more observations:
Expand Down
76 changes: 40 additions & 36 deletions packages/mdx/readme.md
Expand Up @@ -92,20 +92,21 @@ Yields roughly:
/* @jsxRuntime automatic @jsxImportSource react */
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime'

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

function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({})
return MDXLayout
? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, {})}))
: _createMdxContent()
function _createMdxContent() {
const _components = Object.assign({h1: 'h1'}, props.components)
return _jsxs(_components.h1, {children: ['Hello, ', _jsx(Thing, {})]})
}
function _createMdxContent(props) {
const _components = Object.assign({h1: 'h1'}, props.components)
return _jsxs(_components.h1, {
children: ['Hello ', _jsx(Thing, {})]
})
}

export default MDXContent
export default function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || {}
return MDXLayout
? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, props)}))
: _createMdxContent(props)
}
```

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

```js
import {Fragment as _Fragment, jsx as _jsx} from 'react/jsx-runtime'
/* @jsxRuntime automatic @jsxImportSource react */
import {jsx as _jsx, jsxs as _jsxs} from 'react/jsx-runtime'
export const no = 3.14
function MDXContent(props = {}) { /**/ }
export default MDXContent
function _createMdxContent(props) { /**/ }
export default function MDXContent(props = {}) { /**/ }
```

```js
const {Fragment: _Fragment, jsx: _jsx} = arguments[0]
const no = 3.14
function _createMdxContent(props) { /**/ }
function MDXContent(props = {}) { /**/ }
return {no, default: MDXContent}
```
Expand Down Expand Up @@ -352,6 +355,7 @@ console.log(String(compileSync(code, {outputFormat: 'function-body', useDynamicI
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]
const {name} = await import('./meta.js')
const {no} = await import('./numbers.js')
function _createMdxContent(props) { /**/ }
function MDXContent(props = {}) { /**/ }
return {no, default: MDXContent}
```
Expand Down Expand Up @@ -393,6 +397,7 @@ async function main() {
```js
import {Fragment as _Fragment, jsx as _jsx} from 'react/jsx-runtime'
export {number} from 'https://a.full/data.js'
function _createMdxContent(props) { /**/ }
function MDXContent(props = {}) { /**/ }
export default MDXContent
```
Expand Down Expand Up @@ -537,20 +542,19 @@ compile(file, {providerImportSource: '@mdx-js/react'})

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

function MDXContent(props = {}) {
- const {wrapper: MDXLayout} = props.components || ({})
function _createMdxContent(props) {
- const _components = Object.assign({h1: 'h1'}, props.components)
+ const _components = Object.assign({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)

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

export default MDXContent
```

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

function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({})
return MDXLayout
- ? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, {})}))
+ ? <MDXLayout {...props}><_createMdxContent /></MDXLayout>
: _createMdxContent()
function _createMdxContent() {
const _components = Object.assign({h1: 'h1'}, props.components)
- return _jsxs(_components.h1, {children: ['Hello, ', _jsx(Thing, {})]})
+ return <_components.h1>{"Hello, "}<Thing /></_components.h1>
}
function _createMdxContent(props) {
const _components = Object.assign({h1: 'h1'}, props.components)
- return _jsxs(_components.h1, {children: ['Hello ', _jsx(Thing, {})]})
+ return <_components.h1>{"Hello "}<Thing /></_components.h1>
}

export default MDXContent
export default function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || {}
return MDXLayout
- ? _jsx(MDXLayout, Object.assign({}, props, {children: _jsx(_createMdxContent, props)}))
+ ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout>
: _createMdxContent(props)
}
}
```

</details>
Expand Down

0 comments on commit 366ddb4

Please sign in to comment.