1
1
mirror of https://github.com/c8r/x0.git synced 2024-08-17 01:10:32 +03:00

Merge pull request #82 from c8r/fix-scope

Allow scope from ScopeProvider
This commit is contained in:
Brent Jackson 2018-07-07 10:52:35 -04:00 committed by GitHub
commit c51935e3b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 71 additions and 48 deletions

View File

@ -65,6 +65,24 @@ Using code fences means that your example code will render in any standard markd
**Important Note**: To include custom components in scope for the live preview code fences, **Important Note**: To include custom components in scope for the live preview code fences,
you must use the `ScopeProvider` in a [custom App component](custom-app). you must use the `ScopeProvider` in a [custom App component](custom-app).
#### MDX
The LiveEditor also supports [MDX][] format. Use the `.mdx` language attribute to use MDX.
````md
```.mdx
# Hello MDX
<Button>Hello</Button>
```
````
```.mdx
# Hello MDX
<Button>Hello</Button>
```
### Live Preview ### Live Preview
@ -105,3 +123,4 @@ Front matter will be passed to the [HTML template](customizing) to allow control
[rr-link]: https://reacttraining.com/react-router/web/api/Link [rr-link]: https://reacttraining.com/react-router/web/api/Link
[site]: https://compositor.io/x0/markdown [site]: https://compositor.io/x0/markdown
[fm]: https://github.com/jonschlinkert/gray-matter [fm]: https://github.com/jonschlinkert/gray-matter
[MDX]: https://github.com/mdx-js/mdx

View File

@ -10,7 +10,6 @@ import { Box } from 'rebass'
import { color, borderColor } from 'styled-system' import { color, borderColor } from 'styled-system'
import styled from 'styled-components' import styled from 'styled-components'
import mdx from '@mdx-js/mdx' import mdx from '@mdx-js/mdx'
import { MDXTag } from '@mdx-js/tag'
const transformCode = src => `<React.Fragment>${src}</React.Fragment>` const transformCode = src => `<React.Fragment>${src}</React.Fragment>`
const transformMdx = src => { const transformMdx = src => {
@ -55,30 +54,26 @@ export default ({
scope = {}, scope = {},
render, render,
mdx mdx
}) => { }) => (
const fullScope = { MDXTag, components: {}, ...scope } <Box mb={4}>
<ScopeConsumer defaultScope={scope}>
return ( {scope => (
<Box mb={4}> <LiveProvider
<ScopeConsumer defaultScope={fullScope}> code={code}
{scope => ( scope={scope}
<LiveProvider mountStylesheet={false}
code={code} transformCode={mdx ? transformMdx : transformCode}>
scope={fullScope} {typeof render === 'function' ? (
mountStylesheet={false} render({ code, scope })
transformCode={mdx ? transformMdx : transformCode}> ) : (
{typeof render === 'function' ? ( <React.Fragment>
render({ code, fullScope }) <Preview />
) : ( <Editor />
<React.Fragment> <Err />
<Preview /> </React.Fragment>
<Editor /> )}
<Err /> </LiveProvider>
</React.Fragment> )}
)} </ScopeConsumer>
</LiveProvider> </Box>
)} )
</ScopeConsumer>
</Box>
)
}

View File

