mirror of
https://github.com/c8r/x0.git
synced 2024-10-26 15:15:04 +03:00
Support for nested routing
This commit is contained in:
parent
74818b7066
commit
3f61938204
10
README.md
10
README.md
@ -367,13 +367,13 @@ See the [example](https://github.com/c8r/x0/tree/master/examples/webpack-config)
|
||||
|
||||
**REMOVE BEFORE MERGING**
|
||||
|
||||
- [ ] markdown scope
|
||||
- [ ] default route sorting
|
||||
- [x] deep require context
|
||||
- [ ] route dirname/full path
|
||||
- [ ] minimatch
|
||||
- [ ] pass front-matter as props
|
||||
- [ ] props.Component in custom apps
|
||||
- [x] route dirname/full path
|
||||
- [x] pass front-matter as props
|
||||
- [x] markdown scope
|
||||
- [x] deep require context
|
||||
- [x] minimatch
|
||||
- [x] move client modules to src
|
||||
- [x] adjust resolve
|
||||
|
||||
|
18
docs/_app.js
18
docs/_app.js
@ -1,5 +1,6 @@
|
||||
import React from 'react'
|
||||
import * as scope from 'rebass'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { ScopeProvider } from '../src'
|
||||
import {
|
||||
Flex,
|
||||
@ -13,15 +14,24 @@ export default class App extends React.Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { render } = this.props
|
||||
console.log('custom app', this.props.routes)
|
||||
const { routes, route, render } = this.props
|
||||
console.log('custom app', routes)
|
||||
console.log('route', route)
|
||||
|
||||
return (
|
||||
<ScopeProvider scope={scope}>
|
||||
<Flex>
|
||||
{false && (
|
||||
{true && (
|
||||
<Box p={2} flex='none' width={192}>
|
||||
custom app
|
||||
<ul>
|
||||
{routes.map(route => (
|
||||
<li key={route.key}>
|
||||
<Link to={route.href}>
|
||||
{route.name} <code>({route.path})</code>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Box>
|
||||
)}
|
||||
<Box width={1} p={3}>
|
||||
|
@ -1,46 +0,0 @@
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import * as Rebass from 'rebass'
|
||||
import { heading, link } from '@compositor/md'
|
||||
|
||||
const Pre = styled(Rebass.Pre)({
|
||||
borderRadius: '8px'
|
||||
})
|
||||
|
||||
export default {
|
||||
...Rebass,
|
||||
h1: heading(props =>
|
||||
<Rebass.Heading
|
||||
{...props}
|
||||
is='h1'
|
||||
fontSize={6}
|
||||
mt={3}
|
||||
/>),
|
||||
h2: heading(props =>
|
||||
<Rebass.Heading
|
||||
{...props}
|
||||
is='h2'
|
||||
fontSize={5}
|
||||
mt={3}
|
||||
mb={2}
|
||||
/>),
|
||||
h3: heading(props =>
|
||||
<Rebass.Heading
|
||||
{...props}
|
||||
is='h3'
|
||||
fontSize={4}
|
||||
mt={2}
|
||||
/>),
|
||||
a: link(props =>
|
||||
<Rebass.Link
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
pre: props =>
|
||||
<Pre
|
||||
{...props}
|
||||
p={3}
|
||||
mb={3}
|
||||
bg='#f6f6fc'
|
||||
/>
|
||||
}
|
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Components
|
||||
---
|
||||
import { Box } from 'rebass'
|
||||
|
||||
# Components
|
||||
|
||||
@ -11,3 +12,8 @@ This is a live/editable code block:
|
||||
```.jsx
|
||||
<Box p={4} bg='tomato'>Hello</Box>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
<Box>fm title: {frontMatter.title}</Box>
|
||||
|
||||
|
@ -26,12 +26,18 @@ export default class extends React.Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { match } = this.props
|
||||
|
||||
return <div>
|
||||
<pre>dynamic routing</pre>
|
||||
<Link to='/'>Home</Link>
|
||||
<Link to='/dynamic'>Dynamic Routes</Link>
|
||||
<Link to='/dynamic/hello'>Hello</Link>
|
||||
<Link to='/dynamic/hi'>Hi</Link>
|
||||
|
||||
{match.params.id && (
|
||||
<h1>{match.params.id}</h1>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
@ -1,2 +1,4 @@
|
||||
|
||||
# Examples
|
||||
|
||||
- [Button](Button.md)
|
||||
|
@ -4,7 +4,6 @@ import {
|
||||
} from 'rebass'
|
||||
import styled from 'styled-components'
|
||||
import Readme from '../README.md'
|
||||
import scope from './_scope'
|
||||
|
||||
const Prose = styled.div([], {
|
||||
'& img': {
|
||||
@ -20,8 +19,6 @@ const Prose = styled.div([], {
|
||||
export default props =>
|
||||
<Container py={5}>
|
||||
<Prose>
|
||||
<Readme
|
||||
scope={scope}
|
||||
/>
|
||||
<Readme />
|
||||
</Prose>
|
||||
</Container>
|
@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Hello JSX
|
||||
scope: import scope from './_scope'
|
||||
---
|
||||
import { Box, Heading, Text, Link } from 'rebass'
|
||||
|
||||
<Box px={3} py={4}>
|
||||
<Heading is='h1' mb={2}>
|
||||
{props.title}
|
||||
|
@ -2,7 +2,7 @@
|
||||
"name": "@compositor/x0",
|
||||
"version": "5.0.8",
|
||||
"description": "Zero-config React development environment and static site generator",
|
||||
"main": "index.js",
|
||||
"main": "src/index.js",
|
||||
"bin": {
|
||||
"x0": "cli.js"
|
||||
},
|
||||
|
24
src/entry.js
24
src/entry.js
@ -10,10 +10,10 @@ import {
|
||||
Link,
|
||||
withRouter
|
||||
} from 'react-router-dom'
|
||||
import { Provider as RebassProvider } from 'rebass'
|
||||
import minimatch from 'minimatch'
|
||||
|
||||
import Catch from './Catch'
|
||||
import ScopeProvider from './ScopeProvider'
|
||||
import FileList from './FileList'
|
||||
import ScrollTop from './ScrollTop'
|
||||
|
||||
@ -23,17 +23,13 @@ const req = require.context(DIRNAME, true, /\.(js|md|mdx|jsx)$/)
|
||||
const { filename, basename = '', disableScroll } = OPTIONS
|
||||
const index = filename ? path.basename(filename, path.extname(filename)) : 'index'
|
||||
|
||||
req.keys().forEach(key => {
|
||||
console.log(key, minimatch(key.replace(/^\.\//, ''), MATCH) )
|
||||
})
|
||||
|
||||
const getComponents = req => req.keys()
|
||||
.filter(key => !MATCH || minimatch(key.replace(/^\.\//, ''), MATCH))
|
||||
.map(key => ({
|
||||
key,
|
||||
name: path.basename(key, path.extname(key)),
|
||||
module: req(key),
|
||||
Component: req(key).default || req(key)
|
||||
Component: req(key).default || req(key),
|
||||
}))
|
||||
.filter(component => !/^(\.|_)/.test(component.name))
|
||||
.filter(component => typeof component.Component === 'function')
|
||||
@ -58,14 +54,20 @@ const App = APP ? (require(APP).default || require(APP)) : DefaultApp
|
||||
export const getRoutes = async (components = initialComponents) => {
|
||||
const routes = await components.map(async ({ key, name, module, Component }) => {
|
||||
const exact = name === index
|
||||
let pathname = exact ? '/' : '/' + name
|
||||
const props = Component.getInitialProps
|
||||
name = exact ? '/' : '/' + name
|
||||
const dirname = path.dirname(key).replace(/^\./, '')
|
||||
let pathname = dirname + (exact ? '/' : name)
|
||||
const href = pathname
|
||||
const initialProps = Component.getInitialProps
|
||||
? await Component.getInitialProps({ path: pathname })
|
||||
: {}
|
||||
const meta = module.frontMatter || {}
|
||||
const props = { ...meta, ...initialProps }
|
||||
pathname = props.path || pathname
|
||||
return {
|
||||
key: name,
|
||||
name,
|
||||
href,
|
||||
path: pathname,
|
||||
exact,
|
||||
module,
|
||||
@ -98,15 +100,13 @@ export default class Root extends React.Component {
|
||||
path = '/'
|
||||
} = this.props
|
||||
|
||||
console.log('App', App.defaultProps)
|
||||
|
||||
return (
|
||||
<Router
|
||||
context={{}}
|
||||
basename={basename}
|
||||
location={path}>
|
||||
<React.Fragment>
|
||||
<ScopeProvider>
|
||||
<RebassProvider>
|
||||
<Catch>
|
||||
<RouterState
|
||||
routes={routes}
|
||||
@ -135,7 +135,7 @@ export default class Root extends React.Component {
|
||||
/>
|
||||
</Catch>
|
||||
{!disableScroll && <ScrollTop />}
|
||||
</ScopeProvider>
|
||||
</RebassProvider>
|
||||
</React.Fragment>
|
||||
</Router>
|
||||
)
|
||||
|
@ -1,3 +1,7 @@
|
||||
export { default as ScopeProvider } from './ScopeProvider'
|
||||
export { default as LiveEditor } from './LiveEditor'
|
||||
export { default as LivePreview } from './LivePreview'
|
||||
export { default as FileList } from './FileList'
|
||||
export { default as Catch } from './Catch'
|
||||
export { default as ScrollTop } from './ScrollTop'
|
||||
export { default as scope } from './scope'
|
||||
|
Loading…
Reference in New Issue
Block a user