@ -2,6 +2,7 @@ import React from 'react'
import { withRouter, Link } from 'react-router-dom' import { withRouter, Link } from 'react-router-dom'
import rebassMarkdown from '@rebass/markdown' import rebassMarkdown from '@rebass/markdown'
import { Pre } from 'rebass' import { Pre } from 'rebass'
import { MDXTag } from '@mdx-js/tag'
import LiveEditor from './LiveEditor' import LiveEditor from './LiveEditor'
import LivePreview from './LivePreview' import LivePreview from './LivePreview'
@ -67,16 +68,20 @@ export const code = ({
const pre = props => props.children const pre = props => props.children
const scope = rebassMarkdown({ const scope = {
a: { MDXTag,
is: link components: {}, // does mdx need this?
}, ...rebassMarkdown({
code: { a: {
is: code is: link
}, },
pre: { code: {
is: pre, is: code
} },
}) pre: {
is: pre,
}
})
}
export default scope export default scope

View File

@ -222,8 +222,11 @@ test('SidebarLayout renders', t => {
}) })
const blacklist = { const blacklist = {
pre: true pre: true,
MDXTag: true,
components: true
} }
Object.keys(scope) Object.keys(scope)
.filter(key => !blacklist[key]) .filter(key => !blacklist[key])
.forEach(key => { .forEach(key => {

View File

@ -37,7 +37,7 @@ Generated by [AVA](https://ava.li).
<div <div
active={true} active={true}
className="sc-jAaTju esAkYv sc-bdVaJa iHZvIS" className="sc-jAaTju esAkYv sc-bdVaJa jTkvro sc-bdVaJa iHZvIS"
> >
Hello Hello
</div> </div>
@ -120,10 +120,10 @@ Generated by [AVA](https://ava.li).
className="sc-hEsumM dahmKO" className="sc-hEsumM dahmKO"
> >
<div <div
className="sc-fMiknA jgVkvN sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS" className="sc-fMiknA jgVkvN sc-bwzfXH loXcNn sc-bdVaJa dYrRxR sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS sc-bdVaJa iHZvIS"
> >
<button <button
className="sc-gzVnrw ghjHJc sc-ifAKCX fFPXoq" className="sc-gzVnrw ghjHJc sc-ifAKCX cwpXPb sc-ifAKCX fFPXoq"
onClick={Function onClick {}} onClick={Function onClick {}}
title="Toggle Menu" title="Toggle Menu"
> >
@ -152,7 +152,7 @@ Generated by [AVA](https://ava.li).
/> />
</div>, </div>,
<div <div
className="sc-jnlKLf fQRDBU sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS" className="sc-jnlKLf fQRDBU sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS sc-bdVaJa iHZvIS"
> >
<div <div
className="sc-fYxtnH VTytv" className="sc-fYxtnH VTytv"
@ -160,7 +160,7 @@ Generated by [AVA](https://ava.li).
open={false} open={false}
> >
<div <div
className="sc-fMiknA fVCXKt sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS" className="sc-fMiknA fVCXKt sc-bwzfXH loXcNn sc-bdVaJa dTDQGU sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS sc-bdVaJa iHZvIS"
> >
<h2 <h2
className="sc-VigVT gPiNJC" className="sc-VigVT gPiNJC"
@ -210,7 +210,7 @@ Generated by [AVA](https://ava.li).
tabIndex={undefined} tabIndex={undefined}
> >
<div <div
className="sc-jAaTju jHRdEk sc-bdVaJa iHZvIS" className="sc-jAaTju jHRdEk sc-bdVaJa bAyxfd sc-bdVaJa iHZvIS"
> >
<div <div
className="sc-ktHwxA dvWgCn sc-bdVaJa iHZvIS" className="sc-ktHwxA dvWgCn sc-bdVaJa iHZvIS"
@ -218,7 +218,7 @@ Generated by [AVA](https://ava.li).
Content Content
</div> </div>
<div <div
className="sc-bwzfXH liBCIH sc-bdVaJa gkOtLU" className="sc-bwzfXH liBCIH sc-bdVaJa gkOtLU sc-bdVaJa gkOtLU"
> >
<div <div
className="sc-bdVaJa LbkC" className="sc-bdVaJa LbkC"
@ -271,7 +271,8 @@ Generated by [AVA](https://ava.li).
> Snapshot 1 > Snapshot 1
<blockquote <blockquote
className="sc-chPdSV gReYnD sc-gqjmRU cbBDfA" className="sc-chPdSV gReYnD sc-gqjmRU NYUxz"
fontWeight="bold"
/> />
## scope.code renders ## scope.code renders

Binary file not shown.